/* Madar POS: the till and the admin portal share this. The tokens are the
   Madar design system's (workspace.html, 27 Sep 2026): the system typeface,
   Apple's grey ladder, one radius scale, copper for the human side (the
   primary action, what needs you) and ice for the machine side (data).
   Dark is the brand; light follows the device, and a shop floor in daylight
   usually wants light. data-theme on <html> is a person's own choice. */
:root{
  color-scheme:dark;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro",system-ui,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#1C1C1E; --side:#232325; --surface:#2C2C2E; --surface-2:#3A3A3C; --elevated:#262628;
  --fill:rgba(118,118,128,.24); --fill-2:rgba(118,118,128,.16); --fill-3:rgba(118,118,128,.1);
  --field:rgba(118,118,128,.14); --field-line:rgba(255,255,255,.1);
  --sep:rgba(255,255,255,.08); --sep-2:rgba(255,255,255,.14);
  --label:#F5F5F7; --label-2:#A1A1A6; --label-3:#98989D;
  --on-red:#1A0E08;
  --copper:#F2926B; --copper-ink:#F2926B; --on-copper:#1A0E08; --copper-tint:rgba(242,146,107,.16);
  --ice:#9BC1E0; --ice-ink:#9BC1E0; --ice-tint:rgba(155,193,224,.14);
  --green-ink:#30D158; --green-tint:rgba(48,209,88,.14);
  --orange-ink:#FFB340; --orange-tint:rgba(255,159,10,.16);
  --red-ink:#FF7B73; --red-tint:rgba(255,69,58,.16);
  --scrim:rgba(0,0,0,.55);
  --shadow:0 24px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3);
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --spring:cubic-bezier(.32,.72,0,1);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#F5F5F7; --side:#ECECEE; --surface:#FEFEFE; --surface-2:#F2F2F4; --elevated:#FEFEFE;
    --fill:rgba(118,118,128,.16); --fill-2:rgba(118,118,128,.1); --fill-3:rgba(118,118,128,.06);
    --field:#FEFEFE; --field-line:rgba(0,0,0,.14);
    --sep:rgba(0,0,0,.08); --sep-2:rgba(0,0,0,.14);
    --label:#1D1D1F; --label-2:#5E5E63; --label-3:#6E6E73;
    --copper-ink:#A5532F; --copper-tint:rgba(242,146,107,.2);
    --ice-ink:#2A6497; --ice-tint:rgba(58,125,181,.12);
    --green-ink:#1E7B34; --green-tint:rgba(52,199,89,.14);
    --orange-ink:#A35200; --orange-tint:rgba(255,149,0,.16);
    --red-ink:#C4161C; --red-tint:rgba(255,59,48,.12);
    --scrim:rgba(0,0,0,.3);
    --shadow:0 24px 70px rgba(40,30,20,.22),0 2px 8px rgba(40,30,20,.1);
    --on-red:#fff;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F5F7; --side:#ECECEE; --surface:#FEFEFE; --surface-2:#F2F2F4; --elevated:#FEFEFE;
  --fill:rgba(118,118,128,.16); --fill-2:rgba(118,118,128,.1); --fill-3:rgba(118,118,128,.06);
  --field:#FEFEFE; --field-line:rgba(0,0,0,.14);
  --sep:rgba(0,0,0,.08); --sep-2:rgba(0,0,0,.14);
  --label:#1D1D1F; --label-2:#5E5E63; --label-3:#6E6E73;
  --copper-ink:#A5532F; --copper-tint:rgba(242,146,107,.2);
  --ice-ink:#2A6497; --ice-tint:rgba(58,125,181,.12);
  --green-ink:#1E7B34; --green-tint:rgba(52,199,89,.14);
  --orange-ink:#A35200; --orange-tint:rgba(255,149,0,.16);
  --red-ink:#C4161C; --red-tint:rgba(255,59,48,.12);
  --scrim:rgba(0,0,0,.3);
  --shadow:0 24px 70px rgba(40,30,20,.22),0 2px 8px rgba(40,30,20,.1);
  --on-red:#fff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--label);font:15px/1.45 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
::selection{background:var(--copper-tint)}
input,textarea{caret-color:var(--copper)}
a{color:var(--ice-ink)}
input[type=checkbox]{accent-color:var(--copper);width:20px;height:20px}
*{scrollbar-color:var(--fill) transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:var(--r-sm);
  background:var(--fill-2);color:var(--label);font-weight:560;cursor:pointer;white-space:nowrap;text-decoration:none;transition:filter .12s,transform .08s}
.btn:hover{background:var(--fill)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.primary{background:var(--copper);color:var(--on-copper)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.quiet{background:transparent;color:var(--ice-ink)}
.btn.quiet:hover{background:var(--ice-tint)}
.btn.danger{background:var(--red-tint);color:var(--red-ink)}
.btn.sm{height:32px;padding:0 12px;font-size:13.5px}
.btn.lg{height:56px;font-size:17px;border-radius:var(--r)}

/* fields */
.field{display:grid;gap:6px;font-size:13px;color:var(--label-2)}
.field input,.field select,.field textarea,input.in,select.in{width:100%;height:40px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--field-line);background:var(--field);color:var(--label);font-size:15px}
.field textarea{height:auto;min-height:72px;padding:10px 12px;resize:vertical}
.field .hint{font-size:12px;color:var(--label-3)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}

/* level pills: state in form as well as colour */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--green-tint);color:var(--green-ink)}
.pill.low{background:var(--orange-tint);color:var(--orange-ink)}
.pill.out,.pill.count{background:var(--red-tint);color:var(--red-ink)}
.pill.unset{background:var(--fill-2);color:var(--label-2)}

/* sheets */
.scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);display:grid;place-items:center;padding:16px;animation:fade .15s}
.sheet{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--elevated);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px;display:grid;gap:14px;animation:rise .24s var(--spring)}
.sheet h3{margin:0;font:650 19px/1.25 var(--font-display);letter-spacing:-.01em}
.sheet .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* An empty error line or list takes no room in a sheet; it shows when it has something to say. */
.sheet>.err:empty,.sheet>[data-l]:empty,.sheet>[data-cl]:empty{display:none}
@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%);z-index:80;background:var(--label);color:var(--bg);padding:10px 16px;border-radius:var(--r-pill);font-size:14px;font-weight:560;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
.toast.bad{background:var(--red-ink);color:var(--on-red)}

.err{color:var(--red-ink);font-size:13.5px;min-height:1em}
.muted{color:var(--label-2)}
.mark{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--font-display);letter-spacing:-.01em}
.mark svg{width:20px;height:20px}

/* the offline banner: the till says it cannot record, and does not pretend */
.offline{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--orange-ink);color:var(--on-red);text-align:center;padding:calc(6px + var(--safe-t)) 12px 6px;font-size:13.5px;font-weight:600}
.offline.sync{background:var(--surface-2);color:var(--label)}
.offline.stuck{background:var(--red-ink);color:var(--on-red)}
.offline button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:var(--r-pill);padding:1px 10px;margin-left:8px;cursor:pointer}
/* the end of the package (src/pos/term.ts): from the end itself, through the 30 days of grace, and once read only */
.endnote{background:var(--orange-tint);color:var(--label);padding:8px 14px;font-size:13.5px;font-weight:500;line-height:1.45}
.endnote.ro{background:var(--red-tint)}
.endnote a{color:var(--ice-ink);font-weight:600;white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Receipts and invoices on a receipt roll (pos-common.js Pos.receipt): only
   #receipt prints. Each copy is its own page, so a printer set to cut per
   page cuts between the customer's copy and the merchant's. The receipt's
   own look is outside the print block so Pos.print can measure it before
   printing: the page is then exactly as long as the longest copy (a page
   size of "80mm auto" is not valid CSS, and Chrome printed US Letter). */
#receipt{display:none}
.rc{width:72mm;margin:0 auto;padding:3mm 0 6mm;font:12px/1.35 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#000;background:#fff;break-after:page;page-break-after:always;overflow-wrap:anywhere}
.rc:last-child{break-after:auto;page-break-after:auto}
/* The drawer slip (16 Oct 2026): a few lines, so the roll is not wasted to open the drawer. */
.rc.slip{padding:1mm 0 2mm;font-size:11px}
.rc .c{text-align:center}
.rc .b{font-weight:700}
.rc .t{font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-align:center;margin:4px 0}
.rc hr{border:0;border-top:1px dashed #000;margin:5px 0}
.rc .l{display:flex;justify-content:space-between;gap:8px}
.rc .l>span:first-child{min-width:0}
.rc .l>span:last-child{flex:none;white-space:nowrap}
.rc .s{font-size:11px}
/* Arabic in a monospace face comes out stretched: a real Arabic face, as Windows and macOS have. */
.rc [dir="rtl"]{font-family:Tahoma,"Segoe UI","Geeza Pro","Noto Naskh Arabic",sans-serif;font-size:12.5px}
/* The Arabic beside a money line (surface-7, audit 29 Sep 2026): the same face, at the line's own size, so a 58 mm roll still fits it,
   and whole: on a narrow roll it goes under the English rather than breaking in two. */
.rc .ar{font-family:Tahoma,"Segoe UI","Geeza Pro","Noto Naskh Arabic",sans-serif;white-space:nowrap}
/* The test receipt's edge marks: both must print, with the same white beside each. */
.rc .edge{display:flex;justify-content:space-between;border-left:2px solid #000;border-right:2px solid #000;padding:0 3px;margin:4px 0;font-size:11px}
.rc .sig{margin-top:14px;border-top:1px solid #000;padding-top:2px;font-size:11px}
/* A 58 mm roll prints 48 mm wide. */
#receipt.p58 .rc{width:48mm;font-size:10.5px}
#receipt.p58 .rc .s{font-size:9.5px}
#receipt.p58 .rc .t{font-size:12px}
@media print{
  /* No size here: the printer's own paper, unless Pos.print cuts the page to the receipt (Printer settings, Paper). */
  @page{size:portrait;margin:0}
  body{background:#fff!important;color:#000!important}
  body>*:not(#receipt){display:none!important}
  #receipt{display:block!important}
  /* From the page's left edge, not centred (Al Ansab, 29 Oct 2026): a receipt printer's driver puts the page's
     left edge where its print head starts, about 4 mm in on an 80 mm roll, so a centred 72 mm column came out
     4 mm to the right and the amounts were cut. --rc-x is the till's own nudge (Printer settings, Position). */
  #receipt .rc{margin:0 0 0 var(--rc-x,0mm)}
}

/* The guide (pos-common.js Pos.guide): the page dims, one thing is lit, and a
   card says what it is for. No chat: pointing, in plain words. */
.gd-spot{position:fixed;z-index:90;border-radius:var(--r);box-shadow:0 0 0 9999px rgba(0,0,0,.58),0 0 0 3px var(--copper);transition:left .25s var(--spring),top .25s var(--spring),width .25s var(--spring),height .25s var(--spring);pointer-events:none}
.gd-card{position:fixed;z-index:91;width:min(340px,calc(100vw - 24px));background:var(--elevated);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px;display:grid;gap:8px;animation:rise .2s var(--spring)}
.gd-card .n{font-size:12px;font-weight:600;color:var(--copper-ink);letter-spacing:.02em}
.gd-card h4{margin:0;font:650 16px/1.3 var(--font-display)}
.gd-card p{margin:0;font-size:14px;line-height:1.5;color:var(--label-2)}
.gd-card .row{display:flex;gap:8px;align-items:center;margin-top:4px}
.gd-card .row .gap{flex:1}
.gd-help{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + var(--safe-b));z-index:40;width:44px;height:44px;border-radius:50%;border:0;background:var(--surface-2);color:var(--label);font:700 20px var(--font-display);box-shadow:var(--shadow);cursor:pointer}
.gd-help:hover{background:var(--fill)}
@media print{.gd-help,.gd-spot,.gd-card{display:none!important}}

/* Touch screens: every control a finger can hit reliably (44 px), the basket's
   plus and minus bigger still. The amount a cashier types reads large. */
@media (pointer:coarse){.btn.sm{height:44px}}
.sheet input.big{font:700 34px/1.1 var(--font-display);letter-spacing:-.01em}

/* The branch tabs (29 Oct 2026, Al Ansab: "make it like tab interface for each branch"): one tab per branch, the
   one on filled, at the top of the admin portal's pages and under the cashier screen's header. A row of its own that
   scrolls sideways inside itself when there are many branches, never the page. Every tab is a 44 px target. */
.btabs{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 0 14px;padding:4px;border-radius:var(--r);background:var(--fill-3);border:1px solid var(--sep)}
.btabs::-webkit-scrollbar{display:none}
.btabs-l{flex:0 0 auto;padding:0 8px 0 6px;font-size:12.5px;font-weight:600;color:var(--label-2);letter-spacing:.02em}
.btabs-l .ar{font-family:Tahoma,"Segoe UI","Geeza Pro","Noto Naskh Arabic",sans-serif;margin-inline-start:4px}
.btab{flex:1 1 0;min-width:max-content;height:44px;padding:0 18px;border:0;border-radius:calc(var(--r) - 3px);background:transparent;color:var(--label);font:650 15px var(--font-display);letter-spacing:.02em;cursor:pointer;white-space:nowrap}
.btab:hover{background:var(--fill-2)}
.btab.on{background:var(--copper);color:var(--on-copper);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.btab:focus-visible{outline:2px solid var(--ice-ink);outline-offset:2px}
.btabs.one .btab{flex:0 0 auto;display:inline-flex;align-items:center;cursor:default}
@media (max-width:480px){ .btab{padding:0 12px;font-size:14px} .btabs-l{display:none} }
html:not(.show-ar) .btabs .ar{display:none}