:root{--bg:#f6f5f3;--surface:#fff;--card:#fff;--border:#e9e7e2;--text:#1c1a17;--muted:#645f55;--accent:#c8102e;--accent-fg:#fff;--accent-soft:rgba(200,16,46,.1);--success:#4c8b2b;--danger:#dc2626}
/* Lite Meal's real identity (owner request, 2026-08-01) — warm cream + the brand's own green
   (#4c7a28/#6fae35, same pair used on the رحلة العميل screen and the brand-switch button/login screen),
   replacing the near-black shell every other Lite Meal screen (dashboard, orders, kitchen, customers...)
   was still rendering in. Demi/default=cream+red, Sweet=cream+amber, Lite Meal=cream+green — the only
   brand left dark before this. */
[data-brand=light]{--bg:#faf6ec;--surface:#fffdf7;--card:#fffdf7;--border:#e6ddc7;--text:#26301c;--muted:#7c8468;--accent:#4c7a28;--accent-fg:#fff;--accent-soft:rgba(76,122,40,.14);--success:#1f8a4c;--danger:#dc2626}
[data-brand=sweet]{--bg:#f7efdd;--surface:#fffaf0;--card:#fffaf0;--border:#ecdfc4;--text:#2a2118;--muted:#8a7a5f;--accent:#eaa41d;--accent-fg:#2a2118;--accent-soft:rgba(234,164,29,.16);--success:#4c8b2b;--danger:#dc2626}
/* neutral Arsaq Unified-POS shell — deliberately NOT any single brand's color (the app manifest's own theme_color).
   Used only while state.screen==='unified_pos' (see setChrome() in app.js); per-brand identity lives inside the
   selling surface (tabs/badges), never on the global sidebar/logo. */
[data-brand=unified]{--bg:#f4f5f7;--surface:#fff;--card:#fff;--border:#e3e5ea;--text:#191c22;--muted:#5c6270;--accent:#1A2238;--accent-fg:#fff;--accent-soft:rgba(26,34,56,.08);--success:#2f7d5b;--danger:#c9363e}
/* ═══ OPERATIONAL TYPOGRAPHY — ONE SCALE FOR EVERY SCREEN AN EMPLOYEE *WORKS* ON ════════════════
   The kitchen board, the branch queue, «مركز الطلبات» and «الطلبات» are not documents. They are read
   standing up — sometimes from across a pass, a metre or two away — and the thing that must win the eye
   is THE ORDER, never the button that acts on it. The board used to invert exactly that: the action
   button was 14px/900 on a saturated fill spanning the card, while the product being cooked was 14px/700
   plain text. The strongest element on a cook's screen was the verb, not the noun.

   Every size is named for its ROLE, declared once here, and consumed by kdsCss(), hubCss() and
   ordcInjectCSS(). So «make the tickets bigger» stays a single edit instead of a hunt through three
   files that drifted apart — and a size can never mean one thing on the central board and another on
   the branch queue.

   They step UP on wide screens, deliberately. A 27-inch wall display has more room, and the right answer
   to more room is more legibility — not more rows of micro-text. */
:root{
  --op-title:22px;      /* the screen's own name */
  --op-sub:13.5px;      /* its one-line explanation */
  --op-no:22px;         /* ORDER REFERENCE on a ticket — the strongest thing on any operational surface */
  --op-tno:17px;        /* order reference in a TABLE, where a whole column of them must still scan */
  --op-age:20px;        /* elapsed time: a fact, never a verdict */
  --op-item:18px;       /* WHAT is being made */
  --op-qty:18px;        /* HOW MANY — the number a cook gets wrong at a glance */
  --op-meta:15px;       /* where it came from, who is on it */
  --op-status:14px;     /* the state badge */
  --op-tag:13.5px;      /* source / brand chips */
  --op-note:14.5px;     /* modifiers and notes */
  --op-amount:17px;     /* money in a table */
  --op-action:15px;     /* the button's label — readable, no longer the loudest voice */
  --op-row:58px;        /* table row height a human can track across ten columns */
  --op-kpi:30px;        /* a counter read from across the room */
  --op-touch:48px;      /* the wet-handed minimum this kitchen actually operates with */
}
@media(min-width:1600px){:root{--op-no:24px;--op-tno:18px;--op-item:19px;--op-qty:19px;--op-meta:15.5px;--op-amount:18px}}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
.muted{color:var(--muted)}.small{font-size:12px}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;width:100%;max-width:350px}
.login-title{font-size:20px;font-weight:700;margin-bottom:2px}
.inp{width:100%;height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font:inherit;background:var(--surface);color:var(--text);margin-bottom:10px}
.inp:focus{outline:none;border-color:var(--accent)}
.btn-primary{width:100%;border:0;border-radius:10px;background:var(--accent);color:var(--accent-fg);font:inherit;font-weight:600;font-size:14px;padding:11px;cursor:pointer;margin-top:4px}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.err{background:rgba(220,38,38,.12);color:var(--danger);font-size:12.5px;padding:8px 10px;border-radius:8px;margin-bottom:10px}
.hint{margin-top:14px;text-align:center;line-height:1.8}
.appwrap{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-inline-end:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:3px}
.brandmark{display:flex;justify-content:center;padding:6px 4px 16px}
.brandmark img{max-height:76px;width:auto;object-fit:contain}
.nav a{display:block;padding:9px 12px;border-radius:9px;color:var(--muted);font-size:13.5px;cursor:pointer;text-decoration:none}
.nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:500}
.side-bottom{margin-top:auto;border-top:1px solid var(--border);padding-top:12px;display:flex;align-items:center;gap:8px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.main{padding:20px 24px}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.topbar h1{font-size:19px;margin:0;font-weight:600}
.switch{display:flex;gap:4px;border:1px solid var(--border);border-radius:10px;padding:4px;background:var(--surface)}
.switch button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;padding:6px 12px;border-radius:7px;cursor:pointer}
.switch button.active{background:var(--accent);color:var(--accent-fg);font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.kpi .big{font-size:23px;font-weight:600;margin-top:6px}
.row1{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.card h3{margin:0 0 4px;font-size:14px;font-weight:600}
.bars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:180px;margin-top:14px}
.barcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.barwrap{width:100%;display:flex;align-items:flex-end;justify-content:center;height:130px}
.bar{width:100%;max-width:26px;background:var(--accent);border-radius:6px 6px 0 0;min-height:2px}
.barval{font-size:10px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
th{text-align:start;font-weight:400;color:var(--muted);font-size:11.5px;padding:8px 0}
td{padding:9px 0;border-top:1px solid var(--border)}
td.b{font-weight:600}
.toprow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--border)}
.toprow:first-child{border-top:0}
.rank{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.grow{flex:1;min-width:0}.tname{font-size:13px;font-weight:500}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filters button{border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-size:12.5px;padding:6px 13px;border-radius:20px;cursor:pointer}
.filters button.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.menugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.mcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.mname{font-size:13.5px;font-weight:500}
.mrow{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.price{font-weight:600;font-size:14px}
.toggle{width:38px;height:22px;border-radius:20px;background:var(--border);position:relative;cursor:pointer;flex:none}
.toggle.on{background:var(--success)}
.toggle .knob{position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.toggle.on .knob{inset-inline-start:18px}
.addcard{border:1.5px dashed var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;min-height:150px;font-size:13px}
.mini{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:11.5px;padding:5px 10px;border-radius:7px;cursor:pointer}
.mini.danger{color:var(--danger);border-color:var(--danger)}
.pos{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;cursor:pointer}
.pcard:hover{border-color:var(--accent)}
.pfoot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.pprice{font-weight:600;font-size:13px}
.addbtn{width:26px;height:26px;border:0;border-radius:8px;background:var(--accent);color:var(--accent-fg);font-size:16px;cursor:pointer;line-height:1}
.cart{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;position:sticky;top:16px}
.otypes{display:flex;gap:4px;background:var(--bg);border-radius:9px;padding:4px;margin:10px 0 12px}
.otypes button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;padding:6px;border-radius:6px;cursor:pointer}
.otypes button.active{background:var(--surface);color:var(--text);font-weight:500}
.otbl-inp{width:100%;box-sizing:border-box;border:1.5px solid var(--accent);background:var(--surface);color:var(--text);font:inherit;font-size:13px;padding:9px 12px;border-radius:9px;margin:0 0 12px;text-align:center}
.otbl-inp:focus{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.citem{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--border)}
.citem:first-child{border-top:0}
.qty{display:flex;align-items:center;gap:8px}
.qbtn{width:22px;height:22px;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:pointer;color:var(--text);font-size:13px}
.sumrow{display:flex;justify-content:space-between;font-size:12.5px;margin-top:8px;color:var(--muted)}
.sumtot{display:flex;justify-content:space-between;font-size:15px;font-weight:700;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.cartempty{color:var(--muted);font-size:12.5px;text-align:center;padding:24px 0}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:60px 20px;color:var(--muted);text-align:center}
/* ── A FAILURE IS NOT AN EMPTY STATE ────────────────────────────────────────────────────────────────
   `.empty` above is muted, centred and calm on purpose: "there is genuinely nothing here" should not
   alarm anyone. That is exactly why a failure must never borrow it. `.scfail` is the surface render()
   uses when the screen could not be BUILT (app.js — screenFailureHTML): it is warm-toned, bordered,
   carries an icon and — crucially — carries a way out. An empty state has nothing to retry; a failure
   always does. The two must never be mistaken for each other at a glance from across a desk. */
.scfail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:56px 20px;text-align:center;
        background:rgba(220,38,38,.05);border:1px solid rgba(220,38,38,.22);border-radius:14px;margin:8px 0}
.scfail__i{color:var(--danger);line-height:0}
.scfail__t{font-size:17px;font-weight:800;color:var(--text)}
.scfail__d{font-size:14.5px;line-height:1.7;color:var(--muted);max-width:44ch}
.scfail__code{font-size:12.5px;font-weight:700;color:var(--muted);opacity:.85;direction:ltr;unicode-bidi:isolate}
.scfail .btn-sm{margin-top:4px}
@media(max-width:900px){.appwrap{grid-template-columns:1fr}.sidebar{flex-direction:row;flex-wrap:wrap;align-items:center;border-inline-end:0;border-bottom:1px solid var(--border)}.brandmark{padding:4px 8px}.brandmark img{max-height:44px}.side-bottom{margin-inline-start:auto}.kpis{grid-template-columns:repeat(2,1fr)}.row1,.pos{grid-template-columns:1fr}.cart{position:static}}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:center}
.formgrid .inp{margin-bottom:0}
.lbl{display:block;font-size:12.5px;color:var(--muted);margin:6px 0 4px}
select.inp{cursor:pointer}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;width:360px;max-width:94vw;max-height:88vh;overflow:auto}
.receipt-line{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0}

/* ============================================================
   Redesign + motion layer (overrides the base above)
   ============================================================ */
:root{--shadow-1:0 1px 2px rgba(20,15,10,.05),0 10px 26px -14px rgba(20,15,10,.16);--shadow-2:0 12px 34px -12px rgba(20,15,10,.24);--rr:16px}
body{background:radial-gradient(130% 80% at 100% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 55%),var(--bg)}
.appwrap{grid-template-columns:240px 1fr}
.sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface));padding:18px 14px;gap:4px}
.brandmark img{max-height:82px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.16))}
.nav a{position:relative;padding:11px 14px;font-size:14px;font-weight:500;transition:background .18s,color .18s}
.nav a:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text)}
.nav a.active{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-weight:700}
.nav a.active::before{content:'';position:absolute;inset-inline-start:4px;inset-block:9px;width:3.5px;border-radius:3px;background:var(--accent)}
.avatar{font-weight:800;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}
.main{padding:22px 26px}
.topbar h1{font-size:22px;font-weight:800;letter-spacing:-.3px}
.switch{box-shadow:var(--shadow-1)}.switch button{transition:.18s}.switch button.active{box-shadow:0 5px 13px -5px var(--accent)}
.card,.kpi,.mcard,.cart,.login-card,.modal{border-radius:var(--rr);box-shadow:var(--shadow-1)}
.card,.kpi,.mcard{animation:dIn .5s cubic-bezier(.2,.75,.3,1) backwards}
.card:hover,.kpi:hover,.mcard:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.kpi{padding:16px 18px;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;inset-block-start:-42%;inset-inline-end:-12%;width:92px;height:92px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.kpi .big{font-size:26px;font-weight:800;letter-spacing:-.5px}
.kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.1s}.kpi:nth-child(4){animation-delay:.15s}
.card h3{font-size:15px;font-weight:800}
@keyframes dIn{from{opacity:0;transform:translateY(14px)}}
.bar{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));transform-origin:bottom;animation:barGrow .8s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes barGrow{from{transform:scaleY(0)}}
.rank{font-weight:800}
table{font-size:13.5px}tbody tr{transition:background .15s}tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}td{padding:11px 4px}th{padding:8px 4px}
.btn-primary{border-radius:12px;padding:13px;font-weight:700;font-size:14.5px;box-shadow:0 10px 24px -12px var(--accent);transition:.18s}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.mini{border-radius:9px;font-weight:600;transition:.15s}.mini:hover{border-color:var(--accent);color:var(--accent)}
.filters button{transition:.18s}.filters button.active{box-shadow:0 5px 14px -6px var(--accent)}
.pcard{border-radius:13px;transition:.18s}.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.addbtn{transition:.18s}.addbtn:hover{filter:brightness(1.08);transform:scale(1.06)}
.toggle .knob{transition:inset-inline-start .22s cubic-bezier(.4,1.4,.5,1),background .2s}
.login-wrap{background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--bg)}
.login-card{padding:32px 28px;box-shadow:var(--shadow-2);animation:dIn .55s cubic-bezier(.2,.9,.3,1) backwards}
.login-title{font-size:22px;font-weight:800}
.inp{height:46px;border-radius:12px;border-width:1.5px;transition:.18s}
.inp:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}

/* new-order alarm banner */
.newbar{position:fixed;inset-block-start:16px;inset-inline:16px;max-width:480px;margin-inline:auto;z-index:200;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));color:#fff;
  border-radius:18px;padding:15px 17px;box-shadow:0 24px 60px -14px rgba(0,0,0,.55);
  transform:translateY(-170%);opacity:0;transition:transform .45s cubic-bezier(.2,1.25,.4,1),opacity .3s}
.newbar.show{transform:translateY(0);opacity:1}
.newbar.show::before{content:'';position:absolute;inset:-3px;border-radius:21px;background:var(--accent);opacity:.4;z-index:-1;animation:barPulse 1.2s ease-in-out infinite}
@keyframes barPulse{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.45;transform:scale(1.015)}}
.newbar__head{display:flex;align-items:center;gap:11px;font-size:1.08rem;font-weight:800}
.newbar__bell{font-size:1.55rem;display:inline-block;transform-origin:50% 12%;animation:bell .9s ease-in-out infinite}
@keyframes bell{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-15deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
.newbar__c{display:block;font-size:.78rem;opacity:.88;font-weight:500}
.newbar__head--online{color:#0b7a3b}
.obadge{display:inline-block;font-size:var(--op-tag);font-weight:800;padding:2px 8px;border-radius:20px;margin-inline-start:6px;vertical-align:middle;white-space:nowrap}
.obadge--online{background:#e6f4ea;color:#0b7a3b;border:1px solid #b7e3c7}
.newbar__list{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.newbar__o{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.15);border-radius:11px;padding:9px 11px}
.newbar__no{font-weight:800}.newbar__meta{font-size:.76rem;opacity:.9}
.newbar__ack{border:0;background:#fff;color:var(--accent);font-weight:800;font-size:.82rem;padding:8px 13px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:.15s}
.newbar__ack:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
/* a website order carries a note where other orders carry the «استلمت الطلب» button: the judgement
   belongs to the floor now, so the till is told who acts rather than given a control that 409s */
.newbar__note{font-size:.78rem;font-weight:700;color:#fff;opacity:.82;white-space:nowrap;padding:8px 4px;text-align:center}
@media(max-width:560px){.newbar__o{flex-wrap:wrap}}

/* ---- menu product photos: POS grid, cart, order receipt, new-order alert ---- */
.pcard{display:flex;flex-direction:column}
.pthumb{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px;margin-bottom:8px;background:var(--surface)}
.pthumb--none{width:100%;aspect-ratio:16/10;border-radius:9px;margin-bottom:8px;background:linear-gradient(135deg,var(--surface),var(--border))}
.pname{flex:1}
.citem__thumb{width:42px;height:42px;object-fit:cover;border-radius:9px;flex:0 0 auto}
.citem__thumb--none{width:42px;height:42px;border-radius:9px;flex:0 0 auto;background:var(--border)}
.receipt-item{align-items:center;gap:9px}
.receipt-thumb{width:44px;height:44px;object-fit:cover;border-radius:9px;flex:0 0 auto}
.receipt-thumb--none{display:none}
.receipt-item .grow{flex:1;text-align:start}
.newbar__thumbs{display:flex;gap:4px;flex:0 0 auto}
.newbar__th{width:38px;height:38px;object-fit:cover;border-radius:8px;border:2px solid rgba(255,255,255,.55);box-shadow:0 2px 6px rgba(0,0,0,.22)}
.newbar__th--none{display:none}
.newbar__o{cursor:pointer;transition:background .15s}
.newbar__o:hover{background:rgba(255,255,255,.26)}

/* ---- order aging / delay indicator ---- */
.age{font-size:var(--op-status);font-weight:700;white-space:nowrap}
.age--ok{color:var(--muted)}
.age--warn{color:#eaa41d}
.age--late{color:var(--danger);font-weight:800}
tr.row-late{background:rgba(220,38,38,.07)}
tr.row-late td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.newbar .age{color:#fff;font-weight:700;opacity:.95}

/* ---- estimated prep-time (ETA) chip ---- */
.etachip{display:inline-block;font-size:var(--op-tag);font-weight:700;color:var(--accent);margin-top:2px}
.eta--over{color:var(--danger)}
.etaedit,.etaedit-ic{background:none;border:0;cursor:pointer;color:var(--muted);font-size:12px;margin-inline-start:3px;padding:0}
.etaedit{color:var(--accent);font-weight:700}
.etaedit-ic:hover{color:var(--accent)}

/* ---- reports header ---- */
.rephead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.rephead h2{font-size:18px;font-weight:800}
.repbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.repmodes{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.repmodes button{border:0;background:none;padding:7px 16px;cursor:pointer;color:var(--muted);font:inherit;font-weight:700}
.repmodes button.active{background:var(--accent);color:var(--accent-fg)}
.repdate{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.repdate input{border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:var(--surface);color:var(--text);font:inherit}
/* ===== Kitchen Display System (KDS) ===== */
.kds{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.kticket{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;border-top:5px solid var(--muted)}
.kticket.kt--new{border-top-color:var(--accent)}
.kticket.kt--prep{border-top-color:#eaa41d}
.kticket.kt--warn{border-top-color:#eaa41d;box-shadow:0 0 0 1px rgba(234,164,29,.5)}
.kticket.kt--late{border-top-color:var(--danger);box-shadow:0 0 0 2px rgba(220,38,38,.4);animation:ktpulse 1.6s ease-in-out infinite}
@keyframes ktpulse{0%,100%{box-shadow:0 0 0 2px rgba(220,38,38,.4)}50%{box-shadow:0 0 0 6px rgba(220,38,38,.12)}}
.khead{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border)}
.kno{font-weight:700;font-size:16px}
.ktag{font-size:11px;background:var(--accent-soft);color:var(--accent);padding:2px 9px;border-radius:20px}
.kage{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--muted)}
.kticket.kt--warn .kage{color:#eaa41d}.kticket.kt--late .kage{color:var(--danger)}
.kbody{padding:10px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.kitem{display:flex;align-items:center;gap:9px;font-size:14.5px;cursor:pointer;padding:3px 0;user-select:none}
.kitem .kq{font-weight:700;color:var(--accent);min-width:30px}
.kitem .kn{font-weight:500}
.kitem.checked{opacity:.4;text-decoration:line-through}
.kfoot{padding:11px 14px;border-top:1px solid var(--border)}
.kbtn{width:100%;border:0;border-radius:10px;font:inherit;font-weight:700;font-size:14.5px;padding:12px;cursor:pointer}
.kbtn.kstart{background:var(--accent);color:var(--accent-fg)}
.kbtn.kready{background:var(--success);color:#fff}
.kbtn:active{transform:scale(.98)}
.kbtn:disabled{opacity:.6}
.kds-empty{text-align:center;color:var(--muted);padding:70px 20px;font-size:16px}
.kds-empty__ic{display:block;font-size:44px;margin-bottom:12px}
@media(max-width:640px){.kds{grid-template-columns:1fr 1fr}}
/* ===== advanced inventory + purchases + food cost ===== */
.invbar{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:13px;color:var(--muted)}
.invbar b{color:var(--text);font-size:14px}
.invact{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.mini{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:11.5px;padding:4px 9px;border-radius:7px;cursor:pointer}
.mini--warn{color:var(--danger);border-color:rgba(220,38,38,.3)}
.prowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.btn-sm{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;font-size:13px;padding:9px 16px;border-radius:10px;cursor:pointer}
.btn-sm--accent{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.prow2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.prow2{grid-template-columns:1fr}}
/* ===== POS product variants (sizes) ===== */
.pcard{position:relative}
.pcard__v{position:absolute;top:6px;inset-inline-start:6px;font-size:10px;font-weight:700;background:var(--accent);color:var(--accent-fg);padding:2px 8px;border-radius:20px}
.vpop{position:fixed;inset:0;z-index:210;display:none}
.vpop.show{display:block}
.vpop__scrim{position:absolute;inset:0;background:rgba(15,15,15,.5)}
.vpop__box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(360px,92vw);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.vpop__h{font-weight:700;font-size:15px;margin-bottom:12px}
.vpop__opt{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;font-size:14px;padding:12px 14px;border-radius:11px;cursor:pointer;margin-bottom:8px}
.vpop__opt:hover{border-color:var(--accent)}
.vpop__p{color:var(--accent);font-weight:700}
.vlist{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.vchip{font-size:11px;background:var(--accent-soft);color:var(--accent);padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:3px}
.vchip__x{border:none;background:transparent;color:var(--danger);font-weight:800;font-size:13px;cursor:pointer;padding:0;margin-inline-start:2px;line-height:1}
/* POS customization sheet: size (single) + modifier groups honouring min/max, live price */
.vpop__box.cz{padding:0;width:min(430px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.cz .vpop__h{padding:16px 16px 12px;border-bottom:1px solid var(--border);margin:0}
.cz__body{overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:15px}
.cz__g{display:flex;flex-direction:column;gap:8px}
.cz__gh{font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px}
.cz__req{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:2px 8px;border-radius:20px}
.cz__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.cz__o{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;font-size:13px;padding:10px 12px;border-radius:11px;cursor:pointer;transition:border-color .12s,background .12s}
.cz__o:hover{border-color:var(--accent)}
.cz__o.on{border-color:var(--accent);background:var(--accent-soft)}
.cz__o .cz__p{color:var(--accent);font-weight:700;font-size:12px;white-space:nowrap}
/* THE WHOLE ROW IS THE CONTROL, and the mark says so. Children take no pointer events so the tap target is
   always the row itself — name, price and the space between them included — and the selected state is a
   drawn radio/checkbox rather than a border colour a bright kitchen screen can wash out. */
.cz__o > *{pointer-events:none}
.cz__o .cz__n{flex:1 1 auto;text-align:start}
.cz__o .cz__m{flex:0 0 auto;width:20px;height:20px;border-radius:99px;border:2px solid var(--border);background:var(--surface);position:relative}
.cz__o[role=checkbox] .cz__m{border-radius:6px}
.cz__o.on .cz__m{border-color:var(--accent);background:var(--accent)}
.cz__o.on .cz__m::after{content:'';position:absolute;inset:4px;border-radius:99px;background:var(--accent-fg,#fff)}
.cz__o[role=checkbox].on .cz__m::after{inset:3px;border-radius:2px}
.cz__o:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cz__g--short .cz__gh{color:var(--danger)}
.cz__add:disabled{opacity:.45;cursor:not-allowed}
.cz__add{margin:0;border-radius:0;padding:15px;font-size:15px}
.cz__add:disabled{opacity:.5;cursor:not-allowed}
/* modifiers admin screen */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.modcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.modcard__h{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.modcard__h .b{font-size:15px}
.modcard__meta{font-size:11.5px;color:var(--muted)}

/* ===================== وضوح وتكبير · Clarity & enlarge pass (bigger text, buttons ≥44px, more breathing room) ===================== */
body{font-size:15px;line-height:1.55}
.small{font-size:13px}
.appwrap{grid-template-columns:252px 1fr}
.sidebar{padding:18px 14px;gap:4px}
.brandmark img{max-height:90px}
.nav a{font-size:15.5px;padding:13px 15px;border-radius:11px;line-height:1.2}
.side-bottom{padding-top:14px;gap:10px}
.avatar{width:38px;height:38px;font-size:15px}
.main{padding:26px 30px}
.topbar{margin-bottom:22px}
.topbar h1{font-size:25px}
.switch button{font-size:14.5px;padding:10px 17px;border-radius:9px}


.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{padding:19px 22px;border-radius:16px}
.kpi .big{font-size:31px;margin-top:8px}
.kpi .small{font-size:14px}
.card{padding:20px 22px;border-radius:16px}
.card h3{font-size:17.5px;margin-bottom:8px}
table{font-size:15px}
th{font-size:13px;padding:12px 0}
td{padding:14px 0}
.filters{gap:8px;margin-bottom:16px}
.filters button{font-size:14.5px;padding:10px 18px}
.mini{font-size:13.5px;padding:10px 15px;border-radius:9px;min-height:40px}
.mini svg,.mini .ico{vertical-align:middle}
.btn-primary{font-size:15.5px;padding:14px}
.btn-sm{font-size:14.5px;padding:11px 17px;border-radius:10px;min-height:42px}
.inp{height:48px;font-size:15px;border-radius:11px}
/* Menu manager — bigger, clearer (تكبير القوائم) */
.menugrid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.mcard{padding:17px 18px;border-radius:16px}
.mname{font-size:16.5px;font-weight:600}
.mcard .small{font-size:13px}
.price{font-size:18px}
.mactions{gap:8px;margin-top:13px;flex-wrap:wrap}
.toggle{width:48px;height:27px}
.toggle .knob{width:23px;height:23px}
.toggle.on .knob{inset-inline-start:23px}
.addcard{min-height:170px;font-size:15px;border-radius:16px}
/* POS — bigger product cards + add buttons */
.pos{grid-template-columns:1fr 344px}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.pcard{padding:12px;border-radius:14px}
.pname{font-size:15.5px;font-weight:500;margin-top:7px}
.pprice{font-size:15.5px}
.addbtn{width:42px;height:42px;font-size:23px;border-radius:12px}
.cart{padding:18px 20px}
.otypes button{font-size:14.5px;padding:10px 8px}
.citem{font-size:14px}
.empty,.cartempty{font-size:15px;padding:22px}
h2,h3{line-height:1.3}
/* Recipe (BOM) editor modal */
.vpop__box.rcp{width:min(640px,95vw);max-height:88vh;display:flex;flex-direction:column;padding:0}
.rcp .vpop__h{padding:16px 18px;border-bottom:1px solid var(--border);margin:0;font-size:16px}
.rcp__body{overflow-y:auto;padding:14px 18px}
.rcp__t{width:100%;font-size:14px;margin:0}
.rcp__t th{font-size:12.5px;padding:9px 6px;color:var(--muted)}
.rcp__t td{padding:11px 6px;border-top:1px solid var(--border)}
.rcp-q,#rcpqty,#rcpsel{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;padding:9px 11px;border-radius:9px}
.rcp-q:focus,#rcpqty:focus,#rcpsel:focus{outline:none;border-color:var(--accent)}
.rcp__add{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
#rcpsel{flex:1;min-width:170px}#rcpqty{width:110px}
.rcp__add input{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;padding:9px 11px;border-radius:9px}
.rcp__add input:focus{outline:none;border-color:var(--accent)}
#szName{flex:1;min-width:150px}#szPrice{width:120px}
.rcp__foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:15px 18px;border-top:1px solid var(--border);font-size:14px;background:var(--bg)}
.rcp__foot b{font-size:15.5px}
.rcp__foot .btn-primary{margin-inline-start:auto}
/* professional recipe builder */
.vpop--pay .vpop__box.rcp{position:relative;top:auto;left:auto;transform:none;margin:auto}
.vpop__box.rcp--pro{width:min(760px,96vw)}
.rcp__yield{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;background:var(--accent-soft);border-radius:12px;padding:10px 14px}
.rcp__yield input{width:100px}
.rcp__add #rcpnew{white-space:nowrap}
.rcp__foot--pro{gap:8px 22px}
.rcp__sum{display:flex;flex-direction:column;gap:1px}
.rcp__sum span{font-size:11px;color:var(--muted)}
.rcp__sum b{font-size:15px}
.rcp__sum--hero b{font-size:21px;color:var(--accent);font-weight:900;line-height:1}
.rcp__sum--hero span{color:var(--accent);font-weight:700}
.rcp__foot--pro .btn-primary{margin-inline-start:auto;max-width:80px;align-self:center}
@media(max-width:560px){.rcp__foot--pro{gap:8px 16px}}
/* Transfer modal labels */
.trlbl{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500;margin-bottom:13px}
.trlbl select,.trlbl input{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14.5px;padding:11px 12px;border-radius:10px;width:100%;box-sizing:border-box}
.trlbl select:focus,.trlbl input:focus{outline:none;border-color:var(--accent)}
/* printer / device setup */
.prn-env{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 13px;margin-bottom:15px}
.prn-env svg{flex:none;opacity:.75}
.prn-env--ok{color:#2f7d4f;border-color:#bfe3cc;background:#f1faf4}
.prn-lbl{font-size:13.5px;font-weight:600;margin-bottom:9px}
.prn-widths{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:15px}
.prn-w{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;border:1.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:13px;padding:15px 10px 13px;cursor:pointer;font:inherit;transition:.16s var(--ease)}
.prn-w:hover{border-color:var(--accent);transform:translateY(-1px)}
.prn-w.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.prn-w b{font-size:15px}
.prn-w__bar{height:9px;border-radius:5px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#fff));margin-bottom:3px}
.prn-w__bar--58{width:38px}.prn-w__bar--80{width:58px}
.prn-info{border:1px solid var(--border);border-radius:11px;padding:4px 12px;margin-bottom:15px}
.prn-info__r{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--border)}
.prn-info__r:last-child{border-bottom:0}
.prn-info__r span{color:var(--muted)}.prn-info__r b{font-weight:600}
.prn-toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px 13px;margin-bottom:13px;cursor:pointer}
.prn-toggle input{width:18px;height:18px;accent-color:var(--accent);flex:none;cursor:pointer}
.prn-btns{display:flex;gap:10px;margin-top:2px}
.prn-btns .btn-sm{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}
/* language toggle */
.langbtn{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:9px;cursor:pointer;min-width:44px;min-height:40px}
.langbtn:hover{border-color:var(--accent);color:var(--accent)}
/* order status badge */
.stbadge{display:inline-block;font-size:var(--op-status);font-weight:800;padding:5px 13px;border-radius:20px;white-space:nowrap;line-height:1.5}
/* collapsible sidebar */
.appwrap{transition:grid-template-columns .28s ease}
.sidebar{overflow:hidden;transition:opacity .18s ease,padding .28s ease}
.appwrap.navhidden{grid-template-columns:0 1fr}
.appwrap.navhidden .sidebar{opacity:0;padding-inline:0;pointer-events:none}
/* ═══ وضع المطبخ — A PRESENTATION MODE, NOT A SECOND APP (owner §25/§51) ══════════════════════════
   A wall-mounted board in a kitchen is not being browsed. Nobody standing at the pass needs the brand
   switcher, the account menu or the page's own name — they need tickets, and every pixel those controls
   occupy is a ticket that fell below the fold.
   So this reuses the shell that already exists: the sidebar collapse this app has always had, plus a
   body class that folds the administrative chrome and tightens the page's padding. NOTHING operational
   is hidden — the counters, the filters, the tickets and their actions all stay, at full touch size.
   Building a separate kiosk shell would mean a second place for every future fix to be forgotten in. */
body.kdsmode .topbar{display:none}
body.kdsmode .main{padding:10px 12px}
body.kdsmode .kd-top{margin-bottom:6px}
body.kdsmode .kd-sub{display:none}
@media(min-width:901px){body.kdsmode .main{padding:12px 16px}}
.topbar__l{display:flex;align-items:center;gap:12px;min-width:0}
.navtoggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:11px;cursor:pointer;flex:none;transition:.15s}
.navtoggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* ===== Premium cashier POS checkout modal — clear number hierarchy, operational ===== */
.vpop--pay.show{display:flex;align-items:center;justify-content:center;padding:14px;overflow-y:auto}   /* robust centering — never overflows tablet/mobile */
.vpop--pay .vpop__box.paysheet{position:relative;top:auto;left:auto;transform:none;margin:auto}
.vpop__box.paysheet{width:min(460px,95vw);max-height:94vh;overflow-y:auto;padding:0;border-radius:20px;box-shadow:0 26px 70px rgba(45,28,10,.32)}
.paysheet .licon{display:block}
.paysheet [class*="-v"],.pay__in,.pay__total-v,.pay__cardinfo-a{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.pay__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 2px}
.pay__title{font-size:18px;font-weight:800;line-height:1.3}
.pay__sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.pay__x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.pay__x:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
/* 1 · amount due — big reference */
.pay__total{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 22px 16px;padding:16px 20px;background:var(--accent-soft);border-radius:16px}
.pay__total-l{font-size:14px;font-weight:600}
.pay__total-v{font-size:34px;font-weight:900;color:var(--accent);line-height:1}
.cur{font-size:.5em;font-weight:700;opacity:.85}
/* 2 · method toggle */
.pay__methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 22px 16px}
.pay__methods--3{grid-template-columns:1fr 1fr 1fr}
.pay__methods--3 .paycard{flex-direction:column;gap:6px;padding:13px 6px;font-size:14px}
.paycard{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 12px;border:2px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:15.5px;font-weight:700;border-radius:14px;cursor:pointer;transition:border-color .16s,background .16s}
.paycard:hover{border-color:var(--accent)}
.paycard.on{border-color:var(--accent);background:var(--accent-soft)}
.paycard__i{color:var(--muted);transition:color .16s}
.paycard.on .paycard__i{color:var(--accent)}
.paycard__chk{position:absolute;top:8px;inset-inline-start:8px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:none;align-items:center;justify-content:center}
.paycard.on .paycard__chk{display:flex}
/* 3 · amount received */
.pay__cash{padding:0 22px 4px}
.pay__lbl{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.pay__inwrap{position:relative;display:flex;align-items:center}
.pay__in{width:100%;box-sizing:border-box;border:2px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:30px;font-weight:800;padding:14px 62px 14px 18px;border-radius:14px}
.pay__in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pay__cur{position:absolute;inset-inline-end:18px;font-size:15px;font-weight:700;color:var(--muted);pointer-events:none}
.pay__quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}
.pay__q{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600;padding:11px 6px;border-radius:11px;cursor:pointer;transition:.15s;white-space:nowrap}
.pay__q:hover{border-color:var(--accent);color:var(--accent)}
.pay__q.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
/* 4 · the result — change is the hero */
.pay__state{margin-top:14px;border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.pay__state--hint{background:var(--bg);color:var(--muted);font-size:13.5px;font-weight:500;padding:15px}
.pay__state--ok{background:#e3f5e9;color:#0e7a38}
.pay__state--done{background:#e3f5e9;color:#0e7a38;flex-direction:row;justify-content:center;gap:8px;font-size:15.5px;font-weight:800;padding:16px}
.pay__state--warn{background:#fdeaea;color:#b5271f}
.pay__state-l{font-size:13px;font-weight:600;opacity:.9}
.pay__state-v{font-size:37px;font-weight:900;line-height:1}
.pay__state--warn .pay__state-v{font-size:30px}
/* card payment — operational: amount to collect · step trail · live status · trust (theme-safe via tokens) */
.pay__cardwrap{padding:2px 22px 4px;display:flex;flex-direction:column;gap:14px}
.pay__cardbox{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:15px 18px}   /* distinct from the golden method card */
.pay__cardbox-h{display:flex;align-items:center;gap:9px}
.pay__cardbox-i{display:inline-flex;color:var(--accent)}
.pay__cardbox-t{font-size:13.5px;font-weight:700;color:var(--text)}
.pay__cardbox-a{font-size:28px;font-weight:900;color:var(--accent);line-height:1;margin:9px 0 6px}   /* smaller than the 34px order total → clear hierarchy */
.pay__cardbox-hint{font-size:12px;color:var(--muted);line-height:1.55}
/* step trail: اختيار الطريقة › تحصيل المبلغ › تأكيد العملية */
.pay__steps{display:flex;align-items:center;gap:6px}
.pay__step{display:flex;align-items:center;gap:7px;flex:none}
.pay__step-d{width:22px;height:22px;flex:none;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;transition:.18s}
.pay__step-l{font-size:11.5px;font-weight:600;color:var(--muted);transition:.18s;white-space:nowrap}
.pay__step.is-active .pay__step-d{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pay__step.is-active .pay__step-l{color:var(--text)}
.pay__step.is-done .pay__step-d{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}
.pay__step-sep{flex:1;height:1.5px;background:var(--border);border-radius:2px;min-width:6px}
/* live status — subtle, one glance */
.pay__cardstate{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;font-size:14px;font-weight:700;transition:.18s}
.pay__cardstate-d{width:9px;height:9px;flex:none;border-radius:50%;background:currentColor}
.pay__cardstate--ready{background:var(--bg);color:var(--muted)}
.pay__cardstate--ready .pay__cardstate-d{background:var(--accent)}
.pay__cardstate--proc{background:#eef3fb;color:#3a6ea8}
.pay__cardstate--proc .pay__cardstate-d{animation:paypulse 1s ease-in-out infinite}
.pay__cardstate--fail{background:#fdeaea;color:#b5271f}
@keyframes paypulse{0%,100%{opacity:.3}50%{opacity:1}}
/* trust line */
.pay__trust{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11.5px;font-weight:500}
.pay__trust .licon{flex:none;opacity:.7}
.pay__ok-s{font-size:13px;color:var(--muted);margin-top:5px;font-weight:600}
/* 4.5 · creator ≠ payer handoff — collapsed by default, opt-in per order */
.pay__handoff{padding:2px 22px 0}
.pay__handoff-toggle{display:flex;align-items:center;gap:7px;background:none;border:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:8px 2px}
.pay__handoff-toggle:hover{color:var(--accent)}
.pay__handoff-toggle .licon{flex:none}
.pay__handoff-fields{display:flex;flex-direction:column;gap:8px;margin:2px 0 12px}
.pay__handoff-in{border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;padding:11px 13px;border-radius:11px;box-sizing:border-box;width:100%}
.pay__handoff-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* 5 · actions — confirmability */
.pay__foot{display:flex;flex-direction:row-reverse;gap:10px;align-items:center;padding:18px 22px 22px}
.pay__confirm{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:none;padding:17px;font-size:17px;font-weight:800;border-radius:14px}
.pay__confirm:disabled{opacity:.4;cursor:not-allowed}
.pay__confirm.is-loading{opacity:.7;cursor:wait}
.pay__cancel{flex:none;padding:15px 20px;min-height:auto;font-size:15px;border-radius:12px}
.pay__ok{text-align:center;padding:26px 22px 2px}
.pay__ok-i{display:inline-flex;color:#1a9e4b}
.pay__ok-t{font-size:20px;font-weight:800;margin-top:8px}
.pay__recap{margin:16px 22px;background:var(--bg);border-radius:16px;padding:2px 16px}
.pay__recap-r{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--muted)}
.pay__recap-r:last-child{border-bottom:0}
.pay__recap-r .b{color:var(--text);font-weight:700}
.pay__recap-r--hl{font-size:17px}
.pay__recap-r--hl,.pay__recap-r--hl span{color:var(--accent);font-weight:900}
@media(max-width:430px){.pay__quick{grid-template-columns:1fr 1fr}.pay__foot{flex-direction:column-reverse}.pay__cancel,.pay__confirm{width:100%}.pay__steps{gap:4px}.pay__step{gap:5px}.pay__step-l{font-size:10.5px}.pay__step-d{width:20px;height:20px}}

/* ===== Lite Meal subscription hub (branch pickup only) — uses brand tokens (light = green) ===== */
.lmhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lmhead__badge{background:var(--accent);color:var(--accent-fg);font-weight:800;font-size:12.5px;padding:5px 13px;border-radius:999px}
.lmtabs{margin-bottom:16px}
.lmbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.lmbar--wrap{flex-wrap:wrap;justify-content:space-between}
.lmsearch{flex:1;min-width:180px;max-width:340px}
.lmfilter{flex-wrap:wrap}
.lmnote{font-size:12px;color:var(--muted);background:var(--bg);border-radius:10px;padding:9px 12px;margin-top:6px}
/* daily-orders page */
.lmdate{display:inline-flex;gap:6px}
.lmdate button{border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:700;padding:9px 16px;border-radius:10px;cursor:pointer;transition:.15s}
.lmdate button:hover{border-color:var(--accent)}
.lmdate button.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.lmfilters{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.lmfilters .inp{width:auto;min-width:120px;flex:0 1 auto;padding:8px 10px;font-size:13px}
.lmfilters .lmsearch{min-width:170px;flex:1 1 170px}
.lmcounts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lmcount{font-size:12.5px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 12px}
.lmcount b{color:var(--text)}
.lmcount--tot{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.lmcount--tot b{color:var(--accent)}
.lmacts{display:flex;flex-wrap:wrap;gap:5px}
.lmacts .mini{font-size:11.5px;padding:5px 9px}
.lmacts .mini.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
/* ===== kitchen screen (operational KDS) — uses brand tokens (light = green) ===== */
.khead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.khead__l{display:flex;align-items:center;gap:12px;color:var(--accent)}
.khead__t{font-size:20px;font-weight:800;color:var(--text)}
.khead__act{display:flex;gap:8px;flex-wrap:wrap}
.khead__act .btn-sm{display:inline-flex;align-items:center;gap:6px}
.kstats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}
.kstat{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 14px}
.kstat__ic{width:40px;height:40px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center}
.kstat__n{font-size:22px;font-weight:900;line-height:1}
.kstat__l{font-size:11.5px;color:var(--muted);margin-top:3px}
.kportions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kportion{display:flex;align-items:center;gap:11px;background:var(--accent-soft);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.kportion__ic{width:36px;height:36px;flex:none;border-radius:10px;background:var(--surface);color:var(--accent);display:flex;align-items:center;justify-content:center}
.kportion__n{font-size:17px;font-weight:800}
.kfilterbar{gap:8px}
.kfilterbar .inp{width:auto;min-width:120px;flex:0 1 auto;padding:9px 11px;font-size:13px}
.kfilterbar .lmsearch{min-width:200px;flex:1 1 200px;max-width:none}
.kboard{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kcol{background:var(--bg);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.kcol__h{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--border);font-weight:800;color:var(--accent)}
.kcol__h>span:first-of-type{color:var(--text)}
.kcol__c{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--muted);background:var(--accent-soft);padding:3px 10px;border-radius:999px}
.kcol__body{padding:10px;display:flex;flex-direction:column;gap:10px;max-height:72vh;overflow-y:auto}
.kempty{text-align:center;color:var(--muted);font-size:13px;padding:24px 0}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:11px 12px}
.kcard__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.kcard__no{font-weight:800;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.kcard__cust{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:14px}
.kcard__cust .muted{display:inline-flex;align-items:center;gap:4px;font-weight:500}
.kcard__meal{font-size:14px;margin-top:6px;display:flex;align-items:center;gap:6px}
.kcard__menu{margin-top:3px}
.kcard__alert{display:flex;align-items:center;gap:5px;color:#b02a2a;font-weight:700;font-size:12.5px;background:#fdeaea;border-radius:8px;padding:5px 9px;margin-top:7px}
.kcard__no{font-size:12.5px;color:var(--muted);margin-top:5px}
.kcard__acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.kbtn{border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;padding:6px 9px;border-radius:8px;cursor:pointer;transition:.14s}
.kbtn:hover{border-color:var(--accent);color:var(--accent)}
.kbtn--done{background:#e3f5e9;color:#0e7a38;border-color:#bfe6cd}
.kbtn--next{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);width:100%;font-size:13px;padding:9px}
/* §4 the stage trail: what is already done, and what is still ahead — both as TEXT, neither clickable.
   Only the single next transition is a button, so a stage cannot be skipped from the board. */
.ktrail{display:flex;flex-wrap:wrap;gap:5px;width:100%;margin-bottom:7px}
.ktrail__d{display:inline-flex;align-items:center;gap:3px;background:#e3f5e9;color:#0e7a38;border:1px solid #bfe6cd;border-radius:7px;padding:3px 7px;font-size:11px;font-weight:700}
.ktrail__u{display:inline-flex;align-items:center;background:transparent;color:var(--muted);border:1px dashed var(--border);border-radius:7px;padding:3px 7px;font-size:11px;font-weight:600;opacity:.7}
/* ONE date on screen: the canonical YYYY-MM-DD is what you read, the native picker is what you click.
   The input keeps its full calendar behaviour — only its locale-formatted TEXT is suppressed, so the
   screen never shows 2026-08-10 and 08/10/2026 at the same time. */
.kfdate{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:7px 11px;cursor:pointer}
.kfdate:hover{border-color:var(--accent)}
.kfdate__v{font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;unicode-bidi:isolate;pointer-events:none}
.kfdate__i{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer}
.kfdate::after{content:'▾';font-size:11px;color:var(--muted);pointer-events:none}
.kcard__print{margin-top:9px;width:100%;border:1px dashed var(--border);background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;padding:7px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.kcard__print:hover{border-color:var(--accent);color:var(--accent)}
/* a CLOSED meal (delivered / delivered in advance / cancelled): still on the board so the day's totals
   stay honest, but visually finished and carrying no work — it sinks to the bottom of its column. */
.kcard--done{background:var(--accent-soft,#f4f6f4);opacity:.72}
.kcard--done .kcard__acts{margin-top:8px}
.kcard--done .kcard__print{margin-top:0}
/* the same "closed" treatment inside the subscription-orders table */
.lmdone{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.lmdone__t{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:12.5px;color:#0c6b32}
.lmdone .mini{margin-top:4px}
@media(max-width:900px){.kstats{grid-template-columns:repeat(3,1fr)}.kboard{grid-template-columns:1fr}.kportions{grid-template-columns:1fr}}
@media(max-width:560px){.kstats{grid-template-columns:1fr 1fr}}
.lmback{margin-bottom:12px}
.lmprofile__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lmprofile__act{display:flex;gap:8px;flex-wrap:wrap}
.lmname{font-size:20px;font-weight:800}
.lmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:16px}
.lminfo{display:flex;flex-direction:column;gap:3px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.lminfo span:last-child{font-weight:600}
.lmsoon{background:var(--accent-soft);border:1px dashed var(--accent);text-align:center}
/* subscription create modal (flex-centered via .vpop--pay) */
.vpop__box.lmsub{width:min(540px,96vw);max-height:94vh;overflow:hidden;display:flex;flex-direction:column;padding:0}
.lmsub .vpop__h{padding:18px 20px 4px}
.lmsub__body{padding:4px 20px 10px;overflow-y:auto}
.lmsub__foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lmsub__foot #ls_pay{margin-inline-start:auto;flex:0 1 auto;max-width:230px;min-width:150px}
.lmseg-lbl{font-size:12.5px;font-weight:600;color:var(--muted);margin:12px 0 6px}
.lmseg{display:flex;flex-wrap:wrap;gap:8px}
.lmseg button{flex:1 1 0;min-width:84px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:700;padding:11px 6px;border-radius:12px;cursor:pointer;transition:.15s}
.lmseg button:hover{border-color:var(--accent)}
.lmseg button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.lmrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lmsummary{margin-top:14px;background:var(--accent-soft);border-radius:14px;padding:6px 14px}
.lmsummary__row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;border-bottom:1px solid rgba(128,128,128,.18)}
.lmsummary__row:last-child{border-bottom:0}
.lmsummary__row span{color:var(--muted)}
.lmsummary__row b{font-weight:700;color:var(--text)}
.lmsummary__h{font-weight:800;font-size:14.5px;padding:8px 0 4px;color:var(--text)}
.lmsummary__before b{color:var(--muted);font-weight:600;text-decoration:line-through}
.lmsummary__tot span,.lmsummary__tot b{font-size:18px;font-weight:900;color:var(--accent)}
.lmsummary__err{margin-top:8px;text-align:center;color:var(--danger);font-weight:700;font-size:13.5px;background:#fdeaea;border-radius:10px;padding:10px}
.lmrow--off{opacity:.5}
.lmrow--off .b{font-weight:600}
.lmerr{color:var(--danger);font-size:13px;min-height:16px;margin-top:8px;text-align:center}
@media(max-width:520px){.lmrow{grid-template-columns:1fr 1fr}}

/* ============================================================
   Visual polish pass — Linear/Stripe/Notion-inspired.
   Ordered buttons, tactile feedback, smooth entrances, styled
   dropdowns, refined tabs. Appended last = overrides above.
   ============================================================ */
:root{--ease:cubic-bezier(.3,.7,.4,1);--pop:cubic-bezier(.2,.85,.35,1)}
button{transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),transform .12s var(--ease)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
/* tactile press feedback on every button (the "settle" micro-interaction) */
.btn-primary:active,.btn-sm:active,.mini:active,.filters button:active,.switch button:active,.addbtn:active,.vpop__opt:active,.newbar__ack:active,.langbtn:active{transform:translateY(1px) scale(.985)}
.btn-primary:active{transform:translateY(0) scale(.99)}
.mini{transition:.16s var(--ease)}.mini:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface));box-shadow:0 4px 11px -7px var(--accent)}
.btn-sm{transition:.16s var(--ease)}.btn-sm:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.btn-sm--accent:hover{filter:brightness(1.05)}
.switch button:hover:not(.active){color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.langbtn{transition:.16s var(--ease)}.langbtn:hover{border-color:var(--accent);color:var(--accent)}
/* dropdowns styled intentionally (custom chevron, not a bare OS control) */
select.inp{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a756c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-inline-end:36px}
select.inp:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
/* modals + popups now glide in (fade scrim + scale-up box) instead of appearing from nothing */
@keyframes fadeIn{from{opacity:0}}
@keyframes vpopIn{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(10px)}}
.vpop.show .vpop__scrim,.modal-bg{animation:fadeIn .2s ease}
.vpop.show .vpop__box{animation:vpopIn .24s var(--pop)}
.vpop--pay.show .vpop__box,.vpop.show .vpop__box.paysheet,.vpop.show .vpop__box.lmsub,.modal{animation:popIn .26s var(--pop)}
.vpop__opt{transition:.16s var(--ease)}.vpop__opt:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface));transform:translateY(-1px);box-shadow:0 6px 16px -10px var(--accent)}
/* section tab-strip = clean underline tabs (Linear/Stripe style) */
#subtabs{border-bottom:1px solid var(--border);margin-bottom:16px}
#subtabs .filters{margin:0;gap:2px}
#subtabs .filters button{border:0;background:transparent;border-radius:8px 8px 0 0;color:var(--muted);padding:9px 15px;position:relative;font-weight:600;box-shadow:none;font-size:13.5px}
/* الصفّ الثاني — تبويبات المركز الحاليّ — يجب أن يقرأ أهدأ من صفّ المراكز فوقه، وإلا كان
   الشريطان قائمةً مسطّحة من عشرة أزرار متساوية لا تراتبًا. وكانت القاعدة المميِّزة ميتة مرّتين:
   تعيش داخل recInjectCSS() (‏<style id="recCSS">‎) الخاصّ بمحرّر الوصفات فلا تُحقن على هذه
   الشاشات أصلًا، ولو حُقنت لغلبها السطر أعلاه بالنوعيّة (0,2,1 مقابل 0,1,1). قِيس على شاشة
   «الموظفون» بالعرضين: زرّ الصفّ ١ وزرّ الصفّ ٢ متطابقان حرفًا — 13.5px، 9px 15px، opacity 1.
   فتُنقل هنا، بنوعيّة الغالب نفسها وبعده في الملفّ. */
#subtabs .filters--sub button{font-size:12.5px;padding:6px 12px;font-weight:500;opacity:.86}
#subtabs .filters--sub button.active{opacity:1}
#subtabs .filters button.active{background:transparent;color:var(--accent);box-shadow:none}
#subtabs .filters button.active::after{content:'';position:absolute;inset-inline:9px;bottom:-1px;height:2.5px;border-radius:2px 2px 0 0;background:var(--accent)}
#subtabs .filters button:hover:not(.active){color:var(--text);background:color-mix(in srgb,var(--accent) 6%,transparent)}
/* sidebar icons + smoother active */
.nav a .licon{flex:none;opacity:.82;transition:opacity .16s}
.nav a.active .licon,.nav a:hover .licon{opacity:1}
.nav a{transition:background .16s var(--ease),color .16s var(--ease)}
/* pill filters: lift on hover */
.filters button{transition:.16s var(--ease)}.filters button:hover:not(.active){border-color:color-mix(in srgb,var(--accent) 40%,var(--border));color:var(--text)}
/* inputs: consistent focus ring already exists; unify hover */
.inp:hover:not(:focus){border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
/* KPI/cards: a touch more depth on hover, gentler timing */
.card,.kpi,.mcard{transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
/* row-action buttons: compact icon cluster in one horizontal line — never stacked or clipped (pro data-table pattern) */
.rowacts{display:inline-flex;gap:6px;align-items:center}
.iconbtn{width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:9px;cursor:pointer;transition:.16s var(--ease);padding:0}
.iconbtn .licon{width:15px;height:15px}
.iconbtn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.iconbtn.danger:hover{border-color:var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,transparent)}
.iconbtn:active{transform:translateY(1px) scale(.95)}
/* any table's action column stays on one line (kills the cramped vertical stacking) */
td:last-child{white-space:nowrap}
th{white-space:nowrap;color:var(--muted);font-weight:600;font-size:12.5px}
/* ROOT FIX: let the main column shrink inside the grid so wide tables scroll INSIDE their card
   instead of pushing the whole page sideways (classic grid min-width:auto overflow). */
.main{min-width:0}
.appwrap{max-width:100%}
#content{min-width:0}
.card>div[style*="overflow-x"]{max-width:100%}
/* ===== SIDEBAR REDESIGN — stable three-part column: brand header · scrollable nav · fixed account dock =====
   ROOT-CAUSE FIX: the sidebar used to be ONE scroll region (height:100vh; overflow-y:auto), so a tall nav
   pushed the account area below the fold and logout needed scrolling. Now the sidebar is a 3-row grid pinned
   to the viewport (100dvh), and ONLY the nav scrolls — the account dock is always visible, never clipped. */
@media(min-width:901px){
  .sidebar{position:sticky;top:0;height:100dvh;align-self:start;overflow:hidden;
    display:grid;grid-template-rows:auto minmax(0,1fr) auto}
  .sidebar>.nav{overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin}
  .sidebar>.nav::-webkit-scrollbar{width:7px}
  .sidebar>.nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 30%,transparent);border-radius:7px}
}
.brandmark{padding:16px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--border);justify-content:center}
.brandmark img{max-height:58px;filter:none}
.nav{gap:3px;padding-top:6px}
/* clearer, button-like nav items (readable text, defined hover + active — Linear/Notion style) */
.nav a{color:var(--text);opacity:.66;font-weight:500;letter-spacing:-.1px}
.nav a:hover{opacity:1;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.nav a.active{opacity:1;font-weight:700;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.side-bottom{margin-top:auto}

/* ============================================================================================
   «لوحة الحساب السريعة» — ACCOUNT DOCK  (server-authoritative identity; no hardcoded values)
   Three quick controls only (card=الحساب · قفل الشاشة · المزيد); everything else lives in the menu.
   ============================================================================================ */
.acct{padding:12px 2px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px}
/* --- the identity card (whole card is the «الحساب» trigger) --- */
.acct__card{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  column-gap:11px;text-align:start;font:inherit;cursor:pointer;
  background:color-mix(in srgb,var(--accent) 4%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));border-radius:15px;
  padding:11px 12px;min-height:72px;
  transition:background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.acct__card:hover{background:color-mix(in srgb,var(--accent) 8%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 26%,var(--border))}
.acct__card:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.acct.open .acct__card{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:var(--shadow-1)}
/* avatar — subtle burgundy→brand-accent gradient, initials in white */
.acct__av{grid-row:1/span 2;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-size:16px;font-weight:800;color:#fff;letter-spacing:.5px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 60%,#2a0910),var(--accent));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 5px 13px -6px color-mix(in srgb,var(--accent) 62%,transparent)}
/* identity text column — clear four-level hierarchy */
.acct__id{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.28}
.acct__name{font-size:14.5px;font-weight:800;color:var(--text);letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct__badge{align-self:flex-start;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--rolec,var(--accent)) 15%,transparent);
  color:color-mix(in srgb,var(--rolec,var(--accent)) 82%,var(--text));
  border:1px solid color-mix(in srgb,var(--rolec,var(--accent)) 32%,transparent)}
.acct__scope{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct__state{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.acct__dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:0 0 auto;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 22%,transparent)}
.acct__dot.off{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 22%,transparent)}
.acct__chev{grid-column:3;grid-row:1/span 2;color:var(--muted);display:flex;transition:transform .18s var(--ease)}
.acct.open .acct__chev{transform:rotate(180deg)}
/* --- quick-action row: قفل الشاشة · المزيد (each ≥44px) --- */
.acct__qa{display:flex;gap:7px}
.acct__qab{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:11px;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s var(--ease)}
.acct__qab:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
  background:color-mix(in srgb,var(--accent) 6%,var(--surface));color:var(--accent)}
.acct__qab:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.acct__qab svg{flex:0 0 auto}

/* role-badge palette (§14) — colour PLUS the always-present text label, never colour alone */
.acct__badge[data-role=system_owner]{--rolec:#9a7b1f}
.acct__badge[data-role=admin]{--rolec:#6d28d9}
.acct__badge[data-role=general_manager]{--rolec:#1e40af}
.acct__badge[data-role=branch_manager]{--rolec:#0f766e}
.acct__badge[data-role=cashier],.acct__badge[data-role=cashier_all_brands]{--rolec:#475569}
.acct__badge[data-role=kitchen],.acct__badge[data-role=central_kitchen],.acct__badge[data-role=subscription_kitchen]{--rolec:#c2410c}
.acct__badge[data-role=finance]{--rolec:#047857}
.acct__badge[data-role=inventory_purchase]{--rolec:#0369a1}

/* ===== ACCOUNT MENU — popover ABOVE the dock, always inside the viewport ===== */
.acctmenu__scrim{position:fixed;inset:0;z-index:9490;background:transparent}
.acctmenu{position:fixed;z-index:9500;width:min(300px,calc(100vw - 24px));max-height:min(78dvh,560px);
  overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-2);animation:acctmenuIn .16s var(--ease)}
@keyframes acctmenuIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.acctmenu__hd{display:flex;align-items:center;gap:11px;padding:14px;
  background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1}
.acctmenu__hd .acct__av{grid-row:auto;width:44px;height:44px}
.acctmenu__hdid{min-width:0;display:flex;flex-direction:column;gap:3px}
.acctmenu__hdname{font-size:15px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctmenu__hdsub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.acctmenu__sec{padding:5px 0;border-top:1px solid var(--border)}
.acctmenu__lbl{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.5px;padding:7px 14px 3px}
.acctmenu__i{display:flex;align-items:center;gap:11px;width:100%;padding:9px 14px;min-height:44px;
  border:0;background:transparent;color:var(--text);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;text-align:start;transition:background .13s}
.acctmenu__i:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.acctmenu__i:focus-visible{outline:none;background:color-mix(in srgb,var(--accent) 11%,transparent);
  box-shadow:inset 3px 0 0 var(--accent)}
.acctmenu__i .ico{color:var(--muted);display:flex;flex:0 0 auto;width:18px;justify-content:center}
.acctmenu__i .val{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--muted);
  max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctmenu__i.danger{color:var(--danger)}.acctmenu__i.danger .ico{color:var(--danger)}
.acctmenu__i.danger:hover{background:color-mix(in srgb,var(--danger) 9%,transparent)}
.acctmenu__i[aria-disabled=true]{opacity:.55;cursor:default}
.acctmenu__i[aria-disabled=true]:hover{background:transparent}
/* honest status chip (printer / session) — text + colour, never colour alone */
.acctmenu__st{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700}
.acctmenu__st .d{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.acctmenu__st.ok{color:var(--success)}.acctmenu__st.ok .d{background:var(--success)}
.acctmenu__st.off{color:var(--muted)}.acctmenu__st.off .d{background:var(--muted)}
.acctmenu__st.warn{color:#b45309}.acctmenu__st.warn .d{background:#b45309}

/* compact behaviour when the sidebar collapses to the top row (≤900px) */
@media(max-width:900px){
  .acct{margin-inline-start:auto;border-top:0;padding:2px 0;flex-direction:row;align-items:center;gap:8px}
  .acct__card{min-height:0;padding:6px 10px;column-gap:8px}
  .acct__av{grid-row:1;width:34px;height:34px;border-radius:11px;font-size:14px}
  .acct__id{gap:1px}.acct__scope,.acct__state{display:none}
  .acct__qa{display:none}
}
@media(prefers-reduced-motion:reduce){
  .acctmenu{animation:none}.acct__chev,.acct__card,.acct__qab,.acctmenu__i{transition:none}
}

/* ===== DASHBOARD REDESIGN ===== */
.dbhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.dbhead__sub{color:var(--muted);font-size:14px}
.dbhead__acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:3px}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.15s var(--ease)}
.seg button:hover:not(.active){color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.seg button.active{background:var(--accent);color:var(--accent-fg);box-shadow:0 4px 11px -6px var(--accent)}
.seg--sm button{font-size:12px;padding:6px 11px}
.linkbtn{border:0;background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.15s;white-space:nowrap}
.linkbtn:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:16px}
.statcard{display:flex;align-items:flex-start;gap:13px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-1);transition:box-shadow .2s var(--ease),transform .2s var(--ease);min-height:116px}
.statcard:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.statcard__ic{width:42px;height:42px;flex:none;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);display:flex;align-items:center;justify-content:center}
.statcard__b{min-width:0;flex:1}
.statcard__l{color:var(--muted);font-size:13px;font-weight:500}
.statcard__v{font-size:27px;font-weight:800;letter-spacing:-.5px;margin-top:5px;line-height:1.05;color:var(--text)}
.statcard__u{font-size:14px;font-weight:600;color:var(--muted);margin-inline-start:5px}
.statcard__d{font-size:12px;font-weight:700;margin-top:9px;display:inline-flex;align-items:center;gap:5px}
.statcard__d.up{color:var(--success)}.statcard__d.down{color:var(--danger)}
.statcard__dl{color:var(--muted);font-weight:500}
.statcard__hint{color:var(--muted);font-size:12px;margin-top:9px}
.dbmain{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:16px;margin-top:16px}
.dbcard__h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.dbcard__h h3{margin:0;font-size:15px;font-weight:800}
.dbbars{display:flex;align-items:flex-end;gap:6px;height:214px;padding-top:8px}
.dbbar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;outline:none}
.dbbar__wrap{width:100%;display:flex;align-items:flex-end;justify-content:center;height:170px;border-bottom:1.5px solid var(--border)}
.dbbar__f{width:min(72%,32px);border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));transform-origin:bottom;animation:barGrow .7s cubic-bezier(.2,.8,.2,1) backwards;transition:filter .15s}
.dbbar__f--z{background:var(--border)}
.dbbar:hover .dbbar__f,.dbbar:focus .dbbar__f{filter:brightness(1.1)}
.dbbar__lbl{font-size:10.5px;color:var(--muted);white-space:nowrap;height:13px}
.db-empty{height:214px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);text-align:center}
.db-empty__ic{width:58px;height:58px;border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);display:flex;align-items:center;justify-content:center}
.topitem{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border)}
.topitem:last-child{border-bottom:0}
.tirank{width:26px;height:26px;flex:none;border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800}
.tirank--1{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.tigrow{flex:1;min-width:0}
.tirow{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tiname{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tirev{font-size:13px;font-weight:700;white-space:nowrap}
.tibar{height:6px;background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:4px;overflow:hidden;margin-top:6px}
.tibar__f{height:100%;background:var(--accent);border-radius:4px;transition:width .3s var(--ease)}
.ordtoolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ordtoolbar .inp{margin:0;max-width:280px;height:38px}
.iconbtn--ghost{border-color:transparent;background:transparent;width:30px;height:30px;color:var(--muted)}
tr:hover .iconbtn--ghost{color:var(--accent)}
@media(max-width:900px){.dbmain{grid-template-columns:1fr}}
@media(max-width:520px){.statgrid{grid-template-columns:1fr}.dbbar__lbl{font-size:9.5px}.dbbars{gap:3px}.ordtoolbar .inp{max-width:none;flex:1 1 100%}}
/* mobile shell: turn the side rail into a compact icon strip so content gets full width (≤900px) */
@media(max-width:900px){
  .appwrap,.appwrap.navhidden{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;z-index:40;height:auto;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;padding:8px 12px;border-inline-end:0;border-bottom:1px solid var(--border);overflow:hidden}
  .brandmark{padding:0 4px 0 0;border-bottom:0;justify-content:flex-start;flex:none}
  .brandmark img{max-height:32px}
  .nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;flex:1 1 auto;justify-content:center}
  .nav a{padding:9px 11px;flex:none}
  .nav a span{display:none}
  .side-bottom{margin-inline-start:auto;margin-top:0;flex:none;gap:6px}
  .side-bottom .avatar{display:none}
  .side-bottom>.grow{display:none}
  .navtoggle{display:none}
}
/* ============================================================
   POS (نقطة البيع) — professional 3-zone cashier layout
   ============================================================ */
body.posmode #bswitch{display:none}                 /* brand switch lives in the POS toolbar instead */
body.posmode #content{padding:0}
.posx{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-1)}
@media(min-width:901px){
  body.posmode .main{height:100vh;overflow:hidden;display:flex;flex-direction:column}
  body.posmode .topbar{margin-bottom:14px;flex:none}
  body.posmode #subtabs{flex:none}
  body.posmode #content{flex:1;min-height:0;overflow:hidden}
  .posx{height:100%}
}
/* toolbar */
.postop{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);flex:none}
.postop__start{flex:none}
.postop__end{flex:none;display:flex;align-items:center;gap:10px}
.posbrand{display:inline-flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:3px}
.posbrand button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:8px 15px;border-radius:8px;cursor:pointer;transition:.15s var(--ease);white-space:nowrap}
.posbrand button:hover:not(.active){color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.posbrand button.active{background:var(--accent);color:var(--accent-fg);box-shadow:0 4px 11px -6px var(--accent)}
.possearch{flex:1 1 auto;max-width:560px;margin:0 auto;position:relative;display:flex;align-items:center}
.possearch__ic{position:absolute;inset-inline-start:14px;color:var(--muted);display:flex;pointer-events:none}
.possearch input{width:100%;box-sizing:border-box;height:44px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14.5px;border-radius:12px;padding:0 44px;transition:.15s}
.possearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.possearch__kbd{position:absolute;inset-inline-end:12px;font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-family:inherit}
.possearch__x{position:absolute;inset-inline-end:10px;width:26px;height:26px;border:0;border-radius:7px;background:var(--bg);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.possearch__x:hover{color:var(--danger);background:var(--danger-soft,#fdeaea)}
.possearch__x[hidden],.possearch__kbd[hidden]{display:none}
.poswho{display:flex;align-items:center;gap:8px}
.poswho__ic{width:34px;height:34px;flex:none;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.poswho__t{display:flex;flex-direction:column;line-height:1.25}
.poswho__n{font-size:13px;font-weight:700}
.poswho__r{font-size:11px;color:var(--muted)}
.poschip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 11px}
.poschip .licon{color:var(--muted)}
.posact__grp{display:inline-flex;gap:6px}
.posact{position:relative;width:40px;height:40px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.posact:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.posact:disabled{opacity:.45;cursor:not-allowed}
.posact__b{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--accent-fg);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
/* categories */
.poscats{display:flex;gap:8px;padding:11px 14px;overflow-x:auto;border-bottom:1px solid var(--border);flex:none;scrollbar-width:none}
.poscats::-webkit-scrollbar{display:none}
.poscat{flex:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer;transition:.15s var(--ease);white-space:nowrap}
.poscat:hover:not(.active){border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent) 6%,transparent)}
.poscat.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);box-shadow:0 5px 14px -6px var(--accent)}
.poscat__n{font-size:11.5px;font-weight:700;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted);border-radius:999px;padding:1px 7px;min-width:14px;text-align:center}
.poscat.active .poscat__n{background:rgba(255,255,255,.25);color:#fff}
/* THE SAME BADGE, ON THE OTHER CONTROL THAT USES IT. The brand tabs above the till are `.posbrand button`,
   not `.poscat` — a segmented control, not a pill — so the rule on the line above never reached them and the
   count on the SELECTED brand stayed --muted on the accent fill: measured 1.08:1, an invisible number, in
   light and dark alike. Fixed here rather than by adding `poscat` to the button, which would also drag in
   the pill's border, padding and radius and reshape the control. */
.posbrand button.active .poscat__n{background:rgba(255,255,255,.25);color:inherit}
/* body: products + cart */
.posbody{display:grid;grid-template-columns:minmax(0,1fr) 366px}
@media(min-width:901px){.posbody{flex:1;min-height:0}}
.posprod{min-width:0;padding:14px 16px}
@media(min-width:901px){.posprod{overflow-y:auto;height:100%}}
.posgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-content:start}
.posnores{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--muted);text-align:center}
.posnores[hidden]{display:none}
.posnores__ic{color:var(--border)}
.poscard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:15px;overflow:hidden;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s}
.poscard:hover{transform:translateY(-2px);box-shadow:var(--shadow-1);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.poscard.is-incart{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.poscard.is-off{cursor:not-allowed}
.poscard.is-off:hover{transform:none;box-shadow:none;border-color:var(--border)}
.poscard__imgwrap{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,var(--surface),var(--border));overflow:hidden}
.poscard__img{width:100%;height:100%;object-fit:cover;display:block}
.poscard__img--none{width:100%;height:100%;display:block;background:linear-gradient(135deg,var(--surface),var(--border))}
.poscard.is-off .poscard__img{opacity:.4;filter:grayscale(.45)}
.poscard__tag{position:absolute;top:7px;inset-inline-start:7px;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.92);color:var(--text);padding:3px 9px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.poscard__badge{position:absolute;top:7px;inset-inline-end:7px;font-size:10.5px;font-weight:800;background:rgba(20,15,10,.72);color:#fff;padding:3px 9px;border-radius:999px}
.poscard__b{padding:9px 11px 6px;flex:1;min-height:0}
.poscard__name{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.poscard__price{font-size:15px;font-weight:800;color:var(--text);margin-top:4px}
.poscard__cur{font-size:11.5px;font-weight:600;color:var(--muted)}
.poscard__foot{padding:0 10px 10px}
.poscard__add{width:100%;height:40px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-fg);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.poscard__add:hover{background:var(--primary-hover,#a90d27)}
.poscard__add:active{transform:translateY(1px)}
.poscard__soff{height:40px;border-radius:10px;background:var(--bg);color:var(--muted);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.poscard__step{display:flex;align-items:center;justify-content:space-between;height:40px;border:1.5px solid var(--accent);border-radius:10px;overflow:hidden}
.poscard__step .psbtn{width:44px;height:100%;border:0;background:var(--accent-soft);color:var(--accent);font-size:20px;font-weight:700;cursor:pointer;line-height:1}
.poscard__step .psbtn:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.poscard__step .psq{font-size:15px;font-weight:800;min-width:24px;text-align:center}
/* cart panel */
.poscart{display:flex;flex-direction:column;background:var(--card);overflow:hidden;min-height:0}
@media(min-width:901px){.poscart{height:100%;border-inline-start:1px solid var(--border)}}
.poscart__h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);flex:none}
.poscart__title{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.poscart__count{font-size:12px;font-weight:800;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 9px}
.poscart__acts{display:flex;align-items:center;gap:6px}
.pcx-hold{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer}
.pcx-hold:hover{border-color:var(--accent);color:var(--accent)}
.pcx-clear{width:32px;height:32px;border:1px solid var(--danger-soft,#fdeaea);background:var(--danger-soft,#fdeaea);color:var(--danger,#c9363e);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pcx-clear:hover{filter:brightness(.97)}
.poscart__close{display:none;width:34px;height:34px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:9px;cursor:pointer;align-items:center;justify-content:center}
.otypesx{display:flex;gap:4px;background:var(--bg);border-radius:11px;padding:4px;margin:12px 16px 0;flex:none}
.otypesx button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:9px 6px;border-radius:8px;cursor:pointer;transition:.15s}
.otypesx button.active{background:var(--accent);color:var(--accent-fg);box-shadow:0 4px 10px -6px var(--accent)}
.otblx{margin:10px 16px 0;box-sizing:border-box;width:calc(100% - 32px);border:1.5px solid var(--accent);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;padding:10px 12px;border-radius:10px;text-align:center}
.otblx:focus{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.poscart__items{flex:1;overflow-y:auto;padding:6px 16px;min-height:64px}
.citemx{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.citemx:last-child{border-bottom:0}
.citemx__thumb{width:46px;height:46px;object-fit:cover;border-radius:10px;flex:none}
.citemx__thumb--none{width:46px;height:46px;border-radius:10px;flex:none;background:var(--border)}
.citemx__m{flex:1;min-width:0}
.citemx__n{font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citemx__o{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citemx__p{font-size:12.5px;font-weight:700;color:var(--accent);margin-top:2px}
.citemx__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.qtyx{display:flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.qbtnx{width:28px;height:28px;border:0;background:var(--surface);color:var(--text);font-size:16px;font-weight:700;cursor:pointer;line-height:1}
.qbtnx:hover{background:var(--accent-soft);color:var(--accent)}
.qtyx span{font-size:13.5px;font-weight:800;min-width:22px;text-align:center}
.citemx__del{width:26px;height:26px;border:0;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.citemx__del:hover{color:var(--danger);background:var(--danger-soft,#fdeaea)}
.cartemptyx{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 20px;text-align:center;color:var(--muted)}
.cartemptyx__ic{color:var(--border)}
.cartemptyx__t{font-size:14px;font-weight:700;color:var(--text)}
.cartemptyx__s{font-size:12.5px}
.poscart__foot{flex:none;padding:14px 16px;border-top:1px solid var(--border)}
.sumx{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:3px 0}
.sumx--tot{font-size:18px;font-weight:800;color:var(--text);padding-top:9px;margin-top:6px;border-top:1px dashed var(--border)}
.paybtn{width:100%;height:56px;margin-top:12px;border:0;border-radius:13px;background:var(--accent);color:var(--accent-fg);font:inherit;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:10px;padding:0 18px;transition:.15s;box-shadow:0 8px 20px -10px var(--accent)}
.paybtn__t{margin-inline-start:auto}
.paybtn:hover:not(:disabled){background:var(--primary-hover,#a90d27)}
.paybtn:active:not(:disabled){transform:translateY(1px)}
.paybtn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.paybtn.is-loading{opacity:.75;cursor:progress}
/* ===== Employee purchase (POS) ===== */
.empbtn{width:100%;height:46px;margin-top:10px;border:1.5px solid var(--emp,#0f7a4f);border-radius:12px;background:var(--emp-soft,rgba(15,122,79,.08));color:var(--emp,#0f7a4f);font:inherit;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.empbtn:hover{background:var(--emp-soft2,rgba(15,122,79,.15))}
.empbtn:active{transform:translateY(1px)}
.paybtn--emp,.posbar__pay--emp{background:var(--emp,#0f7a4f)!important;box-shadow:0 8px 20px -10px var(--emp,#0f7a4f)!important}
.paybtn--emp:hover:not(:disabled){background:var(--emp-hover,#0c6641)!important}
.empband{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:11px;border:1px solid var(--emp,#0f7a4f);border-radius:12px;background:var(--emp-soft,rgba(15,122,79,.08))}
.empband__ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:9px;background:var(--emp,#0f7a4f);color:#fff}
.empband__m{flex:1;min-width:0}
.empband__n{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.2}
.empband__s{font-size:11.5px;color:var(--emp,#0f7a4f);font-weight:700;margin-top:1px}
.empband__x{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.empband__x:hover{background:var(--accent-soft);color:var(--danger)}
.sumx--disc{color:var(--emp,#0f7a4f);font-weight:700}
.sumx--net{font-size:16px;font-weight:800;color:var(--emp,#0f7a4f);padding-top:4px}
/* employee modal (flex-centered overlay) */
.emppop{position:fixed;inset:0;z-index:70;display:none}
.emppop.show{display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.emppop__scrim{position:absolute;inset:0;background:rgba(20,20,25,.5);backdrop-filter:blur(2px)}
.emppop__box{position:relative;width:min(460px,94vw);max-height:92vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);overflow:hidden;animation:popIn .24s var(--pop)}
.emppop__box--pay{width:min(430px,94vw)}
.emppop__h{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 12px}
.emppop__t{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:800;color:var(--text)}
.emppop__sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.emppop__x{margin-inline-start:auto;flex:none;width:34px;height:34px;border:0;border-radius:10px;background:var(--accent-soft);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.emppop__x:hover{color:var(--text)}
.emppop__search{position:relative;margin:0 18px 12px}
.emppop__search-ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.emppop__search input{width:100%;height:48px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;font-size:15px;padding:0 14px 0 42px}
.emppop__search input:focus{outline:none;border-color:var(--emp,#0f7a4f)}
.emppop__list{overflow-y:auto;padding:0 12px 14px;display:flex;flex-direction:column;gap:6px}
.emppop__empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:38px 20px;color:var(--muted);text-align:center;font-size:13.5px}
.emppop__empty--err{color:var(--danger)}
.emprow{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer;text-align:start;font:inherit;transition:.13s;min-height:56px}
.emprow:hover:not(:disabled){border-color:var(--emp,#0f7a4f);background:var(--emp-soft,rgba(15,122,79,.06))}
.emprow:active:not(:disabled){transform:translateY(1px)}
.emprow:disabled{opacity:.55;cursor:not-allowed}
.emprow__av{flex:none;width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--muted);display:flex;align-items:center;justify-content:center}
.emprow__m{flex:1;min-width:0}
.emprow__n{font-size:14px;font-weight:700;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emprow__s{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emprow__go{flex:none;width:28px;height:28px;border-radius:8px;background:var(--emp,#0f7a4f);color:#fff;display:flex;align-items:center;justify-content:center}
.emprow__off{flex:none;font-size:11px;font-weight:700;color:var(--danger);background:rgba(176,42,42,.1);padding:3px 9px;border-radius:20px}
/* settlement breakdown */
.epbrk{margin:2px 18px 12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.epbrk__r{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;color:var(--text)}
.epbrk__r--mut{color:var(--muted);font-size:12.5px}
.epbrk__r--disc{color:var(--emp,#0f7a4f);font-weight:800}
.epbrk__r--tot{font-size:16px;font-weight:800;border-top:1px dashed var(--border);margin-top:5px;padding-top:9px}
.epmonthly{margin:0 18px 12px;padding:9px 12px;border-radius:10px;background:var(--accent-soft);color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}
.epmonthly b{color:var(--text)}
.epseg__lbl{margin:0 18px 7px;font-size:12px;font-weight:700;color:var(--muted)}
.epseg{display:flex;gap:8px;margin:0 18px 12px}
.epseg--pm{margin-top:-4px}
.epseg__b{flex:1;min-height:52px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:.13s;padding:8px 6px}
.epseg__b:hover:not(.on):not(:disabled){border-color:var(--emp,#0f7a4f)}
.epseg__b.on{border-color:var(--emp,#0f7a4f);background:var(--emp,#0f7a4f);color:#fff;box-shadow:0 6px 16px -10px var(--emp,#0f7a4f)}
.epseg__b:disabled,.epseg__b.dis{opacity:.42;cursor:not-allowed}
.epnote{margin:0 18px 12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;line-height:1.4}
.epnote--err{color:var(--danger)}
.emppop__box--pay #epGo,.emppop__box--pay .paybtn{margin:2px 18px 18px;width:auto}
.emppop__box--pay .pay__ok,.emppop__box--pay .pay__recap{margin:0 18px}
.emppop__box--pay .pay__ok{padding-top:20px}
.emppop__box--pay .pay__foot{padding:14px 18px 18px}
.spin{display:inline-flex;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* toast */
.toastx{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:90;display:flex;align-items:center;gap:9px;max-width:min(440px,92vw);padding:12px 18px;border-radius:13px;background:#1d2733;color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 16px 40px -14px rgba(0,0,0,.55);opacity:0;transition:transform .3s var(--pop),opacity .3s;pointer-events:none}
.toastx.show{transform:translate(-50%,0);opacity:1}
.toastx__ic{display:flex;flex:none}
.toastx--ok{background:#0f7a4f}
.toastx--err{background:#b02a2a}
/* employee-purchase report */
.eptable{width:100%;border-collapse:collapse;font-size:13px}
.eptable th{text-align:start;font-weight:700;color:var(--muted);font-size:12px;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg)}
.eptable td{padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.eptable tr:last-child td{border-bottom:0}
.eptable tbody tr:hover{background:var(--accent-soft)}
.eptable .b{font-weight:700;color:var(--text)}
.repitem-row{cursor:pointer}
.repitem-row:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent);outline-offset:-3px}

/* أمر الشراء: عناوين ثابتة في الشاشات الواسعة وحقول واضحة على الهاتف. */
.polines-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:14px 0 8px;font-weight:800}
.poline{display:grid;grid-template-columns:minmax(190px,1fr) 112px 86px 100px 78px 38px;gap:7px;align-items:center;margin-bottom:7px}
.poline--head{margin-bottom:5px;color:var(--muted);font-size:11.5px;font-weight:700;padding-inline:4px}
.poline select,.poline input{min-width:0;width:100%}
.poline .pfDel{width:38px;height:38px}
@media(max-width:720px){
  .polines-title{align-items:flex-start;flex-direction:column;gap:2px}
  .poline--head{display:none}
  .poline{grid-template-columns:minmax(0,1fr) minmax(108px,.55fr) 42px;border:1px solid var(--border);border-radius:12px;padding:9px;margin-bottom:9px;background:var(--surface,#fff)}
  .poline .pfItem{grid-column:1/3}
  .poline .pfUom{grid-column:1}
  .poline .pfQty{grid-column:2}
  .poline .pfPrice{grid-column:1}
  .poline .pfTax{grid-column:2}
  .poline .pfDel{grid-column:3;grid-row:1/4;align-self:stretch;height:auto;min-height:44px}
}
.epneg{color:#b02a2a;font-weight:700}
.epgreen{color:#0f7a4f;font-weight:700}
/* says out loud that a zero is a brand's zero, not the company's — see the empty «تقارير المشتريات» the
   owner read as «لا مشتريات» while an employee owed money on another brand */
.epscope{margin:0 0 12px;padding:10px 13px;border:1px solid var(--warn,#9a6a08);border-radius:11px;
  background:var(--warnbg,#fdf6e6);color:var(--warn,#9a6a08);font-size:12.5px;font-weight:600;line-height:1.7}
/* ── employee statement: days → purchases → the lines a purchase was made of ──────────────────────
   Built for the question «اشترى إيش، ويوم كم، وكم باقي عليه». The day is the spine, each purchase
   states WHAT it was without being opened, and opening one reveals the snapshotted lines and the
   facts that decide a receivable. Scrolls inside the modal, never the page. */
.epstm{overflow:auto;padding:0 18px 18px;display:flex;flex-direction:column;gap:14px}
.epday__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:7px 2px;margin-bottom:6px;border-bottom:2px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1}
.epday__d{font-weight:800;font-size:14px;color:var(--text)}
.epday__s{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.eptx{border:1px solid var(--border);border-radius:12px;margin-bottom:8px;background:var(--surface);overflow:hidden}
.eptx--open{border-inline-start:3px solid #b02a2a}
.eptx__h{width:100%;display:flex;align-items:center;gap:10px;padding:11px 13px;background:none;border:0;
  color:inherit;font:inherit;text-align:start;cursor:pointer}
.eptx__h:hover{background:var(--accent-soft)}
.eptx__chev{color:var(--muted);font-size:13px;line-height:1;transition:transform .16s}
.eptx--x .eptx__chev{transform:rotate(180deg)}
.eptx__main{flex:1;min-width:0}
.eptx__what{display:block;font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eptx__sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.eptx__amt{font-weight:800;font-size:13.5px;text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.eptx__set{display:block;font-size:11px;font-weight:700;color:var(--muted)}
.eptx__b{padding:4px 13px 12px;border-top:1px solid var(--border)}
.epitems{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0 12px}
.epitems th{text-align:start;font-weight:700;color:var(--muted);font-size:11.5px;padding:7px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
.epitems td{padding:8px;border-bottom:1px solid var(--border);vertical-align:top}
.epitems tr:last-child td{border-bottom:0}
.epitems .b{font-weight:700;color:var(--text)}
.epfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px 16px}
.epfact{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.epfact__l{color:var(--muted);font-weight:600}
.epfact__v{font-weight:700;text-align:end;font-variant-numeric:tabular-nums}
@media(max-width:640px){.epitems th:nth-child(3),.epitems td:nth-child(3),.epitems th:nth-child(4),.epitems td:nth-child(4){display:none}}
.epsel{border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;min-height:40px;cursor:pointer}
.eptabs{margin-bottom:14px}
.icon-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.14s}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.eprow-ex td{opacity:.5;text-decoration:line-through}
.eprow-ex td:last-child,.eprow-ex td:nth-last-child(2){text-decoration:none}
.epfield{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);min-width:150px;flex:1}
.epfield input{min-height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--text);font:inherit;font-size:14px}
.epfield input:focus{outline:none;border-color:#0f7a4f}
.epswitch{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);cursor:pointer;user-select:none}
.epswitch input{width:18px;height:18px;accent-color:#0f7a4f;cursor:pointer}
.epswitch--lg{font-size:15px;font-weight:700}
.epfield select{min-height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.epfield select:focus,.epfield input:focus{outline:none;border-color:#0f7a4f}
.benhdr{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.benhdr__acts{display:flex;gap:8px;flex-wrap:wrap}
.bfsec{font-size:13px;font-weight:800;color:#0f7a4f;margin:18px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.bfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.bfinfo{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border)}
.bfinfo:last-child{border-bottom:0}
.bfinfo .b{font-weight:700;color:var(--text);text-align:left}
.invact__btn{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--card);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:start;transition:.13s}
.invact__btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.invprev{margin:12px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.invprev:empty{display:none;padding:0;border:0}
.invprev__r{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;color:var(--text)}
.invprev__r--tot{font-size:15px;font-weight:800;border-top:1px dashed var(--border);margin-top:5px;padding-top:8px;color:#0f7a4f}
/* Product & Menu Management Center */
.psums{grid-template-columns:repeat(auto-fit,minmax(115px,1fr))}
.psum{transition:.14s;cursor:pointer}.psum:hover{border-color:var(--accent)}.psum--on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.prodcats{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
.prodcats .catn{background:var(--accent-soft);color:var(--muted);border-radius:20px;padding:1px 8px;font-size:11px;margin-inline-start:4px}
.prodcats button.active .catn{background:rgba(255,255,255,.28);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:236px}
.pcard__top{display:flex;gap:10px;align-items:flex-start}
.pcard__img{width:56px;height:56px;flex:none;border-radius:11px;object-fit:cover;background:var(--bg)}
.pimg--ph{display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px dashed var(--border)}
.pcard__hd{flex:1;min-width:0}
.pcard__name{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__price{font-size:17px;font-weight:800;color:var(--text)}
.pcard__badges{display:flex;flex-wrap:wrap;gap:5px;min-height:22px}
.pbadge{font-size:11px;font-weight:700;border-radius:20px;padding:2px 9px;white-space:nowrap}
.pbadge--ok{background:#e1f5e8;color:#127a3a}.pbadge--off{background:#f1efe8;color:#5f5e5a}.pbadge--warn{background:#fdf0d8;color:#9a6a08}.pbadge--bad{background:#fdeaea;color:#b02a2a}
.pcard__cost{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap;border-top:1px solid var(--border);padding-top:8px}
.pcard__cost b{color:var(--text)}
.pcard__meta{margin-top:auto}
.pcard__foot{display:flex;align-items:center;gap:10px;margin-top:6px}
.pcard__av{display:flex;align-items:center}
.ptbl-img{width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--bg)}
.pprev__img{width:100%;height:150px;border-radius:12px;object-fit:cover;background:var(--bg)}
.invact__btn--danger{color:var(--danger)}.invact__btn--danger:hover{border-color:var(--danger);background:#fdeaea}
/* Product editing page (Product Center — Stage 2) */
.pe-tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.pe-tgl:last-child{border-bottom:none}
.pe-tgl__t{min-width:0}.pe-tgl__l{font-size:14px;font-weight:600;color:var(--text)}
.pe-tgl .toggle.is-busy{opacity:.5;pointer-events:none}
.pe-status{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.pe-vat{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:10px;padding:9px 12px;background:var(--bg);min-height:42px;justify-content:center}
.pe-vat__r{display:flex;justify-content:space-between;gap:8px;font-size:13px}.pe-vat__r b{color:var(--text)}
.pe-comp__bar{height:9px;border-radius:20px;background:var(--border);overflow:hidden}
.pe-comp__fill{height:100%;border-radius:20px;transition:width .3s}
.pe-comp__r{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0}
.pe-comp__ic{width:20px;height:20px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.pe-comp__ic.ok{background:#e1f5e8;color:#127a3a}.pe-comp__ic.no{background:var(--bg);color:var(--muted);border:1px solid var(--border)}
.pe-sz{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.pe-sz:last-child{border-bottom:none}.pe-sz--add{border-top:1px dashed var(--border);padding-top:12px;margin-top:4px}
.pe-sz__n{flex:1;min-width:0;min-height:40px;border:1px solid var(--border);border-radius:9px;padding:0 10px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
.pe-sz__p{display:flex;flex-direction:column;gap:2px}
.pe-sz__pi{width:110px;min-height:40px;border:1px solid var(--border);border-radius:9px;padding:0 10px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
.pe-sz__rec{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
/* P3A — الوزن الصافي لكل حجم. The unit sits OUTSIDE the box and after it, so in RTL it reads «٢٢٠ جم»
   and cannot swap sides with the number the way an in-box suffix does. flex-shrink:0 keeps the pair
   intact when the row gets crowded: a weight column collapsed to three pixels is worse than no column. */
.pe-sz__w{display:flex;align-items:center;gap:5px;flex-shrink:0}
.pe-sz__wi{width:84px;min-height:40px;text-align:center;border:1px solid var(--border);border-radius:9px;padding:0 8px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
/* THE ROW WRAPS BEFORE IT OVERFLOWS, and only below the two-column breakpoint. Measured at 1100px: the
   size row already ran past the viewport without this column, and adding it made the overrun worse by
   114px. Above 1280px nothing changes — the rule does not apply — so the wide layout every operator
   actually uses is byte-identical to before. Wrapping is the honest fix here: a weight box squeezed to
   nothing is a control the user cannot read or hit. */
@media(max-width:1280px){.pe-sz{flex-wrap:wrap}.pe-sz__n{flex:1 1 160px}.pe-sz__rec{flex:1 1 100%}}
.vchip__ing{display:inline-flex;align-items:center;gap:3px;background:#eef3ee;color:#0f7a4f;border-radius:20px;padding:1px 7px;font-size:10.5px;margin-inline-start:5px}
.pe-mod{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;margin-bottom:8px;transition:.14s}
.pe-mod.is-on{border-color:var(--success);background:#f4fbf6}
.pe-mod__t{min-width:0}.pe-mod__l{font-size:14px;font-weight:600;color:var(--text)}
/* change log (product editor) */
.pe-log{padding:8px 0;border-bottom:1px solid var(--border)}.pe-log:last-child{border-bottom:none}
.pe-log__h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.pe-log__a{font-size:13px;font-weight:700;color:var(--text)}
/* bulk-actions bar (table view — Stage 3) */
.pbulk{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--accent-soft,#eef3ee);border:1px solid var(--accent,#0f7a4f);border-radius:12px;padding:9px 14px;margin-bottom:10px}
.pbulk__c{font-size:14px;color:var(--text);white-space:nowrap}.pbulk__c b{color:var(--accent,#0f7a4f);font-size:16px}
.pbulk__acts{display:flex;gap:6px;flex-wrap:wrap}
.eptable tbody tr.is-sel{background:var(--accent-soft,#eef3ee)}
.eptable [data-sel],.eptable [data-selall]{width:18px;height:18px;accent-color:var(--accent,#0f7a4f);cursor:pointer}
/* held-orders popup */
.heldlist{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto}
.heldrow{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:11px}
.heldrow__i{flex:1;min-width:0}
.heldrow__b{font-size:13.5px;font-weight:700}
/* mobile: bottom checkout bar + cart bottom-sheet */
.posbar{display:none}
.poscart-scrim{display:none}
@media(max-width:900px){
  .postop{flex-wrap:wrap}
  .postop__start{order:1}
  .postop__end{order:2;margin-inline-start:auto}
  .possearch{order:3;flex-basis:100%;max-width:none}
  .poswho__t,.poschip,.posstatus{display:none}
  .posbody{grid-template-columns:1fr}
  .posprod{padding:10px 10px 84px}
  .posgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
  .poscart{position:fixed;inset-inline:0;bottom:0;top:auto;max-height:86vh;border-radius:18px 18px 0 0;z-index:70;transform:translateY(102%);transition:transform .28s var(--ease);box-shadow:0 -14px 44px -14px rgba(0,0,0,.45)}
  body.poscart-open .poscart{transform:translateY(0)}
  .poscart__close{display:flex}
  .posbar.show{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:60;gap:10px;padding:10px 12px;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -6px 20px -10px rgba(0,0,0,.3)}
  .posbar__view{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:700;padding:0 14px;height:50px;border-radius:12px;cursor:pointer}
  .posbar__view .posbar__t{margin-inline-start:auto;color:var(--accent);font-weight:800}
  .posbar__pay{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--accent);color:var(--accent-fg);font:inherit;font-size:15px;font-weight:800;height:50px;border-radius:12px;cursor:pointer}
  body.poscart-open .poscart-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:65}
}
/* ============================================================
   POS — tablet-first touch refinements + 80-table picker
   ============================================================ */
.poscard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 10px}
.poscard__price{font-size:15px;font-weight:800;margin:0}
.poscard__plus{flex:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--accent);color:var(--accent-fg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s,background .14s;box-shadow:0 4px 12px -5px var(--accent)}
.poscard__plus:hover{background:var(--primary-hover,#a90d27)}
.poscard__plus:active{transform:scale(.9)}
.poscard__plus.has{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.poscard__plus-n{font-size:17px;font-weight:800}
.poscard__step{flex:1;height:46px;border-radius:12px}
.poscard__step .psbtn{width:52px;font-size:22px}
.poscard__step .psq{font-size:17px}
.poscard__soff{flex:1;height:46px;border-radius:11px}
.otypesx button{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 6px;font-size:13.5px}
.ottable{display:flex;align-items:center;gap:9px;width:calc(100% - 32px);margin:10px 16px 0;box-sizing:border-box;min-height:54px;border-radius:12px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;padding:0 14px}
.ottable .licon{flex:none}
.ottable--empty{border:1.5px dashed var(--accent);background:var(--accent-soft);color:var(--accent)}
.ottable--set{border:1.5px solid var(--accent);background:var(--card);color:var(--text)}
.ottable__lbl{font-weight:800}
.ottable__chg{margin-inline-start:auto;font-size:12.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:6px 13px;border-radius:999px}
.ottable:active{transform:translateY(1px)}
.paybtn__hint{text-align:center;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:7px}
.qbtnx{width:40px;height:40px;font-size:20px}
.qtyx span{font-size:15px;min-width:26px}
.citemx__del{width:40px;height:40px}
.citemx__thumb,.citemx__thumb--none{width:52px;height:52px}
.poscat{padding:11px 18px;font-size:14.5px;min-height:46px}
/* tablet landscape: collapse the side rail to icons on POS only → reclaim space for products */
@media(min-width:901px) and (max-width:1240px){
  body.posmode .appwrap{grid-template-columns:76px 1fr}
  body.posmode .sidebar{padding:12px 8px;align-items:stretch}
  body.posmode .brandmark{padding:2px 0 12px;justify-content:center;border-bottom:1px solid var(--border);margin-bottom:6px}
  body.posmode .brandmark img{max-height:30px;max-width:60px;object-fit:contain}
  body.posmode .nav a{justify-content:center;padding:13px 0;gap:0}
  body.posmode .nav a span{display:none}
  body.posmode .side-bottom{flex-direction:column;align-items:center;gap:8px;padding-top:10px}
  body.posmode .side-bottom>.grow{display:none}
  body.posmode #chpw{display:none}
  body.posmode #logout{width:100%;justify-content:center;padding:10px 2px;font-size:12px}
  body.posmode .posbody{grid-template-columns:minmax(0,1fr) 328px}
  body.posmode .posgrid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
}
.tablepop{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:16px}
.tablepop.show{display:flex}
.tablepop__scrim{position:absolute;inset:0;background:rgba(20,15,10,.5)}
.tablepop__box{position:relative;width:min(920px,96vw);max-height:94vh;display:flex;flex-direction:column;background:var(--card);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-2)}
.tablepop__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)}
.tablepop__t{font-size:20px;font-weight:800}
.tablepop__s{font-size:13.5px;color:var(--muted);margin-top:3px}
.tablepop__x{width:44px;height:44px;flex:none;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tablepop__search{position:relative;display:flex;align-items:center;padding:14px 20px 4px}
.tablepop__search-ic{position:absolute;inset-inline-start:34px;color:var(--muted);display:flex;pointer-events:none}
.tablepop__search input{width:100%;height:52px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:16px;border-radius:14px;padding:0 48px}
.tablepop__search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tablepop__grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;padding:16px 20px;align-content:start}
.tablepop__none{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;font-size:15px}
.tablebtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:74px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:14px;cursor:pointer;transition:transform .1s}
.tablebtn:active{transform:scale(.95)}
/* THE NUMBER CARRIES THE WEIGHT. tabular-nums keeps 01 and 100 the same optical width, so a hundred
   tables read as a column of numbers rather than a ragged edge; the seat count is a caption under it. */
.tablebtn__lbl{font-size:11px;color:var(--muted);font-weight:600}
.tablebtn__n{font-size:24px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.tablebtn.is-sel{border-color:var(--accent);background:var(--accent);color:var(--accent-fg);box-shadow:0 6px 16px -7px var(--accent)}
.tablebtn.is-sel .tablebtn__lbl{color:rgba(255,255,255,.85)}
.tablepop__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-top:1px solid var(--border);flex-wrap:wrap}
.tablepop__sel{font-size:15px;color:var(--muted)}
.tablepop__sel b{color:var(--accent);font-size:18px}
.tablepop__acts{display:flex;gap:10px;margin-inline-start:auto}
.btn-lg{min-height:52px;padding:0 26px;border-radius:13px;font:inherit;font-size:15.5px;font-weight:800;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.btn-lg--primary{border:0;background:var(--accent);color:var(--accent-fg);box-shadow:0 8px 20px -10px var(--accent)}
.btn-lg--primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-lg--primary:active:not(:disabled){transform:translateY(1px)}
.btn-lg--ghost:active{transform:translateY(1px)}
@media(max-width:1100px){.tablepop__grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:720px){.tablepop__grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.tablepop__grid{grid-template-columns:repeat(3,1fr)}}
/* POS top-bar real status badges (online + time) */
.posstatus{display:inline-flex;align-items:center;gap:6px}
.posbadge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;white-space:nowrap;border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.posbadge .licon{flex:none}
.posbadge--ok{color:var(--success,#2f7d5b);background:color-mix(in srgb,var(--success,#2f7d5b) 10%,transparent);border-color:color-mix(in srgb,var(--success,#2f7d5b) 25%,transparent)}
.posbadge--off{color:var(--danger,#c9363e);background:var(--danger-soft,#fdeaea);border-color:color-mix(in srgb,var(--danger,#c9363e) 25%,transparent)}
.posbadge--time{font-variant-numeric:tabular-nums}
/* POS nav drawer (tablet): hamburger expands the icon rail into a labeled drawer over the page */
.posnav-scrim{display:none}
body.posnav .posnav-scrim{display:block;position:fixed;inset:0;background:rgba(20,15,10,.4);z-index:85}
@media(min-width:901px) and (max-width:1240px){
  body.posmode.posnav .sidebar{position:fixed;inset-block:0;inset-inline-end:0;width:250px;z-index:90;box-shadow:var(--shadow-2);padding:16px 14px;align-items:stretch;overflow-y:auto;background:var(--surface)}
  body.posmode.posnav .brandmark{justify-content:flex-start;border-bottom:1px solid var(--border);margin-bottom:8px;padding-bottom:12px}
  body.posmode.posnav .brandmark img{max-height:44px;max-width:none}
  body.posmode.posnav .nav a{justify-content:flex-start;padding:12px 12px;gap:11px}
  body.posmode.posnav .nav a span{display:inline}
  body.posmode.posnav .side-bottom{flex-direction:row;align-items:center;gap:8px;padding-top:12px}
  body.posmode.posnav .side-bottom>.grow{display:block}
  body.posmode.posnav #chpw{display:inline-flex}
  body.posmode.posnav #logout{width:auto}
}
/* ============================================================
   POS — final tablet refinements
   ============================================================ */
@media(min-width:901px) and (max-width:1240px){body.posmode #subtabs{display:none}}   /* only the tablet rail hides the top tabs — the drawer replaces them there; desktop/mobile keep #subtabs */
body.posmode .topbar #langtoggle{display:none}      /* isolated EN moves into the drawer (langtoggle2) */
body.posmode .topbar{margin-bottom:0}
.drawernav{display:none}
body.posmode.posnav .drawernav{display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--border)}
.drawernav__h{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.3px;padding:2px 12px 7px}
.drawernav__i{display:block;width:100%;text-align:start;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--text);padding:12px;border-radius:10px;cursor:pointer}
/* تبويبات المركز داخل درج وضع POS. الصنف يُرسم في app.js:1617 ولم يكن له تعريف في أيّ
   ملف، فكان التبويب يبدو كالمركز نفسه تمامًا — والدرج يعرض الاثنين متتاليين، فيقرأ المستخدم
   قائمةً مسطّحة بلا تراتب. الموجة وسّعت الأثر: أربعة مراكز جديدة صارت ترسم صفوفًا فرعيّة هنا.
   المعالجة هي نفسها التي يتلقّاها صفّ ٢ في الشريط الرئيسي (.filters--sub): أصغر قليلًا، أهدأ،
   ومُزاح إلى الداخل ليقول «هذا داخل الذي فوقه» — بالمنطقيّ لا باليساريّ، فالواجهة عربيّة. */
.drawernav__i--sub{padding-inline-start:30px;font-size:12.5px;font-weight:500;opacity:.9}
.drawernav__i.active{background:var(--accent-soft);color:var(--accent)}
.drawernav__i:hover:not(.active){background:color-mix(in srgb,var(--accent) 6%,transparent)}
/* product card: price always in the body, footer is a fixed-height action area → no layout shift on add */
.poscard__b{display:flex;flex-direction:column;gap:1px;padding:9px 11px 6px;flex:0 0 auto}
.poscard__price{font-size:15px;font-weight:800;color:var(--text);margin-top:2px}
.poscard__foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px 10px;min-height:58px}
.poscard__plus{width:48px;height:48px}
.poscard__step{width:100%;height:48px}
.poscard__step .psbtn{width:58px}
.poscard__soff{width:100%;height:48px}
/* larger touch search field */
.possearch input{height:52px;font-size:15.5px}
/* cart item: unit price + line total + large controls + stable height */
.citemx{align-items:center;gap:10px;min-height:66px}
.citemx__u{font-size:11.5px;color:var(--muted);margin-top:2px}
.citemx__side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.citemx__tot{font-size:14px;font-weight:800;color:var(--accent)}
.qbtnx{width:44px;height:44px;font-size:21px}
.qtyx span{min-width:30px;font-size:16px}
.citemx__del{width:44px;height:44px;flex:none}
/* comfortable bottom padding so the last product row + its controls are never clipped */
@media(min-width:901px){.posprod{padding-bottom:28px}}
/* bigger, centered logo symbol in the collapsed rail */
@media(min-width:901px) and (max-width:1240px){body.posmode .brandmark img{max-height:46px;max-width:66px}}
/* ============================================================
   POS — QA fixes (calmer red, ≥44px touch targets, safer delete, close buttons)
   ============================================================ */
.poscard__plus{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);border:1.5px solid color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:none}
.poscard__plus:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.poscard__plus:active{background:var(--accent);color:var(--accent-fg);transform:scale(.9)}
.pcx-clear{width:44px;height:44px}
.pcx-hold{min-height:44px;padding:0 14px}
.pay__x{width:44px;height:44px}
.possearch__x{width:36px;height:36px}
.posact{width:44px;height:44px}
.posbrand button{padding:11px 16px}
.heldrow .iconbtn{width:44px;height:44px}
.pay__q{min-height:46px}
.cz__o{min-height:48px;padding:12px 14px}
.cz .vpop__h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cz__x{width:40px;height:40px;flex:none;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.citemx__side{margin-inline-end:2px}
.citemx__del{margin-inline-start:6px;border:1px solid var(--border);background:var(--surface)}
.citemx__del:active{color:#fff;background:var(--danger,#c9363e);border-color:var(--danger,#c9363e)}
.citemx__o{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
/* the basket scrolls inside itself and takes the fling with it — a flick that runs out of list must not
   carry on into the page behind the cart */
.poscart__items{overscroll-behavior:contain}

/* THE TOOLBAR MUST YIELD SOMEWHERE, AND IT HAD NOWHERE. .postop__start was flex:none, so when the row ran
   out of width nothing could shrink and .postop__end simply ran off the inline-end edge into .posx's
   overflow:hidden — taking «الطابعة غير معدّة» and the held-orders button with it. Measured on the branch
   POS toolbar (app.js posToolbarHTML: brand strip + search + status + cashier + branch chip + actions) at
   1440×900, a full desktop: four controls clipped. This is not a small-screen problem, it just showed up
   there first. So the brand strip yields and scrolls, the search keeps a usable floor, and the status
   block keeps its min-content floor. Where the row already fits, flex:0 1 auto behaves exactly as
   flex:none did and nothing moves. */
.postop__start{flex:0 1 auto;min-width:120px}
.posbrand{max-width:100%;overflow-x:auto;scrollbar-width:none}
.posbrand::-webkit-scrollbar{display:none}
.possearch{min-width:170px}
.postop__end{flex:0 1 auto}
/* a branch name is one line or it is an ellipsis — never two. «سويت تايم — الفرع الرئيسي» wrapped inside
   its own chip and took the whole desktop toolbar from 75px to 117px, which the in-flow cart pays for in
   rows; the chip now shortens itself instead of charging the basket for its name. */
.poschip{min-width:0;white-space:nowrap}
.poschip>span{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   POS — SHORT OPERATIONAL SCREENS (the SUNMI class)
   ============================================================
   Every breakpoint in this file is about WIDTH. The terminal in the owner's field photo is WIDE enough to
   get the side-cart layout and SHORT enough that the fixed chrome eats the basket, so it matched none of
   them and «الطلب الحالي» was never given a rule of its own.

   Measured on a real 1024×600 viewport before this block existed:
       215px spent above the panel · a 358px panel · 181px of cart chrome · a 252px footer
   — 433px of furniture in 358px of room. The list was not broken and it always scrolled; it scrolled
   inside its own 64px min-height, which is one row. The 75px that did not fit were cut off the bottom by
   .posx{overflow:hidden}, and they took «إتمام الدفع» with them the moment an employee purchase added its
   band. Twenty items in the cart, one of them reachable.

   Two parts, and the first is the one that actually pays:

   1. THE CART IS PINNED TO THE FULL HEIGHT OF THE POS CARD. The toolbar and the category strip belong to
      the products, not to the basket — on a short screen the 144px they were charging the cart is the
      whole difference between a porthole and a working list. They now stop at the cart's edge and the
      panel runs from the top of the card to the bottom. Plain absolute positioning: no display:contents,
      no container queries, nothing an older Android WebView on a POS terminal has to be new enough for.

   2. THE FURNITURE GIVES BACK WHAT IT DOES NOT NEED, and the basket is allowed to shrink (min-height:0)
      so «إتمام الدفع» can never be pushed off the bottom again — the list yields first, by design, and
      it yields into its own scrollbar. Nothing a finger has to hit gets smaller: pay 50, employee 44,
      order type 44, quantity 44, delete 44 — at or above the 44px floor the rest of this file holds to.

   Nothing here is conditional on the cart's contents, so an empty cart, twenty lines, a long Arabic
   product name and an employee purchase all resolve through the same rules. */
@media (min-width:901px) and (max-height:820px){
  /* one name for the cart column, so the toolbar, the strip and the panel cannot drift apart */
  .posx{--upos-cart:366px;position:relative}
  body.posmode .main{padding:8px 14px}
  .postop,.poscats,.posprod{margin-inline-end:var(--upos-cart)}
  /* `body.posmode .posbody` — the specificity is deliberate, not decorative. The tablet block above still
     declares `body.posmode .posbody{...328px}`, so a bare `.posbody` here LOSES: the grid kept reserving
     a 328px column for a cart that had already left the flow, while .posprod subtracted the same 328px
     again as a margin. The product side dropped from 590px to 262px — one tile beside a wide empty strip
     — and it photographed as «the harness has no images» rather than as the layout bug it was. */
  body.posmode .posbody,.posbody{grid-template-columns:minmax(0,1fr)}
  .poscart{position:absolute;inset-block:0;inset-inline-end:0;width:var(--upos-cart);height:auto;z-index:2}
  /* The toolbar now pays for the pinned cart out of its own width — 328–366px of it — so it packs onto one
     line where it can and takes a SECOND line where it cannot. A 960px till carrying the branch POS's full
     toolbar (brand strip, search, two status badges, three 44px action buttons) cannot hold them on one
     line without dropping something below 44px or cutting it off, and neither is acceptable. Wrapping is
     free here in a way it would not have been before the pin: a taller toolbar costs the product grid a
     row of tiles and costs «الطلب الحالي» nothing.
     The declared BASES are what keep the second line rare. A wrapping flex container picks its break from
     each item's hypothetical size, and shrinking only happens inside a line that already formed — so with
     the brand strip's natural 481px basis the row broke in two on every SUNMI, light toolbar or not, for
     nothing. 150/170 let the light toolbar pack onto one line and grow into the leftover. */
  .postop{padding:6px 12px;flex-wrap:wrap;row-gap:6px}
  .postop__start{flex:2 1 150px}
  .possearch{flex:1 1 170px}
  .postop__end{flex:0 0 auto;margin-inline-start:auto}
  .posbrand button{padding:8px 10px;font-size:12.5px}
  .possearch input{height:44px;font-size:14px}
  /* .postop__end held 406px of a 590px toolbar — a cashier chip and three status badges — which left the
     brand strip and the search field both pinned at their floors. It gives back the way the ≤900px layout
     already does, and a badge in its GOOD state shows only its icon. A badge in its BAD state keeps every
     word, because «الطابعة غير معدّة» is the one that has to be readable across a counter.
     The branch POS (app.js posToolbarHTML) fills this same block with the same pieces plus a branch chip,
     and renders into the identical .posx/.postop/.posbody/.poscart shell — one rule, both tills. */
  .poswho,.poschip{display:none}              /* ≤900px already hides these; a bare avatar says nothing */
  .postop__end .posbadge--time{display:none}  /* a POS terminal has a system clock two centimetres above this */
  .posstatus{gap:4px}
  .postop__end .posbadge{padding:6px 8px;font-size:11.5px}
  .postop__end .posbadge--ok>span{display:none}
  .poscats{padding:6px 12px}
  .poscat{min-height:44px;padding:9px 15px;font-size:13.5px}
  /* the cart's own chrome */
  .poscart__h{padding:8px 13px}
  .poscart__title{font-size:15px}
  .otypesx{margin:8px 13px 0;padding:3px}
  .otypesx button{padding:0 6px;min-height:44px;font-size:13px}
  .ottable{margin:8px 13px 0;width:calc(100% - 26px);min-height:46px;font-size:13.5px}
  .poscart__items{padding:3px 13px;min-height:0}
  .poscart__foot{padding:9px 13px}
  .poscart__foot .sumx{padding:1px 0;font-size:12.5px}
  .poscart__foot .sumx--tot{font-size:15px;padding-top:6px;margin-top:4px}
  .paybtn{height:50px;margin-top:8px;font-size:15px;border-radius:12px}
  .paybtn__hint{margin-top:4px;font-size:12px}
  .empbtn{height:44px;margin-top:7px;font-size:13.5px}
  .empband{padding:7px 10px;margin-bottom:8px}
  .empband__ic{width:28px;height:28px}
  /* a denser row that still hands the finger a 44px stepper and a 44px delete */
  .citemx{padding:7px 0;gap:9px;min-height:0}
  .citemx__thumb,.citemx__thumb--none{width:44px;height:44px}
  .citemx__side{gap:4px}
  .citemx__n{font-size:13px}
  .citemx__o,.citemx__u{font-size:11px}
  .citemx__tot{font-size:13px}
}
/* the tablet rail already narrows the cart column; the pinned panel follows it rather than guessing */
@media (min-width:901px) and (max-width:1240px) and (max-height:820px){
  .posx{--upos-cart:328px}
}

/* ============================================================
   Unified multi-brand operations gateway — login
   ============================================================ */
.lgn{position:fixed;inset:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:26px;z-index:50;
  --lg-cream:#f4efe6;--lg-cream2:#fdfaf4;--lg-ink:#231e17;--lg-muted:#6f6656;--lg-line:#eae0d0;
  --lg-hero1:#26302a;--lg-hero2:#1a201b;--lg-graphite:#48413a;--lg-gold:#c79b46;--lg-btn1:#333b31;--lg-btn2:#232a24;
  --lg-demi:#d63c28;--lg-light:#6fae35;--lg-sweet:#e0785c;
  background:radial-gradient(130% 120% at 100% 0%,#efe8db 0%,#f4efe6 46%,#efe9de 100%);
  font-family:'IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,sans-serif;color:var(--lg-ink)}
.lgn__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lgn__amb{position:absolute;border-radius:50%;filter:blur(80px)}
.lgn__amb--g{width:460px;height:460px;background:radial-gradient(circle,rgba(111,174,53,.17),transparent 70%);top:-200px;inset-inline-start:-160px}
.lgn__amb--o{width:420px;height:420px;background:radial-gradient(circle,rgba(214,60,40,.14),transparent 70%);top:32%;inset-inline-end:-190px}
.lgn__amb--p{width:420px;height:420px;background:radial-gradient(circle,rgba(226,120,92,.14),transparent 70%);bottom:-200px;inset-inline-start:30%}
.lgn__stage{position:relative;z-index:1;width:min(1140px,100%);display:grid;grid-template-columns:.92fr 1.08fr;background:var(--lg-cream2);border:1px solid var(--lg-line);border-radius:30px;overflow:hidden;box-shadow:0 40px 90px -34px rgba(38,28,12,.42),0 1px 0 rgba(255,255,255,.7) inset;min-height:min(680px,88vh)}
/* form panel */
.lgn__panel{padding:40px 44px;display:flex;align-items:center;background:var(--lg-cream2)}
.lgn__card{width:100%;max-width:392px;margin:0 auto}
.lgn__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}
.lgn__tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--lg-muted);background:var(--lg-cream);border:1px solid var(--lg-line);border-radius:20px;padding:6px 12px}
.lgn__tag svg{color:var(--lg-graphite)}
.lgn__lang{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:20px;border:1px solid var(--lg-line);background:#fff;color:var(--lg-ink);font-weight:700;font-size:12.5px;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.lgn__lang svg{color:var(--lg-muted)}
.lgn__lang:hover{border-color:var(--lg-graphite);box-shadow:0 6px 14px -8px rgba(40,30,15,.3)}
.lgn__lang:focus-visible{outline:2px solid var(--lg-gold);outline-offset:2px}
/* unified brand system */
.ubs{display:flex;flex-direction:column;align-items:center;margin-bottom:24px}
/* THE FIRST THING VP.audit() FOUND IN THIS APP, on this very page: 10.5px, below the 11px floor below
   which Arabic diacritics stop resolving on a tablet screen. Both languages were under it. The colour
   was never the problem — #6f6656 on this cream measures 5.43:1, comfortably past 4.5.

   THE SECOND DEFECT IS THE ONE NO AUDITOR MEASURES. `letter-spacing:.13em` is a Latin eyebrow device:
   it opens up capitals that stand apart anyway. Arabic is cursive — its letters JOIN — and a browser
   applies letter-spacing between every glyph pair, so the joins are pulled open and «منظومة» renders as
   a row of separated shapes. It is not a matter of taste: it breaks the writing system. `uppercase` is
   simply a no-op on Arabic, and is dropped with it rather than left as a line that means nothing.

   `applyDir()` sets `documentElement.lang`, so `:lang(ar)` is the same authority the direction already
   comes from — not a second guess at which language is showing. */
.ubs__title{font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--lg-muted);text-transform:uppercase;text-align:center;line-height:1.6;margin-bottom:13px}
:lang(ar) .ubs__title{font-size:13px;letter-spacing:0;text-transform:none;line-height:1.75}
.ubs__rail{display:flex;align-items:center;justify-content:center;width:100%;padding:16px 14px;background:linear-gradient(180deg,#fff,#fbf7ef);border:1px solid var(--lg-line);border-radius:18px;position:relative;overflow:hidden;box-shadow:0 10px 26px -20px rgba(40,30,15,.5)}
.ubs__rail::before{content:"";position:absolute;top:0;inset-inline:12%;height:2.5px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--lg-light),var(--lg-sweet),var(--lg-demi));opacity:.9}
.ubs__node{position:relative;display:flex;align-items:center;justify-content:center;height:48px;padding:0 8px;flex:0 0 auto;opacity:0;animation:lgnRise .55s cubic-bezier(.2,.7,.3,1) forwards;transition:transform .24s cubic-bezier(.34,1.4,.5,1)}
.ubs__halo{position:absolute;top:50%;left:50%;width:96px;height:96px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--glow),.2),transparent 66%)}
.ubs__node:hover{transform:translateY(-2px)}
.ubs__node:hover .ubs__halo{background:radial-gradient(circle,rgba(var(--glow),.34),transparent 66%)}
.ubs__logo{position:relative;z-index:1;max-height:44px;max-width:108px;width:auto;object-fit:contain}
.ubs__logo--sweet{max-height:48px}
.ubs__logo--demi{max-height:41px}
.ubs__link{flex:1 1 auto;height:2px;max-width:60px;margin:0 2px;border-radius:2px;background:linear-gradient(90deg,var(--c1),var(--c2));opacity:.55;transform:scaleX(0);animation:lgnDraw .55s cubic-bezier(.4,.7,.3,1) forwards}
.ubs__hub{display:inline-flex;align-items:center;gap:8px;margin-top:13px;font-size:11.5px;font-weight:600;color:var(--lg-muted);background:var(--lg-cream2);border:1px solid var(--lg-line);border-radius:20px;padding:5px 13px}
.ubs__hubIco{color:var(--lg-graphite);display:flex}
/* heading */
.lgn__title{font-size:26px;font-weight:800;margin:0;letter-spacing:-.01em}
.lgn__sub{margin:5px 0 0;font-size:13.5px;color:var(--lg-muted)}
/* state banner */
.lgn__err{max-height:0;overflow:hidden;opacity:0;font-size:12.5px;line-height:1.55;border-radius:11px;margin-top:14px;display:flex;align-items:center;gap:8px;transition:max-height .3s,opacity .3s,padding .3s}
.lgn__err.show{max-height:100px;opacity:1;padding:11px 13px}
.lgn__err--lock{background:rgba(214,60,40,.09);color:#b23a2a;border:1px solid rgba(214,60,40,.2)}
.lgn__err--net{background:rgba(72,65,58,.09);color:#57503f;border:1px solid rgba(72,65,58,.22)}
.lgn__err--info{background:rgba(52,122,67,.09);color:#2c6b3a;border:1px solid rgba(52,122,67,.24)}
.lgn__err.shake{animation:lgnShake .42s cubic-bezier(.36,.07,.19,.97)}
/* form */
.lgn__form{margin-top:18px;display:flex;flex-direction:column;gap:15px}
.lgn__field{display:flex;flex-direction:column;gap:7px}
.lgn__lbl{font-size:12.5px;font-weight:700;color:var(--lg-ink)}
.lgn__inpwrap{position:relative;display:flex;align-items:center}
.lgn__inpwrap>svg{position:absolute;inset-inline-start:14px;color:var(--lg-muted);pointer-events:none;transition:color .2s}
.lgn__inp{width:100%;height:54px;border:1px solid var(--lg-line);border-radius:14px;background:#fff;color:var(--lg-ink);font:inherit;font-size:14.5px;padding-inline:44px 14px;transition:border-color .2s,box-shadow .2s}
.lgn__inp--pw{padding-inline-end:46px}
.lgn__inp::placeholder{color:#b6ad9b}
.lgn__inp:focus{outline:none;border-color:var(--lg-graphite);box-shadow:0 0 0 4px rgba(72,65,58,.1)}
.lgn__inpwrap:focus-within>svg{color:var(--lg-graphite)}
.lgn__eye{position:absolute;inset-inline-end:8px;background:transparent;border:0;color:var(--lg-muted);cursor:pointer;padding:9px;border-radius:10px;display:flex;transition:.16s}
.lgn__eye:hover{color:var(--lg-ink);background:rgba(0,0,0,.045)}
.lgn__eye:focus-visible{outline:2px solid var(--lg-gold);outline-offset:1px}
.lgn__caps{display:none;align-items:center;gap:5px;font-size:11px;color:#96690b;background:rgba(234,164,29,.13);border-radius:8px;padding:4px 9px;align-self:flex-start;margin-top:1px}
.lgn__caps.show{display:inline-flex}
.lgn__fx{display:none;font-size:11.5px;color:#c33a2c;margin-top:1px}
.lgn__fx.show{display:block}
.lgn__field.has-err .lgn__inp{border-color:#d9534f;box-shadow:0 0 0 3px rgba(217,83,79,.1)}
.lgn__field.has-err .lgn__inpwrap>svg{color:#d9534f}
.lgn__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-1px}
.lgn__remember{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--lg-muted);cursor:pointer;user-select:none}
.lgn__remember input{position:absolute;opacity:0;width:0;height:0}
.lgn__box{width:19px;height:19px;border:1.6px solid var(--lg-line);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;transition:.18s}
.lgn__box svg{opacity:0;transform:scale(.4);transition:.18s}
.lgn__remember input:checked+.lgn__box{background:var(--lg-graphite);border-color:var(--lg-graphite)}
.lgn__remember input:checked+.lgn__box svg{opacity:1;transform:none}
.lgn__remember input:focus-visible+.lgn__box{box-shadow:0 0 0 3px rgba(199,155,70,.35)}
.lgn__forgot{font-size:12.5px;color:var(--lg-muted);text-decoration:none;transition:color .18s}
.lgn__forgot:hover{color:var(--lg-graphite);text-decoration:underline}
/* button */
.lgn__btn{position:relative;overflow:hidden;margin-top:8px;height:54px;border:0;border-radius:15px;background:linear-gradient(180deg,var(--lg-btn1),var(--lg-btn2));color:#f5f1e8;font:inherit;font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 14px 30px -15px rgba(28,24,18,.62);transition:transform .18s,box-shadow .18s}
.lgn__btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(28,24,18,.72)}
.lgn__btn:active{transform:translateY(0)}
.lgn__btn:disabled{cursor:progress}
.lgn__btn:focus-visible{outline:2px solid var(--lg-gold);outline-offset:2px}
.lgn__btnArrow{display:flex;transition:transform .2s}
.lgn__btn:hover .lgn__btnArrow{transform:translateX(-4px)}
.lgn__btnAccent{position:absolute;bottom:0;inset-inline:0;height:2.5px;background:linear-gradient(90deg,var(--lg-light),var(--lg-sweet),var(--lg-demi));opacity:.85}
.lgn__spin{display:none;width:18px;height:18px;border:2.5px solid rgba(245,241,232,.35);border-top-color:#f5f1e8;border-radius:50%;animation:lgnSpin .7s linear infinite}
.lgn__btn.is-loading .lgn__spin{display:inline-block}
.lgn__btn.is-loading .lgn__btnArrow{display:none}
.lgn__secure{display:flex;align-items:flex-start;gap:9px;margin-top:20px;font-size:12px;color:var(--lg-muted);line-height:1.65}
.lgn__secure svg{flex:none;color:var(--lg-graphite);margin-top:1px}
/* statement panel */
.lgn__hero{position:relative;background:linear-gradient(158deg,var(--lg-hero1),var(--lg-hero2));color:#f2eee4;padding:56px 52px;display:flex;align-items:center;overflow:hidden}
.lgn__hero::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 52% at 82% 14%,rgba(224,120,92,.14),transparent 60%),radial-gradient(55% 50% at 12% 90%,rgba(111,174,53,.14),transparent 60%);pointer-events:none}
.lgn__hero::after{content:"";position:absolute;inset-block:0;inset-inline-start:-1px;width:2px;background:linear-gradient(var(--lg-light),var(--lg-sweet),var(--lg-demi));opacity:.35}
.lgn__streams{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55;animation:lgnBreathe 13s ease-in-out infinite}
.lgn__stream{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:640;stroke-dashoffset:640;animation:lgnDrawStroke 2.8s ease-out forwards}
.lgn__stream--g{stroke:var(--lg-light);animation-delay:.35s}
.lgn__stream--p{stroke:var(--lg-sweet);animation-delay:.55s}
.lgn__stream--o{stroke:var(--lg-demi);animation-delay:.75s}
.lgn__heroIn{position:relative;z-index:1;max-width:440px}
.lgn__eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--lg-gold);text-transform:uppercase}
.lgn__slogan{margin:18px 0 0;line-height:1.15}
.lgn__s{display:block}
.lgn__s1{font-size:clamp(18px,2vw,21px);font-weight:600;color:#c8c1b1}
.lgn__s2{font-size:clamp(33px,4.4vw,50px);font-weight:800;letter-spacing:-.015em;margin:2px 0;background:linear-gradient(92deg,#fff,#f0e4c8 72%,#e6cf9c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lgn__s3{font-size:clamp(18px,2vw,21px);font-weight:600;color:#c8c1b1}
.lgn__lead{margin:20px 0 0;font-size:15px;line-height:1.95;color:#c2bbac;max-width:36ch}
.lgn__values{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:28px}
.lgn__value{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:#eae3d5}
.lgn__value svg{color:var(--lg-gold)}
.lgn__vsep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.28)}
/* entrance */
.lgn__r0,.lgn__r1,.lgn__r2,.lgn__r3,.lgn__r4,.lgn__r5,.lgn__r6,.lgn__r7,.lgn__eyebrow,.lgn__s1,.lgn__s2,.lgn__s3,.lgn__lead,.lgn__values{opacity:0;animation:lgnRise .7s cubic-bezier(.2,.7,.3,1) forwards}
.lgn__r0{animation-delay:.04s}.lgn__r1{animation-delay:.12s}.lgn__r2{animation-delay:.5s}.lgn__r3{animation-delay:.58s}.lgn__r4{animation-delay:.66s}.lgn__r5{animation-delay:.74s}.lgn__r6{animation-delay:.82s}.lgn__r7{animation-delay:.9s}
.lgn__eyebrow{animation-delay:.16s}.lgn__s1{animation-delay:.26s}.lgn__s2{animation-delay:.34s}.lgn__s3{animation-delay:.42s}.lgn__lead{animation-delay:.52s}.lgn__values{animation-delay:.62s}
@keyframes lgnRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lgnDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lgnDrawStroke{to{stroke-dashoffset:0}}
@keyframes lgnSpin{to{transform:rotate(360deg)}}
@keyframes lgnBreathe{0%,100%{opacity:.5}50%{opacity:.62}}
@keyframes lgnShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
/* responsive */
@media (max-width:900px){
  .lgn{padding:0;align-items:stretch}
  .lgn__stage{grid-template-columns:1fr;border-radius:0;min-height:100vh;width:100%;box-shadow:none}
  .lgn__panel{padding:34px 22px 30px}
  .lgn__hero{padding:36px 26px 42px;min-height:auto}
  .lgn__hero::after{display:none}
  .lgn__streams{display:none}
  .lgn__lead{max-width:none}
}
@media (max-width:560px){
  .lgn__amb{display:none}
  .ubs__node{height:40px}.ubs__logo{max-height:34px}.ubs__logo--sweet{max-height:38px}.ubs__logo--demi{max-height:32px}
  .ubs__link{max-width:30px}
  .lgn__values{gap:8px;margin-top:18px}
  .lgn__title{font-size:23px}.lgn__card{max-width:100%}
  .lgn__s2{font-size:clamp(28px,8.5vw,36px)}
}
@media (prefers-reduced-motion:reduce){
  .lgn *,.lgn__streams{animation:none!important}
  .lgn__r0,.lgn__r1,.lgn__r2,.lgn__r3,.lgn__r4,.lgn__r5,.lgn__r6,.lgn__r7,.lgn__eyebrow,.lgn__s1,.lgn__s2,.lgn__s3,.lgn__lead,.lgn__values,.ubs__node{opacity:1!important}
  .ubs__link{transform:scaleX(1)!important}
  .lgn__stream{stroke-dashoffset:0!important}
}

/* ===== CK6 — central-kitchen board (branch → central kitchen requests) ===== */
.ckwrap{display:flex;flex-direction:column;gap:16px}
.ckbar{display:flex;gap:8px;flex-wrap:wrap}
.ckchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:22px;padding:7px 14px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.ckchip:hover{border-color:#1f6f8b66}
.ckchip.active{background:#1f6f8b;border-color:#1f6f8b;color:#fff}
.ckchip__n{font-size:11.5px;font-weight:700;background:rgba(0,0,0,.08);border-radius:20px;min-width:20px;text-align:center;padding:1px 6px}
.ckchip.active .ckchip__n{background:rgba(255,255,255,.24)}
/* ===== «إرسال للمطبخ» — cashier-driven kitchen send (bilingual item picker) ===== */
.mini--kot{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent);font-weight:800}
.ksend{width:min(440px,96vw);max-height:88dvh;display:flex;flex-direction:column;padding:0;overflow:hidden}
.ksend-h{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--border)}
.ksend-h__t{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--text)}
.ksend-h__s{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.ksend-all{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text);cursor:pointer;background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.ksend-all input,.ksend-cb{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;flex:0 0 auto}
.ksend-list{overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:7px;min-height:0}
.ksend-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1.5px solid var(--border);border-radius:13px;cursor:pointer;transition:.14s var(--ease);background:var(--surface)}
.ksend-row.on{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.ksend-row:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.ksend-q{font-size:17px;font-weight:800;color:var(--accent);min-width:2.1em;text-align:center;flex:0 0 auto}
.ksend-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ksend-ar{font-size:15px;font-weight:800;color:var(--text);line-height:1.25;word-break:break-word}
.ksend-en{font-size:12px;font-weight:600;color:var(--muted);direction:ltr;text-align:right;line-height:1.2}
.ksend-op{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px;padding-inline-start:6px;border-inline-start:2px solid color-mix(in srgb,var(--accent) 40%,var(--border))}
.ksend-tick{flex:0 0 auto;color:var(--accent);opacity:0;transition:opacity .14s}
.ksend-row.on .ksend-tick{opacity:1}
.ksend-f{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--border)}
.ksend-f .btn-primary{flex:1;justify-content:center;min-height:48px;font-size:15px;font-weight:800}
.ksend-f .btn-primary:disabled{opacity:.5;cursor:default}
.ksend-f .mini{min-height:48px;padding-inline:18px}
.ksend-grp{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--muted);padding:8px 2px 2px;text-transform:uppercase;letter-spacing:.02em}
.ksend-grp:first-child{padding-top:2px}
.ksend-grp__dot{width:9px;height:9px;border-radius:50%;flex:none}
.ksend-noprep{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:2px 8px 2px 6px;width:fit-content}
.ksend-noprep .licon{flex:none;width:11px;height:11px}
.cknote{display:flex;align-items:center;gap:9px;background:#fdf6e6;border:1px solid #eaa41d55;color:#8a6410;border-radius:12px;padding:11px 14px;font-size:13px;font-weight:600}
.cknote--late{background:rgba(220,38,38,.07);border-color:var(--danger)55;color:var(--danger)}
.ckstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ckstat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;text-align:center}
.ckstat__n{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.ckstat__l{font-size:11.5px;color:var(--muted);margin-top:5px;font-weight:600}
.ckgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.ckcard{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;border-top:5px solid var(--ckc,#1f6f8b)}
.ckcard--late{box-shadow:0 0 0 2px rgba(220,38,38,.35);animation:ktpulse 1.6s ease-in-out infinite}
.ckcard__h{display:flex;align-items:center;gap:8px;padding:11px 14px 9px;flex-wrap:wrap}
.ckcard__no{font-weight:700;font-size:16px}
.ckcard__brand{font-size:11px;background:var(--accent-soft);color:var(--accent);padding:2px 9px;border-radius:20px;font-weight:600}
.ckcard__st{margin-inline-start:auto;font-size:11.5px;font-weight:700;border:1px solid;border-radius:20px;padding:3px 11px;white-space:nowrap}
.ckcard__meta{display:flex;align-items:center;gap:7px;padding:0 14px 9px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.ckcard__meta svg{opacity:.7}
.ckcard__late{background:var(--danger);color:#fff;font-weight:700;border-radius:20px;padding:1px 8px;font-size:11px;margin-inline-start:auto}
.ckcard__tkt{display:inline-flex;align-items:center;gap:3px;color:#b9770f;font-weight:600;font-size:11px;background:#fdf6e6;border-radius:20px;padding:1px 8px}
.ckcard__items{padding:10px 14px;display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--border);flex:1}
.ckit{display:flex;align-items:baseline;gap:9px;font-size:14px}
.ckit__q{font-weight:700;color:#1f6f8b;min-width:28px}
.ckit__n{font-weight:500}
.ckit__note{font-size:11px;color:var(--muted);background:var(--bg);border-radius:6px;padding:1px 7px}
.ckreason{margin:0 14px 12px;font-size:12px;color:var(--danger);background:rgba(220,38,38,.06);border-radius:8px;padding:7px 10px}
.ckcard__foot{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--border)}
.ckbtn{flex:1;border:0;border-radius:10px;font:inherit;font-weight:700;font-size:14px;padding:11px;cursor:pointer;transition:transform .1s}
.ckbtn--go{background:#1f6f8b;color:#fff}
.ckbtn--no{background:var(--bg);color:var(--danger);border:1px solid var(--danger)55;flex:0 0 auto;padding:11px 16px}
.ckbtn--tkt{background:var(--bg);color:var(--muted);border:1px solid var(--border);flex:0 0 auto;padding:11px 13px;display:inline-flex;align-items:center}
.ckbtn--tkt:hover{color:#1f6f8b;border-color:#1f6f8b66}
.ck-obadge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;border:1px solid;border-radius:16px;padding:2px 8px;margin-inline-start:6px;white-space:nowrap;vertical-align:middle}
.ck-obadge svg{opacity:.85}
.ckbtn:active{transform:scale(.97)}
.ckbtn:disabled{opacity:.6}
.ckempty{text-align:center;color:var(--muted);padding:64px 20px;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ckempty svg{opacity:.5}
@media(max-width:640px){.ckgrid{grid-template-columns:1fr}}

/* ============================================================================================
   OPERATIONAL PALETTE — the tokens the restaurant-operations screens are written against.

   opswaiter.js, opskds.js and opshub.js style themselves with --surf/--line/--ink/--nav/--ok/
   --warn/--err/--proc/--lock (and the matching *bg tints), following the convention set by
   dailyclose-ui.js and zatca-center.js. Those two scope the tokens to their own wrapper class;
   the operational screens render straight into #content and had NO declaration anywhere, so every
   one of these resolved to nothing. Measured consequence: the cashier's «تحصيل نقدي» button
   computed to background rgba(0,0,0,0) with color #fff — WHITE TEXT ON A WHITE CARD, an invisible
   control on the screen that takes money. Same values as the two screens above, declared once here
   so any future operational screen inherits them; the wrapper-scoped copies still win inside their
   own subtree, so nothing existing changes.
   ============================================================================================ */
:root{
  --nav:#0d4a3f;--nav2:#166a56;--ink:#1b2836;--line:#e5e9ef;--surf:#ffffff;
  --ok:#127a3a;--okbg:#e7f6ee;--warn:#9a6a00;--warnbg:#fdf3dd;--err:#b02a2a;--errbg:#fdeaea;
  --proc:#1e5fa8;--procbg:#e6f0fb;--lock:#6b7784;--lockbg:#eef1f5;
  /* SECONDARY INK **ON AN OPERATIONAL SURFACE** — deliberately NOT --muted, and deliberately a new token.
     --muted belongs to the app palette at the top of this file, which has no dark override BECAUSE the app
     chrome stays light: giving --muted a dark value would put #9aa7b4 on the #fff cards and #f6f5f3 page
     that every other screen still paints, measured 2.45:1, breaking far more than it fixed. And no single
     value can serve both: 4.5:1 on #161d25 needs a light grey, 4.5:1 on #f6f5f3 needs a dark one. So the
     two cases get two tokens, and only text that sits INSIDE a --surf panel uses this one. */
  --surfmut:#645f55;
}
@media(prefers-color-scheme:dark){
  :root{--ink:#e8ecf1;--line:#26313d;--surf:#161d25;--surfmut:#9aa7b4;
    --okbg:#0f2a1a;--warnbg:#2a2410;--errbg:#2a1414;--procbg:#0f2333;--lockbg:#1a222b}
}

/* ===== Touch minimum for the shared shell chrome =====
   The restaurant-operations screens run on kitchen and waiter TABLETS, where a control smaller than
   44px on its short side is a mis-tap. The shell's own chrome (menu toggle, brand switch, shift pill)
   sat at 42px / 29px — measured, not guessed, in the visual acceptance run. Raising the MINIMUM only:
   nothing shrinks, nothing moves, and the mouse-driven admin layout is unchanged. */
.navtoggle{min-width:44px;min-height:44px}
.switch button{min-height:44px}
#shiftPill .sg-pill,.sg-pill{min-height:44px}
#subtabs .filters button{min-height:44px}
.drawernav__i{min-height:44px}

/* The top bar already wraps, but its right-hand group could not SHRINK: the shift pill is capped at
   340px and the brand switch adds ~250px, so on a 430px waiter phone the bar demanded 630px and dragged
   the whole document 230px sideways (measured: html.scrollWidth 660 vs clientWidth 430). Letting the
   group wrap and the pill give way keeps the page inside its own width. */
@media(max-width:900px){
  .topbar{align-items:flex-start}
  .topbar>div{min-width:0;flex-wrap:wrap}
  .topbar__l h1{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #shiftPill{min-width:0;max-width:100%}
  #shiftPill .sg-pill,.sg-pill{max-width:100%}
  /* the account dock sits in the row-mode sidebar; its name/id were squeezed to 7px and clipped, and
     the role badge was pushed 14px off the leading edge on a 430px phone */
  .acct__name,.acct__id{display:none}
  .acct__badge{max-width:100%}
  /* the row-mode sidebar hard-clipped its last 14px with overflow:hidden, so the final nav icon was
     unreachable. Let it scroll instead — nothing is hidden, nothing is lost. */
  .sidebar{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
}

/* Collapsed notifier (§F): during a financial confirmation — or anywhere on a financial screen — the new-order
   bar shrinks to a counted pill in the corner instead of spanning the top of the page. It keeps its z-index
   well below every modal scrim (9400+), so even at full size it can never paint over one. */
.newbar--mini{inset-block-start:auto;inset-block-end:18px;inset-inline-start:18px;inset-inline-end:auto;
  max-width:none;width:auto;margin:0;padding:9px 14px;border-radius:999px;cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.5)}
.newbar--mini .newbar__head{gap:9px}
.newbar--mini .newbar__c{font-size:11px;opacity:.85}

/* §G/§H — on a place-scoped financial screen the brand switcher is not a filter, it is a false promise.
   Hidden rather than disabled: a greyed-out pill still tells the reader the number might be brand-scoped. */
body.brandless #bswitch{display:none}

/* ═══ connection-truth pill (P22, 2026-08-12) ═══════════════════════════════════════════════════════════
   Painted by liveorders.js on the order-displaying screens: «متصل» while the reconciliation loop is
   syncing, «جارٍ إعادة الاتصال…» while it retries, «آخر تحديث منذ …» once staleness is old enough to
   matter. It sits on BOTH palettes (the KDS/hub headers use the operational --surf/--ink, the Orders
   Center header uses the app --surface/--text), so every colour names a fallback into the other palette —
   the same one-surface-one-ink rule the dark-mode incident taught. The dots are STATE tints (ok/warn/err
   semantics), deliberately literal. */
.kd-live{margin-inline-start:auto;align-self:center}
/* the pill sits in HEADERS, which live on the light APP surface even when the operational panels below go
   dark — so a transparent pill inheriting the dark palette's ink measured 2.25:1 there. It therefore
   paints ITS OWN surface and ink from ONE palette (the operational one, falling back to the app one):
   self-contained on either ground. */
.lv-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;line-height:1;
  border:1px solid var(--line,var(--border));border-radius:999px;padding:5px 11px;white-space:nowrap;
  color:var(--surfmut,var(--muted));background:var(--surf,var(--card,#fff))}
.lv-pill i{width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block;flex:none}
.lv-pill.lv-bad i{background:#ef4444;animation:lvblink 1.1s ease-in-out infinite}
.lv-pill.lv-old i{background:#f59e0b}
@keyframes lvblink{50%{opacity:.3}}

/* =============================================================================================
   Reports command centre — one searchable, routed door to every report
   ============================================================================================= */
.rc{--rc-ink:#172235;--rc-muted:#687181;--rc-line:#e8e3df;--rc-paper:#fffdfa;--rc-blush:#fff4f4;
  --rc-gold:#bd8419;max-width:1760px;margin-inline:auto;color:var(--rc-ink);animation:rcPageIn .34s var(--ease) both}
.rc *{box-sizing:border-box}
.rc-icon{width:20px;height:20px}
.rc button,.rc input{font-family:inherit}
.rc-kicker{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.08em;margin-bottom:5px}
.rc-hero{display:grid;grid-template-columns:minmax(0,1fr) 390px;grid-template-areas:"command stats";gap:14px;margin-bottom:14px}
.rc-command{grid-area:command;position:relative;isolation:isolate;overflow:hidden;min-height:248px;padding:30px 34px;
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--rc-line));border-radius:22px;background:
  linear-gradient(125deg,color-mix(in srgb,var(--accent) 6%,#fff) 0%,var(--rc-paper) 58%,color-mix(in srgb,var(--accent) 3%,#fff) 100%);
  box-shadow:0 18px 46px -34px rgba(30,25,24,.42)}
.rc-command h2{position:relative;z-index:2;font-size:clamp(24px,2.2vw,34px);line-height:1.25;letter-spacing:-.025em;margin:0 0 5px;font-weight:850}
.rc-command>p{position:relative;z-index:2;color:var(--rc-muted);font-size:14px;margin:0 0 21px}
.rc-command>.rc-kicker{position:relative;z-index:2}
.rc-command__art{position:absolute;z-index:0;inset-inline-start:-35px;inset-block:0;width:44%;opacity:.38;pointer-events:none;transform:rotate(-3deg)}
.rc-command__art i{position:absolute;inset-inline-start:0;width:115%;height:74px;border:1.5px solid color-mix(in srgb,var(--accent) 58%,transparent);border-radius:50%;transform:skewX(-23deg)}
.rc-command__art i:nth-child(1){top:30px}.rc-command__art i:nth-child(2){top:69px;opacity:.7}.rc-command__art i:nth-child(3){top:108px;opacity:.4}
.rc-search{position:relative;z-index:2;display:flex;align-items:center;gap:11px;width:min(760px,82%);height:58px;padding:0 16px;
  background:#fff;border:1px solid var(--rc-line);border-radius:15px;box-shadow:0 14px 30px -24px rgba(22,27,35,.5);transition:.18s var(--ease)}
.rc-search:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--rc-line));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent),0 18px 34px -25px rgba(22,27,35,.55)}
.rc-search svg{width:21px;height:21px;color:var(--accent);flex:none}.rc-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--rc-ink);font-size:14.5px;height:100%;margin:0}
.rc-search input::placeholder{color:#9a9da4}.rc-search kbd{direction:ltr;border:1px solid var(--rc-line);background:#f8f6f3;border-radius:7px;padding:2px 7px;color:var(--rc-muted);font:600 11px/1.5 inherit}
.rc-prompts{position:relative;z-index:2;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:15px;color:var(--rc-muted);font-size:11.5px}
.rc-prompts>span{font-weight:750}.rc-prompts button{border:1px solid var(--rc-line);background:rgba(255,255,255,.8);color:var(--rc-muted);padding:6px 11px;border-radius:999px;cursor:pointer;transition:.16s var(--ease)}
.rc-prompts button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--rc-line));color:var(--accent);transform:translateY(-1px)}
.rc-stats{grid-area:stats;display:grid;grid-template-columns:1fr 1fr;background:var(--rc-paper);border:1px solid var(--rc-line);border-radius:22px;overflow:hidden;box-shadow:0 18px 46px -34px rgba(30,25,24,.4)}
.rc-stat{position:relative;display:grid;grid-template-columns:42px 1fr;align-content:center;align-items:center;gap:10px;min-height:123px;padding:18px;border-inline-start:1px solid var(--rc-line);border-block-end:1px solid var(--rc-line);background:transparent;outline:none}
.rc-stat:nth-child(2n+1){border-inline-start:0}.rc-stat:nth-last-child(-n+2){border-block-end:0}
.rc-stat.is-clickable{cursor:pointer;transition:.16s var(--ease)}.rc-stat.is-clickable:hover,.rc-stat.is-clickable:focus-visible{background:color-mix(in srgb,var(--accent) 5%,#fff);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent)}
.rc-stat__icon{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 7%,#fff);color:var(--accent)}
.rc-stat__icon svg{width:21px;height:21px}.rc-stat strong{display:block;font-size:25px;line-height:1;font-weight:850}.rc-stat span:not(.rc-stat__icon){display:block;margin-top:6px;color:var(--rc-muted);font-size:11.5px;font-weight:650}.rc-stat small{grid-column:1/-1;color:#96989e;font-size:10.5px}
.rc-cats{position:relative;display:flex;gap:7px;overflow-x:auto;padding:8px;margin-bottom:18px;background:var(--rc-paper);border:1px solid var(--rc-line);border-radius:17px;box-shadow:0 12px 30px -26px rgba(25,27,34,.45);scrollbar-width:none;scroll-snap-type:x proximity}.rc-cats::-webkit-scrollbar{display:none}
.rc-cat{position:relative;flex:1 0 145px;min-width:145px;min-height:58px;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:8px 11px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--rc-muted);cursor:pointer;scroll-snap-align:start;text-align:start;transition:.16s var(--ease)}
.rc-cat:hover{background:#faf8f5;color:var(--rc-ink)}.rc-cat.is-active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,#fff),#fff);border-color:color-mix(in srgb,var(--accent) 42%,var(--rc-line));color:var(--rc-ink);box-shadow:0 9px 22px -18px var(--accent)}
.rc-cat.is-active::after{content:"";position:absolute;inset-inline:18px;bottom:-9px;height:2px;background:var(--accent);border-radius:4px}
.rc-cat__icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#f5f3f0;color:#536070}.rc-cat.is-active .rc-cat__icon{background:color-mix(in srgb,var(--accent) 11%,#fff);color:var(--accent)}
.rc-cat__icon svg{width:18px;height:18px}.rc-cat__text{font-size:12px;font-weight:750;white-space:normal;line-height:1.35}.rc-cat__count{min-width:23px;height:23px;padding-inline:5px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#f2efec;color:#777;font-size:10.5px;font-weight:800}.rc-cat.is-active .rc-cat__count{background:var(--accent);color:var(--accent-fg)}
.rc-journey{position:relative;margin:4px 0 24px;padding:18px 20px 20px;border:1px solid color-mix(in srgb,var(--accent) 14%,var(--rc-line));border-radius:20px;background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--accent) 3%,#fff));overflow:hidden}
.rc-journey::after{content:"";position:absolute;width:180px;height:180px;inset-inline-end:-90px;top:-110px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:50%;box-shadow:0 0 0 28px color-mix(in srgb,var(--accent) 2.5%,transparent),0 0 0 56px color-mix(in srgb,var(--accent) 2%,transparent)}
.rc-sectionhead,.rc-library__head{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}.rc-sectionhead h2,.rc-library__head h2{font-size:20px;margin:0;font-weight:850;letter-spacing:-.02em}.rc-sectionhead p{color:var(--rc-muted);font-size:12px;margin:3px 0 0}.rc-sectionhead__spark{color:var(--rc-gold);font-size:23px}
.rc-journey__grid,.rc-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rc-library{position:relative;padding-inline-start:18px}.rc-library::before{content:"";position:absolute;inset-inline-start:0;top:2px;bottom:8px;width:2px;border-radius:3px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 15%,transparent) 62%,transparent)}
.rc-result{display:flex;align-items:baseline;gap:6px;color:var(--rc-muted);font-size:11.5px}.rc-result strong{color:var(--accent);font-size:18px}
.rc-card{position:relative;min-width:0;min-height:168px;padding:17px 17px 15px;display:flex;flex-direction:column;background:var(--rc-paper);border:1px solid var(--rc-line);border-radius:17px;cursor:pointer;outline:none;overflow:hidden;box-shadow:0 10px 28px -26px rgba(27,31,39,.6);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.rc-card__hit{position:absolute;z-index:1;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;border-radius:inherit}.rc-card__hit:focus-visible{outline:2.5px solid var(--text);outline-offset:-4px}.rc-card:has(.rc-card__hit:focus-visible){transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--rc-line));box-shadow:0 18px 36px -24px color-mix(in srgb,var(--accent) 35%,rgba(20,20,20,.35))}
.rc-card::after{content:"";position:absolute;inset-block:18px;inset-inline-end:0;width:2px;border-radius:3px;background:color-mix(in srgb,var(--accent) 50%,transparent);opacity:0;transition:.18s}
.rc-card:hover,.rc-card:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--rc-line));box-shadow:0 18px 36px -24px color-mix(in srgb,var(--accent) 35%,rgba(20,20,20,.35))}.rc-card:hover::after,.rc-card:focus-visible::after{opacity:1}
.rc-card--featured{min-height:156px;background:rgba(255,255,255,.86);backdrop-filter:blur(4px)}
.rc-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.rc-card__icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 8%,#fff);color:var(--accent)}.rc-card__icon svg{width:21px;height:21px}
.rc-fav{position:relative;z-index:2;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:#bbb4aa;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}.rc-fav svg{width:19px;height:19px}.rc-fav:hover{background:#fff8e8;color:var(--rc-gold);transform:scale(1.06)}.rc-fav.is-on{color:var(--rc-gold)}.rc-fav.is-on svg{fill:currentColor}
.rc-card__title{font-size:15px!important;line-height:1.45;margin:0 0 5px!important;font-weight:850!important;color:var(--rc-ink)}.rc-card__question{color:var(--rc-muted);font-size:12px;line-height:1.65;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-card__foot{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:auto}.rc-card__meta{display:flex;align-items:center;gap:7px;min-width:0;color:#8b8d94;font-size:10.5px}.rc-tag{display:inline-flex;align-items:center;max-width:145px;padding:3px 8px;border-radius:999px;background:#f5f1ef;color:#6e6870;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-open{width:34px;height:34px;border:1px solid var(--rc-line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:#fff;flex:none;transition:.16s}.rc-open svg{width:17px;height:17px}.rc-card:hover .rc-open,.rc-card:focus-visible .rc-open{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);transform:translateX(-2px)}
.rc-empty,.rc-error{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--rc-line);border-radius:18px;background:var(--rc-paper);color:var(--rc-muted);padding:30px}.rc-empty h3{color:var(--rc-ink);font-size:17px;margin:12px 0 2px}.rc-empty p{font-size:12.5px;margin:0 0 15px}.rc-empty__icon{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 8%,#fff);color:var(--accent)}.rc-empty__icon svg{width:23px}
.rc-error{gap:8px;border-style:solid;border-color:color-mix(in srgb,var(--danger) 25%,var(--rc-line));background:color-mix(in srgb,var(--danger) 4%,#fff);color:var(--danger)}.rc-error strong{font-size:17px}.rc-error span{font-size:12.5px}
.rc-softbtn,.rc-back{border:1px solid var(--rc-line);background:#fff;color:var(--rc-ink);border-radius:11px;padding:9px 14px;font:700 12px/1.4 inherit;cursor:pointer;transition:.16s}.rc-softbtn:hover,.rc-back:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 8px 18px -14px var(--accent)}
.rc-reporthead{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;margin-bottom:16px;border:1px solid var(--rc-line);border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 5%,#fff),#fff);box-shadow:0 14px 34px -28px rgba(20,20,25,.5)}
.rc-reporthead__title{display:flex;align-items:flex-start;gap:14px}.rc-reporthead__icon{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent);flex:none}.rc-reporthead__icon svg{width:24px}.rc-reporthead h2{font-size:23px;margin:0;font-weight:850}.rc-reporthead p{font-size:12.5px;color:var(--rc-muted);margin:4px 0 0}.rc-back{display:flex;align-items:center;gap:8px;white-space:nowrap}.rc-back svg{width:17px;height:17px;transform:rotate(180deg)}
.rc-reporthead__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.rc-command-center .rc-kicker .rc-kind{margin-inline-end:8px}.rc-command-center .rc-kicker .rc-crumb{display:inline-flex;vertical-align:middle}
.rc-reportbody>.card{border-color:var(--rc-line);box-shadow:0 12px 28px -26px rgba(20,25,35,.45)}
.rc-skeleton{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.rc-skel{height:168px;padding:20px;border:1px solid var(--rc-line);border-radius:17px;background:var(--rc-paper);overflow:hidden}.rc-skel i,.rc-skel b,.rc-skel span,.rc-loadinghead>*{display:block;border-radius:9px;background:linear-gradient(90deg,#f0eeeb 20%,#faf9f7 42%,#f0eeeb 64%);background-size:300% 100%;animation:rcShimmer 1.4s ease infinite}.rc-skel i{width:42px;height:42px}.rc-skel b{width:62%;height:15px;margin-top:16px}.rc-skel span{width:88%;height:10px;margin-top:12px}.rc-skel{animation-delay:calc(var(--i) * .05s)}
.rc-loadinghead{height:214px;margin-bottom:16px;padding:32px;border:1px solid var(--rc-line);border-radius:22px;background:var(--rc-paper)}.rc-loadinghead i{width:130px;height:12px}.rc-loadinghead b{width:42%;height:31px;margin-top:14px}.rc-loadinghead span{width:70%;height:55px;margin-top:22px}
@keyframes rcShimmer{0%{background-position:100% 0}100%{background-position:0 0}}@keyframes rcPageIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:1280px){.rc-hero{grid-template-columns:minmax(0,1fr) 330px}.rc-command{padding:27px}.rc-search{width:92%}.rc-grid,.rc-journey__grid,.rc-skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.rc{padding-top:2px}.rc-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"command" "stats"}.rc-command{min-height:230px}.rc-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.rc-stat{min-height:98px;border-block-end:0}.rc-stat:nth-child(2n+1){border-inline-start:1px solid var(--rc-line)}.rc-stat:first-child{border-inline-start:0}.rc-stat{grid-template-columns:34px minmax(0,1fr);padding:12px}.rc-stat__icon{width:34px;height:34px}.rc-stat small{display:none}.rc-cat{flex-basis:155px}.rc-reporthead{align-items:flex-start;flex-direction:column}.rc-reporthead__actions{width:100%;justify-content:stretch}.rc-reporthead__actions>*{flex:1}.rc-back{align-self:stretch;justify-content:center}}
@media(max-width:640px){.rc-command{padding:24px 18px;min-height:260px}.rc-command__art{display:none}.rc-search{width:100%;height:54px}.rc-search kbd{display:none}.rc-stats{grid-template-columns:1fr 1fr}.rc-stat{border-block-end:1px solid var(--rc-line)}.rc-stat:nth-last-child(-n+2){border-block-end:0}.rc-stat:nth-child(odd){border-inline-start:0}.rc-grid,.rc-journey__grid,.rc-skeleton{grid-template-columns:1fr}.rc-journey{padding:17px 14px}.rc-library{padding-inline-start:11px}.rc-card{min-height:155px}.rc-sectionhead,.rc-library__head{align-items:flex-start}.rc-reporthead{padding:18px}.rc-reporthead__title{gap:10px}.rc-reporthead h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.rc,.rc-skel i,.rc-skel b,.rc-skel span,.rc-loadinghead>*{animation:none!important}.rc-card,.rc-cat,.rc-prompts button,.rc-open{transition:none!important}}
.rc.rc-command-center{color:var(--rc-ink)}
.rc-command-center .rc-empty .rc-empty__icon .licon{width:23px;height:23px;color:var(--accent);opacity:1}
.rc-command-center .rc-skel{height:168px;min-height:168px;padding:20px;margin-bottom:0;border-radius:17px}
.rc-command-center .rc-skel i{width:42px;height:42px}
.rc-command-center .rc-skel b{width:62%;height:15px;margin-top:16px}
.rc-command-center .rc-skel span{width:88%;height:10px;margin-top:12px}
/* Searchable select: progressive enhancement for long, data-heavy lists. */
.ssx{position:relative;width:100%;min-width:0}
.ssx-native{position:absolute!important;inset:0!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.ssx-trigger{width:100%;min-height:42px;border:1px solid var(--border);border-radius:10px;background:var(--card,#fff);color:var(--text,#1f2937);padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;text-align:start;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.ssx-trigger:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.ssx-trigger:focus-visible,.ssx.is-open .ssx-trigger{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.ssx-trigger:disabled{cursor:not-allowed;background:#f5f5f3;color:var(--muted);border-color:var(--border);box-shadow:none}
.ssx-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssx-chevron{font-size:17px;line-height:1;color:var(--muted);transition:transform .16s ease}
.ssx.is-open .ssx-chevron{transform:rotate(180deg)}
.ssx-menu{position:fixed;z-index:10050;background:var(--card,#fff);border:1px solid var(--border,#ddd);border-radius:14px;padding:8px;box-shadow:0 18px 55px rgba(28,25,23,.18);max-height:min(410px,70vh);display:flex;flex-direction:column;animation:ssxIn .15s ease-out}
.ssx-search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--soft,#f8f7f5);border-radius:10px;padding:0 10px;margin-bottom:7px;flex:none}
.ssx-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);background:#fff}
.ssx-search span{font-size:19px;color:var(--muted)}
.ssx-search input{width:100%;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:10px 0!important;font:inherit;color:var(--text)}
.ssx-list{overflow:auto;overscroll-behavior:contain;padding:1px;min-height:44px}
.ssx-group{padding:9px 10px 4px;color:var(--accent);font-size:11px;font-weight:800;position:sticky;top:0;background:var(--card);z-index:1}
.ssx-option{width:100%;border:0;background:transparent;color:var(--text);border-radius:9px;padding:9px 10px;display:block;text-align:start;font:inherit;cursor:pointer}
.ssx-option:hover,.ssx-option.is-active{background:color-mix(in srgb,var(--accent) 9%,#fff)}
.ssx-option.is-selected{background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent);font-weight:700}
.ssx-option:disabled{opacity:.45;cursor:not-allowed}
.ssx-empty{padding:24px 12px;text-align:center;color:var(--muted);font-size:13px}
.if-unit-note{display:block;margin-top:5px;color:var(--muted);font-size:11px;font-weight:500;line-height:1.5}
.if-unit-note.is-locked{color:#8a5d08}.if-unit-note.is-ok{color:#087a4b}
@keyframes ssxIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:640px){.ssx-menu{max-height:min(520px,72vh);border-radius:18px;padding:10px;box-shadow:0 -14px 50px rgba(28,25,23,.2)}.ssx-option{padding:12px}.ssx-search input{padding:12px 0!important}}
@media(prefers-reduced-motion:reduce){.ssx-menu,.ssx-chevron{animation:none;transition:none}}

/* ══ MANAGEMENT-SURFACE TYPOGRAPHY — «--ms-*» ══════════════════════════════════════════════════════
   The operational scale above («--op-*») already solved this problem once, for the screens an employee
   works on standing up. It worked: «مركز الطلبات» measures 1% of its text at 13px or below, against a
   median of 46% across the twenty-six management screens measured on 2026-09-03. The scale was never
   extended past the three files that consume it, so every other screen kept improvising — 1,489
   `font-size` declarations across the front end, 46 distinct pixel values, 71% of them written inline
   in JavaScript where no stylesheet can reach them.

   This block is the same idea for the screens an owner, an accountant and a manager READ, sitting down.
   Named by role, declared once, and — like --op-* — deliberately NOT a blanket enlargement: the audit
   found the financial screens carrying the SMALLEST type in the product (Accounting 67% of its text at
   ≤13px, Permissions 62%, ZATCA 62%), which is precisely backwards.

   WHY THESE NUMBERS. Every one is anchored, not chosen:
     • 14px floor for dense/table text — Odoo raised its own base from 13px to 14px deliberately
       (commit 2b32d143, tagged IMP, not a fix); SAP Fiori calls 14px the default size for "buttons,
       inputs, tables"; Fluent 2 Body1 = 14px; Carbon body-compact-01 = 14px.
     • Nothing below 12px, ever — Atlassian: "The smallest font size available … is 12px. Avoid using
       this, except for in fine print."
     • A COLUMN HEADER IS NEVER SMALLER THAN ITS BODY. Atlassian states it outright ("Don't use heading
       sizes smaller than the body font size"), and the shipped code agrees: Carbon thead/tbody are both
       14px and differ only by weight (600 vs 400); Salesforce sets both to `inherit`; Oracle Redwood's
       header IS body-md plus weight 600, with no text-transform. ARSAK had the header smaller in
       11 tables out of 11 — the label that says what a number MEANS was quieter than the number.
       Polaris is the one system that does ship a smaller header (12px under 13px body), and it pays for
       it with three compensating layers at once — heavier weight, secondary colour, secondary surface —
       on LATIN text that is still above its own floor. 12px of Arabic is below every published floor.
     • line-height ≥ 1.5 on Arabic body text — the UAE Design System (an Arabic-first government system)
       sets exactly that minimum; Material adds +0.1em for tall scripts; Apple raises leading for Arabic
       at platform level; WCAG 1.4.12 requires a design to survive 1.5. Google's own font-metrics guide
       warns that a well-built Arabic face already declares a taller line box — so a hand-written
       `line-height:1.2` is not compact, it is FIGHTING the typeface, and clipping is the result.
     • Weight 600, not 700+, for emphasis at small sizes — Material advises against Bold for Arabic on
       native-speaker feedback. Titles keep their heavier weight; they are large enough to carry it.

   WHAT THIS BLOCK DELIBERATELY DOES NOT DO. It does not touch --op-* or any operational screen: those
   inject their stylesheets at runtime, after this file, and they already measure correctly. It changes
   no colour (contrast was measured and passes — 2 marginal failures in 153 elements; the "faint"
   complaint is size and weight, not colour). And it changes no layout: density is a padding and
   row-height lever, never a font-size one — SAP states that rule explicitly, and Carbon holds 14px
   across five row heights from 24px to 64px. */
:root{
  --ms-page:24px;       /* the screen's own name */
  --ms-section:18px;    /* a section heading inside it */
  --ms-card:16px;       /* a card's title */
  --ms-body:15px;       /* prose, and the primary value in a table cell */
  --ms-cell:15px;       /* table body — at or above the 14px floor, never under it */
  --ms-thead:15px;      /* TABLE HEADER — equal to the cell; weight and colour carry the difference */
  --ms-label:14px;      /* a form field's label */
  --ms-help:14px;       /* helper text under a field */
  --ms-btn:14.5px;      /* a button's label */
  --ms-badge:12.5px;    /* a status chip — the one place "fine print" is honest */
  --ms-kpi:30px;        /* a headline number */
  --ms-kpilbl:14px;     /* what that number counts */
  --ms-nav:14.5px;      /* a navigation entry */
  --ms-lh-body:1.6;     /* Arabic prose */
  --ms-lh-tight:1.4;    /* the floor for anything that still wraps */
}

/* Shared primitives. These selectors already exist above; this layer restates them in tokens so the
   scale has ONE home. Same specificity, later in the cascade, so it wins without !important. */
table{font-size:var(--ms-cell)}
th{font-size:var(--ms-thead);font-weight:600;color:var(--muted);line-height:var(--ms-lh-tight)}
td{line-height:var(--ms-lh-tight)}
.rcp__t th,.eptable th,.epitems th{font-size:var(--ms-thead);font-weight:600}
/* Money and quantities line up only when the digits are the same width. Polaris ships this on its
   tables; Toast picked its typeface for it. It is a legibility gain at zero size cost — which is why
   it belongs on the accounting and tax screens above all. */
td,th,.kpi .big,.num,.money{font-variant-numeric:tabular-nums lining-nums}
.small{font-size:var(--ms-help)}
.nav a{font-size:var(--ms-nav)}
.topbar h1{font-size:var(--ms-page);line-height:var(--ms-lh-tight)}
.card h3{font-size:var(--ms-card)}
.kpi .big{font-size:var(--ms-kpi)}
.kpi .small{font-size:var(--ms-kpilbl);font-weight:600}
.btn-sm{font-size:var(--ms-btn)}
.btn-primary{font-size:var(--ms-btn)}
.empty{font-size:var(--ms-body);line-height:var(--ms-lh-body)}
label{font-size:var(--ms-label)}

/* The sub-12px survivors on the shell and the owner's home screen. Each was measured in a browser on
   2026-09-03, not guessed: .dbtile__l is the CAPTION under every dashboard counter («طلبات اليوم»,
   «قيد التحضير», «متأخرة») — the words that say what the number IS — and it was the smallest text in the
   product's most-read screen at 11.5px. .dbbar__lbl is the revenue chart's date axis at 10.5px, and
   .acct__badge is the role the signed-in person is currently acting as, at 10.5px: an operator's own
   authority should not be the faintest thing on the page.
   The chart axis keeps its own height:13px in the rule above, so it is restated here with room to sit in. */
.acct__badge{font-size:var(--ms-badge)}
.acct__scope,.acct__state{font-size:var(--ms-help)}
.dbbar__lbl{font-size:var(--ms-badge);height:auto;min-height:15px}
.newbar--mini .newbar__c{font-size:var(--ms-help)}
/* The inline variant: same distinction, inside a panel that is only PART of a screen (a tab body, a
   card, a table's own container). It must not shout like the full-screen refusal, but it must still be
   unmistakably a failure and not an empty result — same colour family, no icon, no retry, because the
   surrounding screen still owns its own refresh. */
.scfail--inline{padding:24px 18px;margin:0;gap:6px}
.scfail--inline .scfail__t{font-size:16px}
.scfail--inline .scfail__d{font-size:15px}

/* THE ONE PLACE ON THE TILL WHERE ARABIC ACTUALLY CROWDS.
   Measured on the POS, 2026-09-03: 168 elements sat below line-height 1.35, and they were only two
   classes. `.poscard__bbadge` is a single-line brand chip — 84 of them, none wrapping — so its leading
   is irrelevant and it is left alone. `.poscard__name` is the other 84, and EVERY ONE of them wraps:
   it is the product name a cashier reads on every tile, clamped to two lines at line-height 1.3.
   Arabic ascenders and descenders reach further than Latin ones, so two tight lines is where they
   collide — Apple raises leading for Arabic at platform level for exactly this reason.
   THE MIN-HEIGHT MOVES WITH IT, and that is the whole point of doing this in one rule: the clamp shows
   two lines only while `min-height` equals 2 × line-height. Raising the leading alone would have clipped
   the second line of every long product name on the till — trading crowded text for missing text. */
.poscard__name{line-height:1.45;min-height:2.9em}

/* `.eptable` and `.epitems` set their size on the TABLE, so every cell inherits it and no `td` rule
   ever appears to match — which is why the header override above landed while the body stayed at 13px
   and 12.5px, leaving a header LARGER than its own values. Correct on the inversion, wrong on the floor.
   Both now carry the cell token, so header and body meet at one size and the difference is weight and
   colour, exactly as Carbon, Salesforce and Oracle Redwood do it. */
.eptable,.epitems{font-size:var(--ms-cell)}

/* ══════════════ الأجهزة المسجَّلة (devicefleet.js) ══════════════
   لا مقاسات مكتوبة بالأرقام هنا: كل نصّ يأخذ حجمه من مقياس الإدارة (--ms-*) الذي وُضع في الموجة
   السابقة، فالشاشة الجديدة تولد بالحجم الصحيح بدل أن تُصلَّح لاحقًا. */
.dfl-head { display: flex; gap: 12px; flex-wrap: wrap; }
.dfl-kpi { flex: 1 1 160px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.dfl-kpi--wait { border-color: var(--warn); background: var(--warnbg); }
.dfl-kpi__n { font-size: var(--ms-kpi); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dfl-kpi__l { font-size: var(--ms-kpilbl); color: var(--muted); margin-top: 2px; }
.dfl-sec { font-size: var(--ms-section); font-weight: 700; margin-bottom: 10px; }
.dfl-sub { font-size: var(--ms-help); color: var(--muted); margin-top: 2px; }
/* جدول الأسطول أعرض من بطاقته عند 1366×768 — والغلاف يجب أن يمرّره داخل نفسه لا أن يدع
   الصفحة كلّها تنزلق أفقيًّا. الصنف مستعمل في devicefleet.js وحده ولم يكن له تعريف قطّ:
   اسمُ غلافٍ استُعير من جدولٍ آخر ولم يُنشأ، فبقي overflow-x: visible وانسكب الجدول ٩٢ بكسل. */
.eptable-wrap { overflow-x: auto; }
/* أصناف قرار الحوكمة الثلاثة كانت مرسومة في devicefleet.js بلا أيّ قاعدة CSS في المشروع،
   فقُيست «اعتماد الجهاز» و«رفض» و«التفاصيل» متطابقةً حرفًا: الخلفية نفسها والحدّ نفسه واللون
   نفسه — تباين الزرّ مقابل بطاقته 1.00. أي أنّ الفعل الهدّام لا يُميَّز عن الفعل المُثبِت، وقرارٌ
   يمنع جهازًا من الطباعة يبدو كزرّ «تفاصيل». الاعتمادُ يُثبِت فيأخذ لون القبول، والرفضُ يسحب
   فيأخذ لون الخطر — وهو اللون نفسه الذي يستعمله «حذف» في شاشة الفروع (.mini.danger). */
.dfl-approve{border-color:var(--success);color:var(--success)}
.dfl-revoke{border-color:var(--danger);color:var(--danger)}
.dfl-more{color:var(--muted)}
.dfl-table td { vertical-align: top; }
.dfl-acts { white-space: nowrap; }
.dfl-badge { display: inline-block; font-size: var(--ms-badge); font-weight: 600; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--line); }
.dfl--ok { background: var(--okbg); color: var(--ok); border-color: var(--ok); }
.dfl--wait { background: var(--warnbg); color: var(--warn); border-color: var(--warn); }
.dfl--warn { background: var(--warnbg); color: var(--warn); border-color: var(--warn); }
.dfl--off { background: var(--errbg); color: var(--err); border-color: var(--err); }
/* لوحة التفاصيل تعيش داخل الجدول، فترث خلفيّته وحدوده ولا تحتاج نافذة بتنسيقٍ منفصل قد يُنسى */
.dfl-drawer > td { background: var(--bg); }
.dfl-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; padding: 4px 2px; }
.dfl-l { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--ms-body); }
.dfl-l > span { color: var(--muted); }
.dfl-l > b { text-align: left; font-variant-numeric: tabular-nums; }

/* ══════════════ عدّ النقد والصندوق (cashcount.js) ══════════════ */
.cc-who { font-size: var(--ms-help); color: var(--muted); margin-bottom: 10px; }
.cc-big { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.cc-big__l { font-size: var(--ms-kpilbl); color: var(--muted); }
/* الرقم الكبير هو الرسالة: الفرق يُقرأ من بعيد، ولا يُدفن في خليّة جدول */
.cc-big__n { font-size: calc(var(--ms-kpi) * 1.5); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cc-big__s { font-size: var(--ms-help); color: var(--muted); margin-top: 6px; }
.cc-big.cc--ok { border-color: var(--ok); background: var(--okbg); }
.cc-big.cc--warn { border-color: var(--warn); background: var(--warnbg); }
.cc-big.cc--info { border-color: var(--line); }
.cc-sec { font-size: var(--ms-section); font-weight: 700; margin-bottom: 8px; }
.cc-l { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--ms-body); }
.cc-l > span { color: var(--muted); }
.cc-l > b { text-align: left; font-variant-numeric: tabular-nums; }
.cc-l--strong { border-bottom: none; font-size: var(--ms-card); font-weight: 700; }
.cc-l--strong > span { color: inherit; }
.cc-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-color: var(--warn); background: var(--warnbg); font-size: var(--ms-body); }
/* حوار التأكيد يعرض المتوقّع والمعدود والفرق قبل أن يُكتب شيء — §11 */
.cc-confirm > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: var(--ms-body); }
.cc-confirm > div > span { color: var(--muted); }
.cc-confirm > div > b { font-variant-numeric: tabular-nums; }
.cc-confirm__d { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px !important; font-size: var(--ms-card) !important; font-weight: 700; }

/* ══════════════ لوحة المالك — «المال» و«التشغيل» ══════════════
   المقاسات كلّها من مقياس الإدارة (--ms-*): مجموعة جديدة تولد بالحجم الصحيح بدل أن تُصلَّح لاحقًا. */
.dbmoney__row { display: flex; gap: 12px; flex-wrap: wrap; }
.dbmoney__c { flex: 1 1 150px; min-width: 140px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.dbmoney__l { font-size: var(--ms-kpilbl); color: var(--muted); }
.dbmoney__n { font-size: var(--ms-kpi); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 2px; }
.dbmoney__u { font-size: var(--ms-help); font-weight: 600; color: var(--muted); }
.dbmoney__s { font-size: var(--ms-help); color: var(--muted); margin-top: 3px; }
/* «غير متاح» ليست رقمًا، فلا تُعرض بوزن رقم */
.dbmoney__x { font-size: var(--ms-body); font-weight: 600; color: var(--muted); }
.dbmoney__note { font-size: var(--ms-help); color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.dbops { display: flex; gap: 10px; flex-wrap: wrap; }
.dbops__i { font-size: var(--ms-body); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.dbops__i:hover { border-color: var(--accent); }
.dbops__i > b { font-variant-numeric: tabular-nums; }
/* تعذّرت القراءة: لا لون إنذار ولا رقم — حالة معرفة، لا حالة تشغيل */
.dbops__i--x { color: var(--muted); cursor: default; border-style: dashed; }
.dbops__i--x:hover { border-color: var(--line); }
/* بند تشغيل بلا وجهة: الحقيقة تُقال، ولا يُعرض رابطٌ يُرفض عنده قارئه */
.dbops__i--flat { cursor: default; }
.dbops__i--flat:hover { border-color: var(--line); }