@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --brand:#2d3a8c;--brand2:#3d4eb3;--brand-light:#e8eaf6;--brand-xlight:#f3f4fd;
  --accent:#1a9e6e;--accent-light:#d4f0e6;--accent-xlight:#edfaf4;
  --warn:#e07b00;--warn-light:#fff3dc;
  --danger:#d32f2f;--danger-light:#fde8e8;
  --purple:#7c3aed;--purple-light:#ede9fe;
  --teal:#0891b2;--teal-light:#cffafe;
  --pink:#db2777;--pink-light:#fce7f3;
  --bg:#f0f2f8;--surface:#fff;--surface2:#f7f8fc;--surface3:#eef0f8;
  --border:#dde1f0;--border2:#c8cde3;
  --text:#1a1f3a;--text2:#3d4270;--text3:#6b7299;
  --topbar:#2d3a8c;--sidebar:#1e2660;--sidebar2:#252e7a;
  --r:8px;--rsm:5px;--rxs:3px;
  --sh:0 1px 4px rgba(0,0,0,.08);--shmd:0 4px 20px rgba(0,0,0,.13);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
a{text-decoration:none;color:inherit}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.55}
/* LAYOUT */
.app{display:flex;height:100vh;flex-direction:column}
.topbar{background:linear-gradient(115deg,var(--sidebar) 0%,var(--topbar) 55%,var(--brand2) 100%);height:46px;min-height:46px;display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0;box-shadow:0 2px 10px rgba(10,14,50,.28)}
.tb-brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:15.5px;letter-spacing:-.2px;margin-right:10px}
.tb-logo{width:30px;height:30px;background:rgba(255,255,255,.16);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15.5px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 2px 6px rgba(0,0,0,.18)}
.tb-logo img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.tb-btn{padding:6px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s,transform .12s,border-color .15s}
.tb-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.tb-btn.active{background:#fff;color:var(--brand);border-color:#fff;font-weight:700}
.tb-sep{width:1px;height:22px;background:rgba(255,255,255,.16)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tb-user{display:flex;align-items:center;gap:8px;color:#fff;font-size:13.5px;font-weight:600;padding:4px 10px 4px 4px;border-radius:20px;transition:background .15s}
.tb-user:hover{background:rgba(255,255,255,.12)}
.tb-av{width:28px;height:28px;background:rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.3)}
.tb-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.main-row{display:flex;flex:1;overflow:hidden}
/* SIDEBAR */
.sidebar{width:200px;min-width:200px;background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar2) 100%);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:width .2s ease,min-width .2s ease;padding:6px 0;border-right:1px solid rgba(255,255,255,.06)}
/* ── Collapsed state (icon-only, 44px wide) ─────────────── */
.sidebar.collapsed{width:44px;min-width:44px}
.sidebar.collapsed .ni-group-label{display:none}
/* Margin shrinks (rather than disappears) so collapsed icons still read
   as individual rounded buttons on the rail, matching the expanded
   pill style; ni-ic drops its fixed width so justify-content:center
   alone centers the glyph instead of fighting a width sized for the
   wider expanded row. */
.sidebar.collapsed .ni{margin:1px 3px;padding:9px 0;justify-content:center;gap:0}
.sidebar.collapsed .ni.active::before{left:1px}
.sidebar.collapsed .ni-ic{width:28px;height:28px;text-align:center;font-size:15px}
/* hide text, badge, lock-icon span, chevron, submenu label in collapsed mode */
.sidebar.collapsed .ni > span:not(.ni-ic),
.sidebar.collapsed .ni > :not(.ni-ic),
.sidebar.collapsed .ni-badge,
.sidebar.collapsed .ni-chevron,
.sidebar.collapsed .ni-submenu-list{display:none}
.sidebar.collapsed .ni-submenu-toggle{padding:9px 0;justify-content:center}
.sidebar.collapsed .ni-submenu-toggle .ni-ic{width:auto;text-align:center}
/* tooltip on hover in collapsed mode */
.sidebar.collapsed .ni[data-tip]{position:relative}
.sidebar.collapsed .ni[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:48px;top:50%;transform:translateY(-50%);
  background:rgba(10,12,40,.92);color:#fff;font-size:12.5px;font-weight:600;
  white-space:nowrap;padding:4px 10px;border-radius:var(--rsm);
  box-shadow:var(--shmd);z-index:500;pointer-events:none}
/* toggle button in topbar */
.sidebar-toggle{width:32px;height:32px;border-radius:var(--rsm);border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s,transform .12s;flex-shrink:0}
.sidebar-toggle:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.ni-group{padding:6px 0}
.ni-group-label{color:#FFFFFF;font-size:15px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;padding:9px 16px 5px;cursor:pointer;display:flex;
  align-items:center;justify-content:space-between;user-select:none;
  transition:color .12s}
.ni-group-label:hover{color:#FFFFFF}
.ni-group-label.active{color:#FFFFFF}
.ni-group-label .ng-chevron{font-size:9px;opacity:.5;transition:transform .18s}
.ni-group.closed .ng-chevron{transform:rotate(-90deg)}
.ni-group.closed .ni-group-items{display:none}
/* Collapsed sidebar — hide group labels, show only icons */
.sidebar.collapsed .ni-group-label{display:none}
.sidebar.collapsed .ni-group.closed .ni-group-items{display:block}

/* Nav items — modern inset "pill" style: a rounded highlight fill for
   hover/active instead of the old edge-to-edge bar + left border, with
   a slim rounded accent tab inside the pill (::before) marking the
   active item. Kept as one shared .ni rule (every nav link/button in
   the sidebar — top-level items, submenu toggle, submenu items, dynamic
   Reporting Engine links — carries this class) so the whole menu stays
   visually consistent from a single definition. */
.ni{display:flex;align-items:center;gap:10px;margin:1px 8px;padding:8px 10px 8px 13px;
  border-radius:8px;cursor:pointer;color:rgba(255,255,255,.62);font-size:13.5px;
  font-weight:500;transition:background .15s,color .15s;position:relative;user-select:none}
.ni:hover{color:#fff;background:rgba(255,255,255,.08)}
.ni.active{color:#fff;font-weight:700;background:linear-gradient(100deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.ni.active::before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:3px;
  border-radius:3px;background:var(--accent)}
/* ── Nav icon chips — a bold gradient-filled badge per section so
   items are identifiable by color at a glance, not just icon shape;
   also gives the icon-only collapsed sidebar a real visual identity
   instead of a flat column of emoji. Unlike a subtle tint, these are
   solid/vivid AT REST (a soft tint washed out against the dark
   sidebar gradient and wasn't readable) — hover adds a bouncy pop,
   the active page's chip pulses with a soft ring so it's unmistakable
   which section you're in. .ic-* classes are assigned per nav item in
   includes/header.php's $navIconColor map. */
.ni-ic{width:27px;height:27px;text-align:center;font-size:14px;flex-shrink:0;
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:#fff;position:relative;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.ni:hover .ni-ic{transform:scale(1.18) rotate(-8deg)}
.ni:active .ni-ic{transform:scale(.9) rotate(0)}

.ic-brand {background:linear-gradient(135deg,#8a9bff 0%,#4a5ce0 100%);box-shadow:0 2px 8px rgba(74,92,224,.55)}
.ic-purple{background:linear-gradient(135deg,#c199ff 0%,#8b3ffb 100%);box-shadow:0 2px 8px rgba(139,63,251,.55)}
.ic-teal  {background:linear-gradient(135deg,#6eeaff 0%,#08a5c9 100%);box-shadow:0 2px 8px rgba(8,165,201,.55)}
.ic-pink  {background:linear-gradient(135deg,#ff9dd1 0%,#e0298a 100%);box-shadow:0 2px 8px rgba(224,41,138,.55)}
.ic-accent{background:linear-gradient(135deg,#6ef2bb 0%,#16b87e 100%);box-shadow:0 2px 8px rgba(22,184,126,.55)}
.ic-warn  {background:linear-gradient(135deg,#ffbb70 0%,#f08c00 100%);box-shadow:0 2px 8px rgba(240,140,0,.55)}
.ic-danger{background:linear-gradient(135deg,#ff8f8f 0%,#e63939 100%);box-shadow:0 2px 8px rgba(230,57,57,.55)}

/* Active page: chip gets brighter + a soft pulsing ring so the current
   section is unmistakable even at a glance. */
.ni.active .ni-ic{filter:saturate(1.25) brightness(1.08);animation:navPulse 1.8s ease-in-out infinite}
@keyframes navPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45),0 2px 8px rgba(0,0,0,.35)}
  50%    {box-shadow:0 0 0 5px rgba(255,255,255,0),  0 2px 8px rgba(0,0,0,.35)}
}

/* Staggered fade/slide-in when the sidebar first renders — purely a
   one-time "welcome" flourish per group (nth-child resets per parent,
   so every group cascades in together rather than one long chain). */
@keyframes navItemIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.ni{animation:navItemIn .38s cubic-bezier(.2,.8,.2,1) both}
.ni:nth-child(1){animation-delay:.02s}
.ni:nth-child(2){animation-delay:.06s}
.ni:nth-child(3){animation-delay:.10s}
.ni:nth-child(4){animation-delay:.14s}
.ni:nth-child(5){animation-delay:.18s}
.ni:nth-child(6){animation-delay:.22s}
.ni:nth-child(7){animation-delay:.26s}
.ni:nth-child(8){animation-delay:.30s}

.ni-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:700;
  padding:1px 6px;border-radius:9px;line-height:1.5}
.ni-arr{margin-left:auto;font-size:13.5px;color:rgba(255,255,255,.3);transition:transform .2s}
.ni-arr.open{transform:rotate(90deg)}
.ni-sub{display:none;background:rgba(0,0,0,.14);border-radius:8px;margin:0 8px}
.ni-sub.open{display:block}
.ni-sub .ni{padding-left:34px;font-size:13px;margin-left:0;margin-right:0}

/* ── Reports dropdown submenu (sidebar) ──────────────────── */
.ni-submenu{position:relative}
.ni-submenu-toggle{width:100%;background:none;border:none;text-align:left;font-family:inherit}
.ni-chevron{margin-left:auto;font-size:13.5px;color:rgba(255,255,255,.4);transition:transform .18s}
.ni-submenu.open .ni-chevron{transform:rotate(180deg)}
.ni-submenu-list{background:rgba(0,0,0,.14);border-radius:8px;margin:0 8px 2px}
.ni-submenu-list .ni{margin-left:0;margin-right:0;padding-left:34px;font-size:13px}
.ni-submenu-item{padding-left:34px;font-size:13px}

/* ── Reports dropdown popup (requisition tab bar) ────────── */
.rep-dd{position:relative;display:inline-block}
.rep-dd-btn{padding:9px 18px;font-size:14.5px;font-weight:600;border:none;cursor:pointer;
  background:transparent;color:var(--text2);border-bottom:3px solid transparent;
  margin-bottom:-2px;transition:all .15s;white-space:nowrap;display:inline-flex;
  align-items:center;gap:4px;font-family:inherit}
.rep-dd-btn.active{color:var(--brand);border-bottom-color:var(--brand);background:var(--brand-xlight)}
.rep-dd-menu{display:none;position:absolute;top:100%;left:0;min-width:200px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--rsm);
  box-shadow:var(--shmd);z-index:400;padding:5px;margin-top:3px}
.rep-dd-menu.show{display:block}
.rep-dd-menu a{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:14px;
  color:var(--text);text-decoration:none;border-radius:var(--rsm);white-space:nowrap}
.rep-dd-menu a:hover{background:var(--brand-xlight);color:var(--brand)}
.rep-dd-menu a.active{background:var(--brand-xlight);color:var(--brand);font-weight:700}
/* CONTENT */
.content-area{flex:1;overflow:hidden;display:flex;flex-direction:column}
.page-header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 18px;display:flex;align-items:center;gap:10px;height:44px;min-height:44px;flex-shrink:0}
.ph-title{font-size:15px;font-weight:700;flex:1;display:flex;align-items:center;gap:8px}
.ph-breadcrumb{font-size:13.5px;color:var(--text3)}
.content{flex:1;overflow-y:auto;padding:14px 18px}
/* BUTTONS */
.btn{padding:6px 12px;border-radius:var(--rsm);border:1px solid var(--border);background:var(--surface);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--text);transition:all .12s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.btn:hover{background:var(--surface2);border-color:var(--border2)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand2)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:#147d56}
.btn-danger{background:var(--danger-light);color:var(--danger);border-color:#f5a0a0}
.btn-warn{background:var(--warn-light);color:var(--warn);border-color:#fcd34d}
.btn-teal{background:var(--teal-light);color:var(--teal);border-color:#7dd3e8}
.btn-purple{background:var(--purple-light);color:var(--purple);border-color:#c4b5fd}
.btn-sm{padding:4px 9px;font-size:13.5px}
.btn-xs{padding:2px 6px;font-size:13.5px}
/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ct{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:6px}
/* STAT */
.sgrid{display:grid;gap:8px;margin-bottom:12px}
.s5{grid-template-columns:repeat(5,1fr)}
.s4{grid-template-columns:repeat(4,1fr)}
.s3{grid-template-columns:repeat(3,1fr)}
.s2{grid-template-columns:repeat(2,1fr)}
.sc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;position:relative;overflow:hidden;box-shadow:var(--sh);transition:box-shadow .15s,transform .15s}
.sc[onclick]:hover{box-shadow:var(--shmd);transform:translateY(-1px)}
/* Primary KPI — hero-level stat, larger/bolder than secondary stats */
.sc-primary{padding:16px 18px}
.sc-primary .sval{font-size:27px}
.sc-primary .slabel{font-size:13.5px}
/* Secondary KPI — supporting stat, more compact than the default */
.sc-secondary{padding:10px 12px}
.sc-secondary .sval{font-size:19px}
.slbl{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.sval{font-size:21px;font-weight:700;letter-spacing:-.4px}
.sval.g{color:var(--accent)}.sval.r{color:var(--danger)}.sval.o{color:var(--warn)}.sval.b{color:var(--brand)}.sval.t{color:var(--teal)}.sval.p{color:var(--purple)}
.ssub{font-size:13.5px;color:var(--text3);margin-top:2px}
.sic{position:absolute;right:10px;top:10px;font-size:23px;opacity:.1}
/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:8px;font-size:13.5px;font-weight:700;white-space:nowrap}
.bg{background:var(--accent-light);color:#065f46}
.br{background:var(--danger-light);color:var(--danger)}
.bo{background:var(--warn-light);color:#92400e}
.bb{background:var(--brand-light);color:var(--brand)}
.bp{background:var(--purple-light);color:var(--purple)}
.bgr{background:var(--surface3);color:var(--text2);border:1px solid var(--border)}
.bgold{background:#fef3c7;color:#92400e}
.bt{background:var(--teal-light);color:var(--teal)}
/* TABLES */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
/* mediPaginate() row hiding — !important guards against any conflicting
   inline style or stylesheet rule so a hidden row can never be forced
   back to visible except by mediPaginate itself removing this class. */
.mp-hidden{display:none!important}

/* ── Product photo thumbnails (product list + Sale Entry search) ──
   Square-ish (not circular, unlike .tb-av) since these are photos of
   boxes/packaging rather than a person's headshot. .prod-thumb-ph is
   the no-photo-yet placeholder (a form icon on a neutral background). */
.prod-thumb{width:34px;height:34px;border-radius:var(--rsm);object-fit:cover;
  flex-shrink:0;border:1px solid var(--border);background:var(--surface2)}
.prod-thumb-ph{display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--text3)}

/* ── Live Stock Sync (assets/stock-sync.js) ───────────────────
   Any element tagged data-stock-id="<product id>" gets its number
   patched automatically when another terminal changes that
   product's stock — .stock-flash briefly highlights the change so
   it doesn't update silently, .stock-out/.stock-low let existing
   pages opt into colour-coding without extra JS. */
[data-stock-id]{transition:background-color .3s ease}
.stock-flash{animation:stock-flash-pulse .9s ease}
@keyframes stock-flash-pulse{
  0%{background-color:var(--accent-light,#86efac)}
  100%{background-color:transparent}
}
.stock-out{color:var(--danger)!important;font-weight:700}
.stock-low{color:#ea580c!important;font-weight:700}
thead th{padding:8px 10px;text-align:left;font-size:13px;font-weight:700;color:var(--text2);background:var(--surface2);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
tbody td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#f9fafd}
.tfoot-row td{background:var(--brand-xlight);font-weight:700;color:var(--brand);border-top:2px solid var(--border)}
/* FORMS */
.fg{display:flex;flex-direction:column;gap:3px}
.fg label{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.3px}
.fg input,.fg select,.fg textarea{padding:6px 9px;border:1px solid var(--border);border-radius:var(--rsm);font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);outline:none;transition:border-color .12s}
.fg input:focus,.fg select:focus{border-color:var(--brand2);box-shadow:0 0 0 2px rgba(45,58,140,.1)}
.fg input.error{border-color:var(--danger);background:var(--danger-light)}
.fg input.warn-val{border-color:var(--warn)}
.input-hint{font-size:13px;color:var(--danger);margin-top:2px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Toggle switch (e.g. Allow Negative Stock) */
.neg-stock-switch{position:relative;display:inline-block;width:44px;height:24px;
  cursor:pointer;flex-shrink:0}
.neg-stock-switch input{opacity:0;width:0;height:0;position:absolute}
.neg-stock-track{position:absolute;inset:0;background:var(--border);
  border-radius:24px;transition:.2s}
.neg-stock-track::before{content:'';position:absolute;width:18px;height:18px;
  left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.neg-stock-switch input:checked + .neg-stock-track{background:var(--danger)}
.neg-stock-switch input:checked + .neg-stock-track::before{transform:translateX(20px)}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.fg4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
.ff{grid-column:1/-1}
.sw{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rsm);padding:0 9px}
.sw:focus-within{border-color:var(--brand2)}
.sw input{border:none;outline:none;flex:1;font-family:inherit;font-size:14px;padding:6px 0;background:transparent}
/* GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:12px}
.tab{padding:7px 14px;font-size:14px;font-weight:600;cursor:pointer;color:var(--text2);border:none;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font-family:inherit;transition:all .12s}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}
/* MODAL */
.moverlay{position:fixed;inset:0;background:rgba(10,15,50,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.mbox{background:var(--surface);border-radius:var(--r);padding:20px;width:600px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shmd)}
.mbox-lg{width:860px}
.mbox-xl{width:1100px}
.mtitle{font-size:15.5px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.mclose{cursor:pointer;color:var(--text2);font-size:21px;background:none;border:none;line-height:1;padding:0}
.mfooter{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
/* ALERTS */
.al{padding:8px 11px;border-radius:var(--rsm);font-size:14px;display:flex;align-items:flex-start;gap:7px;margin-bottom:8px}
.al-w{background:var(--warn-light);border-left:3px solid var(--warn);color:#78350f}
.al-d{background:var(--danger-light);border-left:3px solid var(--danger);color:#7f1d1d}
.al-s{background:var(--accent-xlight);border-left:3px solid var(--accent);color:#064e3b}
.al-i{background:var(--brand-xlight);border-left:3px solid var(--brand2);color:var(--brand)}
/* TOGGLE SWITCH */
.toggle{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.toggle input{display:none}
.toggle-track{width:32px;height:17px;background:var(--border2);border-radius:9px;position:relative;transition:background .2s}
.toggle-track::after{content:'';position:absolute;width:13px;height:13px;background:#fff;border-radius:50%;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked ~ .toggle-track{background:var(--accent)}
.toggle input:checked ~ .toggle-track::after{left:17px}
.toggle-label{font-size:14px;font-weight:600;color:var(--text2)}
/* PROGRESS */
.prog{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.progf{height:100%;border-radius:2px}
/* AUTOCOMPLETE */
.autocomplete-wrap{position:relative}
.ac-dd{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--rsm);box-shadow:var(--shmd);z-index:200;max-height:200px;overflow-y:auto;display:none}
.ac-dd.open{display:block}
.ac-item{padding:7px 10px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--border)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:var(--surface2)}
.ac-name{font-weight:600}
.ac-sub{font-size:13px;color:var(--text3)}
.ac-due{color:var(--danger);font-weight:700}
.ac-adv{color:var(--accent);font-weight:700}
/* PURCHASE PAGE SPECIFIC */
.purchase-layout{display:grid;grid-template-columns:1fr 260px;gap:0;height:100%;overflow:hidden}
.purchase-left{padding:14px;overflow-y:auto;border-right:1px solid var(--border)}
.purchase-right{padding:14px;background:var(--surface2);overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.purchase-mode-toggle{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--rsm);overflow:hidden;background:var(--surface)}
.pmtb{padding:5px 14px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--text2);background:none;border:none;font-family:inherit;transition:all .12s}
.pmtb.active{background:var(--brand);color:#fff}
.purchase-fields{display:grid;grid-template-columns:2fr 80px 80px 100px 80px;gap:8px;align-items:end;margin-bottom:10px}
.purchase-fields2{display:grid;grid-template-columns:80px 80px 100px 80px 130px 140px 110px auto;gap:8px;align-items:end;margin-bottom:10px}
.purchase-table{font-size:14px}
.purchase-table th{font-size:13px;padding:6px 8px}
.purchase-table td{padding:6px 8px}
.pr-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px}
.pr-row{display:flex;justify-content:space-between;font-size:14px;padding:3px 0;color:var(--text2)}
.pr-row.total{font-weight:700;color:var(--brand);border-top:1px solid var(--border);padding-top:6px;margin-top:4px;font-size:15px}
.pr-row.due-row{color:var(--danger);font-weight:700}
.pr-row.adv-row{color:var(--accent);font-weight:700}
.vendor-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px}
.vp-title{font-size:13.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
/* SALE PAGE SPECIFIC */
.sale-layout{display:grid;grid-template-columns:1fr 280px;gap:0;height:100%;overflow:hidden}
.sale-left{padding:14px;overflow-y:auto;border-right:1px solid var(--border)}
.sale-right{padding:14px;background:var(--surface2);overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.sale-product-info{background:var(--brand-xlight);border:1px solid var(--brand-light);border-radius:var(--rsm);padding:8px 10px;font-size:13.5px;color:var(--brand);margin-top:4px}
.sale-table th{font-size:13px;padding:6px 8px}
.sale-table td{padding:7px 8px;vertical-align:top}
.final-price-box{background:var(--brand);color:#fff;border-radius:var(--r);padding:12px 14px;text-align:center}
.fpb-label{font-size:13.5px;font-weight:600;opacity:.7;margin-bottom:2px}
.fpb-value{font-size:25px;font-weight:800;letter-spacing:-.5px}
.profit-box{display:flex;justify-content:space-between;font-size:14px;padding:4px 0}
.profit-box.profit-val{color:var(--accent);font-weight:700}
.profit-box.loss-val{color:var(--danger);font-weight:700}
.customer-will-pay{display:flex;align-items:center;gap:6px;margin-top:6px}
.cwp-btn{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:15.5px;display:flex;align-items:center;justify-content:center;font-weight:700;transition:all .12s}
.cwp-btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.cwp-input{flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:var(--rsm);font-family:inherit;font-size:14.5px;font-weight:700;text-align:center;outline:none}
/* PRODUCT LIST */
.stock-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;font-size:13px;font-weight:700}
.product-row{cursor:pointer}
.product-row:hover td{background:var(--brand-xlight)}
.product-detail-line{font-size:13.5px;color:var(--text2);margin-top:1px}
.product-detail-line a{color:var(--brand);text-decoration:none;font-weight:600}
/* REQUISITION */
.req-layout{display:grid;grid-template-columns:1fr 260px;gap:0;height:100%;overflow:hidden}
.req-left{padding:14px;overflow-y:auto;border-right:1px solid var(--border)}
.req-right{padding:14px;background:var(--surface2);overflow-y:auto}
.req-filter-row{display:flex;gap:8px;margin-bottom:12px;align-items:center;flex-wrap:wrap}
/* CASH COUNT / DASHBOARD */
.dash-split{display:grid;grid-template-columns:1fr 300px;gap:12px;height:100%;overflow:hidden}
.dash-main{overflow-y:auto;padding-right:4px}
.dash-side{overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.cash-account-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-bottom:8px;cursor:pointer;transition:all .12s}
.cash-account-card:hover{border-color:var(--brand2);box-shadow:var(--sh)}
.cac-icon{font-size:21px;margin-bottom:4px}
.cac-label{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}
.cac-value{font-size:19px;font-weight:700;margin-top:2px}
/* ENTRY ROW */
.erow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--border)}
.erow:last-child{border-bottom:none}
.eic{width:30px;height:30px;border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;font-size:15.5px;flex-shrink:0}
.einfo{flex:1}
.en{font-size:14px;font-weight:600}
.em{font-size:13.5px;color:var(--text3)}
.eamt{font-weight:700;font-size:14.5px}
/* MISC */
.mono{font-family:'JetBrains Mono',monospace}
.divider{border:none;border-top:1px solid var(--border);margin:10px 0}
.slabel{font-size:13px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.empty-state{text-align:center;padding:30px;color:var(--text3)}
.keyboard-hint{font-size:13.5px;color:rgba(255,255,255,.5);font-weight:600}
/* CHART */
.bchart{display:flex;align-items:flex-end;gap:4px;height:80px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center}
.bbar{width:100%;border-radius:3px 3px 0 0;min-height:3px;cursor:pointer}
.bbar:hover{filter:brightness(1.15)}
.blbl{font-size:13px;color:var(--text3);margin-top:3px}
/* INLINE EDITABLE */
.ie{padding:3px 5px;border:1px solid transparent;border-radius:3px;font-family:inherit;font-size:14px;width:100%;background:transparent;outline:none;cursor:default}
.ie:focus{border-color:var(--brand2);background:var(--surface);cursor:text}
/* COLORED ROWS */
.row-low{background:#fff9f0}
.row-out{background:#fff5f5}
.row-good{background:#f5fff9}
/* PIE */
canvas{display:block}
/* ── Loading spinner (used in empty-state cells) ─────────── */
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--border);
  border-top-color:var(--brand);border-radius:50%;
  animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-row{color:var(--text3)}

/* ════════════════════════════════════════════════════════════
   SMART TOP STATUS BAR — connection states, ticker, bell/push/
   task icons + dropdown panels.
   ════════════════════════════════════════════════════════════ */

/* ── Connection states on .topbar itself ─────────────────── */
.topbar{transition:background-color .5s ease}
.topbar.state-online{background:linear-gradient(115deg,var(--sidebar) 0%,var(--topbar) 55%,var(--brand2) 100%)}
.topbar.state-server-error{background:#c2620a}
.topbar.state-syncing{background:#1d4ed8}
.topbar.state-offline{background:#c62828;animation:topbar-soft-flash 2.6s ease-in-out infinite}
@keyframes topbar-soft-flash{0%,100%{opacity:1}50%{opacity:.86}}

/* ── Center ticker (running alerts / announcements) ───────── */
#topbar-ticker{flex:1;min-width:0;display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:default;padding:0 8px}
#topbar-ticker:not(:empty){cursor:pointer}
.tt-icon{flex-shrink:0}
.tt-spin{display:inline-block;animation:spin 1.4s linear infinite}
.tt-pill{background:rgba(255,255,255,.22);border-radius:10px;padding:1px 8px;
  font-size:10.5px;margin-left:4px;flex-shrink:0}
.tt-more{opacity:.75;font-weight:500;flex-shrink:0}

/* ── Scrolling marquee ticker (assets/topbar.js renderTickerFrame) ─
   Strings every unread notification/message/task together and scrolls
   the whole lane continuously right-to-left, stock-ticker style, using
   the topbar's spare horizontal space instead of flipping one at a time.
   The track's content is duplicated back-to-back so the loop is seamless;
   animation-duration is set from JS proportional to content width so the
   scroll speed feels constant regardless of how much is queued up. */
#topbar-ticker.tt-has-marquee{overflow:hidden;text-overflow:clip}
.tt-marquee{overflow:hidden;width:100%;height:100%;display:flex;align-items:center}
.tt-marquee-track{display:inline-flex;align-items:center;white-space:nowrap;
  animation:tt-marquee-scroll linear infinite;will-change:transform}
.tt-marquee-track.tt-paused{animation-play-state:paused}
@keyframes tt-marquee-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.tt-marquee-item{cursor:pointer;padding:0 2px;border-radius:3px}
.tt-marquee-item:hover{background:rgba(255,255,255,.14)}
.tt-marquee-sep{opacity:.4;margin:0 12px;flex-shrink:0}

/* ── Bell / Push / Task icon buttons ──────────────────────── */
.tb-icon-wrap{position:relative}
.tb-icon-btn{position:relative;width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(255,255,255,.12);color:#fff;font-size:15px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s}
.tb-icon-btn:hover{background:rgba(255,255,255,.24)}
.tb-badge{position:absolute;top:-3px;right:-3px;background:var(--danger);
  color:#fff;font-size:9.5px;font-weight:700;border-radius:9px;min-width:16px;
  height:16px;padding:0 4px;display:none;align-items:center;justify-content:center;
  border:1.5px solid var(--topbar);line-height:1}

/* ── Logout button ─────────────────────────────────────────── */
.tb-logout{display:flex;align-items:center;gap:6px;margin-left:6px;padding:7px 12px;
  border-radius:20px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);
  font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s,box-shadow .15s}
.tb-logout svg{flex-shrink:0;transition:transform .15s}
.tb-logout:hover{background:var(--danger);color:#fff;box-shadow:0 2px 8px rgba(198,40,40,.35)}
.tb-logout:hover svg{transform:translateX(2px)}
@media (max-width:780px){.tb-logout span{display:none}.tb-logout{padding:7px;margin-left:2px}}

/* ── Dropdown panels ───────────────────────────────────────── */
.tb-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;width:340px;
  max-width:90vw;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shmd);z-index:500;overflow:hidden}
.tb-panel-hd{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;
  font-weight:700;color:var(--text)}
.tb-panel-hd-actions{display:flex;align-items:center;gap:8px}
.tb-panel-hd-actions button{font-size:10.5px}
.tb-panel-body{max-height:360px;overflow-y:auto}
.tb-panel-ft{padding:8px 14px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--text3);display:flex;align-items:center;
  justify-content:space-between}
.tb-sound-label{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}

.tb-item{display:flex;gap:9px;align-items:flex-start;padding:10px 14px;
  border-bottom:1px solid var(--border);cursor:pointer;position:relative;
  transition:background .1s}
.tb-item:last-child{border-bottom:none}
.tb-item:hover{background:var(--brand-xlight)}
.tb-item.unread{background:var(--brand-xlight)}
.tb-item-icon{font-size:15px;flex-shrink:0;margin-top:1px}
.tb-item-body{flex:1;min-width:0}
.tb-item-title{font-size:12.5px;font-weight:700;color:var(--text)}
.tb-item-msg{font-size:11.5px;color:var(--text2);margin-top:1px}
.tb-item-time{font-size:10px;color:var(--text3);margin-top:3px}
.tb-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);
  flex-shrink:0;margin-top:4px}
.tb-empty{padding:28px 14px;text-align:center;color:var(--text3);font-size:12px}

/* ── Mobile responsive ─────────────────────────────────────── */
@media (max-width:760px){
  #topbar-ticker{display:none}
  .keyboard-hint{display:none}
  .tb-panel{position:fixed;top:52px;right:8px;left:8px;width:auto;max-width:none}
}
@media (max-width:520px){
  .tb-sep{display:none}
  .tb-btn span.tb-btn-label{display:none}
}