/* ==========================================================================
   SuperMart POS — theme
   Layout  : light side chrome, tinted active rail, flat cards, dense tables
   Colour  : one accent from Settings, green for money in, red for money out
   Type    : Manrope (headings & figures) / Inter (body & tables)

   Everything is driven by custom properties. The day palette is on :root, the
   night values live once as --d-*, and two blocks map them across. Side chrome
   has its own --chrome-* set so the sidebar can change without disturbing the
   content area. Never write a literal colour into a rule — it will not follow
   the theme.
   ========================================================================== */

/* Light is the default. Every colour the content area uses lives here, so the
   dark block further down only has to restate values — never selectors.
   The navy sidebar, POS bar and login art are dark in both themes and keep
   their own literals. --brand and its tints are overridden per store from
   Settings → Accent colour (see includes/theme_head.php). */
:root{
  color-scheme:light;

  --ink-900:#0A1628;
  --ink-800:#0F2036;
  --ink-700:#16294291;

  --brand:#1D63D2;
  --brand-600:#1750AE;
  --brand-200:#D5E3FB;
  --brand-100:#DDE9FD;
  --brand-050:#EAF1FE;

  --accent:#FF7A18;
  --accent-700:#A84F09;
  --accent-600:#E96C0C;
  --accent-200:#FBDCC0;
  --accent-050:#FFF2E7;

  --ok:#12A150;
  --ok-700:#0B6B37;
  --ok-200:#C6EBD6;
  --ok-050:#E8F7EF;

  --warn:#F5A524;

  --danger:#E5484D;
  --danger-700:#A32126;
  --danger-200:#F7CFD0;
  --danger-050:#FDECEC;

  /* surfaces, lightest first */
  --bg:#EFF3F9;
  --card:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F7F9FC;
  --surface-3:#EDF1F7;
  --surface-4:#E4ECF7;
  --hover:#F8FAFD;
  --top-bar:rgba(255,255,255,.92);

  --line:#E1E7F0;
  --line-soft:#EEF2F8;
  --line-strong:#D6DEE9;
  --scroll-thumb:#C3CDDD;

  --text:#152238;
  --text-soft:#42536B;
  --muted:#64738A;
  --muted-strong:#5A6B84;
  --muted-faint:#C3CEDF;

  /* Side chrome. Kept as its own set so the sidebar can go light without
     touching the content palette — and so it can be put back in one edit. */
  --chrome-bg:#FFFFFF;
  --chrome-line:#E3E9F2;
  --chrome-text:#4A5A72;
  --chrome-strong:#152238;
  --chrome-muted:#7C8BA4;
  --chrome-icon:#8494AB;
  --chrome-hover:#F2F5FA;
  --chrome-active-bg:var(--brand-050);
  --chrome-active-text:var(--brand-600);

  --side-w:250px;
  --side-w-mini:76px;
  /* Flatter and tighter than the original: less rounding, softer lift. */
  --radius:10px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(16,32,60,.05);
  --shadow-md:0 3px 10px rgba(16,32,60,.07);
  --shadow-lg:0 14px 36px rgba(10,22,40,.13);
}

/* ---------------------------------------------------------------- night mode
   Applied two ways: data-theme="dark" when somebody picked it, and the OS
   preference when they have not picked anything ("auto"). The :not() guard is
   what lets an explicit "light" choice win over a dark operating system. */
/* The night values live once, as --d-*. The two blocks that follow only map them
   onto the real names, so changing a shade is a single edit rather than two that
   can drift apart. */
:root{
  --d-bg:#0E1826;
  --d-card:#16233A;
  --d-surface:#16233A;
  --d-surface-2:#1B2A44;
  --d-surface-3:#22334F;
  --d-surface-4:#2A3D5C;
  --d-hover:#1E2E4A;
  --d-top-bar:rgba(18,29,48,.92);

  --d-line:#26374F;
  --d-line-soft:#1F2E46;
  --d-line-strong:#34475F;
  --d-scroll-thumb:#34475F;

  --d-text:#E7EEF8;
  --d-text-soft:#C3D0E2;
  --d-muted:#93A4BC;
  --d-muted-strong:#A8B7CD;
  --d-muted-faint:#4F6280;

  /* Tints invert: the wash goes dark and the ink on it goes light, so status
     colours keep their meaning instead of turning into unreadable mud. */
  --d-brand-050:#16294A;
  --d-brand-100:#1B335C;
  --d-brand-200:#2B4D83;
  --d-accent-050:#3A2A16;
  --d-accent-200:#5C3F1B;
  --d-accent-600:#FFA24D;
  --d-accent-700:#F5B672;
  --d-ok-050:#12301F;
  --d-ok-200:#1F4B33;
  --d-ok-700:#6EDCA0;
  --d-danger-050:#3A1B1D;
  --d-danger-200:#5F2B2E;
  --d-danger-700:#FF9B9B;

  --d-chrome-bg:#111C2E;
  --d-chrome-line:#22314A;
  --d-chrome-text:#AFBDD1;
  --d-chrome-strong:#EEF3FA;
  --d-chrome-muted:#7A8AA3;
  --d-chrome-icon:#8496AF;
  --d-chrome-hover:#1A2942;
  --d-chrome-active-bg:#1D2F4E;
  --d-chrome-active-text:#EAF1FE;

  --d-shadow-sm:0 1px 2px rgba(0,0,0,.34);
  --d-shadow-md:0 3px 10px rgba(0,0,0,.40);
  --d-shadow-lg:0 14px 36px rgba(0,0,0,.52);
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--d-bg);                 --card:var(--d-card);
  --surface:var(--d-surface);       --surface-2:var(--d-surface-2);
  --surface-3:var(--d-surface-3);   --surface-4:var(--d-surface-4);
  --hover:var(--d-hover);           --top-bar:var(--d-top-bar);
  --line:var(--d-line);             --line-soft:var(--d-line-soft);
  --line-strong:var(--d-line-strong); --scroll-thumb:var(--d-scroll-thumb);
  --text:var(--d-text);             --text-soft:var(--d-text-soft);
  --muted:var(--d-muted);           --muted-strong:var(--d-muted-strong);
  --muted-faint:var(--d-muted-faint);
  --brand-050:var(--d-brand-050);   --brand-100:var(--d-brand-100);
  --brand-200:var(--d-brand-200);
  --accent-050:var(--d-accent-050); --accent-200:var(--d-accent-200);
  --accent-600:var(--d-accent-600); --accent-700:var(--d-accent-700);
  --ok-050:var(--d-ok-050);         --ok-200:var(--d-ok-200);
  --ok-700:var(--d-ok-700);
  --danger-050:var(--d-danger-050); --danger-200:var(--d-danger-200);
  --danger-700:var(--d-danger-700);
  --shadow-sm:var(--d-shadow-sm);   --shadow-md:var(--d-shadow-md);
  --shadow-lg:var(--d-shadow-lg);
  --chrome-bg:var(--d-chrome-bg);   --chrome-line:var(--d-chrome-line);
  --chrome-text:var(--d-chrome-text); --chrome-strong:var(--d-chrome-strong);
  --chrome-muted:var(--d-chrome-muted); --chrome-icon:var(--d-chrome-icon);
  --chrome-hover:var(--d-chrome-hover);
  --chrome-active-bg:var(--d-chrome-active-bg); --chrome-active-text:var(--d-chrome-active-text);
}

/* Fallback for the moment before the inline script resolves "auto", and for a
   browser with JavaScript switched off entirely. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme:dark;
    --bg:var(--d-bg);                 --card:var(--d-card);
    --surface:var(--d-surface);       --surface-2:var(--d-surface-2);
    --surface-3:var(--d-surface-3);   --surface-4:var(--d-surface-4);
    --hover:var(--d-hover);           --top-bar:var(--d-top-bar);
    --line:var(--d-line);             --line-soft:var(--d-line-soft);
    --line-strong:var(--d-line-strong); --scroll-thumb:var(--d-scroll-thumb);
    --text:var(--d-text);             --text-soft:var(--d-text-soft);
    --muted:var(--d-muted);           --muted-strong:var(--d-muted-strong);
    --muted-faint:var(--d-muted-faint);
    --brand-050:var(--d-brand-050);   --brand-100:var(--d-brand-100);
    --brand-200:var(--d-brand-200);
    --accent-050:var(--d-accent-050); --accent-200:var(--d-accent-200);
    --accent-600:var(--d-accent-600); --accent-700:var(--d-accent-700);
    --ok-050:var(--d-ok-050);         --ok-200:var(--d-ok-200);
    --ok-700:var(--d-ok-700);
    --danger-050:var(--d-danger-050); --danger-200:var(--d-danger-200);
    --danger-700:var(--d-danger-700);
    --shadow-sm:var(--d-shadow-sm);   --shadow-md:var(--d-shadow-md);
    --shadow-lg:var(--d-shadow-lg);
    --chrome-bg:var(--d-chrome-bg);   --chrome-line:var(--d-chrome-line);
    --chrome-text:var(--d-chrome-text); --chrome-strong:var(--d-chrome-strong);
    --chrome-muted:var(--d-chrome-muted); --chrome-icon:var(--d-chrome-icon);
    --chrome-hover:var(--d-chrome-hover);
    --chrome-active-bg:var(--d-chrome-active-bg); --chrome-active-text:var(--d-chrome-active-text);
  }
}

*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.display-font{font-family:'Manrope','Inter',sans-serif;font-weight:800;letter-spacing:-.02em}
.num{font-family:'Manrope','Inter',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------------------------------------------------------------- shell */
.sm-shell{display:flex;min-height:100vh}

.sm-side{
  width:var(--side-w);flex:0 0 var(--side-w);
  background:var(--chrome-bg);
  color:var(--chrome-text);position:fixed;inset:0 auto 0 0;z-index:1040;
  border-right:1px solid var(--chrome-line);
  display:flex;flex-direction:column;transition:transform .22s ease,width .18s ease;
}
.sm-brand{
  display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-bottom:1px solid var(--chrome-line);color:var(--chrome-strong);
}
.sm-brand-mark{
  width:36px;height:36px;border-radius:10px;flex:0 0 36px;
  background:linear-gradient(140deg,var(--brand) 0%,#3D8BFF 100%);
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:16px;
  box-shadow:0 6px 16px rgba(29,99,210,.45);font-family:'Manrope',sans-serif;
}
.sm-brand-text b{display:block;font-family:'Manrope',sans-serif;font-size:15px;line-height:1.1;letter-spacing:-.02em}
.sm-brand-text span{font-size:11px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase}

.sm-nav{padding:10px 10px 24px;overflow-y:auto;flex:1}
.sm-nav-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--chrome-muted);
  padding:16px 12px 6px;font-weight:700;
}
.sm-nav a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;
  color:var(--chrome-text);font-size:13.5px;font-weight:500;margin-bottom:2px;transition:.15s;
}
.sm-nav a i{font-size:16px;width:20px;text-align:center;color:var(--chrome-icon);transition:.15s}
.sm-nav a:hover{background:var(--chrome-hover);color:var(--chrome-strong)}
.sm-nav a:hover i{color:var(--chrome-strong)}
/* the active row is a tinted pill with a brand rail, the way the ledger apps do it */
.sm-nav a.active{
  background:var(--chrome-active-bg);color:var(--chrome-active-text);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand);
}
.sm-nav a.active i{color:var(--chrome-active-text)}
.sm-nav a .tag{margin-left:auto;font-size:10px;background:var(--danger);color:#fff;border-radius:20px;padding:1px 7px;font-weight:700}

.sm-side-foot{padding:12px 16px;border-top:1px solid var(--chrome-line);font-size:11px;color:var(--chrome-muted)}

/* main column */
.sm-main{flex:1;min-width:0;margin-left:var(--side-w);display:flex;flex-direction:column}
.sm-top{
  position:sticky;top:0;z-index:1030;background:var(--top-bar);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:10px 20px;display:flex;align-items:center;gap:14px;
}
.sm-top h1{font-size:17px;margin:0;line-height:1.2}
.sm-top .crumb{font-size:11.5px;color:var(--muted);font-weight:500}
.sm-content{padding:20px;flex:1}

.sm-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--brand-050);color:var(--brand-600);
  border:1px solid var(--brand-200);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;
}
.sm-chip.warn{background:var(--accent-050);color:var(--accent-700);border-color:var(--accent-200)}
.sm-chip.ok{background:var(--ok-050);color:var(--ok-700);border-color:var(--ok-200)}
.sm-chip.off{background:var(--danger-050);color:var(--danger-700);border-color:var(--danger-200)}

.sm-avatar{
  width:34px;height:34px;border-radius:9px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13px;font-family:'Manrope',sans-serif;
}
.sm-burger{display:none;background:none;border:0;font-size:22px;color:var(--text-soft);line-height:1}

/* ---------------------------------------------------------------- cards */
.sm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.sm-card-head{
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.sm-card-head h2{font-size:15px;margin:0}
.sm-card-head .sub{font-size:12px;color:var(--muted);font-weight:500}
.sm-card-body{padding:18px}
.sm-card-body.tight{padding:0}

/* stat tiles — left accent bar encodes the metric family */
.sm-stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px 16px 20px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);height:100%;
}
.sm-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.sm-stat.is-sales::before{background:var(--brand)}
.sm-stat.is-cash::before{background:var(--ok)}
.sm-stat.is-bills::before{background:var(--brand-600)}
.sm-stat.is-alert::before{background:var(--danger)}
.sm-stat .label{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.sm-stat .value{font-family:'Manrope',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}
.sm-stat .meta{font-size:12px;color:var(--muted);margin-top:2px}
.sm-stat .ico{
  position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;font-size:18px;background:var(--brand-050);color:var(--brand)
}
.sm-stat.is-cash .ico{background:var(--ok-050);color:var(--ok)}
.sm-stat.is-bills .ico{background:var(--accent-050);color:var(--accent-700)}
.sm-stat.is-alert .ico{background:var(--danger-050);color:var(--danger)}

/* ---------------------------------------------------------------- tables */
.sm-table{width:100%;margin:0;font-size:13.2px}
.sm-table thead th{
  background:var(--surface-2);border-bottom:1px solid var(--line)!important;color:var(--muted-strong);
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  padding:9px 14px;white-space:nowrap;
}
.sm-table tbody td{padding:9px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.sm-table tbody tr:last-child td{border-bottom:0}
.sm-table tbody tr:hover{background:var(--hover)}
.sm-table .strong{font-weight:600}
.sm-table td.num,.sm-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;border-radius:0 0 var(--radius) var(--radius)}
.sm-empty{padding:52px 20px;text-align:center;color:var(--muted)}
.sm-empty i{font-size:40px;color:var(--muted-faint);display:block;margin-bottom:10px}
.sm-empty b{display:block;color:var(--text);font-size:15px;margin-bottom:3px}

.sm-badge{font-weight:600;font-size:11px;padding:.35em .65em;border-radius:6px;letter-spacing:.01em}
.stock-bar{height:5px;border-radius:4px;background:var(--surface-3);overflow:hidden;width:72px}
.stock-bar span{display:block;height:100%;background:var(--ok)}
.stock-bar.low span{background:var(--warn)}
.stock-bar.out span{background:var(--danger)}

/* ---------------------------------------------------------------- forms */
.form-label{font-size:12.5px;font-weight:600;color:var(--text-soft);margin-bottom:5px}
.form-control,.form-select{
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.5rem .75rem;font-size:13.5px;
  color:var(--text);background-color:var(--surface);
}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,99,210,.13)}
.form-control::placeholder{color:var(--muted)}
.input-group-text{background:var(--surface-2);border-color:var(--line-strong);font-size:13px;color:var(--muted)}
.form-control-lg{font-size:15px;padding:.65rem .9rem}

.btn{border-radius:var(--radius-sm);font-weight:600;font-size:13.5px;padding:.5rem .95rem;transition:.15s}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover,.btn-primary:focus{background:var(--brand-600);border-color:var(--brand-600)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.btn-soft{background:var(--brand-050);color:var(--brand-600);border:1px solid var(--brand-200)}
.btn-soft:hover{background:var(--brand-100);color:var(--brand-600)}
.btn-light{background:var(--surface);border:1px solid var(--line);color:var(--text-soft)}
.btn-light:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn-lg{padding:.7rem 1.2rem;font-size:15px}
.btn-sm{padding:.3rem .6rem;font-size:12.5px}
.btn-icon{width:32px;height:32px;padding:0;display:inline-grid;place-items:center}

.sm-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px}
.sm-toolbar .form-control,.sm-toolbar .form-select{min-width:150px}
.sm-alert{border:0;border-radius:var(--radius-sm);font-size:13.5px;box-shadow:var(--shadow-sm)}
.alert-success{background:var(--ok-050);color:var(--ok-700)}
.alert-danger{background:var(--danger-050);color:var(--danger-700)}
.alert-warning{background:var(--accent-050);color:var(--accent-700)}

.modal-content{border:0;border-radius:16px;box-shadow:var(--shadow-lg)}
.modal-header{border-bottom:1px solid var(--line-soft);padding:16px 20px}
.modal-title{font-size:16px}
.modal-body{padding:20px}
.modal-footer{border-top:1px solid var(--line-soft);padding:14px 20px}
.dropdown-menu{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);font-size:13.5px;padding:6px}
.dropdown-item{border-radius:8px;padding:.45rem .7rem}
.dropdown-item:active{background:var(--brand)}
.nav-tabs{border-bottom:1px solid var(--line);gap:2px}
.nav-tabs .nav-link{border:0;color:var(--muted);font-weight:600;font-size:13.5px;padding:.6rem 1rem;border-bottom:2px solid transparent}
.nav-tabs .nav-link.active{color:var(--brand);border-bottom-color:var(--brand);background:transparent}

/* ---------------------------------------------------------------- login */
.sm-login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.sm-login-art{
  background:linear-gradient(150deg,var(--ink-900) 0%,#12293F 55%,#1B4A7A 100%);
  color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.sm-login-art::after{
  content:"";position:absolute;right:-140px;bottom:-160px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(29,99,210,.55),transparent 68%);
}
.sm-login-art h2{font-size:34px;line-height:1.15;max-width:12ch}
.sm-login-art p{color:#A9BBD2;max-width:44ch;font-size:14.5px}
.sm-login-feat{display:flex;gap:10px;align-items:center;color:#CBD8E9;font-size:13.5px;margin-bottom:10px;position:relative;z-index:2}
.sm-login-feat i{color:#4E9BFF}
.sm-login-form{display:grid;place-items:center;padding:40px}
.sm-login-form .box{width:100%;max-width:380px}

/* ---------------------------------------------------------------- POS */
.pos-body{overflow:hidden}
.pos-wrap{display:grid;grid-template-columns:1fr 420px;height:100vh;background:var(--bg)}
.pos-left{display:flex;flex-direction:column;min-width:0}
.pos-bar{
  background:var(--ink-900);color:#fff;padding:9px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.pos-bar .pill{background:rgba(255,255,255,.1);border-radius:8px;padding:4px 10px;font-size:12px;color:#CFDBEC;font-weight:600}
.pos-bar .pill b{color:#fff}
.pos-scan{padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.pos-scan input{
  font-size:16px;padding:.72rem .9rem .72rem 2.6rem;border:2px solid var(--brand);
  border-radius:12px;width:100%;font-weight:600;background:var(--surface);
}
.pos-scan input:focus{box-shadow:0 0 0 4px rgba(29,99,210,.15);outline:none}
.pos-scan .bi-upc-scan{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--brand)}
.pos-scan .hint{font-size:11.5px;color:var(--muted);margin-top:6px}

.pos-suggest{
  position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);max-height:330px;overflow-y:auto;display:none;
}
.pos-suggest.show{display:block}
.pos-suggest .row-item{padding:9px 14px;display:flex;gap:12px;align-items:center;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.pos-suggest .row-item:hover,.pos-suggest .row-item.hi{background:var(--brand-050)}
.pos-suggest .row-item .nm{font-weight:600;font-size:13.5px}
.pos-suggest .row-item .mt{font-size:11.5px;color:var(--muted)}
.pos-suggest .row-item .pr{margin-left:auto;text-align:right;font-weight:700;font-family:'Manrope',sans-serif}

.pos-cats{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--line)}
.pos-cats button{
  border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:5px 13px;font-size:12.5px;
  font-weight:600;color:var(--text-soft);white-space:nowrap;
}
.pos-cats button.active{background:var(--ink-900);border-color:var(--ink-900);color:#fff}

.pos-grid{
  flex:1;overflow-y:auto;padding:14px;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));align-content:start;
}
.pos-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px;cursor:pointer;
  transition:.14s;position:relative;text-align:left;
}
.pos-tile:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pos-tile .thumb{
  height:64px;border-radius:9px;background:linear-gradient(135deg,var(--surface-3),var(--surface-4));display:grid;place-items:center;
  font-size:22px;color:var(--muted-faint);margin-bottom:8px;overflow:hidden;
}
.pos-tile .thumb img{width:100%;height:100%;object-fit:cover}
.pos-tile .nm{font-size:12.6px;font-weight:600;line-height:1.3;height:33px;overflow:hidden}
.pos-tile .pr{font-family:'Manrope',sans-serif;font-weight:800;color:var(--brand-600);margin-top:5px}
.pos-tile .st{position:absolute;top:8px;right:8px;font-size:10px;background:var(--surface-3);color:var(--muted-strong);border-radius:6px;padding:1px 6px;font-weight:700}
.pos-tile .st.low{background:var(--accent-050);color:var(--accent-700)}
.pos-tile .st.out{background:var(--danger-050);color:var(--danger-700)}

/* cart column */
.pos-right{background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.pos-cust{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center}
.pos-cart-head{display:grid;grid-template-columns:1fr 92px 82px 30px;gap:6px;padding:8px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--line);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-strong);font-weight:700}
.pos-cart{flex:1;overflow-y:auto}
.pos-line{display:grid;grid-template-columns:1fr 92px 82px 30px;gap:6px;padding:9px 14px;border-bottom:1px solid var(--line-soft);align-items:center}
.pos-line:hover{background:var(--hover)}
.pos-line .nm{font-size:13px;font-weight:600;line-height:1.25}
.pos-line .mt{font-size:11px;color:var(--muted)}
.pos-line .amt{text-align:right;font-family:'Manrope',sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
.qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qty-box button{border:0;background:var(--surface-2);width:24px;height:28px;font-size:14px;line-height:1;color:var(--text-soft)}
.qty-box button:hover{background:var(--surface-3)}
.qty-box input{border:0;width:100%;text-align:center;font-size:13px;font-weight:600;padding:2px;min-width:0}
.qty-box input:focus{outline:none;background:var(--accent-050)}
.pos-line .rm{border:0;background:none;color:var(--muted-faint);font-size:15px}
.pos-line .rm:hover{color:var(--danger)}

.pos-empty{padding:44px 20px;text-align:center;color:var(--muted)}
.pos-empty i{font-size:44px;color:var(--muted-faint);display:block;margin-bottom:8px}

.pos-sum{border-top:1px solid var(--line);padding:12px 14px;background:var(--surface-2)}
.pos-sum .row-line{display:flex;justify-content:space-between;font-size:13px;color:var(--text-soft);margin-bottom:5px}
.pos-sum .row-line b{font-variant-numeric:tabular-nums}

/* signature: the payable rail */
.pos-payable{
  background:linear-gradient(135deg,var(--ink-900),#173154);color:#fff;border-radius:14px;
  padding:13px 16px;display:flex;align-items:center;justify-content:space-between;margin:8px 0 10px;
}
.pos-payable .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#93A7C2;font-weight:700}
.pos-payable .val{font-family:'Manrope',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.pos-payable .qty{text-align:right;font-size:11.5px;color:#93A7C2}
.pos-payable .qty b{display:block;font-size:19px;color:#fff;font-family:'Manrope',sans-serif}

.pos-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 14px 8px}
.pos-actions button{
  border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 4px;font-size:11.5px;font-weight:600;color:var(--text-soft);
}
.pos-actions button:hover{background:var(--brand-050);border-color:var(--brand-200);color:var(--brand-600)}
.pos-actions button i{display:block;font-size:16px;margin-bottom:2px}
.pos-pay-btn{margin:0 14px 14px;width:calc(100% - 28px);padding:13px;font-size:16px;font-weight:700;border-radius:12px}
.kbd{
  display:inline-block;background:var(--surface-2);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;
  padding:0 5px;font-size:10.5px;font-weight:700;color:var(--muted-strong);font-family:'Manrope',sans-serif;
}
.pay-mode{
  border:2px solid var(--line);border-radius:12px;padding:13px 8px;text-align:center;cursor:pointer;background:var(--surface);font-weight:600;font-size:13px;
}
.pay-mode i{display:block;font-size:20px;margin-bottom:4px;color:var(--muted-strong)}
.pay-mode.active{border-color:var(--brand);background:var(--brand-050);color:var(--brand-600)}
.pay-mode.active i{color:var(--brand)}
.cash-quick{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px;font-weight:700;font-family:'Manrope',sans-serif}
.cash-quick:hover{background:var(--brand-050);border-color:var(--brand)}

.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
.sync-dot.off{background:var(--danger);animation:pulse 1.4s infinite}
.sync-dot.pending{background:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------------------------------------------------------------- labels */
.label-sheet{display:grid;gap:3mm}
.label-cell{border:1px dashed #cbd5e1;padding:2mm;text-align:center;border-radius:2px;break-inside:avoid}
.label-cell .ln{font-size:9pt;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.label-cell .lp{font-size:10pt;font-weight:800;font-family:'Manrope',sans-serif}
.label-cell svg{max-width:100%;height:auto}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1200px){
  .pos-wrap{grid-template-columns:1fr 370px}
}
@media (max-width:991px){
  .sm-side{transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  body.nav-open .sm-side{transform:none}
  .sm-main{margin-left:0}
  .sm-burger{display:block}
  .sm-content{padding:14px}
  .sm-top{padding:10px 14px}
  .sm-login{grid-template-columns:1fr}
  .sm-login-art{display:none}
  .pos-wrap{grid-template-columns:1fr;height:auto;min-height:100vh}
  .pos-right{
    position:fixed;inset:auto 0 0 0;height:78vh;border-left:0;border-top:1px solid var(--line);
    border-radius:18px 18px 0 0;transform:translateY(calc(100% - 66px));transition:transform .25s ease;z-index:1050;
    box-shadow:0 -12px 40px rgba(10,22,40,.2);
  }
  body.cart-open .pos-right{transform:none}
  .pos-handle{display:flex!important}
  .pos-grid{padding-bottom:90px}
}
@media (min-width:992px){.pos-handle{display:none}}
.pos-handle{
  display:none;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--ink-900);color:#fff;border-radius:18px 18px 0 0;cursor:pointer;
}
.nav-backdrop{position:fixed;inset:0;background:rgba(10,22,40,.5);z-index:1035;display:none}
body.nav-open .nav-backdrop{display:block}

@media (max-width:575px){
  .sm-stat .value{font-size:22px}
  .pos-grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
  .pos-cart-head,.pos-line{grid-template-columns:1fr 78px 70px 26px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------------- print */
@media print{
  /* Paper is always light. Without this a till in night mode would print a
     black invoice — unreadable, and it would drink a cartridge doing it. */
  :root,:root[data-theme="dark"]{
    color-scheme:light;
    --bg:#FFFFFF;      --card:#FFFFFF;    --surface:#FFFFFF;
    --surface-2:#F7F9FC; --surface-3:#EDF1F7; --surface-4:#E4ECF7;
    --hover:#FFFFFF;   --top-bar:#FFFFFF;
    --line:#D8DFE9;    --line-soft:#E8EDF4; --line-strong:#C9D2DF;
    --text:#101A2B;    --text-soft:#33415A; --muted:#5A6A80;
    --muted-strong:#44546E; --muted-faint:#A9B6C8;
    --brand-050:#EAF1FE; --brand-100:#DDE9FD; --brand-200:#D5E3FB;
    --accent-050:#FFF2E7; --accent-200:#FBDCC0; --accent-600:#E96C0C; --accent-700:#B4560B;
    --ok-050:#E8F7EF;  --ok-200:#C6EBD6;  --ok-700:#0B6B37;
    --danger-050:#FDECEC; --danger-200:#F7CFD0; --danger-700:#A32126;
    --shadow-sm:none;  --shadow-md:none;  --shadow-lg:none;
  }
  .sm-side,.sm-top,.no-print,.sm-toolbar,.pagination,
  .table-search,.dropdown,.btn,.form-control,.form-select{display:none!important}
  .sm-main{margin-left:0}
  .sm-content{padding:0}
  body{background:var(--surface);font-size:10.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* ---- letterhead and closing block, hidden on screen ---- */
  .print-only{display:block!important}
  .print-head{margin:0 0 10pt}
  .ph-top{display:flex;gap:10pt;align-items:flex-start;border-bottom:1.5pt solid var(--ink-900);padding-bottom:7pt}
  .ph-mark{width:34pt;height:34pt;border-radius:7pt;background:var(--brand);color:#fff;
           display:flex;align-items:center;justify-content:center;font:700 18pt/1 'Manrope',sans-serif;flex:0 0 auto}
  .ph-id{flex:1 1 auto;min-width:0}
  .ph-store{font:800 14pt/1.15 'Manrope',sans-serif;letter-spacing:-.2pt}
  .ph-line{font-size:8.5pt;color:var(--muted-strong);margin-top:1.5pt}
  .ph-meta{flex:0 0 auto;text-align:right;font-size:8.5pt;color:var(--muted-strong)}
  .ph-title{display:flex;align-items:baseline;gap:8pt;margin-top:8pt}
  .ph-title h1{font:700 12.5pt/1.2 'Manrope',sans-serif;margin:0}
  .ph-sub{font-size:9pt;color:var(--muted-strong)}

  /* !important, because .print-only above forces display:block and this block
     needs its two columns side by side rather than stacked. */
  .print-foot{margin-top:14pt;padding-top:7pt;border-top:.75pt solid var(--line-strong);
              display:flex!important;justify-content:space-between;align-items:flex-end;gap:16pt;
              break-inside:avoid;page-break-inside:avoid}
  .pf-note{font-size:8.5pt;color:var(--muted-strong)}
  .pf-small{font-size:7.5pt;color:var(--muted);margin-top:2pt}
  .pf-sign{text-align:center;font-size:9pt;border-top:.75pt solid var(--muted-faint);padding-top:4pt;min-width:150pt}

  /* ---- cards become plain sections on paper ---- */
  .sm-card{border:0;box-shadow:none;border-radius:0;margin-bottom:9pt}
  .sm-card-head{padding:0 0 4pt;border-bottom:.75pt solid var(--line-strong);gap:6pt}
  .sm-card-head h2,.sm-card-head b{font:700 10.5pt/1.2 'Manrope',sans-serif}
  .sm-card-head .sub{font-size:8.5pt}
  .sm-card-body{padding:6pt 0}
  .table-wrap{overflow:visible;border-radius:0}

  /* ---- the bit that matters on a long report ---- */
  .sm-table{font-size:9pt;width:100%}
  .sm-table thead{display:table-header-group}          /* headings repeat on every page */
  .sm-table tfoot{display:table-footer-group}
  .sm-table tr{page-break-inside:avoid;break-inside:avoid}
  .sm-table thead th{background:var(--surface-2)!important;border-bottom:.75pt solid var(--line-strong)!important;
                     font-size:7.5pt;padding:4pt 5pt;color:var(--muted-strong)}
  .sm-table tbody td{padding:3.5pt 5pt;border-bottom:.5pt solid var(--line-soft)}
  .sm-table tfoot td{border-top:.75pt solid var(--line-strong);font-weight:700}
  .sm-table td .text-muted,.sm-table td div{font-size:8pt}

  /* Stat tiles print as a compact strip rather than four tall cards. */
  .sm-stat{border:.75pt solid var(--line-strong);box-shadow:none;padding:6pt 8pt;height:auto;
           break-inside:avoid;page-break-inside:avoid}
  .sm-stat .ico{display:none}
  .sm-stat .value{font-size:13pt;margin-top:1pt}
  .sm-stat .label{font-size:7pt}
  .sm-stat .meta{font-size:7.5pt}
  .sm-stat::before{width:2.5pt}

  .sm-empty{padding:14pt 0;color:var(--muted)}
  .sm-empty i{font-size:16pt;margin-bottom:3pt}
  .stock-bar{border:.5pt solid var(--line-strong)}
  .badge{border:.5pt solid var(--line-strong);font-size:7.5pt;padding:1pt 4pt}
  .label-cell{border:0}
  a{color:inherit;text-decoration:none}
  a[href]:after{content:""}

  /* Headings should not be left stranded at the foot of a page. */
  h1,h2,h3,.sm-card-head{break-after:avoid;page-break-after:avoid}
  .row{display:flex;flex-wrap:wrap}

  @page{size:A4 portrait;margin:12mm 10mm 12mm}
}

/* A wide report reads far better across the page than down it. */
@media print{
  body.print-landscape .sm-table{font-size:8.5pt}
  @page landscapePage{size:A4 landscape;margin:10mm}
}
body.print-landscape{ }
@media print{ body.print-landscape{ page:landscapePage } }

/* The letterhead and closing block only exist for paper. */
.print-only{display:none}

/* =============================================================
   PWA chrome — install button, update prompt, offline banner
   ============================================================= */
.pwa-update, .pwa-offline{
  position:fixed; left:50%; transform:translateX(-50%); z-index:2100;
  display:flex; align-items:center; gap:12px;
  max-width:min(680px, calc(100vw - 24px));
  padding:11px 14px; border-radius:12px;
  font-size:13.5px; line-height:1.4;
  box-shadow:0 14px 40px rgba(10,22,40,.28);
  animation:pwaIn .22s ease-out;
}
@keyframes pwaIn{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }

.pwa-update{
  bottom:calc(16px + env(safe-area-inset-bottom));
  background:#0A1628; color:#E8EEF7; border:1px solid rgba(255,255,255,.12);
}
.pwa-update b{ color:#fff; }
.pwa-btn{
  flex:0 0 auto; font:inherit; font-weight:600; cursor:pointer;
  border:0; border-radius:8px; padding:7px 14px; background:var(--brand,#1D63D2); color:#fff;
}
.pwa-btn:hover{ filter:brightness(1.08); }
.pwa-x{
  flex:0 0 auto; background:none; border:0; cursor:pointer;
  color:#8FA3BE; font-size:20px; line-height:1; padding:0 2px;
}
.pwa-x:hover{ color:#fff; }

.pwa-offline{
  top:calc(10px + env(safe-area-inset-top));
  background:var(--accent-050); color:var(--accent-700); border:1px solid var(--accent-200);
}
.pwa-dot{
  flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--danger); box-shadow:0 0 0 3px rgba(224,87,75,.18);
  animation:pwaPulse 1.6s ease-in-out infinite;
}
@keyframes pwaPulse{ 50%{ opacity:.35; } }

/* The POS bar sits dark, so its offline banner needs to clear the top chrome */
.pos-body .pwa-offline{ top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); }
.pos-body .pwa-update{ bottom:calc(70px + env(safe-area-inset-bottom)); }

[data-pwa-install][hidden]{ display:none !important; }

@media print{ .pwa-update, .pwa-offline{ display:none !important; } }

/* =============================================================
   Instant table search — injected above any data table
   ============================================================= */
.table-search{
  display:flex; align-items:center; gap:9px;
  padding:9px 14px; border-bottom:1px solid var(--line-soft);
  background:var(--surface-2);
}
.table-search > .bi-search{ color:var(--muted); font-size:14px; flex:0 0 auto }
.table-search input{
  flex:1 1 auto; min-width:0;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text);
  padding:.34rem .6rem; font-size:13px; font-family:inherit;
}
.table-search input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.table-search input::placeholder{ color:var(--muted) }
/* the browser's own clear cross would sit next to ours */
.table-search input::-webkit-search-cancel-button{ display:none }
.ts-count{
  flex:0 0 auto; font-size:11.5px; font-weight:600; color:var(--muted-strong);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ts-clear{
  flex:0 0 auto; border:0; background:none; cursor:pointer;
  color:var(--muted); font-size:19px; line-height:1; padding:0 3px;
}
.ts-clear:hover{ color:var(--danger) }
.ts-nohit .sm-empty{ padding:34px 20px }
.ts-nohit-hint{ display:block }

@media print{ .table-search{ display:none !important } }

/* toolbar buttons that sit at the right of the table search bar */
.ts-tools{ display:flex; align-items:center; gap:2px; flex:0 0 auto; margin-left:2px }
.ts-tool{
  border:1px solid transparent; background:none; cursor:pointer;
  color:var(--muted-strong); font-size:14px; line-height:1;
  width:28px; height:28px; border-radius:var(--radius-sm);
  display:grid; place-items:center;
}
.ts-tool:hover{ background:var(--surface); border-color:var(--line-strong); color:var(--brand-600) }
.ts-tool:active{ background:var(--brand-050) }
@media (max-width:575px){ .table-search input::placeholder{ font-size:12px } }

/* =============================================================
   Share chooser — WhatsApp / SMS / Email / copy link
   ============================================================= */
.share-pop{
  position:absolute; z-index:2050; min-width:250px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:11px 12px;
  animation:pwaIn .16s ease-out;
}
.sp-title{ font-size:12.5px; font-weight:700; margin-bottom:9px; display:flex; flex-direction:column; gap:2px }
.sp-note{ font-weight:500; font-size:11px; color:var(--muted) }
.sp-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px }
.sp-opt{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:9px 4px; border-radius:var(--radius-sm);
  border:1px solid var(--line-soft); background:var(--surface-2);
  color:var(--text-soft); font-size:10.5px; font-weight:600;
  cursor:pointer; text-decoration:none; text-align:center;
}
.sp-opt:hover{ background:var(--brand-050); border-color:var(--brand-200); color:var(--brand-600) }
.sp-opt i{ font-size:19px }
@media print{ .share-pop{ display:none !important } }

/* =============================================================
   Table chart panel
   ============================================================= */
.tc-panel{
  border-bottom:1px solid var(--line-soft); background:var(--surface-2);
  animation:pwaIn .18s ease-out;
}
.tc-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 14px; border-bottom:1px solid var(--line-soft);
}
.tc-label{ font-size:12px; font-weight:700; color:var(--muted-strong); letter-spacing:.04em; text-transform:uppercase }
.tc-bar .form-select{ width:auto; min-width:130px; font-size:12.5px; padding:.28rem 1.6rem .28rem .55rem }
.tc-types{ display:flex; gap:2px }
.tc-type{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--muted-strong);
  width:30px; height:29px; border-radius:var(--radius-sm); cursor:pointer;
  display:grid; place-items:center; font-size:13px;
}
.tc-type.on{ background:var(--brand); border-color:var(--brand); color:#fff }
.tc-count{ margin-left:auto; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums }
.tc-close{ border:0; background:none; cursor:pointer; color:var(--muted); font-size:20px; line-height:1; padding:0 4px }
.tc-close:hover{ color:var(--danger) }
.tc-canvas{ height:300px; padding:12px 14px }
@media (max-width:575px){ .tc-canvas{ height:240px } .tc-count{ display:none } }
@media print{ .tc-panel{ display:none !important } }

/* =============================================================
   Segmented picker — one row of joined buttons, radio underneath
   ============================================================= */
.seg-group{
  display:inline-flex; flex-wrap:wrap; align-items:stretch;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  overflow:hidden; background:var(--surface);
}
.seg{
  position:relative; cursor:pointer; margin:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-width:86px; padding:9px 14px;
  border-right:1px solid var(--line-strong);
  color:var(--text-soft); transition:.14s; text-align:center;
}
.seg:last-child{ border-right:0 }
.seg input[type=radio]{ position:absolute; opacity:0; pointer-events:none }
.seg:hover{ background:var(--surface-2) }
.seg .seg-t{ font-size:13.5px; font-weight:600; line-height:1.15 }
.seg .seg-s{ font-size:11px; color:var(--muted) }
.seg.on{ background:var(--brand); border-right-color:var(--brand); color:#fff }
.seg.on .seg-s{ color:rgba(255,255,255,.82) }
.seg:focus-within{ box-shadow:inset 0 0 0 2px var(--brand-200) }

.seg-custom{ min-width:104px }
.seg-num{
  width:56px; text-align:center; font-weight:700; font-size:13px;
  border:1px solid var(--line-strong); border-radius:6px;
  background:var(--surface); color:var(--text); padding:1px 4px; margin:1px 0;
}
.seg.on .seg-num{ border-color:rgba(255,255,255,.55) }
.seg-num:focus{ outline:none; border-color:var(--brand) }

@media (max-width:575px){ .seg{ min-width:0; flex:1 1 76px; padding:8px 6px } }

/* =============================================================
   Sortable headings, hidden columns
   ============================================================= */
.sm-table th.ts-sortable{ cursor:pointer; user-select:none; position:relative; padding-right:20px }
.sm-table th.ts-sortable:hover{ background:var(--surface-3) }
.sm-table th.ts-sortable:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px }
.sm-table th.ts-sorted{ color:var(--brand-600) }
.ts-arrow{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:8.5px; letter-spacing:-.5px; color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.sm-table th[hidden], .sm-table td[hidden]{ display:none }

.ts-colmenu{
  position:absolute; right:12px; top:calc(100% - 4px); z-index:60;
  min-width:200px; max-height:320px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:7px;
}
.ts-colmenu-h{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:3px 7px 6px;
}
.ts-colrow{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:5px 7px; border-radius:var(--radius-sm); font-size:13px;
}
.ts-colrow:hover{ background:var(--surface-2) }
.ts-colrow input{ accent-color:var(--brand); width:15px; height:15px; flex:0 0 auto }
.ts-colreset{
  width:100%; margin-top:5px; border:1px solid var(--line-strong); background:var(--surface-2);
  border-radius:var(--radius-sm); padding:5px; font-size:12px; font-weight:600;
  color:var(--text-soft); cursor:pointer;
}
.ts-colreset:hover{ background:var(--brand-050); color:var(--brand-600); border-color:var(--brand-200) }
.ts-tool.on{ background:var(--brand-050); border-color:var(--brand-200); color:var(--brand-600) }
.table-search{ position:relative }
@media print{ .ts-arrow{ display:none } }

/* =============================================================
   Column header marks — sort arrow and filter funnel
   ============================================================= */
.sm-table th.ts-sortable{ padding-right:44px }
.ts-marks{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:1px;
}
.ts-arrow{
  position:static; transform:none;
  min-width:13px; text-align:center;
  font-size:9px; letter-spacing:-.5px; color:var(--brand);
  font-variant-numeric:tabular-nums;
}
/* Idle columns still show a faint mark, so it is clear they can be sorted. */
.ts-arrow.idle{ color:var(--muted-faint); font-size:10px }
.sm-table th.ts-sortable:hover .ts-arrow.idle{ color:var(--muted-strong) }

.ts-funnel{
  border:0; background:none; cursor:pointer; padding:0 1px;
  color:var(--muted-faint); font-size:11px; line-height:1;
  display:grid; place-items:center; width:16px; height:16px; border-radius:4px;
}
.sm-table th.ts-sortable:hover .ts-funnel{ color:var(--muted-strong) }
.ts-funnel:hover{ background:var(--surface); color:var(--brand) !important }
.ts-funnel.on{ color:var(--brand) !important }
.ts-funnel.on i::before{ content:"\f3ca" }          /* funnel-fill */
.sm-table th.ts-filtered{ background:var(--brand-050) !important; color:var(--brand-600) }

/* ---- the filter popover ---- */
.ts-filter{
  position:absolute; z-index:2060; width:250px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:9px;
  animation:pwaIn .15s ease-out;
}
.tf-head{ font-size:12px; font-weight:700; margin-bottom:7px; color:var(--muted-strong) }
.tf-find{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); padding:.3rem .5rem; font-size:12.5px;
}
.tf-find::-webkit-search-cancel-button{ display:none }
.tf-all{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:6px 4px; margin-top:6px; font-size:12.5px; font-weight:600;
  border-bottom:1px solid var(--line-soft);
}
.tf-list{ max-height:210px; overflow-y:auto; margin:4px 0 }
.tf-row{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:4px; border-radius:6px; font-size:12.5px;
}
.tf-row:hover{ background:var(--surface-2) }
.tf-row span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tf-all input, .tf-row input{ accent-color:var(--brand); width:14px; height:14px; flex:0 0 auto }
.tf-foot{ display:flex; gap:6px; margin-top:4px }
.tf-foot button{
  flex:1; border-radius:var(--radius-sm); padding:5px; font-size:12.5px;
  font-weight:600; cursor:pointer; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--text-soft);
}
.tf-apply{ background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important }
.tf-foot button:hover{ filter:brightness(1.05) }

.ts-clearfilters{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--brand-200); background:var(--brand-050); color:var(--brand-600);
  border-radius:var(--radius-sm); padding:3px 9px; font-size:11.5px; font-weight:600; cursor:pointer;
}
.ts-clearfilters:hover{ background:var(--brand-100) }
.ts-clearfilters[hidden]{ display:none }

@media print{ .ts-marks, .ts-filter{ display:none !important } .sm-table th.ts-sortable{ padding-right:5pt } }

/* A cart line billing more than the shelf holds. The bill still saves — this is
   a heads-up for the cashier, not a barrier at the counter. */
.pos-line.short{ background:rgba(229,72,77,.07); box-shadow:inset 3px 0 0 var(--danger) }
.pos-line .short-tag{
  display:inline-block; margin-left:6px; padding:0 5px; border-radius:5px;
  background:var(--danger); color:#fff; font-size:10px; font-weight:700; white-space:nowrap;
}