/* =====================================================
   COMPONENTES E EXTENSÕES DA INTERFACE
   Ordem preservada da V8: relatórios -> administração -> operacional.
===================================================== */

/* =====================================================
   ADMINISTRAÇÃO - RELATÓRIOS E MÉTRICAS
   Mantém a identidade visual clara do sistema.
===================================================== */

#adminPage {
    color: #242934;
}

#adminPage .admin-unified-header {
    margin-bottom: 18px;
}

#adminPage .admin-unified-header h1 {
    font-size: clamp(24px, 2vw, 34px);
    line-height: 1.1;
    color: #20242f;
}

#adminPage .admin-unified-header p {
    margin-top: 6px;
    font-size: clamp(12px, .9vw, 15px);
    color: #7f8590;
}

.admin-header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-period-badge {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid #e0e3e8;
    border-radius: 8px;
    background: #fff;
    color: #5d6370;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

#adminPage .admin-stats {
    gap: 12px;
}

#adminPage .admin-stat-card {
    min-height: 116px;
    padding: 18px;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(20, 24, 32, .025);
}

#adminPage .admin-stat-title,
#adminPage .admin-stat-card > span {
    display: block;
    margin-bottom: 8px;
    color: #666d79;
    font-size: 13px;
    font-weight: 500;
}

#adminPage .admin-stat-card strong {
    display: block;
    margin-bottom: 7px;
    color: #20242f;
    font-size: clamp(25px, 2vw, 35px);
    font-weight: 750;
    line-height: 1;
}

#adminPage .admin-stat-card small {
    color: #8b919c;
    font-size: 11px;
}

#adminPage .admin-kpi-purple {
    border-top: 3px solid #7622ce;
}

#adminPage .admin-kpi-orange {
    border-top: 3px solid #f07b24;
}

#adminPage .admin-kpi-green {
    border-top: 3px solid #2d9d4a;
}

#adminPage .admin-kpi-blue {
    border-top: 3px solid #3298dd;
}

#adminPage .admin-revenue-card strong {
    font-size: clamp(23px, 1.7vw, 32px);
}

.admin-mini-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
}

.admin-mini-card {
    padding: 15px 17px;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fff;
}

.admin-mini-card span {
    display: block;
    color: #6b727e;
    font-size: 12px;
}

.admin-mini-card strong {
    display: block;
    margin: 7px 0 5px;
    color: #242934;
    font-size: 22px;
}

.admin-mini-card small {
    color: #959aa4;
    font-size: 10px;
}

.admin-analytics-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.admin-revenue-products-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, .9fr);
}

.admin-week-status-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr);
}

.admin-bottom-grid {
    grid-template-columns: minmax(0, 2fr) minmax(280px, .7fr);
}

#adminPage .dashboard-panel {
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

#adminPage .dashboard-panel-header {
    margin-bottom: 12px;
}

#adminPage .dashboard-panel-header h2 {
    color: #232733;
    font-size: 15px;
    font-weight: 700;
}

#adminPage .dashboard-panel-header small {
    display: block;
    margin-top: 4px;
    color: #9499a3;
    font-size: 10px;
    font-weight: 400;
}

.admin-chart-large {
    position: relative;
    height: 300px;
    min-height: 240px;
}

.admin-top-products-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-top-product {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}

.admin-top-product-rank {
    color: #6421c5;
    font-size: 11px;
    font-weight: 800;
}

.admin-top-product-main {
    min-width: 0;
}

.admin-top-product-name {
    display: block;
    overflow: hidden;
    color: #343944;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-top-product-track {
    height: 5px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #ece9f0;
}

.admin-top-product-bar {
    height: 100%;
    min-width: 3%;
    border-radius: inherit;
    background: #6822c5;
}

.admin-top-product-value {
    text-align: right;
}

.admin-top-product-value strong {
    display: block;
    color: #252a35;
    font-size: 12px;
}

.admin-top-product-value small {
    color: #989da5;
    font-size: 9px;
}

.admin-empty-state {
    padding: 30px 12px;
    color: #969ba4;
    font-size: 11px;
    text-align: center;
}

.admin-hourly-panel {
    margin-bottom: 14px;
}

.admin-volume-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #7e8490;
    font-size: 9px;
}

.admin-volume-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.volume-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.volume-low { background: #f4f0f8; }
.volume-medium { background: #ead9f4; }
.volume-high { background: #c991e5; }
.volume-peak { background: #5d1376; }

.admin-hourly-volume {
    display: grid;
    grid-template-columns: repeat(11, minmax(62px, 1fr));
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.admin-hour-block {
    min-width: 62px;
    padding: 11px 6px;
    border: 1px solid #ebe7ef;
    border-radius: 7px;
    text-align: center;
}

.admin-hour-block span {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
}

.admin-hour-block strong {
    font-size: 13px;
}

.admin-hour-block.level-low {
    background: #f7f4f9;
    color: #707681;
}

.admin-hour-block.level-medium {
    background: #eadcf2;
    color: #5b4964;
}

.admin-hour-block.level-high {
    background: #c995df;
    color: #3d2348;
}

.admin-hour-block.level-peak {
    border-color: #5d1376;
    background: #5d1376;
    color: #fff;
}

.admin-status-chart-box {
    position: relative;
}

.admin-doughnut-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.admin-doughnut-center strong {
    color: #252a35;
    font-size: 23px;
}

.admin-doughnut-center span {
    color: #969ba5;
    font-size: 9px;
}

#adminPage .dashboard-status-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.dashboard-status-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #666d78;
    font-size: 10px;
}

.dashboard-status-legend-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}

.dashboard-status-legend-item strong {
    margin-left: auto;
    color: #363b45;
}

.admin-summary-list {
    display: flex;
    flex-direction: column;
}

.admin-summary-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 45px;
    gap: 12px;
    border-bottom: 1px solid #eff0f2;
}

.admin-summary-list > div:last-child {
    border-bottom: 0;
}

.admin-summary-list span {
    color: #626975;
    font-size: 11px;
}

.admin-summary-list strong {
    color: #252a35;
    font-size: 13px;
}

.admin-auto-update-note {
    padding: 3px 0 15px;
    color: #9a9fa8;
    font-size: 9px;
    text-align: center;
}

#adminPage .dashboard-table {
    font-size: 11px;
}

#adminPage .dashboard-table th {
    font-size: 10px;
}

#adminPage .dashboard-table td {
    font-size: 11px;
}

#adminPage .dashboard-order-status {
    font-size: 9px;
}

/* Ajustes responsivos da Administração */
@media (max-width: 1250px) {
    .admin-mini-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-revenue-products-grid,
    .admin-week-status-grid,
    .admin-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    #adminPage .admin-primary-stats,
    #adminPage .admin-business-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-header-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-period-badge {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    #adminPage .admin-primary-stats,
    #adminPage .admin-business-stats,
    .admin-mini-metrics {
        grid-template-columns: 1fr;
    }

    #adminPage .dashboard-status-legend {
        grid-template-columns: 1fr;
    }

    .admin-chart-large {
        height: 240px;
    }
}




/* =====================================================
   ADMINISTRAÇÃO - MENU, USUÁRIOS E FILTROS
===================================================== */
.admin-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 1000px;
}

.admin-module-card {
    min-height: 160px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border: 1px solid #e5e1e9;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(36, 20, 45, .04);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.admin-module-card:hover {
    transform: translateY(-2px);
    border-color: #cdb4df;
    box-shadow: 0 10px 28px rgba(80, 35, 110, .08);
}

.admin-module-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #f4ecfa;
    font-size: 28px;
}

.admin-module-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
}

.admin-module-content strong {
    color: #282330;
    font-size: 18px;
}

.admin-module-content small {
    color: #7c7580;
    font-size: 12px;
    line-height: 1.55;
}

.admin-module-arrow {
    color: #7925b7;
    font-size: 24px;
}

.admin-subview-bar {
    margin-bottom: 14px;
}

.admin-back-button,
.admin-secondary-button,
.admin-primary-button,
.admin-filter-button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.admin-back-button,
.admin-secondary-button {
    border: 1px solid #ddd7e1;
    background: #fff;
    color: #5d5662;
}

.admin-primary-button,
.admin-filter-button {
    border: 1px solid #7020ad;
    background: #7020ad;
    color: #fff;
}

.admin-danger-button {
    border-color: #e9c3c8;
    color: #b63748;
}

.admin-users-layout {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.5fr);
    gap: 16px;
    align-items: start;
}

.admin-user-form-card,
.admin-user-list-card,
.admin-report-filters {
    padding: 18px;
    border: 1px solid #e5e1e9;
    border-radius: 12px;
    background: #fff;
}

.admin-user-form-card h2,
.admin-user-list-card h2 {
    margin: 0 0 14px;
    color: #282330;
    font-size: 16px;
}

.admin-user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-field-wide {
    grid-column: 1 / -1;
}

.admin-field label,
.admin-password-form label,
.admin-filter-group label {
    color: #69616e;
    font-size: 11px;
    font-weight: 700;
}

.admin-field input,
.admin-field select,
.admin-password-form input,
.admin-filter-group input,
.admin-filter-group select {
    min-height: 40px;
    width: 100%;
    padding: 0 11px;
    border: 1px solid #ddd7e1;
    border-radius: 8px;
    background: #fff;
    color: #302a34;
    font: inherit;
    font-size: 12px;
}

.admin-user-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.admin-user-list-header h2 { margin-bottom: 4px; }
.admin-user-list-header small { color: #8b8490; font-size: 10px; }

.admin-users-list {
    display: grid;
    gap: 10px;
}

.admin-user-item {
    padding: 14px;
    border: 1px solid #e8e3eb;
    border-radius: 10px;
    background: #fff;
}

.admin-user-item.is-inactive { opacity: .68; background: #fafafa; }

.admin-user-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-user-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #efe3f7;
    color: #7020ad;
    font-weight: 800;
}

.admin-user-info { min-width: 0; flex: 1; }
.admin-user-info strong { display: block; color: #2e2832; font-size: 13px; }
.admin-user-info > span { display: block; margin-top: 3px; color: #827a86; font-size: 11px; overflow-wrap: anywhere; }
.admin-user-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.admin-role-badge,
.admin-active-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
}

.admin-role-badge { background: #f2ebf7; color: #6f298f; }
.admin-active-badge.is-active { background: #e8f6ec; color: #247a3b; }
.admin-active-badge.is-inactive { background: #f3f0f1; color: #81777d; }

.admin-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.admin-password-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee9f0;
}

.admin-password-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 6px;
}

.admin-users-empty {
    padding: 22px;
    border: 1px dashed #ddd6e1;
    border-radius: 10px;
    color: #85808a;
    text-align: center;
    font-size: 11px;
}

.admin-users-error { color: #b53a49; border-color: #ebc4ca; }

.admin-report-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
}

.admin-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 1000px) {
    .admin-users-layout,
    .admin-module-grid { grid-template-columns: 1fr; }
    .admin-report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-filter-button { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .admin-report-filters,
    .admin-user-form-grid,
    .admin-password-row { grid-template-columns: 1fr; }
    .admin-field-wide { grid-column: auto; }
    .admin-user-list-header { align-items: flex-start; flex-direction: column; }
    .admin-module-card { min-height: 130px; padding: 18px; }
}


/* =====================================================
   SINCRONIZAÇÃO E CONEXÃO DOS PEDIDOS - V4
===================================================== */
.orders-sync-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.orders-sync-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid #e3e5ea;
    border-radius: 999px;
    background: #f8f9fb;
    color: #697080;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.orders-sync-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9aa0aa;
    box-shadow: 0 0 0 3px rgba(154, 160, 170, .12);
}

.orders-sync-status.is-online {
    border-color: #c9eadf;
    background: #f1fbf7;
    color: #16785a;
}

.orders-sync-status.is-online .orders-sync-dot {
    background: #16b77c;
    box-shadow: 0 0 0 3px rgba(22, 183, 124, .13);
}

.orders-sync-status.is-syncing {
    border-color: #ddd4f5;
    background: #f8f5ff;
    color: #6746a2;
}

.orders-sync-status.is-syncing .orders-sync-dot {
    background: #7c55c7;
    animation: ordersSyncPulse 1s ease-in-out infinite;
}

.orders-sync-status.is-offline {
    border-color: #f1caca;
    background: #fff5f5;
    color: #b54040;
}

.orders-sync-status.is-offline .orders-sync-dot {
    background: #df5353;
    box-shadow: 0 0 0 3px rgba(223, 83, 83, .13);
}

@keyframes ordersSyncPulse {
    0%, 100% { opacity: .45; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.12); }
}

.orders-connection-alert {
    margin: -2px 0 14px;
    padding: 11px 13px;
    border: 1px solid #f0cccc;
    border-left: 4px solid #d95050;
    border-radius: 9px;
    background: #fff7f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.orders-connection-alert > div {
    min-width: 0;
}

.orders-connection-alert strong,
.orders-connection-alert span {
    display: block;
}

.orders-connection-alert strong {
    color: #9f3434;
    font-size: .82rem;
    margin-bottom: 2px;
}

.orders-connection-alert span {
    color: #895f5f;
    font-size: .75rem;
}

.orders-connection-alert button {
    flex: 0 0 auto;
    border: 1px solid #e1a9a9;
    border-radius: 7px;
    background: #fff;
    color: #a73d3d;
    padding: 7px 10px;
    cursor: pointer;
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
}

.orders-connection-alert button:hover {
    background: #fff0f0;
}

.status-toast.new-order-toast {
    border-left-color: #7b4bc5;
}

.status-toast.new-order-toast .toast-icon {
    background: #f0e9fb;
    color: #6c3db5;
}

.status-toast.connection-toast {
    border-left-color: #2f80ed;
}

.status-toast.connection-toast .toast-icon {
    background: #eaf3ff;
    color: #2f80ed;
}

@media (max-width: 850px) {
    .orders-sync-meta {
        width: 100%;
        justify-content: space-between;
    }

    .orders-connection-alert {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .orders-sync-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .orders-connection-alert {
        flex-direction: column;
    }

    .orders-connection-alert button {
        width: 100%;
    }
}


/* =====================================================
   V5 - TOPBAR GLOBAL / STATUS DA LOJA
===================================================== */

.main {
    padding-top: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;

    min-height: 64px;
    margin: 0 -20px 20px;
    padding: 10px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    background: rgba(246, 247, 249, .96);
    border-bottom: 1px solid #e3e6eb;
    backdrop-filter: blur(10px);
}

.topbar-store-status {
    min-width: 190px;
    min-height: 42px;
    padding: 7px 11px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    border: 1px solid #dfe3e8;
    border-radius: 9px;
    background: #fff;
    color: #313642;

    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: .2s ease;
}

.topbar-store-status:hover {
    border-color: #c9b4e9;
    box-shadow: 0 4px 14px rgba(77, 35, 124, .07);
}

.topbar-store-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #a4a9b2;
    box-shadow: 0 0 0 4px rgba(164, 169, 178, .12);
}

.topbar-store-status.is-open .topbar-store-dot {
    background: #13b981;
    box-shadow: 0 0 0 4px rgba(19, 185, 129, .12);
}

.topbar-store-status.is-closed .topbar-store-dot {
    background: #e34e68;
    box-shadow: 0 0 0 4px rgba(227, 78, 104, .11);
}

.topbar-store-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.topbar-store-copy strong {
    font-size: 10px;
    line-height: 1.2;
}

.topbar-store-copy small {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #7a818d;
    font-size: 8px;
}

.topbar-account {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-user {
    gap: 8px;
}

.topbar-user .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.topbar-user-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.topbar-user-copy strong {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #373c47;
    font-size: 9px;
}

.topbar-user-copy small {
    color: #8a909b;
    font-size: 7px;
}

.logout-button.topbar-logout {
    width: auto;
    min-width: 72px;
    height: 34px;
    margin: 0;
    padding: 0 12px;

    border: 1px solid #e5cbd5;
    border-radius: 7px;
    background: #fff;
    color: #bf385f;

    font-size: 9px;
    font-weight: 700;
}

.logout-button.topbar-logout:hover {
    background: #fff4f7;
    border-color: #e87091;
    color: #b92f57;
}

/* Modal de funcionamento */

.store-status-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(24, 20, 31, .48);
    backdrop-filter: blur(3px);
}

.store-status-modal.show {
    display: flex;
}

.store-status-dialog {
    width: min(100%, 520px);
    max-height: 90vh;
    overflow-y: auto;

    background: #fff;
    border: 1px solid #e1e3e8;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(30, 20, 42, .22);
}

.store-status-dialog-header {
    padding: 18px 20px 15px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    border-bottom: 1px solid #eceef2;
}

.store-status-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #7b35cf;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.store-status-dialog-header h2 {
    margin: 0;
    font-size: 16px;
}

.store-status-modal-close {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;

    border: 0;
    border-radius: 7px;
    background: #f3f4f7;
    color: #626874;

    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.store-status-dialog-body {
    padding: 18px 20px 20px;
}

.store-status-current {
    margin-bottom: 16px;
    padding: 13px 14px;

    display: flex;
    flex-direction: column;
    gap: 4px;

    border: 1px solid #e4e7eb;
    border-radius: 9px;
    background: #f8f9fb;
}

.store-status-current strong {
    color: #4b515d;
    font-size: 11px;
}

.store-status-current strong.is-open {
    color: #0b976c;
}

.store-status-current strong.is-closed {
    color: #cc3f5b;
}

.store-status-current span {
    color: #777e89;
    font-size: 9px;
}

.store-mode-controls > p {
    margin: 0 0 9px;
    color: #5f6672;
    font-size: 9px;
    font-weight: 600;
}

.store-mode-controls {
    display: grid;
    gap: 8px;
}

.store-mode-button {
    width: 100%;
    padding: 12px 13px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;

    border: 1px solid #e1e4e9;
    border-radius: 9px;
    background: #fff;
    color: #343945;

    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
}

.store-mode-button strong {
    font-size: 10px;
}

.store-mode-button span {
    color: #7d838e;
    font-size: 8px;
    line-height: 1.45;
}

.store-mode-button:hover:not(:disabled),
.store-mode-button.active {
    border-color: #b99bdd;
    background: #faf7ff;
}

.store-mode-button.open:hover:not(:disabled),
.store-mode-button.open.active {
    border-color: #8dd8bd;
    background: #f1fcf8;
}

.store-mode-button.closed:hover:not(:disabled),
.store-mode-button.closed.active {
    border-color: #f0a9b8;
    background: #fff5f7;
}

.store-mode-button:disabled {
    opacity: .6;
    cursor: wait;
}

.store-status-note {
    margin: 14px 0 0;
    color: #858b96;
    font-size: 8px;
    line-height: 1.5;
}

.store-status-toast .toast-icon {
    background: #e5f8f1;
    color: #0d9e71;
}

@media (max-width: 900px) {
    .topbar {
        margin: 0 -14px 16px;
        padding: 9px 14px;
    }

    .topbar-user-copy {
        display: none;
    }

    .topbar-store-status {
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .topbar {
        align-items: stretch;
        gap: 8px;
    }

    .topbar-store-status {
        flex: 1;
    }

    .topbar-account {
        gap: 6px;
    }

    .topbar-user {
        display: none;
    }

    .logout-button.topbar-logout {
        min-width: 60px;
        padding: 0 9px;
    }
}

/* Editor de horários de funcionamento */

.store-schedule-editor {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid #e4e7eb;
    border-radius: 10px;
    background: #fbfbfc;
}

.store-schedule-editor.hidden {
    display: none;
}

.store-schedule-editor-header {
    margin-bottom: 12px;
}

.store-schedule-editor-header h3 {
    margin: 0;
    color: #343945;
    font-size: 12px;
}

.store-schedule-editor-header p {
    margin: 4px 0 0;
    color: #7d838e;
    font-size: 8px;
    line-height: 1.45;
}

.store-schedule-rows {
    display: grid;
    gap: 7px;
}

.store-schedule-row {
    padding: 9px 10px;
    display: grid;
    grid-template-columns: minmax(112px, 1fr) 88px 88px 82px;
    align-items: end;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    transition: .18s ease;
}

.store-schedule-row.is-closed {
    background: #f7f7f8;
    opacity: .78;
}

.store-schedule-day {
    min-width: 0;
    align-self: center;
}

.store-schedule-day strong {
    display: block;
    color: #3a404a;
    font-size: 9px;
}

.store-schedule-day span {
    display: none;
    color: #7d838e;
    font-size: 8px;
}

.store-schedule-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.store-schedule-field > span {
    color: #7a808b;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .35px;
}

.store-schedule-field input[type="time"] {
    width: 100%;
    height: 31px;
    padding: 0 7px;
    border: 1px solid #dfe3e8;
    border-radius: 7px;
    background: #fff;
    color: #383e49;
    font: inherit;
    font-size: 8px;
    outline: none;
}

.store-schedule-field input[type="time"]:focus {
    border-color: #a882d5;
    box-shadow: 0 0 0 3px rgba(123, 53, 207, .08);
}

.store-schedule-closed {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: #656c77;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}

.store-schedule-closed input {
    accent-color: #7b35cf;
}

.store-schedule-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.store-schedule-feedback {
    min-height: 16px;
    color: #7d838e;
    font-size: 8px;
    line-height: 1.35;
}

.store-schedule-feedback.is-success {
    color: #0d946b;
}

.store-schedule-feedback.is-error {
    color: #c33d59;
}

.store-schedule-save-button {
    min-width: 112px;
    height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 7px;
    background: #6f2dbd;
    color: #fff;
    font: inherit;
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

.store-schedule-save-button:hover:not(:disabled) {
    background: #5f24a5;
    transform: translateY(-1px);
}

.store-schedule-save-button:disabled {
    opacity: .65;
    cursor: wait;
}

@media (max-width: 620px) {
    .store-schedule-row {
        grid-template-columns: 1fr 1fr;
    }

    .store-schedule-day {
        grid-column: 1 / -1;
    }

    .store-schedule-day strong {
        display: none;
    }

    .store-schedule-day span {
        display: block;
        font-weight: 800;
    }

    .store-schedule-closed {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .store-schedule-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .store-schedule-save-button {
        width: 100%;
    }
}