/* ===========================================================================
   assets/app.css — component layer. Consumes assets/tokens.css.
   Load tokens.css BEFORE this file. No brand hex is hardcoded here: colors
   come from var(--brand-*) via color-mix, so tokens.css stays the single
   source. Literal hex appears ONLY for non-brand gradient endpoints and
   semantic status colors (red/amber), which are not brand identity.
   =========================================================================== */

/* --- Mobile: prevent double-tap zoom on interactive elements ------------ */
button, .btn-primary, .nav-btn, .size-chip, .cart-btn, [data-cat], [data-add],
[data-qty], [data-size], [data-cart-qty], [data-cart-remove], [data-checkout] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* --- Phase 0+: page canvas ------------------------------------------------ */
body {
  background-color: var(--brand-dark);
  color: var(--brand-cream);
  font-family: var(--font-sans);
  /* #351f14 is a gradient endpoint, not a brand token */
  background-image: radial-gradient(circle at 50% 0%, #351f14 0%, var(--brand-dark) 70%);
  background-attachment: fixed;
  /* Prevent overscroll bounce on iOS */
  -webkit-overflow-scrolling: touch;
}

/* --- Phase 0+: glassmorphism --------------------------------------------- */
/* Fallback rule first, then the color-mix upgrade. Engines that do not know
   color-mix (older café tablets: Safari < 16.4, Chrome < 111) keep the rgba
   value instead of losing the panel and rendering text on a transparent card. */
.glass-panel {
  background: rgba(34, 22, 16, 0.75);
  background: color-mix(in srgb, var(--brand-card) 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(214, 141, 55, 0.15);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 15%, transparent);
}

.glass-card {
  background: rgba(45, 29, 21, 0.6);
  background: color-mix(in srgb, var(--brand-card-hover) 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(214, 141, 55, 0.12);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 12%, transparent);
}

.glass-card:hover {
  border-color: rgba(214, 141, 55, 0.35);
  border-color: color-mix(in srgb, var(--brand-accent) 35%, transparent);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5),
              0 0 15px rgba(214, 141, 55, 0.1);
}

/* --- Phase 0+: custom scrollbar ------------------------------------------ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--brand-dark); }
::-webkit-scrollbar-thumb { background: var(--brand-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-accent); }

/* --- Category tabs: hide scrollbar, enable scroll-snap ------------------ */
.overflow-x-auto::-webkit-scrollbar,
.overflow-x-auto { display: none; }
.overflow-x-auto {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- Mobile: sticky bottom cart bar ------------------------------------- */
#sticky-cart {
  background: rgba(20, 12, 8, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* --- Cart item layout: grid-based for perfect alignment -----------------
   Three columns: info (name + size) | price | controls (qty + remove).
   Each cart line is a self-contained grid so long names wrap without
   pushing the price or quantity controls off-screen. */
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto;
  column-gap: 0.75rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 30%, transparent);
}
.cart-line:last-child {
  border-bottom: none;
}

/* Left: item name + size badge, stacked */
.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;                       /* allow name to shrink-wrap */
}
.cart-item-name {
  color: var(--brand-cream);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.cart-item-size {
  color: var(--brand-muted);
  font-size: 0.75rem;
  font-weight: 500;
  background: color-mix(in srgb, var(--brand-border) 25%, transparent);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
}

/* Right-top: line total price, aligned to the right edge */
.cart-item-price {
  color: var(--brand-accent-light);
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  font-weight: 700;
  justify-self: end;
  white-space: nowrap;
}

/* Right-bottom: quantity steppers + remove button */
.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  justify-self: center;
}

/* Quantity button: 40px tap target minimum */
.cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--brand-border) 60%, transparent);
  background: color-mix(in srgb, var(--brand-card-hover) 60%, transparent);
  color: var(--brand-cream);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Remove button: red semantic styling */
.cart-btn-remove {
  color: #ff9b9b;
  border-color: color-mix(in srgb, #c0392b 40%, transparent);
  background: color-mix(in srgb, #c0392b 18%, transparent);
  padding: 0 8px;
}

/* Quantity number: centered between steppers */
.cart-qty {
  color: var(--brand-cream);
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  font-weight: 700;
  min-width: 1.25rem;
  text-align: center;
}

/* --- Mobile: ensure buttons are tappable (44px minimum) ----------------- */
@media (max-width: 767px) {
  .btn-primary {
    min-height: 48px;
    min-width: 48px;
  }
  .cart-btn {
    min-height: 40px;
    min-width: 40px;
  }
  .size-chip {
    min-height: 40px;
    padding: 8px 12px;
  }
}

/* --- Phase 2+: active nav/tab highlight (menu.html tab bar) -------------- */
.nav-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-btn.active {
  /* #b06f23 is a gradient endpoint, not a brand token */
  background: linear-gradient(135deg, var(--brand-accent) 0%, #b06f23 100%);
  color: var(--brand-dark);
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(212, 141, 55, 0.3);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--brand-accent) 30%, transparent);
}

/* --- Phase 2+: primary tap button (Add to Cart, checkout, Confirm, Serve) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                 /* tap target */
  padding: 14px 22px;
  border-radius: 12px;
  /* #b06f23 is a gradient endpoint, not a brand token */
  background: linear-gradient(135deg, var(--brand-accent) 0%, #b06f23 100%);
  color: var(--brand-dark);
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(212, 141, 55, 0.3);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--brand-accent) 30%, transparent);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary:hover {
  box-shadow: 0 6px 18px rgba(212, 141, 55, 0.4);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-accent) 40%, transparent);
}

/* --- Phase 2+: size-chip selection state (menu.html) ---------------------
   A size chip is either offered-and-unselected (outline) or selected (filled).
   The customer must be able to see which size "Add to Cart" will take, so the
   default (first offered size) is rendered as selected too. No brand hex here:
   every color is var(--brand-*) through color-mix, so tokens.css stays the
   single source of truth. */
.size-chip {
  border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, transparent);
  color: var(--brand-cream);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.size-chip.selected {
  background: color-mix(in srgb, var(--brand-accent) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 80%, transparent);
  color: var(--brand-accent-light);
  font-weight: 700;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-accent) 28%, transparent);
}

/* --- Phase 2+: cart line controls (menu.html) ---------------------------
   Remove/qty buttons on a cart line. The red is a SEMANTIC status color, not
   brand identity, so it lives here rather than in tokens.css. Tap targets stay
   >= 40px so a phone customer can actually hit them. */
.cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brand-border) 70%, transparent);
  background: color-mix(in srgb, var(--brand-card-hover) 70%, transparent);
  color: var(--brand-cream);
  cursor: pointer;
}
.cart-btn-remove {
  color: #ffd7d0;
  border: 1px solid color-mix(in srgb, #c0392b 55%, transparent);
  background: color-mix(in srgb, #c0392b 22%, transparent);
  font-weight: 700;
}



/* --- Sweep 2 (2026-10-21): cashier "Add to this claim" size grid ----------
   The owner complained the size chips were "small and crowded" on a phone. The
   old panel was a run of inline `text-xs` buttons: no padding, no minimum height,
   so two sizes sat a few pixels apart and a thumb landed on the wrong one. A
   plain flex row does not fix it either — the chips then drift to whatever width
   their label is, so the sizes never line up down the item rows and a cook aiming
   at "Large" in the third lane guesses. EQUAL lanes give every item the same
   lane width, so the tap position is predictable down the whole panel; auto-fit
   collapses the lanes an item does not use, so a two-size drink gets two wide
   lanes rather than one dead third column. The 48px minimum height is the same
   thumb target the rest of the app already uses.
   Mobile-first the name sits above its sizes (a 390px screen has no room for a
   name column plus three 72px chips), from 40rem up the row goes side by side.
   The sizing rule is scoped to .claim-add-sizes so menu.html's own size chips
   (which carry the selected/unselected state above) keep their old metrics.
   No brand color here — layout only; .size-chip above still owns the border. */
.claim-add-row {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.claim-add-name {
  display: block;
  font-weight: 600;
  font-size: 1rem;
}
.claim-add-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.5rem;
  justify-items: center;
}
.claim-add-sizes > button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 14rem;
  padding: 0 0.75rem;
}
@media (min-width: 40rem) {
  .claim-add-row {
    grid-template-columns: minmax(8rem, auto) 1fr;
    column-gap: 0.75rem;
    row-gap: 0;
    align-items: center;
  }
}

/* --- Phase 7 (R10 pass): cashier board viewport (cashier.html) ------------
   Ten unpaid claims is roughly what a counter terminal can show at once, so the
   table is capped at ten data rows and the container scrolls instead of the
   page growing to a hundred rows. A board row measures 34px at the shipped
   type scale, so the cap is eleven rows of that (ten claims plus the header):
   11 x 34 = 374px = 23.4rem, rounded up to 23.5rem. The scrollbar itself is
   styled above in this file, so the board scrolls like the rest of the app.
   No brand color here — layout. */
.board-scroll {
  max-height: 23.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Phase 3: cashier countdown status pair ------------------------------ */
.status-live {
  color: var(--brand-accent-light);
  /* normal countdown — gold, calm */
}
.status-lastcall {
  /* < 2 min remaining: red/amber warning. These are SEMANTIC status colors,
     not brand identity, so they are defined here rather than in tokens.css. */
  color: #ffd7d0;
  background: rgba(192, 57, 43, 0.22);
  background: color-mix(in srgb, #c0392b 22%, transparent);
  border: 1px solid rgba(192, 57, 43, 0.45);
  border: 1px solid color-mix(in srgb, #c0392b 45%, transparent);
  font-weight: 700;
}

/* --- Phase 4: KDS high-contrast scope (kitchen.html opts in) ------------- */
/* Readable at ~2 m on a wall-mounted tablet: larger base type, heavier
   weight, higher-contrast text, tap targets >= 48px. */
.kds {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff;                    /* max contrast, not brand cream */
}
.kds .glass-card {
  background: rgba(20, 12, 8, 0.88);
  background: color-mix(in srgb, var(--brand-dark) 88%, transparent);
  border: 2px solid rgba(212, 141, 55, 0.55);
  border: 2px solid color-mix(in srgb, var(--brand-accent) 55%, transparent);
}
.kds .btn-primary {
  min-height: 56px;
  padding: 18px 28px;
  font-size: 1.1rem;
}

/* --- Phase 0+: print rules (SOP-style sheets) ---------------------------- */
@media print {
  .no-print { display: none !important; }
  body { background: white !important; color: black !important; }
  .glass-panel, .glass-card {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
  }
  .print-full { width: 100% !important; max-width: none !important; }
  /* a scroll clip would cut rows off the printed board, so print opens it */
  .board-scroll { max-height: none !important; overflow: visible !important; }
}