:root{ --shell:#14181C; --panel:#1C2228; --panel-2:#232B32; --line:#2E383F; --tape:#FFFFFF; --tape-line:#DADDE1; /* the cheque paper is plain white (owner, 2026-09-05) */ /* BeSmart navy (owner, 2026-09-05): the old brass accent is retired — --brass now carries a light navy so every existing var(--brass) frame/hover reads in the BeSmart theme, and the two navy tokens paint the cheque's buttons. */ --navy:#203864; --navy-2:#2d4a80; --brass:#7C9BE0; --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; /* The login screen's own tokens — see the LOGIN / REVENUE CENTRE PICKER section below for why these exist separately from --shell/--panel rather than reusing them directly. */ --login-bg:radial-gradient(ellipse farthest-corner at 50% 0%,#262f38 0%,#1e232a 28%,#191c1f 55%,#100f11 80%,#0b0d0e 100%); --login-card-bg:rgba(28,34,40,.9); --login-menu-bg:rgba(28,34,40,.97); --login-opt-bg:rgba(255,255,255,.03); --login-opt-bg-hover:rgba(255,255,255,.06); } /* "Clean slate" light theme — same variable names as the dark palette above, so every rule in this file that already reads var(--shell)/var(--text)/etc. picks it up with no other changes. --tape/--tape-line/--ink/--go/--stop/--alert are already light-surface-safe (they're either already light, or used as solid button/badge backgrounds with fixed light text on top) and stay the same in both themes on purpose. --brass is darkened here specifically — the dark theme's gold reads fine on a near-black panel but loses too much contrast used as small text on a near-white one, so light mode gets a deeper gold instead of reusing the same hex. Applied by toggling data-theme on — see /shared/theme.js — never edit this selector by hand without checking style.css's other var(--brass)/var(--text-dim) usages still read cleanly. */ :root[data-theme="light"]{ --shell:#FFFFFF; --panel:#F5F6F8; --panel-2:#EAECEF; --line:#DADDE1; /* --brass and --text-dim: darkened again from the first light-mode pass — both still landed under the 4.5:1 WCAG AA floor against --panel (#A67C1A measured ~3.5:1, #6B7280 ~4.47:1), caught live on the guest order page's price text and secondary labels. These clear ~5:1/~7:1. */ --brass:#2d4a80; --text:#20242A; --text-dim:#4B5563; --login-bg:radial-gradient(ellipse farthest-corner at 50% 0%,#FFFFFF 0%,#F6F7F9 28%,#EEF0F3 55%,#E4E7EB 80%,#DDE1E6 100%); --login-card-bg:rgba(255,255,255,.9); --login-menu-bg:rgba(255,255,255,.97); --login-opt-bg:rgba(0,0,0,.03); --login-opt-bg-hover:rgba(0,0,0,.06); } *{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} /* Left-aligned stack: the outlet name starts under the first letter of the wordmark. */ .brand{display:flex;flex-direction:column;align-items:flex-start;text-align:left;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} /* Same reasoning for the KDS board's topbar — no Cheques button there either, so the workstation-name tag and Reload button (both now in .session-bar) need their own push right. */ .kds-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