/* ==========================================================================
   Slowpoke Coffee Co. — Barista Display (demo)
   Real bar-side display hardware runs a fixed dark screen (glare, steam,
   wipe-down monitors), so this page intentionally does not follow
   prefers-color-scheme the way the guest site and POS do. Dark on purpose.
   ========================================================================== */

:root {
  --rust-500:  #d9622b;
  --rust-400:  #e8834f;
  --mustard-400: #f0bc63;
  --avocado-400: #93ac66;
  --cream-50:  #fbf1de;

  --bg: #150f0a;
  --panel: #1e1610;
  --panel-2: #241b13;
  --text: #f6f0e6;
  --text-soft: #b9a98f;
  --border: rgba(246, 240, 230, 0.10);
  --border-strong: rgba(246, 240, 230, 0.2);

  --green: #6bcf7e;
  --amber: #f0bc63;
  --red: #ff6a5a;

  /* One status hue per column, referenced by the column, its tickets, its
     count, and its action bar, so a color always means the same thing.
     "New" uses the lighter rust rather than --rust-500: at 1.2rem on the near
     black panel, #d9622b lands around 4:1 and #e8834f around 5.9:1, which is
     the difference between squinting and reading it from the espresso machine. */
  --status-new: var(--rust-400);
  --status-brewing: var(--amber);
  --status-ready: var(--green);

  --font-heading: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--text); font-family: var(--font-body); overflow: hidden;
  /* Faint warm wash so the dark board has some depth under the columns rather
     than reading as one flat black rectangle. */
  background:
    radial-gradient(1000px 600px at 50% 0%, rgba(217, 98, 43, 0.07), transparent 65%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; margin: 0; }
button { font-family: inherit; cursor: pointer; }
p { margin: 0; }

/* 100vh describes the viewport as if iOS Safari's toolbars were not there, so
   the board overflows and the last column gets cut off. 100dvh tracks the real
   visible height. The 100vh line stays first as the fallback. */
.kds-body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.kds-topbar {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 20px;
  background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; gap: 10px;
  /* Clear the notch / Dynamic Island in both orientations. */
  padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.kds-brand { display: flex; align-items: center; gap: 10px; }
.kds-brand-mascot { font-size: 1.6rem; }
.kds-brand strong { font-size: 1.1rem; }
.kds-brand-sub { display: block; font-size: 0.68rem; color: var(--text-soft); letter-spacing: 0.3px; }
.kds-topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kds-clock { font-family: var(--font-heading); font-variant-numeric: tabular-nums; color: var(--text-soft); font-size: 0.95rem; min-width: 74px; text-align: right; }
.kds-btn {
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text);
  padding: 9px 14px; border-radius: var(--radius-full); font-size: 0.82rem; font-weight: 700;
}
.kds-btn:hover { border-color: var(--mustard-400); color: var(--mustard-400); }
.kds-btn.danger { border-color: var(--red); color: var(--red); }
.kds-btn.danger:hover { background: var(--red); color: #200a08; }
.kds-btn.muted { opacity: 0.55; }
.kds-topbar-link { color: var(--text-soft); text-decoration: none; font-size: 0.82rem; font-weight: 700; padding: 9px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); }
.kds-topbar-link:hover { color: var(--text); border-color: var(--mustard-400); }

.kds-board { flex: 1; display: flex; gap: 14px; padding: 14px; overflow-x: auto; min-height: 0; }
.kds-column {
  flex: 1; min-width: 280px; background: var(--panel); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border);
  overflow: hidden; /* so the head's colored cap clips to the rounded corners */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
/* Each column is capped in its status hue and its head is washed in the same
   color, so which column you are looking at is legible from the espresso
   machine without reading a word of it. */
.kds-column-head {
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  border-top: 4px solid var(--status, var(--text-soft));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}
.kds-column-title { font-size: 1.2rem; display: flex; align-items: center; gap: 8px; letter-spacing: 0.2px; }
.kds-column-count {
  border-radius: var(--radius-full); padding: 3px 12px; font-size: 1rem; font-weight: 800;
  font-family: var(--font-heading); font-variant-numeric: tabular-nums;
  /* Plain fill first: a browser without color-mix keeps this and still gets a
     readable pill, just without the status tint. */
  background: var(--panel-2);
  background: color-mix(in srgb, var(--status, var(--text-soft)) 22%, transparent);
  color: var(--status, var(--text-soft));
}
.kds-column[data-col="new"]     { --status: var(--status-new); }
.kds-column[data-col="brewing"] { --status: var(--status-brewing); }
.kds-column[data-col="ready"]   { --status: var(--status-ready); }
.kds-column .kds-column-title { color: var(--status, var(--text)); }

.kds-column-body {
  flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 12px; align-content: start;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.kds-empty { color: var(--text-soft); font-style: italic; font-size: 0.88rem; text-align: center; padding: 30px 10px; }

.kds-ticket {
  background: linear-gradient(180deg, #2a2018, var(--panel-2));
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  padding: 14px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.kds-ticket:active { transform: scale(0.98); }
.kds-ticket:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42); }
/* The age rail is the urgency signal. It is the card's left edge in the age
   color, and it gets heavier as the ticket gets older: a 6px calm green, then
   an 8px amber, then a 10px red that pulses. Age is deliberately NOT the same
   axis as column status, so a ticket can be "Brewing" and "late" at once. */
.kds-ticket.age-green { border-left: 6px solid var(--green); }
.kds-ticket.age-amber { border-left: 8px solid var(--amber); }
.kds-ticket.age-red {
  border-left: 10px solid var(--red);
  animation: pulseRed 1.6s ease-in-out infinite;
}
@keyframes pulseRed {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 0 0 rgba(255,106,90,0); }
  50% { box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 0 5px rgba(255,106,90,0.26); }
}
.kds-ticket.just-arrived { animation: arriveBounce 0.5s ease; }
@keyframes arriveBounce {
  0% { transform: scale(0.9) translateY(-6px); opacity: 0.4; }
  60% { transform: scale(1.02) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}

.kds-ticket-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
/* The name is what gets called out across the bar, so it is the biggest thing
   on the card. */
.kds-ticket-order { font-family: var(--font-heading); font-size: 1.4rem; line-height: 1.15; display: block; }
/* One small colored badge per order type, same idea as the register's own
   ticket-order-type badge, so the barista can tell a Drive-Thru order apart
   from the rest without reading the words. */
.kds-ticket-type {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-soft); font-weight: 800; margin-bottom: 2px;
  padding: 3px 9px; border-radius: var(--radius-full); background: var(--panel-2); border: 1px solid var(--border-strong);
}
.kds-ticket-type.type-togo { background: rgba(240, 188, 99, 0.14); color: var(--mustard-400); border-color: rgba(240, 188, 99, 0.4); }
.kds-ticket-type.type-mobile { background: rgba(147, 172, 102, 0.16); color: var(--avocado-400); border-color: rgba(147, 172, 102, 0.4); }
.kds-ticket-type.type-drivethru { background: rgba(217, 98, 43, 0.18); color: var(--rust-400); border-color: rgba(217, 98, 43, 0.5); }
/* The timer is the other thing read at a distance: tabular so it does not
   jitter as the seconds tick, and boxed in its own age color. */
.kds-ticket-timer {
  font-family: var(--font-heading); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.15rem;
  padding: 4px 12px; border-radius: var(--radius-full); white-space: nowrap; line-height: 1.25;
}
.age-green .kds-ticket-timer { background: rgba(107,207,126,0.16); color: var(--green); box-shadow: inset 0 0 0 1px rgba(107,207,126,0.35); }
.age-amber .kds-ticket-timer { background: rgba(240,188,99,0.18); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(240,188,99,0.4); }
.age-red .kds-ticket-timer { background: rgba(255,106,90,0.22); color: var(--red); box-shadow: inset 0 0 0 1px rgba(255,106,90,0.5); }

.kds-ticket-items { margin: 6px 0 12px; display: grid; gap: 9px; }
.kds-ticket-item { border-top: 1px dashed var(--border); padding-top: 8px; }
.kds-ticket-item:first-child { border-top: none; padding-top: 0; }
.kds-item-line { font-weight: 800; font-size: 1rem; line-height: 1.3; }
.kds-item-mods { margin: 3px 0 0; padding-left: 15px; }
.kds-item-mods li { font-size: 0.84rem; color: var(--text-soft); list-style: disc; line-height: 1.45; }
/* A special instruction is the thing most likely to get missed and most likely
   to matter (allergies), so it is mustard and boxed rather than another grey line. */
.kds-item-note {
  font-size: 0.84rem; color: var(--mustard-400); font-style: italic; margin-top: 5px;
  background: rgba(240, 188, 99, 0.10); border-left: 3px solid var(--mustard-400);
  padding: 4px 8px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* What tapping this card does next, in the column's own status color. */
.kds-ticket-action {
  width: 100%; padding: 11px; border-radius: var(--radius-sm); border: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem; text-align: center;
  letter-spacing: 0.3px;
  background: var(--status, var(--text-soft));
  color: #1a1008; /* every status hue is light, so near black text reads on all three */
}
.kds-column[data-col="new"] .kds-ticket-action { color: #24100a; }

/* ---------- Phone column tabs ----------
   Hidden by default: the bar-side monitor and any tablet shows all three
   columns at once, which is the whole point of a board. */
.kds-tabs { display: none; }
.kds-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 8px; border: none; border-bottom: 3px solid transparent;
  background: var(--panel); color: var(--text-soft);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem;
}
.kds-tab-count {
  background: var(--panel-2); border-radius: var(--radius-full); padding: 2px 9px;
  font-size: 0.78rem; font-weight: 700; min-width: 26px;
}
/* Same status hues as the columns, so a color means one thing on this page. The
   tabs sit outside .kds-column and cannot inherit --status, so they set it. */
.kds-tab[data-tab="new"]     { --status: var(--status-new); }
.kds-tab[data-tab="brewing"] { --status: var(--status-brewing); }
.kds-tab[data-tab="ready"]   { --status: var(--status-ready); }
.kds-tab.active { color: var(--text); background: var(--panel-2); border-bottom-color: var(--status); }
.kds-tab.active .kds-tab-count {
  background: var(--panel-2); /* color-mix fallback, as on .kds-column-count */
  background: color-mix(in srgb, var(--status) 26%, transparent);
  color: var(--status);
}

/* Tablet / small laptop: still three columns, just stacked so each gets its
   own full width. */
@media (max-width: 900px) and (min-width: 761px) {
  .kds-board { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .kds-column { min-width: 0; max-height: 34vh; }
}

/* Phone: three side-by-side columns do not fit, and stacking them buries
   "Ready" three scroll-lengths down. One column at a time, switched by the
   tab bar, each tab showing how many tickets are waiting in the other two.
   Verified at 375px, 390px, and 430px. */
@media (max-width: 760px) {
  .kds-tabs {
    display: flex; flex-shrink: 0; background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .kds-board {
    flex-direction: column; overflow-x: hidden; padding: 10px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  /* Every column stays in the DOM (render() keeps all three counts live); the
     board just shows the selected one. */
  .kds-board .kds-column { display: none; min-width: 0; max-height: none; flex: 1; }
  .kds-board[data-active-col="new"] .kds-column[data-col="new"],
  .kds-board[data-active-col="brewing"] .kds-column[data-col="brewing"],
  .kds-board[data-active-col="ready"] .kds-column[data-col="ready"] { display: flex; }
  /* The tab bar already names the column and carries its count. */
  .kds-column-head { display: none; }

  .kds-topbar { padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); gap: 8px; }
  .kds-brand-sub { display: none; }
  .kds-brand strong { font-size: 0.92rem; }
  .kds-topbar-actions { gap: 6px; }
  .kds-btn, .kds-topbar-link {
    min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; font-size: 0.78rem;
  }
  /* A whole ticket is the tap target, so it is far past 44px already. */
  .kds-ticket { padding: 12px; }
  .kds-ticket-action { padding: 12px; min-height: 44px; }
}

/* Landscape phone: almost no height, so trim the chrome. */
@media (max-height: 460px) and (orientation: landscape) {
  .kds-topbar { padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: 5px; }
  .kds-brand-sub { display: none; }
  .kds-brand-mascot { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kds-ticket.age-red { animation: none; }
  .kds-ticket.just-arrived { animation: none; }
}