/* Gedeelde stijl van kassa en beheer: warm donker met oranje accent. Rustig, zodat
   gerechten, bedragen en statussen het opvallendst zijn. Geen blur op de grote vlakken:
   de kassa moet ook op een oudere iPad vloeiend blijven. */
:root {
  --bg: #100d0b;
  --surface: #1c1814;
  --surface-2: #26201b;
  --surface-3: #30291f;
  --line: rgb(255 236 214 / .11);
  --line-strong: rgb(255 236 214 / .2);
  --ink: #f6efe6;
  --ink-2: #c4baac;
  --ink-3: #a0968a;
  --accent: #f08a4b;
  --accent-ink: #1f1006;
  --accent-soft: #3d2415;
  --pill: #f7c6a3;
  --pill-ink: #2b1508;
  --ok: #8fdcab;
  --ok-soft: #1a2e22;
  --ok-ink: #0d2015;
  --warn: #f1c878;
  --warn-soft: #352a12;
  --warn-ink: #271c05;
  --danger: #f49c92;
  --danger-soft: #3d1e1a;
  --danger-ink: #2b0d09;
  --focus: #ffd9bd;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 2px 4px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .35);
  --lift: inset 0 1px 0 rgb(255 240 225 / .06), 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .18);
  --display: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  color-scheme: dark;
}
html { background: var(--bg); }
body { position: relative; background: transparent; }
/* Gloed van de vuurplaat: alleen bovenaan, vast achter de inhoud. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgb(240 138 75 / .15), transparent 68%),
    radial-gradient(760px 460px at 100% -4%, rgb(196 92 56 / .09), transparent 66%);
}
/* Plattegrond, gedeeld door beheer en kassa. */
.floor-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--lift); }
.floor { display: block; width: 100%; height: auto; min-width: 640px; user-select: none; -webkit-user-select: none; }
.floor-bg { stroke: none; }
.floor-dot { fill: var(--line-strong); }
.ft { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.ft .top { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 2; transition: fill .12s; }
.ft .chair { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.5; }
.ft text { text-anchor: middle; pointer-events: none; }
.ft .name { fill: var(--ink); font-size: 22px; font-weight: 650; }
.ft .sub { fill: var(--ink-2); font-size: 18px; font-variant-numeric: tabular-nums; }
.ft:hover .top { fill: var(--line-strong); }
.ft:focus-visible .top { stroke: var(--focus); stroke-width: 4; }
.ft.dragging { opacity: .85; }
.ft.dragging .top { stroke: var(--accent); stroke-width: 3; }
.ft.busy .top { fill: var(--accent-soft); stroke: var(--accent); }
.ft.busy .chair { fill: var(--accent-soft); stroke: var(--accent); }
.ft.busy .sub { fill: var(--pill); font-weight: 650; }
.ft.paying .top { fill: var(--warn-soft); stroke: var(--warn); }
.ft.paying .chair { fill: var(--warn-soft); stroke: var(--warn); }
.ft.paying .sub { fill: var(--warn); font-weight: 650; }
@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #f4f4f4; --surface-3: #eee; --line: #ccc; --line-strong: #999;
    --ink: #000; --ink-2: #333; --ink-3: #555; --accent: #000; --accent-ink: #fff; --accent-soft: #eee;
    --ok: #000; --ok-soft: #fff; --warn: #000; --warn-soft: #fff; --danger: #000; --danger-soft: #fff;
    --lift: none; --shadow: none; color-scheme: light;
  }
  body::before { display: none; }
}