/* ============================================================
   ARYA PHARMA MANAGER — design tokens
   Palette: "Dispensary" — cool pharmacy white, viridian brand,
   saffron→red expiry heat. Ledger numerals in mono.
   ============================================================ */
:root{
  --paper:#F5F9F6;          /* app background — cool, faintly green */
  --surface:#FFFFFF;
  --surface-2:#EEF4F0;
  --ink:#122420;
  --muted:#5B6F67;
  --line:#DDE7E1;
  --line-strong:#C4D4CC;

  --brand:#0E7A5F;          /* viridian — the pharmacy green, made serious */
  --brand-ink:#0A5946;
  --brand-soft:#E1F0EA;

  --heat-180:#3E8E63;       /* expiry heat scale */
  --heat-90:#B99A16;
  --heat-60:#E39A1C;        /* Herati saffron */
  --heat-30:#D9700F;
  --heat-15:#C2452B;
  --heat-x:#8F2418;

  --ok:#0E7A5F; --warn:#B07708; --bad:#B23A22;
  --ok-soft:#E1F0EA; --warn-soft:#FBF0D7; --bad-soft:#F9E5DF;

  --radius:10px;
  --shadow:0 1px 2px rgba(18,36,32,.05), 0 8px 24px -18px rgba(18,36,32,.25);

  --font-display:"Bricolage Grotesque", "Vazirmatn", sans-serif;
  --font-body:"Instrument Sans", "Vazirmatn", sans-serif;
  --font-data:"IBM Plex Mono", monospace;
}
html.dark{
  --paper:#0D1512; --surface:#131E19; --surface-2:#182620;
  --ink:#E7F0EB; --muted:#8FA69C; --line:#22332C; --line-strong:#31473E;
  --brand:#35B08C; --brand-ink:#5FCCA9; --brand-soft:#153328;
  --ok:#35B08C; --warn:#E0B24C; --bad:#E0684C;
  --ok-soft:#143127; --warn-soft:#31280F; --bad-soft:#33170F;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -18px rgba(0,0,0,.6);
}
html[dir="rtl"] body{ font-family:"Vazirmatn", var(--font-body); }
html[dir="rtl"] .display-face{ font-family:"Vazirmatn", sans-serif; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:14.5px; line-height:1.45;
  display:flex; flex-direction:column; min-height:100vh;
  transition:background .18s ease, color .18s ease;
}
.display-face{ font-family:var(--font-display); }
.data{ font-family:var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }

/* ---------- keycap: the recurring motif ---------- */
.kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 5px;
  font:600 10.5px/1 var(--font-data); color:var(--muted);
  background:var(--surface); border:1px solid var(--line-strong);
  border-bottom-width:2px; border-radius:5px; white-space:nowrap;
}
.kbd.brand{ color:#fff; background:var(--brand); border-color:var(--brand-ink); }

/* ============================================================ TOP BAR */
.topbar{
  display:flex; align-items:center; gap:14px;
  height:56px; padding:0 16px;
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.brandmark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brandmark .cross{
  width:30px; height:30px; border-radius:8px; background:var(--brand);
  display:grid; place-items:center; color:#fff; flex:0 0 auto;
}
.brandmark .cross svg{ display:block; }
.brandmark .name{ font:600 15px/1.05 var(--font-display); letter-spacing:-.01em; }
.brandmark .name small{ display:block; font:500 10px/1.2 var(--font-body); color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }

.searchwrap{ flex:1; max-width:640px; margin-inline:auto; position:relative; }
.searchbox{
  width:100%; height:38px; border:1px solid var(--line-strong); border-radius:9px;
  background:var(--paper); color:var(--ink); padding:0 84px 0 38px;
  font:500 14px var(--font-body); transition:border-color .12s, box-shadow .12s;
}
html[dir="rtl"] .searchbox{ padding:0 38px 0 84px; }
.searchbox:focus{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); outline:none; }
.searchwrap .bi-search{ position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.searchwrap .hint{ position:absolute; inset-inline-end:10px; top:50%; transform:translateY(-50%); display:flex; gap:4px; }

.topbar .chip{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 10px; border-radius:99px;
  font:500 12px var(--font-body); color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line);
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); }
.iconbtn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); display:grid; place-items:center; cursor:pointer;
}
.iconbtn:hover{ color:var(--ink); border-color:var(--line-strong); }
select.lang{
  height:34px; border-radius:8px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font:500 13px var(--font-body); padding:0 8px; cursor:pointer;
}

/* ============================================================ SHELL */
.shell{ display:flex; flex:1; min-height:0; }

/* ---------- side navigation with F-key rail built in ---------- */
.sidenav{
  width:216px; flex:0 0 auto; background:var(--surface);
  border-inline-end:1px solid var(--line);
  padding:12px 10px; display:flex; flex-direction:column; gap:2px;
  overflow-y:auto;
}
.sidenav .group{ font:600 10px/1 var(--font-body); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:14px 10px 6px; }
.navitem{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; border:0; width:100%;
  background:transparent; color:var(--ink); cursor:pointer; text-align:start;
  font:500 13.5px var(--font-body);
}
.navitem i{ font-size:15px; color:var(--muted); width:18px; text-align:center; }
.navitem .kbd{ margin-inline-start:auto; }
.navitem:hover{ background:var(--surface-2); }
.navitem.active{ background:var(--brand-soft); color:var(--brand-ink); }
.navitem.active i{ color:var(--brand); }
.navitem.active .kbd{ color:var(--brand-ink); border-color:color-mix(in srgb, var(--brand) 40%, var(--line-strong)); }

/* ============================================================ MAIN */
.main{ flex:1; min-width:0; overflow-y:auto; padding:22px 24px 28px; }
.screen{ display:none; animation:rise .18s ease; }
.screen.active{ display:block; }
@keyframes rise{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }

.screenhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.screenhead h1{ font:600 22px/1.1 var(--font-display); letter-spacing:-.015em; margin:0; }
.screenhead .sub{ color:var(--muted); font-size:13px; margin-top:3px; }

.btn-arya{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px; border-radius:9px; border:1px solid transparent;
  font:600 13.5px var(--font-body); cursor:pointer;
}
.btn-arya.primary{ background:var(--brand); color:#fff; }
.btn-arya.primary:hover{ background:var(--brand-ink); }
.btn-arya.ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-arya.ghost:hover{ background:var(--surface-2); }
.btn-arya .kbd{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.25); color:#fff; }
.btn-arya.ghost .kbd{ background:var(--paper); border-color:var(--line-strong); color:var(--muted); }

/* ============================================================ CARDS + KPIs */
.card-a{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1100px){ .kpis{ grid-template-columns:repeat(2,1fr);} }
.kpi{ padding:14px 16px 12px; position:relative; overflow:hidden; }
.kpi .label{ font:600 11px/1 var(--font-body); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px; }
.kpi .value{ font:600 26px/1.15 var(--font-data); letter-spacing:-.03em; margin-top:8px; }
.kpi .value small{ font-size:13px; color:var(--muted); font-weight:500; margin-inline-start:4px; }
.kpi .delta{ font:500 12px var(--font-body); margin-top:4px; }
.delta.up{ color:var(--ok); } .delta.down{ color:var(--bad); } .delta.flat{ color:var(--muted); }
.kpi::before{ content:""; position:absolute; inset-inline-start:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:var(--line-strong); }
.kpi.income::before{ background:var(--brand); }
.kpi.expense::before{ background:var(--heat-60); }
.kpi.profit::before{ background:var(--heat-180); }
.kpi.stockval::before{ background:var(--line-strong); }

/* ============================================================ EXPIRY LEDGER — signature element */
.expiry-ledger{ padding:16px 18px 14px; margin-top:14px; }
.expiry-ledger .head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.expiry-ledger h2{ font:600 14px var(--font-display); margin:0; }
.expiry-ledger .head a{ font:500 12.5px var(--font-body); color:var(--brand); text-decoration:none; }
.heatbar{ display:flex; gap:5px; margin-top:12px; }
.heatseg{
  flex-grow:var(--w,1); min-width:64px; border-radius:8px; padding:9px 10px 8px;
  color:#fff; cursor:pointer; border:0; text-align:start;
  transition:transform .1s ease, filter .1s ease; position:relative;
}
.heatseg:hover{ transform:translateY(-2px); filter:saturate(1.1); }
.heatseg .n{ font:600 18px/1 var(--font-data); letter-spacing:-.02em; display:block; }
.heatseg .t{ font:600 10px/1.2 var(--font-body); letter-spacing:.05em; text-transform:uppercase; opacity:.9; display:block; margin-top:4px; white-space:nowrap; }
.heatseg.h180{ background:var(--heat-180);} .heatseg.h90{ background:var(--heat-90);}
.heatseg.h60{ background:var(--heat-60);} .heatseg.h30{ background:var(--heat-30);}
.heatseg.h15{ background:var(--heat-15);} .heatseg.hx{ background:var(--heat-x); }
.heatseg.hx::after{ content:""; position:absolute; inset:0; border-radius:8px; background:repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255,255,255,.09) 8px 16px); pointer-events:none; }

/* ============================================================ DASH GRID */
.dashgrid{ display:grid; grid-template-columns:1.7fr 1fr; gap:12px; margin-top:14px; }
@media (max-width:1100px){ .dashgrid{ grid-template-columns:1fr; } }
.panel{ padding:16px 18px; }
.panel h2{ font:600 14px var(--font-display); margin:0 0 4px; display:flex; align-items:center; justify-content:space-between; }
.panel h2 a{ font:500 12.5px var(--font-body); color:var(--brand); text-decoration:none; }
.panel .note{ color:var(--muted); font-size:12.5px; margin:0 0 10px; }

.minilist{ list-style:none; margin:0; padding:0; }
.minilist li{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.minilist li:first-child{ border-top:0; }
.minilist .who{ min-width:0; }
.minilist .who b{ font-weight:600; font-size:13.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.minilist .who span{ color:var(--muted); font-size:12px; }
.minilist .amt{ margin-inline-start:auto; font:600 13.5px var(--font-data); white-space:nowrap; }
.tag{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:99px; font:600 11px var(--font-body); }
.tag.ok{ background:var(--ok-soft); color:var(--ok);} .tag.warn{ background:var(--warn-soft); color:var(--warn);} .tag.bad{ background:var(--bad-soft); color:var(--bad); }

.stockrow .bar{ height:5px; border-radius:5px; background:var(--surface-2); flex:0 0 90px; overflow:hidden; }
.stockrow .bar i{ display:block; height:100%; border-radius:5px; background:var(--bad); }

/* ============================================================ TABLES */
.tablewrap{ overflow:auto; border-radius:var(--radius); }
table.arya{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
table.arya thead th{
  position:sticky; top:0; background:var(--surface-2); color:var(--muted);
  font:600 11px/1.3 var(--font-body); letter-spacing:.06em; text-transform:uppercase;
  padding:9px 12px; border-bottom:1px solid var(--line-strong); text-align:start; white-space:nowrap; z-index:2;
}
table.arya tbody td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
table.arya tbody tr:hover{ background:color-mix(in srgb, var(--brand) 4%, var(--surface)); }
table.arya tbody tr.kbd-focus{ background:var(--brand-soft); box-shadow:inset 3px 0 0 var(--brand); }
td .code{ font:500 12px var(--font-data); color:var(--muted); }
td .medname b{ display:block; font-weight:600; }
td .medname span{ font-size:12px; color:var(--muted); }
.exp-pill{ display:inline-flex; align-items:center; gap:6px; font:600 12px var(--font-data); padding:3px 9px; border-radius:99px; color:#fff; }

.toolrow{ display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.toolrow .filter{
  height:34px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); font:500 13px var(--font-body); padding:0 10px;
}
.pager{ display:flex; align-items:center; gap:10px; padding:10px 14px; color:var(--muted); font-size:12.5px; border-top:1px solid var(--line); }
.pager .pages{ margin-inline-start:auto; display:flex; gap:4px; }
.pager button{ min-width:28px; height:28px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font:600 12px var(--font-data); cursor:pointer; }
.pager button.cur{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ============================================================ SEARCH OVERLAY */
.overlay{ position:fixed; inset:0; background:color-mix(in srgb, var(--ink) 32%, transparent); backdrop-filter:blur(2px); z-index:100; display:none; align-items:flex-start; justify-content:center; padding-top:11vh; }
.overlay.open{ display:flex; }
.palette{ width:min(680px, 92vw); background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; box-shadow:0 24px 64px -24px rgba(0,0,0,.45); overflow:hidden; }
.palette input{ width:100%; border:0; background:transparent; color:var(--ink); font:500 16px var(--font-body); padding:16px 18px; outline:none; border-bottom:1px solid var(--line); }
.palette .scope{ display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.scope button{ height:24px; padding:0 10px; border-radius:99px; border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); font:600 11.5px var(--font-body); cursor:pointer; }
.scope button.on{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
.results{ max-height:44vh; overflow:auto; padding:6px; }
.result{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px; cursor:pointer; }
.result:hover, .result.sel{ background:var(--surface-2); }
.result .ico{ width:30px; height:30px; border-radius:8px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:0 0 auto; }
.result b{ font-size:13.5px; display:block; }
.result span{ font-size:12px; color:var(--muted); }
.result .exp-pill{ margin-inline-start:auto; }
.palette .foot{ display:flex; gap:14px; padding:9px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px; }
.palette .foot span{ display:inline-flex; gap:5px; align-items:center; }

/* ============================================================ F-KEY RAIL + STATUS (signature, bottom) */
.fkeyrail{
  display:flex; align-items:stretch; gap:0; background:var(--surface);
  border-top:1px solid var(--line); z-index:50;
}
.frail{ display:flex; flex:1; overflow-x:auto; }
.fkey{
  display:flex; align-items:center; gap:7px; padding:0 13px; height:38px;
  border:0; border-inline-end:1px solid var(--line); background:transparent;
  color:var(--muted); font:500 12px var(--font-body); cursor:pointer; white-space:nowrap;
}
.fkey:hover{ background:var(--surface-2); color:var(--ink); }
.fkey.on{ color:var(--brand-ink); background:var(--brand-soft); }
.statusstrip{ display:flex; align-items:center; gap:16px; padding:0 14px; color:var(--muted); font:500 11.5px var(--font-data); border-inline-start:1px solid var(--line); }
.statusstrip .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); display:inline-block; margin-inline-end:5px; }

/* chart canvas */
.chartbox{ height:230px; position:relative; }

/* empty screens */
.stub{ padding:60px 20px; text-align:center; color:var(--muted); }
.stub i{ font-size:34px; color:var(--line-strong); display:block; margin-bottom:10px; }

@media (max-width:900px){
  .sidenav{ display:none; }
  .topbar .chip.backup{ display:none; }
}

/* ============================================================
   APPLICATION LAYER — added for the live app (forms, modals,
   toasts, pagination, tabs, login, print). Vendor-free.
   ============================================================ */

/* ---------- inline SVG icons ---------- */
.ic{ width:16px; height:16px; flex:0 0 auto; vertical-align:-3px; }
.navitem .ic{ color:var(--muted); }
.navitem.active .ic{ color:var(--brand); }

/* ---------- generic form fields ---------- */
.fld{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.fld > span{ font:600 11.5px/1 var(--font-body); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.fld input, .fld select, .fld textarea,
.filterbar select, .filterbar input{
  height:36px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--surface); color:var(--ink); padding:0 10px;
  font:500 14px var(--font-body);
}
.fld textarea{ height:auto; min-height:70px; padding:8px 10px; resize:vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); outline:none;
}
.fld input[readonly]{ background:var(--surface-2); color:var(--muted); }
.fld .req{ color:var(--bad); }
.formgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 14px; }
.formgrid .full{ grid-column:1 / -1; }
@media (max-width:640px){ .formgrid{ grid-template-columns:1fr; } }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:36px; padding:0 16px; border-radius:8px; border:1px solid transparent;
  font:600 13.5px var(--font-body); cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s; text-decoration:none; }
.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-ink); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ background:var(--bad); color:#fff; }
.btn-danger:hover{ filter:brightness(.92); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-sm{ height:29px; padding:0 10px; font-size:12.5px; border-radius:7px; }
.keycap-inverse{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  border-radius:4px; font:600 10.5px var(--font-data); padding:1px 5px; }

/* ---------- data tables ---------- */
.tablewrap{ overflow:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow); }
table.grid{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.grid th{
  position:sticky; top:0; z-index:2; background:var(--surface-2);
  font:600 10.5px/1 var(--font-body); letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); text-align:start; padding:9px 12px; border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
table.grid td{ padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.grid tbody tr{ cursor:default; }
table.grid tbody tr:hover{ background:var(--surface-2); }
table.grid tbody tr.sel{ background:var(--brand-soft); outline:1px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset:-1px; }
table.grid .num{ text-align:end; font-family:var(--font-data); font-variant-numeric:tabular-nums; }
table.grid .actions{ white-space:nowrap; text-align:end; }
table.grid .actions button{ background:none; border:0; color:var(--muted); cursor:pointer; padding:4px; border-radius:6px; }
table.grid .actions button:hover{ color:var(--brand); background:var(--brand-soft); }
table.grid .actions button.danger:hover{ color:var(--bad); background:var(--bad-soft); }

.exp-pill{ display:inline-block; min-width:52px; text-align:center; padding:3px 8px; border-radius:99px;
  color:#fff; font:600 11.5px var(--font-data); }
.badge{ display:inline-block; padding:3px 9px; border-radius:99px; font:600 11.5px var(--font-body); }
.badge.ok{ background:var(--ok-soft); color:var(--ok); }
.badge.warn{ background:var(--warn-soft); color:var(--warn); }
.badge.bad{ background:var(--bad-soft); color:var(--bad); }
.badge.mut{ background:var(--surface-2); color:var(--muted); }

.filterbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.filterbar input[type=search]{ min-width:230px; flex:1; max-width:340px; }

.pager{ display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:10px 2px 0; color:var(--muted); font-size:12.5px; flex-wrap:wrap; }
.pager .btns{ display:flex; gap:6px; }
.pager button{ height:28px; min-width:28px; padding:0 9px; border:1px solid var(--line-strong);
  border-radius:7px; background:var(--surface); color:var(--ink); font:600 12.5px var(--font-data); cursor:pointer; }
.pager button:hover{ background:var(--surface-2); }
.pager button[disabled]{ opacity:.4; cursor:not-allowed; }
.pager button.cur{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line-strong); margin-bottom:14px; }
.tabs button{ background:none; border:0; border-bottom:2px solid transparent; padding:9px 14px;
  font:600 13.5px var(--font-body); color:var(--muted); cursor:pointer; }
.tabs button.on{ color:var(--brand-ink); border-bottom-color:var(--brand); }

/* ---------- modal ---------- */
.modal-back{ position:fixed; inset:0; z-index:200; background:color-mix(in srgb, var(--ink) 45%, transparent);
  display:grid; place-items:center; padding:20px; animation:fade .14s ease; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal{ background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.4); width:min(620px, 100%);
  max-height:90vh; display:flex; flex-direction:column; animation:rise .16s ease; }
.modal.wide{ width:min(880px, 100%); }
.modal > header{ display:flex; align-items:center; gap:10px; padding:16px 20px 12px; }
.modal > header h2{ font:600 17px var(--font-display); margin:0; flex:1; }
.modal > header .x{ background:none; border:0; color:var(--muted); cursor:pointer; font-size:20px; line-height:1; padding:4px; border-radius:6px; }
.modal > header .x:hover{ color:var(--ink); background:var(--surface-2); }
.modal > .body{ padding:4px 20px; overflow-y:auto; }
.modal > footer{ display:flex; justify-content:flex-end; gap:8px; padding:14px 20px 18px; }
.modal .hintline{ margin-inline-end:auto; align-self:center; color:var(--muted); font-size:12px; display:flex; gap:10px; }

/* ---------- toasts ---------- */
.toasts{ position:fixed; bottom:74px; inset-inline-end:18px; z-index:400; display:flex; flex-direction:column; gap:8px; }
.toast{ background:var(--surface); border:1px solid var(--line-strong); border-inline-start:3px solid var(--brand);
  border-radius:10px; box-shadow:var(--shadow); padding:11px 16px; font:500 13.5px var(--font-body);
  min-width:240px; max-width:360px; animation:rise .18s ease; }
.toast.err{ border-inline-start-color:var(--bad); }
.toast.warn{ border-inline-start-color:var(--heat-60); }

/* ---------- empty / loading ---------- */
.empty{ text-align:center; padding:44px 20px; color:var(--muted); }
.empty b{ display:block; font:600 15px var(--font-display); color:var(--ink); margin-bottom:4px; }
.spin{ width:22px; height:22px; border:3px solid var(--line-strong); border-top-color:var(--brand);
  border-radius:50%; animation:sp .7s linear infinite; margin:30px auto; }
@keyframes sp{ to{ transform:rotate(360deg);} }

/* ---------- login ---------- */
.login-body{ display:grid; place-items:center; background:
  radial-gradient(900px 500px at 80% -10%, var(--brand-soft), transparent 60%), var(--paper); }
.login-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); width:min(400px, 92vw); padding:34px 36px 24px; }
.login-brand{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.login-mark{ width:48px; height:48px; border-radius:12px; background:var(--brand); color:#fff; display:grid; place-items:center; }
.login-brand h1{ font:600 19px/1.15 var(--font-display); margin:0; }
.login-sub{ display:block; font:500 11px var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.login-error{ background:var(--bad-soft); color:var(--bad); border-radius:8px; padding:9px 12px; font-size:13px; margin-bottom:12px; }
.login-foot{ margin-top:22px; text-align:center; color:var(--muted); font-size:12px; }
.mono{ font-family:var(--font-data); }

/* ---------- misc ---------- */
.right{ text-align:end; } .center{ text-align:center; }
.mut{ color:var(--muted); } .small{ font-size:12.5px; }
.money{ font-family:var(--font-data); font-variant-numeric:tabular-nums; }
.money.neg{ color:var(--bad); } .money.pos{ color:var(--ok); }
.row-flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grow{ flex:1; }
.mt{ margin-top:14px; } .mb{ margin-bottom:14px; }
.cardpad{ padding:16px 18px; }
.autocomplete{ position:relative; }
.autocomplete .acl{ position:absolute; top:calc(100% + 4px); inset-inline:0; z-index:60;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
  box-shadow:var(--shadow); max-height:260px; overflow:auto; }
.autocomplete .acl .it{ padding:8px 12px; cursor:pointer; font-size:13.5px; display:flex; justify-content:space-between; gap:10px; }
.autocomplete .acl .it:hover, .autocomplete .acl .it.sel{ background:var(--brand-soft); }
.itemsgrid td input{ height:31px; width:100%; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink); padding:0 8px; font:500 13px var(--font-data); }
.itemsgrid td input:focus{ border-color:var(--brand); outline:none; }

/* ---------- print (reports) ---------- */
@media print{
  .topbar, .sidenav, .fkeyrail, .statusstrip, .filterbar, .pager,
  .screenhead .row-flex, .noprint{ display:none !important; }
  .main{ padding:0; overflow:visible; }
  body{ background:#fff; }
  .tablewrap{ border:none; box-shadow:none; }
  table.grid th{ position:static; }
}

/* ============================================================
   SALES MODULE (v1.1) — POS layout + 80mm receipt print
   ============================================================ */
.pos{ display:grid; grid-template-columns:1.9fr 1fr; gap:14px; align-items:start; }
@media (max-width:1050px){ .pos{ grid-template-columns:1fr; } }
.pos-cart .tablewrap{ max-height:52vh; }
.pos-cart td input{ height:30px; width:74px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink); padding:0 7px; font:600 13px var(--font-data); text-align:end; }
.pos-cart td input:focus{ border-color:var(--brand); outline:none; }
.pos-sum{ position:sticky; top:0; }
.pos-sum .row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0;
  border-bottom:1px dashed var(--line); font-size:13.5px; }
.pos-sum .row.total{ border-bottom:0; padding-top:12px; }
.pos-sum .row.total b{ font:700 26px/1 var(--font-data); letter-spacing:-.02em; color:var(--brand-ink); }
.pos-sum .row.change b{ font:700 18px var(--font-data); }
.pos-sum input, .pos-sum select{ height:34px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--surface); color:var(--ink); padding:0 9px; font:600 14px var(--font-data); width:130px; text-align:end; }
.pos-sum select{ font-family:var(--font-body); text-align:start; }
.pos-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.pos-actions .btn-brand{ grid-column:1 / -1; height:46px; font-size:15.5px; }
.qrbox{ display:grid; place-items:center; padding:10px; }
.qrbox canvas, .qrbox svg{ border:8px solid #fff; border-radius:10px; box-shadow:var(--shadow); }
.qrurl{ font:600 12.5px var(--font-data); word-break:break-all; text-align:center;
  background:var(--surface-2); border-radius:8px; padding:9px 12px; margin-top:10px; }
.payline{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.payline select{ width:auto; flex:1; }