/* ============================================================
   OrderKit design system — "Cast Iron & Tomato" (v2).
   Shared across every page. Iron black + flour white do the work;
   tomato red says act now. Per-tenant brand comes in via --accent.
   Token + class names are stable so every existing page inherits this.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  /* neutrals — flour daylight (customer + operator light) */
  --bg:#F6F1E8;          /* Flour canvas */
  --surface:#FFFFFF;     /* cards on flour */
  --surface-2:#EDE6D8;   /* Parchment — panels, secondary buttons */
  --surface-3:#E4DDCE;   /* deeper panel / well */
  --ink:#211E1C;         /* Iron */
  --ink-2:#57524B;       /* secondary text */
  --muted:#94897C;       /* tertiary text */
  --border:#E2DBCE;      /* light borders */
  --border-strong:#D5CCBB; /* form field borders (1.5px) */

  /* brand accent — Tomato (tenant storefronts override --accent / --accent-press) */
  --accent:#E5432C;
  --accent-press:#B93322;
  --accent-ink:#FFFFFF;
  --accent-tint:#F6DAD4;
  --accent-soft:#FBECE7;

  /* status — herb / amber / chili / slate */
  --success:#5B8A57; --success-tint:#DFEADC;
  --warn:#8A5F14;    --warn-tint:#F3E2BC;   /* solid amber = --amber */
  --danger:#A82818;  --danger-tint:#F2D9D4;
  --info:#4E6E8A;    --info-tint:#E2E9EF;
  --amber:#E3A31C;   /* the solid attention colour (time pressure) */
  --herb:#5B8A57; --chili:#A82818; --slate:#4E6E8A; --tomato:#E5432C;

  /* legacy aliases (older markup used these names) */
  --card:var(--surface);
  --n1:var(--muted); --n2:#A9A196; --n3:var(--border); --n4:var(--surface-2);
  --yellow:#E3A31C; --yellow-tint:var(--warn-tint); --blue:var(--info);
  --error-tint:var(--danger-tint); --body2:var(--ink-2);

  /* shape + depth — one soft shadow level; borders + heavy shadow never combined */
  --radius-sm:12px; --radius:14px; --radius-lg:18px; --radius-xl:22px;
  --shadow-sm:0 2px 8px rgba(33,30,28,.05);
  --shadow:0 3px 12px rgba(33,30,28,.08);
  --shadow-lg:0 18px 48px rgba(33,30,28,.16);
  --ring:0 0 0 3.5px color-mix(in srgb, var(--accent) 22%, transparent);

  --font:"Bricolage Grotesque","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif;   /* menu item names, taglines, brand moments only */
  --maxw:1080px;
}

/* Flour daylight is the same in default + tool scopes; dark = iron kitchen. */
[data-theme="dark"]{
  --bg:#211E1C;          /* Iron */
  --surface:#2B2724;     /* Iron surface — cards */
  --surface-2:#332F2C;   /* Iron raised — chips & wells */
  --surface-3:#3A3531;
  --ink:#F6F1E8;         /* Flour */
  --ink-2:#D8D2C8;
  --muted:#94897C;
  --border:#3A3531;
  --border-strong:#463F39;
  --accent-ink:#FFFFFF;
  --accent-tint:#3A2F14; --accent-soft:#2E2A25;
  --success:#7FAF7A; --success-tint:#243020;
  --warn:#E9C983;    --warn-tint:#3B2F14;
  --danger:#D98275;  --danger-tint:#33211D;
  --info:#8FB0CB;    --info-tint:#28323C;
  --n2:#6B655D;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 8px 26px rgba(0,0,0,.45);
  --shadow-lg:0 24px 64px rgba(0,0,0,.6);
}

/* "tool" scope: operator screens. Same flour palette, slightly denser corners. */
:root[data-ui="tool"]{
  --radius-sm:11px; --radius:13px; --radius-lg:16px; --radius-xl:20px;
}
:root[data-ui="tool"][data-theme="dark"]{
  --bg:#211E1C; --surface:#2B2724; --surface-2:#332F2C; --surface-3:#3A3531;
  --ink:#F6F1E8; --ink-2:#D8D2C8; --muted:#94897C; --border:#3A3531; --border-strong:#463F39;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--bg) }
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4{ letter-spacing:-.025em; line-height:1.12; font-weight:800 }
a{ color:inherit }
::selection{ background:color-mix(in srgb, var(--accent) 24%, transparent) }

/* numbers are always tabular */
.tnum,.n,.v,.money{ font-variant-numeric:tabular-nums }

/* focus + inputs — 1.5px field borders per brand */
input,select,textarea,button{ font-family:inherit }
input[type="checkbox"],input[type="radio"]{ accent-color:var(--accent); width:16px; height:16px }
.input, input.input, select.input, textarea.input,
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; font-size:15px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--border-strong);
  border-radius:var(--radius-sm); outline:none; transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus,
.input:focus{ border-color:var(--accent); box-shadow:var(--ring) }
.field{ margin-bottom:14px }
.field > label, label.lbl{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin:0 0 6px; letter-spacing:.01em }

/* cards */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm);
}
.card + .card{ margin-top:16px }

/* buttons — pills, weight 700 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:999px; padding:12px 20px;
  font-weight:700; font-size:15px; cursor:pointer; line-height:1;
  transition:transform .04s ease, background .15s, box-shadow .15s, border-color .15s;
  background:var(--surface-2); color:var(--ink);
}
.btn:hover{ box-shadow:var(--shadow-sm) }
.btn:active{ transform:translateY(1px) }
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 30%, transparent) }
.btn-primary:hover{ background:var(--accent-press) }
.btn-ghost{ background:transparent; border:1.5px solid var(--border-strong); color:var(--ink) }
.btn-danger{ background:transparent; border:1.5px solid color-mix(in srgb,var(--danger) 45%,var(--border-strong)); color:var(--danger) }
.btn-block{ width:100% }
.btn-lg{ padding:15px 24px; font-size:16px }

/* badges + pills — uppercase 800, .05em */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); font-variant-numeric:tabular-nums }
.badge-accent{ background:var(--accent); color:var(--accent-ink) }
.badge-success{ background:var(--success-tint); color:var(--success) }
.badge-warn{ background:var(--warn-tint); color:var(--warn) }
.badge-info{ background:var(--info-tint); color:var(--info) }
.badge-danger{ background:var(--danger-tint); color:var(--danger) }
.pill{ display:inline-block; background:var(--surface-2); border-radius:999px; padding:3px 11px; font-weight:700; font-size:11.5px; color:var(--ink-2) }

/* KPI tiles */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px }
.kpi{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:16px }
.kpi .v{ font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.kpi .l{ font-size:12px; color:var(--muted); font-weight:700; margin-top:3px }
.kpi.good .v{ color:var(--success) }

/* tables */
.tbl{ width:100%; border-collapse:collapse; font-size:14px }
.tbl th,.tbl td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--border) }
.tbl th{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:800 }
.tbl td.n,.tbl th.n{ text-align:right; font-variant-numeric:tabular-nums }
.muted{ color:var(--muted) }
.serif{ font-family:var(--serif) }

/* app header (operator screens) */
.appbar{ background:color-mix(in srgb,var(--surface) 86%,transparent); border-bottom:1px solid var(--border); padding:12px 18px;
  display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.1) blur(6px) }
.appbar .brand{ font-weight:800; font-size:18px; letter-spacing:-.02em }
.appbar .brand small{ display:block; font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:0 }
.appbar .tools{ display:flex; align-items:center; gap:8px }
.navbtn{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink-2); font-weight:700; font-size:13px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:9px 14px; cursor:pointer }
.navbtn:hover{ border-color:var(--border-strong) }

/* ── shared 94px operator rail (icon nav) ── */
.ok-shell{ display:flex; align-items:stretch; min-height:100vh }
.ok-rail{ width:calc(94px + env(safe-area-inset-left)); flex:0 0 auto; background:var(--surface); border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:6px;
  padding:calc(14px + env(safe-area-inset-top)) 10px 14px calc(10px + env(safe-area-inset-left)); z-index:30 }
.ok-rail .store-tile{ width:46px; height:46px; border-radius:14px; background:var(--accent); color:#FBF4E9; display:grid; place-items:center; font-weight:800; font-size:20px; margin:0 auto 12px }
.ok-rail a, .ok-rail button.rail{ width:100%; background:none; border:0; border-radius:12px; padding:11px 4px; display:flex; flex-direction:column; align-items:center; gap:5px;
  color:var(--muted); font-family:inherit; font-weight:700; font-size:11px; cursor:pointer; text-decoration:none; text-align:center }
.ok-rail a:hover, .ok-rail button.rail:hover{ color:var(--ink-2) }
.ok-rail a.active, .ok-rail button.rail.active{ background:var(--accent-tint); color:var(--accent) }
[data-theme="dark"] .ok-rail a.active,[data-theme="dark"] .ok-rail button.rail.active{ background:#3B2F14; color:var(--amber) }
.ok-rail .foot{ margin-top:auto; text-align:center; font-size:9.5px; color:var(--muted); font-weight:800; letter-spacing:.09em }
.ok-main{ flex:1; min-width:0 }

/* live dot */
.dot{ width:8px; height:8px; border-radius:999px; background:var(--success); display:inline-block; margin-right:6px; box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 60%,transparent); animation:pulse 1.8s infinite }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 55%,transparent)} 70%{box-shadow:0 0 0 6px transparent} 100%{box-shadow:0 0 0 0 transparent} }

/* theme toggle */
.theme-toggle{ width:34px; height:34px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink); cursor:pointer; font-size:15px; display:inline-grid; place-items:center }
.theme-toggle:hover{ border-color:var(--border-strong) }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:22px }
.hint{ color:var(--muted); font-size:13px; line-height:1.5 }
::-webkit-scrollbar{ width:11px; height:11px } ::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; border:3px solid var(--bg) }
.noscroll::-webkit-scrollbar{ display:none } .noscroll{ scrollbar-width:none }