/* ==========================================================================
   The Salty Beak — Staff POS register
   Denser, utilitarian sibling of style.css. Same fonts/palette, tuned for
   fast tapping on an iPad in landscape, with graceful fallbacks for desktop
   and phone. Loads standalone (does not import style.css) but reuses the
   same custom property names so a shared brand identity is unmistakable.
   ========================================================================== */

:root {
  --sand-50:   #fbf3e7;
  --sand-100:  #f6e8d3;
  --sand-200:  #efd9b8;
  --driftwood: #8b6f52;
  --ink:       #123640;
  --ink-soft:  #2c545f;
  --teal-700:  #0d5f6b;
  --teal-600:  #12808f;
  --teal-500:  #1aa3ac;
  --teal-400:  #2fbfb6;
  --coral-600: #e85a3a;
  --coral-500: #ff6f4d;
  --coral-400: #ff9166;
  --gold-500:  #f6b93b;
  --gold-400:  #ffca5c;
  --sky-500:   #4fb3d9;
  --sky-400:   #7cc9e6;
  --leaf-500:  #6a9955;
  --leaf-400:  #8ab86e;
  --plum-500:  #a56bc4;
  --plum-400:  #c090d9;
  --rose-500:  #e0678f;
  --rose-400:  #ec8fae;
  /* Ocean/terra/night complete the ten placemat colors. The register renders the
     same dish-plate markup as the guest menu, so it needs the same full set. */
  --ocean-500: #2f6690;
  --ocean-400: #4f89b8;
  --terra-500: #c1652f;
  --terra-400: #dd8752;
  --night-500: #3d4a8a;
  --night-400: #5d6bb0;
  --cream: #fffaf1;

  --bg: #eef2f1;
  --surface: #ffffff;
  --surface-2: #f6f7f6;
  --text: #16262a;
  --text-soft: #55686c;
  --border: rgba(18, 54, 64, 0.14);
  --border-strong: rgba(18, 54, 64, 0.28);
  --accent: var(--teal-600);
  --accent-hover: var(--teal-700);
  --accent-contrast: #ffffff;
  --accent-tint: rgba(18, 128, 143, 0.10);
  --accent-tint-strong: rgba(18, 128, 143, 0.16);
  --coral: var(--coral-500);
  --danger: #d1453b;
  --shadow-sm: 0 1px 4px rgba(10, 20, 24, 0.10);
  --shadow-md: 0 6px 18px rgba(10, 20, 24, 0.14);
  --shadow-lg: 0 18px 48px rgba(10, 20, 24, 0.28);

  --font-heading: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --pos-toggle-h: 60px; /* height of the fixed mobile ticket bar, minus safe area */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1b1f;
    --surface: #14282d;
    --surface-2: #0f2024;
    --text: #eef2ee;
    --text-soft: #a9bcbe;
    --border: rgba(238, 242, 238, 0.12);
    --border-strong: rgba(238, 242, 238, 0.22);
    --accent: var(--teal-400);
    --accent-hover: #57d4c9;
    --accent-contrast: #06222a;
    --accent-tint: rgba(47, 191, 182, 0.14);
    --accent-tint-strong: rgba(47, 191, 182, 0.22);
    --coral: var(--coral-400);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1b1f; --surface: #14282d; --surface-2: #0f2024; --text: #eef2ee; --text-soft: #a9bcbe;
  --border: rgba(238, 242, 238, 0.12); --border-strong: rgba(238, 242, 238, 0.22);
  --accent: var(--teal-400); --accent-hover: #57d4c9; --accent-contrast: #06222a; --coral: var(--coral-400);
  --accent-tint: rgba(47, 191, 182, 0.14); --accent-tint-strong: rgba(47, 191, 182, 0.22);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef2f1; --surface: #ffffff; --surface-2: #f6f7f6; --text: #16262a; --text-soft: #55686c;
  --border: rgba(18, 54, 64, 0.14); --border-strong: rgba(18, 54, 64, 0.28);
  --accent: var(--teal-600); --accent-hover: var(--teal-700); --accent-contrast: #ffffff; --coral: var(--coral-500);
  --accent-tint: rgba(18, 128, 143, 0.10); --accent-tint-strong: rgba(18, 128, 143, 0.16);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  overflow: hidden; /* the POS is a fixed-viewport app shell, panels scroll internally */
  overscroll-behavior: none;
}
button { font-family: inherit; -webkit-user-select: none; user-select: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; margin: 0; }
p { margin: 0; }

/* 100dvh, not 100vh: iOS Safari's 100vh is the TALLEST the viewport ever gets
   (toolbars retracted), so a 100vh app shell overflows behind the toolbar and
   the bottom of the ticket becomes unreachable. dvh tracks the live viewport.
   The 100vh line is kept first as the fallback for browsers without dvh. */
.pos-body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---------- Top bar ---------- */
.pos-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  /* Clear the notch in landscape, where the sensor housing eats one side. */
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(180deg, #17414c 0%, var(--ink) 100%);
  color: var(--sand-50);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(10,20,24,0.3);
  position: relative;
  z-index: 5;
  flex-shrink: 0;
}
.pos-topbar-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-heading); }
.pos-brand-mascot {
  font-size: 1.45rem;
  line-height: 1;
  background: rgba(255,111,77,0.16);
  border: 1px solid rgba(255,111,77,0.35);
  border-radius: var(--radius-md);
  padding: 7px;
}
.pos-topbar-brand strong { font-size: 1.05rem; letter-spacing: 0.2px; }
.pos-topbar-sub { display: block; font-size: 0.68rem; color: rgba(251,243,231,0.6); letter-spacing: 0.4px; text-transform: uppercase; margin-top: 1px; }
.pos-topbar-actions { display: flex; align-items: center; gap: 12px; }
.pos-clock {
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  color: var(--sand-50);
  font-size: 0.9rem;
  min-width: 70px;
  text-align: center;
  background: rgba(251,243,231,0.1);
  border-radius: var(--radius-full);
  padding: 6px 12px;
}
.pos-topbar-link {
  color: rgba(251,243,231,0.85);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(251,243,231,0.3);
  white-space: nowrap;
}
.pos-topbar-link:hover { background: rgba(251,243,231,0.12); }

/* ---------- Ticket tab strip ---------- */
.pos-ticket-tabs {
  display: flex;
  gap: 8px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  /* Sits between the top bar and the app: pin the safe-area sides so a chip
     never hides under a landscape notch. */
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.pos-ticket-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.pos-ticket-chip:hover:not(.active) { color: var(--accent); border-color: var(--accent); }
.pos-ticket-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 3px 10px rgba(18, 128, 143, 0.35);
}
.pos-ticket-chip .chip-count {
  background: rgba(0,0,0,0.15);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  font-size: 0.72rem;
}
.pos-ticket-chip.active .chip-count { background: rgba(255,255,255,0.25); }
.pos-ticket-chip .chip-status { font-size: 0.9rem; }
.pos-ticket-chip-new {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 2px dashed var(--border-strong);
  background: transparent;
  color: var(--text-soft);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
}
.pos-ticket-chip-new:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- App layout ---------- */
.pos-app {
  flex: 1;
  display: flex;
  min-height: 0;
}
.pos-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 14px 0;
  overflow: hidden;
}
.pos-categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.pos-cat-btn {
  padding: 11px 17px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  min-height: 48px;
  box-shadow: var(--shadow-sm);
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.pos-cat-btn:hover:not(.active) { color: var(--accent); border-color: var(--accent); }
.pos-cat-btn:active { transform: scale(0.97); }
.pos-cat-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 3px 10px rgba(18, 128, 143, 0.35);
}

.pos-item-grid {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* stop a fling here from scrolling/bouncing the page */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  align-content: start;
  padding-bottom: 100px; /* room above the mobile toggle bar */
}
.pos-item-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  min-height: 148px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
/* A hairline of brand color that fills in on hover: gives the tile somewhere to
   go on interaction without shifting any layout. */
.pos-item-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.15s ease;
}
.pos-item-tile:hover::before { transform: scaleX(1); }
.pos-item-tile:active { transform: scale(0.96); }
.pos-item-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pos-item-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pos-item-tile .dish-plate { max-width: 58px; }
.pos-item-name {
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.25;
  margin-top: 2px;
}
/* The price sits in a tinted pill pinned to the bottom of the tile, so a whole
   grid of prices lines up on one baseline and scans as a column. */
.pos-item-price {
  margin-top: auto;
  font-family: var(--font-heading);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  background: var(--accent-tint);
  border-radius: var(--radius-full);
  padding: 3px 11px;
}
.pos-item-tile.disabled { opacity: 0.45; pointer-events: none; }

/* ---------- Dish plate visual preview ----------
   pos.js renders the same .dish-plate markup as the guest menu (menu-data.js
   renderPlateHTML), but pos.css loads standalone and never styled it, so every
   tile was showing a bare 13px inline emoji with no mat and no china. Ported
   from style.css so the register matches the menu.

   As on the guest side, the emoji is sized in cqw against the plate's own
   width. A percentage font-size resolves against the INHERITED font size and
   collapses the emoji to a few pixels, which is the bug this avoids. */
.dish-plate {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  flex-shrink: 0;
}
.dish-plate .plate-mat {
  position: absolute;
  inset: 6%;
  border-radius: 24%;
  opacity: 0.92;
  box-shadow: var(--shadow-sm);
}
.dish-plate .plate-china {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 2px 7px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.10);
  border: 3px solid rgba(255,255,255,0.65);
}
:root[data-theme="dark"] .dish-plate .plate-china { background: var(--surface); border-color: rgba(245,236,219,0.1); }
@media (prefers-color-scheme: dark) { .dish-plate .plate-china { background: var(--surface); border-color: rgba(245,236,219,0.1); } }
.dish-plate .plate-emoji {
  position: relative;
  font-size: 44cqw;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
}
.dish-plate .plate-garnish {
  position: absolute;
  top: 6%;
  right: 8%;
  font-size: 26cqw;
  transform: rotate(14deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22));
}
/* renderPlateHTML omits the badge at size-sm, which is the only size the
   register uses, so no .plate-badge rule is needed here. */

.mat-cocktails .plate-mat  { background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); }
.mat-mocktails .plate-mat  { background: linear-gradient(135deg, var(--sky-400), var(--sky-500)); }
.mat-rawbar .plate-mat     { background: linear-gradient(135deg, var(--ocean-400), var(--ocean-500)); }
.mat-appetizers .plate-mat { background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); }
.mat-shareables .plate-mat { background: linear-gradient(135deg, var(--terra-400), var(--terra-500)); }
.mat-mains .plate-mat      { background: linear-gradient(135deg, var(--coral-400), var(--coral-600)); }
.mat-sides .plate-mat      { background: linear-gradient(135deg, var(--leaf-400), var(--leaf-500)); }
.mat-kids .plate-mat       { background: linear-gradient(135deg, var(--plum-400), var(--plum-500)); }
.mat-desserts .plate-mat   { background: linear-gradient(135deg, var(--rose-400), var(--rose-500)); }
.mat-latenight .plate-mat  { background: linear-gradient(135deg, var(--night-400), var(--night-500)); }

.dish-plate.size-lg { max-width: 130px; }
.dish-plate.size-md { max-width: 96px; }
.dish-plate.size-sm { max-width: 60px; }

/* ---------- Ticket panel (sidebar on wide screens) ---------- */
.pos-ticket-panel {
  width: 380px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* The ticket is the authoritative side of the register, so it sits visually
     above the item grid rather than beside it as an equal. */
  box-shadow: -8px 0 24px rgba(10, 20, 24, 0.07);
}
.ticket-head {
  padding: 14px 18px 13px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--accent-tint), transparent);
  flex-shrink: 0;
}
.ticket-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ticket-order-type { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); font-weight: 800; }
.ticket-label { font-family: var(--font-heading); font-size: 1.32rem; margin-top: 1px; letter-spacing: 0.2px; }
.ticket-fired-badge {
  background: var(--sky-500);
  color: #06222a;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.ticket-empty-note { color: var(--text-soft); font-style: italic; font-size: 0.9rem; padding: 30px 18px; text-align: center; }

.ticket-lines {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 14px;
}
.ticket-line {
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ticket-line:hover { border-color: var(--border-strong); }
/* The tappable edit block. It is a real <button>, so reset the button chrome
   and let it lay out like the plain block it replaced. */
.ticket-line-edit {
  display: block;
  width: 100%;
  min-height: 44px; /* Apple HIG minimum touch target */
  margin: 0;
  padding: 4px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.ticket-line-edit:hover:not(.locked) { background: rgba(18, 128, 143, 0.07); }
.ticket-line-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ticket-line-edit.locked { cursor: default; }

.ticket-line-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ticket-line-name { font-weight: 700; font-size: 0.92rem; }
.ticket-line-total { font-family: var(--font-heading); font-weight: 600; color: var(--accent); white-space: nowrap; font-size: 0.9rem; }
.ticket-mods { display: block; margin: 4px 0 0; padding-left: 20px; }
.ticket-mod { display: list-item; list-style: disc; font-size: 0.78rem; color: var(--text-soft); }
.ticket-note { display: block; font-size: 0.78rem; font-style: italic; color: var(--text-soft); margin-top: 4px; }
.ticket-line-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.2px;
}
.ticket-line-hint.locked { color: var(--text-soft); font-weight: 600; }
.ticket-line-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ticket-qty { display: flex; align-items: center; gap: 8px; }
.ticket-qty-btn {
  width: 30px; height: 30px; border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 1rem;
}
.ticket-qty-btn:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.ticket-line-remove { background: none; border: none; color: var(--danger); font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 6px 4px; }
/* A fired line is locked: it is already cooking, so it reads as settled rather
   than editable. The sky edge marks "gone to the kitchen" at a glance. */
.ticket-line.sent {
  opacity: 0.8;
  border-left: 3px solid var(--sky-500);
  background: var(--surface);
}
.ticket-line-sent-tag {
  display: inline-block;
  font-size: 0.62rem;
  color: var(--sky-500);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: rgba(79, 179, 217, 0.14);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

.ticket-foot {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  /* No safe-area padding here on purpose: in the ≤980px drawer layout the panel
     already stops above the fixed toggle bar, which owns the home-indicator
     inset. Padding it again here would open a dead gap under the total. */
  padding: 14px 18px 18px;
  flex-shrink: 0;
  box-shadow: 0 -6px 18px rgba(10, 20, 24, 0.06);
}
.ticket-totals-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
  margin-bottom: 5px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
/* The number staff actually read out loud. Everything else in the foot is
   supporting detail, so the grand total gets the size and the weight. */
.ticket-totals-row.grand {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  align-items: baseline;
  margin: 9px 0 2px;
  padding-top: 10px;
  border-top: 2px solid var(--border-strong);
}
.ticket-totals-row.promo-row { color: var(--leaf-500); font-weight: 700; }

/* ---------- Promo code entry (ticket panel) ---------- */
.promo-entry { display: flex; gap: 8px; margin-bottom: 10px; }
.promo-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* iOS zooms the whole page on focus below 16px. Do not shrink. */
  text-transform: uppercase;
}
.promo-input:focus { outline: none; border-color: var(--accent); }
.promo-input::placeholder { text-transform: none; }
.promo-error { color: var(--danger); font-size: 0.78rem; font-weight: 700; margin: -4px 0 10px; }
.promo-row.applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(106, 153, 85, 0.12);
  border: 1px solid var(--leaf-500);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 10px;
}
.promo-applied-info { display: flex; flex-direction: column; gap: 1px; }
.promo-applied-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem; color: var(--leaf-500); }
.promo-applied-code { font-size: 0.72rem; color: var(--text-soft); }
.promo-remove-btn {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
}
.promo-remove-btn:hover { text-decoration: underline; }
.ticket-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ticket-actions-full { grid-column: 1 / -1; }

.pos-btn {
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  min-height: 46px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.pos-btn:active { transform: scale(0.98); }
.pos-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.pos-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The two committing actions carry real weight (color fill + lift) so they are
   never confused with the outline/secondary actions sitting next to them. */
.pos-btn-primary {
  background: var(--coral);
  color: #fff9f3;
  box-shadow: 0 3px 10px rgba(255, 111, 77, 0.4);
  letter-spacing: 0.2px;
}
.pos-btn-primary:hover:not(:disabled) { background: var(--coral-600); box-shadow: 0 5px 16px rgba(255, 111, 77, 0.5); }
.pos-btn-accent { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 3px 10px rgba(18, 128, 143, 0.35); letter-spacing: 0.2px; }
.pos-btn-accent:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 5px 16px rgba(18, 128, 143, 0.45); }
.pos-btn-outline { background: transparent; border: 2px solid var(--border-strong); color: var(--text); }
.pos-btn-outline:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pos-btn-danger { background: transparent; border: 2px solid var(--danger); color: var(--danger); }
.pos-btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.pos-btn-sm { padding: 8px 12px; min-height: 36px; font-size: 0.8rem; border-radius: var(--radius-sm); }

/* ---------- Split checks view ---------- */
.split-banner {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.82rem;
  color: var(--text-soft);
  margin: 0 14px 10px;
}
.split-checks-list { padding: 0 14px; display: grid; gap: 8px; }
.split-check-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
}
.split-check-chip.paid { border-color: var(--leaf-500); background: rgba(106,153,85,0.12); }
.split-check-chip-label { font-family: var(--font-heading); font-weight: 600; }
.split-check-chip-sub { font-size: 0.72rem; color: var(--text-soft); }
.split-check-chip-amount { font-family: var(--font-heading); font-weight: 700; }
.split-paid-tag { font-size: 0.68rem; font-weight: 700; color: var(--leaf-500); text-transform: uppercase; }

/* ---------- Generic modal shell ---------- */
.pos-modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,20,24,0.55); z-index: 900;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.pos-modal-backdrop.visible { opacity: 1; pointer-events: auto; }
.pos-modal {
  position: fixed; inset: 0; z-index: 901; display: flex; align-items: center; justify-content: center;
  padding: 16px;
  /* Keep the panel clear of the notch and the home indicator. */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.pos-modal.open { opacity: 1; pointer-events: auto; }
.pos-modal-panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh; /* 90vh overshoots the real viewport on iOS Safari */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 26px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.pos-modal-panel.wide { max-width: 760px; }
.pos-modal-close {
  position: absolute; top: 8px; right: 8px; background: none; border: none; cursor: pointer;
  font-size: 1.25rem; color: var(--text-soft); width: 44px; height: 44px; border-radius: var(--radius-full);
}
.pos-modal-close:hover { background: var(--surface-2); }
.pos-modal-kicker { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.72rem; color: var(--coral); font-weight: 700; margin-bottom: 4px; }
.pos-modal-title { font-size: 1.35rem; margin-bottom: 4px; }
.pos-modal-sub { color: var(--text-soft); font-size: 0.88rem; margin-bottom: 16px; }

/* Order setup */
.setup-options { display: grid; gap: 12px; margin: 16px 0; }
.setup-option {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-md);
  border: 2px solid var(--border); background: var(--surface-2); cursor: pointer; text-align: left;
}
.setup-option.selected { border-color: var(--accent); background: rgba(26,163,172,0.08); }
.setup-option-icon { font-size: 1.6rem; }
.setup-option-label { font-family: var(--font-heading); font-weight: 600; }
.setup-option-sub { font-size: 0.78rem; color: var(--text-soft); }
.setup-detail { margin-top: 10px; }
.setup-detail label { display: block; font-weight: 700; font-size: 0.82rem; margin-bottom: 6px; }
.setup-detail input, .setup-detail select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 1rem; font-family: inherit;
}

/* Modifier modal */
.mod-group { margin-bottom: 16px; }
.mod-group-label { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.mod-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-option {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--radius-full);
  border: 2px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 0.86rem; font-weight: 600;
}
.mod-option.selected { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.mod-option .delta-tag { font-size: 0.74rem; opacity: 0.85; }
.mod-open-price { margin-bottom: 16px; }
.mod-open-price label { display: block; font-weight: 700; font-size: 0.82rem; margin-bottom: 6px; }
.mod-open-price input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 1.1rem; font-family: var(--font-heading);
}
.mod-instructions textarea {
  width: 100%; min-height: 64px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-family: inherit;
  font-size: 16px; /* iOS zooms the whole page on focus below 16px. Do not shrink. */
  resize: vertical;
}
.mod-qty-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; }
.mod-qty { display: flex; align-items: center; gap: 12px; }
.mod-qty-btn {
  width: 38px; height: 38px; border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  background: var(--surface-2); font-size: 1.2rem; font-weight: 700; cursor: pointer;
}
.mod-qty-value { font-family: var(--font-heading); font-size: 1.2rem; min-width: 24px; text-align: center; }
.mod-live-total { font-family: var(--font-heading); font-size: 1.3rem; }
.mod-confirm-row { display: flex; gap: 10px; margin-top: 10px; }
.mod-confirm-row .pos-btn { flex: 1; }

/* Split setup modal */
.split-mode-row { display: flex; gap: 10px; margin-bottom: 18px; }
.split-mode-row .pos-btn { flex: 1; }
.split-item-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.split-item-table th, .split-item-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: center; }
.split-item-table th:first-child, .split-item-table td:first-child { text-align: left; }
.split-item-name { font-weight: 700; }
.split-item-mods { font-size: 0.72rem; color: var(--text-soft); font-weight: 400; }
.split-cell-input {
  width: 52px; min-height: 44px; padding: 6px; text-align: center; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-family: inherit;
  font-size: 16px; /* iOS zooms the whole page on focus below 16px. Do not shrink. */
}
.split-unassigned { font-size: 0.78rem; font-weight: 700; }
.split-unassigned.zero { color: var(--leaf-500); }
.split-unassigned.pending { color: var(--coral); }
.split-add-check { margin: 12px 0; }
.split-even-row { display: flex; align-items: center; gap: 14px; margin: 18px 0; }

/* Receipt modal */
.receipt-lines { margin: 14px 0; }
.receipt-line { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.receipt-line-mods { font-size: 0.74rem; color: var(--text-soft); padding-left: 10px; }
.receipt-totals { margin-top: 10px; }
.receipt-disclaimer {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(255,111,77,0.1);
  border: 1px solid rgba(255,111,77,0.3);
  font-size: 0.85rem;
}
.receipt-disclaimer strong { display: block; margin-bottom: 4px; }

.pos-toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--sand-50); padding: 12px 20px; border-radius: var(--radius-full);
  font-weight: 700; font-size: 0.88rem; box-shadow: var(--shadow-lg); z-index: 950;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.pos-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Mobile ticket toggle ---------- */
.pos-mobile-toggle {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--accent); color: var(--accent-contrast);
  border: none;
  /* Sits on the screen edge, so pad past the home indicator. Height is pinned
     (not min-height) so the ticket drawer can park exactly on top of it. */
  height: calc(var(--pos-toggle-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 20px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  justify-content: space-between; align-items: center; cursor: pointer;
}

/* ---------- Touch targets ----------
   Applied by input type rather than by width, so the iPad register gets the
   same 44px minimums as the phone while a desktop mouse keeps the dense look. */
@media (pointer: coarse) {
  .ticket-qty-btn { width: 44px; height: 44px; font-size: 1.15rem; }
  .mod-qty-btn { width: 44px; height: 44px; }
  .ticket-line-remove { min-height: 44px; padding: 6px 12px; }
  .mod-option { min-height: 44px; }
  .pos-cat-btn { min-height: 48px; }
  .promo-remove-btn { min-height: 44px; padding: 4px 10px; }
  .pos-btn-sm { min-height: 44px; }
  .split-check-chip { min-height: 56px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* The ticket becomes a drawer over the grid. It stops ABOVE the fixed toggle
     bar rather than running to bottom:0 under it: the bar outranks the drawer
     on z-index, so a full-height drawer put "Close & Pay" underneath the bar
     and made it untappable. */
  .pos-ticket-panel {
    position: fixed; top: 0; right: 0;
    bottom: calc(var(--pos-toggle-h) + env(safe-area-inset-bottom, 0px));
    width: min(400px, 92vw);
    transform: translateX(100%); transition: transform 0.25s ease; box-shadow: -12px 0 40px rgba(0,0,0,0.3);
    z-index: 280;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    overscroll-behavior: contain;
  }
  .pos-ticket-panel.open { transform: translateX(0); }
  .pos-mobile-toggle { display: flex; }
  .pos-item-grid { padding-bottom: calc(var(--pos-toggle-h) + env(safe-area-inset-bottom, 0px) + 20px); }
  /* Many checks must not push the "Start Another Ticket" footer off-screen. */
  .split-checks-list { overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 560px) {
  .pos-item-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .pos-topbar-sub { display: none; }
  .pos-topbar { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .pos-topbar-actions { gap: 8px; }
  .pos-topbar-link { padding: 9px 10px; font-size: 0.76rem; }
  .pos-clock { min-width: 0; font-size: 0.82rem; }
  .pos-main { padding: 10px 10px 0; }
  .pos-item-tile { min-height: 122px; padding: 10px 6px 12px; }
  .pos-item-tile .dish-plate { max-width: 46px; }
  .pos-item-name { font-size: 0.78rem; }

  /* Categories scroll sideways in one row instead of wrapping into a wall of
     buttons that eats the whole screen before a single item is visible. */
  .pos-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-bottom: 10px;
    padding-bottom: 4px;
  }
  .pos-cat-btn { flex-shrink: 0; padding: 10px 14px; font-size: 0.86rem; }

  .pos-modal { padding: 8px; padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .pos-modal-panel { padding: 20px 16px; max-height: 94dvh; }
  .pos-modal-title { font-size: 1.15rem; }
  /* Stack Cancel/Confirm: side by side at 375px they squeeze below 44px wide-ish
     and the labels wrap mid-word. */
  .mod-confirm-row { flex-direction: column-reverse; }
  .mod-confirm-row .pos-btn { width: 100%; }
  .ticket-actions { grid-template-columns: 1fr; }

  /* Split by item: the table scrolls inside its own wrapper so the PAGE never
     scrolls sideways, and the first column stays wide enough to read. */
  .split-item-table { font-size: 0.8rem; }
  .split-item-table th, .split-item-table td { padding: 6px 4px; }
  .split-item-table td:first-child, .split-item-table th:first-child { min-width: 124px; }
  .split-item-table th { white-space: nowrap; }
  .split-mode-row { flex-direction: column; }
  .pos-toast { bottom: calc(var(--pos-toggle-h) + env(safe-area-inset-bottom, 0px) + 16px); width: max-content; max-width: calc(100vw - 32px); }

  /* 44px minimums repeated by WIDTH as well as by pointer type. The
     (pointer: coarse) block above covers touch tablets, but it does not fire in
     a desktop browser emulating a phone, and a phone-width screen wants these
     regardless of what the pointer media query reports. */
  .pos-topbar-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pos-ticket-chip, .pos-ticket-chip-new { min-height: 44px; }
  .ticket-qty-btn { width: 44px; height: 44px; font-size: 1.15rem; }
  .ticket-line-remove { min-height: 44px; padding: 6px 10px; }
  .promo-remove-btn { min-height: 44px; padding: 4px 10px; }
  .promo-apply-btn, .pos-btn-sm { min-height: 44px; }
  .mod-option { min-height: 44px; }
  .mod-qty-btn { width: 44px; height: 44px; }
  .pos-modal-close { width: 44px; height: 44px; }
}