@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Cormorant+Garamond:wght@600;700&display=swap');

:root {
  --paper: #f6efde;
  --paper-light: #fbf6ea;
  --paper-deep: #efe6cf;
  --ink: #211b16;
  --ink-soft: #3d342b;
  --ink-muted: #6b5f52;
  --gold: #a87d44;
  --gold-deep: #8a6431;
  --gold-light: #e7d2ac;
  --line: rgba(33, 27, 22, 0.12);
  --line-soft: rgba(33, 27, 22, 0.07);
  --shadow-sm: 0 2px 8px rgba(33, 27, 22, 0.06);
  --shadow-md: 0 8px 24px rgba(33, 27, 22, 0.12);
  --shadow-lg: 0 18px 48px rgba(33, 27, 22, 0.22);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 14px;

  /* Spacing Scale (Default) */
  --space-section: 24px;
  --space-card-gap: 16px;
  --space-card-pad: 24px;
  --space-btn-gap: 12px;
  --space-item-pad: 12px;
  --space-badge-pad: 4px 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Warm, subtly textured backdrop so the menu "card" floats on desktop */
  background:
    radial-gradient(140% 120% at 50% 0%, var(--paper-light) 0%, var(--paper) 45%, var(--paper-deep) 100%)
    fixed;
}

/* ── Page wrapper ──────────────────────────────────────────────── */
.page {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 20px 120px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-light);
  box-shadow: var(--shadow-md);
}

@media (min-width: 600px) {
  .page { margin: 28px auto; min-height: auto; border-radius: 20px; }
}

.page--wide { max-width: 1080px; }

/* ── Loading / error states (never a blank screen) ─────────────── */
.state-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 70vh;
  text-align: center;
  padding: 40px 20px;
}

.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.state-emblem {
  font-size: 2.4rem;
  color: var(--gold-deep);
}

.state-title {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
}

.state-text { color: var(--ink-muted); font-size: 0.95rem; }

/* ── Brand header ──────────────────────────────────────────────── */
header.brand-header {
  text-align: center;
  margin-bottom: 22px;
  animation: rise 0.5s var(--ease) both;
}

header.brand-header h1 {
  font-family: var(--font-serif);
  font-size: 3.1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--ink);
}

header.brand-header .subtitle {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-top: 10px;
  color: var(--ink-muted);
  padding-left: 0.42em;
}

header.brand-header .tagline {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.04em;
  margin-top: 8px;
  color: var(--gold-deep);
}

.divider-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 6px;
}

.divider-diamond::before,
.divider-diamond::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}

.divider-diamond span {
  margin: 0 12px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background-color: var(--gold);
  box-shadow: 0 0 0 3px var(--paper-light), 0 0 0 4px var(--line-soft);
}

/* ── Category tabs (sticky) ────────────────────────────────────── */
.categories-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 10px -20px 18px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--paper-light) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.categories-nav::-webkit-scrollbar { display: none; }

.category-tab {
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.category-tab:hover { border-color: var(--gold); color: var(--gold-deep); }
.category-tab.active {
  background-color: var(--ink);
  color: var(--paper-light);
  border-color: var(--ink);
}

/* ── Table selector ────────────────────────────────────────────── */
.table-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 10px;
  text-align: center;
  animation: rise 0.5s var(--ease) both;
}

.table-screen h2 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
  margin: 12px 0 26px;
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 360px;
}

.table-btn {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  background: var(--paper-light);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s var(--ease);
}
.table-btn:hover, .table-btn:active {
  background-color: var(--ink);
  color: var(--paper-light);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Menu sections & items ─────────────────────────────────────── */
.menu-section { margin-bottom: 30px; scroll-margin-top: 80px; }

.section-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.section-star { font-size: 0.7rem; letter-spacing: 0.3em; color: var(--gold); margin-top: 4px; }

.vintage-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 20px;
  background: var(--paper-light);
  box-shadow: var(--shadow-sm);
}

.subcategory-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 18px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--gold-deep);
}

.menu-item {
  display: flex;
  flex-direction: column;
  padding: 14px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background-color: rgba(168, 125, 68, 0.07); }
.menu-item:active { background-color: rgba(168, 125, 68, 0.12); }

.menu-item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

.menu-item-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.menu-item-leader {
  flex-grow: 1;
  border-bottom: 1px dotted var(--ink-muted);
  margin: 0 4px 5px;
  opacity: 0.35;
}

.menu-item-price {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-deep);
  white-space: nowrap;
}

.menu-item-details { display: flex; flex-direction: column; margin-top: 2px; }
.menu-item-meta { font-size: 0.8rem; font-style: italic; color: var(--ink-muted); }
.menu-item-profile { font-size: 0.82rem; color: var(--ink-muted); }

.menu-section-footer {
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
  color: var(--ink-muted);
  margin-top: 12px;
  padding: 12px 8px 4px;
  border-top: 1px solid var(--line-soft);
}

/* ── Floating cart pill ────────────────────────────────────────── */
.cart-floating {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ink);
  color: var(--paper-light);
  border-radius: 999px;
  padding: 14px 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.25s var(--ease);
  animation: rise 0.35s var(--ease) both;
}
.cart-floating:hover { transform: translateX(-50%) translateY(-3px); background-color: var(--ink-soft); }

.cart-floating-qty {
  background-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

/* ── Modal / bottom sheet ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(20, 16, 12, 0.55);
  backdrop-filter: blur(3px);
  z-index: 2000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  justify-content: center;
  align-items: flex-end;
}
.modal-overlay.open { display: flex; opacity: 1; }

.modal-content {
  background-color: var(--paper-light);
  width: 100%;
  max-width: 560px;
  border-radius: 22px 22px 0 0;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,0.28);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.open .modal-content { transform: translateY(0); }

.modal-content::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: -8px auto 18px;
}

@media (min-width: 600px) {
  .modal-overlay { align-items: center; }
  .modal-content {
    border-radius: 18px;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .modal-content::before { display: none; }
  .modal-overlay.open .modal-content { transform: scale(1); opacity: 1; }
}

.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }

.modal-title {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 2px 6px;
}
.modal-close:hover { color: var(--ink); }

.modal-description { font-size: 0.9rem; color: var(--ink-muted); margin-bottom: 22px; }

/* ── Customization options ─────────────────────────────────────── */
.option-group { margin-bottom: 20px; }

.option-group-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

.options-list { display: flex; flex-direction: column; gap: 10px; }

.option-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background-color: var(--paper);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.option-card:hover { border-color: var(--gold); }
.option-card.selected {
  border-color: var(--ink);
  background-color: var(--gold-light);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.option-card-label { font-size: 0.95rem; font-weight: 500; }
.option-card-price { font-size: 0.9rem; font-weight: 600; color: var(--gold-deep); }

.quantity-picker { display: flex; align-items: center; gap: 18px; justify-content: center; margin: 18px 0; }

.qty-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
}
.qty-btn:hover { background-color: var(--ink); color: var(--paper-light); }

.qty-val { font-size: 1.3rem; font-weight: 700; min-width: 28px; text-align: center; }

#modal-instructions {
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: var(--paper) !important;
}
#modal-instructions:focus { outline: none; border-color: var(--gold) !important; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-action {
  width: 100%;
  background-color: var(--ink);
  color: var(--paper-light);
  border: none;
  border-radius: 12px;
  padding: 17px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.btn-action:hover { background-color: var(--ink-soft); transform: translateY(-1px); }
.btn-action:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn-action--sm { padding: 11px 16px; font-size: 0.78rem; width: auto; border-radius: 10px; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: 11px 16px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper-light); }

/* ── Cart rows ─────────────────────────────────────────────────── */
.cart-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.cart-item-details { flex-grow: 1; }

.cart-item-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
}

.cart-item-options-text { font-size: 0.8rem; color: var(--gold-deep); margin-top: 2px; }

.cart-item-meta-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cart-item-total { font-weight: 600; font-size: 0.95rem; }

/* ── Order tracker ─────────────────────────────────────────────── */
.order-tracker-panel { margin: 4px 0 24px; padding-top: 18px; border-top: 1px solid var(--line); }

.tracker-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.tracker-list { display: flex; flex-direction: column; gap: 12px; }

.tracker-card {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.tracker-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.tracker-card-items { font-size: 0.85rem; color: var(--ink-muted); display: flex; flex-direction: column; gap: 2px; }

/* ── Status badges (shared by tracker + kitchen) ───────────────── */
.status-badge {
  padding: var(--space-badge-pad);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-pending { background-color: #d97706; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.status-ready   { background-color: #059669; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.status-complete{ background-color: #4b5563; color: #ffffff; }
.status-cancelled{ background-color: #dc2626; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }

/* ── Kitchen board ─────────────────────────────────────────────── */
.kitchen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.kitchen-title { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; letter-spacing: 0.1em; }
.kitchen-clock { font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-muted); }

.kitchen-conn { display: inline-block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.kitchen-conn.is-live { color: #3d7a3a; }
.kitchen-conn.is-live::before,
.kitchen-conn.is-off::before { content: "●"; margin-right: 5px; }
.kitchen-conn.is-off { color: #b3522f; }

.kitchen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-card-gap); }

.kitchen-card {
  background: var(--paper-light);
  border: 2px solid var(--line);
  border-left: 8px solid var(--gold);
  border-radius: 16px;
  padding: var(--space-card-pad);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kitchen-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.kitchen-card.status-ready { border-left-color: #059669; }
.kitchen-card.status-cancelled { border-left-color: #dc2626; }

.kitchen-card-head { display: flex; justify-content: space-between; align-items: center; }
.kitchen-card-head strong { font-family: var(--font-sans); font-size: 2.2rem; font-weight: 800; background-color: var(--ink); color: #ffffff; padding: 4px 14px; border-radius: 8px; display: inline-block; line-height: 1.1; box-shadow: var(--shadow-sm); }
.kitchen-card-sub { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); margin: 4px 0 16px; }

.kitchen-items { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.kitchen-items li { display: flex; justify-content: space-between; gap: 12px; font-size: 1.35rem; font-weight: 800; border-bottom: 2px dashed var(--line); padding-bottom: var(--space-item-pad); color: var(--ink); }
.kitchen-items li:last-child { border-bottom: none; }
.kitchen-items em { font-style: normal; font-weight: bold; background: #fef3c7; color: #b45309; padding: 2px 6px; border-radius: 4px; font-size: 0.95rem; border: 1px solid #fde68a; }
.kitchen-items em.note { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.kitchen-item-price { white-space: nowrap; font-weight: 700; color: var(--gold-deep); font-size: 1.15rem; }

.kitchen-primary-actions { display: flex; gap: var(--space-btn-gap); width: 100%; margin-top: 14px; }
.kitchen-primary-actions > * { flex: 1; height: 52px; font-size: 0.95rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.kitchen-secondary-actions { width: 100%; margin-top: var(--space-btn-gap); border-top: 2px dashed var(--line); padding-top: var(--space-btn-gap); display: flex; justify-content: flex-end; }
.kitchen-secondary-actions .btn-cancel { width: 100%; height: 46px; font-size: 0.85rem; font-weight: 800; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; justify-content: center; margin-top: 0; }
.kitchen-empty { text-align: center; color: var(--ink-muted); padding: 60px 0; font-size: 1.05rem; }

/* ── Dietary markers ─────────────────────────────────────────────────────── */
.dietary-marker { display: inline-block; font-size: 0.65rem; font-weight: 700; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--gold-light); color: var(--ink); letter-spacing: 0.05em; }
.dietary-marker.vegan { background: #d4edda; color: #1b5e20; }
.dietary-marker.alcohol { background: #fff3cd; color: #856404; }

/* ── Order confirmation modal ─────────────────────────────────────────────── */
.confirmation-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 3000; }
.confirmation-overlay.show { display: flex; }
.confirmation-box { background: var(--paper-light); border-radius: var(--radius); padding: 40px 30px; text-align: center; max-width: 320px; box-shadow: var(--shadow-lg); animation: rise 0.35s var(--ease) both; }
.confirmation-number { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 700; color: var(--ink); margin: 16px 0; }
.confirmation-text { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.6; margin: 12px 0; }
.confirmation-btn { background: var(--ink); color: var(--paper-light); border: none; border-radius: 10px; padding: 12px 28px; font-weight: 600; cursor: pointer; margin-top: 20px; transition: all 0.2s var(--ease); }
.confirmation-btn:hover { background: var(--ink-soft); }

/* ── Page footer ──────────────────────────────────────────────────────────── */
.menu-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; color: var(--ink-muted); font-size: 0.85rem; line-height: 1.7; }
.menu-footer strong { color: var(--ink); display: block; margin-bottom: 6px; }
.menu-footer .hours { font-weight: 600; color: var(--gold-deep); margin: 8px 0; }

/* ── Kitchen improvements ──────────────────────────────────────────────────── */
.order-timer { font-size: 0.95rem; color: #b45309; font-weight: 700; margin-top: 10px; display: inline-block; background: #fffbeb; border: 1px solid #fde68a; padding: 4px 10px; border-radius: 6px; }
.kitchen-card.old { opacity: 0.7; }
.kitchen-custom-notes { background: #fdf2f8; border-left: 4px solid #db2777; padding: 12px 14px; margin: 12px 0; border-radius: 8px; font-size: 1.05rem; font-weight: 700; color: #9d174d; border-top: 1px solid #fbcfe8; border-right: 1px solid #fbcfe8; border-bottom: 1px solid #fbcfe8; }
.kitchen-primary-actions button, .kitchen-secondary-actions button { flex: 1; }

/* Sound banner & button */
.sound-banner { margin-bottom: 24px; display: flex; justify-content: center; }
.btn-sound-toggle {
  width: 100%;
  padding: 16px 20px;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  font-weight: bold;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-sm);
}
.btn-sound-toggle.is-disabled {
  background-color: #b3522f;
  color: white;
  animation: pulse-button 1.5s infinite ease-in-out;
}
.btn-sound-toggle.is-enabled {
  background-color: #3d7a3a;
  color: white;
}
@keyframes pulse-button {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* Seating grid status screen */
.table-status-container {
  margin-bottom: 26px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.table-status-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 8px;
}
.table-status-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 768px) {
  .table-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.table-status-cell {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 6px;
  text-align: center;
  font-weight: 600;
  transition: all 0.25s var(--ease);
}
.table-status-cell.status-vacant {
  background-color: #f3f4f6;
  color: #4b5563;
  border-color: #d1d5db;
}
.table-status-cell.status-pending {
  background-color: #fef3c7;
  color: #92400e;
  border-color: #f59e0b;
  animation: status-pulse-yellow 2s infinite ease-in-out;
}
.table-status-cell.status-ready {
  background-color: #d1fae5;
  color: #065f46;
  border-color: #10b981;
  animation: status-pulse-green 1.5s infinite ease-in-out;
}
.table-status-cell.status-complete {
  background-color: #374151;
  color: #f9fafb;
  border-color: #1f2937;
}
.table-cell-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
}
.table-cell-status {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1px;
  opacity: 0.85;
}
@keyframes status-pulse-yellow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 106, 28, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(138, 106, 28, 0); }
}
@keyframes status-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 122, 58, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(61, 122, 58, 0); }
}

/* Kitchen tabs styling */
.kitchen-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.kitchen-tab {
  flex: 1;
  padding: 14px;
  font-size: 0.88rem;
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 10px;
  border: 1px solid var(--line);
  background-color: var(--paper);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.kitchen-tab.active {
  background-color: var(--ink);
  color: var(--paper-light);
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Card highlight alert */
.kitchen-card.newly-arrived {
  animation: new-card-flash 1.5s infinite alternate;
  border-width: 2px;
}
@keyframes new-card-flash {
  0% { border-color: var(--gold); box-shadow: 0 0 10px rgba(168, 125, 68, 0.3); }
  100% { border-color: #b3522f; box-shadow: 0 0 20px rgba(179, 82, 47, 0.75); }
}

/* Cancel order action and history card state */
.btn-ghost.btn-cancel {
  border-color: #b3522f;
  color: #b3522f;
}
.btn-ghost.btn-cancel:hover {
  background-color: #b3522f;
  color: white;
  border-color: #b3522f;
}
.status-cancelled {
  border-left-color: #b3522f !important;
}
.status-badge.status-cancelled {
  background-color: #f8d7da;
  color: #721c24;
}
.history-label {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px;
  border-radius: 6px;
  background-color: var(--paper);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.history-label.status-complete {
  background-color: #d4edda;
  color: #155724;
}
.history-label.status-cancelled {
  background-color: #f8d7da;
  color: #721c24;
}

/* ── Print view ────────────────────────────────────────────────────────────── */
.print-menu-btn { background: var(--paper); border: 1px solid var(--line); padding: 10px 16px; border-radius: 8px; font-size: 0.85rem; cursor: pointer; margin-bottom: 20px; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Payment option selectors */
.payment-option {
  position: relative;
}
.payment-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.payment-label-text {
  display: block;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 6px;
  background-color: var(--paper);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.payment-option input:checked + .payment-label-text {
  background-color: var(--gold-light);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* ── QR printable sheet (Legacy Admin) ─────────────────────────── */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; padding: 10px; }

.qr-print-card {
  text-align: center;
  background-color: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.qr-print-card canvas { width: 180px; height: 180px; margin-bottom: 12px; }
.qr-print-card .table-lbl { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; }
.qr-print-card .instructions { font-size: 0.75rem; margin-top: 6px; color: var(--ink-muted); }

@media print {
  body { background: #fff; color: #000; }
  .page { max-width: 100% !important; padding: 0 !important; background: #fff !important; box-shadow: none !important; }
  .qr-sheet-header, .no-print { display: none !important; }
  .qr-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 30px !important; }
  .qr-print-card { page-break-inside: avoid; box-shadow: none !important; border: 2px solid #000 !important; }
}

/* ── Custom Language Dropdown ─────────────────────────────────── */
.lang-selector-container {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1000;
}

.theme-selector-container {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1000;
}

.lang-selector-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(220, 200, 170, 0.4);
  padding: 6px 12px;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  transition: all 0.25s var(--ease);
}

.lang-selector-btn:hover {
  background: #fff;
  border-color: var(--gold-deep);
  transform: translateY(-1px);
}

.lang-selector-btn .chevron {
  font-size: 0.6rem;
  color: var(--gold-deep);
  transition: transform 0.25s var(--ease);
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border: 1px solid rgba(220, 200, 170, 0.4);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-width: 130px;
  animation: fadeIn 0.2s var(--ease);
}

.lang-dropdown-content.show {
  display: block;
}

.lang-dropdown-content a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink);
  transition: background 0.2s;
}

.lang-dropdown-content a:hover {
  background: var(--gold-light);
  color: var(--gold-deep);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hide Google Translate top bar & banner */
.skiptranslate, iframe.goog-te-banner-frame, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-te-menu-frame, .goog-te-menu-value {
  display: none !important;
}
body {
  top: 0px !important;
  position: static !important;
}

/* ── Reports Dashboard ─────────────────────────────────────────── */
.report-filters-card {
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.report-date-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.report-date-inputs label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-date-inputs input[type="date"] {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}

.report-date-inputs input[type="date"]:focus {
  border-color: var(--gold);
}

.report-presets {
  display: flex;
  gap: 8px;
}

.btn-preset {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.btn-preset:hover {
  border-color: var(--gold);
  background: var(--gold-light);
  color: var(--gold-deep);
}

.btn-preset.active {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: white;
}

.reports-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.report-metric-card {
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.report-metric-card.highlight {
  border-left: 4px solid var(--gold);
}

.report-metric-card .metric-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.report-metric-card .metric-value {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
}

.reports-details-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .reports-details-row {
    grid-template-columns: 1fr 2fr;
  }
}

.report-panel {
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.report-panel-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 15px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 8px;
}

.report-top-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-top-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--paper);
  border-radius: 8px;
  font-size: 0.85rem;
}

.report-top-item-row .item-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-top-item-row .item-rank {
  font-weight: 700;
  color: var(--gold-deep);
  background: var(--paper-deep);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.report-top-item-row .item-qty {
  font-weight: 700;
  color: var(--ink-soft);
}

.report-top-item-row .item-revenue {
  font-weight: 600;
  color: var(--gold-deep);
}

.ledger-table-container {
  overflow-x: auto;
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

.ledger-table th {
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.ledger-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.ledger-table tr:hover td {
  background: var(--paper);
}

.ledger-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.ledger-badge.cash {
  background: #f4e3bd;
  color: #8a6a1c;
}

.ledger-badge.qr {
  background: #d8eccf;
  color: #3d7a3a;
}

.nav-link-header {
  font-size: 0.78rem !important;
  text-decoration: none !important;
  color: var(--ink-soft) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 6px;
  background: transparent;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link-header:hover {
  color: var(--gold-deep) !important;
  background: rgba(181, 142, 79, 0.1) !important;
  text-decoration: none !important;
}
.nav-link-header.active {
  color: var(--cannabis-green) !important;
  background: var(--cannabis-green-light) !important;
  box-shadow: inset 0 0 0 1px var(--cannabis-green-border) !important;
}

#active-staff-select {
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
}
#active-staff-select:hover, #active-staff-select:focus {
  border-color: var(--gold);
  background-color: #fff;
}

/* ── Ticket Wait-Time Warning Alerts ───────────────────────────── */
.kitchen-card.wait-alert {
  border-color: #f59e0b !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.25);
}
.kitchen-card.wait-critical {
  border-color: #ef4444 !important;
  box-shadow: 0 4px 22px rgba(239, 68, 68, 0.4);
  animation: wait-critical-pulse 2s infinite ease-in-out;
}
@keyframes wait-critical-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35); }
  50% { box-shadow: 0 4px 26px rgba(239, 68, 68, 0.6); }
}

/* ── General Dark Mode Fallbacks ──────────────────────────────────── */
[data-mode="dark"] {
  --paper: #1c1917;
  --paper-light: #292524;
  --paper-deep: #0c0a09;
  --ink: #fafaf9;
  --ink-soft: #f5f5f4;
  --ink-muted: #a8a29e;
  --gold: #d6b77d;
  --gold-deep: #e7cda2;
  --gold-light: #443e38;
  --line: rgba(250, 250, 249, 0.15);
  --line-soft: rgba(250, 250, 249, 0.08);
}
[data-mode="dark"] body {
  background: #1c1917 fixed;
  color: #fafaf9 !important;
}
[data-mode="dark"] select,
[data-mode="dark"] input,
[data-mode="dark"] textarea {
  background-color: #292524 !important;
  color: #fafaf9 !important;
  border-color: rgba(250, 250, 249, 0.2) !important;
}
[data-mode="dark"] .lang-dropdown-content {
  background-color: #292524 !important;
  border-color: rgba(250, 250, 249, 0.2) !important;
}
[data-mode="dark"] .lang-dropdown-content a {
  color: #fafaf9 !important;
}
[data-mode="dark"] .lang-dropdown-content a:hover {
  background-color: #443e38 !important;
  color: #d6b77d !important;
}
[data-mode="dark"] .receipt-paper {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #dddddd !important;
}
[data-mode="dark"] .receipt-paper * {
  color: #111111 !important;
}

/* ── Theme Families (Borders, Radii, Fonts, Spacing) ──────────────── */

/* 1. block-console / customer-block (Impact) */
[data-theme="block-console"],
[data-theme="customer-block"] {
  --font-sans: Impact, Arial Black, system-ui, sans-serif;
  --font-serif: Impact, Arial Black, system-ui, sans-serif;
  --radius: 0px;
  --space-section: 30px;
  --space-card-gap: 24px;
  --space-card-pad: 24px;
  --space-btn-gap: 12px;
  --space-item-pad: 12px;
  --space-badge-pad: 6px 12px;
}
[data-theme="block-console"] *,
[data-theme="customer-block"] * {
  border-radius: 0px !important;
  text-transform: uppercase;
}
[data-theme="block-console"] .kitchen-card {
  border: 3px solid var(--line) !important;
  border-left: 12px solid var(--line) !important;
}
[data-theme="block-console"] .order-timer,
[data-theme="block-console"] .kitchen-clock,
[data-theme="block-console"] .kitchen-card-head strong,
[data-theme="block-console"] .receipt-paper {
  font-family: 'Courier New', Monaco, monospace !important;
  letter-spacing: -0.05em;
}

/* 2. future-wide / customer-future (Outfit Wide) */
[data-theme="future-wide"],
[data-theme="customer-future"] {
  --font-sans: 'Outfit', sans-serif;
  --font-serif: 'Outfit', sans-serif;
  --radius: 24px;
  --space-section: 40px;
  --space-card-gap: 28px;
  --space-card-pad: 32px;
  --space-btn-gap: 16px;
  --space-item-pad: 16px;
  --space-badge-pad: 8px 16px;
}
[data-theme="future-wide"] *,
[data-theme="customer-future"] * {
  letter-spacing: 0.1em;
}
[data-theme="future-wide"] h1, 
[data-theme="future-wide"] h2, 
[data-theme="future-wide"] h3,
[data-theme="future-wide"] .kitchen-title,
[data-theme="future-wide"] .admin-header h1,
[data-theme="customer-future"] h1, 
[data-theme="customer-future"] h2, 
[data-theme="customer-future"] h3 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.18em;
}
[data-theme="future-wide"] .kitchen-card {
  border-radius: 24px !important;
  border: 1px solid var(--line) !important;
  border-left: 8px solid var(--gold) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="future-wide"] .kitchen-card-head strong {
  border-radius: 12px !important;
  font-size: 2.4rem;
  background-color: var(--gold) !important;
  color: #000000 !important;
}
[data-theme="future-wide"] .btn-action,
[data-theme="future-wide"] .kitchen-primary-actions > *,
[data-theme="future-wide"] .btn-admin {
  border-radius: 50px !important;
  text-transform: uppercase;
  font-weight: 700;
}

/* 3. kitchen-command (Practical System UI) */
[data-theme="kitchen-command"] {
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-serif: system-ui, -apple-system, sans-serif;
  --radius: 8px;
  --space-section: 20px;
  --space-card-gap: 16px;
  --space-card-pad: 18px;
  --space-btn-gap: 10px;
  --space-item-pad: 10px;
  --space-badge-pad: 6px 12px;
}
[data-theme="kitchen-command"] .kitchen-card {
  border: 3px solid var(--line) !important;
  border-left: 14px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="kitchen-command"] .kitchen-card.status-ready {
  border-left-color: #059669 !important;
}
[data-theme="kitchen-command"] .kitchen-card.status-cancelled {
  border-left-color: #dc2626 !important;
}
[data-theme="kitchen-command"] .kitchen-card-head strong {
  font-size: 3.2rem !important;
  padding: 6px 16px !important;
  border-radius: 4px !important;
}
[data-theme="kitchen-command"] .kitchen-items li {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  border-bottom: 2px solid var(--line) !important;
  padding-bottom: 12px !important;
}
[data-theme="kitchen-command"] .order-timer {
  font-size: 1.2rem !important;
  border: 2px solid #f59e0b !important;
}

/* 4. terminal-grid (Courier) */
[data-theme="terminal-grid"] {
  --font-sans: 'Courier New', Monaco, monospace;
  --font-serif: 'Courier New', Monaco, monospace;
  --radius: 4px;
  --space-section: 24px;
  --space-card-gap: 20px;
  --space-card-pad: 20px;
  --space-btn-gap: 12px;
  --space-item-pad: 12px;
  --space-badge-pad: 6px 12px;
}

/* 5. treehouse-future-light / customer-bold-light (Outfit & Serif Accent) */
[data-theme="treehouse-future-light"],
[data-theme="customer-bold-light"] {
  --font-sans: 'Outfit', sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --radius: 16px;
  --space-section: 36px;
  --space-card-gap: 24px;
  --space-card-pad: 26px;
  --space-btn-gap: 14px;
  --space-item-pad: 14px;
  --space-badge-pad: 6px 14px;
}
[data-theme="treehouse-future-light"] .kitchen-card,
[data-theme="customer-bold-light"] .kitchen-card {
  border: 1px solid var(--line) !important;
  border-left: 6px solid var(--gold) !important;
  box-shadow: 0 10px 25px rgba(133, 106, 53, 0.08) !important;
}
[data-theme="treehouse-future-light"] .kitchen-card-head strong,
[data-theme="customer-bold-light"] .kitchen-card-head strong {
  background: var(--paper-deep) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
[data-theme="treehouse-future-light"] .btn-action,
[data-theme="treehouse-future-light"] .kitchen-primary-actions > *,
[data-theme="treehouse-future-light"] .btn-admin,
[data-theme="customer-bold-light"] .btn-action,
[data-theme="customer-bold-light"] .kitchen-primary-actions > *,
[data-theme="customer-bold-light"] .btn-admin {
  background: var(--ink) !important;
  color: var(--paper-light) !important;
}
[data-theme="treehouse-future-light"] .btn-action:hover,
[data-theme="treehouse-future-light"] .kitchen-primary-actions > *:hover,
[data-theme="customer-bold-light"] .btn-action:hover,
[data-theme="customer-bold-light"] .kitchen-primary-actions > *:hover {
  background: var(--gold-deep) !important;
}


/* ── Theme Mode Layering (Light/Dark Colors) ────────────────────────── */

/* 1. block-console / customer-block Colors */
[data-theme="block-console"],
[data-theme="block-console"][data-mode="light"],
[data-theme="customer-block"],
[data-theme="customer-block"][data-mode="light"] {
  --paper: #e5e7eb;
  --paper-light: #f3f4f6;
  --paper-deep: #d1d5db;
  --ink: #111827;
  --ink-soft: #1f2937;
  --ink-muted: #4b5563;
  --gold: #000000;
  --gold-deep: #111827;
  --gold-light: #d1d5db;
  --line: #000000;
  --line-soft: #374151;
}
[data-theme="block-console"][data-mode="dark"],
[data-theme="customer-block"][data-mode="dark"] {
  --paper: #111827;
  --paper-light: #1f2937;
  --paper-deep: #030712;
  --ink: #ffffff;
  --ink-soft: #f9fafb;
  --ink-muted: #9ca3af;
  --gold: #ffffff;
  --gold-deep: #f3f4f6;
  --gold-light: #374151;
  --line: #ffffff;
  --line-soft: #4b5563;
}
[data-theme="block-console"][data-mode="dark"] body,
[data-theme="customer-block"][data-mode="dark"] body {
  background: #111827 fixed;
}

/* 2. future-wide / customer-future Colors */
[data-theme="future-wide"],
[data-theme="future-wide"][data-mode="light"],
[data-theme="customer-future"],
[data-theme="customer-future"][data-mode="light"] {
  --paper: #f1f5f9;
  --paper-light: #ffffff;
  --paper-deep: #e2e8f0;
  --ink: #0f172a;
  --ink-soft: #334155;
  --ink-muted: #64748b;
  --gold: #0284c7;
  --gold-deep: #0369a1;
  --gold-light: #e0f2fe;
  --line: #cbd5e1;
  --line-soft: #e2e8f0;
}
[data-theme="future-wide"][data-mode="light"] body,
[data-theme="customer-future"][data-mode="light"] body {
  background: #f1f5f9 fixed;
}
[data-theme="future-wide"][data-mode="dark"],
[data-theme="customer-future"][data-mode="dark"] {
  --paper: #0f172a;
  --paper-light: #1e293b;
  --paper-deep: #020617;
  --ink: #f8fafc;
  --ink-soft: #cbd5e1;
  --ink-muted: #94a3b8;
  --gold: #38bdf8;
  --gold-deep: #0ea5e9;
  --gold-light: #334155;
  --line: rgba(255, 255, 255, 0.15);
  --line-soft: rgba(255, 255, 255, 0.08);
}
[data-theme="future-wide"][data-mode="dark"] body,
[data-theme="customer-future"][data-mode="dark"] body {
  background: radial-gradient(circle at top, #1e293b 0%, #0f172a 100%) fixed;
}

/* 3. kitchen-command Colors */
[data-theme="kitchen-command"],
[data-theme="kitchen-command"][data-mode="light"] {
  --paper: #f3f4f6;
  --paper-light: #ffffff;
  --paper-deep: #e5e7eb;
  --ink: #000000;
  --ink-soft: #111827;
  --ink-muted: #374151;
  --gold: #dc2626;
  --gold-deep: #b91c1c;
  --gold-light: #fee2e2;
  --line: #374151;
  --line-soft: #9ca3af;
}
[data-theme="kitchen-command"] body,
[data-theme="kitchen-command"][data-mode="light"] body {
  background: #f3f4f6 fixed;
}
[data-theme="kitchen-command"] .kitchen-card-head strong,
[data-theme="kitchen-command"][data-mode="light"] .kitchen-card-head strong {
  background-color: #000000 !important;
  color: #ffffff !important;
}
[data-theme="kitchen-command"] .order-timer,
[data-theme="kitchen-command"][data-mode="light"] .order-timer {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
}
[data-theme="kitchen-command"] .kitchen-custom-notes,
[data-theme="kitchen-command"][data-mode="light"] .kitchen-custom-notes {
  font-size: 1.25rem !important;
  border-width: 2px 2px 2px 8px !important;
  border-style: solid !important;
  border-color: #db2777 !important;
  background: #fdf2f8 !important;
  color: #9d174d !important;
}

/* Staff Dark Mode (Practical, High-Contrast) */
[data-theme="kitchen-command"][data-mode="dark"] {
  --paper: #111827;
  --paper-light: #1f2937;
  --paper-deep: #030712;
  --ink: #ffffff;
  --ink-soft: #f9fafb;
  --ink-muted: #d1d5db; /* High contrast text */
  --gold: #ef4444; /* High vis action colors */
  --gold-deep: #f87171;
  --gold-light: #7f1d1d;
  --line: #ffffff; /* pure white borders */
  --line-soft: #6b7280;
}
[data-theme="kitchen-command"][data-mode="dark"] body {
  background: #111827 fixed;
  color: #ffffff !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .kitchen-card {
  background: #1f2937 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
  border-left: 14px solid #ffffff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .kitchen-card.status-ready {
  border-left-color: #10b981 !important;
  border-color: #10b981 !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .kitchen-card.status-cancelled {
  border-left-color: #ef4444 !important;
  border-color: #ef4444 !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .kitchen-card-head strong {
  background-color: #ffffff !important;
  color: #111827 !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .order-timer {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
  border: 2px solid #ef4444 !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .kitchen-custom-notes {
  font-size: 1.25rem !important;
  border-width: 2px 2px 2px 8px !important;
  border-style: solid !important;
  border-color: #f472b6 !important;
  background: #4c0519 !important;
  color: #fbcfe8 !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .btn-action,
[data-theme="kitchen-command"][data-mode="dark"] .kitchen-primary-actions > *,
[data-theme="kitchen-command"][data-mode="dark"] .btn-admin {
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 2px solid #ffffff !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .btn-action:hover,
[data-theme="kitchen-command"][data-mode="dark"] .kitchen-primary-actions > *:hover,
[data-theme="kitchen-command"][data-mode="dark"] .btn-admin:hover {
  background-color: #1f2937 !important;
  color: #ffffff !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .btn-ghost {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}
[data-theme="kitchen-command"][data-mode="dark"] .btn-ghost:hover {
  background-color: #ffffff !important;
  color: #111827 !important;
}
[data-theme="kitchen-command"][data-mode="dark"] select,
[data-theme="kitchen-command"][data-mode="dark"] input {
  background-color: #1f2937 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

/* 4. terminal-grid Colors */
[data-theme="terminal-grid"],
[data-theme="terminal-grid"][data-mode="light"] {
  --paper: #f4f4f5;
  --paper-light: #ffffff;
  --paper-deep: #e4e4e7;
  --ink: #1b5e20;
  --ink-soft: #2e7d32;
  --ink-muted: #4caf50;
  --gold: #1b5e20;
  --gold-deep: #2e7d32;
  --gold-light: #e8f5e9;
  --line: #1b5e20;
  --line-soft: rgba(27, 94, 32, 0.3);
}
[data-theme="terminal-grid"][data-mode="light"] body {
  background: #f4f4f5 fixed;
  color: #1b5e20 !important;
}
[data-theme="terminal-grid"][data-mode="dark"] {
  --paper: #090d16;
  --paper-light: #0d1321;
  --paper-deep: #05070a;
  --ink: #33ff33;
  --ink-soft: #00ff66;
  --ink-muted: #00cc55;
  --gold: #33ff33;
  --gold-deep: #00ff66;
  --gold-light: #162525;
  --line: #00ff66;
  --line-soft: rgba(0, 255, 102, 0.3);
}
[data-theme="terminal-grid"][data-mode="dark"] body {
  background: #090d16 fixed;
  color: #33ff33 !important;
}
[data-theme="terminal-grid"][data-mode="dark"] * {
  border-radius: 4px !important;
  text-shadow: 0 0 4px rgba(0, 255, 102, 0.4);
}
[data-theme="terminal-grid"][data-mode="dark"] .kitchen-card {
  background: #0d1321 !important;
  border: 2px solid #00ff66 !important;
  border-left: 8px solid #00ff66 !important;
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.15) !important;
}
[data-theme="terminal-grid"][data-mode="dark"] .kitchen-card-head strong {
  background: #162525 !important;
  color: #33ff33 !important;
  border: 1px solid #00ff66 !important;
}
[data-theme="terminal-grid"][data-mode="dark"] .kitchen-items li {
  border-bottom: 1px dashed #00ff66 !important;
}
[data-theme="terminal-grid"][data-mode="dark"] .kitchen-items em {
  background: #1f120c !important;
  color: #ff9900 !important;
  border: 1px solid #ff9900 !important;
  text-shadow: none;
}
[data-theme="terminal-grid"][data-mode="dark"] .kitchen-items em.note {
  background: #0d1d2d !important;
  color: #33ccff !important;
  border: 1px solid #33ccff !important;
  text-shadow: none;
}
[data-theme="terminal-grid"][data-mode="dark"] .kitchen-custom-notes {
  background: #250d18 !important;
  color: #ff3399 !important;
  border: 1px solid #ff3399 !important;
  border-left-width: 6px !important;
  text-shadow: none;
}
[data-theme="terminal-grid"][data-mode="dark"] .order-timer {
  background: #1f120c !important;
  color: #ff9900 !important;
  border: 1px solid #ff9900 !important;
  text-shadow: none;
}
[data-theme="terminal-grid"][data-mode="dark"] .btn-action,
[data-theme="terminal-grid"][data-mode="dark"] .kitchen-primary-actions > *,
[data-theme="terminal-grid"][data-mode="dark"] .btn-admin {
  background: #00ff66 !important;
  color: #090d16 !important;
  font-weight: 800 !important;
  border: 1px solid #00ff66 !important;
  text-shadow: none !important;
}
[data-theme="terminal-grid"][data-mode="dark"] .btn-action:hover,
[data-theme="terminal-grid"][data-mode="dark"] .kitchen-primary-actions > *:hover {
  background: #090d16 !important;
  color: #00ff66 !important;
}
[data-theme="terminal-grid"][data-mode="dark"] select,
[data-theme="terminal-grid"][data-mode="dark"] input,
[data-theme="terminal-grid"][data-mode="dark"] textarea {
  background: #090d16 !important;
  color: #33ff33 !important;
  border: 1px solid #00ff66 !important;
}
[data-theme="terminal-grid"][data-mode="dark"] .status-pending { background-color: #b45309 !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(180, 83, 9, 0.5); text-shadow: none; }
[data-theme="terminal-grid"][data-mode="dark"] .status-ready { background-color: #059669 !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(5, 150, 105, 0.5); text-shadow: none; }
[data-theme="terminal-grid"][data-mode="dark"] .status-complete { background-color: #1f2937 !important; color: #00ff66 !important; border: 1px solid #00ff66 !important; text-shadow: none; }
[data-theme="terminal-grid"][data-mode="dark"] .status-cancelled { background-color: #991b1b !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(153, 27, 27, 0.5); text-shadow: none; }

/* 5. treehouse-future-light / customer-bold-light Colors */
[data-theme="treehouse-future-light"],
[data-theme="treehouse-future-light"][data-mode="light"],
[data-theme="customer-bold-light"],
[data-theme="customer-bold-light"][data-mode="light"] {
  --paper: #fcfaf2;
  --paper-light: #ffffff;
  --paper-deep: #f5f0df;
  --ink: #1c1917;
  --ink-soft: #44403c;
  --ink-muted: #78716c;
  --gold: #b5985a;
  --gold-deep: #856a35;
  --gold-light: #fefaf0;
  --line: rgba(133, 106, 53, 0.15);
  --line-soft: rgba(133, 106, 53, 0.08);
}
[data-theme="treehouse-future-light"] body,
[data-theme="treehouse-future-light"][data-mode="light"] body,
[data-theme="customer-bold-light"] body,
[data-theme="customer-bold-light"][data-mode="light"] body {
  background: #f7f4eb fixed;
}
[data-theme="treehouse-future-light"][data-mode="dark"],
[data-theme="customer-bold-light"][data-mode="dark"] {
  --paper: #1c1917; /* warm black / charcoal */
  --paper-light: #292524; /* card background */
  --paper-deep: #0c0a09;
  --ink: #fafaf9; /* cream/off-white text */
  --ink-soft: #f5f5f4;
  --ink-muted: #a8a29e;
  --gold: #d6b77d; /* warm gold accents */
  --gold-deep: #e7cda2;
  --gold-light: #443e38;
  --line: rgba(250, 250, 249, 0.15);
  --line-soft: rgba(250, 250, 249, 0.08);
}
[data-theme="treehouse-future-light"][data-mode="dark"] body,
[data-theme="customer-bold-light"][data-mode="dark"] body {
  background: radial-gradient(140% 120% at 50% 0%, #292524 0%, #1c1917 45%, #0c0a09 100%) fixed;
  color: #fafaf9 !important;
}
[data-theme="treehouse-future-light"][data-mode="dark"] .kitchen-card,
[data-theme="customer-bold-light"][data-mode="dark"] .kitchen-card {
  background: #292524 !important;
  border-color: rgba(250, 250, 249, 0.2) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="treehouse-future-light"][data-mode="dark"] .btn-action,
[data-theme="customer-bold-light"][data-mode="dark"] .btn-action,
[data-theme="customer-bold-light"][data-mode="dark"] .lang-selector-btn {
  background: #fafaf9 !important;
  color: #1c1917 !important;
}
[data-theme="treehouse-future-light"][data-mode="dark"] .btn-action:hover,
[data-theme="customer-bold-light"][data-mode="dark"] .btn-action:hover,
[data-theme="customer-bold-light"][data-mode="dark"] .lang-selector-btn:hover {
  background: #d6b77d !important;
  color: #1c1917 !important;
}

/* ── Staff Accessibility and Readability Pass (1-2 Metres Readability) ── */
.staff-page {
  /* Scope all adjustments strictly to staff-facing pages */
}

.staff-page .kitchen-title {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
}

.staff-page .kitchen-header p {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--ink-muted) !important;
  margin-top: 6px !important;
}

.staff-page #active-staff-select {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  height: 44px !important;
  min-width: 140px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.staff-page .kitchen-header label {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--gold-deep) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.staff-page #staff-welcome-banner,
.staff-page #staff-welcome-banner span {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}

.staff-page .kitchen-conn {
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.staff-page #header-date {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--ink-muted) !important;
}

.staff-page .kitchen-clock,
.staff-page #clock {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.staff-page #theme-mode-toggle {
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

.staff-page details.no-print summary {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  min-height: 48px !important;
  padding: 12px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
}

.staff-page .nav-link-header {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  padding: 12px 20px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  gap: 8px !important;
}

.staff-page .btn-preset,
.staff-page .btn-admin {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  padding: 12px 20px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.staff-page .kitchen-header label input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

.staff-page #inventory-settings-warning {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
}

.staff-page details.no-print > summary {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

.staff-page details.no-print > summary span:last-child {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-width: 2px !important;
  border-radius: 6px !important;
}

.staff-page #low-stock-banner,
.staff-page #disabled-warning-banner,
.staff-page .disabled-warning-banner {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}

.staff-page .btn-sound-toggle {
  font-size: 1.15rem !important;
  padding: 18px 24px !important;
  font-weight: 800 !important;
}

.staff-page .report-filters-card span,
.staff-page .report-filters-card label {
  font-size: 1rem !important;
  font-weight: 800 !important;
}

.staff-page #search-box,
.staff-page #filter-category,
.staff-page #report-start-date,
.staff-page #report-end-date {
  font-size: 1.05rem !important;
  height: 44px !important;
  padding: 8px 14px !important;
  box-sizing: border-box !important;
}

.staff-page .report-date-inputs label {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
}

.staff-page .ledger-table,
.staff-page .inventory-table {
  font-size: 1rem !important;
}

.staff-page .ledger-table th,
.staff-page .inventory-table th {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  padding: 12px 14px !important;
}

.staff-page .ledger-table td,
.staff-page .inventory-table td {
  padding: 12px 14px !important;
}

.staff-page .ledger-badge {
  font-size: 0.85rem !important;
  padding: 4px 8px !important;
  font-weight: 700 !important;
}

.staff-page .inventory-table th span {
  font-size: 0.85rem !important;
}

.staff-page .inventory-stats-grid span:first-child {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}

/* ── History Grouping Accordions ── */
.history-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.history-section {
  border: 2px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--paper-light) !important;
  padding: 18px 24px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s var(--ease) !important;
}

.history-section-header {
  font-family: var(--font-sans) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--gold-deep) !important;
  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
}

/* Hide standard details triangle */
.history-section-header::-webkit-details-marker {
  display: none !important;
}

.history-section-header::before {
  content: "▶" !important;
  font-size: 0.95rem !important;
  color: var(--gold-deep) !important;
  transition: transform 0.2s ease !important;
  display: inline-block !important;
}

.history-section[open] > .history-section-header::before {
  transform: rotate(90deg) !important;
}

.history-section .kitchen-grid {
  margin-top: 20px !important;
}

.show-more-container {
  display: flex !important;
  justify-content: center !important;
  margin-top: 20px !important;
  width: 100% !important;
}

.show-more-btn {
  background: var(--gold-deep) !important;
  color: white !important;
  border: 1px solid var(--gold-deep) !important;
  border-radius: 8px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease) !important;
}

.show-more-btn:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* Even sized title tabs and category tabs across staff pages */
.staff-page .kitchen-tab,
.staff-page .pos-tab-btn {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  padding: 12px 20px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}