/* Live Orders — same palette as the admin suite.
 *
 * This board used to run its own purple-black ground (#0d0510 / #1a0f20) while
 * admin-nav.js drew an admin-coloured bar across the top of it, so the page read
 * as two products stacked. The tokens below are copied verbatim from
 * admin-shared.css — if the brand moves, move it THERE first and mirror it here.
 * (Importing that sheet outright is not an option: it also sets body and main
 * layout, which would fight this board's own.)
 *
 * Everything that was a bare rgba(255,255,255,…) is now a token, because those
 * are exactly the rules that break in light mode. */
:root{
  --pink:#D81E5B; --purple:#5E0F80; --orange:#F39200; --teal:#009FA8; --lime:#7CB518;
  --bg:#0d1117; --panel:#10161d; --card:#161b22; --line:#30363d;
  --ink:#e6edf3; --ink2:#9198a1; --ink3:#656c76;
  --red:#e5484d;                       /* unpaid / offline — the one hue admin has no token for */
  --surf:rgba(255,255,255,.05);        /* faint raised chip */
  --surf-line:rgba(255,255,255,.09);
  --dash:rgba(255,255,255,.09);
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --sub:var(--ink2);                   /* kept: the markup still says var(--sub) in places */
}
/* ☀️ follows the admin theme toggle — admin-nav.js stamps data-theme from the
   same localStorage key the admin shell writes, so one flip themes both. */
:root[data-theme="light"]{
  --bg:#F6F1EC; --panel:#FFFFFF; --card:#FDFAF7; --line:#E6DAD1;
  --ink:#2B1524; --ink2:#6F5766; --ink3:#A18E9A;
  --surf:rgba(0,0,0,.035);
  --surf-line:rgba(43,21,36,.10);
  --dash:rgba(43,21,36,.14);
  --shadow:0 10px 26px rgba(43,21,36,.10);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-bottom:env(safe-area-inset-bottom)}

.o-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top));background:var(--panel);border-bottom:1px solid var(--line)}
.o-brand{display:flex;align-items:center;gap:9px;font-family:Montserrat;font-size:19px;font-weight:900}
.o-live{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:pulse 1.6s infinite}
.o-live.off{background:var(--red);box-shadow:0 0 10px var(--red);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.o-stats{flex:1;text-align:right;font-size:13px;color:var(--ink2);font-weight:600}
.o-stats b{color:var(--ink)}
.o-sound{background:none;border:none;font-size:22px;cursor:pointer;padding:2px 4px}
.o-sound.off{opacity:.4}

.o-filters{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:9;display:flex;gap:8px;padding:12px 16px;
  overflow-x:auto;background:var(--panel);border-bottom:1px solid var(--line);scrollbar-width:none}
.o-filters::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.fchip.on{background:var(--pink);border-color:transparent;color:#fff}

.o-list{padding:14px 14px 30px;display:flex;flex-direction:column;gap:12px}
.o-empty{text-align:center;color:var(--ink2);padding:18vh 0;font-size:17px}

/* ── order card: flat admin surface, tinted ring per status ── */
.ocard{background:var(--card);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
  animation:slidein .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes slidein{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.ocard.st-new{border-color:rgba(216,30,91,.45);box-shadow:0 10px 28px rgba(216,30,91,.13)}
.ocard.st-preparing{border-color:rgba(243,146,0,.40);box-shadow:0 10px 28px rgba(243,146,0,.10)}
.ocard.st-ready{border-color:rgba(124,181,24,.45);box-shadow:0 10px 28px rgba(124,181,24,.12)}
.ocard.st-await{opacity:.85}
.ocard.st-pickedup{opacity:.62}

.oc-head{display:flex;align-items:center;gap:8px;padding:14px 16px 6px}
.oc-num{font-family:Montserrat;font-weight:900;font-size:19px;letter-spacing:.01em}
.oc-where{font-weight:700;font-size:12.5px;color:var(--ink2);padding:4px 11px;border-radius:999px;
  background:var(--surf);border:1px solid var(--surf-line)}
.oc-time{margin-left:auto;font-size:12px;color:var(--ink2);font-weight:600;text-align:right;line-height:1.45}
.oc-status{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px}
.st-new .oc-status{background:rgba(216,30,91,.18);color:var(--pink)}
.st-preparing .oc-status{background:rgba(243,146,0,.16);color:var(--orange)}
.st-ready .oc-status{background:rgba(124,181,24,.18);color:var(--lime)}
.st-await .oc-status{background:var(--surf);color:var(--ink2)}
.st-pickedup .oc-status{background:var(--surf);color:var(--ink3)}

.oc-name{padding:2px 16px 0;font-size:13.5px;color:var(--ink2);font-weight:600}
.oc-paid{font-size:10px;font-weight:900;letter-spacing:.05em;padding:3px 9px;border-radius:999px}
.oc-paid.paid{background:rgba(124,181,24,.16);color:var(--lime)}
.oc-paid.unpaid{background:rgba(229,72,77,.14);color:var(--red)}
.oc-items{padding:10px 16px 12px;display:flex;flex-direction:column;gap:6px}
.oc-item{font-size:15px;font-weight:600;line-height:1.35}
.oc-item .q{color:var(--orange);font-weight:900;margin-right:7px;font-variant-numeric:tabular-nums}
.oc-mods{font-size:12px;color:var(--ink2);padding-left:22px;font-weight:500}
.oc-note{margin:2px 16px 10px;padding:8px 11px;background:rgba(243,146,0,.10);border:1px solid rgba(243,146,0,.22);
  border-radius:10px;font-size:13px;color:var(--orange)}
.oc-total{margin:2px 16px 0;padding:10px 0 14px;border-top:1px dashed var(--dash);
  display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.oc-total b{font-size:25px;font-weight:800;color:var(--lime);letter-spacing:.01em;font-variant-numeric:tabular-nums}

.o-install{position:fixed;left:12px;right:12px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:20;   /* clears the bottom tab bar */
  display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--purple);border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:13px;font-weight:600;color:#fff}
.o-install span{flex:1}
.o-install button{border:none;background:#fff;color:var(--purple);font-weight:800;padding:9px 16px;border-radius:10px;cursor:pointer}
.o-install .x{background:transparent;color:#fff;padding:9px 6px;font-size:16px}

/* date separators between business days (Today omitted at the top) */
.o-day{display:flex;align-items:center;gap:12px;margin:20px 2px 10px;color:var(--ink3);
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.o-day::before,.o-day::after{content:"";flex:1;height:1px;background:var(--line)}

/* after the first paint, list refreshes must not replay the entrance animation */
.o-list.settled .ocard{animation:none}

/* register order caught mid-ring: bouncing dots instead of an empty $0 card */
/* 🛒 live cart peek — a table still composing; dashed frame + soft pulse = not real yet */
.ocard.st-cart{border-style:dashed;border-color:rgba(243,146,0,.5);animation:cartpulse 2.4s ease-in-out infinite}
@keyframes cartpulse{0%,100%{box-shadow:0 0 0 0 rgba(243,146,0,0)}50%{box-shadow:0 0 0 5px rgba(243,146,0,.09)}}
.oc-ringing{padding:6px 16px 16px;font-size:13.5px;color:var(--ink2);font-weight:600;display:flex;align-items:center;gap:5px}
.oc-ringing i{width:6px;height:6px;border-radius:50%;background:var(--pink);animation:ringdot 1.1s ease-in-out infinite}
.oc-ringing i:nth-child(2){animation-delay:.18s}
.oc-ringing i:nth-child(3){animation-delay:.36s;margin-right:6px}
@keyframes ringdot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* 🎨 tenant brand — auto-appended; change it in ⚙️ Settings → Brand */
:root{--purple:#1F6FEB;--purple-deep:#154ba0;--pink:#2CD9FF;--orange:#FFB454;--turq:#2CD9FF;--teal:#2CD9FF;--lime:#7CE0B0;--brand-primary:#1F6FEB;--brand-secondary:#2CD9FF;--brand-accent:#FFB454;--brand-turquoise:#2CD9FF;--brand-lime:#7CE0B0}