/* ============================================================================
   Fairly - restaurant portal
   ----------------------------------------------------------------------------
   Loads on top of /shared/fairly-ui.css.

   Design intent: this is a screen someone glances at with their hands full,
   mid-rush, on a wall-mounted tablet. So - big targets, high-contrast status,
   the action a ticket needs stated as a labeled button rather than an icon,
   and nothing decorative competing with the order queue.
   ========================================================================= */

#app {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-16);
}
@media (max-width: 640px) { #app { padding: var(--sp-4) var(--sp-4) var(--sp-12); } }
.view[hidden] { display: none; }

/* ============================================================================
   Topbar
   ========================================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--chrome);
  backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: var(--topbar-h);
  padding: var(--sp-2) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); background: none; border: none; cursor: pointer; padding: var(--sp-1); }
.brand-mark { border-radius: 6px; display: block; }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-primary); letter-spacing: -0.02em; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
.text-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  min-height: 40px;
}
.text-btn:hover { color: var(--text-primary); background: var(--surface-2); }
#restaurant-chip { font-size: var(--fs-xs); color: var(--text-secondary); }

/* ============================================================================
   Login
   ========================================================================= */

.login-card {
  max-width: 400px;
  margin: var(--sp-16) auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
}
.login-card h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-6); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--purple);
  margin-bottom: var(--sp-2);
}

/* ============================================================================
   Dashboard navigation
   ----------------------------------------------------------------------------
   Underlined tabs, not filled pills: the tab bar should recede so the order
   queue below it is what the eye lands on.
   ========================================================================= */

.segmented {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented-option {
  position: relative;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  min-height: 46px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--t-fast) var(--ease);
}
.segmented-option:hover { color: var(--text-primary); }
.segmented-option.is-active { color: var(--text-primary); }
.segmented-option.is-active::after {
  content: '';
  position: absolute;
  left: var(--sp-3); right: var(--sp-3);
  bottom: -1px;
  height: 2px;
  background: var(--purple);
  border-radius: 2px 2px 0 0;
}
/* Live count of orders needing attention, rendered into the tab by app.js. */
.tab-count {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 800;
  padding: 2px 7px;
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.segmented-option.is-active .tab-count { background: var(--purple-tint); color: var(--purple-ink); }
.tab-count.is-urgent { background: var(--purple); color: var(--text-on-accent); }

/* ============================================================================
   Orders
   ========================================================================= */

.orders-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--t-fast) var(--ease);
}
.order-card:hover { border-color: var(--border-strong); }

/* A ticket that needs a human decision right now is marked structurally (a
   left rule) as well as by its badge - so it stands out even at a glance from
   across the kitchen, and still reads correctly in greyscale. */
.order-card.needs-action {
  border-color: rgba(139, 110, 245, 0.5);
  box-shadow: inset 4px 0 0 var(--purple);
}
.order-card.is-late {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: inset 4px 0 0 var(--warn);
}
/* An alcohol order the driver brought back after a failed age/ID check -
   same "needs a human now" urgency as needs-action, but red rather than
   purple so it reads as an exception, not just a new ticket. */
.order-card.order-card-urgent {
  border-color: rgba(244, 91, 105, 0.5);
  box-shadow: inset 4px 0 0 var(--danger);
}

.order-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  cursor: pointer;
  min-height: 44px;
}
.order-card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.order-card-top .muted { display: block; font-size: var(--fs-xs); }

/* Timing line - how long this ticket has been waiting. The single most
   useful number on a busy kitchen screen. */
.order-age {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-muted-strong);
  font-variant-numeric: tabular-nums;
}
.order-age.is-warn { color: var(--warn); }
.order-age.is-warn::before { content: '\25B2'; font-size: 9px; }

.order-when {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  margin-top: var(--sp-1);
}
.order-when.is-scheduled { color: var(--purple-ink); }
.order-when.is-asap { color: var(--text-muted-strong); font-weight: 600; }

.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.order-status-badge::before { font-size: 9px; }
.order-status-badge.status-new     { background: var(--purple-tint); color: var(--purple-ink); }
.order-status-badge.status-new::before { content: '\25CF'; }
.order-status-badge.status-active  { background: var(--warn-tint); color: var(--warn); }
.order-status-badge.status-active::before { content: '\25D0'; }
.order-status-badge.status-done    { background: var(--success-tint); color: var(--success); }
.order-status-badge.status-done::before { content: '\2713'; }
.order-status-badge.status-ended   { background: var(--surface-2); color: var(--text-muted-strong); }
.order-status-badge.status-ended::before { content: '\25CB'; }
.order-status-badge.status-waiting { background: var(--surface-2); color: var(--text-muted-strong); }
.order-status-badge.status-waiting::before { content: '\25CB'; }
.order-status-badge.status-urgent  { background: var(--danger-tint); color: var(--danger); }
.order-status-badge.status-urgent::before { content: '\2715'; }

/* --- Expanded ticket detail --------------------------------------------- */

.order-detail {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.order-item-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border);
}
.order-item-row:last-of-type { border-bottom: none; }
.order-item-row > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-item-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--purple-tint);
  color: var(--purple);
  font-size: var(--fs-2xs);
  font-weight: 800;
  margin-right: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.order-item-mods { font-size: var(--fs-2xs); color: var(--text-secondary); margin-top: var(--sp-1); margin-left: 32px; }

/* Customer notes must never be missable - this is the single most common
   cause of a remade order. Tinted, iconed, and never inside a collapsed row. */
.order-item-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  margin-left: 32px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--warn-tint);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
  color: var(--text-primary);
  line-height: 1.5;
}
.order-item-note::before { content: '\270E'; color: var(--warn); font-weight: 800; flex-shrink: 0; }

.proof-photo-preview {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  display: block;
}
.delivery-section-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted-strong);
}

.order-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--sp-4);
}
.order-actions input[type="number"] { width: 110px; min-height: 44px; }
.order-actions .muted { margin: 0; }

.reject-form { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.reject-form input { flex: 1; min-width: 200px; }

/* ============================================================================
   Order console (live order management)
   ----------------------------------------------------------------------------
   A live terminal, not a dashboard: a stable queue on one side, one order's
   full detail on the other. Neither panel is torn down and rebuilt when the
   other updates - app.js reconciles the queue's DOM in place (stable
   data-order-id keys) precisely so a mounted tablet never loses scroll
   position or the order a cook is mid-read on. Below 900px the two panels
   collapse into a single column and the detail panel becomes a full-screen
   sheet over the queue - same operational model, adapted to a phone in a
   pocket rather than a tablet on the wall.
   ========================================================================= */

.order-console { display: flex; flex-direction: column; gap: var(--sp-5); }

.order-console-queue { min-width: 0; }
.order-console-queue #orders-list { display: block; }

/* Sits above the queue, never inside it - a new ticket must be announced
   without moving a single existing row. Hidden by default; app.js only
   shows it when there is unseen action-required work AND something else is
   already selected (see selectOrder/renderNewOrderBanner) - the one case
   where surfacing the order automatically would steal focus. */
.new-order-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--purple);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  box-shadow: var(--shadow-md);
  animation: newOrderBannerIn 220ms var(--ease);
}
.new-order-banner:hover { background: var(--purple-hover); color: var(--text-on-accent-hover); }
.new-order-banner::before { content: '\1F514'; font-size: 15px; }
@keyframes newOrderBannerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .new-order-banner { animation: none; } }

/* The compact, un-opened preview every action-required ticket shows so a
   decision never requires opening it first. */
.order-preview {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.order-preview-line { padding: 2px 0; }
.order-preview-more { color: var(--text-muted-strong); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.order-preview-flags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.order-preview-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--warn);
  background: var(--warn-tint);
  border-radius: var(--r-sm);
  padding: 3px var(--sp-2);
}
.order-preview-loading { color: var(--text-muted-strong); font-size: var(--fs-xs); }

/* Immediate actions live on the collapsed card itself - see
   .order-card-actions-inline below (pre-existing hook, now wired up). Accept
   gets extra visual weight here specifically: it is the one action a busy
   cook takes dozens of times a shift and it must be unmistakable at a glance. */
.order-card-actions-inline .secondary-btn.is-primary-action { min-height: 52px; font-size: var(--fs-body); flex: 2; }
.order-card-actions-inline .secondary-btn.danger { flex: 1; }
.order-card-actions-inline input[type="number"] { flex-basis: 100px; }

/* Every queue row is a real button-equivalent target, keyboard operable, and
   shows its own selected state independent of whatever the detail panel is
   doing - selection is a CSS class toggle on the existing row, never a
   rebuild. */
.order-card.is-selected {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px var(--purple-tint), var(--shadow-card);
}

.order-console-detail {
  display: none; /* shown only once something is selected, on mobile as a full-screen sheet */
}
.order-console-detail.is-open { display: block; }
.order-console-empty {
  text-align: center;
  padding: var(--sp-10) var(--sp-5);
  color: var(--text-secondary);
}
.order-console-back-btn { display: none; }

.order-detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.order-detail-panel-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); letter-spacing: -0.02em; }
.order-detail-panel-meta { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 2px; }

@media (min-width: 900px) {
  .order-console { flex-direction: row; align-items: flex-start; }
  .order-console-queue { flex: 0 0 min(46%, 480px); }
  /* Independent scroll regions, pinned under the sticky topbar, so scrolling
     the queue to read older tickets never moves the detail panel and vice
     versa - the two "panes stay stable" requirement, structurally. */
  .order-console-queue, .order-console-detail {
    max-height: calc(100vh - var(--topbar-h) - var(--sp-16));
    overflow-y: auto;
    overflow-anchor: auto;
    position: sticky;
    top: calc(var(--topbar-h) + var(--sp-5));
    scrollbar-gutter: stable;
  }
  .order-console-detail {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-6);
  }
  .order-console-detail:not(.is-open) .order-console-empty { display: block; }
}

@media (max-width: 899px) {
  /* Below the tablet breakpoint the detail panel becomes a full-screen sheet
     that sits on top of the queue rather than a second column - the queue
     itself is never unmounted, so returning to it (the back button) is
     instant and keeps the queue's own scroll position. */
  .order-console-detail.is-open {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--bg);
    padding: var(--sp-4);
    padding-top: calc(var(--topbar-h) + var(--sp-3));
    overflow-y: auto;
  }
  .order-console-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    padding: var(--sp-2) 0;
    margin-bottom: var(--sp-3);
    min-height: 44px;
  }
}

/* Driver ETA panel */
.driver-eta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--purple-tint);
  border: 1px solid rgba(139, 110, 245, 0.3);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--text-primary);
}
.driver-eta-value { font-weight: 800; color: var(--purple-ink); font-variant-numeric: tabular-nums; }

/* ============================================================================
   Buttons
   ========================================================================= */

.primary-btn {
  background: var(--purple);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--r-md);
  padding: 0 var(--sp-5);
  min-height: 46px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.primary-btn:hover:not(:disabled) { background: var(--purple-hover); color: var(--text-on-accent-hover); }
.primary-btn:active:not(:disabled) { transform: translateY(1px); }
.primary-btn:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }

.secondary-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--r-md);
  padding: 0 var(--sp-4);
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.secondary-btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-3); }
.secondary-btn:disabled { color: var(--text-muted); cursor: not-allowed; }

/* The one action a ticket most likely needs gets full brand weight; the
   others stay quiet so the primary path is unmistakable at a glance. */
.secondary-btn.is-primary-action {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--text-on-accent);
  font-weight: 700;
  min-height: 46px;
  padding: 0 var(--sp-6);
}
.secondary-btn.is-primary-action:hover:not(:disabled) { background: var(--purple-hover); border-color: var(--purple-hover); }

.secondary-btn.danger { color: var(--danger); border-color: rgba(244, 91, 105, 0.35); background: transparent; }
.secondary-btn.danger:hover:not(:disabled) { background: var(--danger-tint); border-color: var(--danger); }

.toggle-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--r-md);
  padding: 0 var(--sp-4);
  min-height: 40px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}
.toggle-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* ============================================================================
   Sales summary
   ========================================================================= */

#sales-summary-card { padding: var(--sp-5); }
.sales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.sales-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.sales-tile-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.sales-tile-label { font-size: var(--fs-2xs); color: var(--text-muted-strong); margin-top: var(--sp-1); }
/* Today is the number being checked most often, so it gets the accent. */
.sales-tile.is-primary { background: var(--purple-tint); border-color: rgba(139, 110, 245, 0.3); }
.sales-tile.is-primary .sales-tile-value { color: var(--purple-ink); }

/* --- Trend charts ---------------------------------------------------------
   Single-series bar charts (magnitude by category), so one hue throughout -
   no legend needed, the card title already says what's plotted. Mark spec:
   bars capped at 24px thick, 4px rounded top / square baseline, 2px gap
   between bars, hover lifts the bar and shows an exact-value tooltip so
   nothing is guessed from bar height alone. */
.trend-card { margin-top: var(--sp-4); }
.trend-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.trend-card-head h3 { font-size: var(--fs-sm); font-weight: 700; }
.trend-stats { display: flex; gap: var(--sp-5); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.trend-stat-label { font-size: var(--fs-micro); color: var(--text-muted-strong); text-transform: uppercase; letter-spacing: 0.05em; }
.trend-stat-value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); color: var(--purple-ink); margin-top: 2px; }

.trend-chart { position: relative; }
.trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  border-bottom: 1px solid var(--border);
}
.trend-bar {
  flex: 1;
  min-width: 0;
  max-width: 24px;
  height: 2px; /* zero-value floor - still shows as a sliver, not nothing */
  background: var(--purple);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.trend-bar:hover, .trend-bar:focus-visible { background: var(--purple-hover); }
.trend-bar:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--purple); }
/* Hour chart has 24 bars in the same width a 7-bar chart uses, so it drops
   the cap and lets flex divide the space evenly instead of leaving gaps. */
.trend-bars.is-dense .trend-bar { max-width: none; }

.trend-labels { display: flex; gap: 2px; margin-top: var(--sp-2); }
.trend-labels span { flex: 1; min-width: 0; text-align: center; font-size: var(--fs-micro); color: var(--text-muted-strong); }
.trend-bars.is-dense + .trend-labels span { font-size: 9px; }

/* One shared tooltip per chart, repositioned over whichever bar is active -
   simpler and more robust than a per-bar element, and matches "the mark is
   the hit target" from the interaction spec. */
.trend-tooltip {
  position: absolute;
  bottom: 100%;
  margin-bottom: var(--sp-2);
  transform: translateX(-50%);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-2xs);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  z-index: 5;
}
.trend-tooltip strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.trend-tooltip .muted { display: block; margin-top: 1px; }

.trend-empty { color: var(--text-secondary); font-size: var(--fs-xs); text-align: center; padding: var(--sp-8) 0; }

/* ============================================================================
   Menu management
   ========================================================================= */

.menu-item-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease);
}
.menu-item-row:hover { border-color: var(--border-strong); }
.menu-item-row .order-card-title { margin-bottom: 2px; }
.item-thumb-small {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}
.menu-item-main { flex: 1; min-width: 0; }
.menu-item-controls { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Availability is the control staff hit most during service - it gets a real
   labeled switch, not a bare icon whose state has to be inferred. */
.avail-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  min-height: 40px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
}
.avail-toggle::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.avail-toggle.is-available { color: var(--success); border-color: rgba(74, 222, 128, 0.35); background: var(--success-tint); }
.avail-toggle.is-soldout { color: var(--text-muted-strong); }
.avail-toggle:hover { border-color: var(--border-strong); }

.star-toggle-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted-strong);
  border-radius: var(--r-md);
  width: 40px; height: 40px;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--t-fast) var(--ease);
}
.star-toggle-btn:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.star-toggle-btn.is-featured { color: var(--purple-ink); border-color: var(--purple-ink); background: var(--purple-tint); }

.popularity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-muted-strong);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 3px var(--sp-2);
  white-space: nowrap;
}

.menu-toolbar { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); align-items: center; }
.menu-toolbar #menu-search { flex: 1; margin-bottom: 0; }
.menu-toolbar .secondary-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .menu-toolbar { flex-wrap: wrap; }
  .menu-toolbar #menu-search { flex-basis: 100%; }
}

/* --- Menu categories panel ------------------------------------------------
   Group > Category > (items, counted, not listed - the item list right
   below already does that job). Mirrors .menu-item-row's card language
   at a lighter weight, since a category row nests one level inside its
   group instead of standing alone in the main list. */

.category-panel-toolbar { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }

.category-add-form {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.category-add-form-submit { width: auto; }

.category-group {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.category-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.category-group-body { padding: var(--sp-2) var(--sp-4); }
.category-group-empty { color: var(--text-muted-strong); font-size: var(--fs-xs); padding: var(--sp-3) 0; }

.category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.category-row:last-child { border-bottom: 0; }
.category-row-name {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  min-width: 0;
}
.category-row-count { font-weight: 500; font-size: var(--fs-2xs); color: var(--text-muted-strong); white-space: nowrap; }
.category-row-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.category-group-select { width: auto; min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-2xs); }
@media (max-width: 560px) {
  .category-row { flex-wrap: wrap; }
  .category-group-select { flex: 1; }
}

/* --- Image drop zone ----------------------------------------------------- */

.image-drop-zone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
  cursor: pointer;
  background: var(--surface-2);
  transition: all var(--t-fast) var(--ease);
}
.image-drop-zone:hover { border-color: var(--purple); background: var(--purple-tint); }
.image-drop-zone.is-dragover { border-color: var(--purple); background: var(--purple-tint); }
.image-drop-text { font-size: var(--fs-xs); color: var(--text-secondary); }
.image-drop-preview { max-width: 100%; max-height: 160px; border-radius: var(--r-md); margin: 0 auto var(--sp-3); }

/* ============================================================================
   Locations & hours
   ========================================================================= */

.hours-editor { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.hours-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  flex-wrap: wrap;
}
.hours-day-label { width: 42px; font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; }
.hours-row input[type="time"] {
  width: auto;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-xs);
}
.hours-row input[type="time"]:disabled { opacity: 0.4; }
.hours-row .checkbox-row { margin-left: auto; }

/* ============================================================================
   Forms
   ========================================================================= */

.field-group { margin-bottom: var(--sp-4); }
.field-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }

input[type="email"], input[type="tel"], input[type="text"], input[type="password"],
input[type="number"], input[type="url"], select, textarea {
  width: 100%;
  min-height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: border-color var(--t-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-tint);
}
textarea { resize: vertical; line-height: 1.5; }

.password-field { position: relative; }
.password-field input { padding-right: 46px; }
.password-toggle-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
}
.password-toggle-btn:hover { color: var(--text-primary); background: var(--surface-3); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--sp-1) 0;
}
.checkbox-row input[type="checkbox"] { accent-color: var(--purple); width: 18px; height: 18px; margin: 0; cursor: pointer; }

.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--danger);
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
  line-height: 1.45;
}
.field-error::before {
  content: '!';
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--text-on-status);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state { color: var(--text-secondary); padding: var(--sp-10) var(--sp-5); text-align: center; font-size: var(--fs-sm); }

/* ============================================================================
   Billing
   ========================================================================= */

.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.plan-card-price { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
.plan-current-badge {
  background: var(--success-tint);
  color: var(--success);
  font-size: var(--fs-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px var(--sp-2);
  border-radius: var(--r-sm);
}
.plan-current-badge::before { content: '\2713 '; }

/* ============================================================================
   Support
   ========================================================================= */

.support-thread { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0; }
.support-message { border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); max-width: 85%; font-size: var(--fs-sm); line-height: 1.55; }
.support-message.from-requester { background: var(--surface-2); align-self: flex-start; }
.support-message.from-admin { background: var(--purple-tint); align-self: flex-end; }
.support-message-meta { font-size: var(--fs-micro); color: var(--text-muted-strong); margin-bottom: var(--sp-1); text-transform: uppercase; letter-spacing: 0.04em; }

/* ============================================================================
   Ratings
   ========================================================================= */

.driver-rating-box { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.driver-rating-comment { margin-top: var(--sp-2); }
.star-row { display: flex; gap: var(--sp-1); }
.star-btn {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  padding: var(--sp-1);
  cursor: pointer;
  color: var(--border-strong);
  transition: color var(--t-fast) var(--ease);
}
.star-btn.is-filled { color: var(--purple); }

.map-box { height: 220px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.leaflet-container { background: var(--surface-2); }

/* ============================================================================
   Responsive
   ========================================================================= */

@media (max-width: 640px) {
  .order-card { padding: var(--sp-4); }
  .order-card-top { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .menu-item-row { flex-wrap: wrap; }
  .menu-item-controls { width: 100%; justify-content: flex-start; }
  .order-actions .secondary-btn, .order-actions .primary-btn { flex: 1; min-width: 120px; }
}

/* ============================================================================
   Kitchen light
   ----------------------------------------------------------------------------
   The portal ground moved with the rest of the product, and for this surface
   the reason is the room: a kitchen is bright, the tablet is often mounted
   under a hood light with glare across it, and a near-black screen there is a
   mirror. Light with heavy type is the readable choice.

   Everything below is a correction to a rule that was written against the old
   near-black ground, plus the density this surface actually needs - bigger
   type, bigger targets, and the ticket a cook must act on separated from the
   ones they must not.
   ========================================================================= */

.topbar { background: var(--chrome); backdrop-filter: saturate(170%) blur(14px); }

/* Ticket type steps up: this is read from a metre away, not from a desk. */
.order-card {
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.order-card-title { font-size: var(--fs-h2); }
.order-card-top .muted { font-size: var(--fs-sm); }
.order-age { font-size: var(--fs-xs); }
.order-when { font-size: var(--fs-xs); }
.order-status-badge { font-size: var(--fs-2xs); padding: 6px var(--sp-3); }

/* A ticket needing a decision keeps its structural mark, warmed for paper. */
.order-card.needs-action { border-color: rgba(92, 63, 214, 0.45); box-shadow: inset 4px 0 0 var(--purple-ink), var(--shadow-card); }
.order-card.is-late { border-color: rgba(161, 98, 7, 0.45); box-shadow: inset 4px 0 0 var(--warn), var(--shadow-card); }
.order-card.order-card-urgent { border-color: rgba(192, 37, 53, 0.5); box-shadow: inset 4px 0 0 var(--danger), var(--shadow-card); }

.order-status-badge.status-new { background: var(--purple-tint); color: var(--purple-ink); }
.order-when.is-scheduled { color: var(--purple-ink); }
.segmented-option.is-active .tab-count { background: var(--purple-tint); color: var(--purple-ink); }
.tab-count.is-urgent { background: var(--danger); color: #fff; }
.driver-eta-value { color: var(--purple-ink); }

/* --- Queue sections -------------------------------------------------------
   "What needs me right now" is a different question from "what is cooking",
   and a single undifferentiated list makes a cook answer it by reading every
   row. Splitting the queue answers it before they read anything. */

.queue-section + .queue-section { margin-top: var(--sp-8); }
.queue-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--border);
}
.queue-head h2 {
  font-size: var(--fs-h1);
  letter-spacing: -0.025em;
}
.queue-head-count {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted-strong);
  font-variant-numeric: tabular-nums;
}
.queue-section-urgent .queue-head { border-bottom-color: var(--purple-ink); }
.queue-section-urgent .queue-head h2 { color: var(--purple-ink); }

/* The action a ticket needs, on the collapsed row - a cook accepting a rush
   of tickets should not have to expand each one first. */
.order-card-actions-inline {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.order-card-actions-inline .ff-btn { min-height: 48px; }

/* --- Return confirmation: expected items, stated ------------------------- */

.return-items {
  margin: var(--sp-4) 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.return-items-head {
  background: var(--surface-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-strong);
}
.return-item-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.return-item-qty {
  min-width: 34px;
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 3px 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.return-item-name { flex: 1; min-width: 0; }
.return-item-alcohol { color: var(--warn); font-weight: 700; font-size: var(--fs-2xs); white-space: nowrap; }

/* History (a plain read-only list, not the live console) still gets the
   tablet-density two-column grid - the live queue itself moved to the
   single-column order-console layout above, one ticket wide, so a row's
   position is legible against the fixed detail panel beside it. */
#orders-list { display: block; }
@media (min-width: 900px) {
  #history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
  #history-list .order-card { align-self: start; }
}

/* A ticket that is both unanswered and overdue: it keeps the violet
   needs-action rule, and the age line escalates so the two facts are legible
   together rather than one hiding the other. */
.order-card.is-overdue .order-age { color: var(--danger); font-weight: 800; }
.order-card.is-overdue { border-color: rgba(192, 37, 53, 0.4); }

/* The storefront band names the kind of food, so the mark needs room. */

/* Accent text on an accent tint: corrected calibration, same rule as every
   other badge in the system. */
.order-item-qty { color: var(--purple-ink); }

/* ============================================================================
   Kitchen ticket (print)
   ----------------------------------------------------------------------------
   #print-ticket-region is empty and off-screen in normal use - app.js's
   printTicket() populates it right before window.print(). On screen it's
   simply hidden; only inside an actual print does it appear, and only it
   appears - the printed page is the ticket alone, not a screenshot of the
   console chrome around it.
   ========================================================================= */

#print-ticket-region { display: none; }

/* visibility:hidden (the previous approach) keeps every hidden element in
   normal flow at its full on-screen height, so the print engine still saw
   a document several pages tall - and because the ticket itself had to be
   position:fixed to escape that flow, browsers repeat a fixed element on
   every one of those pages, printing the same ticket twice (or more).
   display:none removes the rest of the app from layout entirely, so the
   printed document is exactly the ticket's own height - one page. */
@media print {
  body > *:not(#print-ticket-region) { display: none !important; }
  #print-ticket-region { display: block; background: #fff; }
}

.print-ticket {
  max-width: 340px;
  margin: 0 auto;
  padding: 24px;
  font-family: var(--font-body);
  color: #000;
}
.print-ticket h1 { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.print-ticket-meta { font-size: 13px; margin: 0 0 2px; }
.print-ticket hr { border: none; border-top: 2px dashed #000; margin: 14px 0; }
.print-ticket-item { padding: 8px 0; border-bottom: 1px dashed #999; font-size: 15px; font-weight: 600; }
.print-ticket-qty { font-weight: 800; }
.print-ticket-mods { font-size: 13px; font-weight: 400; margin: 2px 0 0 22px; }
.print-ticket-note { font-size: 13px; font-weight: 700; margin: 4px 0 0 22px; }
/* ============================================================================
   Accept-decision escalation (30s / 60s / 90s)

   A ticket waiting on an accept/decline is the one thing on this screen that
   is costing someone else time right now, so it gets a real clock and three
   steps that only ever get louder. Level 1 is amber, level 2 is a stronger
   amber, level 3 is red and is the only thing in the whole console that
   moves - reserved for "this order is about to be lost", not spent on
   anything less. Everything is a colour/weight change on top of the existing
   needs-action styling, never a layout shift: a card must not jump under a
   thumb that is reaching for Accept.
   ========================================================================= */

.accept-timer {
  display: inline-block;
  margin-top: 2px;
  font-variant-numeric: tabular-nums; /* the clock must not jitter as digits change */
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.accept-timer-l1 { color: var(--warn); }
.accept-timer-l2 { color: var(--warn); }
.accept-timer-l3 { color: var(--danger); }

.order-card.is-escalated-1 {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: inset 4px 0 0 var(--warn);
}
.order-card.is-escalated-2 {
  border-color: var(--warn);
  box-shadow: inset 5px 0 0 var(--warn), 0 0 0 1px var(--warn);
  background: var(--warn-tint);
}
.order-card.is-escalated-3 {
  border-color: var(--danger);
  box-shadow: inset 5px 0 0 var(--danger), 0 0 0 1px var(--danger);
  background: var(--danger-tint);
  animation: acceptEscalationPulse 1.6s ease-in-out infinite;
}

@keyframes acceptEscalationPulse {
  0%, 100% { box-shadow: inset 5px 0 0 var(--danger), 0 0 0 1px var(--danger); }
  50%      { box-shadow: inset 5px 0 0 var(--danger), 0 0 0 4px var(--danger-tint); }
}

.accept-escalation-banner {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--fs-sm);
  border: 1px solid var(--warn);
  background: var(--warn-tint);
  color: var(--text-primary);
}
.accept-escalation-banner::before { content: '\23F1'; margin-right: var(--sp-2); }
.accept-escalation-banner.is-l3 {
  border-color: var(--danger);
  background: var(--danger-tint);
}

/* The pulse is an attention cue, not information - the colour, the clock and
   the spoken alert all still carry the message without it. */
@media (prefers-reduced-motion: reduce) {
  .order-card.is-escalated-3 { animation: none; }
}

/* ============================================================================
   Driver handoff identity

   Shown only while a driver is on their way to, or standing at, this
   restaurant's counter. Sized so the face is checkable at arm's length from a
   kitchen tablet rather than being a thumbnail next to a name.
   ========================================================================= */

.driver-handoff-card {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
/* The driver is physically there and the bag is about to change hands - the
   one moment this card is actually being used to check a face. */
.driver-handoff-card.is-here {
  border-color: var(--purple);
  box-shadow: inset 4px 0 0 var(--purple);
}

.driver-handoff-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.driver-handoff-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-strong);
  background: var(--surface);
}
.driver-handoff-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  color: var(--text-secondary);
}
.driver-handoff-who { min-width: 0; }
.driver-handoff-label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.driver-handoff-name {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.driver-handoff-meta {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.driver-handoff-check {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* The cancel-after-accept escape hatch. Deliberately a text button in the
   danger colour, never a filled one: it sits under Mark ready and must not
   compete with it. */
.text-btn.is-danger { color: var(--danger); }
.text-btn.is-danger:hover { color: var(--danger); background: var(--danger-tint); }


/* ============================================================================
   Queue card: order type, and items on every card

   Two changes aimed at the same thing - reading the queue without opening
   anything. Pickup and delivery are handled completely differently at the
   counter, so the card says which in a pill that reads at a glance rather
   than as another line of grey text. And the item preview, previously only on
   tickets awaiting a decision, now appears on every card, because "what did
   they actually order" is the most common question this screen is asked.
   ========================================================================= */

.order-type {
  display: inline-block;
  margin-top: 4px;
  margin-right: var(--sp-2);
  padding: 2px 8px;
  border-radius: var(--r-pill, 999px);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Distinct hues, not two shades of one - these are told apart at speed and
   often at an angle, from a tablet propped on a pass. */
.order-type.is-delivery { background: var(--purple-tint, rgba(139,110,245,0.14)); color: var(--purple); }
.order-type.is-pickup   { background: var(--warn-tint);   color: var(--warn); }
/* Utensils is a packing instruction rather than a category, so it is quieter
   than the two it sits beside and only ever appears when actually requested. */
.order-type.is-utensils { background: var(--surface-2); color: var(--text-secondary); font-weight: 700; }

/* The in-progress section no longer has a heading (see reconcileQueueSection),
   so its first card would otherwise sit flush against the section above it. */
.queue-section .queue-head[hidden] + .orders-list { margin-top: var(--sp-2); }

/* ============================================================================
   Operations tabs in the topbar

   Moved out of the dashboard body so the order queue gets that vertical space
   back - on a kitchen screen the list of live orders is the entire job, and
   the label + tab row + margin above it cost close to a whole order card.
   Sized down from the in-page segmented control it used to be: it is
   navigation sitting beside the brand now, not a section heading.
   ========================================================================= */

.topbar-tabs {
  margin-right: var(--sp-3);
}
.topbar-tabs .segmented-option {
  padding: 5px 12px;
  font-size: var(--fs-xs);
}

/* Narrow screens: the topbar is already carrying the brand, pause control and
   overflow menu, so the tabs scroll horizontally rather than wrapping the bar
   onto a second line - which would give back the vertical space this change
   just reclaimed. */
@media (max-width: 720px) {
  .topbar-tabs {
    max-width: 46vw;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: var(--sp-2);
  }
  .topbar-tabs::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------------------
   Items a customer added AFTER placing the order.

   These are separated rather than merged into the list on purpose. A line
   that quietly appears in the middle of a ticket somebody has already read
   is how food gets left out of the bag, so an addition has to read as new -
   which means its own block, its own label, and the time it landed. The
   kitchen's real question is whether it arrived before or after they started
   cooking, so the timestamp is part of the heading rather than a detail.

   Uses --info (Ledger Violet) rather than --warn: an addition is new
   information, not a problem, and the amber tints in this console already
   mean "this needs attention soon".
   ------------------------------------------------------------------------ */
.order-added-block {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--border-strong);
}

.order-added-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.order-added-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--info-tint);
  color: var(--info);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.order-added-time {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
}

/* The compact preview on the queue card, so an addition is visible before
   anyone opens the order at all. */
.order-preview-line-added { color: var(--info); font-weight: 700; }

.order-preview-added-tag {
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--info);
}

/* On paper the slip has no colour to work with, so the separation carries
   the whole signal - a reprinted ticket is what the bag gets packed from.
   Not inside @media print: the ticket is rendered into its own container
   and styled by these rules directly, same as .print-ticket-item above. */
.print-ticket-added {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 2px solid #000;
}
.print-ticket-added-heading {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------------------
   Dietary category picker on a menu item.

   Checkboxes rather than a multi-select, because each one is a claim the
   kitchen is making about a dish and should be a deliberate tick rather than
   something swept up by a stray drag. Laid out as a wrapping grid so seven
   options stay scannable without a scroll.
   ------------------------------------------------------------------------ */
.diet-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
}

.diet-option {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.diet-option input { margin: 0; }

/* The badges as a customer sees them, reused on the menu list so a restaurant
   can check at a glance what it has claimed. */
.diet-badge {
  display: inline-block;
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--success-tint);
  color: var(--success);
  font-size: var(--fs-2xs);
  font-weight: 700;
  margin-right: 4px;
}

/* Running out of one thing on an accepted order. Understated on purpose:
   it moves real money and should never sit next to "Ready" looking like
   another step in the happy path. */
.order-item-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

.order-item-oos {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted-strong);
  cursor: pointer;
}

.order-item-oos:hover { border-color: var(--danger); color: var(--danger); }

/* Already refunded. Kept on the ticket rather than removed so it still
   matches the order the customer placed. */
.order-item-gone {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--danger);
}

/* Offers a restaurant runs itself. Deliberately plain: this form gives away
   the restaurant's own money, so it should read like a decision rather than
   a promotion. */
.offer-form { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 24px; }
.offer-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.offer-row .field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.offer-row .field > span { font-size: 12px; font-weight: 700; color: var(--text-muted-strong); }

.offer-days { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; }
.offer-days legend { font-size: 12px; font-weight: 700; color: var(--text-muted-strong); padding: 0 4px; }
.offer-days label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }

.offer-hint { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.offer-hint-inline { align-self: center; }

/* The offer as the customer will read it, built from the fields as they are
   typed - four inputs are hard to hold in your head as one sentence. */
.offer-preview { font-size: 14px; font-weight: 700; color: var(--purple-ink); margin: 0; min-height: 20px; }

.offer-list { display: flex; flex-direction: column; gap: 10px; }
.offer-card { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.offer-card.is-stopped { opacity: 0.55; }
.offer-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.offer-card-name { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.offer-card-rule { font-size: 12px; color: var(--text-muted-strong); }
.offer-card-cost { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.offer-card-stopped { font-size: 12px; font-weight: 700; color: var(--text-muted); }

/* Shown when a platform admin has opened this portal for a restaurant.
   Deliberately loud and full-width: an admin who forgets whose till they
   are standing at is how a support visit becomes an incident. */
.support-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--amber, #8a5406);
  border-radius: var(--r-md);
  background: var(--warn-tint, rgba(138,84,6,0.11));
  color: var(--amber, #8a5406);
  font-size: 13px;
  font-weight: 600;
}