/* =============================================================================
   B. Antonio's KDS - app.css
   -----------------------------------------------------------------------------
   Foundation styles. Every screen of the system inherits the variables and
   primitives below. Per dev doc section 6.12, every dimension scales with
   --ui-scale (the in-app A-/A+ controls modify this), and every layout uses
   relative units so it adapts from a 6" phone to a 50" wall display.
   ========================================================================== */

/* ---------- 1. Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The HTML5 [hidden] attribute is overridden by any explicit `display:` rule
   in this stylesheet (we set display:grid / display:flex liberally). Force it
   so PIN/store/station step toggling and any other [hidden] usage works. */
[hidden] { display: none !important; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
    touch-action: manipulation;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { padding: 0; margin: 0; list-style: none; }
a { color: inherit; }

/* ---------- 2. Root variables ----------------------------------------------- */
:root {
    /* Master scale knob. The toolbar A- / A+ buttons mutate this. Persisted in
       localStorage per tablet. Range 0.7 .. 1.5. */
    --ui-scale: 1.0;

    /* Base type scale. Each level is multiplied by --ui-scale via calc(). The
       clamp() gives us fluid behavior across the responsive breakpoints WITHOUT
       fighting --ui-scale. */
    --fs-xs:  calc(clamp(11px, 0.75vw + 9px, 14px) * var(--ui-scale));
    --fs-sm:  calc(clamp(13px, 0.85vw + 10px, 16px) * var(--ui-scale));
    --fs-md:  calc(clamp(15px, 1.05vw + 12px, 20px) * var(--ui-scale));
    --fs-lg:  calc(clamp(18px, 1.40vw + 14px, 26px) * var(--ui-scale));
    --fs-xl:  calc(clamp(22px, 2.00vw + 16px, 36px) * var(--ui-scale));
    --fs-xxl: calc(clamp(28px, 2.80vw + 18px, 48px) * var(--ui-scale));

    /* Spacing scale (4-pt baseline). All paddings/gaps reference this. */
    --sp-1: calc(4px  * var(--ui-scale));
    --sp-2: calc(8px  * var(--ui-scale));
    --sp-3: calc(12px * var(--ui-scale));
    --sp-4: calc(16px * var(--ui-scale));
    --sp-5: calc(24px * var(--ui-scale));
    --sp-6: calc(32px * var(--ui-scale));
    --sp-7: calc(48px * var(--ui-scale));
    --sp-8: calc(64px * var(--ui-scale));

    /* Tap target floor. We never drop below 44px regardless of scale (a11y). */
    --tap: max(44px, calc(44px * var(--ui-scale)));

    /* Radius + elevation. */
    --radius-sm: calc(6px  * var(--ui-scale));
    --radius-md: calc(10px * var(--ui-scale));
    --radius-lg: calc(16px * var(--ui-scale));
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.10);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.18);

    /* Color palette: dark theme by default for kitchen-friendly contrast. */
    --bg:        #0e1116;
    --surface-1: #161b22;
    --surface-2: #1f2630;
    --surface-3: #2a3340;
    --border:    #313a47;
    --text:      #e6e9ee;
    --text-dim:  #9aa3af;
    --text-mute: #6b7280;

    --accent:        #38bdf8;  /* sky-400 */
    --accent-strong: #0ea5e9;
    --accent-text:   #051019;

    /* Aging colors per dev doc 6.7.2. Border colors only - never fill. */
    --age-default: var(--border);
    --age-yellow:  #facc15;
    --age-orange:  #fb923c;
    --age-red:     #ef4444;

    --ok:    #22c55e;
    --warn:  #f59e0b;
    --err:   #ef4444;
    --info:  #38bdf8;

    /* Card geometry. */
    --card-bg:     var(--surface-1);
    --card-border: var(--border);

    /* Focus ring (kept visible for accessibility even on touch). */
    --focus: 0 0 0 calc(3px * var(--ui-scale)) rgba(56, 189, 248, 0.45);
}

/* ---------- 3. Base typography --------------------------------------------- */
body {
    font-size: var(--fs-md);
    line-height: 1.4;
}
h1 { font-size: var(--fs-xxl); margin: 0 0 var(--sp-4); line-height: 1.15; }
h2 { font-size: var(--fs-xl);  margin: 0 0 var(--sp-3); line-height: 1.2;  }
h3 { font-size: var(--fs-lg);  margin: 0 0 var(--sp-2); line-height: 1.25; }
p  { margin: 0 0 var(--sp-3); }
small { font-size: var(--fs-sm); color: var(--text-dim); }
.mono { font-family: "SFMono-Regular", Menlo, Consolas, monospace; }
.muted { color: var(--text-dim); }

/* ---------- 4. Buttons ------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 120ms ease, transform 80ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent-strong);
}
.btn-primary:hover { background: var(--accent-strong); }

.btn-danger {
    background: #b91c1c;
    color: #fff;
    border-color: #991b1b;
}
.btn-ghost {
    background: transparent;
    border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-2); }

.btn-icon {
    width: var(--tap);
    height: var(--tap);
    padding: 0;
}

/* ---------- 5. Form controls ------------------------------------------------ */
.input {
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-md);
    background: var(--surface-1);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.input:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- 6. Layout helpers ---------------------------------------------- */
.stack > * + * { margin-top: var(--sp-3); }
.row { display: flex; gap: var(--sp-3); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.center { display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }

/* ---------- 7. Cards -------------------------------------------------------- */
.card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* Aging borders. Applied via JS by adding .age-yellow / .age-orange / .age-red. */
.card.age-yellow { border-color: var(--age-yellow); }
.card.age-orange { border-color: var(--age-orange); animation: pulse-slow 2s infinite ease-in-out; }
.card.age-red    { border-color: var(--age-red);    animation: pulse-fast 1s infinite ease-in-out; }

@keyframes pulse-slow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.0); }
    50%      { box-shadow: 0 0 0 calc(8px * var(--ui-scale)) rgba(251, 146, 60, 0.35); }
}
@keyframes pulse-fast {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
    50%      { box-shadow: 0 0 0 calc(10px * var(--ui-scale)) rgba(239, 68, 68, 0.45); }
}

/* ---------- 8. Card grid (responsive, dev doc 6.12) ------------------------ */
.card-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
    padding: var(--sp-4);
}
@media (min-width: 600px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 2400px) { .card-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- 9. Toolbar (common station chrome) ----------------------------- */
.toolbar {
    position: fixed;
    top: var(--sp-2);
    right: var(--sp-2);
    display: flex;
    gap: var(--sp-1);
    align-items: center;
    padding: var(--sp-1);
    background: rgba(22, 27, 34, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    z-index: 50;
}
.toolbar .scale-pair { display: flex; gap: 0; }
.toolbar .scale-pair .btn-icon { border-radius: 0; }
.toolbar .scale-pair .btn-icon:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}
.toolbar .scale-pair .btn-icon:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}
.toolbar .scale-readout {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    padding: 0 var(--sp-2);
    min-width: calc(48px * var(--ui-scale));
    text-align: center;
}

/* ---------- 10. Connection banner ------------------------------------------ */
.conn-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--sp-2) var(--sp-4);
    background: var(--warn);
    color: #1a1300;
    text-align: center;
    font-weight: 600;
    z-index: 60;
    transform: translateY(-100%);
    transition: transform 200ms ease;
}
.conn-banner.visible { transform: translateY(0); }
.conn-banner.ok { background: var(--ok); color: #04140a; }

/* ---------- 11. Modal overlay ---------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: var(--sp-4);
}
.modal {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-5);
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
}

/* ---------- 12. Utility page (migrate.php, errors, etc.) ------------------- */
.page-utility { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.utility-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    width: min(720px, 100%);
    box-shadow: var(--shadow-md);
}
.block { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); margin-top: var(--sp-3); border-left: 4px solid var(--border); }
.block.ok    { background: rgba(34, 197, 94, 0.08);  border-left-color: var(--ok); }
.block.muted { background: rgba(154, 163, 175, 0.08); border-left-color: var(--text-dim); }
.block.err   { background: rgba(239, 68, 68, 0.10);  border-left-color: var(--err); }

/* ---------- 13. PIN keypad -------------------------------------------------- */
.pin-screen {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    background: linear-gradient(180deg, #0e1116 0%, #1a2030 100%);
}
.pin-screen header {
    padding: var(--sp-5);
    text-align: center;
}
.pin-screen header h1 {
    font-size: var(--fs-xl);
    color: var(--text);
    margin: 0;
}
.pin-screen header p {
    color: var(--text-dim);
    margin: var(--sp-1) 0 0;
}
.pin-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
}
.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    gap: var(--sp-3);
    width: min(420px, 90vw);
}
.pin-pad .pin-key {
    aspect-ratio: 1 / 1;
    font-size: var(--fs-xxl);
    font-weight: 700;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
}
.pin-pad .pin-key:hover { background: var(--surface-3); }
.pin-pad .pin-key:active { transform: scale(0.97); }
.pin-pad .pin-key.action {
    background: var(--surface-1);
    color: var(--text-dim);
    font-size: var(--fs-md);
    font-weight: 600;
}
.pin-pad .pin-key.submit {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent-strong);
}

.pin-display {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    margin-bottom: var(--sp-5);
    min-height: calc(48px * var(--ui-scale));
}
.pin-display .dot {
    width: calc(20px * var(--ui-scale));
    height: calc(20px * var(--ui-scale));
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border);
    transition: background 120ms ease, transform 120ms ease;
}
.pin-display .dot.filled {
    background: var(--accent);
    border-color: var(--accent-strong);
    transform: scale(1.1);
}
.pin-display .dot.error {
    background: var(--err);
    border-color: var(--err);
    animation: shake 360ms ease-in-out;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px);  }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px);  }
}

.pin-message {
    text-align: center;
    margin-top: var(--sp-4);
    color: var(--text-dim);
    min-height: calc(20px * var(--ui-scale));
}
.pin-message.error { color: var(--err); }

/* ---------- 14. Picker grids (store, station) ------------------------------- */
.picker-screen {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: var(--sp-5);
}
.picker-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    align-content: start;
    padding: var(--sp-4) 0;
}
.picker-tile {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5);
    min-height: calc(140px * var(--ui-scale));
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    text-align: left;
    transition: background 120ms ease, transform 80ms ease, border-color 120ms ease;
}
.picker-tile:hover { background: var(--surface-3); border-color: var(--accent); }
.picker-tile:active { transform: translateY(1px); }
.picker-tile .tile-title { font-size: var(--fs-lg); font-weight: 700; }
.picker-tile .tile-sub   { font-size: var(--fs-sm); color: var(--text-dim); }
.picker-tile.recent {
    border-color: var(--accent);
    box-shadow: 0 0 0 calc(2px * var(--ui-scale)) rgba(56,189,248,0.20) inset;
}
.picker-tile.recent .tile-sub::before { content: 'Last used - '; color: var(--accent); }

/* ---------- 15. Touch / no-select for kiosk -------------------------------- */
.no-select {
    -webkit-user-select: none;
    user-select: none;
}

/* ---------- 16. New-order screen flash (dev doc 6.7.1) --------------------- */
.flash-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.30);
    pointer-events: none;
    opacity: 0;
    z-index: 70;
}
.flash-overlay.fire { animation: screen-flash 400ms ease-out; }
@keyframes screen-flash {
    0%   { opacity: 0;    }
    25%  { opacity: 0.30; }
    100% { opacity: 0;    }
}

/* =============================================================================
   STATION VIEWS - shared layout + per-card chrome
   The toolbar is fixed top-right; the header strip sits at the top of the
   page below it; the card grid fills the rest.
   ============================================================================= */

/* ---------- 17. Station page layout ---------------------------------------- */
.station-page {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}
.station-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}
.station-header .station-id {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.station-header .station-id .name { font-weight: 700; font-size: var(--fs-lg); }
.station-header .station-id .store { font-size: var(--fs-sm); color: var(--text-dim); }
.station-header .clock {
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-dim);
}
.station-header .badges {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.station-header .scheduled-badge,
.station-header .late-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.station-header .scheduled-badge {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
}
.station-header .scheduled-badge .count { color: var(--accent); }
.station-header .late-badge {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: var(--err);
}
.station-header .marquee {
    flex: 1 1 auto;
    overflow: hidden;
    text-align: right;
    font-style: italic;
    color: var(--text-dim);
    min-width: 0;
}

/* Push toolbar away from header content - the toolbar is position:fixed
   top-right at z-index 50. Reserve space so the header doesn't underrun it. */
.station-header { padding-right: calc(var(--sp-4) + 320px * var(--ui-scale)); }
@media (max-width: 800px) {
    .station-header { padding-right: var(--sp-4); }
}

.station-main {
    padding: var(--sp-3);
    overflow-y: auto;
}

/* ---------- 18. Station card --------------------------------------------- */
/* Built on top of .card so the aging colors (.age-yellow/orange/red) just
   work. Override padding/structure here. */

.station-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
    display: flex;
    flex-direction: column;
    min-height: calc(220px * var(--ui-scale));
}
.station-card.age-yellow { border-color: var(--age-yellow); }
.station-card.age-orange { border-color: var(--age-orange); animation: pulse-slow 2s infinite ease-in-out; }
.station-card.age-red    { border-color: var(--age-red);    animation: pulse-fast 1s infinite ease-in-out; }

.station-card.claimed-elsewhere { opacity: 0.55; }
.station-card.is-late { box-shadow: 0 0 0 calc(2px * var(--ui-scale)) var(--err) inset, var(--shadow-sm); }
.station-card.has-post-cook .post-cook-chip { display: inline-flex; }

/* Card header: order number, channel chip, late chip */
.card-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.card-head .order-num {
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1;
    color: var(--text);
    margin-right: var(--sp-2);
}
.card-head .channel-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
}
.card-head .channel-chip.walk_in     { color: #22c55e; border-color: rgba(34,197,94,0.35);  background: rgba(34,197,94,0.10); }
.card-head .channel-chip.owner_com   { color: #38bdf8; border-color: rgba(56,189,248,0.35); background: rgba(56,189,248,0.10); }
.card-head .channel-chip.toast_online{ color: #f97316; border-color: rgba(249,115,22,0.35); background: rgba(249,115,22,0.10); }
.card-head .channel-chip.doordash    { color: #ef4444; border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.10); }
.card-head .channel-chip.uber_eats   { color: #84cc16; border-color: rgba(132,204,22,0.35); background: rgba(132,204,22,0.10); }
.card-head .channel-chip.grubhub     { color: #f43f5e; border-color: rgba(244,63,94,0.35);  background: rgba(244,63,94,0.10); }
.card-head .channel-chip.pickup      { color: #a78bfa; border-color: rgba(167,139,250,0.35);background: rgba(167,139,250,0.10); }

.card-head .late-chip {
    margin-left: auto;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--err);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}

/* Card title: item name + size + customer */
.card-title {
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
}
.card-title .name {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.2;
}
.card-title .name .size { color: var(--text-dim); font-weight: 500; margin-left: var(--sp-2); font-size: var(--fs-md); }
.card-title .customer {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    margin-top: var(--sp-1);
}

/* Ingredient list: each line is "name ........... amount unit" */
.ingredients {
    padding: var(--sp-2) var(--sp-3);
    flex: 1 1 auto;
}
.ingredients li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    font-size: var(--fs-md);
    line-height: 1.3;
}
.ingredients li .ing-name { font-weight: 600; }
.ingredients li .ing-dots {
    flex: 1 1 auto;
    border-bottom: 1px dotted var(--border);
    margin: 0 var(--sp-2);
    height: 0;
    transform: translateY(-3px);
}
.ingredients li .ing-amount {
    color: var(--accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ingredients li.from-mod .ing-name::before {
    content: '+ ';
    color: var(--accent);
}
.ingredients li.removed .ing-name {
    color: var(--err);
    text-decoration: line-through;
}
.ingredients li.removed .ing-name::before {
    content: '- ';
    text-decoration: none;
    display: inline-block;
}
.ingredients li.post .ing-name {
    color: var(--warn);
}
.ingredients li.post .ing-name::after {
    content: ' (after)';
    font-style: italic;
    color: var(--text-dim);
    font-weight: 500;
}

/* Post-cook callout chip */
.post-cook-chip {
    display: none;
    align-items: center;
    gap: var(--sp-1);
    margin: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: var(--warn);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Manual-recipe warning chip */
.manual-recipe-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin: var(--sp-1) var(--sp-3) 0;
    padding: var(--sp-1) var(--sp-2);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: var(--err);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Claimed-by footer (shown on other stations when item is started elsewhere) */
.claimed-by {
    margin: var(--sp-2) var(--sp-3) 0;
    padding: var(--sp-2);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: var(--fs-sm);
    text-align: center;
}
.claimed-by .who { color: var(--text); font-weight: 600; }

/* Action buttons row at the bottom of every card */
.card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-top: 1px solid var(--border);
}
.card-actions .btn {
    min-height: calc(56px * var(--ui-scale));
    font-size: var(--fs-md);
    font-weight: 700;
}
.card-actions .btn.full { grid-column: 1 / -1; }

/* Free-text notes display */
.card-notes {
    margin: 0 var(--sp-3) var(--sp-2);
    padding: var(--sp-2);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--text-dim);
    white-space: pre-wrap;
}

/* ---------- 19. Cut table oven timer ring -------------------------------- */
.timer-ring {
    --pct: 0;
    width: calc(72px * var(--ui-scale));
    height: calc(72px * var(--ui-scale));
    border-radius: 50%;
    background:
        conic-gradient(var(--ok) calc(var(--pct) * 1%), var(--surface-3) 0%);
    display: grid;
    place-items: center;
    position: relative;
    flex-shrink: 0;
}
.timer-ring::after {
    content: '';
    position: absolute;
    inset: calc(6px * var(--ui-scale));
    background: var(--card-bg);
    border-radius: 50%;
}
.timer-ring .timer-text {
    position: relative;
    z-index: 1;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-md);
    font-weight: 700;
}
.timer-ring.warn  { background: conic-gradient(var(--warn) calc(var(--pct) * 1%), var(--surface-3) 0%); }
.timer-ring.over  {
    background: conic-gradient(var(--err) 100%, var(--err) 0%);
    animation: pulse-fast 1s infinite ease-in-out;
}

.cut-card .card-head { position: relative; }
.cut-card .timer-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
}
.cut-card .timer-wrap .label {
    font-size: var(--fs-sm);
    color: var(--text-dim);
}
.cut-card .timer-wrap .label strong {
    display: block;
    color: var(--text);
    font-size: var(--fs-md);
    margin-top: var(--sp-1);
}

/* ---------- 20. Customer display ----------------------------------------- */
.customer-display {
    background: linear-gradient(180deg, #0e1116 0%, #1a2030 100%);
    color: var(--text);
    min-height: 100vh;
    padding: var(--sp-5);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--sp-4);
}
.customer-display .cd-header h1 {
    margin: 0;
    text-align: center;
    font-size: clamp(28px, 4vw, 64px);
    letter-spacing: 0.02em;
}
.customer-display .cd-header .sub {
    text-align: center;
    color: var(--text-dim);
    margin-top: var(--sp-2);
}
.customer-display .cd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
}
@media (max-width: 800px) { .customer-display .cd-grid { grid-template-columns: 1fr; } }
.customer-display .cd-column h2 {
    margin: 0 0 var(--sp-3);
    font-size: clamp(20px, 2.5vw, 36px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--sp-2);
}
.customer-display .cd-column.ready h2 { color: var(--ok); }
.customer-display .cd-column ul {
    display: grid;
    gap: var(--sp-3);
}
.customer-display .cd-tile {
    background: var(--surface-1);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.customer-display .cd-tile.ready {
    border-color: var(--ok);
    box-shadow: 0 0 0 calc(2px * var(--ui-scale)) rgba(34,197,94,0.2) inset;
    animation: pulse-slow 2s infinite ease-in-out;
}
.customer-display .cd-tile .num {
    font-size: clamp(40px, 5vw, 96px);
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    min-width: calc(120px * var(--ui-scale));
    text-align: center;
}
.customer-display .cd-tile.ready .num { color: var(--ok); }
.customer-display .cd-tile .who {
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 600;
}
.customer-display .cd-tile .who small { display: block; color: var(--text-dim); margin-top: var(--sp-1); }
.customer-display .cd-tile .ready-cta {
    margin-left: auto;
    padding: var(--sp-3) var(--sp-5);
    font-size: clamp(16px, 1.2vw, 24px);
    background: var(--ok);
    border: 1px solid #16a34a;
    color: #04140a;
    border-radius: var(--radius-md);
    font-weight: 700;
}
.customer-display .cd-footer {
    text-align: center;
    color: var(--text-dim);
    font-size: var(--fs-sm);
}

/* ---------- 21. Manager view --------------------------------------------- */
.manager-page .station-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 1100px) { .manager-page .station-main { grid-template-columns: 1fr; } }
.manager-section h2 {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}
.manager-list {
    display: grid;
    gap: var(--sp-2);
}
.manager-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.manager-row.late { border-color: var(--err); }
.manager-row .num { font-size: var(--fs-lg); font-weight: 800; }
.manager-row .info .name { font-weight: 600; }
.manager-row .info .meta { color: var(--text-dim); font-size: var(--fs-sm); }
.manager-row .timing { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--text-dim); }
.manager-row .actions { display: flex; gap: var(--sp-1); }
.manager-row .actions .btn { min-height: calc(36px * var(--ui-scale)); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }

/* ---------- 22. Empty-state placeholder ----------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    color: var(--text-dim);
}
.empty-state h2 { color: var(--text); margin: 0 0 var(--sp-2); }

/* ---------- 23. Modifier text fallback (when no recipe resolved) --------- */
.modifier-fallback {
    margin: var(--sp-2) var(--sp-3);
    padding: var(--sp-2);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--text-dim);
    line-height: 1.4;
}
.modifier-fallback strong { color: var(--text); }

/* =============================================================================
   24. Phase 3 - Admin shell
   -----------------------------------------------------------------------------
   Two-pane layout: fixed left nav + scrollable main pane.
   Designed to look at home next to the station views (same dark theme), but
   tighter / data-density-friendly because admins won't be wearing gloves.
   ========================================================================== */
body.admin-page {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--bg);
}

.admin-nav {
    background: var(--surface-1);
    border-right: 1px solid var(--border);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    position: sticky;
    top: 0;
    height: 100vh;
}
.admin-nav .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}
.admin-nav .brand strong {
    font-size: var(--fs-lg);
    letter-spacing: 0.02em;
}
.admin-nav .brand small {
    color: var(--text-dim);
    font-size: var(--fs-sm);
}
.admin-nav nav { flex: 1; min-height: 0; overflow: auto; }
.admin-nav nav ul { display: flex; flex-direction: column; gap: var(--sp-1); }
.admin-nav nav a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    text-decoration: none;
    font-size: var(--fs-md);
    transition: background 120ms ease, color 120ms ease;
}
.admin-nav nav a:hover {
    background: var(--surface-2);
    color: var(--text);
}
.admin-nav nav a.is-active {
    background: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
}
.admin-nav-footer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}
.admin-nav-footer .btn.block { display: block; width: 100%; text-align: center; }

.admin-main {
    padding: var(--sp-5) var(--sp-6);
    overflow-x: hidden;
}
.admin-titlebar {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}
.admin-titlebar h1 {
    margin: 0;
    font-size: var(--fs-xl);
    line-height: 1.2;
}
.admin-titlebar .muted { font-size: var(--fs-sm); margin: 0; }
.admin-titlebar-spacer { flex: 1; }

/* Body section wrapper */
.admin-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* Section card */
.section-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
}
.section-card h2 {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-lg);
}
.section-card .section-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

/* Stat tiles */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3);
}
.stat-tile {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stat-tile .label {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    letter-spacing: 0.02em;
}
.stat-tile .value {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1;
}
.stat-tile.ok    .value { color: var(--ok); }
.stat-tile.warn  .value { color: var(--warn); }
.stat-tile.err   .value { color: var(--err); }

/* Quick-link card grid (dashboard) */
.quicklink-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
}
.quicklink-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    color: var(--text);
    text-decoration: none;
    transition: transform 120ms ease, border-color 120ms ease;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.quicklink-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
}
.quicklink-card h3 { margin: 0; font-size: var(--fs-lg); }
.quicklink-card p  { margin: 0; color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.4; }

/* Tables (CRUD lists) */
table.kds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
table.kds-table th, table.kds-table td {
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
table.kds-table th {
    color: var(--text-dim);
    font-weight: 500;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--surface-2);
}
table.kds-table tbody tr:hover { background: rgba(255,255,255,0.02); }
table.kds-table tbody tr.is-disabled td { color: var(--text-mute); font-style: italic; }
table.kds-table .row-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Forms */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}
@media (min-width: 720px) {
    .form-grid.two-col { grid-template-columns: 1fr 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-field label {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    font-weight: 500;
}
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="password"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    color: var(--text);
    font-size: var(--fs-md);
    min-height: var(--tap);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    box-shadow: var(--focus);
    border-color: var(--accent);
}
.form-field textarea {
    min-height: calc(var(--tap) * 2);
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--fs-sm);
}
.form-field .hint {
    font-size: var(--fs-xs);
    color: var(--text-mute);
    line-height: 1.4;
}
.form-field .hint.warn { color: var(--warn); }
.form-field .hint.ok   { color: var(--ok); }
.form-field input.invalid,
.form-field textarea.invalid,
.form-field select.invalid {
    border-color: var(--err);
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
}
.checkbox-row input[type="checkbox"] {
    width: calc(20px * var(--ui-scale));
    height: calc(20px * var(--ui-scale));
}

/* Toast / flash messages */
.toast-stack {
    position: fixed;
    bottom: var(--sp-4);
    right: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    z-index: 1000;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    color: var(--text);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 220px;
    max-width: 360px;
    transform: translateY(8px);
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms ease;
    font-size: var(--fs-sm);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-info { border-left-color: var(--info); }
.toast-ok   { border-left-color: var(--ok); }
.toast-warn { border-left-color: var(--warn); }
.toast-err  { border-left-color: var(--err); }

/* Modals (admin variant - bigger than the toolbar one) */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    display: grid;
    place-items: center;
    z-index: 900;
    padding: var(--sp-3);
}
.modal-backdrop.hidden { display: none; }
.modal {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--shadow-lg);
    max-width: 560px;
    width: 100%;
}
.modal.admin-modal { max-width: 720px; }
.modal h2 { margin: 0; font-size: var(--fs-lg); }
.modal .modal-body { margin-top: var(--sp-3); }

/* Buttons (admin extra variants) */
.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fecaca;
}
.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
}
.btn-danger.solid {
    background: var(--err);
    color: white;
    border-color: var(--err);
}

/* "Pill" status indicator */
.pill {
    display: inline-block;
    padding: 2px var(--sp-2);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--surface-3);
    color: var(--text-dim);
}
.pill.ok    { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.pill.warn  { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
.pill.err   { background: rgba(239, 68, 68, 0.18); color: #fecaca; }
.pill.info  { background: rgba(56, 189, 248, 0.18); color: #7dd3fc; }
.pill.muted { background: var(--surface-3); color: var(--text-mute); }

/* Mono code chip */
.code-chip {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--fs-xs);
    background: var(--surface-2);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* Responsive: stack nav on top for small screens */
@media (max-width: 720px) {
    body.admin-page {
        grid-template-columns: 1fr;
    }
    .admin-nav {
        position: relative;
        height: auto;
    }
    .admin-nav nav ul {
        flex-direction: row;
        flex-wrap: wrap;
    }
}