:root { --gold: #c9a343; --gold-soft: #fff6dc; --bs-primary-rgb: 14, 135, 189; --bs-success-rgb: 14, 135, 189; --bs-success: #0e87bd; --bs-link-color: #086b96; }
body { color: #213d4d; }
.brand-mark { background: #dcf2ff; border-bottom: 3px solid var(--gold); color: #117aa9; border-radius: 8px; box-shadow: none; flex: 0 0 38px; }
.brand small, .nav-label, .table-clean thead th, .eyebrow { letter-spacing: 0; }
.btn-brand { background: #4dbbf0; border-color: #4dbbf0; color: #073d57; }
.btn-brand:hover, .btn-brand:focus-visible { background: #1798d6; border-color: #1798d6; color: #fff; }
.btn-brand:disabled { background: #cae8f7; color: #587d91; border-color: #cae8f7; }
.btn, .form-control, .form-select, .input-group-text, .product-card, .panel, .toolbar-card, .kpi-card, .searchbox, .subnav a { border-radius: 8px; }
.panel, .toolbar-card, .kpi-card { box-shadow: none; border-color: #e0eaf0; }
.sidebar { border-top: 4px solid var(--gold); padding-top: 16px; }
.sidebar .nav-link { border-radius: 6px; flex-shrink: 0; }
.sidebar .nav-link.active { border-left: 3px solid var(--gold); padding-left: 8px; }
.sidebar .nav-label { flex-shrink: 0; color: #758c98; }
.sidebar-foot { flex-shrink: 0; }
.sidebar .brand { min-width: 0; }
.sidebar .brand b { overflow-wrap: anywhere; }
.sidebar-close { margin-left: auto; width: 30px; flex-shrink: 0; }
.topbar { min-height: 68px; height: auto; padding-top: 9px; padding-bottom: 9px; }
.top-title h1 { overflow-wrap: anywhere; }
.top-actions { flex-shrink: 0; gap: 5px; }
.top-actions .user-btn { min-width: 42px; min-height: 42px; padding: 5px; }
.avatar { background: #d6effc; color: #07628f; border: 1px solid #8bd0f2; flex-shrink: 0; }
.kpi-icon { background: #e6f5fd; color: #0875a6; }
.row>.col-12:nth-child(even) .kpi-icon { background: #fff5db; color: #97701c; }
.btn-success { --bs-btn-bg: #178bbf; --bs-btn-border-color: #178bbf; --bs-btn-hover-bg: #0d6b98; --bs-btn-hover-border-color: #0d6b98; --bs-btn-active-bg: #0d6b98; --bs-btn-active-border-color: #0d6b98; }
.text-bg-success { background: #ddf2fd !important; color: #08618b !important; }
.text-success { color: #087cab !important; }
.alert-success { --bs-alert-color: #08618b; --bs-alert-bg: #e5f5fe; --bs-alert-border-color: #b9e1f6; --bs-alert-link-color: #054b70; }
.login-page { background: #eaf6fd; }
.login-box { border-radius: 8px; border-top: 4px solid var(--gold); box-shadow: 0 12px 35px #1a719412; }
.login-logo { background: #d8effc; color: #1079a7; border-radius: 8px; }
.security-note { background: #eaf7fe; border-color: #c9e8f8; color: #246d91; }
.security-note span { color: #658496; }
.product-photo { background: #eaf5fc; color: #76b9dd; border-radius: 6px; }
.product-card:nth-child(3n+2) .product-photo { background: #fff6df; color: #b99b50; }
.product-card>b { white-space: normal; overflow-wrap: anywhere; min-height: 34px; }
.toolbar-card .form-control { max-width: 100%; }
.table-responsive { max-width: 100%; }
.subnav { scrollbar-width: thin; padding-bottom: 4px; }
.form-control:focus, .form-select:focus { border-color: #67bfed; box-shadow: 0 0 0 .2rem #38bdf820; }
.form-check-input:checked { background-color: #148fc6; border-color: #148fc6; }
.order-detail-summary { display: flex; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid #dce8ef; padding-bottom: 20px; margin-bottom: 20px; }
.order-detail-summary small { display: block; color: #78909b; }
.order-detail-summary strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.order-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.order-badge { display: inline-block; padding: 5px 8px; background: #fff2cb; color: #785e24; font-size: 11px; border-radius: 4px; }
.order-badge.accepted, .order-badge.paid { background: #e0f3fe; color: #0a6d98; }
.order-badge.cancelled { background: #fcebef; color: #a23f54; }
.pos-order-banner { padding: 10px 18px; background: #fff6db; border-bottom: 1px solid #ead5a2; font-size: 12px; }
.pos-order-banner b, .pos-order-banner a { display: block; }
.pos-shell:has([data-order-locked="1"]) { grid-template-columns: minmax(300px,560px); justify-content: center; }
.pos-shell:has([data-order-locked="1"]) .pos-catalog { display: none; }
.pos-shell:has([data-order-locked="1"]) .pos-order { height: auto; min-height: 650px; }
.product-edit-link { white-space: nowrap; }
#form { scroll-margin-top: 90px; }
@media (max-width: 991px) {
    .sidebar { width: min(280px, 86vw); height: 100dvh; z-index: 1050; }
    .sidebar-backdrop.show { z-index: 1045; }
    body.admin-menu-open { overflow: hidden; }
    .top-title p { display: none; }
    .topbar { gap: 8px; }
    .top-title h1 { font-size: 17px; line-height: 1.3; }
    .pos-shell { display: flex; flex-direction: column; }
    .pos-order { order: 1; position: static; min-height: 0; height: auto; border-right: 0; }
    .pos-catalog { order: 0; height: 55dvh; min-height: 320px; padding: 14px; }
    .pos-catalog .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .pos-order .cart-list { max-height: 220px; min-height: 80px; }
    .pos-order .cart-empty { min-height: 80px; }
    .catalog-toolbar { position: sticky; top: 0; background: #f5faff; z-index: 2; }
    .product-photo { height: 82px; }
}
@media (max-width: 575px) {
    .topbar { padding-left: 12px; padding-right: 12px; }
    .page-wrap { padding: 12px; }
    .pos-shell { margin: -12px; }
    .pos-catalog .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .panel { padding: 14px; }
    .panel-head { flex-wrap: wrap; }
    .toolbar-card .ms-auto { margin-left: 0 !important; width: 100%; }
    .order-actions>.btn, .order-actions>form { flex: 1 1 auto; }
    .order-actions>form .btn { width: 100%; }
}

/* Admin visual refresh: denser navigation and clearer color hierarchy. */
:root {
    --brand: #2389d5;
    --brand-dark: #1467b1;
    --brand-soft: #e8f4ff;
    --ink: #23394c;
    --muted: #6f8291;
    --line: #dce8f1;
    --bg: #f2f7fb;
    --gold: #f0b83c;
    --gold-soft: #fff5d9;
}
body { background: var(--bg); color: var(--ink); }
.sidebar { background: #113e6b; border: 0; padding: 12px 10px; box-shadow: 3px 0 18px rgba(12,49,83,.12); }
.sidebar .brand { padding: 9px 9px 18px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 8px; }
.sidebar .brand b { color: #fff; font-size: 15px; }
.sidebar .brand small { color: #b4d7ef; font-size: 10px; }
.sidebar .brand-mark { background: var(--gold); border: 0; color: #123d68; border-radius: 5px; box-shadow: none; }
.sidebar .nav-label { color: #8fb9d8; padding: 15px 11px 5px; }
.sidebar .nav-link { color: #d9eaf7; border-radius: 4px; margin: 1px 0; padding: 9px 10px; font-weight: 500; }
.sidebar .nav-link i { color: #9bc9e9; }
.sidebar .nav-link:hover { color: #fff; background: #1a578e; }
.sidebar .nav-link:hover i { color: #fff; }
.sidebar .nav-link.active { color: #fff; background: #278dd6; border-left: 3px solid var(--gold); padding-left: 7px; }
.sidebar .nav-link.active i { color: #fff; }
.sidebar-foot { border-top-color: rgba(255,255,255,.16); color: #eaf5fc; }
.sidebar-foot small { color: #a6cbe5; }
.sidebar-close { background: #235c8f; border-color: #3f75a1; color: #fff; }
.session-dot.on { background: var(--gold); box-shadow: 0 0 0 4px rgba(240,184,60,.18); }
.topbar { background: #2381c6; border-bottom: 3px solid #1665a9; color: #fff; backdrop-filter: none; min-height: 64px; padding: 8px 20px; }
.top-title h1 { font-size: 17px; color: #fff; }
.top-title p { color: #d6ecfb; }
.topbar .clock { color: #d9f0ff; }
.topbar .btn-light { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }
.topbar .btn-light:hover { background: rgba(255,255,255,.26); }
.topbar .user-btn { color: #fff; background: transparent; }
.topbar .avatar { background: #fff; color: #125d9c; border: 2px solid var(--gold); }
.top-shortcut { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 5px 10px; border-radius: 4px; text-decoration: none; font-size: 11px; font-weight: 700; white-space: nowrap; }
.top-shortcut-sale { background: #178666; color: #fff; }
.top-shortcut-buy { background: var(--gold); color: #3d360f; }
.top-shortcut:hover { filter: brightness(1.08); color: inherit; }
.btn, .form-control, .form-select, .input-group-text, .product-card, .panel, .toolbar-card, .kpi-card, .searchbox, .subnav a { border-radius: 5px; }
.btn-brand { background: #258ad4; border-color: #258ad4; color: #fff; }
.btn-brand:hover, .btn-brand:focus-visible { background: #176cb4; border-color: #176cb4; color: #fff; }
.btn-brand:disabled { background: #b7d9ef; color: #477394; border-color: #b7d9ef; }
.btn-soft { background: #e5f2fd; border-color: #b7dbf4; color: #136bab; }
.panel, .toolbar-card { border: 1px solid #dce8f0; border-top: 3px solid #2794dd; box-shadow: 0 2px 8px rgba(22,65,103,.045); }
.panel-head h5 { color: #1e4d76; }
.table-clean thead th { background: #f2f8fc; color: #52738d; }
.table-clean tbody tr:hover { background: #f8fbfe; }
.subnav a.active { background: #e3f2fe; border-color: #a8d5f2; color: #126bad; }
.kpi-card { background: #1f83bf; border: 0; border-bottom: 4px solid #145a9f; color: #fff; align-items: flex-start; flex-direction: row-reverse; justify-content: space-between; min-height: 122px; padding: 16px; box-shadow: 0 3px 8px rgba(18,65,107,.14); }
.row > .col-12:nth-child(4n+1) .kpi-card { background: #158366; border-bottom-color: #096b58; }
.row > .col-12:nth-child(4n+2) .kpi-card { background: #1b9bc4; border-bottom-color: #1278b2; }
.row > .col-12:nth-child(4n+3) .kpi-card { background: #ca545a; border-bottom-color: #a63c51; }
.row > .col-12:nth-child(4n+4) .kpi-card { background: #e3a92b; border-bottom-color: #bd7e16; }
.kpi-card span, .kpi-card small { color: rgba(255,255,255,.9); }
.kpi-card strong { color: #fff; font-size: 21px; margin: 8px 0 3px; overflow-wrap: anywhere; }
.kpi-icon, .row > .col-12:nth-child(even) .kpi-icon { background: rgba(255,255,255,.22); color: #fff; border-radius: 50%; width: 36px; height: 36px; flex: 0 0 36px; font-size: 16px; }
.dashboard-chart, .dashboard-low { min-height: 255px; }
.dashboard-period { color: #6d879b; font-size: 11px; white-space: nowrap; }
.sales-bars { display: flex; align-items: stretch; gap: 12px; height: 175px; border-bottom: 1px solid #cbdfea; padding: 0 3px; position: relative; background: repeating-linear-gradient(to top,transparent 0,transparent 41px,#edf3f7 42px); }
.sales-bar-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.sales-bar-value { height: 25px; color: #487087; font-size: 9px; text-align: center; white-space: nowrap; }
.sales-bar-track { display: flex; align-items: flex-end; width: min(100%,44px); height: 124px; }
.sales-bar-fill { width: 100%; background: #36a8db; border-radius: 3px 3px 0 0; }
.dashboard-chart-empty { position: absolute; inset: 30% 0 auto; text-align: center; color: #8399a9; font-size: 12px; }
.sales-bar-item:nth-child(3n+2) .sales-bar-fill { background: #f0b83c; }
.sales-bar-item:nth-child(3n+3) .sales-bar-fill { background: #158b75; }
.sales-bar-item time { font-size: 10px; color: #607c90; white-space: nowrap; }
.dashboard-stock-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf2f6; font-size: 12px; }
.dashboard-stock-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-stock-row strong { white-space: nowrap; color: #c37c0b; }
.dashboard-stock-empty { min-height: 158px; display: grid; place-content: center; text-align: center; gap: 8px; color: #178b6e; }
.dashboard-stock-empty i { font-size: 28px; }
.pos-shell { grid-template-columns: minmax(0,1.08fr) minmax(350px,.92fr); min-height: calc(100vh - 64px); }
.pos-catalog { grid-column: 1; grid-row: 1; background: #edf5fb; height: calc(100vh - 64px); }
.pos-order { grid-column: 2; grid-row: 1; top: 64px; height: calc(100vh - 64px); border-right: 0; border-left: 1px solid #d8e6f1; }
.pos-order-top { border-bottom: 1px solid #e5eef4; margin-bottom: 12px; }
.pos-order-top h4 { color: #1f6caa; }
.catalog-toolbar .searchbox { border-radius: 5px; }
.category-tabs button { border-radius: 4px; }
.category-tabs button.active { background: #248ed5; color: #fff; border-color: #248ed5; }
.category-tabs button.active span { color: #e7f4fb; }
.product-grid { gap: 10px; }
.product-card { border: 1px solid #dbe8f1; min-height: 182px; box-shadow: 0 2px 7px rgba(22,68,105,.04); }
.product-card:hover { border-color: #55a9db; box-shadow: 0 4px 12px rgba(21,104,166,.13); }
.product-photo { background: #e4f3fb; border-radius: 3px; }
.product-card:nth-child(3n+2) .product-photo { background: #fff2d8; color: #b8841a; }
.product-card:nth-child(3n+3) .product-photo { background: #e5f5ef; color: #3b9a7d; }
.product-card > span { display: inline-block; background: #258bd3; color: #fff; border-radius: 3px; padding: 2px 5px; font-size: 10px; }
.cart-controls button:first-child { background: #fff1e7; color: #c16937; border-color: #f3d3bd; }
.cart-controls button:nth-child(3) { background: #e5f5e9; color: #238457; border-color: #b9e0c5; }
.checkout { background: #fff; padding-top: 9px; padding-bottom: 9px; }
.checkout .form-control, .checkout .form-select { min-height: 34px; height: 34px; }
.checkout .discount-row { margin-bottom: 4px; }
.checkout .discount-row.mt-2 { margin-top: 4px !important; }
.checkout #voucherMessage { margin-bottom: 2px !important; }
.checkout .payment-methods { margin: 3px 0 5px; }
.checkout .payment-methods span { height: 32px; }
.checkout #cashBox .form-label { margin-bottom: 2px; }
.checkout #cashBox .form-control-lg { min-height: 38px; height: 38px; font-size: 15px; }
.checkout .quick-cash { margin: 3px 0; }
.checkout .quick-cash button { padding: 3px 7px; }
.checkout .btn-lg { margin-top: 5px !important; padding: 7px 10px; }
.checkout .shift-warning { margin-top: 5px; }
.grand-row strong { color: #146cae; }
.payment-methods input:checked + span { border-radius: 4px; background: #e2f2fc; color: #146aa9; }
.pos-order .btn-brand.btn-lg { border-radius: 4px; }
.pos-shell:has([data-order-locked="1"]) .pos-order { grid-column: 1; }
@media (max-width: 991px) {
    .sidebar { width: min(280px,86vw); }
    .pos-shell { display: flex; flex-direction: column; }
    .pos-catalog { grid-column: auto; grid-row: auto; order: 0; height: 55dvh; min-height: 320px; }
    .pos-order { grid-column: auto; grid-row: auto; order: 1; position: static; height: auto; min-height: 0; border-left: 0; border-top: 1px solid #d8e6f1; }
}
@media (max-width: 575px) {
    .topbar { padding: 8px 10px; gap: 6px; }
    .top-shortcut { width: 31px; min-width: 31px; padding: 5px; }
    .top-actions { gap: 4px; }
    .top-actions .user-btn { min-width: 32px; min-height: 32px; padding: 2px; }
    .topbar .avatar { width: 29px; height: 29px; }
    .sales-bars { gap: 5px; }
    .sales-bar-value { font-size: 8px; }
    .dashboard-period { display: none; }
}
@media (max-width: 360px) {
    .top-shortcut-buy { display: none; }
    .top-title h1 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Compact responsive workspace for tablets and phones. */
html, body { max-width: 100%; overflow-x: clip; }
.pos-mobile-switch { display: none; }
.responsive-menu-toggle, .sidebar-close { display: none; }
.row > :nth-child(4n+1) > .kpi-card { background: #158366; border-bottom-color: #096b58; }
.row > :nth-child(4n+2) > .kpi-card { background: #1b9bc4; border-bottom-color: #1278b2; }
.row > :nth-child(4n+3) > .kpi-card { background: #ca545a; border-bottom-color: #a63c51; }
.row > :nth-child(4n+4) > .kpi-card { background: #e3a92b; border-bottom-color: #bd7e16; }

@media (max-width: 1199px) {
    .responsive-menu-toggle, .sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
    .content { margin-left: 0; }
    body.admin-menu-open { overflow: hidden; }
    body { background: #f5f8fa; }
    .topbar {
        min-height: 60px;
        padding: 7px 14px;
        color: #21445c;
        background: rgba(250,253,255,.97);
        border-bottom: 1px solid #d9e7ef;
        box-shadow: 0 3px 14px rgba(27,70,100,.06);
    }
    .top-title h1 { color: #173f5c; }
    .top-title p { color: #718895; }
    .topbar .clock { color: #708794; }
    .topbar .btn-light { color: #176b9b; background: #eaf5fb; border-color: #cce5f2; }
    .topbar .user-btn { color: #24506c; }
    .top-shortcut-sale { color: #176b55; background: #e5f5ef; border: 1px solid #c3e5d9; }
    .top-shortcut-buy { color: #795c18; background: #fff4d7; border: 1px solid #efd999; }
    .topbar .avatar { background: #fff; color: #126896; border-color: #efba42; }
    .page-wrap { padding: 16px; }
    .sidebar {
        inset: 12px auto auto 12px;
        z-index: 1050;
        width: min(440px, calc(100vw - 24px));
        height: min(76dvh, 680px);
        max-height: calc(100dvh - 24px);
        padding: 10px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 10px;
        box-shadow: 0 20px 55px rgba(7,35,59,.3);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px) scale(.98);
        transform-origin: top left;
        transition: transform .18s ease, opacity .18s ease, visibility .18s;
    }
    .sidebar.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    .sidebar .brand { padding: 5px 7px 10px; margin-bottom: 7px; }
    .sidebar-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 3px 6px;
        padding-right: 3px;
        overscroll-behavior: contain;
    }
    .sidebar .nav-label { grid-column: 1 / -1; padding: 9px 8px 3px; }
    .sidebar .nav-link { min-width: 0; min-height: 42px; margin: 0; padding: 8px 9px; font-size: 12px; line-height: 1.2; }
    .sidebar .nav-link span { min-width: 0; overflow-wrap: anywhere; }
    .sidebar-foot { padding: 9px 7px 2px; }
    .sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1045;
        background: rgba(13,38,57,.28);
        backdrop-filter: blur(2px);
    }
    .panel, .toolbar-card {
        border-top-width: 1px;
        border-radius: 9px;
        box-shadow: 0 3px 12px rgba(22,65,103,.04);
    }
    .kpi-card {
        min-height: 106px;
        padding: 13px;
        color: #24465d;
        background: #fff !important;
        border: 1px solid #dce8ef;
        border-left: 4px solid #2389d5;
        border-bottom-width: 1px;
        border-radius: 9px;
        box-shadow: 0 3px 12px rgba(22,65,103,.05);
    }
    .row > :nth-child(4n+1) > .kpi-card { border-left-color: #239374; }
    .row > :nth-child(4n+2) > .kpi-card { border-left-color: #2c9bc5; }
    .row > :nth-child(4n+3) > .kpi-card { border-left-color: #cf6670; }
    .row > :nth-child(4n+4) > .kpi-card { border-left-color: #e2aa32; }
    .kpi-card span, .kpi-card small { color: #738796; }
    .kpi-card strong { color: #1b4967; font-size: 18px; margin: 5px 0 2px; }
    .kpi-icon, .row > .col-12:nth-child(even) .kpi-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        color: #2479a8;
        background: #e8f4fa;
    }
}

@media (max-width: 991px) {
    body { background: #f5f8fa; }
    .topbar {
        min-height: 60px;
        padding: 7px 14px;
        color: #21445c;
        background: rgba(250,253,255,.97);
        border-bottom: 1px solid #d9e7ef;
        box-shadow: 0 3px 14px rgba(27,70,100,.06);
    }
    .top-title h1 { color: #173f5c; }
    .topbar .btn-light {
        color: #176b9b;
        background: #eaf5fb;
        border-color: #cce5f2;
    }
    .topbar .user-btn { color: #24506c; }
    .top-shortcut-sale { color: #176b55; background: #e5f5ef; border: 1px solid #c3e5d9; }
    .top-shortcut-buy { color: #795c18; background: #fff4d7; border: 1px solid #efd999; }
    .topbar .avatar { background: #fff; color: #126896; border-color: #efba42; }
    .page-wrap { padding: 16px; }

    .sidebar {
        inset: 12px auto auto 12px;
        width: min(440px, calc(100vw - 24px));
        height: min(76dvh, 680px);
        max-height: calc(100dvh - 24px);
        padding: 10px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 10px;
        box-shadow: 0 20px 55px rgba(7,35,59,.3);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px) scale(.98);
        transform-origin: top left;
        transition: transform .18s ease, opacity .18s ease, visibility .18s;
    }
    .sidebar.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    .sidebar .brand { padding: 5px 7px 10px; margin-bottom: 7px; }
    .sidebar-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 3px 6px;
        padding-right: 3px;
        overscroll-behavior: contain;
    }
    .sidebar .nav-label { grid-column: 1 / -1; padding: 9px 8px 3px; }
    .sidebar .nav-link {
        min-width: 0;
        min-height: 42px;
        margin: 0;
        padding: 8px 9px;
        font-size: 12px;
        line-height: 1.2;
    }
    .sidebar .nav-link span { min-width: 0; overflow-wrap: anywhere; }
    .sidebar-foot { padding: 9px 7px 2px; }
    .sidebar-backdrop.show {
        background: rgba(13,38,57,.28);
        backdrop-filter: blur(2px);
    }

    .panel, .toolbar-card {
        border-top-width: 1px;
        border-radius: 9px;
        box-shadow: 0 3px 12px rgba(22,65,103,.04);
    }
    .kpi-card {
        min-height: 106px;
        padding: 13px;
        color: #24465d;
        background: #fff !important;
        border: 1px solid #dce8ef;
        border-left: 4px solid #2389d5;
        border-bottom-width: 1px;
        border-radius: 9px;
        box-shadow: 0 3px 12px rgba(22,65,103,.05);
    }
    .row > :nth-child(4n+1) > .kpi-card { border-left-color: #239374; }
    .row > :nth-child(4n+2) > .kpi-card { border-left-color: #2c9bc5; }
    .row > :nth-child(4n+3) > .kpi-card { border-left-color: #cf6670; }
    .row > :nth-child(4n+4) > .kpi-card { border-left-color: #e2aa32; }
    .kpi-card span, .kpi-card small { color: #738796; }
    .kpi-card strong { color: #1b4967; font-size: 18px; margin: 5px 0 2px; }
    .kpi-icon, .row > .col-12:nth-child(even) .kpi-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        color: #2479a8;
        background: #e8f4fa;
    }

    .pos-mobile-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
        order: -1;
        position: sticky;
        top: 60px;
        z-index: 12;
        gap: 5px;
        padding: 8px;
        background: rgba(247,251,253,.97);
        border-bottom: 1px solid #d7e5ed;
    }
    .pos-mobile-switch button {
        min-height: 42px;
        border: 1px solid #d7e4ec;
        border-radius: 7px;
        background: #fff;
        color: #5e7483;
        font-size: 12px;
        font-weight: 700;
    }
    .pos-mobile-switch button.active {
        color: #126da8;
        border-color: #9fcfea;
        background: #e8f5fc;
    }
    .pos-mobile-switch button b {
        display: inline-grid;
        min-width: 20px;
        height: 20px;
        margin-left: 4px;
        padding: 0 5px;
        place-items: center;
        border-radius: 10px;
        color: #fff;
        background: #258ad4;
        font-size: 10px;
    }
    .pos-catalog:not(.mobile-active), .pos-order:not(.mobile-active) { display: none !important; }
    .pos-catalog.mobile-active { display: block; height: calc(100dvh - 112px); min-height: 420px; }
    .pos-order.mobile-active { display: flex; }
    .pos-order .cart-controls button { width: 38px; height: 36px; }
    .pos-order .cart-controls span { width: 42px; height: 36px; }

    #orderBatchForm.panel {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .order-batch-toolbar {
        position: sticky;
        top: 68px;
        z-index: 8;
        padding: 12px;
        border: 1px solid #dce8ef;
        border-radius: 9px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 4px 14px rgba(21,71,105,.07);
    }
    .order-table tbody { display: grid; gap: 10px; }
    .order-table tr {
        margin: 0;
        padding: 10px;
        border: 1px solid #dce8ef;
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(22,65,103,.035);
    }
    .order-table td::after { display: block; clear: both; content: ''; }
}

@media (min-width: 576px) and (max-width: 900px) {
    .order-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .topbar { min-height: 56px; padding: 6px 10px; }
    .topbar #menuToggle { width: 38px; height: 38px; padding: 0; }
    .top-title h1 { font-size: 15px; }
    .top-shortcut-buy, .top-customer-link { display: none; }
    .page-wrap { padding: 10px; }
    .panel { max-width: 100%; overflow-x: auto; padding: 13px; }
    .btn, .form-control, .form-select { min-height: 42px; }
    .orders-tools {
        display: grid !important;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: 7px !important;
    }
    .orders-tools .btn { padding: 7px 8px; font-size: 11px; }
    .orders-tools .btn:last-child { grid-column: 1 / -1; }
    .orders-nav .subnav { margin-top: 2px; }
    .order-filter { padding: 13px; }
    .order-batch-toolbar { top: 62px; }
    .order-batch-toolbar > .d-flex { gap: 6px !important; }
    .order-batch-toolbar .btn { min-height: 40px; padding: 6px; font-size: 10px; }
    .kpi-card { min-height: 98px; padding: 11px; gap: 7px; }
    .kpi-card strong { font-size: 15px; line-height: 1.25; }
    .kpi-card span, .kpi-card small { font-size: 9px; }
    .pos-shell { margin: -10px; }
    .pos-mobile-switch { top: 56px; }
    .pos-catalog.mobile-active { height: calc(100dvh - 106px); padding: 11px; }
    .pos-catalog .product-grid { gap: 8px; }
    .product-card { min-height: 154px; padding: 8px; }
    .product-photo { height: 72px; }
    .order-fields { padding-left: 13px; padding-right: 13px; }
    .cart-list { padding-left: 13px; padding-right: 13px; }
    .checkout { padding-left: 13px; padding-right: 13px; }
}

@media (max-width: 420px) {
    .sidebar { inset: 8px auto auto 8px; width: calc(100vw - 16px); height: min(78dvh, 620px); }
    .sidebar .nav-link { font-size: 11px; gap: 7px; }
    .sidebar .nav-link i { width: 16px; font-size: 15px; }
}

/* Professional soft refresh (2026-09-24): softer palette, rounded surfaces, smooth motion, grouped nav. */
:root {
    --brand: #2f7fd1;
    --brand-dark: #195f9e;
    --brand-soft: #eaf4fd;
    --ink: #1f2a37;
    --muted: #66738a;
    --line: #e3eaf1;
    --bg: #f4f7fb;
    --gold: #dba53c;
    --gold-soft: #fbf1dd;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 9px;
    --shadow-soft: 0 14px 32px rgba(17, 49, 79, .1);
    --shadow-card: 0 2px 10px rgba(17, 49, 79, .05);
    --ease: cubic-bezier(.4, 0, .2, 1);
}
html { scroll-behavior: smooth; }
body { background: var(--bg); }
::selection { background: #bfe0fb; color: #0b3050; }
.sidebar-nav, .pos-catalog, .cart-list, .table-responsive, .grid-scroll { scrollbar-width: thin; scrollbar-color: #c3d7e6 transparent; }
.sidebar-nav::-webkit-scrollbar, .pos-catalog::-webkit-scrollbar, .cart-list::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb, .pos-catalog::-webkit-scrollbar-thumb, .cart-list::-webkit-scrollbar-thumb { background: #c3d7e6; border-radius: 8px; }

.btn, .form-control, .form-select, .input-group-text, .product-card, .panel, .toolbar-card, .kpi-card, .searchbox, .subnav a, .category-tabs button, .nav-group-toggle { border-radius: var(--radius-md); }
.btn { transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease), background-color .15s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-brand { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); border-color: var(--brand-dark); box-shadow: 0 6px 16px rgba(47, 127, 209, .22); }
.btn-brand:hover, .btn-brand:focus-visible { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); border-color: var(--brand-dark); filter: brightness(1.06); box-shadow: 0 8px 20px rgba(47, 127, 209, .3); transform: translateY(-1px); }
.form-control, .form-select { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.panel, .toolbar-card, .kpi-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: box-shadow .2s var(--ease); }
.table-clean tbody tr { transition: background-color .15s var(--ease); }

/* Sidebar: softer gradient surface, smoother link states */
.sidebar { background: linear-gradient(180deg, #123a63 0%, #0e2f52 100%); }
.sidebar .nav-link { border-radius: var(--radius-sm); transition: background-color .15s var(--ease), color .15s var(--ease); }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); }
.sidebar .nav-link.active { background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* Collapsible nav groups so the drawer doesn't dump every page at once. */
.nav-group-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
    padding: 11px 11px; margin: 3px 0 1px; border-radius: var(--radius-sm);
    color: #9fc2e0; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 750;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-group-toggle:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-group-toggle.has-active { color: #fff; }
.nav-group-toggle i.bi-chevron-down { font-size: 11px; transition: transform .2s var(--ease); }
.nav-group-toggle[aria-expanded="true"] i.bi-chevron-down { transform: rotate(180deg); }
.nav-group-body { display: flex; flex-direction: column; }
.nav-subgroup-toggle { margin-top: 2px; }
.nav-subgroup-toggle span { display: inline-flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-weight: 650; font-size: 12px; color: #dbe9f5; }
.nav-subgroup-body .nav-link { padding-left: 26px; font-size: 12px; }
@media (max-width: 1199px) {
    .nav-group-toggle, .nav-group-body { grid-column: 1 / -1; }
    .nav-group-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
    .nav-subgroup-body .nav-link { padding-left: 9px; }
}

/* Topbar: gradient instead of a flat color block, softer chips. */
.topbar { background: linear-gradient(120deg, #2f7fd1 0%, #1c5f9e 100%); border-bottom: 0; box-shadow: 0 4px 18px rgba(15, 55, 90, .18); }
.topbar .btn-light { transition: background-color .15s var(--ease); }
.topbar .btn-light:hover { background: rgba(255, 255, 255, .28); }
.top-shortcut { border-radius: var(--radius-sm); transition: transform .15s var(--ease), filter .15s var(--ease); }
.top-shortcut:hover { transform: translateY(-1px); filter: brightness(1.06); }
.topbar .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

/* KPI cards: one consistent soft-card style at every breakpoint instead of solid neon blocks on wide screens. */
.kpi-card { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; border-left: 4px solid var(--brand) !important; box-shadow: var(--shadow-card) !important; border-radius: var(--radius-lg) !important; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft) !important; }
.kpi-card span, .kpi-card small { color: var(--muted) !important; }
.kpi-card strong { color: var(--ink) !important; }
.kpi-icon, .row > .col-12:nth-child(even) .kpi-icon { background: var(--brand-soft) !important; color: var(--brand-dark) !important; border-radius: var(--radius-sm) !important; width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
.row > .col-12:nth-child(4n+1) .kpi-card, .row > :nth-child(4n+1) > .kpi-card { border-left-color: #1f9e78 !important; }
.row > .col-12:nth-child(4n+2) .kpi-card, .row > :nth-child(4n+2) > .kpi-card { border-left-color: var(--brand) !important; }
.row > .col-12:nth-child(4n+3) .kpi-card, .row > :nth-child(4n+3) > .kpi-card { border-left-color: #d9636c !important; }
.row > .col-12:nth-child(4n+4) .kpi-card, .row > :nth-child(4n+4) > .kpi-card { border-left-color: var(--gold) !important; }

/* Catalog + cart: rounded product cards with a soft lift on hover. */
.product-card { border-radius: var(--radius-lg) !important; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft) !important; }
.product-photo { border-radius: var(--radius-md) !important; }
.category-tabs button, .subnav a { transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.category-tabs button.active { border-radius: var(--radius-sm) !important; }

/* Login */
.login-page { background: radial-gradient(circle at top left, #eaf4fd 0, #f4f7fb 45%, #eef2f5 100%); }
.login-box { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-soft) !important; border-top: 4px solid var(--gold) !important; }
.login-logo { background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important; border-radius: var(--radius-md) !important; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }