:root{
  --pos-primary:#0f8f8d;
  --pos-primary-dark:#087170;
  --pos-secondary:#1e6ee9;
  --pos-accent:#ffb020;
  --pos-success:#16a34a;
  --pos-danger:#ef4444;
  --pos-bg:#eef4f8;
  --pos-surface:#ffffff;
  --pos-ink:#172033;
  --pos-muted:#718096;
  --pos-border:#dce7ef;
  --pos-shadow:0 16px 36px rgba(31,45,61,.12);
  --pos-shadow-soft:0 8px 20px rgba(31,45,61,.10);
  --pos-radius:18px;
}
*{box-sizing:border-box}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--pos-bg);color:var(--pos-ink);}
a{text-decoration:none}.text-primary{color:var(--pos-primary)!important}.bg-primary{background:linear-gradient(135deg,var(--pos-primary),var(--pos-secondary))!important}.bg-success{background:linear-gradient(135deg,#22c55e,#15803d)!important}.bg-info{background:linear-gradient(135deg,#38bdf8,#2563eb)!important}.bg-warning{background:linear-gradient(135deg,#facc15,#f97316)!important}.bg-danger{background:linear-gradient(135deg,#fb7185,#dc2626)!important}

/* App shell */
.app-layout{min-height:100vh;display:flex;background:radial-gradient(circle at top left,rgba(15,143,141,.18),transparent 30%),var(--pos-bg)}
.app-sidebar{position:fixed;inset:0 auto 0 0;width:286px;background:linear-gradient(180deg,#102638 0%,#0d1b2a 58%,#07131f 100%);color:#fff;padding:24px 18px;display:flex;flex-direction:column;z-index:1030;box-shadow:16px 0 42px rgba(9,20,33,.24)}
.brand-lockup{display:flex;align-items:center;gap:13px;color:#fff;padding:8px 8px 24px;border-bottom:1px solid rgba(255,255,255,.10)}
.brand-lockup:hover{color:#fff}.brand-mark{width:50px;height:50px;border-radius:17px;background:linear-gradient(145deg,var(--pos-primary),#34d399);display:grid;place-items:center;box-shadow:0 14px 28px rgba(15,143,141,.36),inset 0 1px 0 rgba(255,255,255,.34)}
.brand-lockup strong{display:block;font-size:1.02rem;line-height:1.15}.brand-lockup small{display:block;color:#a9bfd2;font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.side-nav{padding:20px 0;overflow:auto}.nav-section{margin:22px 12px 8px;color:#6f8da8;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.side-link{display:flex;align-items:center;gap:13px;color:#cbd9e6;padding:12px 13px;margin:4px 0;border-radius:15px;font-weight:700;transition:.18s ease;position:relative}.side-link i{width:24px;text-align:center;font-size:1.05rem}.side-link:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateX(4px)}.side-link.active{color:#fff;background:linear-gradient(135deg,var(--pos-primary),var(--pos-secondary));box-shadow:0 12px 28px rgba(15,143,141,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.sidebar-user{margin-top:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:12px;display:flex;align-items:center;gap:10px}.avatar-pill{width:42px;height:42px;border-radius:14px;background:#fff;color:var(--pos-primary-dark);display:grid;place-items:center;font-weight:900}.sidebar-user strong{display:block;font-size:.9rem}.sidebar-user small{display:block;color:#a9bfd2}.logout-icon{margin-left:auto;color:#fda4af;background:rgba(255,255,255,.08);width:34px;height:34px;border-radius:12px;display:grid;place-items:center}.logout-icon:hover{color:#fff;background:rgba(239,68,68,.8)}
.app-main{margin-left:286px;min-height:100vh;width:calc(100% - 286px)}.topbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 32px;background:rgba(238,244,248,.83);backdrop-filter:blur(16px);border-bottom:1px solid rgba(220,231,239,.75)}.topbar h2{margin:0;font-size:1.3rem;font-weight:850}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--pos-muted);font-weight:800;font-size:.72rem}.content-wrap{padding:28px 32px 48px}.mobile-menu-btn{display:none;border:0;background:#fff;border-radius:14px;width:44px;height:44px;box-shadow:var(--pos-shadow-soft)}

/* Cards, forms, buttons */
.card{border:1px solid rgba(220,231,239,.85);border-radius:var(--pos-radius);box-shadow:var(--pos-shadow-soft);overflow:hidden;background:var(--pos-surface)}.card:hover{box-shadow:var(--pos-shadow)}.card-header{background:linear-gradient(180deg,#fff,#f7fbfd);border-bottom:1px solid var(--pos-border);padding:18px 20px}.card-body{padding:20px}.card-title,h1,h2,h3,h4,h5{font-weight:800}.lead{color:var(--pos-muted);font-weight:500}.btn{border-radius:14px;font-weight:800;border-width:0;box-shadow:0 7px 0 rgba(15,23,42,.10),0 16px 22px rgba(15,23,42,.10);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;padding:.68rem 1rem}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 0 rgba(15,23,42,.10),0 20px 28px rgba(15,23,42,.14);filter:saturate(1.06)}.btn:active{transform:translateY(2px);box-shadow:0 4px 0 rgba(15,23,42,.10),0 10px 18px rgba(15,23,42,.12)}.btn-sm{border-radius:12px;padding:.42rem .7rem}.btn-lg{border-radius:17px;padding:.82rem 1.2rem}.btn-primary{background:linear-gradient(145deg,var(--pos-primary),#12b3a8)!important;color:#fff}.btn-success{background:linear-gradient(145deg,#22c55e,#15803d)!important;color:#fff}.btn-danger{background:linear-gradient(145deg,#fb7185,#dc2626)!important;color:#fff}.btn-warning{background:linear-gradient(145deg,#facc15,#f97316)!important;color:#111827}.btn-info{background:linear-gradient(145deg,#38bdf8,#2563eb)!important;color:#fff}.btn-secondary{background:linear-gradient(145deg,#64748b,#334155)!important;color:#fff}.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-warning,.btn-outline-danger,.btn-outline-dark{background:#fff;border:1px solid var(--pos-border);color:var(--pos-ink);box-shadow:0 5px 0 rgba(15,23,42,.07),0 10px 18px rgba(15,23,42,.08)}.btn-outline-primary.active,.btn-outline-primary:hover,.category-btn.active{background:linear-gradient(145deg,var(--pos-primary),#12b3a8)!important;color:#fff;border-color:transparent}.form-control,.form-select,.input-group-text{border-radius:14px;border:1px solid var(--pos-border);padding:.72rem .9rem;background:#fbfdff}.form-control:focus,.form-select:focus{border-color:var(--pos-primary);box-shadow:0 0 0 .25rem rgba(15,143,141,.16)}.input-group .form-control,.input-group .form-select{border-radius:0 14px 14px 0}.input-group-text{background:#f2f7fb;color:var(--pos-primary);font-weight:800}.badge{border-radius:999px;padding:.48em .7em;font-weight:800}.alert{border:0;border-radius:16px;box-shadow:var(--pos-shadow-soft)}

/* Tables */
.table{vertical-align:middle}.table thead th{background:#f4f8fb;border-bottom:0;color:#526275;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}.table>:not(caption)>*>*{padding:.9rem .85rem;border-color:#edf2f7}.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:#fbfdff}.table-hover tbody tr:hover,.table tbody tr:hover{background:#eefafa}.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{border-radius:12px;border:1px solid var(--pos-border);padding:.45rem .7rem}

/* Dashboard */
.page-hero{background:linear-gradient(135deg,#0f8f8d,#1e6ee9);border-radius:26px;color:#fff;padding:28px;box-shadow:0 22px 48px rgba(30,110,233,.24);position:relative;overflow:hidden}.page-hero:after{content:"";position:absolute;right:-70px;top:-80px;width:240px;height:240px;background:rgba(255,255,255,.14);border-radius:50%}.kpi-card{position:relative;overflow:hidden;border:0;color:#fff;min-height:150px}.kpi-card .card-body{position:relative;z-index:1}.kpi-card:after{content:"";position:absolute;right:-40px;bottom:-60px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.18)}.kpi-card h4{font-size:.9rem;opacity:.9;text-transform:uppercase;letter-spacing:.08em}.kpi-card h2{font-size:2rem}.kpi-icon{width:58px;height:58px;border-radius:19px;background:rgba(255,255,255,.18);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}

/* POS */
.pos-workspace{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:24px;align-items:start}.pos-products-card,.pos-cart-card{border-radius:24px}.pos-cart-card{position:sticky;top:110px}.pos-toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}.category-scroll{display:flex;gap:10px;overflow:auto;padding:4px 2px 12px}.category-btn{white-space:nowrap;border-radius:999px;padding:.65rem 1rem}.item-card{cursor:pointer;border-radius:22px;min-height:178px;transition:.18s ease;border:1px solid #e0ebf2;background:linear-gradient(180deg,#fff,#f8fbfd)}.item-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(15,143,141,.16);border-color:rgba(15,143,141,.32)}.item-visual{width:62px;height:62px;border-radius:22px;margin:0 auto 12px;background:linear-gradient(145deg,rgba(15,143,141,.15),rgba(30,110,233,.13));display:grid;place-items:center;color:var(--pos-primary);font-size:1.35rem}.price-chip{display:inline-flex;align-items:center;gap:4px;background:#e9fbf7;color:var(--pos-primary-dark);font-weight:900;border-radius:999px;padding:.36rem .7rem}.cart-empty{padding:36px 12px;border:2px dashed #d9e7ef;border-radius:18px;background:#f8fbfd}.cart-line{display:grid;grid-template-columns:1fr auto;gap:10px;padding:13px;border:1px solid #e6eef5;border-radius:18px;margin-bottom:10px;background:#fff;box-shadow:0 6px 14px rgba(15,23,42,.05)}.qty-control{display:flex;align-items:center;gap:8px;justify-content:flex-end}.qty-control .btn{width:34px;height:34px;padding:0;display:grid;place-items:center}.total-row{background:#102638!important;color:#fff;border-radius:14px}.quick-cash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.payment-panel{background:#f6fafc;border:1px solid var(--pos-border);border-radius:18px;padding:14px}.checkout-total{background:linear-gradient(135deg,#102638,#0f8f8d);color:#fff;border-radius:20px;padding:16px 18px;margin:14px 0}.checkout-total small{opacity:.75;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.checkout-total strong{font-size:2rem;line-height:1}

/* Login */
.login-body{min-height:100vh;background:radial-gradient(circle at 18% 12%,rgba(255,176,32,.22),transparent 28%),linear-gradient(135deg,#07131f,#0f8f8d 55%,#1e6ee9);display:flex;align-items:center;justify-content:center;padding:28px}.login-shell{width:min(1120px,100%);min-height:660px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:34px;box-shadow:0 28px 80px rgba(0,0,0,.30);backdrop-filter:blur(20px);display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden}.login-hero{padding:54px;color:#fff;position:relative;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));display:flex;flex-direction:column;justify-content:space-between}.login-hero h1{font-size:3.4rem;line-height:1;font-weight:900;max-width:520px}.login-hero p{font-size:1.08rem;color:#d9f7ff;max-width:490px}.feature-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-tile{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:16px}.feature-tile i{font-size:1.45rem;margin-bottom:10px}.login-panel{background:#fff;padding:54px;display:flex;align-items:center}.login-card{width:100%;background:#fff;border-radius:28px;box-shadow:none;padding:0}.login-logo{width:76px;height:76px;border-radius:24px;background:linear-gradient(145deg,var(--pos-primary),#34d399);display:grid;place-items:center;color:#fff;font-size:2rem;box-shadow:0 16px 32px rgba(15,143,141,.3);margin-bottom:20px}.login-card h2{font-size:2rem;font-weight:900}.login-card .btn{height:54px;font-size:1rem}

/* Legacy helpers */
.item-card.disabled,.bg-light.item-card{opacity:.58}.invoice-header{border-bottom:2px solid #dee2e6;margin-bottom:20px;padding-bottom:20px}.no-print{display:block}@media print{.no-print,.app-sidebar,.topbar{display:none!important}.app-main{margin:0!important;width:100%!important}.card{box-shadow:none;border:1px solid #ddd}.btn{display:none}.content-wrap{padding:0}}

@media (max-width:1100px){.pos-workspace{grid-template-columns:1fr}.pos-cart-card{position:static}.app-sidebar{transform:translateX(-105%);transition:.2s ease}.app-layout.sidebar-open .app-sidebar{transform:translateX(0)}.app-main{margin-left:0;width:100%}.mobile-menu-btn{display:grid;place-items:center}.topbar{padding:18px}.content-wrap{padding:20px}.login-shell{grid-template-columns:1fr}.login-hero{display:none}}
@media (max-width:768px){.topbar-actions{display:none}.content-wrap{padding:16px}.feature-stack{grid-template-columns:1fr}.quick-cash-grid{grid-template-columns:repeat(2,1fr)}.login-panel{padding:32px}.page-hero{padding:22px}.kpi-card h2{font-size:1.65rem}}

/* Phase 3.1 - collapsible POS sidebar and menu groups */
.sidebar-topbar{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:14px;margin-bottom:8px}.sidebar-topbar .brand-lockup{border-bottom:0;padding:8px;min-width:0;flex:1}.brand-copy{min-width:0}.brand-copy strong,.brand-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-collapse-btn{width:40px;height:40px;border:0;border-radius:14px;color:#d8e8f5;background:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);display:grid;place-items:center;transition:.18s ease}.sidebar-collapse-btn:hover{background:linear-gradient(145deg,var(--pos-primary),var(--pos-secondary));color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,143,141,.28)}
.side-nav-viewport{position:relative;flex:1;min-height:0;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}.side-nav{padding:14px 0 18px;overflow:visible;transition:transform .12s ease;will-change:transform}.side-nav::-webkit-scrollbar{display:none}.sidebar-scroll-control{height:30px;border:0;border-radius:13px;background:rgba(255,255,255,.075);color:#acc4d9;display:grid;place-items:center;transition:.18s ease;margin:4px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}.sidebar-scroll-control:hover{background:rgba(255,255,255,.16);color:#fff;transform:scale(1.04)}.sidebar-scroll-control:active{transform:scale(.96)}
.nav-group{margin:6px 0}.nav-group-toggle{width:100%;border:0;background:transparent;color:#8fb0ca;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:15px;padding:11px 12px;margin:2px 0;font-size:.76rem;text-transform:uppercase;letter-spacing:.105em;font-weight:900;transition:.18s ease}.nav-group-toggle span{display:flex;align-items:center;gap:12px;min-width:0}.nav-group-toggle i:first-child{width:24px;text-align:center;font-size:.98rem;color:#54d2cc}.nav-group-toggle:hover{background:rgba(255,255,255,.07);color:#fff}.group-caret{font-size:.72rem;transition:transform .18s ease}.nav-group.open .group-caret{transform:rotate(180deg)}.nav-group-items{max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:max-height .22s ease,opacity .16s ease,transform .18s ease}.nav-group.open .nav-group-items{max-height:420px;opacity:1;transform:translateY(0)}.nav-group .side-link{margin-left:8px;padding-left:12px}.nav-group .side-link:before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:2px;border-radius:999px;background:rgba(143,176,202,.35)}
.app-layout.sidebar-collapsed .app-sidebar{width:92px;padding-left:14px;padding-right:14px}.app-layout.sidebar-collapsed .app-main{margin-left:92px;width:calc(100% - 92px)}.app-layout.sidebar-collapsed .brand-copy,.app-layout.sidebar-collapsed .sidebar-user-copy,.app-layout.sidebar-collapsed .logout-icon,.app-layout.sidebar-collapsed .side-link span,.app-layout.sidebar-collapsed .nav-group-toggle strong,.app-layout.sidebar-collapsed .group-caret{display:none}.app-layout.sidebar-collapsed .brand-lockup{justify-content:center;padding-inline:0}.app-layout.sidebar-collapsed .brand-mark{width:52px;height:52px}.app-layout.sidebar-collapsed .sidebar-topbar{flex-direction:column;border-bottom:0;padding-bottom:8px}.app-layout.sidebar-collapsed .sidebar-collapse-btn i{transform:rotate(180deg)}.app-layout.sidebar-collapsed .side-link,.app-layout.sidebar-collapsed .nav-group-toggle{justify-content:center;padding:13px 0;margin:6px 0}.app-layout.sidebar-collapsed .side-link i,.app-layout.sidebar-collapsed .nav-group-toggle i:first-child{width:auto;font-size:1.12rem}.app-layout.sidebar-collapsed .nav-group .side-link{margin-left:0}.app-layout.sidebar-collapsed .nav-group .side-link:before{display:none}.app-layout.sidebar-collapsed .sidebar-user{justify-content:center;padding:10px}.app-layout.sidebar-collapsed .avatar-pill{width:46px;height:46px;border-radius:16px}.app-layout.sidebar-collapsed .nav-group-items{max-height:480px;opacity:1;transform:none}.app-layout.sidebar-collapsed .nav-group-toggle{background:rgba(255,255,255,.05)}.app-layout.sidebar-collapsed .sidebar-scroll-control{margin-inline:4px}
@media (min-width:1101px){.app-sidebar,.app-main{transition:width .22s ease,margin-left .22s ease,transform .22s ease}.app-layout.sidebar-collapsed .topbar{padding-left:28px}}
@media (max-width:1100px){.app-layout.sidebar-collapsed .app-sidebar{width:286px}.app-layout.sidebar-collapsed .app-main{margin-left:0;width:100%}.app-layout.sidebar-collapsed .brand-copy,.app-layout.sidebar-collapsed .sidebar-user-copy,.app-layout.sidebar-collapsed .logout-icon,.app-layout.sidebar-collapsed .side-link span,.app-layout.sidebar-collapsed .nav-group-toggle strong,.app-layout.sidebar-collapsed .group-caret{display:initial}.app-layout.sidebar-collapsed .sidebar-topbar{flex-direction:row;border-bottom:1px solid rgba(255,255,255,.10)}.app-layout.sidebar-collapsed .side-link,.app-layout.sidebar-collapsed .nav-group-toggle{justify-content:space-between;padding:12px 13px}.app-layout.sidebar-collapsed .nav-group-toggle span{display:flex}.app-layout.sidebar-collapsed .sidebar-collapse-btn{display:none}.sidebar-collapse-btn{display:none}}


/* Phase 3.2 - no-flicker collapsed sidebar state.
   The html class is applied in the document head before CSS loads, so navigating
   from a collapsed sidebar no longer flashes the full-width menu first. */
@media (min-width:1101px){
    html.sidebar-state-collapsed .app-layout .app-sidebar{width:92px;padding-left:14px;padding-right:14px}
    html.sidebar-state-collapsed .app-layout .app-main{margin-left:92px;width:calc(100% - 92px)}
    html.sidebar-state-collapsed .app-layout .brand-copy,
    html.sidebar-state-collapsed .app-layout .sidebar-user-copy,
    html.sidebar-state-collapsed .app-layout .logout-icon,
    html.sidebar-state-collapsed .app-layout .side-link span,
    html.sidebar-state-collapsed .app-layout .nav-group-toggle strong,
    html.sidebar-state-collapsed .app-layout .group-caret{display:none}
    html.sidebar-state-collapsed .app-layout .brand-lockup{justify-content:center;padding-inline:0}
    html.sidebar-state-collapsed .app-layout .brand-mark{width:52px;height:52px}
    html.sidebar-state-collapsed .app-layout .sidebar-topbar{flex-direction:column;border-bottom:0;padding-bottom:8px}
    html.sidebar-state-collapsed .app-layout .sidebar-collapse-btn i{transform:rotate(180deg)}
    html.sidebar-state-collapsed .app-layout .side-link,
    html.sidebar-state-collapsed .app-layout .nav-group-toggle{justify-content:center;padding:13px 0;margin:6px 0}
    html.sidebar-state-collapsed .app-layout .side-link i,
    html.sidebar-state-collapsed .app-layout .nav-group-toggle i:first-child{width:auto;font-size:1.12rem}
    html.sidebar-state-collapsed .app-layout .nav-group .side-link{margin-left:0}
    html.sidebar-state-collapsed .app-layout .nav-group .side-link:before{display:none}
    html.sidebar-state-collapsed .app-layout .sidebar-user{justify-content:center;padding:10px}
    html.sidebar-state-collapsed .app-layout .avatar-pill{width:46px;height:46px;border-radius:16px}
    html.sidebar-state-collapsed .app-layout .nav-group-items{max-height:480px;opacity:1;transform:none}
    html.sidebar-state-collapsed .app-layout .nav-group-toggle{background:rgba(255,255,255,.05)}
    html.sidebar-state-collapsed .app-layout .sidebar-scroll-control{margin-inline:4px}
    html.sidebar-state-collapsed .app-layout .topbar{padding-left:28px}
}

/* Phase 3.3: keep POS product grid stable during toggle/filter refreshes */
#itemsGrid{position:relative;transition:opacity .14s ease,filter .14s ease;min-height:260px;}
#itemsGrid.items-grid-refreshing{opacity:.72;filter:saturate(.92);pointer-events:none;}
#itemsGrid.items-grid-refreshing::after{content:"";position:absolute;top:10px;right:14px;width:18px;height:18px;border:3px solid rgba(15,143,141,.18);border-top-color:rgba(15,143,141,.9);border-radius:50%;animation:posGridSpin .65s linear infinite;z-index:4;}
@keyframes posGridSpin{to{transform:rotate(360deg)}}