/* ═══════════════════════════════════════════════════════════════════
   Qeat — the staff look, and the staff shell.

   Loaded LAST, on staff pages only (body.staff). It does three jobs:

   1. TOKENS. The app's existing token names (--surface, --on-surface,
      --primary …) get the white values here, on :root. Today's dark values are
      kept, word for word, under [data-theme="dark"] for the day a switch is
      built — there is none yet. css/tokens.css is shared with the guest pages
      (menu, Aria, bill) and is NOT changed, so they keep their look; the
      kitchen screen does not load this file, so it stays dark.

   2. THE SKIN. The shared components were drawn for a dark, gold, serif,
      UPPERCASE system. Re-skinned here in tokens: white cards, Manrope,
      sentence case, lime for the one main action, ink for the strong
      secondary, white-with-a-border for everything else. Purple is for tables
      and guest marks only; amber for late and bill states only.

   3. THE SHELL. The left menu of labelled icons (#rail, filled by renderNav()
      in js/auth.js), the top bar beside it, and — under 720px — the bottom bar
      the menu turns into.

   Page-level layout is NOT changed here: Phase 2 moves each page to the
   canvas layout. docs/redesign/PLAN.md has the whole plan.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --surface:                   #F4F4F0;
  --surface-dim:               #F4F4F0;
  --surface-bright:            #FFFFFF;
  --surface-container-lowest:  #FFFFFF;
  --surface-container-low:     #F7F7F3;
  --surface-container:         #FFFFFF;
  --surface-container-high:    #F0F0EA;
  --surface-container-highest: #E4E4DE;
  --surface-variant:           #F0F0EA;

  /* "primary" was brass. On staff pages the accent is ink: no gold. */
  --primary:              #16171A;
  --on-primary:           #FFFFFF;
  --primary-container:    #5B5E66;
  --on-primary-container: #16171A;
  --primary-fixed:        #000000;
  --primary-fixed-dim:    #16171A;
  --gold-leaf:            #16171A;
  --gold-glow:            #16171A;

  --secondary:           #3F4148;
  --on-secondary:        #FFFFFF;
  --secondary-container: #F0F0EA;
  --tertiary:            #3F4148;
  --tertiary-container:  #F0F0EA;

  /* text */
  --on-surface:         #16171A;
  --on-surface-variant: #5B5E66;
  --outline:            #8A8C92;
  --outline-variant:    #E4E4DE;

  /* danger */
  --error:              #B42318;
  --on-error:           #FFFFFF;
  --error-container:    #FDE8E7;
  --on-error-container: #B42318;

  /* glass is gone: a card is a white card */
  --glass-fill:     #FFFFFF;
  --glass-border:   #E4E4DE;
  --light-leak:     transparent;
  --gold-shadow:    none;
  --gold-glow-soft: none;
  --elev-panel:     none;

  /* type: Manrope everywhere, no serif, no tracked caps */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --text-display-lg:        800 36px/1.15 var(--font-display);
  --text-display-lg-mobile: 800 28px/1.15 var(--font-display);
  --text-headline-sm:       800 20px/1.25 var(--font-display);
  --text-body-md:           400 15px/1.55 var(--font-body);
  --text-stats:             800 28px/1    var(--font-body);
  --text-label-caps:        700 12px/1.3  var(--font-body);
  --track-caps:       0em;
  --track-caps-tight: 0em;

  /* radius: cards 18, buttons and inputs 12, chips round */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* new names the staff look needs */
  --panel:         #FFFFFF;
  --border:        #E4E4DE;
  --border-input:  #DCDCD5;
  --line-soft:     #EDEDE8;
  --hover:         #FAFAF7;
  --ink:           #16171A;
  --ink-2:         #3F4148;
  --muted:         #5B5E66;
  --lime:          #C8F04A;
  --on-lime:       #16171A;
  --lime-text:     #3A4A0B;
  --purple:        #5B3FD6;
  --on-purple:     #FFFFFF;
  --purple-bg:     #ECE8FD;
  --purple-ink:    #4B32B8;
  --amber-bg:      #FEF3C7;
  --amber-ink:     #92400E;
  --amber-ring:    #F59E0B;
  --danger-bg:     #FDE8E7;
  --danger-ink:    #B42318;
  --danger-border: #F3C7C4;
  --ok-bg:         #EEF9CF;
  --ok-ink:        #3A4A0B;
  --chip-bg:       #F0F0EA;
  --chip-ink:      #3F4148;
  --track-off:     #D6D6CF;
  --rail-w:        76px;
  --bar-h:         72px;
}

/* Today's dark values, kept for a future switch. Nothing sets this yet. */
[data-theme="dark"] {
  --surface: #131313; --surface-dim: #131313; --surface-bright: #393939;
  --surface-container-lowest: #0e0e0e; --surface-container-low: #1c1b1b;
  --surface-container: #201f1f; --surface-container-high: #2a2a2a;
  --surface-container-highest: #353534; --surface-variant: #353534;
  --primary: #c8a45f; --on-primary: #241b08; --primary-container: #b8954f;
  --on-primary-container: #4a3a17; --primary-fixed: #e3c98f; --primary-fixed-dim: #c8a45f;
  --gold-leaf: #b8954f; --gold-glow: #c8a45f;
  --secondary: #bfa05e; --on-secondary: #241b08; --secondary-container: #494a38;
  --tertiary: #d0cecd; --tertiary-container: #b5b2b2;
  --on-surface: #e5e2e1; --on-surface-variant: #d0c5af; --outline: #99907c; --outline-variant: #4d4635;
  --error: #ffb4ab; --on-error: #690005; --error-container: #93000a; --on-error-container: #ffdad6;
  --glass-fill: rgba(255, 255, 255, 0.05); --glass-border: rgba(200, 164, 95, 0.12);
  --light-leak: rgba(176, 141, 75, 0.08);
  --gold-shadow: 0 4px 20px rgba(176, 141, 75, 0.30); --gold-glow-soft: 0 0 20px rgba(176, 141, 75, 0.18);
  --elev-panel: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 34px -18px rgba(0, 0, 0, 0.65);
  --panel: #1c1b1b; --border: #34353A; --border-input: #3A3B40; --line-soft: #2A2B2F; --hover: #232326;
  --ink: #F2F2EE; --ink-2: #C9CBD0; --muted: #A6A8AE; --on-lime: #16171A;
  --purple-bg: #2A2250; --purple-ink: #CFC6FF; --amber-bg: #3A2C0B; --amber-ink: #FCD34D;
  --danger-bg: #3A1413; --danger-ink: #FCA5A5; --danger-border: #5C2320;
  --ok-bg: #26310C; --ok-ink: #D6F27A; --chip-bg: #2A2B2F; --chip-ink: #E5E2E1; --track-off: #4A4B50;
}

/* ── 2a. Base ─────────────────────────────────────────────────────── */
body.staff {
  background: var(--surface);
  color: var(--on-surface);
  font: var(--text-body-md);
}
/* One family, sentence case, no tracking — everywhere but the icon font. */
body.staff *:not(.material-symbols-outlined):not(code):not(pre) { font-family: inherit !important; }
body.staff, body.staff * { text-transform: none !important; letter-spacing: normal; }
body.staff h1 { font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
body.staff h2, body.staff h3 { font-weight: 800; color: var(--ink); }
body.staff a { color: var(--ink); }
body.staff ::selection { background: var(--lime); color: var(--on-lime); }
body.staff.ambient-bg::before, body.staff.ambient-bg::after { display: none; }
body.staff :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* A heading that is focused by script (the drawer's title, for screen readers)
   is not a control: no ring. */
body.staff [tabindex="-1"]:focus-visible { outline: none; }
body.staff .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400; }

/* ── 3. The shell ─────────────────────────────────────────────────── */
body.staff { padding-left: var(--rail-w); }

.rail {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
  width: var(--rail-w); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  background: var(--panel); border-right: 1px solid var(--border);
}
/* overflow-x is stated on purpose. Setting only overflow-y makes the other axis
   compute to auto, so a label that grows past the rail gets CUT rather than
   wrapped — and whether it grows is not ours to decide (a browser minimum font
   size, an OS text size, a webfont that failed to load, a translated build).
   Paired with the wrapping in .rl below, growth turns into a second line. */
.rail::-webkit-scrollbar { display: none; }
.rail-logo {
  width: 40px; height: 40px; margin-bottom: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--ink); color: var(--lime);
  font-weight: 800; font-size: 18px; text-decoration: none;
}
body.staff a.rail-logo { color: var(--lime); }
.rail-spacer { flex: 1 1 auto; min-height: 8px; }
.rl {
  /* Derived from the rail so the highlight cannot drift narrower than the rail
     it sits in: 62px at the default 76px, i.e. unchanged. */
  width: calc(var(--rail-w) - 14px); min-height: 56px; flex-shrink: 0; padding: 4px 2px;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 12px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1.1;
  text-decoration: none; text-align: center;
  /* The label is a bare text node and every one of them is a single word, so
     without this there is nowhere for enlarged text to go but outside the pill
     — and the rail then clips it. Two lines still fit the 56px item. */
  white-space: normal; overflow-wrap: anywhere;
}
body.staff a.rl { color: var(--muted); }
.rl:hover, body.staff a.rl:hover { color: var(--ink); background: var(--surface); }
.rl.on, body.staff a.rl.on { background: #EEEEE8; color: var(--ink); }
[data-theme="dark"] .rl.on { background: var(--surface-container-high); }
.ri { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.rl-av {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg); color: var(--ink-2); font-size: 11px; font-weight: 800;
}
img.rl-av { display: block; object-fit: cover; }   /* a photo (My account), same circle */

/* The top bar, beside the rail. Pages still call theirs .floor-nav / .mgr-nav
   / .dash-nav; the links that used to live in it are the rail now. */
body.staff :is(.floor-nav, .mgr-nav, .dash-nav) {
  /* Complete on its own: My account loads no page stylesheet that lays a bar out. */
  position: fixed; top: 0; z-index: 50; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  left: var(--rail-w); right: 0; width: auto; height: var(--bar-h);
  padding: 0 28px; gap: 14px;
  background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border); box-shadow: none;
}
body.staff [class$="-nav-links"] { display: none !important; }
body.staff :is(.floor-nav-left, .mgr-nav-left, .dash-nav-left) {
  display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 auto;
}
body.staff :is(.floor-nav-right, .mgr-nav-right, .dash-nav-right) { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; }
.bar-title { font-size: 19px; font-weight: 800; color: var(--ink); white-space: nowrap; flex: 0 0 auto; }
/* The venue's name rides beside the page title, quietly — and in ink, whatever
   brand colour the guest menu uses: a bright brand yellow is unreadable on white. */
body.staff :is(.floor-brand, .mgr-brand, .dash-brand), body.staff #brand-title {
  font-size: 14px; font-weight: 500; color: var(--muted) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0; max-width: none; letter-spacing: normal;
}
body.staff .brand-logo { height: 22px; max-width: 96px; margin-right: 8px; }

/* The drawer's stage starts to the right of the rail. */
body.staff .drawer-stage { left: var(--rail-w); top: var(--bar-h); }

/* Pages' own content column. */
body.staff :is(.floor-main, .mgr-main, .dash-main) { padding-top: calc(var(--bar-h) + 28px); }

/* Phones: no rail — the same items become the bottom bar. */
@media (max-width: 720px) {
  body.staff { padding-left: 0; }
  .rail { display: none; }
  body.staff :is(.floor-nav, .mgr-nav, .dash-nav) { left: 0; padding: 0 16px; gap: 8px; }
  body.staff .drawer-stage { left: 0; }
  body.staff :is(.floor-main, .mgr-main, .dash-main) { padding-top: calc(var(--bar-h) + 20px); }
}
@media (max-width: 600px) {
  /* The page heading below the bar carries the venue's name on a phone. */
  body.staff :is(.floor-brand, .mgr-brand, .dash-brand), body.staff #brand-title { display: none; }
}
@media (max-width: 360px) {
  body.staff :is(.floor-nav, .mgr-nav, .dash-nav) { padding: 0 12px; }
}
body.staff .mobile-nav {
  background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-top: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; justify-content: flex-start;
}
body.staff .mobile-nav::-webkit-scrollbar { display: none; }
body.staff .mobile-nav :is(a, button) {
  flex: 1 0 64px; min-width: 0; min-height: 48px; padding: 9px 4px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); font-size: 10.5px; font-weight: 700; gap: 4px;
  border: 0; background: transparent; text-decoration: none;
}
body.staff .mobile-nav a.active { color: var(--ink); }
/* A manager's list is longer than a phone is wide and scrolls sideways. "Me"
   (My account, and the way to sign out) stays pinned at the end, always in reach. */
body.staff .mobile-nav [data-nav="me"], body.staff .mobile-nav [data-nav="signout"] {
  position: sticky; right: 0; flex: 0 0 64px;
  background: var(--panel); border-left: 1px solid var(--border);
}
/* …and the bar says it scrolls (js/auth.js renderMobileNav): the pinned "Me"
   casts a shadow while items run beneath it, and a zero-width sticky edge
   shades the left once items have scrolled out that way. */
body.staff .mobile-nav.more-after :is([data-nav="me"], [data-nav="signout"]) {
  box-shadow: -10px 0 12px -6px rgba(22, 23, 26, 0.28);
}
body.staff .mobile-nav::before {
  content: ''; position: sticky; left: 0; z-index: 1; flex: 0 0 0; align-self: stretch;
  transition: box-shadow 0.2s ease;
}
body.staff .mobile-nav.more-before::before { box-shadow: 10px 0 12px 2px rgba(22, 23, 26, 0.22); }
body.staff .mobile-nav a.active .ri { stroke-width: 2.2; }
body.staff .mobile-nav .mn-label { font-size: 10.5px; font-weight: 700; }

/* ── 2b. Cards and panels ─────────────────────────────────────────── */
body.staff :is(.glass-card, .panel, .stat-card, .card) {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.staff .glass-card::before, body.staff .glass-card::after { display: none; }
body.staff .panel-head { border-bottom: 1px solid var(--line-soft); padding: 18px 22px; }
body.staff .panel-head h3 { font-size: 16px; font-weight: 800; }
body.staff .panel-body { padding: 16px 22px 20px; }
body.staff :is(.panel-badge, .panel-hint) { color: var(--muted); font-size: 13px; font-weight: 500; }
body.staff .eyebrow { color: var(--muted); font-size: 13px; font-weight: 700; }
body.staff .sub { color: var(--muted); }
body.staff .empty-line { color: var(--muted); font-size: 14px; }
body.staff .skeleton {
  border-radius: 12px;
  background: linear-gradient(90deg, var(--chip-bg) 25%, var(--surface-container-low) 50%, var(--chip-bg) 75%);
  background-size: 200% 100%;
}

/* ── 2c. Buttons ──────────────────────────────────────────────────────
   .btn-gold.solid  — the ONE main action on a screen: lime.
   .btn-gold        — a strong secondary: ink.
   everything else  — white with a border. */
body.staff :is(.btn-gold, .btn-outline-gold, .btn-outline, .btn, .btn-secondary, .btn-danger, .mm-danger) {
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.staff :is(.btn-outline-gold, .btn-outline, .btn, .btn-secondary) {
  background: var(--panel); color: var(--ink); border: 1px solid var(--border-input);
}
body.staff :is(.btn-outline-gold, .btn-outline, .btn, .btn-secondary):hover:not(:disabled) {
  background: var(--hover); color: var(--ink); border-color: var(--outline); box-shadow: none;
}
body.staff .btn-gold { background: var(--ink); color: var(--on-primary); border: 1px solid var(--ink); font-weight: 700; }
body.staff .btn-gold:hover:not(:disabled) { background: #000; border-color: #000; color: #fff; }
body.staff .btn-gold.solid { background: var(--lime); color: var(--on-lime); border: 1px solid var(--lime); font-weight: 700; }
body.staff .btn-gold.solid:hover:not(:disabled) { background: #BDE63C; border-color: #BDE63C; color: var(--on-lime); box-shadow: none; }
body.staff :is(.btn-danger, .mm-danger) { background: var(--panel); color: var(--danger-ink); border: 1px solid var(--danger-border); font-weight: 700; }
body.staff :is(.btn-danger, .mm-danger):hover:not(:disabled) { background: var(--danger-bg); }
body.staff :is(.btn-gold, .btn-outline-gold, .btn-danger):disabled { opacity: 0.55; cursor: not-allowed; }
body.staff .btn-spinner { border-color: rgba(22, 23, 26, 0.2); border-top-color: var(--ink); }

body.staff .icon-btn { color: var(--ink-2); border-radius: var(--radius-md); }
body.staff .icon-btn:hover { color: var(--ink); background: var(--surface); }
body.staff .mini-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border-input); color: var(--ink);
}
body.staff .mini-btn:hover { background: var(--hover); border-color: var(--outline); color: var(--ink); }
body.staff .mini-btn.gold { background: var(--ink); border-color: var(--ink); color: #fff; }
body.staff .mini-btn.gold:hover { background: #000; color: #fff; }
body.staff .mini-btn.danger { color: var(--danger-ink); border-color: var(--danger-border); }
body.staff .mini-btn.danger:hover { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-border); }

/* ── 2d. Inputs ───────────────────────────────────────────────────── */
body.staff :is(input[type=text], input[type=email], input[type=password], input[type=number],
               input[type=search], input[type=tel], input[type=date], input[type=time], select, textarea) {
  min-height: 44px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md);
  background: var(--panel); color: var(--ink); font-size: 14px; outline: none;
}
body.staff textarea { padding: 12px 14px; line-height: 1.5; min-height: 88px; }
body.staff :is(input, select, textarea):focus { border-color: var(--ink); }
body.staff ::placeholder { color: #8A8C92; }
body.staff input[type=checkbox], body.staff input[type=radio] { accent-color: var(--ink); width: 18px; height: 18px; }

/* ── 2e. Chips ────────────────────────────────────────────────────── */
body.staff :is(.chip-status, .chip, .mm-pill, .hist-method, .hist-disc) {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; border: 0;
  font-size: 12px; font-weight: 700; background: var(--chip-bg); color: var(--chip-ink);
}
body.staff .chip-status.tone-new    { background: var(--ink); color: #fff; }
body.staff .chip-status.tone-prep   { background: var(--purple-bg); color: var(--purple-ink); }
body.staff .chip-status.tone-ready  { background: var(--ok-bg); color: var(--ok-ink); }
body.staff .chip-status.tone-muted  { background: var(--chip-bg); color: var(--chip-ink); }
body.staff :is(.tbl-badge) {
  background: var(--purple); color: var(--on-purple); border: 0; border-radius: 12px;
  font-weight: 800; font-size: 14px;
}
body.staff .time-badge { background: var(--chip-bg); color: var(--ink); border: 0; border-radius: 10px; font-weight: 800; }

/* ── 2f. Toasts ───────────────────────────────────────────────────── */
body.staff .toast {
  background: var(--ink); color: #fff; border: 0; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(22, 23, 26, 0.18); backdrop-filter: none;
}
body.staff .toast :is(.toast-title, .toast-body) { color: #fff; }
body.staff .toast .material-symbols-outlined { color: var(--lime); }
body.staff .toast.toast-error .material-symbols-outlined { color: #FCA5A5; }

/* ── 2g. The shared drawer ────────────────────────────────────────── */
body.staff .drawer { background: var(--panel); border-left: 1px solid var(--border); }
body.staff .drawer-head { border-bottom: 1px solid var(--line-soft); }
body.staff .drawer-label { color: var(--muted); font-size: 12px; font-weight: 800; }
body.staff .drawer-title { font-size: 22px; font-weight: 800; }
body.staff .drawer-foot { background: var(--panel); border-top: 1px solid var(--line-soft); }
body.staff .drawer-close {
  min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--border-input); color: var(--ink);
}
body.staff .drawer-discard button { border-radius: 10px; font-size: 13px; font-weight: 700; min-height: 38px; }
body.staff .drawer-discard .drawer-discard-yes { border-color: var(--danger-border); color: var(--danger-ink); }

/* ── 2h. Floor ────────────────────────────────────────────────────────
   Tables: purple when occupied, white with a grey border when free, an amber
   ring when the bill is requested. (Dashed purple = booked arrives with P3.) */
body.staff .table-cell {
  border-radius: 16px; border: 2px solid var(--border-input);
  background: var(--panel); color: var(--ink-2); box-shadow: none;
}
body.staff .table-cell :is(.tc-num) { font-weight: 800; color: inherit; }
body.staff .table-cell :is(.tc-status, .tc-time, .tc-total, .tc-waiter) { color: inherit; font-weight: 700; opacity: 1; }
body.staff .table-cell.free:hover { background: var(--hover); }
body.staff .table-cell:is(.occupied, .ready, .flagged, .unconfirmed, .unconfirmed-late) {
  background: var(--purple); border-color: var(--purple); color: var(--on-purple);
}
body.staff .table-cell.ready { border-color: var(--lime); box-shadow: 0 0 0 3px var(--ok-bg); }
body.staff .table-cell.flagged { border-color: var(--ink); box-shadow: 0 0 0 3px var(--chip-bg); }
body.staff .table-cell.bill { border-color: var(--amber-ring); box-shadow: 0 0 0 3px var(--amber-bg); }
body.staff .table-cell.unconfirmed { border-color: var(--ink); box-shadow: 0 0 0 3px var(--chip-bg); }
body.staff .table-cell.unconfirmed-late { border-color: var(--danger-ink); box-shadow: 0 0 0 3px var(--danger-bg); }
/* A free table with a booking still to come today: dashed purple (the brief). */
body.staff .table-cell.booked { border: 2px dashed var(--purple); color: var(--purple-ink); }
body.staff .table-cell.booked :is(.tc-status, .tc-time) { color: var(--purple-ink); }
/* The legend (floor.html, in the map card): Free and Booked drawn as their tiles are. */
body.staff .floor-legend .ui-chip.lg-free { background: var(--panel); border: 1px solid var(--border-input); padding: 3px 9px; color: var(--ink-2); }
body.staff .floor-legend .ui-chip.lg-booked { background: var(--panel); border: 1px dashed var(--purple); padding: 3px 9px; color: var(--purple-ink); }
body.staff .table-cell.other { background: var(--surface-container-low); border-style: dashed; color: var(--muted); }
body.staff .tc-waiter { background: rgba(255, 255, 255, 0.18); border: 0; border-radius: 999px; padding: 2px 8px; font-size: 11px; }
body.staff .table-cell:is(.free, .other) .tc-waiter { background: var(--chip-bg); color: var(--chip-ink); }
body.staff .dot.free { background: var(--panel); border: 2px solid var(--border-input); }
body.staff .dot.occupied { background: var(--purple); }
body.staff .dot.ready { background: var(--lime); }
body.staff .dot.flagged { background: var(--amber-ring); }

body.staff .conn-pill { background: var(--chip-bg); border: 0; color: var(--chip-ink); font-size: 12px; font-weight: 700; padding: 6px 12px; }
body.staff .conn-pill.live { background: var(--ok-bg); color: var(--ok-ink); }
body.staff .conn-pill.live .conn-dot { background: #6B8E16; box-shadow: none; }
body.staff .conn-pill.polling .conn-dot { background: var(--muted); box-shadow: none; }
body.staff .conn-pill.down { background: var(--danger-bg); color: var(--danger-ink); }
body.staff .conn-pill.down .conn-dot { background: var(--danger-ink); }
body.staff #mute-btn.is-muted { color: var(--danger-ink); background: var(--danger-bg); }

body.staff .q-row { border-bottom: 1px solid var(--line-soft); }
body.staff .q-head:hover, body.staff .q-row.selected .q-head { background: var(--hover); }
body.staff .q-title { font-weight: 700; }
body.staff .q-row.urgent { border-left: 3px solid var(--amber-ring); background: transparent; }
body.staff :is(.q-time.late, .q-late-tag) { color: var(--amber-ink); }
body.staff .q-late-tag { background: var(--amber-bg); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
body.staff .q-split-tag { color: var(--purple-ink); font-weight: 700; }
body.staff .q-item-qty { color: var(--ink); font-weight: 800; }
body.staff .q-item-cook { color: var(--ink); border: 0; background: var(--chip-bg); font-weight: 800; }
body.staff .q-item-mod.warn { background: var(--danger-bg); border: 0; color: var(--danger-ink); font-weight: 800; }
body.staff .q-aria-note { background: var(--purple-bg); border: 0; color: var(--purple-ink); }
body.staff .q-attrib, body.staff .q-aria-caveat { color: var(--muted); }
body.staff .st-chip { min-height: 44px; border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--border-input); color: var(--ink); font-size: 14px; font-weight: 700; }
body.staff .st-chip.current { background: var(--chip-bg); color: var(--muted); border-color: var(--chip-bg); }
body.staff .st-chip.go { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
body.staff .print-chip { border-radius: 999px; font-weight: 700; }
body.staff .print-chip.ok { color: var(--ok-ink); background: var(--ok-bg); }
body.staff .print-chip.bad { color: var(--danger-ink); background: var(--danger-bg); border: 0; }
body.staff .print-chip.pending { color: var(--chip-ink); background: var(--chip-bg); }

body.staff .alert-row { border-bottom: 1px solid var(--line-soft); }
/* An alert's parts (table square, words, action) are styled in css/floor.css. */
body.staff .resv-row { border-bottom: 1px solid var(--line-soft); }

body.staff :is(.pay-scope, .fp-toggle) { background: var(--surface); border: 0; border-radius: 12px; padding: 4px; gap: 4px; }
body.staff :is(.pay-scope, .fp-toggle) button { min-height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; }
body.staff :is(.pay-scope, .fp-toggle) button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 23, 26, 0.08); }
body.staff .pay-items { border-color: var(--line-soft); }
body.staff :is(.pi-qty) { color: var(--ink); font-weight: 800; }
body.staff .pi-round { color: var(--muted); border-color: var(--line-soft); font-weight: 800; font-size: 12px; }
body.staff .pay-label { color: var(--ink-2); font-size: 13px; font-weight: 700; }
body.staff .disc-input { background: var(--panel); border: 1px solid var(--border-input); }
body.staff .disc-input button:hover { color: var(--ink); background: var(--surface); }
body.staff .pay-methods { grid-template-columns: repeat(2, 1fr); }
body.staff .pay-methods button { background: var(--panel); border: 1px solid var(--border-input); color: var(--ink); border-radius: var(--radius-md); font-size: 14px; font-weight: 700; }
body.staff .pay-methods button.active { background: var(--ink); border-color: var(--ink); color: #fff; }
body.staff .pt-row.grand { border-color: var(--line-soft); font-weight: 800; font-size: 20px; }
body.staff .pt-row.disc { color: var(--ok-ink); }
body.staff .pt-row.split { color: var(--muted); }
body.staff .pay-note { color: var(--muted); font-size: 13px; }
body.staff .void-field input { background: var(--panel); }

body.staff .so-section { color: var(--muted); font-size: 12px; font-weight: 800; }
body.staff .so-row { border-bottom: 1px solid var(--line-soft); }
body.staff .so-toggle { min-height: 38px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border-input); color: var(--ink); font-size: 13px; font-weight: 700; }
body.staff .so-toggle.out { background: var(--amber-bg); border-color: var(--amber-bg); color: var(--amber-ink); }
body.staff .fp-table-card { background: var(--surface-container-low); border: 0; border-radius: 14px; font-weight: 700; }

/* ── 2i. Manager / owner / history / platform ─────────────────────── */
body.staff :is(.mgr-range, .hist-range) { background: var(--surface); border: 0; border-radius: 12px; padding: 4px; gap: 4px; display: inline-flex; }
body.staff :is(.mgr-range button, .range-btn) { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; }
body.staff :is(.mgr-range button.active, .range-btn.active) { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 23, 26, 0.08); }
body.staff .stat-card { padding: 20px 22px; }
body.staff .stat-card :is(.stat-label, .stat-card-label) { color: var(--muted); font-size: 13px; font-weight: 700; }
body.staff :is(.stat-value, .stat-card-value, .stats-number) {
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; filter: none; text-shadow: none;
}
body.staff .stat-card .material-symbols-outlined { color: var(--muted); }
body.staff .list-row { border-bottom: 1px solid var(--line-soft); }
body.staff .list-row-title { font-weight: 700; }
body.staff .list-row-sub { color: var(--muted); }
body.staff .pattern-dim { color: var(--muted); }
body.staff .aria-panel .aria-title .material-symbols-outlined { background: var(--ink); color: var(--lime); border-radius: 12px; padding: 8px; }
body.staff .suggest-chip { background: var(--panel); border: 1px solid var(--border-input); color: var(--ink); border-radius: 10px; font-size: 13px; font-weight: 600; }
body.staff .aria-send { background: var(--lime); color: var(--on-lime); border-radius: 12px; }
body.staff .hist-row { border-bottom: 1px solid var(--line-soft); }
body.staff .hist-row.void { opacity: 1; }
body.staff .hist-row.void .hist-items { color: var(--danger-ink); text-decoration: none; }
body.staff .hist-status.s-cancelled { color: var(--danger-ink); font-weight: 700; }
body.staff .hist-total { font-weight: 800; }

/* menu manager */
body.staff .mm-tabs { border-bottom: 0; gap: 4px; }
body.staff .mm-tab { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 0; margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; }
body.staff .mm-tab:hover { color: var(--ink); }
/* Settings is a stack of cards: they need air between them. */
body.staff .mm-tabpanel > :is(.panel, section) + :is(.panel, section) { margin-top: 16px; }
/* A language that is on is a success state, not a gold one. */
body.staff .mm-lang { border: 1px solid var(--border-input); border-radius: 12px; background: var(--panel); min-height: 44px; box-sizing: border-box; }
body.staff .mm-lang.on { border-color: var(--ink); background: var(--panel); }
body.staff .mm-lang input[type="checkbox"] { accent-color: var(--ink); }
body.staff .mm-notice { background: var(--surface-container-low); border: 1px solid var(--border); border-radius: 14px; color: var(--ink-2); }
body.staff .mm-notice strong { color: var(--ink); }
/* The last of the gold: states the pages paint with a literal colour rather
   than a token, so re-valuing the tokens did not reach them. */
body.staff .me-blocker .material-symbols-outlined, body.staff .pc-icon { color: var(--ink-2); }
body.staff .me-coverage span { border-color: var(--border-input); color: var(--muted); font-size: 12px; }
body.staff .me-quadrant { border-left-color: var(--border-input); }
body.staff .me-star      { border-left-color: var(--ink); }
body.staff .me-plowhorse { border-left-color: var(--amber-ring); }
body.staff .me-puzzle    { border-left-color: var(--purple); }
body.staff .me-dog       { border-left-color: var(--track-off); }
body.staff .hour-bar { background: var(--ink-2); border-radius: 4px 4px 0 0; }
body.staff .wd-bar { background: var(--track-off); border-radius: 4px 4px 0 0; }
body.staff .wd-bar.peak { background: var(--ink); }
body.staff :is(.est-badge, .owner-badge) { background: var(--chip-bg); border: 0; color: var(--chip-ink); font-size: 11px; font-weight: 700; }
body.staff .support-banner { background: var(--amber-bg); border: 0; border-left: 4px solid var(--amber-ring); color: var(--amber-ink); border-radius: 12px; }
body.staff .flag-list li { background: var(--surface-container-low); border: 1px solid var(--border); color: var(--ink); }
body.staff .toast-warning { border-color: transparent; }
body.staff :is(.stat-value, .stat-card-value, .stats-number, .aria-title .material-symbols-outlined) { filter: none; }
/* `repeat(2, 1fr)` lets a long label push a card wider than its half: on a phone
   the second card ran off the screen. minmax(0, …) holds each to its share. */
@media (max-width: 1080px) { body.staff .mgr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.staff .mgr-stats > * { min-width: 0; }
/* The Qeat admin's AI chips, in the staff palette. */
body.staff .ai-chip { font-size: 12px; font-weight: 700; border: 0; }
body.staff .ai-chip.ok   { background: var(--ok-bg); color: var(--ok-ink); }
body.staff .ai-chip.near { background: var(--amber-bg); color: var(--amber-ink); }
body.staff .ai-chip.over { background: var(--danger-bg); color: var(--danger-ink); }
body.staff .ai-chip.flag { background: var(--chip-bg); color: var(--chip-ink); }
body.staff .mm-tab.active { background: #EEEEE8; color: var(--ink); border: 0; }
body.staff .mm-sec { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
body.staff .mm-sec-head:hover { background: var(--hover); }
body.staff .mm-sec-name { color: var(--ink); font-size: 16px; font-weight: 800; }
body.staff .mm-sec-body { border-top: 1px solid var(--line-soft); }
body.staff .mm-sec-soldout { color: var(--amber-ink); font-weight: 700; }
body.staff table.mm th { background: var(--panel); border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; font-weight: 800; }
body.staff table.mm td { border-bottom: 1px solid var(--line-soft); }
body.staff .mm-name-btn { color: var(--ink); font-weight: 700; }
body.staff .mm-slider { background: var(--track-off); }
body.staff .mm-slider::before { background: #fff; }
body.staff .mm-switch input:checked + .mm-slider { background: var(--ink); }
body.staff .mm-switch input:checked + .mm-slider::before { background: #fff; }
body.staff .mm-linkbtn:hover { color: var(--ink); }
body.staff .mm-count { color: var(--muted); font-size: 13px; font-weight: 600; }
body.staff .mm-f > span { color: var(--ink-2); font-size: 13px; font-weight: 700; opacity: 1; }
body.staff .mm-f em { color: var(--muted); opacity: 1; }
body.staff .mm-f :is(input, select, textarea) { background: var(--panel); border: 1px solid var(--border-input); border-radius: var(--radius-md); }
body.staff .mm-state { min-height: 44px; border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--border-input); color: var(--ink); font-weight: 700; }
body.staff .mm-state.on { background: var(--ink); border-color: var(--ink); color: #fff; }
body.staff .mm-pill-del { background: var(--danger-bg); color: var(--danger-ink); }
body.staff .mm-pill-stale { background: var(--amber-bg); color: var(--amber-ink); }
body.staff .mm-section-item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); }
body.staff .mm-mod { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-container-low); }
body.staff .mm-h2 { font-size: 16px; font-weight: 800; }
body.staff .mm-crop-overlay { background: rgba(22, 23, 26, 0.45); backdrop-filter: none; }
body.staff .mm-crop-card { background: var(--panel); }

/* platform */
body.staff .plat-row { border-bottom: 1px solid var(--line-soft); background: transparent; color: var(--ink); }
body.staff .plat-row:hover, body.staff .plat-row.is-current { background: var(--hover); }
body.staff .plat-readonly { background: var(--chip-bg); border: 0; color: var(--chip-ink); border-radius: 999px; font-size: 12px; font-weight: 700; }
body.staff .plat-lang { background: var(--chip-bg); color: var(--chip-ink); border: 0; }

/* ── 4. The building blocks of the canvas ─────────────────────────────
   New pages are built from these (ui-*), so every later phase draws from one
   set instead of re-inventing a card per page. Names follow the ones the canvas
   uses (.card, .btn, .chip, .srow, .tt …) with a ui- prefix, because the bare
   names already mean something on the older pages. */
.ui-page { max-width: 1360px; margin: 0 auto; padding: 36px 40px 64px; display: flex; flex-direction: column; gap: 22px; box-sizing: border-box; }
.ui-page.has-bar { padding-top: calc(var(--bar-h) + 28px); }
.ui-hello { display: flex; flex-direction: column; gap: 6px; }
.ui-hello h1 { margin: 0; font-size: 36px; line-height: 1.12; }
.ui-hello .ui-lead { font-size: 16px; color: var(--muted); }
.ui-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px;
           display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; min-width: 0; }
.ui-card.tight { gap: 0; }
/* `display: flex` above beats the browser's own [hidden] { display: none },
   which is a UA rule with almost no specificity — so a card that ships hidden
   in the markup was drawn anyway, as an empty white box. Two cards did this:
   the review-prompt panel on Insights and the plan form on Planning. */
.ui-card[hidden] { display: none; }
.ui-h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.ui-sub { font-size: 13px; color: var(--muted); line-height: 1.45; }
.ui-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ui-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui-row.between { justify-content: space-between; }
.ui-row.wrap { flex-wrap: wrap; }
.ui-grow { flex: 1 1 auto; min-width: 0; }
.ui-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-th { font-size: 12px; font-weight: 800; color: var(--muted); }
.ui-srow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.ui-srow:first-child, .ui-srow.first { border-top: 0; padding-top: 0; }
.ui-strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.ui-num { font-size: 18px; font-weight: 800; color: var(--ink); }
.ui-empty { font-size: 14px; color: var(--muted); padding: 6px 0; }

.ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ui-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-kpi { gap: 6px; }
.ui-kpi .ui-kpi-l { font-size: 13px; font-weight: 700; color: var(--muted); }
.ui-kpi .ui-kpi-v { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; }

.ui-chip { display: inline-flex; align-items: center; white-space: nowrap; padding: 4px 10px; border-radius: 999px;
           font-size: 12px; font-weight: 700; background: var(--chip-bg); color: var(--chip-ink); }
.ui-chip.lime   { background: var(--ok-bg); color: var(--ok-ink); }
.ui-chip.amber  { background: var(--amber-bg); color: var(--amber-ink); }
.ui-chip.purple { background: var(--purple-bg); color: var(--purple-ink); }
.ui-chip.red    { background: var(--danger-bg); color: var(--danger-ink); }
.ui-chip.dark   { background: var(--ink); color: #fff; }

.ui-btn { min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--border-input);
          background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
          display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
          white-space: nowrap; text-decoration: none; flex-shrink: 0; }
body.staff a.ui-btn { color: var(--ink); }
.ui-btn:hover { background: var(--hover); border-color: var(--outline); }
.ui-btn.pri { border-color: var(--lime); background: var(--lime); color: var(--on-lime); font-weight: 700; }
.ui-btn.pri:hover { background: #BDE63C; border-color: #BDE63C; }
.ui-btn.dark, body.staff a.ui-btn.dark { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 700; }
.ui-btn.dark:hover { background: #000; }
.ui-btn.sm { min-height: 38px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.ui-btn.danger { color: var(--danger-ink); border-color: var(--danger-border); }
.ui-btn.danger:hover { background: var(--danger-bg); }
.ui-btn.block { width: 100%; }
.ui-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.ui-lbl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
body.staff .ui-in { width: 100%; }
body.staff .ui-in[readonly] { background: var(--surface-container-low); color: var(--muted); }

/* the switch */
.ui-tg { width: 52px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer;
         display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-tg .tr { width: 44px; height: 26px; border-radius: 999px; background: var(--ink); padding: 3px; box-sizing: border-box;
             display: flex; justify-content: flex-end; transition: background 0.15s ease; }
.ui-tg[aria-pressed="false"] .tr { background: var(--track-off); justify-content: flex-start; }
.ui-tg .kn { width: 20px; height: 20px; border-radius: 999px; background: #fff; display: block; }
.ui-tg:disabled { opacity: 0.5; cursor: progress; }

.ui-av { width: 36px; height: 36px; border-radius: 999px; background: var(--chip-bg); color: var(--ink-2);
         display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.ui-av.lg { width: 56px; height: 56px; font-size: 18px; }
.ui-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--chip-bg); color: var(--ink);
           display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0; }
.ui-mark.ink { background: var(--ink); color: var(--lime); }
.ui-mark.amber { background: var(--amber-bg); color: var(--amber-ink); }

/* table tiles: purple occupied · white free · dashed purple booked · amber ring bill */
.ui-tt { border-radius: 16px; padding: 10px 12px; box-sizing: border-box; min-height: 72px; min-width: 0;
         display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
         border: 2px solid transparent; text-decoration: none; }
.ui-tt .n { font-size: 16px; font-weight: 800; }
.ui-tt .s { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tt.free   { background: var(--panel); border-color: var(--border-input); color: var(--ink-2); }
.ui-tt.seated { background: var(--purple); color: var(--on-purple); }
.ui-tt.bill   { background: var(--purple); color: var(--on-purple); border-color: var(--amber-ring); box-shadow: 0 0 0 3px var(--amber-bg); }
.ui-tt.res    { background: var(--panel); border: 2px dashed var(--purple); color: var(--purple-ink); }
.ui-tt.attn   { background: var(--purple); color: var(--on-purple); border-color: var(--ink); box-shadow: 0 0 0 3px var(--chip-bg); }
body.staff a.ui-tt.free { color: var(--ink-2); }
body.staff a.ui-tt:is(.seated, .bill, .attn) { color: var(--on-purple); }

/* bars */
.ui-bars { height: 140px; display: flex; align-items: flex-end; gap: 10px; }
.ui-bars .col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.ui-bars .bar { width: 100%; border-radius: 6px 6px 2px 2px; background: #D9D6CC; min-height: 4px; }
.ui-bars .bar.peak { background: var(--ink); }
.ui-bars .l { font-size: 11px; font-weight: 600; color: var(--muted); }

.ui-seg { display: inline-flex; gap: 4px; background: var(--surface); padding: 4px; border-radius: 12px; }
.ui-tab { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; cursor: pointer;
          display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; }
.ui-tab.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 23, 26, 0.08); }

@media (max-width: 1080px) { .ui-kpis, .ui-kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ui-page { padding: 24px 16px 40px; } .ui-page.has-bar { padding-top: calc(var(--bar-h) + 20px); }
                             .ui-hello h1 { font-size: 28px; } }

/* small corrections to the older pages, found on first look */
body.staff :is(.floor-header, .mgr-header, .dash-header) h1 { font-size: 32px; line-height: 1.15; }
body.staff .mm-new { width: auto; margin-left: auto; }
body.staff .mobile-nav :is(a, button) { border: 0; background: transparent; cursor: pointer; }
body.staff .mobile-nav .ri { width: 22px; height: 22px; }