:root{
  --shell:#14181C; --panel:#1C2228; --panel-2:#232B32; --line:#2E383F;
  --tape:#F4F1E8; --tape-line:#D8D2C2;
  --brass:#C9A227; --go:#2F7F5B; --stop:#B4402F; --alert:#D4622A;
  --text:#E7ECEF; --text-dim:#8A9AA5; --ink:#191512;
  --r:10px;
  --ui:'Space Grotesk',system-ui,sans-serif;
  --ar:'Noto Kufi Arabic','Space Grotesk',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--shell);color:var(--text);font-family:var(--ui);overflow:hidden}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
.ar{font-family:var(--ar);direction:rtl}

.conn-banner{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--alert);color:#fff;text-align:center;font-size:12px;font-weight:600;letter-spacing:.03em;padding:6px}
.conn-banner[hidden]{display:none}

.app{display:flex;flex-direction:column;height:100dvh}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}
.topbar[hidden]{display:none}
.brand{display:flex;flex-direction:column;line-height:1.15}
.brand b{font-size:15px;letter-spacing:.02em}
.brand span{font-size:10px;color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase}
.open-tables{padding:7px 10px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-family:inherit;font-size:12px;max-width:170px;margin-left:6px}
.open-tables:hover{border-color:var(--brass)}
.btn-newtable{padding:7px 12px;border-radius:8px;background:var(--panel-2);border:1px dashed var(--line);font-size:12px;white-space:nowrap;color:var(--text-dim)}
.btn-newtable:hover{border-color:var(--brass);color:var(--brass)}
.btn-cheques{margin-left:auto;padding:7px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-size:12px;white-space:nowrap;color:var(--text-dim)}
.btn-cheques:hover{border-color:var(--brass);color:var(--brass)}
/* At least one open cheque, anywhere, has an item sitting unsent for over 7 minutes — see
   anyTableHasOverdue. A glance-able signal for something you're not currently looking at,
   same red/pulse language as checkOverdueBtn (the per-table version of this same alert). */
.btn-cheques.overdue{background:var(--stop);border-color:var(--stop);color:#fff;animation:overdue-pulse 1.6s ease-in-out infinite}
/* BeSmart Admin's topbar has no Cheques button to carry the auto-margin that
   pushes the session-bar right, so give it one directly, scoped to this page only. */
.admin-topbar .session-bar{margin-left:auto}

.session-bar{display:flex;align-items:center;gap:6px}
.session-bar .a-addbtn{margin-top:0;white-space:nowrap}
.session-revenue-centre,.session-user{padding:7px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-size:12px;white-space:nowrap}
.session-revenue-centre[hidden]{display:none}
.session-revenue-centre:hover{border-color:var(--brass);color:var(--brass)}
/* .session-revenue-centre is a <button> in the till (opens the RVC picker) but a <select>
   in BeSmart Admin (the RVC switcher) — selects don't inherit font/color/cursor the way
   buttons do, so set them explicitly here for the select case. */
select.session-revenue-centre{color:var(--text);font-family:inherit;cursor:pointer}
.session-user{color:var(--text-dim)}
.session-user:hover{border-color:var(--stop);color:var(--stop)}
/* A plain name display, not a control — both apps now have a dedicated Logout button instead,
   so the red "this logs you out" hover cue would be actively misleading here. */
.session-user.static{cursor:default}
.session-user.static:hover{border-color:var(--line);color:var(--text-dim)}

.main{flex:1;display:flex;min-height:0}
.main[hidden]{display:none}
/* .cats-col wraps the category nav plus the Logout button pinned under it — same left-sidebar,
   bottom, white-text placement as BeSmart Admin's own Logout (.a-tab, reused here as-is rather
   than a lookalike copy, so both apps' logout controls are pixel-identical, not just similar). */
.cats-col{flex:0 0 122px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.cats-col .a-tab{margin:0 8px 10px}
/* order.html's QR page uses .cats directly, unwrapped (see .order-app .cats override below) —
   background/border-right stay on the base rule too so that page keeps its look unchanged. */
.cats{flex:1;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:10px 8px;gap:6px;overflow-y:auto;min-height:0}
.cats-col .cats{border-right:0}
.cat{padding:13px 10px;border-radius:var(--r);text-align:left;font-size:13px;color:var(--text-dim);border:1px solid transparent}
.cat.on{background:var(--panel-2);color:var(--text);border-color:var(--line)}
.cat small{display:block;font-size:11px;opacity:.6;margin-top:3px;font-family:var(--ar);direction:rtl}

.grid{flex:1;padding:12px;display:grid;gap:10px;overflow-y:auto;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-content:start}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-height:96px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;transition:transform .08s,border-color .12s;position:relative}
.tile:active{transform:scale(.97);border-color:var(--brass)}
.tile .nm{font-size:13.5px;font-weight:500;line-height:1.25}
.tile .nar{font-size:12px;color:var(--text-dim);margin-top:3px}
.tile .pr{font-family:var(--mono);font-size:13px;color:var(--brass);margin-top:10px}
.tile .flag{position:absolute;top:9px;right:9px;font-size:9px;letter-spacing:.1em;color:var(--text-dim);border:1px solid var(--line);border-radius:4px;padding:2px 5px}
.tile-addon{border-style:dashed;border-color:var(--brass)}
.tile-addon .nm::before{content:'+ ';color:var(--brass)}

.check{flex:0 0 330px;background:var(--tape);color:var(--ink);display:flex;flex-direction:column}
.check-hd{padding:12px 16px 8px;border-bottom:1px dashed var(--tape-line);display:flex;align-items:baseline;justify-content:space-between}
.check-hd b{font-size:14px}
.check-hd span{font-family:var(--mono);font-size:11px;opacity:.55}
.check-hd-right{display:flex;align-items:baseline;gap:8px}
.check-pax{font-family:var(--ui);font-size:11px;opacity:.75;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.06);border:1px dashed var(--tape-line)}
.check-pax:hover{border-color:var(--go);color:var(--go)}
.check-pax[hidden]{display:none}
.check-overdue-btn{font-family:var(--ui);font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--stop);color:#fff;border:none;animation:overdue-pulse 1.6s ease-in-out infinite}
.check-overdue-btn[hidden]{display:none}
@keyframes overdue-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.overdue-line{color:var(--stop)}
.overdue-line .ln-n::after{content:" · not sent yet";font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.lines{flex:1;overflow-y:auto;padding:8px 16px}
.empty{padding:40px 8px;text-align:center;font-size:13px;color:#8a8272;line-height:1.6}
.ln{padding:7px 0;border-bottom:1px dotted var(--tape-line);cursor:pointer;border-radius:6px}
.ln:hover{background:rgba(0,0,0,.04)}
.ln:active{background:rgba(0,0,0,.08)}
.ln-top{display:flex;gap:8px;align-items:baseline;font-family:var(--mono);font-size:12.5px}
.ln-q{width:26px;flex:0 0 auto}
.ln-n{flex:1;font-family:var(--ui);font-size:13px}
.ln-p{font-variant-numeric:tabular-nums}
.ln-sub{margin:3px 0 0 26px;font-size:11px;color:#6f6857}
.ln-rem{margin:3px 0 0 26px;font-size:11px;color:var(--stop);font-weight:600}
.ln-alg{margin:3px 0 0 26px;font-size:10px;color:#fff;background:var(--stop);display:inline-block;padding:2px 6px;border-radius:4px;letter-spacing:.08em}
.ln-ctl{display:flex;gap:6px;margin:6px 0 0 26px}
.ln-ctl button{width:26px;height:26px;border-radius:6px;background:#E4DFD1;font-size:14px;font-weight:600;line-height:1}
.ln-ctl button.rm{margin-left:auto;background:transparent;color:var(--stop);width:auto;padding:0 6px;font-size:11px}
.ln.sent{opacity:.72}
.ln.sent .ln-n::after{content:'FIRED';font-family:var(--mono);font-size:9px;letter-spacing:.1em;background:var(--go);color:#fff;padding:2px 5px;border-radius:4px;margin-left:7px;vertical-align:1px}
.ln.sent .ln-ctl button:not(.rm){display:none}
.btn.fire{background:var(--alert);color:#fff;font-weight:600}

.kq{display:flex;flex-direction:column;gap:10px}
.kq-empty{padding:26px 8px;text-align:center;color:var(--text-dim);font-size:13px}
.tkt{background:#fff;color:#000;border-radius:8px;padding:12px;font-family:var(--mono);font-size:12.5px;line-height:1.5;border-left:5px solid var(--go)}
.tkt.warm{border-left-color:var(--brass)}
.tkt.late{border-left-color:var(--stop)}
.tkt-hd{display:flex;justify-content:space-between;font-weight:600;border-bottom:1px solid #ddd;padding-bottom:5px;margin-bottom:6px}
.tkt-el{font-variant-numeric:tabular-nums}
.tkt.late .tkt-el{color:var(--stop)}
.tkt .no{font-weight:700;text-transform:uppercase}
.tkt .plus{padding-left:12px;color:#555}
.tkt .alg{background:#000;color:#fff;text-align:center;padding:4px;font-weight:700;letter-spacing:.08em;margin:-12px -12px 8px;border-radius:8px 8px 0 0}
.tkt-act{margin-top:8px;width:100%;padding:9px;border-radius:6px;background:#111;color:#fff;font-family:var(--ui);font-size:12px}
.tkt.done{opacity:.45}
.tkt.done .tkt-act{background:#888}

.totals{padding:10px 16px;border-top:1px dashed var(--tape-line);font-family:var(--mono);font-size:12px}
.tr{display:flex;justify-content:space-between;padding:2px 0}
.tr.grand{font-size:17px;font-weight:600;padding-top:8px;margin-top:6px;border-top:1px solid var(--ink)}
.tr.alt{font-size:12px;opacity:.6}
.tr span:last-child{font-variant-numeric:tabular-nums}

.pay{padding:10px 16px 14px;display:flex;flex-direction:column;gap:8px}
.pay-row{display:flex;gap:8px}
.btn{flex:1;padding:13px 10px;border-radius:var(--r);font-size:13px;background:#E4DFD1;color:var(--ink)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--go);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--tape-line);font-size:12px;padding:9px}
.btn.voice{background:var(--ink);color:var(--brass);font-size:12px}
.btn[disabled]{opacity:.35;pointer-events:none}

.scrim{position:fixed;inset:0;background:rgba(8,10,12,.74);display:flex;align-items:center;justify-content:center;padding:18px;z-index:40}
.scrim[hidden]{display:none}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:100%;max-width:800px;max-height:88dvh;overflow-y:auto;padding:18px}
.modal.wide{max-width:1000px}
.modal h3{margin:0 0 2px;font-size:17px}
.modal .sub{margin:0 0 14px;font-size:12px;color:var(--text-dim)}
.mgroup{margin-bottom:14px}
.mgroup>p{margin:0 0 7px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);display:flex;justify-content:space-between}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{padding:9px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-size:13px;display:flex;align-items:center;gap:6px}
.opt.on{border-color:var(--brass);color:var(--brass)}
.opt em{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7}
.opt .a{font-family:var(--ar);font-size:12px;opacity:.75}
.opt.rem.on{border-color:var(--stop);color:var(--stop);background:rgba(180,64,47,.12);text-decoration:line-through}
.opt.locked{opacity:.4;pointer-events:none}
.line-menu{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.line-menu .opt{width:100%;justify-content:flex-start;padding:12px 14px;font-size:14px}
.opt.danger{color:var(--stop);border-color:rgba(180,64,47,.4)}
.cheque-list{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.cheque-row{width:100%;padding:12px 14px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left}
.cheque-row:hover{border-color:var(--brass)}
.cheque-row.overdue-cheque{border-color:var(--stop);background:rgba(180,64,47,.12)}
.cheque-row.overdue-cheque .cq-table{color:var(--stop)}
.cheque-row .cq-main{display:flex;flex-direction:column;gap:2px}
.cheque-row .cq-table{font-size:14px;font-weight:600}
.cheque-row .cq-ref{font-family:var(--mono);font-size:11px;color:var(--text-dim)}
.cheque-row .cq-amt{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.cheque-empty{padding:14px;text-align:center;color:var(--text-dim);font-size:12px}
.opt.danger:hover{background:rgba(180,64,47,.12)}
.allergy{display:flex;align-items:center;gap:9px;padding:11px;border-radius:8px;background:rgba(212,98,42,.12);border:1px solid var(--alert);font-size:12.5px;margin-top:4px}
.allergy input{width:18px;height:18px;accent-color:var(--alert)}
.noteBox{width:100%;min-height:62px;padding:10px;border-radius:8px;background:var(--shell);border:1px solid var(--line);color:var(--text);font-family:var(--ui);font-size:13px;resize:vertical;line-height:1.45}
.noteBox:focus{outline:2px solid var(--brass);outline-offset:-1px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip{padding:7px 10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:12px;color:var(--text-dim)}
.chip:active{border-color:var(--brass)}
.ln-note{margin:3px 0 0 26px;font-size:11px;color:#5c5647;font-style:italic}
.tkt .note{background:#f2f2f2;border-left:3px solid #000;padding:3px 7px;margin:3px 0;font-style:italic}
.modal-foot{display:flex;gap:8px;margin-top:6px}
.modal-foot .btn{background:var(--panel-2);color:var(--text)}
.modal-foot .btn.primary{background:var(--brass);color:var(--ink);font-weight:600}
.modal-foot .btn.danger{background:var(--stop);color:#fff}

.receipt{background:var(--tape);color:var(--ink);font-family:var(--mono);font-size:12px;padding:18px;border-radius:10px;line-height:1.55}
.receipt h4{font-family:var(--ui);font-size:15px;margin:0 0 2px;text-align:center}
.receipt .ctr{text-align:center;font-size:11px;opacity:.6;margin-bottom:10px}
.receipt hr{border:0;border-top:1px dashed var(--tape-line);margin:8px 0}
.rl{display:flex;justify-content:space-between;gap:10px}
.rl span:last-child{font-variant-numeric:tabular-nums}

/* Printing a cheque: window.print() today, a real receipt printer later —
   either way only the .receipt itself should hit paper, not the app chrome
   around it. */
@media print{
  #connBanner,.app,.toast,.login-view,.revenue-centre-picker{display:none!important}
  .scrim{position:static!important;inset:auto!important;background:none!important;padding:0!important;display:block!important}
  .modal{box-shadow:none!important;border:none!important;max-width:100%!important;max-height:none!important;padding:0!important;border-radius:0!important;background:#fff!important;overflow:visible!important}
  .modal>*:not(.receipt){display:none!important}
  .receipt{border-radius:0!important;font-size:13px}
}

.kt-preview{flex:0 0 auto;padding:7px 16px 3px;text-align:center;font-size:11px;color:var(--text-dim);background:none;border:0}
.kt-preview:hover{color:var(--brass)}

.kt{background:#fff;color:#000;font-family:var(--mono);font-size:13px;padding:16px;border-radius:8px;line-height:1.6}
.kt .hd{text-align:center;font-weight:600;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:8px}
.kt .alg{background:#000;color:#fff;text-align:center;padding:5px;font-weight:700;letter-spacing:.1em;margin-bottom:8px}
.kt .item{margin-bottom:9px;padding-bottom:7px;border-bottom:1px dotted #bbb}
.kt .no{color:#000;font-weight:700;text-transform:uppercase}
.kt .plus{padding-left:14px;color:#555}
.kt .note{padding-left:14px;font-style:italic;color:#333}

.tender{display:flex;flex-direction:column;gap:10px}
.tender .quick{display:flex;gap:7px;flex-wrap:wrap}
.tender .quick button{padding:10px 13px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-family:var(--mono);font-size:13px}
.tender input{width:100%;padding:12px;border-radius:8px;background:var(--shell);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:18px}
.tip-custom-in{width:100%;padding:10px;border-radius:8px;background:var(--shell);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:14px;margin-top:8px}
.tip-note{color:var(--text-dim);font-size:11px;font-weight:400}
.change{font-family:var(--mono);font-size:14px;padding:10px;border-radius:8px;background:var(--panel-2)}
.change b{color:var(--brass)}

/* ---------- split payment (pos.js) ---------- */
.split-lines,.split-legs{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;max-height:44vh;overflow-y:auto}
.split-line-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);cursor:pointer;font-size:13px}
.split-line-row .pr{font-family:var(--mono);color:var(--brass);margin-left:auto}
.split-assignee{font-size:11px;color:var(--text-dim);min-width:76px;text-align:right}
.split-leg-row{padding:11px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line)}
.split-leg-row .split-leg-hd{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:13.5px;font-weight:500}
.split-leg-row .split-leg-hd .pr{font-family:var(--mono);color:var(--brass);margin-left:auto}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--brass);padding:11px 18px;border-radius:999px;font-size:13px;z-index:60;max-width:88vw;text-align:center}
.toast[hidden]{display:none}

.check-toggle{display:none}
@media (max-width:880px){
  .check{position:fixed;inset:auto 0 0 0;height:76dvh;z-index:30;border-radius:16px 16px 0 0;transform:translateY(calc(100% - 62px));transition:transform .22s;box-shadow:0 -8px 30px rgba(0,0,0,.5)}
  .check.open{transform:translateY(0)}
  .check-toggle{display:flex;align-items:center;justify-content:space-between;padding:16px;font-family:var(--mono);font-size:14px;font-weight:600;border-bottom:1px dashed var(--tape-line)}
  /* padding-bottom reserves room for the collapsed check-toggle bar (position:fixed, full
     width, pinned to the bottom) so it doesn't sit on top of whatever's at the bottom of the
     sidebar — Logout, right below Settings — the same overlap .grid's own padding-bottom below
     already exists to avoid for the menu tiles. */
  .cats-col{flex:0 0 96px;padding-bottom:70px}
  .grid{padding-bottom:80px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}

  .topbar{flex-wrap:wrap;row-gap:8px;gap:8px;padding:8px 10px}
  .brand{flex:1 0 100%;flex-direction:row;align-items:baseline;gap:6px}
  .open-tables{margin-left:0;max-width:none;flex:1 1 auto;min-width:0}
  .btn-newtable,.btn-cheques{flex:0 0 auto;margin-left:0}
  .session-bar{margin-left:auto}
  .open-tables,.btn-newtable,.btn-cheques,.session-revenue-centre,.session-user,.btn-admin{padding:6px 9px;font-size:11px}
}
@media (max-width:420px){
  .session-revenue-centre{display:none!important}
  .brand span{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ================= ADMIN ================= */
.admin{flex:1;display:flex;min-height:0}
.admin[hidden]{display:none}
.a-tabs{flex:0 0 168px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:10px 8px;gap:4px;overflow-y:auto}
.a-tab{padding:11px 12px;border-radius:var(--r);text-align:left;font-size:13px;color:var(--text-dim);border:1px solid transparent}
.a-tab.on{background:var(--panel-2);color:var(--text);border-color:var(--line)}
.a-subnav{display:flex;gap:8px;margin-bottom:16px}
.a-subtab{padding:8px 14px;border-radius:8px;font-size:12.5px;color:var(--text-dim);background:var(--panel);border:1px solid var(--line)}
.a-subtab.on{background:var(--panel-2);color:var(--brass);border-color:var(--brass)}
/* Reports tab — a second-level nav (by report group) alongside the main tab strip, since ~15
   report types in one flat sub-nav (the pattern every other tab's sub-nav uses) would be
   unusable. Each group gets its own small subnav row rather than one giant flat list. */
.a-report-layout{display:flex;gap:22px;align-items:flex-start}
.a-report-nav{flex:0 0 190px;display:flex;flex-direction:column;gap:14px}
.a-report-group-label{margin:0 0 6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.a-report-nav .a-subnav{flex-direction:column;gap:4px;margin-bottom:0}
.a-report-nav .a-subtab{text-align:left}
.a-report-main{flex:1;min-width:0}
.a-report-filters{display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin-bottom:8px}
.a-report-filters label{display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.a-report-filters input{padding:8px 10px;border-radius:8px;background:var(--shell);border:1px solid var(--line);color:var(--text);font-family:var(--ui);font-size:13px;color-scheme:dark}
.a-report-export{display:flex;gap:8px;margin-left:auto}
.a-report-export .btn.ghost{color:var(--text)}
.a-report-title{margin:4px 0 14px;font-size:15px;color:var(--text)}
.a-report-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.a-report-table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.a-report-table th,.a-report-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line)}
.a-report-table th{color:var(--text-dim);font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--panel)}
.a-report-table tbody tr:last-child td{border-bottom:0}
.a-report-table tbody tr:hover td{background:var(--panel-2)}
.a-report-reprint{display:flex;gap:10px;margin-top:16px}
@media (max-width:880px){
  .a-report-layout{flex-direction:column}
  .a-report-nav{flex-direction:row;flex-wrap:wrap;width:100%}
}
.screen-editor{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.screen-picker{display:flex;flex-direction:column;gap:10px}
.screen-picker input[type=text]{padding:9px 10px;border-radius:8px;background:var(--shell);border:1px solid var(--line);color:var(--text);font-family:var(--ui);font-size:13px}
.screen-picker-list{max-height:52vh;overflow-y:auto}
.screen-pick-row{cursor:grab}
.screen-pick-row.a-row-disabled{opacity:.4;pointer-events:none}
.screen-contents{display:flex;flex-direction:column;gap:8px;min-height:120px;padding:8px;border-radius:var(--r);border:1px dashed var(--line)}
.screen-entry-row{cursor:grab}
.screen-entry-row .a-actions button{width:28px}
.screen-snapshot{grid-column:1;margin-top:2px}
.screen-snapshot>p{margin:0 0 8px;font-size:12px;color:var(--text-dim)}
.screen-snapshot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;padding:10px;border-radius:var(--r);border:1px dashed var(--line);background:var(--shell);max-height:220px;overflow-y:auto}
.snap-tile{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 7px;min-height:52px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.snap-tile .nm{font-size:10.5px;font-weight:500;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.snap-tile .pr{font-family:var(--mono);font-size:10px;color:var(--brass);margin-top:4px}
.snap-tile.tile-addon{border-style:dashed;border-color:var(--brass)}
.snap-tile .flag{position:absolute;top:5px;right:5px;font-size:7px;letter-spacing:.06em;color:var(--text-dim);border:1px solid var(--line);border-radius:3px;padding:1px 3px}
.a-content{flex:1;overflow-y:auto;padding:18px 22px}
.a-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.a-head h2{margin:0;font-size:18px}
.a-head p{margin:2px 0 0;font-size:12px;color:var(--text-dim)}
.a-list{display:flex;flex-direction:column;gap:8px}
.a-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.a-row.inactive{opacity:.5}
.a-row .a-nm{font-size:13.5px;font-weight:500}
.a-row .a-nar{font-size:12px;color:var(--text-dim);margin-left:6px}
.a-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:10.5px;letter-spacing:.03em}
.a-tag.warn{background:rgba(212,98,42,.15);border:1px solid var(--alert);color:var(--alert)}
.pin-reveal{margin:14px 0;padding:18px;border-radius:var(--r);background:var(--shell);border:1px solid var(--line);text-align:center;font-family:var(--mono);font-size:32px;letter-spacing:.25em;color:var(--brass)}
.a-row .a-meta{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-left:auto}
.a-row .a-actions{display:flex;gap:6px}
.a-row .a-actions button{padding:6px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);font-size:11px}
.a-row .a-actions button:hover{border-color:var(--brass);color:var(--brass)}
.a-row .a-actions button.danger:hover{border-color:var(--stop);color:var(--stop)}
.a-cathd{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin:16px 0 6px}
.a-cathd:first-child{margin-top:0}
.a-empty{padding:24px;text-align:center;color:var(--text-dim);font-size:13px}
.a-field{margin-bottom:12px}
.a-field label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px}
.a-field input[type=text],.a-field input[type=number],.a-field input[type=time],.a-field select{width:100%;padding:10px;border-radius:8px;background:var(--shell);border:1px solid var(--line);color:var(--text);font-family:var(--ui);font-size:13px}
.a-field input[type=time]{color-scheme:dark}
.a-row2{display:flex;gap:10px}
.a-row2>.a-field{flex:1}

/* ---------- Menu Item spreadsheet grid ---------- */
.item-grid-config{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px}
.item-grid-config .a-field{margin-bottom:0;min-width:180px;flex:1}
.item-grid-range{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:12px 14px;background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r);margin-bottom:14px}
.item-grid-range .a-field{margin-bottom:0}
.item-grid-range .a-field input{width:110px}
.item-grid-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.item-grid{width:100%;border-collapse:collapse;font-size:12.5px}
.item-grid th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);padding:9px 8px;background:var(--panel-2);border-bottom:1px solid var(--line);white-space:nowrap}
.item-grid td{padding:4px 5px;border-bottom:1px solid var(--line);vertical-align:middle}
.item-grid tr:last-child td{border-bottom:0}
.item-grid tr.inactive{opacity:.5}
.item-grid input[type=text],.item-grid input[type=number]{width:100%;padding:7px 8px;border-radius:6px;background:var(--shell);border:1px solid transparent;color:var(--text);font-family:var(--ui);font-size:12.5px}
.item-grid input[type=text]:focus,.item-grid input[type=number]:focus{border-color:var(--brass);outline:none}
.item-grid input.code-cell{width:74px;font-family:var(--mono)}
.item-grid input.price-cell{width:78px;font-family:var(--mono)}
.item-grid input.name-cell{min-width:150px}
.item-grid select{width:100%;min-width:120px;padding:7px 8px;border-radius:6px;background:var(--shell);border:1px solid transparent;color:var(--text);font-family:var(--ui);font-size:12px}
.item-grid select:focus{border-color:var(--brass);outline:none}
.item-grid .item-grid-actions{display:flex;gap:4px;white-space:nowrap}
.item-grid .item-grid-actions button{padding:5px 8px;font-size:11px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line)}
.item-grid .item-grid-actions button:hover{border-color:var(--brass);color:var(--brass)}
.item-grid .item-grid-actions button.danger:hover{border-color:var(--stop);color:var(--stop)}
/* This outlet's own Menu Items grid only (data-context-grid="menuItem") — its More…/Disable
   buttons are tapped constantly on the floor, so they get a larger touch target than Full
   Menu's own single "More…" button, which shares the same base .item-grid-actions styling. */
table[data-context-grid="menuItem"] .item-grid-actions button{padding:9px 14px;font-size:13px}
.item-grid .tiers-note{font-family:var(--mono);font-size:11px;color:var(--text-dim);white-space:nowrap}
.item-grid td.major-group-cell{color:var(--text-dim);font-size:12px;white-space:nowrap}
.item-grid td.code-cell{font-family:var(--mono);font-size:12.5px;padding-left:8px;white-space:nowrap;cursor:default}
.item-grid .outlet-chips{display:flex;flex-wrap:wrap;gap:3px;max-width:160px}
.item-grid .outlet-chip{padding:2px 6px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);font-size:10px;color:var(--text-dim);white-space:nowrap}
.item-grid .outlet-chip.here{border-color:var(--brass);color:var(--brass)}
.item-grid .import-btn{padding:5px 8px;font-size:11px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);white-space:nowrap}
.item-grid .import-btn.on{border-color:var(--brass);color:var(--brass)}
.item-grid .import-btn:hover{border-color:var(--brass);color:var(--brass)}

.ctx-menu{position:fixed;z-index:500;min-width:150px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:5px;font-size:12.5px}
.ctx-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;background:transparent;color:var(--text)}
.ctx-menu button:hover{background:var(--panel)}
.ctx-menu button.danger:hover{color:var(--stop)}
.ctx-menu-insert{position:fixed;z-index:500;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:14px;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;max-width:360px}
.ctx-menu-insert .a-field{margin-bottom:0}
.ctx-menu-insert .a-field input{width:90px}
.ctx-menu-insert p.a-hint{width:100%;margin:0 0 2px}
.a-variant-row,.a-comp-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.a-variant-row input{flex:1}
.a-variant-row button,.a-comp-row button{flex:0 0 auto;padding:8px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);font-size:12px}
.a-addbtn{margin-top:4px;padding:8px 12px;border-radius:6px;background:var(--panel-2);border:1px dashed var(--line);font-size:12px;color:var(--text-dim)}
.a-addbtn:hover{border-color:var(--brass);color:var(--brass)}
.a-addbtn:disabled{opacity:.4;cursor:not-allowed}
.a-addbtn:disabled:hover{border-color:var(--line);color:var(--text-dim)}
.a-checkrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);margin-bottom:6px}
.a-checkrow input[type=checkbox]{width:16px;height:16px}
.a-checkrow .a-cn{flex:1;font-size:13px}
.a-checkrow .a-removable{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim)}
.a-checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 12px}
.a-warn{padding:10px 12px;border-radius:8px;background:rgba(212,98,42,.12);border:1px solid var(--alert);font-size:12.5px;margin-bottom:12px}
.a-formerr{padding:10px 12px;border-radius:8px;background:rgba(212,98,42,.12);border:1px solid var(--alert);font-size:12.5px;margin-bottom:12px}
.a-hint{font-size:12px;color:var(--text-dim);margin:0 0 12px}
.a-headbtns{display:flex;gap:8px}
.a-headbtns .a-addbtn{margin-top:0}
.a-code{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);margin-right:8px}

/* ---------- Admin on a phone/small tablet: the 168px text-label sidebar has no room to live
   next to content, so it becomes a horizontal scrollable strip along the top instead (same
   breakpoint the till uses for its own mobile layout, above). Everything else here just
   un-crowds rows/forms/grids that were laid out assuming desktop width. ---------- */
@media (max-width:880px){
  .admin{flex-direction:column}
  .a-tabs{flex:0 0 auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
  .a-tabs .a-tab{flex:0 0 auto;white-space:nowrap}
  .a-tabs .a-tab[data-tab="__exit"]{margin-top:0!important;margin-left:auto!important}
  .a-content{padding:14px 16px 28px}
  .a-head{flex-wrap:wrap;row-gap:10px}
  .a-row{flex-wrap:wrap;row-gap:8px}
  .a-row .a-meta{flex:1 1 100%;margin-left:0;order:2}
  .a-row .a-actions{order:3;flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end}
  .a-row2{flex-direction:column;gap:0}
  .a-subnav{flex-wrap:wrap;row-gap:8px}
  .screen-editor{grid-template-columns:1fr}
}
@media (max-width:480px){
  .a-content{padding:12px 12px 24px}
  .item-grid-config .a-field,.item-grid-config{min-width:0}
  .item-grid-config .a-field{flex:1 1 128px}
}
/* Below 420px the till's own topbar rule (above) hides .session-revenue-centre outright to save
   space — fine there, since the till mostly stays on the RC it was logged into. In Admin it's a
   <select> and the only way a multi-RC admin switches location, so it needs to stay reachable
   even on a small phone; this wins on specificity over that rule despite both using !important. */
@media (max-width:420px){
  .admin-topbar .session-revenue-centre{display:block!important;flex:1 1 auto;min-width:0}
}

/* ================= LOGIN / REVENUE CENTRE PICKER =================
   Unified with the logo artwork's own brushed-charcoal background (sampled
   from BeSmart_POS_Logo_V3.png, ~#18191b-#1e1f21) so the real <img> logo
   sits on top with no visible seam, then the card floats below it. */
.login-view,.revenue-centre-picker,.workstation-setup{position:fixed;inset:0;z-index:70;background:radial-gradient(ellipse farthest-corner at 50% 0%,#262f38 0%,#1e232a 28%,#191c1f 55%,#100f11 80%,#0b0d0e 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:24px}
.login-view[hidden],.revenue-centre-picker[hidden],.workstation-setup[hidden]{display:none}

.login-logo{width:min(80vw,440px);height:auto;filter:drop-shadow(0 16px 34px rgba(0,0,0,.55))}

/* Small corner control, page-level (not nested in any one screen) — lets anyone reaching this
   server's public URL (e.g. an ngrok tunnel) grab the desktop installers without needing to log
   in first, same reasoning as /downloads itself being unauthenticated. z-index above the
   login-view/revenue-centre-picker/workstation-setup overlays' own 70 so it stays reachable no
   matter which of those is currently covering the screen — including the very first thing a
   fresh install shows, the workstation-setup PIN screen, which sits on top of everything else. */
.dl-wrap{position:fixed;top:10px;right:10px;z-index:80}
.dl-btn{padding:6px 11px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);font-family:inherit;font-size:11px;cursor:pointer;white-space:nowrap}
.dl-btn:hover{color:var(--text);border-color:var(--text-dim)}
.dl-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:rgba(28,34,40,.97);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:2px}
.dl-menu[hidden]{display:none}
.dl-menu a{padding:9px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:13px;display:block}
.dl-menu a:hover{background:var(--panel-2)}

.login-card{width:100%;max-width:320px;padding:28px;background:rgba(28,34,40,.9);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:16px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5)}
/* .btn.ghost has no color of its own (see its own rule) since it sits on backgrounds of both
   polarities across the app — dark here (the login card), light on the till's own check panel
   (.check/.pay) — so each context sets it explicitly instead of one value trying to fit both. */
.login-card .btn.ghost{color:var(--text)}
.login-brand{margin-bottom:20px}
.login-brand b{display:block;font-size:19px;letter-spacing:.02em}
.login-brand span{display:block;font-size:11px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.pin-dots{display:flex;justify-content:center;gap:14px;margin-bottom:10px}
.pin-dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:transparent}
.pin-dots span.filled{background:var(--brass);border-color:var(--brass)}
.pin-error{color:var(--stop);font-size:12px;font-weight:600;min-height:16px;margin-bottom:10px}
.pin-error[hidden]{visibility:hidden}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pin-pad button{padding:16px 0;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);font-size:18px;font-family:var(--mono)}
.pin-pad button:active{transform:scale(.96);border-color:var(--brass)}
.pin-pad button.ghost{font-size:12px;font-family:var(--ui);color:var(--text-dim)}
.revenue-centre-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.revenue-centre-list button{padding:16px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);font-size:15px;text-align:left}

/* ---------- workstation setup (src/shared/workstationSetup.js) — reuses .pin-dots/.pin-pad as-is
   (6 dots instead of 4, same visual language as login) for the PIN entry; this is just the
   confirmation screen's centered name display. ---------- */
.ws-setup-name{text-align:center;font-size:28px;font-weight:700;color:var(--brass);letter-spacing:.01em;padding:18px 10px;word-break:break-word}

/* ================= CUSTOMER ORDER (order.html) =================
   Phone-first by default (no responsive breakpoint needed — customers are
   almost always on a phone), reusing .tile/.cats/.opt/.modal/.ln-* as-is
   for anything that isn't page layout. */
.order-body{overflow-y:auto;display:flex;justify-content:center;background:var(--shell)}
.order-state{width:100%;max-width:520px;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.order-state[hidden]{display:none}
.order-spinner{display:flex;flex-direction:column;align-items:center}
.order-spinner h2{margin:0 0 8px;font-size:18px}
.order-spinner p{margin:0;color:var(--text-dim);font-size:13.5px;max-width:38ch}
.order-logo-lg{width:min(46vw,140px);height:auto;margin-bottom:18px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.order-app{width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;min-height:100dvh}
.order-app[hidden]{display:none}
.order-hd{padding:16px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.order-logo{height:32px;width:auto}
.order-app .cats{flex:0 0 auto;flex-direction:row;overflow-x:auto;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line)}
.order-app .cat{flex:0 0 auto;white-space:nowrap}
.order-app .grid{flex:1;padding-bottom:88px}
.order-empty{padding:40px 16px;text-align:center;color:var(--text-dim);font-size:13px}
.order-cartbar{position:fixed;left:12px;right:12px;bottom:14px;display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:999px;background:var(--brass);color:var(--ink);font-weight:600;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:30}
.order-cartbar[hidden]{display:none}
.order-cartbar-cta{margin-left:auto;font-size:12px;text-decoration:underline}
.order-cartrow{padding:9px 0;border-bottom:1px solid var(--line)}
.order-cartrow:last-child{border-bottom:0}
.order-cartrow-top{display:flex;gap:8px;justify-content:space-between;font-size:13.5px}
.order-cartrow-sub{margin-top:3px;font-size:11.5px;color:var(--text-dim)}
.order-cartrow-ctl{display:flex;align-items:center;gap:8px;margin-top:6px}
.order-cartrow-ctl button{padding:5px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);font-size:13px}
.order-cartrow-ctl span{font-family:var(--mono);min-width:16px;text-align:center}
.order-cartrow-ctl button.danger{margin-left:auto;color:var(--stop);border-color:rgba(180,64,47,.4);font-size:11px}
.order-cartrow.sent{opacity:.68}
.order-sent-tag{font-style:italic}
.order-cartrow .ln-n em{font-style:normal;color:var(--text-dim);margin-left:4px;font-size:12px}
.order-totals{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:12.5px}
.order-choice-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;width:100%;max-width:280px}
.order-settle-lines{text-align:left;width:100%;max-width:360px;margin-top:6px}
.mono{font-family:var(--mono)}
.order-qr-preview{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:10px;margin:12px 0 4px}
.order-qr-preview img{display:block}
/* .tr.grand's default border-top is var(--ink), meant for the till's light cheque tape —
   invisible on this page's dark modal, so give it the dark-theme line color instead. */
.order-totals .tr.grand{border-top-color:var(--line)}
.revenue-centre-list button:hover{border-color:var(--brass);color:var(--brass)}