/* ==========================================================================
   KV POS — GLOBAL stylesheet (shared design system across all app pages):
   theme vars/skins, topbar, nav tabs, tool buttons, gear/branch menus,
   shift badge, theme toggle, buttons, modals, inputs, tables, scrollbars.
   Loaded by every app page BEFORE its inline <style>. Edit shared styles
   HERE only; page-specific rules remain in each page's inline <style>.
   ========================================================================== */

:root{
  /* ---- DESIGN DIMENSIONS (unified scale; use these, not raw px) ---- */
  --r-1:5px; --r-2:9px; --r-3:12px; --r-4:16px; --r-5:20px; --r-pill:999px; --r-round:50%;
  --bw:1px; --bw-card:1.5px; --bw-2:2px; --bw-3:3px;
  --sh-1:0 4px 16px rgba(0,0,0,0.40);
  --sh-2:0 8px 28px rgba(0,0,0,0.45);
  --sh-3:0 12px 40px rgba(0,0,0,0.60);
  --sh-4:0 20px 60px rgba(0,0,0,0.60);
  /* Bottom breathing room so fixed action bars/buttons clear the phone's home-indicator /
     gesture bar and the browser chrome. = the device safe-area inset, but always at least
     10px so bottom buttons get a gentle lift even on flat phones. Needs viewport-fit=cover
     on the page (and on the pos.html shell, since env() comes from the top-level viewport). */
  --safe-b: max(env(safe-area-inset-bottom, 0px), 10px);
}


.logo-box{height:70%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:0.95;font-weight:900;font-size:clamp(15px,2.4vmin,26px);color:var(--accent,#3B6FE0);flex-shrink:0;padding:0 0.4vmin;}
.logo-box .logo-pos{font-size:clamp(7px,1.05vmin,12px);font-weight:800;letter-spacing:0.18em;opacity:0.85;}
/* Unified app logo in the topbar — the KV POS lettermark WITHOUT the filled squircle
   (a filled box in a horizontal bar reads as a button). kv-wordmark.png is the aligned
   glyphs on transparent, used as a MASK so the topbar tints it to the theme text colour
   (light on dark, accent on light) — the theme rules below set that fill and must
   out-specify `body.premium .logo-box{background:none}`. Scoped to .topbar so it never
   touches the login card's own .logo-box. The favicon stays the KV-only mini mark, and
   the login/loading/landing keep the full squircle (kv-logo.png), deliberately. */
.topbar .logo-box{-webkit-mask:url('/kv-wordmark.png') center/contain no-repeat;mask:url('/kv-wordmark.png') center/contain no-repeat;background:#ECECEE;height:82%;aspect-ratio:1/1;width:auto;padding:0;font-size:0;}
.topbar .logo-box span{display:none;}
.nav-tabs{display:flex;gap:0.6vmin;justify-content:center;flex-wrap:nowrap;flex-shrink:0;}
.topbar.collapsed #btn-hamburger{display:flex !important;margin-right:auto;}
.nav-tab{height:6vmin;min-height:42px;max-height:56px;padding:0 2vmin;border-radius:var(--r-2);border:none;font-size:clamp(11px,1.5vmin,17px);font-weight:800;cursor:pointer;letter-spacing:0.3px;display:flex;align-items:center;justify-content:center;white-space:nowrap;flex-shrink:0;}
.tool-btn:active{transform:scale(0.92);}
.tool-btn svg{width:55%;height:55%;color:#fff;}
.user-role{font-size:clamp(9px,1.1vmin,13px);color:rgba(255,255,255,0.8);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.user-name{font-size:clamp(12px,1.5vmin,17px);color:#fff;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;}
.shift-role{display:inline-flex;align-items:center;gap:5px;}
/* Shift tile: the status word itself is coloured green (open) / red (closed). */
#shift-name.open{color:#22C55E;}
#shift-name.closed{color:#EF4444;}
.topbar-time{font-size:clamp(10px,1.3vmin,15px);color:#fff;text-align:right;line-height:1.4;flex-shrink:0;}
.nav-dropdown.show{display:flex;}
/* phone-first rows: 48px touch floor + a 15px font floor (vmin padding alone collapsed
   to ~23px rows on phones). max-height so a short/landscape screen scrolls, never clips. */
.nav-dropdown{max-height:84vh;overflow-y:auto;}
.nav-dd-item{min-height:48px;display:flex;align-items:center;gap:1.2vmin;padding:1.3vmin 2vmin;border:none;border-radius:var(--r-2);background:var(--s-input);color:var(--t-main);font-size:clamp(15px,1.8vmin,18px);font-weight:800;cursor:pointer;text-align:left;}
/* shared big touch input (hoisted from finance + cashier, v1.1.49) */
.t-input{padding:1.4vmin 1.6vmin!important;font-size:clamp(15px,2vmin,18px)!important;border-radius:12px!important;min-height:48px;}
/* shared incl/excl tax toggle — item editor, expenses, income, purchases (v1.1.52) */
.tax-seg{display:inline-flex;background:var(--s-rail);border-radius:var(--r-2);padding:3px;gap:3px;}
.tax-opt{padding:0.7vmin 1.4vmin;border:none;border-radius:var(--r-1);background:transparent;color:var(--t-muted);font-size:clamp(11px,1.4vmin,15px);font-weight:800;cursor:pointer;}
.tax-opt.selected{background:var(--orange);color:#fff;}
.nav-dd-item:hover{background:var(--orange);color:#fff;}
/* ---- gear menu (SINGLE SOURCE OF TRUTH — every screen renders identically) ----
   Each row is a tappable pill: a label on the left and an optional control on the
   right (theme toggle / edit-layout switch). .gear-item is the button-only variant
   (inventory actions) sized to match the rows. Do NOT redefine these per page. */
.gear-menu{position:fixed;top:8vh;right:1vmin;background:var(--s-card);border:var(--bw) solid var(--s-card-border);border-radius:var(--r-3);padding:1.2vmin;z-index:130;display:none;flex-direction:column;gap:0.8vmin;min-width:200px;box-shadow:var(--sh-2);}
.gear-menu.show{display:flex;}
.gear-row{display:flex;align-items:center;justify-content:space-between;gap:1.5vmin;padding:1.2vmin 1.4vmin;border-radius:var(--r-2);background:var(--s-input);cursor:pointer;min-width:0;}
.gear-row:hover{background:var(--s-bar);}
/* the Theme row only holds the toggle — it isn't itself a button, so no pointer cursor */
.gear-row:has(.theme-seg){cursor:default;}
.gear-row-label{font-size:clamp(13px,1.6vmin,17px);font-weight:700;color:var(--t-main);display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gear-item{text-align:left;padding:1.2vmin 1.4vmin;border:none;background:var(--s-input);border-radius:var(--r-2);color:var(--t-main);font-size:clamp(13px,1.6vmin,17px);font-weight:700;cursor:pointer;}
.gear-item:hover{background:var(--s-bar);}
/* separates the global section (top: Theme, Full Screen) from the per-screen section (bottom) */
.gear-divider{height:1px;background:var(--divider);margin:4px 6px;flex-shrink:0;}
.theme-seg{display:flex;background:var(--s-rail);border-radius:var(--r-2);padding:3px;gap:3px;}
.theme-opt{padding:0.7vmin 1.4vmin;border-radius:var(--r-1);font-size:clamp(11px,1.4vmin,15px);font-weight:700;color:var(--t-muted);cursor:pointer;border:none;background:transparent;}
.theme-opt.active{background:var(--orange);color:#fff;}
/* ===== shared date-period picker (POSPeriod: dashboard / finance / delivery) =====
   z-index on the wrapper lifts the whole control (chip strip, popover, mobile menu)
   above any KPI/card rows that sit later in the DOM and would otherwise paint over it. */
.period-ctl{position:relative;z-index:30;display:inline-block;}
.period-seg{position:relative;display:flex;flex-wrap:wrap;background:var(--s-input);border:var(--bw) solid var(--s-input-border);border-radius:var(--r-2);}
.period-opt{padding:1vmin 2vmin;border:none;background:none;color:var(--t-main);font-size:clamp(12px,1.6vmin,16px);font-weight:800;cursor:pointer;white-space:nowrap;border-radius:var(--r-2);}
.period-opt.active{background:#2C3E50;color:#fff;}
.period-date-btn{display:inline-flex;align-items:center;}
/* popover anchored to the whole control's right edge so a wrapped chip can't push it off-screen */
.period-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:70;width:min(260px,86vw);background:var(--s-card);border:var(--bw-card) solid var(--s-card-border);border-radius:var(--r-3);box-shadow:0 12px 34px rgba(0,0,0,0.28);padding:1.4vmin 1.6vmin;display:flex;flex-direction:column;gap:1vmin;}
.period-pop[hidden]{display:none;}
.pp-title{font-size:clamp(12px,1.5vmin,15px);font-weight:800;color:var(--t-main);}
.pp-field{display:flex;align-items:center;justify-content:space-between;gap:1vmin;font-size:clamp(11px,1.4vmin,14px);font-weight:700;color:var(--t-muted);}
.pp-field input{flex:0 0 auto;background:var(--s-input);border:var(--bw) solid var(--s-input-border);border-radius:var(--r-2);color:var(--t-main);font:inherit;font-weight:700;padding:0.7vmin 1vmin;}
.pp-hint{font-size:clamp(10px,1.2vmin,12px);color:var(--t-muted);}
.pp-actions{display:flex;gap:0.8vmin;justify-content:flex-end;margin-top:0.4vmin;}
.pp-btn{border:none;border-radius:var(--r-2);padding:0.8vmin 1.6vmin;font:inherit;font-weight:800;cursor:pointer;font-size:clamp(11px,1.4vmin,14px);}
.pp-cancel{background:var(--s-input);color:var(--t-main);}
.pp-apply{background:var(--accent);color:#fff;}
/* phone view: the chip strip is replaced by one "Label ⌄" button + a dropdown of the same options */
.period-mini{display:none;align-items:center;gap:0.8vmin;padding:1vmin 1.6vmin;background:var(--s-input);border:var(--bw) solid var(--s-input-border);border-radius:var(--r-2);color:var(--t-main);font-size:clamp(12px,1.6vmin,16px);font-weight:800;cursor:pointer;white-space:nowrap;}
.period-mini-cx{opacity:0.7;font-weight:900;}
.period-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:70;min-width:180px;max-width:86vw;background:var(--s-card);border:var(--bw-card) solid var(--s-card-border);border-radius:var(--r-3);box-shadow:0 12px 34px rgba(0,0,0,0.28);padding:0.6vmin;flex-direction:column;}
.period-menu-item{text-align:left;padding:1.1vmin 1.4vmin;border:none;background:none;color:var(--t-main);font:inherit;font-weight:700;font-size:clamp(12px,1.6vmin,15px);cursor:pointer;border-radius:var(--r-2);min-height:44px;}
.period-menu-item.active{background:var(--s-input);}
@media (max-width:640px){
  .period-ctl .period-seg{display:none;}
  .period-ctl .period-mini{display:inline-flex;}
  .period-ctl .period-menu:not([hidden]){display:flex;}
}
body.premium .gear-menu{background:#141417;border:var(--bw) solid var(--pm-card-border);box-shadow:var(--sh-3);}
/* ---- toggle switch (gear "Edit Layout" row, inventory column toggles — ONE component) ---- */
.kb-toggle-track{width:clamp(36px,4vmin,52px);height:clamp(20px,2.4vmin,30px);background:#555;border-radius:var(--r-pill);position:relative;transition:background 0.2s;flex-shrink:0;cursor:pointer;}
.kb-toggle-track.on{background:var(--green);}
.kb-toggle-knob{position:absolute;top:10%;left:6%;width:46%;height:80%;background:#fff;border-radius:50%;transition:left 0.2s;}
.kb-toggle-track.on .kb-toggle-knob{left:50%;}
body.premium .logo-box{background:none;border:none;color:#ECECEE;}
body.premium .nav-tab:hover{background:rgba(255,255,255,0.09)!important;color:var(--t-main)!important;}
body.premium .topbar-user{color:var(--t-main);}
body.premium .user-role{color:var(--t-muted);}
body.premium .topbar-time{color:var(--t-muted);}
body.premium .nav-dd-item{color:var(--t-main);}
body.premium .nav-dd-item:hover{background:rgba(255,255,255,0.06);}
body.premium .gear-row-label{color:var(--t-main);}
body.premium .theme-seg{background:rgba(255,255,255,0.06);}
body.premium .theme-opt{color:var(--t-muted);}
body.premium .theme-opt.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#FFFFFF;}
/* ===== PREMIUM DARK SKIN (shared — hoisted from 6 pages' inline <style>, v1.1.44).
   pos-dashboard.html keeps its own body.premium (glassy cards + legacy grey --s-* preserved). ===== */
body.premium{
  --accent:#3B6FE0; --accent2:#5B8CFF;
  --glow:rgba(59,111,224,0.18);
  --pm-bg0:#0A0A0C; --pm-bg1:#141417;
  --pm-card:#1A1A1D;
  --pm-card-border:rgba(255,255,255,0.09);
  --pm-card-hi:rgba(255,255,255,0.08);
  /* override the base dark surface vars so all existing components inherit the navy palette */
  --s-app:#0A0A0C; --s-panel:#141417; --s-rail:#070709;
  --s-card:#1A1A1D; --s-card-border:rgba(255,255,255,0.09);
  --s-bar:#0E0E11; --s-input:rgba(255,255,255,0.05); --s-input-border:rgba(255,255,255,0.14);
  /* TEXT-COLOR RULE (v1.2.26, owner: "black font in dark theme, never again"):
     every --t-* token must stay READABLE on the dark surfaces — --t-faint ends
     up on real text (hints, versions, sub-labels), so it is #75757F, a step
     quieter than --t-muted but never darker. Do NOT lower these back toward
     black, and never hardcode a dark hex as a text color in dark-theme scope:
     dark text belongs ONLY on explicitly light chips (gold/amber/white) or in
     print/receipt documents (paper is white). */
  --t-main:#ECECEE; --t-muted:#8C8C94; --t-faint:#75757F; --divider:rgba(255,255,255,0.07);
  --orange:#3B6FE0; --green:#1A8A3C; --gold:#FFD479; --blue:#5B8CFF; --purple:#3B6FE0; --price:#FFD479;
  font-family:'Manrope',system-ui,sans-serif;
}
/* shared dark button/ghost/modal overrides (hoisted from 6 pages, v1.1.47) */
body.premium .btn-add,body.premium .btn-purple,body.premium .btn-pay,body.premium .modal-confirm,body.premium .calc-btn.eq{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#FFFFFF!important;border:none!important;box-shadow:0 0 18px var(--glow)!important;}
body.premium .btn-ghost,body.premium .modal-cancel{background:rgba(255,255,255,0.06)!important;color:var(--t-main)!important;border:var(--bw) solid var(--pm-card-border)!important;}
/* ===== PREMIUM LIGHT SKIN (shared) ===== */
body.premium-light{
  --accent:#3B6FE0; --accent2:#3E6DE8;     /* deeper teal + blue for white bg */
  --glow:rgba(59,111,224,0.18);
  --pm-bg0:#F4F7FB; --pm-bg1:#FBFCFE;
  --pm-card:#FFFFFF;
  --pm-card-border:#B4C1D2;      /* v1.3.17 bump, deepened again v1.5.25 — button/card EDGES crisp on white */
  --pm-card-hi:rgba(255,255,255,0.9);
  /* override base surface vars so existing components inherit the light palette */
  --s-app:#F4F7FB; --s-panel:#FFFFFF; --s-rail:#EAEFF6;
  --s-card:#FFFFFF; --s-card-border:#B4C1D2; --s-totalbox:#F4F7FB; --s-orderbg:#FFFFFF; --s-orderhead:#EAEFF6; --s-payment:#F4F7FB;
  --s-bar:#EAEFF6; --s-input:#F3F6FB; --s-input-border:#9DACC2;
  --t-main:#0F1B33; --t-muted:#45536B; --t-faint:#6B7688; --divider:#C6D1DF;   /* v1.3.17: darker text/dividers for legible contrast on white */
  --orange:#3B6FE0; --green:#1A8A3C; --gold:#C77F12; --blue:#3E6DE8; --purple:#3B6FE0; --price:#C77F12;
  font-family:'Manrope',system-ui,sans-serif;
}
/* app background: crisp white with faint blue-grey tint pools */
body.premium-light #app{
  background:
    radial-gradient(1100px 560px at 82% -10%, rgba(62,109,232,0.06), transparent 60%),
    radial-gradient(900px 480px at -6% 110%, rgba(59,111,224,0.06), transparent 55%),
    linear-gradient(180deg,var(--pm-bg1),var(--pm-bg0));
}
/* ---- nav bar: WHITE in the light theme (dark content for contrast) ---- */
body.premium-light .topbar{background:#FFFFFF;border-bottom:var(--bw) solid var(--pm-card-border);box-shadow:0 1px 10px rgba(20,30,60,0.06);}
body.premium-light .logo-box{background:none;border:none;color:var(--accent);}
/* keep the topbar logo image in both themes (the rules above blank .logo-box's bg) */
/* topbar lettermark tint per theme (must out-specify .logo-box{background:none} above) */
body.premium .topbar .logo-box{background:#ECECEE;}
body.premium-light .topbar .logo-box{background:var(--accent);}
body.premium-light .nav-tab{background:rgba(20,30,60,0.05)!important;color:var(--t-main)!important;box-shadow:none!important;border:var(--bw) solid var(--pm-card-border);font-family:'Sora',sans-serif;}
body.premium-light .nav-tab:hover{background:rgba(20,30,60,0.10)!important;color:var(--t-main)!important;}
body.premium-light .tool-btn,body.premium-light #btn-hamburger{background:rgba(20,30,60,0.05);border:var(--bw) solid var(--pm-card-border);}
body.premium-light .tool-btn:hover,body.premium-light #btn-hamburger:hover{background:rgba(20,30,60,0.10);}
body.premium-light .tool-btn svg,body.premium-light #btn-hamburger svg{color:var(--t-main);}
body.premium-light .topbar-user{color:var(--t-main);border-right-color:var(--pm-card-border);}
body.premium-light .user-name{color:var(--t-main);}
body.premium-light .user-role{color:var(--t-muted);}
body.premium-light .topbar-time{color:var(--t-muted);}
/* dropdown / branch / gear menus (light) */
body.premium-light .nav-dropdown,body.premium-light .branch-menu,body.premium-light .gear-menu,body.premium-light .cat-dropdown{background:#FFFFFF;border:var(--bw) solid var(--pm-card-border);box-shadow:0 16px 44px rgba(20,30,60,0.15);}
body.premium-light .nav-dd-item{color:var(--t-main);}
body.premium-light .nav-dd-item:hover{background:#F0F4FA;}
body.premium-light .gear-row-label{color:var(--t-main);}
body.premium-light .theme-seg{background:#EEF2F8;}
body.premium-light .theme-opt{color:var(--t-muted);}
body.premium-light .theme-opt.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
/* ---- generic surfaces ---- */
body.premium-light .sum-card,body.premium-light .dash-card{
  background:#FFFFFF;border:var(--bw) solid var(--pm-card-border);border-radius:var(--r-4);
  box-shadow:0 6px 22px rgba(20,30,60,0.06);
}
body.premium-light .summary-row .sum-card::before{background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.6;}
body.premium-light .dash-title{background:linear-gradient(90deg,#15203A,#3B6FE0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.premium-light .sum-val.gold{color:#C77F12;text-shadow:none;}
body.premium-light .sum-val.good{color:var(--accent);text-shadow:none;}
body.premium-light .sum-val.warn{color:#D6463A;}
body.premium-light .dash-card-h span:first-child::before{background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:none;}
body.premium-light .modal,body.premium-light .calc{background:#FFFFFF!important;border:var(--bw) solid var(--pm-card-border)!important;box-shadow:0 24px 60px rgba(20,30,60,0.2)!important;}
body.premium-light .modal-title,body.premium-light .modal h3{color:var(--t-main);}
body.premium-light input,body.premium-light select,body.premium-light textarea,body.premium-light .t-input,body.premium-light .search-box,body.premium-light .exp-search,body.premium-light .filter-date{background:#F3F6FB!important;border-color:var(--pm-card-border)!important;color:var(--t-main)!important;}
body.premium-light input::placeholder,body.premium-light textarea::placeholder{color:var(--t-faint);}
body.premium-light .btn-add,body.premium-light .btn-purple,body.premium-light .btn-pay,body.premium-light .modal-confirm,body.premium-light .calc-btn.eq{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#fff!important;border:none!important;box-shadow:0 4px 16px var(--glow)!important;}
body.premium-light .btn-ghost,body.premium-light .modal-cancel{background:#EEF2F8!important;color:var(--t-main)!important;border:var(--bw) solid var(--pm-card-border)!important;}
body.premium-light table th{color:var(--t-muted)!important;border-color:var(--divider)!important;}
body.premium-light table td{border-color:var(--divider)!important;color:var(--t-main);}
body.premium-light tr:hover td{background:#F6F9FD;}
body.premium-light .chip,body.premium-light .pay-pill{background:#F1F5FA;color:var(--t-muted);border:var(--bw) solid var(--pm-card-border);}
body.premium-light .cat-btn,body.premium-light .cat-chip{background:none;color:var(--t-muted);border:none;}   /* flat, like the Settings sub-bar */
body.premium-light .cat-btn.active,body.premium-light .cat-chip.active,body.premium-light .chip.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;box-shadow:0 2px 10px var(--glow);}
body.premium-light .period-seg{background:#EEF2F8;border:var(--bw) solid var(--pm-card-border);}
body.premium-light .period-opt{color:var(--t-muted);}
body.premium-light .period-opt.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 2px 12px var(--glow);}
body.premium-light .period-mini{background:#EEF2F8;border:var(--bw) solid var(--pm-card-border);color:var(--t-main);}
body.premium-light .period-menu{background:#FFFFFF;border:var(--bw) solid var(--pm-card-border);box-shadow:0 16px 44px rgba(20,30,60,0.15);}
body.premium-light .period-menu-item{color:var(--t-main);}
body.premium-light .period-menu-item.active{background:#EEF2F8;}
body.premium-light .pp-cancel{background:#EEF2F8;}
/* premium (dark): glassy strip + gradient active chip, matched on the mobile mini/menu */
body.premium .period-seg{background:var(--pm-card);border:var(--bw) solid var(--pm-card-border);backdrop-filter:blur(12px);border-radius:var(--r-3);}
body.premium .period-opt{color:var(--t-muted);}
body.premium .period-opt.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#FFFFFF;box-shadow:0 0 18px var(--glow);}
body.premium .period-mini{background:var(--pm-card);border:var(--bw) solid var(--pm-card-border);backdrop-filter:blur(12px);}
body.premium .period-menu{background:#141417;border:var(--bw) solid var(--pm-card-border);}
body.premium .period-menu-item.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#FFFFFF;}
body.premium-light .bar,body.premium-light .bar.bar-met{background:linear-gradient(to top,rgba(59,111,224,0.35),var(--accent));box-shadow:none;}
body.premium-light .bar.bar-miss{background:linear-gradient(to top,rgba(214,70,58,0.25),#E06458);box-shadow:none;}
body.premium-light .dash-bar{background:#EAEFF6;}
body.premium-light .dash-bar-fill{background:linear-gradient(90deg,var(--accent2),var(--accent));}
body.premium-light .dash-rank{background:#EAF6F3;color:var(--accent);border:var(--bw) solid var(--pm-card-border);}
body.premium-light .log-user{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;}
body.premium-light .act-dot.sale{background:var(--accent);box-shadow:none;}
body.premium-light .act-dot.exp{background:#E06458;box-shadow:none;}
body.premium-light .act-amt.good,body.premium-light .dash-li-val.good{color:var(--accent);}
body.premium-light .act-amt.warn,body.premium-light .dash-li-val.warn{color:#D6463A;}
body.premium-light .toast{background:#15203A;border:var(--bw) solid #15203A;color:#fff;}
body.premium-light .keyboard-panel{background:#FFFFFF;border-top:var(--bw) solid var(--pm-card-border);}
body.premium-light .kb-key{background:#F1F5FA;border-color:var(--pm-card-border);color:var(--t-main);}
body.premium-light .kb-key.kb-done{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
body.premium-light *::-webkit-scrollbar{width:10px;height:10px;}
body.premium-light *::-webkit-scrollbar-thumb{background:#D6DEEA;border-radius:var(--r-2);}
/* custom selected/step elements -> accent gradient, dark text */
body.premium .step-num{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#FFFFFF!important;}
body.premium .selected,body.premium .unit-btn.selected,body.premium .disc-seg .active{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;border-color:transparent!important;color:#FFFFFF!important;box-shadow:0 0 14px var(--glow)!important;}
body.premium .modal-btn{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#FFFFFF!important;}
body.premium .shift-active{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#FFFFFF!important;}
/* custom selected/step elements (light) */
body.premium-light .step-num{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#fff!important;}
body.premium-light .selected,body.premium-light .unit-btn.selected,body.premium-light .disc-seg .active{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 2px 10px var(--glow)!important;}
body.premium-light .modal-btn{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#fff!important;}
/* Cancel must stay the ghost button — the .modal-btn gradient above outranks the
   earlier .modal-cancel rules by source order, so re-assert with specificity */
body.premium .modal-btn.modal-cancel{background:rgba(255,255,255,0.06)!important;color:var(--t-main)!important;border:var(--bw) solid var(--pm-card-border)!important;box-shadow:none!important;}
body.premium-light .modal-btn.modal-cancel{background:#EEF2F8!important;color:var(--t-main)!important;border:var(--bw) solid var(--pm-card-border)!important;box-shadow:none!important;}
body.premium-light .shift-active{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#fff!important;}

/* unified topbar chrome (toast/tool-btn/topbar-user) — single source */
.tool-btn{width:6vmin;height:6vmin;min-width:42px;min-height:42px;max-width:56px;max-height:56px;background:rgba(0,0,0,0.18);border:var(--bw) solid rgba(255,255,255,0.25);border-radius:var(--r-2);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.topbar-user{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;flex-shrink:0;line-height:1.2;padding-right:1vmin;border-right:var(--bw) solid rgba(255,255,255,0.3);margin-right:0.4vmin;min-width:0;}
.toast{position:fixed;bottom:3vh;left:50%;transform:translateX(-50%);background:#3A3A3A;color:#F0F0F0;border:var(--bw) solid #666;padding:1.2vmin 2.5vmin;border-radius:var(--r-pill);font-size:clamp(13px,1.7vmin,18px);font-weight:700;z-index:200;opacity:0;transition:opacity 0.3s;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;}
body.premium .toast{background:#141417;border:var(--bw) solid var(--pm-card-border);color:var(--t-main);}

/* ===== unified page sub-nav (top tab bar) — ONE design across pages ===== */
/* new pages use .topnav/.topnav-tab; the legacy per-page classes are aliased so
   Finance / Dashboard·Cashier / Settings all share the exact same look. */
.topnav,.fin-seg,.home-nav,.set-sidebar{display:flex;flex-direction:row;align-items:center;gap:0.4vmin;background:var(--s-orderhead,var(--s-panel));border-bottom:var(--bw) solid var(--divider);padding:0.7vmin 1.2vmin;overflow-x:auto;flex-shrink:0;}
.topnav-tab,.fseg-opt,.home-nav .home-tab,.set-nav{display:inline-flex;align-items:center;gap:0.6vmin;flex:0 0 auto;padding:1vmin 1.7vmin;border:none;border-radius:var(--r-2,10px);background:none;color:var(--t-muted);font-weight:800;font-size:clamp(13px,1.7vmin,18px);font-family:inherit;line-height:1;cursor:pointer;white-space:nowrap;min-height:42px;transition:color .12s ease,background .12s ease;}
.topnav-tab:hover,.fseg-opt:hover,.home-nav .home-tab:hover,.set-nav:hover{color:var(--t-main);}
.topnav-tab.active,.fseg-opt.active,.home-nav .home-tab.active,.set-nav.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 2px 12px var(--glow);}

/* ---- shared print-size picker (POSPrint.chooseSize in pos-chrome.js) ---- */
.posprint-ov{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);padding:5vmin;}
.posprint-card{background:var(--s-card);border:var(--bw) solid var(--s-card-border);border-radius:var(--r-4);max-width:420px;width:96vw;padding:2.4vmin 2.6vmin;box-shadow:0 24px 60px rgba(0,0,0,0.45);}
.posprint-h{font-weight:800;font-size:clamp(15px,2vmin,19px);color:var(--t-main);margin-bottom:0.4vmin;}
.posprint-sub{color:var(--t-muted);font-size:clamp(12px,1.5vmin,15px);margin-bottom:1.6vmin;}
.posprint-row{display:flex;gap:0.8vmin;flex-wrap:wrap;margin-bottom:1.8vmin;}
.posprint-opt{flex:1;min-width:90px;padding:1.6vmin;border-radius:var(--r-3);border:var(--bw) solid var(--s-card-border);background:var(--s-input);color:var(--t-main);font-weight:800;font-size:clamp(14px,1.8vmin,17px);cursor:pointer;min-height:48px;}
.posprint-opt.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;}
.posprint-btns{display:flex;gap:0.8vmin;}
.posprint-btns button{flex:1;padding:1.6vmin;border-radius:var(--r-3);font-weight:800;font-size:clamp(14px,1.8vmin,17px);cursor:pointer;min-height:50px;}
.posprint-cancel{border:var(--bw) solid var(--s-card-border);background:var(--s-input);color:var(--t-main);}
.posprint-go{border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}