:root{ /* ===== The token layer (BeSmart Technology design system, brought in 21 Sep 2026 on MAK's decision, brief from the BOH Redesign lane; canvas 2yV7QeTkYAUe7UfMrJnd12). One set of names for every mode: surfaces, lines, ink, one brand colour with one job, three status pairs, three radii. Dark is the base, Light redefines the same names below, the Solid pair only zeroes the radii. The OLD names (--shell, --panel, --text, --navy, --brass ...) stay as aliases of these for one release so the whole file follows without a mass rename; every NEW rule uses the new names. Untouched on purpose: the till's functional colours --go / --stop / --alert and the cheque paper --tape (state reads the same in every mode), the PIN pad's own --pin, the KDS ticket ages, #rmFloor and the guest page worlds in order-themes.css. ===== */ color-scheme:dark; --surface:#0f1526; --surface-raised:#171f33; --surface-sunken:#0a0f1c; --line:#2a3650; --line-strong:#5f7096; --ink:#edf1f8; --ink-muted:#a6b1c6; --ink-faint:#8290aa; --brand:#9fb6e6; --brand-strong:#bccbf0; --brand-soft:#1c2b4a; --on-brand:#0f1526; --success:#6fd39f; --success-soft:#123626; --warning:#f0b35a; --warning-soft:#3d2a0c; --danger:#f4928a; --danger-soft:#46191a; --focus-ring:0 0 0 2px var(--surface),0 0 0 4px var(--brand); --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-full:999px; /* aliases, the old names */ --shell:var(--surface); --panel:var(--surface-raised); --panel-2:var(--surface-sunken); --text:var(--ink); --text-dim:var(--ink-muted); --navy:var(--brand); --navy-2:var(--brand-strong); --brass:var(--brand); --tape:#FFFFFF; --tape-line:#DADDE1; /* the cheque paper is plain white (owner, 2026-09-05) */ --go:#2F7F5B; --stop:#B4402F; --alert:#D4622A; /* the PIN pad's own blue: never overridden by an outlet skin (owner, 2026-09-06) */ --pin:#7C9BE0; --ink-on-tape:#191512; /* was --ink: dark text on the white cheque paper, see the .check rules */ /* Scroll bar thumb/track. The bars themselves are HIDDEN everywhere since 23 Sep 2026, so these two paint nothing today; they are kept because the outlet skins in pos-themes.css and order-themes.css still set --sb-thumb, and a token that vanishes takes those rules with it. */ --sb-thumb:#3E5588; --sb-track:transparent; --r:var(--radius-lg); /* Archivo only (the design system): headings condensed and heavy, labels tracked uppercase, money in tabular numerals; the old Space Grotesk, IBM Plex Mono, Fraunces and Manrope are gone. */ --ui:'Archivo',system-ui,sans-serif; --ar:'Noto Kufi Arabic','Archivo',sans-serif; --mono:'Archivo',system-ui,sans-serif; /* 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%,#24345c 0%,#1a2846 28%,#131d36 55%,#0c1325 80%,#080d1a 100%); --login-card-bg:rgba(22,35,64,.9); --login-menu-bg:rgba(22,35,64,.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"]{ color-scheme:light; --surface:#f4f6f9; --surface-raised:#ffffff; --surface-sunken:#e8ecf2; --line:#c3c8d0; --line-strong:#7d8797; --ink:#182338; --ink-muted:#5a6577; --ink-faint:#5e687c; --brand:#203864; --brand-strong:#172a4d; --brand-soft:#e4eaf5; --on-brand:#ffffff; --success:#1e6b47; --success-soft:#dcf3e6; --warning:#8a4b00; --warning-soft:#fdecd2; --danger:#b3261e; --danger-soft:#fbe1df; --pin:#2d4a80; --sb-thumb:#C3C8D0; --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); } /* "Dark Solid" / "Light Solid" (owner, 12 Sep 2026: originally one "Solid" that kept whatever theme was active, split same-day into its own dark and light pair). Dark Solid redefines no color at all (base :root above is already the dark palette); Light Solid copies the Light theme's colors exactly. Both only add --r:0 (the handful of rules already written against the token) plus the broad rule below, which covers the other ~160 corners across this file and resmaro.css that predate --r and are hardcoded to a pixel/percent value directly. Genuinely round/pill controls (badges, avatars, toggle switches, floating action buttons) are excluded on purpose — they're functional shapes, not box corners, and forcing them square would make them unreadable as what they are. #rmFloor (ResM's whole procedural room drawing — RM_FLOOR_CSS in resmaro-host.js: tables, chairs, sofas, zones) is excluded wholesale rather than shape-by-shape: that file's own comment already says "the room commits to its own fixed palette like a real drawing — it doesn't follow the app theme," so Solid shouldn't touch it at all (adversarial review, 12 Sep 2026: without this, Solid was silently squaring every round/oval table and sofa in the floor-plan builder). Add any NEW pill/circle element's class to the exclusion list too, or Solid will silently square it. */ :root[data-theme="dark-solid"]{ --radius-sm:0; --radius-md:0; --radius-lg:0; --r:0; } :root[data-theme="light-solid"]{ color-scheme:light; --surface:#f4f6f9; --surface-raised:#ffffff; --surface-sunken:#e8ecf2; --line:#c3c8d0; --line-strong:#7d8797; --ink:#182338; --ink-muted:#5a6577; --ink-faint:#5e687c; --brand:#203864; --brand-strong:#172a4d; --brand-soft:#e4eaf5; --on-brand:#ffffff; --success:#1e6b47; --success-soft:#dcf3e6; --warning:#8a4b00; --warning-soft:#fdecd2; --danger:#b3261e; --danger-soft:#fbe1df; --pin:#2d4a80; --sb-thumb:#C3C8D0; --radius-sm:0; --radius-md:0; --radius-lg:0; --r:0; --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); } /* Solid themes square the app through the radius tokens (--radius-sm/md/lg at 0, see the theme blocks above); --radius-full stays, so badges, dots and avatars keep their shape. The old [data-theme=*-solid] * { border-radius:0 !important } rule and its exclusion list went with the sweep of 21 Sep 2026. ResM (resmaro.css) still carries hard coded corners: the PA lane applies the same sweep there; until then its cards stay round in Solid. */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* ================= NO SCROLL BARS, ANYWHERE ================= MAK, 23 Sep 2026: "I hate scroll bars, I want to scroll up and down using mouse wheels and I dont want to see scroll bars across all, including resm." ONLY THE BAR GOES. Every way of scrolling still works and is untouched: the wheel, a trackpad, touch and drag on a phone, the keyboard's arrows, Page Up and Down, Home and End, and a focused element being scrolled into view. This hides the indicator, it does not make anything unscrollable. Both mechanisms are declared because neither covers everything we ship on: scrollbar-width the standard property. Chromium 121+ (Electron 32 is Chromium 128) and Firefox. This is what does the work in the till, the BOH and the KDS. ::-webkit-scrollbar older WebKit, which is what a guest's phone may still be running on the QR menu and the booking page. -ms-overflow-style old Edge, for the odd Windows machine in a back office. THE TRAP, and it is why the rule this replaces could not simply be extended: a non-auto scrollbar-color makes every ::-webkit-scrollbar rule on that element INERT on Chromium 121+. The old rule set scrollbar-color on the universal selector to theme the bars, so adding a ::-webkit-scrollbar hide beside it would have silently done nothing on exactly the builds that matter. The colour rule is therefore gone, not disabled: with no bar to paint it has no job. --sb-thumb and --sb-track stay defined in the themes so nothing referencing them breaks. Universal selector, for the same reason the old rule used one: every pane in these apps is its own scroller. :root alone would leave every inner list with its bar. */ *{scrollbar-width:none;-ms-overflow-style:none} *::-webkit-scrollbar{width:0;height:0;display:none} 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} /* Type from the design system: headings condensed and heavy, money and quantities in tabular numerals so columns line up, one focus ring everywhere. */ h1,h2,h3{font-stretch:80%;font-weight:700;letter-spacing:0} h1{font-weight:800} .pr,.totals,.lines,.cheque-tab,.price-cell,.a-code,.item-grid td,.screen-pick-num,.layout-num,.ln-qty{font-variant-numeric:tabular-nums} :focus-visible{outline:none;box-shadow:var(--focus-ring)} /* No label ever wraps (MAK, 21 Sep 2026): tabs, chips, badges, buttons, column headers and field labels hold one line and take the width of their longest word; a group of buttons wraps between buttons, never inside one. */ .a-tab,.a-tabs button,.a-subtabs button,.tabs button,.chip,.a-tag,.btn,.opt,.a-addbtn,.a-actions button,.a-headbtns button,th,.a-field>label,.cat .cat-nm{white-space:nowrap} /* Native controls follow the mode (color-scheme on :root above), and every one of them gets the same frame as a text field, so a select or a date never renders white on dark. */ select,input[type=date],input[type=time],input[type=number],input[type=file],input[type=month],input[type=week]{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-family:var(--ui)} .ar{font-family:var(--ar);direction:rtl} /* On a French installation the second name is French (see locale.js secondLang): the same elements, read left to right in the page's own face. The guest page sets the attribute from /api/order/state; the BOH will when its labels follow (27 Sep 2026). */ html[data-second-lang="fr"] .ar,html[data-second-lang="fr"] .nar,html[data-second-lang="fr"] .menu .tile .nar,html[data-second-lang="fr"] .tile .a,html[data-second-lang="fr"] .sub.ar{font-family:inherit;direction:ltr} .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} /* Admin's Stop POS services switch: a strip above the New table tabs while counting down and while down; the wall only for the last five seconds of the countdown */ .pos-strip{flex:0 0 auto;padding:8px 8px;font-size:12px;font-weight:700;line-height:1.25;text-align:center;color:#fff;background:#b45309;border-bottom:1px solid var(--line)} .pos-strip.down{background:#991b1b} .pos-strip.counting{background:#b45309} /* Admin's Stop POS services switch: the countdown sits over the till, the wall replaces it */ .posdown-wall{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:rgba(20,24,32,.92);color:#fff} .posdown-wall.counting{background:rgba(20,24,32,.55);align-items:flex-start;padding-top:12vh} .posdown-box{max-width:460px;text-align:center;padding:28px 32px;border-radius:var(--radius-lg);background:#1d2430;box-shadow:0 20px 60px rgba(0,0,0,.5)} .posdown-box h2{margin:0 0 10px;font-size:22px} .posdown-box p{margin:0;font-size:15px;line-height:1.5;opacity:.9} .posdown-box b{font-size:20px} @media print{.posdown-wall{display:none!important}} .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} /* The R&B wordmark in the till and BOH headers (MAK, 15 Sep 2026: "the logo is not there inside the screen"). The same 480x160 login cut, cropped to the wordmark: the SERVICE WITH RHYTHM / BACK OF HOUSE line under it turns to a smudge at 30px, so the box shows rows 16 to 119 and columns 122 to 357 of the image (measured on all four cuts), scaled to the header height. Dark themes swap to the white cuts exactly as the login logos do (rules further down, same specificity order). */ .brand-logo{display:block;width:68.5px;height:30px;background:url("assets/logo-rnb-light.png") no-repeat -35.5px -4.7px/139.8px 46.6px} .brand-logo-boh{background-image:url("assets/logo-boh-light.png")} /* BOH keeps a small BOH beside the wordmark: the BACK OF HOUSE line is the part the crop removes. */ .brand-row{display:flex;align-items:center;gap:7px} /* KDS board header: its own mark (bars, R&B, KITCHEN DISPLAY SCREEN) whole, no crop: the screen is a big monitor and the line stays readable at this height. Dark cut under the dark theme, as on its login. */ .brand-logo-kds{display:block;height:38px;width:auto} :root[data-theme="dark"] .brand-logo-kds{content:url("assets/logo-kds-dark.png")} .brand-suffix{font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--text-dim)} .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:var(--radius-md);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:var(--radius-md);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:var(--radius-md);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:var(--radius-md);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