:root{ /* Dark theme on BeSmart navy (owner, 2026-09-06): the surfaces carry the brand navy instead of graphite. */ --shell:#0E1526; --panel:#162340; --panel-2:#1E2E52; --line:#2B3E66; --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; /* the PIN pad's own blue: never overridden by an outlet skin (owner, 2026-09-06) */ --pin:#7C9BE0; --text:#E7ECEF; --text-dim:#8A9AA5; --ink:#191512; /* scroll bar thumb/track (owner, 14 Sep 2026): the bars follow the theme, see the *{scrollbar-color} rule below */ --sb-thumb:#3E5588; --sb-track:transparent; --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%,#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"]{ --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; --pin:#2d4a80; --text:#20242A; --text-dim:#4B5563; --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); } /* "Terracotta" (owner, 7 Sep 2026, from his Willow House picture): cream ground, sand cards, terracotta buttons, near-black brown text, green checks, big rounded corners, Fraunces headings over Manrope text. Same token names, so every rule follows; --navy carries the terracotta so every primary button and the tab highlight take it. State colours stay their own. */ :root[data-theme="terracotta"]{ --shell:#F3E6D3; --panel:#E8D5B6; --panel-2:#F1E3CB; --line:rgba(78,50,22,.18); --tape:#FFFDF8; --tape-line:#E3D3B8; --navy:#C8703A; --navy-2:#B25F2E; --brass:#A65A2A; --pin:#C8703A; --go:#4F7A45; --text:#2A2118; --text-dim:#6E5B48; --ink:#2A2118; --sb-thumb:rgba(78,50,22,.32); --r:16px; --ui:'Manrope','Space Grotesk',system-ui,sans-serif; --login-bg:radial-gradient(ellipse farthest-corner at 50% 0%,#F8EEDF 0%,#F3E6D3 40%,#EBD9BF 80%,#E4CFB1 100%); --login-card-bg:rgba(232,213,182,.94); --login-menu-bg:rgba(240,227,203,.98); --login-opt-bg:rgba(78,50,22,.05); --login-opt-bg-hover:rgba(78,50,22,.10); } /* Light Terracotta (owner, 7 Sep 2026): colour only. White grounds with the terracotta buttons; the shape, radius and type stay exactly the Light theme's. */ :root[data-theme="terracotta-light"]{ --shell:#FFFFFF; --panel:#F7F2EA; --panel-2:#FBF8F3; --line:rgba(78,50,22,.14); --tape:#FFFFFF; --tape-line:#E9DFD0; --navy:#C8703A; --navy-2:#B25F2E; --brass:#A65A2A; --pin:#C8703A; --go:#4F7A45; --text:#2A2118; --text-dim:#6E5B48; --ink:#2A2118; --sb-thumb:rgba(78,50,22,.26); --login-bg:radial-gradient(ellipse farthest-corner at 50% 0%,#FFFFFF 0%,#FCF8F2 45%,#F6EEE3 100%); --login-card-bg:rgba(255,255,255,.96); --login-menu-bg:rgba(255,255,255,.98); --login-opt-bg:rgba(78,50,22,.05); --login-opt-bg-hover:rgba(78,50,22,.10); } /* "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 — same relationship as Terracotta/Light Terracotta above). 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"]{ --r:0; } :root[data-theme="light-solid"]{ --shell:#FFFFFF; --panel:#F5F6F8; --panel-2:#EAECEF; --line:#DADDE1; --brass:#2d4a80; --pin:#2d4a80; --text:#20242A; --text-dim:#4B5563; --sb-thumb:#C3C8D0; --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); } [data-theme="dark-solid"] *:not(.check-pax, .check-overdue-btn, .fp-marker, .chip, .toast, .a-tag, .dl-btn, .pin-dots span, .order-ready-banner button, .order-theme-toggle, .order-bell-toggle, .order-cartbar, .order-paybar, .order-avatar-fab, .order-waiter-fab, .ov-countdown, .ov-close, .ov-lang, .mic-hint, .screen-dirty, .outlet-chip, #rmFloor, #rmFloor *), [data-theme="light-solid"] *:not(.check-pax, .check-overdue-btn, .fp-marker, .chip, .toast, .a-tag, .dl-btn, .pin-dots span, .order-ready-banner button, .order-theme-toggle, .order-bell-toggle, .order-cartbar, .order-paybar, .order-avatar-fab, .order-waiter-fab, .ov-countdown, .ov-close, .ov-lang, .mic-hint, .screen-dirty, .outlet-chip, #rmFloor, #rmFloor *){ border-radius:0!important; } :root[data-theme="terracotta"] h1,:root[data-theme="terracotta"] h2,:root[data-theme="terracotta"] .a-head h2,:root[data-theme="terracotta"] .login-title{font-family:'Fraunces',Georgia,serif;font-weight:900;letter-spacing:-.01em} :root[data-theme="terracotta"] .btn,:root[data-theme="terracotta"] .opt,:root[data-theme="terracotta"] .a-field input,:root[data-theme="terracotta"] .a-field select,:root[data-theme="terracotta"] .a-field textarea{border-radius:12px} :root[data-theme="terracotta"] .btn.primary{background:var(--navy);color:#fff} :root[data-theme="terracotta"] .btn.primary:hover{background:var(--navy-2)} :root[data-theme="terracotta"] .opt.on{border-color:var(--navy);color:var(--navy);background:rgba(200,112,58,.10)} /* ---- The Terracotta till (owner's mock, 7 Sep 2026): round logo, pill chips, a count badge on every category, a serif category heading with a search box, big rounded sand tiles with a photo well, and the cheque as a rounded card. The cheque still flies in from the right and closed cheques are still picked up from the tab strip: same setup, new shape. Scoped to the till's own ids so BOH, the QR menu and the other two themes keep their look. ---- */ :root[data-theme="terracotta"] #topbar{padding:12px 22px;gap:12px;border-bottom:0;background:var(--shell)} :root[data-theme="terracotta"] #topbar .brand{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;line-height:1.1} :root[data-theme="terracotta"] #topbar .brand::before{content:"B";grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:23px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px -6px rgba(200,112,58,.55)} :root[data-theme="terracotta"] #topbar .brand b{font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:20px;letter-spacing:0;align-self:end} :root[data-theme="terracotta"] #topbar .brand span{font-size:10.5px;letter-spacing:.18em;font-weight:700;align-self:start;margin-top:2px} :root[data-theme="terracotta"] #topbar .session-bar{gap:8px;margin-left:4px} :root[data-theme="terracotta"] #topbar .session-user{border-radius:999px;padding:9px 15px;background:var(--panel-2);border:1px solid var(--line);font-weight:600;font-size:12.5px;color:var(--text)} :root[data-theme="terracotta"] #terraActions{margin-left:auto;display:flex;align-items:center;gap:8px} :root[data-theme="terracotta"] #terraActions .a-tab{margin:0!important;border-radius:999px;padding:9px 16px;background:var(--panel-2);border:1px solid var(--line);color:var(--text)!important;font-weight:700;font-size:12.5px;gap:7px} :root[data-theme="terracotta"] #terraActions .a-tab:hover{background:var(--navy);border-color:var(--navy);color:#fff!important} :root[data-theme="terracotta"] #terraActions #btnSettingsAction,:root[data-theme="terracotta"] #terraActions #btnLogoutAction{width:42px;height:42px;padding:0;justify-content:center;font-size:0;gap:0} :root[data-theme="terracotta"] #terraActions #btnSettingsAction svg,:root[data-theme="terracotta"] #terraActions #btnLogoutAction svg{width:18px;height:18px} :root[data-theme="terracotta"] #terraActions .a-tab[hidden]{display:none} /* Category rail: round count badges, English over Arabic, the open one in terracotta. */ :root[data-theme="terracotta"] #mainView .cats-col{flex-basis:178px;background:var(--shell);border-right:0;padding-left:12px} :root[data-theme="terracotta"] #cats{background:transparent;padding:6px 10px 12px 0;gap:8px} :root[data-theme="terracotta"] #cats .cat{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:9px 12px 9px 9px;border-radius:999px;color:var(--text);font-weight:700;font-size:13.5px;border:1px solid transparent;line-height:1.15} :root[data-theme="terracotta"] #cats .cat:hover{background:var(--panel-2);border-color:var(--line)} :root[data-theme="terracotta"] #cats .cat .cat-n{grid-row:1/3;width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:800;color:var(--text-dim)} :root[data-theme="terracotta"] #cats .cat .cat-nm{grid-column:2;align-self:end} :root[data-theme="terracotta"] #cats .cat small{grid-column:2;margin-top:1px;font-size:11px;opacity:.7;text-align:left} :root[data-theme="terracotta"] #cats .cat.on{background:var(--navy);border-color:var(--navy);color:#fff} :root[data-theme="terracotta"] #cats .cat.on .cat-n{background:rgba(255,255,255,.22);border-color:transparent;color:#fff} :root[data-theme="terracotta"] #cats .cat.on small{opacity:.88} /* Menu: serif heading with the Arabic beside it, a search pill, then the tiles. */ :root[data-theme="terracotta"] #grid{padding:6px 24px 24px 14px;gap:14px;grid-template-columns:repeat(auto-fill,minmax(176px,1fr))} :root[data-theme="terracotta"] #grid .grid-head{display:flex;grid-column:1/-1;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;padding:10px 4px 6px} :root[data-theme="terracotta"] #grid .grid-head h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:32px;line-height:1;letter-spacing:-.01em;color:var(--text)} :root[data-theme="terracotta"] #grid .grid-head h2 small{font-family:var(--ar);font-size:19px;font-weight:400;color:var(--text-dim);margin-left:12px;direction:rtl;display:inline-block;vertical-align:baseline} :root[data-theme="terracotta"] #grid .grid-search{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:9px 16px;min-width:230px;color:var(--text-dim)} :root[data-theme="terracotta"] #grid .grid-search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(200,112,58,.18)} :root[data-theme="terracotta"] #grid .grid-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--text);min-width:0} :root[data-theme="terracotta"] #grid .grid-search input::placeholder{color:var(--text-dim)} :root[data-theme="terracotta"] #grid .tile{background:var(--panel-2);border:0;border-radius:26px;padding:14px;min-height:150px;box-shadow:0 1px 0 rgba(78,50,22,.05),0 14px 26px -20px rgba(78,50,22,.45);transition:transform .08s,box-shadow .12s} :root[data-theme="terracotta"] #grid .tile:active{transform:scale(.97);box-shadow:0 0 0 2px var(--navy)} :root[data-theme="terracotta"] #grid .tile.tile-blank{background:transparent;box-shadow:none} :root[data-theme="terracotta"] #grid .tile.tile-addon{border:1.5px dashed var(--navy);box-shadow:none} :root[data-theme="terracotta"] #grid .tile .nm{font-size:15px;font-weight:700;color:var(--text)} :root[data-theme="terracotta"] #grid .tile .nar{font-size:12.5px;color:var(--text-dim)} :root[data-theme="terracotta"] #grid .tile .pr{font-family:var(--ui);font-weight:800;font-size:14px;color:var(--navy);margin-top:8px} :root[data-theme="terracotta"] #grid .tile-img{height:118px;border-radius:18px;margin-bottom:10px} /* No photo on file yet: a dashed well where the photo will go, as on the owner's mock. */ :root[data-theme="terracotta"] #grid .tile[data-photo]::before{content:attr(data-photo);display:flex;align-items:center;justify-content:center;text-align:center;height:88px;border-radius:18px;border:1.5px dashed rgba(78,50,22,.28);background:rgba(255,253,248,.4);color:var(--text-dim);font-size:11.5px;font-weight:600;line-height:1.3;padding:0 10px;margin-bottom:10px} :root[data-theme="terracotta"] #grid .tile .flag{top:12px;right:12px;border-radius:999px;background:var(--text);border-color:transparent} :root[data-theme="terracotta"] #grid .tile .allergy-flag{top:12px;left:12px;border-radius:999px} /* Cheque tab strip: same tabs, softer shapes; New table and Closed cheques as pills. */ :root[data-theme="terracotta"] #chequeTabsCol{flex-basis:120px;background:var(--shell);border-left:0} :root[data-theme="terracotta"] #chequeTabs{background:transparent;padding:12px 8px 12px 0} :root[data-theme="terracotta"] #chequeTabs .cheque-tab{border-radius:0 14px 14px 0;font-family:var(--ui);font-weight:800;font-size:14px;background:var(--panel-2);border-color:var(--line)} :root[data-theme="terracotta"] #chequeTabs .cheque-tab:hover{color:var(--navy);border-color:var(--navy)} :root[data-theme="terracotta"] #chequeTabs .cheque-tab.on{background:var(--tape);border-color:rgba(78,50,22,.14);color:var(--text);box-shadow:0 8px 18px -10px rgba(78,50,22,.5)} :root[data-theme="terracotta"] #chequeTabs .cheque-tab.new{border-radius:999px;margin-left:8px;width:100px;height:38px;border:1px solid var(--navy);background:var(--navy);color:#fff;font-size:11.5px;font-weight:700} :root[data-theme="terracotta"] #chequeTabs .cheque-tab.new::before{content:"+\00a0"} :root[data-theme="terracotta"] #chequeTabs .cheque-tab.new:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff} :root[data-theme="terracotta"] #chequeTabs .cheque-tab.closed{border-radius:999px;background:transparent;border:1.5px solid var(--navy);color:var(--navy);font-size:11px;width:100px;margin-left:8px} :root[data-theme="terracotta"] #chequeTabs .cheque-tab.closed:hover{background:var(--navy);color:#fff} :root[data-theme="terracotta"] #chequeTabs .cheque-tab.overdue,:root[data-theme="terracotta"] #chequeTabs .cheque-tab.overdue.on{background:var(--stop);border-color:var(--stop);color:#fff} /* The cheque: a rounded sand card that still flies in from the right (same setup, new shape). */ :root[data-theme="terracotta"] #check{top:12px;bottom:12px;right:126px;width:352px;max-width:calc(100% - 132px);border-radius:24px;background:var(--panel-2);color:var(--text);box-shadow:0 24px 48px -24px rgba(78,50,22,.55),0 0 0 1px rgba(78,50,22,.08);transform:translateX(calc(100% + 132px));overflow:hidden} :root[data-theme="terracotta"] #check.open{transform:none} :root[data-theme="terracotta"] #check .check-hd{padding:18px 20px 10px;border-bottom:0;align-items:flex-start;flex-wrap:wrap;gap:6px 10px} :root[data-theme="terracotta"] #check .check-hd b{font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:24px;line-height:1.05;letter-spacing:-.01em} :root[data-theme="terracotta"] #check .check-hd b::before{content:"Current cheque";display:block;font-family:var(--ui);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px} :root[data-theme="terracotta"] #check .check-hd span{font-family:var(--ui);font-weight:600;opacity:.7} :root[data-theme="terracotta"] #check .check-pax{border-radius:999px;border:1px solid var(--line);background:rgba(255,253,248,.6);opacity:1} :root[data-theme="terracotta"] #check .lines{padding:6px 20px} :root[data-theme="terracotta"] #check .ln{border-bottom:1px solid rgba(78,50,22,.10);border-radius:10px} :root[data-theme="terracotta"] #check .ln:hover{background:rgba(255,253,248,.55)} :root[data-theme="terracotta"] #check .ln-top{font-family:var(--ui);font-weight:600} :root[data-theme="terracotta"] #check .ln-n{font-weight:600} :root[data-theme="terracotta"] #check .ln-sub{color:var(--text-dim)} :root[data-theme="terracotta"] #check .ln-ctl button{border-radius:50%;background:rgba(200,112,58,.16);color:var(--navy)} :root[data-theme="terracotta"] #check .empty{padding:34px 12px 30px;color:var(--text-dim);font-weight:600} :root[data-theme="terracotta"] #check .empty::before{content:"";display:block;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;border:1px solid var(--line);background:var(--tape) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A65A2A' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.5v11M14.8 9.2a2.6 2.6 0 0 0-2.8-1.4c-1.6 0-2.6.9-2.6 2 0 2.6 5.4 1.4 5.4 4.1 0 1.2-1.1 2.1-2.8 2.1a2.9 2.9 0 0 1-3-1.6'/%3E%3C/svg%3E") center/28px no-repeat} :root[data-theme="terracotta"] #totals{font-family:var(--ui);font-size:13px;padding:12px 20px;border-top:1px dashed rgba(78,50,22,.28)} :root[data-theme="terracotta"] #totals .tr{padding:3px 0} :root[data-theme="terracotta"] #totals .tr.grand{font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:21px;border-top:1px solid var(--text)} :root[data-theme="terracotta"] #check .pay{padding:10px 16px 16px;gap:8px} :root[data-theme="terracotta"] #check .btn{border-radius:999px;padding:10px 12px;background:transparent;border:1.5px solid var(--navy);color:var(--navy);font-weight:700;font-size:12.5px} :root[data-theme="terracotta"] #check .btn:hover{background:rgba(200,112,58,.12)} :root[data-theme="terracotta"] #check .btn.white,:root[data-theme="terracotta"] #check .btn.fire{background:var(--navy);border-color:var(--navy);color:#fff} :root[data-theme="terracotta"] #check .btn.white:hover,:root[data-theme="terracotta"] #check .btn.fire:hover{background:var(--navy-2);border-color:var(--navy-2)} :root[data-theme="terracotta"] #check .btn.navy.primary{background:var(--text);border-color:var(--text);color:var(--shell)} :root[data-theme="terracotta"] #check .btn.navy.primary:hover{background:#3d3122;border-color:#3d3122} /* Phones: same bottom sheet and bottom tab strip as the other themes (these ids out-rank the 880px rules further down, so the phone shape is restated here). */ @media (max-width:880px){ :root[data-theme="terracotta"] #check{position:fixed;top:auto;inset:auto 0 56px 0;right:0;width:auto;max-width:none;height:72dvh;border-radius:20px 20px 0 0;transform:translateY(calc(100% + 60px));box-shadow:0 -12px 30px rgba(78,50,22,.35)} :root[data-theme="terracotta"] #check.open{transform:translateY(0)} :root[data-theme="terracotta"] #chequeTabsCol{flex-basis:0} :root[data-theme="terracotta"] #chequeTabs{padding:5px 8px;background:var(--panel)} :root[data-theme="terracotta"] #chequeTabs .cheque-tab{border-radius:12px 12px 0 0;width:68px;height:40px} :root[data-theme="terracotta"] #chequeTabs .cheque-tab.new{border-radius:999px;margin-left:0;width:auto;padding:0 12px;height:40px} :root[data-theme="terracotta"] #chequeTabs .cheque-tab.closed{margin-left:auto;width:auto;padding:0 12px;height:40px} :root[data-theme="terracotta"] #mainView .cats-col{flex-basis:118px;padding-left:6px} :root[data-theme="terracotta"] #grid{padding:6px 12px 80px 8px;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} :root[data-theme="terracotta"] #grid .grid-head h2{font-size:24px} :root[data-theme="terracotta"] #grid .grid-search{min-width:0;flex:1 1 160px} :root[data-theme="terracotta"] #topbar{padding:8px 12px} :root[data-theme="terracotta"] #topbar .brand{flex:0 1 auto} :root[data-theme="terracotta"] #terraActions .a-tab{padding:7px 12px;font-size:11.5px} :root[data-theme="terracotta"] #terraActions #btnSettingsAction,:root[data-theme="terracotta"] #terraActions #btnLogoutAction{width:36px;height:36px} } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* Scroll bars follow the theme (owner, 14 Sep 2026). Standard property only: on Chromium 121+ (Electron 32 = Chromium 128) any non-auto scrollbar-color makes ::-webkit-scrollbar rules on that element inert, so the two systems are never mixed. Universal selector on purpose: the value is inherited as a RESOLVED colour, so declaring it on :root alone would freeze the :root palette and the body[data-world] outlet skins (pos-themes.css, order-themes.css) would never reach the scrollers; re-read per element, their --sb-thumb wins. */ *{scrollbar-color:var(--sb-thumb) var(--sb-track)} 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} /* 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:16px;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} .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