/* ─────────────────────────────────────────────────────────────────────────
   Tenkomori Reservations — Editorial Overhaul
   Ported from Claude Design handoff (April 2026)

   Aesthetic: editorial / printmaking. No glass. No gradients. No drop shadows.
   Hairline rules, sharp corners (radius 0), generous whitespace,
   restrained accent colour. Five palettes + dark theme.

   This file is loaded AFTER each page's inline <style> block, so it
   overrides legacy styling via natural cascade order. Old token names
   (--paper, --ink2, --accent, etc.) are preserved as aliases pointing at
   the new design tokens, so legacy CSS automatically picks up the new
   palette without needing every selector rewritten.
   ───────────────────────────────────────────────────────────────────────── */


/* ═══ TOKENS — base palette (matcha, applied by default) ════════════════ */
:root {
  /* Surfaces */
  --bg: #F7F5EC;
  --bg-alt: #EEEAD8;
  --surface: #FDFBF2;
  --surface-2: #EDE8D0;

  /* Ink */
  --ink: #1F2818;
  --ink-2: #3F4A33;
  --ink-3: #6E7A5E;
  --ink-4: #9CA68B;
  --ink-5: #C8CFB7;

  /* Lines */
  --line: #DDD9C0;
  --line-2: #C9C4A6;

  /* Accent (single restrained accent) */
  --persimmon: #7A8C4D;
  --persimmon-soft: #E8EFD3;
  --persimmon-deep: #4F5E2F;

  /* Secondary palette colors */
  --cherry: #B8554C;
  --apricot: #D8C97E;
  --yuzu: #E2C24A;
  --yuzu-soft: #F4EBC3;
  --sand: #E8E0BC;
  --plum: #7A5C7A;
  --plum-soft: #EDE0ED;
  --olive: #5F7032;
  --olive-soft: #E0E8C8;
  --sky: #5E8AA0;
  --sky-soft: #E0EAF0;
  --gold: #C49A2C;

  /* Status (semantic) */
  --status-seated: var(--olive);
  --status-arriving: var(--gold);
  --status-confirmed: var(--sky);
  --status-late: var(--persimmon-deep);
  --status-finished: var(--ink-3);
  --status-vip: var(--plum);

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "DM Mono", ui-monospace, "SF Mono", monospace;
  --font-mono: "DM Mono", "SF Mono", ui-monospace, monospace;
  --font-jp: "Shippori Mincho", "Noto Serif JP", serif;

  /* Geometry — sharp corners are intentional */
  --radius: 0px;
  --radius-lg: 0px;

  /* Legacy aliases (DO NOT REMOVE — keep legacy CSS working) */
  --paper: var(--bg);
  --paper2: var(--bg-alt);
  --paper3: var(--line);
  --paper4: var(--surface);
  --mist: var(--surface-2);
  --ink2: var(--ink-2);
  --ink3: var(--ink-3);
  --accent: var(--persimmon);
  --accent2: var(--apricot);
  --accent-soft: var(--persimmon-soft);
  --gold-bg: var(--yuzu-soft);
  --green: var(--olive);
  --green-bg: var(--olive-soft);
  --amber: var(--gold);
  --amber-bg: var(--yuzu-soft);
  --red: var(--cherry);
  --red-bg: var(--persimmon-soft);
  --purple: var(--plum);
  --purple-bg: var(--plum-soft);
  --bento-rose: var(--cherry);
  --bento-cherry: var(--cherry);
  --bento-apricot: var(--apricot);
  --bento-yuzu: var(--yuzu);
  --bento-sand: var(--sand);
  --bento-plum: var(--plum);
  --bento-olive: var(--olive);
  --serif: var(--font-display);
  --mono: var(--font-mono);
}


/* ═══ PALETTES ══════════════════════════════════════════════════════════ */

html[data-palette="tenkomori"] {
  --bg: #FFF8EF; --bg-alt: #F7ECDE; --surface: #FFFDF8; --surface-2: #F8EAD8;
  --ink: #221813; --ink-2: #5A4439; --ink-3: #937466; --ink-4: #B39A89; --ink-5: #D2C2B0;
  --line: #ECD7C4; --line-2: #DCC4AC;
  --persimmon: #D35C2F; --persimmon-soft: #FFF0DF; --persimmon-deep: #B8464D;
  --cherry: #8F2F38; --apricot: #F2B37F; --yuzu: #F0C663; --yuzu-soft: #FFF1CF;
  --sand: #F7E2CA; --plum: #6E4B5E; --plum-soft: #F8EFF7;
  --olive: #5D6D43; --olive-soft: #EEF5E6; --sky: #2F6F9F; --sky-soft: #EEF7FF; --gold: #D6952F;
}

html[data-palette="matcha"] {
  --bg: #F7F5EC; --bg-alt: #EEEAD8; --surface: #FDFBF2; --surface-2: #EDE8D0;
  --ink: #1F2818; --ink-2: #3F4A33; --ink-3: #6E7A5E; --ink-4: #9CA68B; --ink-5: #C8CFB7;
  --line: #DDD9C0; --line-2: #C9C4A6;
  --persimmon: #7A8C4D; --persimmon-soft: #E8EFD3; --persimmon-deep: #4F5E2F;
  --cherry: #B8554C; --apricot: #D8C97E; --yuzu: #E2C24A; --yuzu-soft: #F4EBC3;
  --sand: #E8E0BC; --plum: #7A5C7A; --plum-soft: #EDE0ED;
  --olive: #5F7032; --olive-soft: #E0E8C8; --sky: #5E8AA0; --sky-soft: #E0EAF0; --gold: #C49A2C;
}

html[data-palette="sumi"] {
  --bg: #FAFAF7; --bg-alt: #EFEFEC; --surface: #FFFFFF; --surface-2: #F0EFEB;
  --ink: #0E0E0C; --ink-2: #3A3A36; --ink-3: #6E6E68; --ink-4: #9C9C95; --ink-5: #CECEC8;
  --line: #E2E2DC; --line-2: #CFCFC8;
  --persimmon: #0E0E0C; --persimmon-soft: #EFEFEC; --persimmon-deep: #0E0E0C;
  --cherry: #8A1E1E; --apricot: #D8D8CC; --yuzu: #B89E2C; --yuzu-soft: #F0EAD0;
  --sand: #E8E6DC; --plum: #3A3A36; --plum-soft: #EFEFEC;
  --olive: #3F4A33; --olive-soft: #E2E5D8; --sky: #2A4A6A; --sky-soft: #E0E8F0; --gold: #9C7A18;
}

html[data-palette="sakura"] {
  --bg: #FFF6F2; --bg-alt: #F8E6E0; --surface: #FFFCFA; --surface-2: #F5E2DC;
  --ink: #2A1820; --ink-2: #5A3A48; --ink-3: #90707A; --ink-4: #B5969D; --ink-5: #D6BFC4;
  --line: #EDD4D2; --line-2: #DEBCBC;
  --persimmon: #C04068; --persimmon-soft: #FCE0E8; --persimmon-deep: #8A2848;
  --cherry: #7A1F40; --apricot: #F0B0BC; --yuzu: #E89E78; --yuzu-soft: #FCE0CC;
  --sand: #F4D8D4; --plum: #6E3A5E; --plum-soft: #F2DEEC;
  --olive: #7A6242; --olive-soft: #EFE7D6; --sky: #7A6092; --sky-soft: #ECE2F2; --gold: #C0894A;
}

html[data-palette="shoyu"] {
  --bg: #14100C; --bg-alt: #1C1712; --surface: #1E1814; --surface-2: #28211B;
  --ink: #F2E8D8; --ink-2: #D4C4AE; --ink-3: #9A8770; --ink-4: #6B5A48; --ink-5: #4A3D30;
  --line: #2A2218; --line-2: #3A2D22;
  --persimmon: #E07A3E; --persimmon-soft: #3A2014; --persimmon-deep: #C4582B;
  --cherry: #9C3838; --apricot: #D8A468; --yuzu: #D4B048; --yuzu-soft: #2E2516;
  --sand: #2A2218; --plum: #A084A8; --plum-soft: #2A1F2A;
  --olive: #8FA378; --olive-soft: #1F2818; --sky: #7AAAD0; --sky-soft: #16242E; --gold: #D4A028;
}


/* ═══ DARK THEME OVERRIDE (universal across non-shoyu palettes) ════════ */
html[data-theme="dark"]:not([data-palette="shoyu"]) {
  --bg: #16110C;
  --bg-alt: #1C1610;
  --surface: #1C1610;
  --surface-2: #251D14;
  --ink: #F2E8D8;
  --ink-2: #D4C4AE;
  --ink-3: #9A8770;
  --ink-4: #6B5A48;
  --ink-5: #4A3D30;
  --line: #2A2218;
  --line-2: #3A2D22;
  --persimmon-soft: #3A1F12;
  --olive-soft: #1F2818;
  --yuzu-soft: #2E2516;
  --sky-soft: #16242E;
  --plum-soft: #2A1F2A;
  --sand: #2A2218;
}


/* ═══ BASE / RESET ══════════════════════════════════════════════════════ */
html, body {
  background: var(--bg) !important;
  color: var(--ink);
}
body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image: none !important;
}

/* Kill legacy radial-gradient body backgrounds */
body::before, body::after { display: none !important; }


/* ═══ SHELL ═════════════════════════════════════════════════════════════ */
.app {
  grid-template-columns: 220px 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  height: 100vh;
  background: var(--bg);
}

.sidebar {
  background: var(--bg-alt) !important;
  border: 0 !important;
  border-right: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 0 14px !important;
  overflow: hidden;
}
.sidebar::before, .sidebar::after { display: none !important; }

.main {
  background: var(--bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

.topbar {
  background: var(--bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--line-2) !important;
  padding: 18px 32px !important;
}

.content { padding: 28px 32px 40px !important; }

.page-title {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.page-title::after { display: none !important; }

.crumb {
  font-size: 9.5px;
  color: var(--ink-3);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.topbar-title-block { display: flex; flex-direction: column; min-width: 0; }
.topbar-spacer { flex: 1; }

.service-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  font-size: 11px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-mono);
  border-radius: 0;
}
.service-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--olive);
  display: inline-block;
}
.service-dot.lunch  { background: var(--gold); }
.service-dot.closed { background: var(--ink-4); }

.icon-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--line-2);
  background: transparent;
  display: grid; place-items: center;
  color: var(--ink-2);
  border-radius: 0;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink); }


/* ═══ LOGO / BRAND ══════════════════════════════════════════════════════ */
.logo {
  padding: 0 22px 22px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 14px;
  background: transparent !important;
}
.logo-name {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05;
  color: var(--ink) !important;
  text-shadow: none !important;
}
.logo-sub {
  font-size: 9px !important;
  color: var(--persimmon) !important;
  text-transform: uppercase;
  letter-spacing: 0.18em !important;
  margin-top: 4px;
  font-weight: 500;
}


/* ═══ NAV ═══════════════════════════════════════════════════════════════ */
.nav { padding: 4px 0 !important; }

.nav-section {
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: 0.18em !important;
  color: var(--ink-3) !important;
  padding: 18px 22px 6px !important;
  font-weight: 500;
}

.nav-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 8px 22px !important;
  font-size: 12.5px !important;
  color: var(--ink-2) !important;
  cursor: pointer;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  letter-spacing: 0.01em;
  transition: color .12s, border-color .12s, background .12s;
}
.nav-item:hover {
  color: var(--ink) !important;
  background: rgba(0,0,0,.03) !important;
  transform: none !important;
}
html[data-theme="dark"] .nav-item:hover,
html[data-palette="shoyu"] .nav-item:hover {
  background: rgba(255,255,255,.04) !important;
}
.nav-item.active {
  color: var(--persimmon) !important;
  background: var(--persimmon-soft) !important;
  border-left-color: var(--persimmon) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.nav-icon { width: 16px; flex-shrink: 0; }

.sidebar-bottom {
  padding: 14px 22px 0 !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}

.venue-status {
  background: transparent !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  padding: 5px 10px !important;
  color: var(--ink-2) !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
}
.status-dot { background: var(--olive) !important; }
.nav-utility-link { color: var(--ink-3) !important; font-family: var(--font-mono); }
.nav-utility-link:hover { color: var(--ink) !important; }
.pending-badge, .waitlist-badge {
  background: var(--persimmon) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--font-mono);
  font-weight: 500;
}


/* ═══ BUTTONS ═══════════════════════════════════════════════════════════ */
.btn {
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 14px !important;
  border: 1px solid transparent !important;
  transition: background .12s, border-color .12s, color .12s !important;
}
.btn:hover { transform: none !important; }
.btn:active { transform: none !important; }

.btn-primary {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}
.btn-primary:hover {
  background: var(--persimmon) !important;
  border-color: var(--persimmon) !important;
  color: #fff !important;
}
.btn-primary::after { display: none !important; }

.btn-ghost {
  background: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
.btn-ghost:hover {
  background: transparent !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

.btn-danger {
  background: transparent !important;
  color: var(--cherry) !important;
  border-color: var(--cherry) !important;
}
.btn-danger:hover {
  background: var(--cherry) !important;
  color: #fff !important;
}

.btn-success {
  background: transparent !important;
  color: var(--olive) !important;
  border-color: var(--olive) !important;
}
.btn-success:hover {
  background: var(--olive) !important;
  color: #fff !important;
}

.btn-sm { padding: 5px 10px !important; font-size: 11px !important; }


/* ═══ STAT CARDS ════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-top: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 18px 16px !important;
  position: relative;
  overflow: visible !important;
  animation: none !important;
}
.stat-card::before { display: none !important; }
.stat-card::after { display: none !important; }
.stat-card:hover { transform: none !important; box-shadow: none !important; }
.stat-card[data-tone="calm"] { border-top-color: var(--olive) !important; }
.stat-card[data-tone="alert"] { border-top-color: var(--gold) !important; animation: none !important; }
.stat-card[data-tone="muted"] { border-top-color: var(--ink-4) !important; }

.stat-val {
  font-family: var(--font-display) !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
}
.stat-label {
  font-size: 9.5px !important;
  color: var(--ink-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  font-weight: 500;
  margin-top: 6px !important;
}
.stat-sub { font-size: 11px !important; color: var(--ink-3) !important; margin-top: 8px !important; }


/* ═══ DASHBOARD HERO ════════════════════════════════════════════════════ */
.dashboard-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
@media (max-width: 980px) { .dashboard-hero { grid-template-columns: 1fr; } }
.dashboard-hero .card,
.dashboard-hero-greeting,
.dashboard-hero-service {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 28px !important;
  position: relative;
  overflow: hidden;
}
.card-pad-lg { padding: 28px; }

/* Decorative JP character */
.jp-deco {
  position: absolute;
  font-family: var(--font-jp);
  color: var(--ink);
  opacity: 0.04;
  font-size: 220px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  right: -30px;
  top: -50px;
}


/* ═══ DASHBOARD PANELS ══════════════════════════════════════════════════ */
.dashboard-panel,
.dashboard-panel-tight {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px !important;
  animation: none !important;
}
.dashboard-panel::after, .dashboard-panel-tight::after { display: none !important; }
.dashboard-panel-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.dashboard-panel-sub { color: var(--ink-3) !important; font-size: 11px !important; }
.dashboard-chip {
  background: transparent !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  color: var(--ink-2) !important;
  padding: 5px 10px !important;
  font-family: var(--font-mono);
}
.dashboard-chip:hover { background: var(--bg-alt) !important; }
.dashboard-chip strong { color: var(--ink) !important; }


/* ═══ TABS ══════════════════════════════════════════════════════════════ */
.tabs {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  width: fit-content;
}
.tab {
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ink-3) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  padding: 7px 14px !important;
  border-right: 1px solid var(--line) !important;
  letter-spacing: 0.04em;
  font-weight: 500;
  box-shadow: none !important;
  min-height: auto !important;
}
.tab:last-child { border-right: 0 !important; }
.tab.active {
  background: var(--ink) !important;
  color: var(--bg) !important;
  box-shadow: none !important;
}


/* ═══ TABLES ════════════════════════════════════════════════════════════ */
.table-wrap {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  overflow-x: auto;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th {
  text-align: left;
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.14em !important;
  color: var(--ink-3) !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--line-2) !important;
}
.data-table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  vertical-align: middle;
  color: var(--ink) !important;
}
.data-table tr:last-child td { border-bottom: none !important; }
.data-table tr:hover td { background: var(--bg-alt) !important; }


/* ═══ BADGES ════════════════════════════════════════════════════════════ */
.badge {
  border-radius: 0 !important;
  padding: 2px 8px !important;
  font-size: 10.5px !important;
  font-weight: 500;
  font-family: var(--font-mono) !important;
  text-transform: lowercase !important;
  letter-spacing: 0.04em !important;
  border: 1px solid transparent;
}
.badge-pending   { background: var(--yuzu-soft) !important; color: var(--gold) !important; }
.badge-confirmed { background: var(--sky-soft) !important; color: var(--sky) !important; }
.badge-cancelled { background: var(--surface-2) !important; color: var(--ink-3) !important; }
.badge-rejected  { background: var(--persimmon-soft) !important; color: var(--persimmon-deep) !important; }
.badge-noshow    { background: var(--plum-soft) !important; color: var(--plum) !important; }
.badge-expired   { background: var(--surface-2) !important; color: var(--ink-3) !important; }
.badge-completed { background: var(--surface-2) !important; color: var(--ink-3) !important; }
.badge-seated    { background: var(--olive-soft) !important; color: var(--olive) !important; }
.returning-dot   { background: var(--sky) !important; border-radius: 0 !important; }


/* ═══ MODALS ════════════════════════════════════════════════════════════ */
.modal-overlay {
  background: rgba(20, 16, 12, 0.6) !important;
  backdrop-filter: none !important;
}
.modal {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.modal-title {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: 22px !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
}
.modal-close { color: var(--ink-3) !important; border-radius: 0 !important; }
.modal-close:hover { color: var(--ink) !important; background: transparent !important; }
.modal-footer { border-top: 1px solid var(--line) !important; }


/* ═══ FORMS ═════════════════════════════════════════════════════════════ */
.form-input, .form-select, .form-textarea, input[type="text"].form-input,
input[type="email"].form-input, input[type="tel"].form-input,
input[type="number"].form-input, input[type="time"].form-input,
input[type="date"].form-input, input[type="password"].form-input,
select.form-input, textarea.form-input {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  padding: 9px 12px !important;
  outline: none;
  box-shadow: none !important;
  transition: border-color .12s !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
input.form-input:focus, select.form-input:focus, textarea.form-input:focus {
  border-color: var(--ink) !important;
  box-shadow: none !important;
}
.form-label {
  font-size: 9.5px !important;
  color: var(--ink-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  font-weight: 500;
}
.form-textarea { resize: vertical; min-height: 80px; }


/* Specialized inputs */
.pax-btn, .section-pref-btn, .time-btn, .preset-btn {
  border-radius: 0 !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  box-shadow: none !important;
  transition: background .12s, border-color .12s !important;
}
.pax-btn:hover, .section-pref-btn:hover, .time-btn:hover, .preset-btn:hover {
  background: var(--bg-alt) !important;
  border-color: var(--ink) !important;
  transform: none !important;
}
.pax-btn.selected, .section-pref-btn.selected,
.time-btn.selected, .preset-btn.selected,
.pax-btn[aria-pressed="true"], .section-pref-btn[aria-pressed="true"],
.time-btn[aria-pressed="true"], .preset-btn[aria-pressed="true"] {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

.search-input {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-mono);
}


/* ═══ STAFF / SETTINGS CARDS ════════════════════════════════════════════ */
.staff-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
.staff-card-name { color: var(--ink) !important; }
.staff-card-email, .staff-card-sub { color: var(--ink-3) !important; }
.staff-chip {
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  border: 1px solid var(--line-2) !important;
  letter-spacing: 0.04em;
}
.staff-chip-admin    { background: var(--sky-soft) !important; color: var(--sky) !important; border-color: transparent !important; }
.staff-chip-frozen   { background: var(--persimmon-soft) !important; color: var(--persimmon-deep) !important; border-color: transparent !important; }
.staff-chip-revoked  { background: var(--surface-2) !important; color: var(--ink-3) !important; border-color: transparent !important; }
.staff-chip-staff    { background: transparent !important; color: var(--ink-2) !important; }

.settings-section {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px !important;
}
.settings-section:hover { box-shadow: none !important; }

/* Settings tabnav */
.settings-tabnav { padding: 4px 0 8px; }

/* Segmented button group — global */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: 0;
  max-width: 100%;
}
.segmented button {
  padding: 7px 14px;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  border: 0;
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  transition: background .12s, color .12s;
}
.segmented button:last-child { border-right: 0; }
.segmented button:hover { color: var(--ink); background: var(--bg-alt); }
.segmented button.active {
  background: var(--ink);
  color: var(--bg);
}
.settings-title {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}
.settings-copy { color: var(--ink-3) !important; font-size: 12px !important; }
.settings-readonly { color: var(--ink) !important; }
.settings-readonly-muted { color: var(--ink-3) !important; }
.settings-empty { color: var(--ink-3) !important; }
.settings-error { color: var(--cherry) !important; }
.settings-mini-title {
  font-size: 9.5px !important;
  color: var(--ink-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  font-weight: 500;
}
.settings-note {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 14px !important;
}
.settings-note.info { border-left: 2px solid var(--sky) !important; }
.settings-note.warn { border-left: 2px solid var(--gold) !important; }
.settings-note.success { border-left: 2px solid var(--olive) !important; }
.divider { background: var(--line) !important; height: 1px !important; }


/* ═══ TOGGLES (custom switches) ═════════════════════════════════════════ */
.toggle .toggle-track,
.settings-switch-track {
  background: var(--line-2) !important;
  border-radius: 0 !important;
}
.toggle input:checked + .toggle-track,
.settings-switch-ui input:checked ~ .settings-switch-track {
  background: var(--persimmon) !important;
}
.toggle .toggle-thumb,
.settings-switch-thumb {
  background: var(--surface) !important;
  border-radius: 0 !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: none !important;
}


/* ═══ ACTION DROPDOWNS / MENUS ══════════════════════════════════════════ */
.action-menu-dropdown {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.action-menu-item { color: var(--ink-2) !important; border-radius: 0 !important; font-family: var(--font-mono) !important; }
.action-menu-item:hover { background: var(--bg-alt) !important; color: var(--ink) !important; }


/* ═══ AVATAR (initial circle, square in editorial) ═════════════════════ */
.avatar {
  width: 30px; height: 30px;
  background: var(--sand);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  flex-shrink: 0;
  border-radius: 0;
  font-family: var(--font-mono);
}

/* Inline tag pill (mono, hairline border) */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  border-radius: 0;
}
.bks-tag-return {
  background: var(--sky-soft) !important;
  color: var(--sky) !important;
  border: 0 !important;
}
.badge-vip {
  background: var(--plum-soft) !important;
  color: var(--plum) !important;
  border: 0 !important;
}


/* ═══ BOOKINGS FILTER LIST (sidebar with counts) ═══════════════════════ */
.bookings-filter-list {
  display: flex;
  flex-direction: column;
}
.bf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  margin: 0 -12px;
  font-size: 12.5px;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: color .12s, background .12s, border-color .12s;
  width: calc(100% + 24px);
}
.bf-row:hover {
  background: var(--bg-alt);
  color: var(--ink);
}
.bf-row.active {
  background: var(--ink);
  color: var(--bg);
  border-left-color: var(--ink);
}
.bf-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}
.bf-row.active .bf-count { color: var(--bg); opacity: 0.85; }


/* ═══ BOOKINGS DATE HEADER + SEGMENTED VIEW SWITCH ═════════════════════ */
.bookings-date-bar { padding: 0 4px; }
.bookings-view-segmented {
  display: inline-flex !important;
  border: 1px solid var(--line-2) !important;
  background: var(--surface) !important;
  border-radius: 0 !important;
}
.bookings-view-segmented button {
  padding: 7px 14px;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  border: 0;
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  transition: color .12s, background .12s;
}
.bookings-view-segmented button:last-child { border-right: 0; }
.bookings-view-segmented button:hover { color: var(--ink); background: var(--bg-alt); }
.bookings-view-segmented button.active {
  background: var(--ink);
  color: var(--bg);
}


/* ═══ BOOKINGS 2-COL LAYOUT (calendar sidebar + main) ══════════════════ */
.bookings-2col {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1080px) {
  .bookings-2col { grid-template-columns: 1fr; }
  .bookings-sidebar { order: 2; }
  .bookings-main { order: 1; }
}
.bookings-sidebar { min-width: 0; }
/* Stick the entire sidebar (calendar + filter list + New reservation
   button) as a single unit so the filter doesn't scroll away while the
   calendar stays. max-height + overflow-y let the sidebar scroll
   internally on shorter viewports — the user can still reach the
   "New reservation" button if their sidebar is taller than the viewport. */
@media (min-width: 1081px) {
  .bookings-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    /* Hide scrollbar visually unless content overflows; the inner cards
       have their own padding so it stays readable. */
    scrollbar-width: thin;
  }
}
.bookings-sidebar .bookings-cal-card {
  padding: 18px;
}
.bookings-cal-card .cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.bookings-cal-card .cal-month {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bookings-cal-card .cal-nav {
  width: 28px; height: 28px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  font-size: 16px;
  cursor: pointer;
  display: grid; place-items: center;
  border-radius: 0;
  transition: color .12s, border-color .12s;
}
.bookings-cal-card .cal-nav:hover { color: var(--ink); border-color: var(--ink); }

.bookings-cal-card .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.bookings-cal-card .cal-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 12px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  font-family: var(--font-mono);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  padding: 0;
  transition: background .1s;
}
.bookings-cal-card .cal-cell-header {
  background: var(--surface);
  cursor: default;
  font-size: 9.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.bookings-cal-card .cal-cell:not(.cal-cell-header):hover { background: var(--bg-alt); }
.bookings-cal-card .cal-cell.muted { color: var(--ink-5); background: var(--bg-alt); }
.bookings-cal-card .cal-cell.today { font-weight: 600; color: var(--persimmon); }
.bookings-cal-card .cal-cell.in-range { background: var(--persimmon-soft); color: var(--ink); }
.bookings-cal-card .cal-cell.range-start,
.bookings-cal-card .cal-cell.range-end {
  background: var(--ink); color: var(--bg);
}
.bookings-cal-card .cal-cell.pending {
  background: var(--ink); color: var(--bg);
}
.bookings-cal-card .cal-cell.has-bookings::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px;
  background: var(--persimmon);
}
.bookings-cal-card .cal-cell.range-start.has-bookings::after,
.bookings-cal-card .cal-cell.range-end.has-bookings::after,
.bookings-cal-card .cal-cell.pending.has-bookings::after { background: var(--bg); }

.bookings-cal-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
}
.preset-btn-mini {
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 0;
  transition: color .1s, border-color .1s, background .1s;
}
.preset-btn-mini:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.bookings-cal-hint {
  font-size: 10.5px;
  margin-top: 12px;
  line-height: 1.45;
}


/* ═══ FLOOR 3-COL LAYOUT (list / canvas / detail-form) ═════════════════ */
.floor-3col {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 16px;
  align-items: start;
}
.floor-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.floor-col-center { min-height: 0; }
@media (max-width: 1280px) {
  .floor-3col {
    grid-template-columns: 280px 1fr 280px;
    gap: 12px;
  }
}
@media (max-width: 1080px) {
  .floor-3col {
    grid-template-columns: 1fr;
  }
  .floor-col-left, .floor-col-right { order: 2; }
  .floor-col-center { order: 1; }
}
/* Tighten the legacy live-tools 2-col grid (no longer used as a row) */
.floor-3col .floor-live-tools { display: contents; }


/* ═══ FLOOR PLAN ════════════════════════════════════════════════════════ */
/* Canvas backdrop: hairline grid + faint JP zone watermarks (本館 MAIN ROOM,
   厨房 KITCHEN). Flat — no gradient, no rounded corners. */
.floor-stage-canvas {
  background: var(--bg-alt) !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  position: relative;
}
/* Static MAIN ROOM watermark — kept as a faint background-only label.
   The Kitchen marker is now user-placed via the decor editor (drag it from
   the Decor palette in Edit layout mode). */
.floor-stage-canvas::before {
  content: "本館 · MAIN ROOM";
  position: absolute;
  top: 14px; left: 18px;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.32em;
  color: var(--ink-5);
  font-size: 11px;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.45;
  z-index: 0;
}

/* Floor tile editorial: sharp corners, hairline border, status via accent
   left rule, mono table label, surname as the prominent guest line. */
.floor-tile {
  border-radius: 0 !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  border-left: 2px solid var(--line) !important;
  font-family: var(--font-mono) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: border-color .12s, outline-color .12s !important;
  padding: 6px !important;
}
.floor-tile-name { font-family: var(--font-mono) !important; font-size: 10.5px !important; color: var(--ink-2) !important; letter-spacing: 0.04em !important; }
.floor-tile-cap { font-family: var(--font-mono) !important; font-size: 9px !important; color: var(--ink-4) !important; }
.floor-tile-guest { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0 !important; color: var(--ink) !important; }

.floor-tile.ft-free {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  border-left-color: var(--olive) !important;
}
.floor-tile.ft-free .floor-tile-guest { display: none !important; } /* drop the loud green "Free" tag */
.floor-tile.ft-occupied {
  background: var(--persimmon-soft) !important;
  border-color: var(--persimmon-soft) !important;
  border-left-color: var(--persimmon) !important;
}
.floor-tile.ft-occupied .floor-tile-guest { color: var(--persimmon-deep, var(--persimmon)) !important; }
.floor-tile.ft-pending {
  background: var(--yuzu-soft, var(--amber-bg)) !important;
  border-color: var(--yuzu-soft, var(--amber-bg)) !important;
  border-left-color: var(--gold, var(--amber)) !important;
}
.floor-tile.ft-pending .floor-tile-guest { color: var(--gold, var(--amber)) !important; }
.floor-tile:hover { outline: 1px solid var(--persimmon) !important; outline-offset: 1px; }

/* Recent walk-ins audit list: flat hairline cards (was rounded paper bubbles). */
.floor-audit-item {
  border: 1px solid var(--line-2) !important;
  border-left: 2px solid var(--olive) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  padding: 10px 12px !important;
}
.floor-audit-title { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 12.5px !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.floor-audit-meta { font-family: var(--font-mono) !important; font-size: 10.5px !important; color: var(--ink-3) !important; }

/* Dashboard grid stacks into rows below ~1400px. The two-column layout was
   squashing the bookings table on the left and the activity feed on the
   right at every realistic browser width — letting them go full-width and
   stack vertically gives both panels real breathing room. */
@media (max-width: 1400px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .dashboard-grid > .dashboard-stack { display: contents; }
}

/* Service progress card: prevent the badge from clipping when the card is
   narrow. Wrap the row, allow the windows grid to scroll horizontally as
   a fallback when many seatings are configured. */
.dashboard-hero-service .row.between { flex-wrap: wrap; gap: 8px; }
.dashboard-hero-service .badge { white-space: nowrap; flex: 0 0 auto; }
#dash-service-windows { min-width: 0; }

/* Tonight's briefing alerts (dashboard) + Service flags (analytics) */
.briefing-list { display: flex; flex-direction: column; }
.briefing-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  border-left: 2px solid var(--line);
  align-items: center;
  background: var(--surface);
  transition: background .12s;
}
.briefing-row:hover { background: var(--bg-alt); }
.briefing-row-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.briefing-row-msg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.35;
}
.briefing-row-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.briefing-row-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 2px 7px;
  background: var(--bg);
}
.briefing-row-vip      { border-left-color: var(--persimmon); }
.briefing-row-vip      .briefing-row-tag { color: var(--persimmon); border-color: var(--persimmon); }
.briefing-row-allergy  { border-left-color: var(--persimmon); }
.briefing-row-allergy  .briefing-row-tag { color: var(--persimmon); border-color: var(--persimmon); background: var(--persimmon-soft); }
.briefing-row-access   { border-left-color: var(--sky, #5e7da6); }
.briefing-row-access   .briefing-row-tag { color: var(--sky, #5e7da6); border-color: var(--sky, #5e7da6); }
.briefing-row-occasion { border-left-color: var(--gold, #c79a3a); }
.briefing-row-occasion .briefing-row-tag { color: var(--gold, #c79a3a); border-color: var(--gold, #c79a3a); }
.briefing-row-regular  { border-left-color: var(--olive, #6b7a4f); }
.briefing-row-regular  .briefing-row-tag { color: var(--olive, #6b7a4f); border-color: var(--olive, #6b7a4f); }
.briefing-row-deposit  { border-left-color: var(--ink); }

/* Iconic briefing variant — drops the left rule, uses a 28×28 surface-2 icon box
   on the leading edge with the colour mapped from the same kind class. */
.briefing-list-iconic { gap: 0; }
.briefing-row-iconic {
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  border-left: 0;
  background: transparent;
}
.briefing-row-iconic + .briefing-row-iconic {
  border-top: 1px solid var(--line);
}
.briefing-row-iconic:hover { background: var(--bg-alt); }
.briefing-row-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--surface-2, var(--bg-alt));
  color: var(--ink);
  flex-shrink: 0;
}
.briefing-row-iconic .briefing-row-msg { font-size: 13px; font-family: var(--font-display); font-weight: 500; }
.briefing-row-iconic .briefing-row-meta { font-size: 11px; }
.briefing-row-iconic .briefing-row-time {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.briefing-row-iconic.briefing-row-vip      .briefing-row-icon { color: var(--plum, #6f4f6b); }
.briefing-row-iconic.briefing-row-allergy  .briefing-row-icon { color: var(--persimmon, #c4633a); }
.briefing-row-iconic.briefing-row-occasion .briefing-row-icon { color: var(--sage, #6b8a6e); }
.briefing-row-iconic.briefing-row-access   .briefing-row-icon { color: var(--sky, #5e7da6); }
.briefing-row-iconic.briefing-row-regular  .briefing-row-icon { color: var(--olive, #6b7a4f); }
.briefing-row-iconic.briefing-row-deposit  .briefing-row-icon { color: var(--gold, #c79a3a); }

/* Service flags KPI grid (analytics) — vertical colour bar + label/trend + value */
.service-flags-grid {
  display: grid;
  gap: 0;
}
.service-flag-row {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.service-flag-row:last-child { border-bottom: 0; }
.service-flag-bar {
  width: 4px; height: 32px;
  display: block;
}
.service-flag-meta { min-width: 0; }
.service-flag-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.service-flag-trend {
  font-size: 10.5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.service-flag-value {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* Topbar service-pill live state — small ring pulse for active service */
.service-dot.pulse {
  position: relative;
  background: var(--olive);
  box-shadow: 0 0 0 0 rgba(107, 122, 79, 0.5);
  animation: service-dot-pulse 2.4s ease-out infinite;
}
@keyframes service-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(107, 122, 79, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(107, 122, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(107, 122, 79, 0); }
}
.service-pill[data-service="closed"] { color: var(--ink-3); }
.service-pill[data-service="lunch"]  { color: var(--ink); }
.service-pill[data-service="dinner"] { color: var(--ink); }

.briefing-empty {
  padding: 18px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Guest mix 3-card grid (analytics) */
.guest-mix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 768px) { .guest-mix-grid { grid-template-columns: 1fr; } }
.guest-mix-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  background: var(--surface);
  padding: 18px 20px;
}
.guest-mix-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.guest-mix-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.guest-mix-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.guest-mix-new        { border-left-color: var(--olive, #6b7a4f); }
.guest-mix-returning  { border-left-color: var(--sky, #5e7da6); }
.guest-mix-vip        { border-left-color: var(--persimmon); }

/* Tonight's Book grouped list (left column) */
.floor-tonight-card .floor-surface-head { flex-wrap: wrap; gap: 10px; }
.floor-tonight-service { margin-left: auto; }
.floor-tonight-search { padding: 10px 12px 4px; }
.floor-tonight-search .form-input {
  width: 100%;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 7px 10px;
}
.floor-bk-group { padding: 6px 0 4px; border-top: 1px solid var(--line-2); }
.floor-bk-group:first-child { border-top: 0; }
.floor-bk-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 12px 4px;
}
.floor-bk-group-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.floor-bk-group-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.floor-bk-group-list { display: flex; flex-direction: column; }
.floor-bk-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  cursor: grab;
  transition: background .12s;
  align-items: start;
}
.floor-bk-row:hover { background: var(--bg-alt); }
.floor-bk-row.is-seated .floor-bk-row-name { color: var(--olive); }
.floor-bk-row-time {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
}
.floor-bk-row-time-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.floor-bk-row-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--persimmon);
  border: 1px solid var(--persimmon);
  padding: 1px 5px;
  line-height: 1.2;
}
.floor-bk-row-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.floor-bk-row-avatar {
  width: 24px; height: 24px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  flex: 0 0 24px;
}
.floor-bk-row-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floor-bk-row-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 4px;
  margin-left: 32px;
  line-height: 1.45;
}
.floor-bk-row-table .chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.floor-bk-totals {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}
.floor-bk-totals-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.floor-bk-totals-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* Selected-table card (right column, above walk-in form) */
.floor-tile.floor-tile-selected {
  outline: 2px solid var(--persimmon) !important;
  outline-offset: 1px !important;
  z-index: 2;
}
.floor-selected-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.floor-selected-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.floor-selected-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.floor-selected-guest {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 12px;
}
.floor-selected-avatar {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  flex: 0 0 36px;
}
.floor-selected-guest-name { font-family: var(--font-display); font-weight: 400; font-size: 14px; color: var(--ink); line-height: 1.3; }
.floor-selected-guest-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.floor-selected-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.floor-selected-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: block;
  margin-bottom: 2px;
}
.floor-selected-value { font-family: var(--font-mono); font-size: 12px; color: var(--ink); letter-spacing: 0.02em; }
.floor-selected-note {
  background: var(--bg-alt);
  border-left: 2px solid var(--gold, var(--amber, #c79a3a));
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 12px;
}
.floor-selected-note .floor-selected-label { display: inline; margin-right: 6px; }
.floor-selected-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  padding: 10px 0;
  border-top: 1px solid var(--line-2);
  margin-bottom: 12px;
}
.floor-selected-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.floor-selected-actions .btn { flex: 1 0 auto; min-width: 90px; justify-content: center; }
.floor-empty-state {
  text-align: center;
  padding: 18px 8px;
  color: var(--ink-3);
}
.floor-empty-state-glyph { font-size: 26px; color: var(--ink-5); line-height: 1; margin-bottom: 8px; font-family: var(--font-mono); }
.floor-empty-state-title { font-family: var(--font-display); font-weight: 400; font-size: 14px; color: var(--ink-2); margin-bottom: 4px; }
.floor-empty-state-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.02em; line-height: 1.5; }

/* Pacing forecast (right column, below walk-in form) */
.floor-pacing-row {
  display: grid;
  grid-template-columns: 44px 1fr 52px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.floor-pacing-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.floor-pacing-bar {
  height: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line-2);
  position: relative;
}
.floor-pacing-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--olive, #6b7a4f);
  transition: width .25s ease;
}
.floor-pacing-fill.over { background: var(--persimmon, #c1440e); }
.floor-pacing-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  text-align: right;
}

/* ── Floor decor (entrance, pass, kitchen, door, wall, label) ────────── */
.floor-decor {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 1px dashed var(--line);
  user-select: none;
  text-align: center;
  padding: 2px;
  z-index: 1;
}
.floor-decor:hover { outline: 1px solid var(--persimmon); outline-offset: 1px; }
.floor-decor-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.fd-entrance {
  border: 1px solid var(--ink-4);
  background: var(--bg);
  color: var(--ink-2);
}
.fd-entrance .floor-decor-label::after { content: ' →'; }
.fd-pass {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-style: italic;
  letter-spacing: 0.1em;
}
.fd-kitchen {
  background-color: var(--bg-alt);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    var(--line-2) 6px 7px
  );
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 11px;
}
.fd-door {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 22px;
  letter-spacing: 0;
  font-weight: 300;
  line-height: 1;
}
.fd-wall {
  background: var(--ink-2);
  border: 0;
  color: transparent;
  height: 8px !important;
  align-self: center;
}
.fd-label {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* Edit-mode palette tile for decor */
.palette-decor {
  border-style: dashed !important;
  border-color: var(--line) !important;
}
.palette-decor .palette-tile-name { text-transform: uppercase; letter-spacing: 0.12em; }

.floor-table {
  border-radius: 0 !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1.5px solid var(--ink) !important;
  font-family: var(--font-mono) !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  transition: outline-color .12s !important;
}
.floor-table:hover { outline: 1px solid var(--persimmon) !important; outline-offset: 2px; transform: none !important; }
.floor-table.selected { outline: 2px solid var(--persimmon) !important; outline-offset: 2px; }
.floor-table.t-seated, .floor-table[data-status="seated"]    { background: var(--olive-soft) !important; border-color: var(--olive) !important; color: var(--olive) !important; }
.floor-table.t-arriving, .floor-table[data-status="arriving"]{ background: var(--yuzu-soft) !important; border-color: var(--gold) !important; color: var(--gold) !important; }
.floor-table.t-confirmed, .floor-table[data-status="confirmed"]{ background: var(--sky-soft) !important; border-color: var(--sky) !important; color: var(--sky) !important; }
.floor-table.t-late, .floor-table[data-status="late"]         { background: var(--persimmon-soft) !important; border-color: var(--persimmon) !important; color: var(--persimmon-deep) !important; }
.floor-table.t-finished, .floor-table[data-status="finished"] { background: var(--surface-2) !important; border-color: var(--ink-5) !important; color: var(--ink-4) !important; }
.floor-table.t-vip, .floor-table[data-status="vip"]           { background: var(--plum-soft) !important; border-color: var(--plum) !important; color: var(--plum) !important; }
.floor-table.t-vacant, .floor-table[data-status="vacant"]     { background: var(--surface) !important; border-color: var(--line-2) !important; color: var(--ink-4) !important; }
.floor-table.round { border-radius: 50% !important; }


/* ═══ MOBILE NAV ════════════════════════════════════════════════════════ */
.mobile-nav {
  background: var(--bg-alt) !important;
  background-image: none !important;
  border-top: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.mobile-nav-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ink-3) !important;
  font-family: var(--font-mono) !important;
}
.mobile-nav-item.active { color: var(--persimmon) !important; background: transparent !important; }
.mobile-menu-overlay { background: rgba(20, 16, 12, 0.6) !important; backdrop-filter: none !important; }
.mobile-menu {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.mobile-menu-item { border-radius: 0 !important; color: var(--ink-2) !important; }
.mobile-menu-item:hover { background: var(--bg-alt) !important; }
.mobile-menu-item.active { color: var(--persimmon) !important; background: var(--persimmon-soft) !important; }


/* ═══ CUSTOMER PAGES (book.html, manage.html, booking-confirm.html, etc.) ═ */
.page-wrap {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--ink);
}
.page-wrap .header {
  background: var(--bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line-2) !important;
  backdrop-filter: none !important;
}
.page-wrap .main, .page-wrap > main { background: transparent !important; }

.card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.step-indicator { background: transparent !important; }
.step-indicator .step,
.step-indicator > div {
  border-radius: 0 !important;
}

/* book.html / manage.html sections */
.section-title, .step-title, h1.title, h2.section-title {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}

.confirm-card, .booking-box, .info-box, .note-box, .summary-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* booking-confirm.html / action.html */
.icon, .confirm-icon {
  background: var(--olive-soft) !important;
  border-radius: 0 !important;
  color: var(--olive) !important;
  box-shadow: none !important;
}


/* ═══ LINKS ═════════════════════════════════════════════════════════════ */
a { color: var(--persimmon); text-decoration: none; transition: color .12s; }
a:hover { color: var(--persimmon-deep); text-decoration: underline; }


/* ═══ KILL LEGACY ANIMATIONS ════════════════════════════════════════════ */
@keyframes adminGlowFloat { 0%, 100% { transform: none; opacity: 0; } }
@keyframes emberPulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: none; } }
@keyframes gentleSweep { 0%, 100% { transform: translateX(-200%) skewX(0); } }
@keyframes adminPanelIn { from { opacity: 0; } to { opacity: 1; } }


/* ═══ NEW UTILITY HOOKS (for any markup we add) ════════════════════════ */
.serif { font-family: var(--font-display) !important; font-weight: 300; letter-spacing: -0.02em; }
.mono  { font-family: var(--font-mono) !important; font-feature-settings: "tnum"; }
.jp    { font-family: var(--font-jp) !important; }
.muted { color: var(--ink-3) !important; }
.row   { display: flex; align-items: center; gap: 12px; }
.col   { display: flex; flex-direction: column; gap: 12px; }
.between { justify-content: space-between; }
.hr    { height: 1px; background: var(--line); border: 0; margin: 16px 0; }


/* ═══ BRAND MARK ════════════════════════════════════════════════════════ */
.brand-mark {
  width: 34px; height: 34px;
  background: var(--ink);
  color: var(--persimmon);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  flex-shrink: 0;
  border-radius: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 400;
  color: var(--ink);
}
.brand-sub {
  font-size: 9px;
  color: var(--persimmon);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 4px;
  font-weight: 500;
}


/* ═══ KPI / STAT TYPOGRAPHY ════════════════════════════════════════════ */
.kpi-label {
  font-size: 9.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
  font-weight: 500;
}
.kpi-spark {
  flex-shrink: 0;
  width: 80px;
  height: 28px;
  display: block;
}
.kpi-spark svg { width: 100%; height: 100%; }
.kpi-value {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 300; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.kpi-delta {
  font-size: 11px;
  color: var(--olive);
  font-weight: 500;
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
}
.kpi-delta.down { color: var(--persimmon-deep); }


/* ═══ GUEST SHELL (book.html, manage.html, booking-confirm.html) ═══════ */
.guest-shell {
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 48px 64px;
}
.guest-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 32px;
  border-radius: 0;
  box-shadow: none;
}


/* ═══ FIELDS / INPUTS (design-spec naming) ═════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 9.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 12px;
  color: var(--ink);
  outline: none;
  transition: border-color .12s;
  font-family: var(--font-sans);
  border-radius: 0;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ink);
}
.textarea { resize: vertical; min-height: 80px; }


/* ═══ TIME GRID (design-spec) ══════════════════════════════════════════ */
.time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.time-grid .time-slot,
.time-grid .time-btn {
  padding: 12px 8px !important;
  text-align: center;
  background: var(--surface) !important;
  font-size: 12px;
  font-family: var(--font-mono) !important;
  color: var(--ink) !important;
  cursor: pointer;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background .12s !important;
}
.time-grid .time-slot:hover,
.time-grid .time-btn:hover { background: var(--bg-alt) !important; transform: none !important; }
.time-grid .time-slot.selected,
.time-grid .time-btn.selected {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.time-grid .time-slot.unavailable, .time-grid .time-slot.unavail,
.time-grid .time-btn.unavailable, .time-grid .time-btn.unavail {
  color: var(--ink-5) !important;
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}
.time-grid .time-slot.popular,
.time-grid .time-btn.popular {
  color: var(--persimmon) !important;
}


/* ═══ DAY GRID (7-day quick selector for guest book.html) ══════════════ */
.day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.day-cell {
  padding: 10px 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-sans);
  border-radius: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.day-cell:hover { border-color: var(--ink); }
.day-cell .day-name {
  font-size: 9.5px; opacity: .55;
  text-transform: uppercase; letter-spacing: .14em;
  font-family: var(--font-mono);
}
.day-cell .day-num {
  font-family: var(--font-display);
  font-size: 18px; line-height: 1; font-weight: 400;
}
.day-cell.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.day-cell.selected .day-name { opacity: .7; }
.day-cell.disabled, .day-cell[disabled] {
  color: var(--ink-5);
  cursor: not-allowed;
  background: var(--surface-2);
}
.day-cell.popular::after {
  content: '';
  position: absolute; top: 4px; right: 4px;
  width: 4px; height: 4px;
  background: var(--persimmon);
}


/* ═══ PARTY GRID (1–8 buttons for guest book.html) ═════════════════════ */
.party-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.party-cell {
  padding: 18px 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  border-radius: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.party-cell:hover { border-color: var(--ink); }
.party-cell.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
@media (max-width: 540px) {
  .party-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ═══ SEATING CARDS (design-spec) ══════════════════════════════════════ */
.seating-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 860px) { .seating-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .seating-grid { grid-template-columns: 1fr; } }
.seating-card {
  padding: 16px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  border-radius: 0;
  transition: background .12s, border-color .12s;
}
.seating-card:hover { border-color: var(--ink); }
.seating-card.selected {
  background: var(--persimmon-soft);
  border-color: var(--persimmon);
}
.seating-card .seating-jp {
  font-family: var(--font-jp);
  font-size: 10px;
  color: var(--persimmon);
  letter-spacing: 0.15em;
}
.seating-card .seating-title {
  font-family: var(--font-display);
  font-size: 18px;
  margin-top: 2px;
  font-weight: 400;
  color: var(--ink);
}
.seating-card .seating-desc {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.5;
}


/* ═══ STEP INDICATOR (design-spec) ═════════════════════════════════════ */
.step-indicator-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 11px;
  color: var(--ink-3);
}
.step-indicator-edit .step-pair {
  display: flex; align-items: center; gap: 8px;
}
.step-indicator-edit .step-circle {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  background: var(--surface-2);
  color: var(--ink-3);
}
.step-indicator-edit .step-pair.current .step-circle {
  background: var(--ink);
  color: var(--bg);
}
.step-indicator-edit .step-pair.done .step-circle {
  background: var(--olive);
  color: var(--bg);
}
.step-indicator-edit .step-pair.current .step-label,
.step-indicator-edit .step-pair.done .step-label {
  color: var(--ink);
}
.step-indicator-edit .step-line-edit {
  flex: 1; height: 1px;
  background: var(--line);
  max-width: 40px;
}


/* ═══ HERO (book.html) ═════════════════════════════════════════════════ */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-photo {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  background: var(--ink);
}
.hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-photo .hero-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(20,16,12,.78));
  padding: 60px 24px 20px;
  color: #FFF8EF;
}
.hero-photo .hero-caption .caption-jp {
  font-family: var(--font-jp);
  font-size: 11px;
  letter-spacing: 0.22em;
  opacity: 0.8;
  text-transform: uppercase;
}
.hero-photo .hero-caption .caption-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  margin-top: 4px;
  line-height: 1.2;
}
.hero-title {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.hero-title em {
  font-style: italic;
  color: var(--persimmon);
}
.hero-kicker {
  font-family: var(--font-jp) !important;
  font-size: 11px !important;
  color: var(--persimmon) !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 8px !important;
  text-transform: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.hero-note, .hero-copy .hero-note {
  font-size: 12.5px !important;
  color: var(--ink-2) !important;
  max-width: 440px;
  margin: 0 0 12px !important;
  line-height: 1.55 !important;
  font-family: var(--font-sans) !important;
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.hero-grid {
  margin-bottom: 18px !important;
  gap: 18px !important;
}
.hero-photo .hero-caption {
  padding: 30px 16px 12px !important;
}
.hero-photo .hero-caption .caption-jp { font-size: 9.5px !important; }
.hero-photo .hero-caption .caption-title { font-size: 15px !important; }
@media (max-width: 540px) {
  .hero-title { font-size: 22px !important; }
  .hero-photo { min-height: 130px !important; }
}


/* ═══ SUMMARY SIDE-CARD (Step 3 of book.html) ══════════════════════════ */
.summary-card {
  padding: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 0;
  height: fit-content;
}
.summary-card .summary-rows {
  display: grid;
  gap: 12px;
  font-size: 13px;
}
.summary-card .summary-rows > div {
  display: flex; align-items: center; justify-content: space-between;
}
.summary-card .summary-note {
  margin-top: 18px;
  padding: 10px 12px;
  background: var(--yuzu-soft);
  font-size: 11px;
  color: var(--gold);
}


/* ═══ LOGIN / AUTH SCREEN ══════════════════════════════════════════════ */
.auth-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 40px 36px !important;
  width: 380px !important;
  text-align: left !important;
}
.auth-logo {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: var(--ink) !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}
.auth-sub {
  font-size: 10px !important;
  color: var(--persimmon) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 28px !important;
  font-weight: 500;
  text-align: left !important;
}
.auth-input {
  width: 100% !important;
  padding: 11px 12px !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  outline: none;
  text-align: left !important;
  letter-spacing: normal !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
  transition: border-color .12s !important;
}
.auth-input::placeholder { color: var(--ink-4); opacity: 1; }
.auth-input:focus {
  border-color: var(--ink) !important;
  box-shadow: none !important;
}
.auth-btn {
  width: 100% !important;
  padding: 11px !important;
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--bg) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
  transition: background .12s, border-color .12s, color .12s !important;
}
.auth-btn:hover {
  background: var(--persimmon) !important;
  border-color: var(--persimmon) !important;
  color: #fff !important;
  transform: none !important;
}
.auth-error {
  font-size: 11px;
  color: var(--cherry);
  margin-top: 8px;
  min-height: 16px;
  font-family: var(--font-mono);
}
.auth-hint {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  margin-top: 16px !important;
  text-align: center;
  font-family: var(--font-mono);
}
/* Login screen container background */
.auth-gate {
  background: var(--bg) !important;
  background-image: none !important;
}
/* Forgot password / back link buttons (inline-styled in HTML — override via auth-gate scope) */
.auth-gate button[onclick*="showAuthView"] {
  color: var(--ink-3) !important;
  font-family: var(--font-mono) !important;
}
.auth-gate button[onclick*="showAuthView"]:hover {
  color: var(--ink) !important;
}


/* ═══ DEFENSIVE: ensure page-shell admin pages always render in 1 column inside .main ═══ */
.page.active.page-shell {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 1180px !important;
  min-height: 0 !important;
  padding: 0 4px 0 12px !important;
}
.page.active.page-shell.page-shell-medium { max-width: 980px !important; }
.page.active.page-shell.page-shell-narrow { max-width: 760px !important; }


/* ═══ MOBILE: app collapses, sidebar hides, mobile-nav takes over ══════ */
/* Breakpoint covers phones AND tablet portrait so the bottom-bar nav shows
   anywhere the sidebar is too cramped to fit. */
@media (max-width: 1024px) {
  .app {
    grid-template-columns: 1fr !important;
    height: 100vh;
    padding: 0 !important;
    gap: 0 !important;
  }
  .sidebar { display: none !important; }

  /* Force mobile-nav (bottom bar) to show on this breakpoint AND re-assert
     the fixed-bottom positioning that was only inlined at <=768px. Without
     this, at viewport widths between 769 and 1024 the bar shows but renders
     as inline text at the top-left because position:fixed never applied. */
  .mobile-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    height: 60px !important;
    padding: 0 !important;
  }
  .mobile-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 8px 0 !important;
    font-size: 9px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .mobile-nav-icon { font-size: 16px !important; line-height: 1 !important; }

  .main {
    height: 100vh;
    overflow-y: auto;
    width: 100%;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .topbar { padding: 14px 16px !important; }
  .content { padding: 16px 14px 80px !important; }   /* leave room for the fixed mobile-nav */
  .page-title { font-size: 22px !important; }
  .crumb { font-size: 9px !important; margin-bottom: 4px; }

  /* Collapse all 2/3-col grids to a single column on mobile */
  .bookings-2col,
  .waitlist-2col,
  .floor-3col,
  .step2-grid,
  .hero-grid,
  .dashboard-hero,
  .dashboard-grid,
  .stats-grid,
  .analytics-grid-wide,
  .analytics-grid-half,
  .staff-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Sidebar-style cards become full-width above content */
  .bookings-sidebar,
  .waitlist-side,
  .floor-col-left,
  .floor-col-right { order: 2; }
  .bookings-main,
  .waitlist-main,
  .floor-col-center { order: 1; }

  /* Sticky calendar card → static on mobile so it doesn't overlap content */
  .bookings-sidebar .bookings-cal-card { position: static !important; padding: 12px !important; }

  /* Mini-calendar shrinks dramatically on mobile so it's not half the page.
     We drop the aspect-ratio:1 (which made each cell ~140px tall on a 1024-wide
     viewport) and use a fixed compact height, plus tighter typography. */
  .bookings-cal-card .cal-grid { gap: 0 !important; }
  .bookings-cal-card .cal-cell {
    aspect-ratio: auto !important;
    height: 32px !important;
    min-height: 0 !important;
    font-size: 11px !important;
  }
  .bookings-cal-card .cal-cell-header {
    height: 22px !important;
    font-size: 8.5px !important;
  }
  .bookings-cal-card .cal-month { font-size: 14px !important; }
  .bookings-cal-presets { gap: 4px !important; }
  .bookings-cal-presets button { padding: 4px 8px !important; font-size: 10px !important; }

  /* Page-shell pages: drop the asymmetric padding & max-width on mobile */
  .page.active.page-shell {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Topbar action cluster stays compact */
  .topbar .icon-btn { width: 30px; height: 30px; }
  .topbar .topbar-right { gap: 6px; flex-wrap: wrap; }
  .service-pill { display: none !important; }   /* small screens: drop the pill, save the row */
  .topbar-spacer { display: none; }

  /* Tables on mobile: horizontal scroll fallback */
  .table-wrap { overflow-x: auto; }

  /* Tabs / segmented can shrink */
  .segmented button { padding: 6px 10px; font-size: 10.5px; }
}

/* Restore default desktop hide for mobile-nav above breakpoint, overriding
   the inline @media(min-width:769px) rule. */
@media (min-width: 1025px) {
  .mobile-nav { display: none !important; }
}


/* ═══ BOOKING DETAIL OVERLAY — flatten legacy gradients/radii ══════════ */
.detail-panel,
.detail-callout,
.detail-history-item,
.detail-deposit-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.detail-panel-title {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  color: var(--ink-3) !important;
  font-weight: 500 !important;
  margin-bottom: 6px;
}
.detail-callout-warning {
  background: var(--persimmon-soft) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 2px solid var(--persimmon) !important;
  color: var(--ink) !important;
  padding: 14px 16px !important;
}
.detail-callout-warning .detail-panel-title {
  color: var(--persimmon-deep) !important;
}
.detail-callout-stale {
  background: var(--surface-2) !important;
  border-left: 2px solid var(--ink-4) !important;
  color: var(--ink-2) !important;
}
.detail-callout-meta {
  font-size: 11px;
  color: var(--ink-3) !important;
  margin-top: 6px;
}
.detail-textarea {
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 9px 12px !important;
  outline: none;
  transition: border-color .12s !important;
  box-shadow: none !important;
}
.detail-textarea:focus { border-color: var(--ink) !important; box-shadow: none !important; }
.detail-label {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  color: var(--ink-3) !important;
  font-weight: 500 !important;
}
.detail-value { color: var(--ink) !important; font-size: 13px !important; }
.detail-section-title {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  color: var(--ink-3) !important;
  font-weight: 500 !important;
}
.detail-section-note {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  color: var(--ink-3) !important;
}

/* Kitchen prep notes block — distinguish as internal-only with olive accent */
.detail-prep-block {
  border-left: 2px solid var(--olive, #6b7a4f);
  padding: 12px 14px;
  background: var(--bg-alt);
  margin-bottom: 14px;
}
.detail-prep-block .detail-section-head { margin-bottom: 8px; }
.detail-prep-textarea {
  background: var(--surface) !important;
}

/* Editorial empty states across pages */
.empty {
  padding: 32px 18px !important;
  text-align: center;
  color: var(--ink-3) !important;
  background: transparent !important;
}
.empty-icon {
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  color: var(--ink-5) !important;
  opacity: 1 !important;
  margin-bottom: 10px !important;
  letter-spacing: 0;
  line-height: 1;
}
.empty-text {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--ink-2) !important;
  letter-spacing: 0;
}
.empty-sub {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  color: var(--ink-3) !important;
  letter-spacing: 0.02em;
  margin-top: 6px;
  line-height: 1.5;
}
.dashboard-empty { padding: 38px 20px !important; }
.detail-history-meta { color: var(--ink-3) !important; }
.detail-history-more { color: var(--ink-3) !important; font-size: 11px; }
.detail-chip {
  font-family: var(--font-mono) !important;
  border-radius: 0 !important;
  font-size: 10.5px !important;
  padding: 2px 8px !important;
  letter-spacing: 0.04em;
}
.detail-chip-returning { background: var(--sky-soft) !important; color: var(--sky) !important; border: 0 !important; }
.detail-chip-new { background: var(--olive-soft) !important; color: var(--olive) !important; border: 0 !important; }
.detail-ref { font-family: var(--font-mono) !important; color: var(--ink-3) !important; font-size: 11px; }
.detail-deposit-row { border: 0; }
.divider { background: var(--line) !important; height: 1px !important; border: 0 !important; margin: 14px 0 !important; }


/* ═══ ANALYTICS POLISH ══════════════════════════════════════════════════ */
.analytics-card-title {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin-bottom: 14px !important;
}
.analytics-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px !important;
}
.analytics-revenue {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.analytics-revenue-input {
  border-radius: 0 !important;
  border: 1px solid var(--line-2) !important;
  background: var(--bg-alt) !important;
  font-family: var(--font-mono) !important;
  color: var(--ink) !important;
}


/* ═══ DARK PHOTO GRADIENT — fix on dark themes ═════════════════════════ */
html[data-theme="dark"] .hero-photo .hero-caption,
html[data-palette="shoyu"] .hero-photo .hero-caption {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
}


/* ═══ BOOK.HTML LEGACY OVERRIDES (kill inline gradient blocks) ═════════ */
.hero-intro {
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 18px !important;
}
.hero-intro::before, .hero-intro::after { display: none !important; }
.hero-kicker::before { display: none !important; }
.hero-copy {
  display: block !important;
  grid-template-columns: none !important;
}

/* Step indicator — override legacy gradient/padding */
.step-indicator {
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.step-indicator .step-dot {
  width: 22px !important;
  height: 22px !important;
  background: var(--surface-2) !important;
  background-image: none !important;
  border: 0 !important;
  color: var(--ink-3) !important;
  box-shadow: none !important;
  font-weight: 600;
}
.step-indicator .step-pair.current .step-dot,
.step-indicator .step-dot.active {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.step-indicator .step-pair.done .step-dot,
.step-indicator .step-dot.done {
  background: var(--olive) !important;
  background-image: none !important;
  color: var(--bg) !important;
  border: 0 !important;
}
.step-indicator .step-line, .step-indicator .step-line-edit {
  flex: 1 !important;
  height: 1px !important;
  background: var(--line) !important;
  max-width: 40px;
  border-radius: 0 !important;
}
.step-indicator .step-line.done, .step-indicator .step-line-edit.done {
  background: var(--olive) !important;
}

/* Pax selector buttons */
.pax-selector .pax-btn {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.pax-selector .pax-btn:hover {
  border-color: var(--ink) !important;
  background: var(--bg-alt) !important;
  color: var(--ink) !important;
  transform: none !important;
}
.pax-val {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
}

/* Section preference / seating cards */
.section-pref-btn {
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  padding: 16px 14px !important;
  text-align: left !important;
  font-weight: 400 !important;
  font-size: inherit !important;
}
.section-pref-btn:hover {
  border-color: var(--ink) !important;
  background: transparent !important;
  color: var(--ink) !important;
  transform: none !important;
}
.section-pref-btn.selected {
  background: var(--persimmon-soft) !important;
  background-image: none !important;
  border-color: var(--persimmon) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.section-pref-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
@media (max-width: 860px) { .section-pref-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 460px) { .section-pref-grid { grid-template-columns: 1fr !important; } }

/* Session labels in time grid */
.session-label {
  font-size: 9.5px !important;
  font-weight: 500;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--ink-3) !important;
  margin: 14px 0 8px !important;
  display: flex; align-items: center; gap: 8px;
}
.session-label:first-child { margin-top: 0 !important; }
.session-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.session-break { height: 6px !important; }

/* Summary rows in step 2 — display:flex space-between */
.summary-rows > div {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

/* Closed-message overrides */
.closed-msg-blocked, .closed-msg-closed, .closed-msg {
  background: var(--persimmon-soft) !important;
  background-image: none !important;
  border: 1px solid var(--persimmon) !important;
  border-radius: 0 !important;
  color: var(--persimmon-deep) !important;
  padding: 16px !important;
  font-size: 13px !important;
  text-align: center;
  box-shadow: none !important;
}

/* Booking summary card (legacy class still on confirm-summary) */
.booking-summary-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
}

/* BYB modal overlay */
.byb-overlay {
  background: rgba(20, 16, 12, 0.6) !important;
  backdrop-filter: none !important;
}
.byb-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px !important;
}
.byb-title {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.byb-body {
  color: var(--ink-2) !important;
  font-size: 13px;
}

/* Toast styling */
.toast {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--bg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-mono) !important;
}

/* page-wrap for guest pages */
.page-wrap {
  background: var(--bg) !important;
  background-image: none !important;
}

/* Footer on guest pages */
.footer {
  background: none !important;
  border: 0 !important;
}


/* ═══ SETTINGS · APPEARANCE PICKER ══════════════════════════════════════ */
.appearance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.palette-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--ink);
  border-radius: 0;
  transition: border-color .12s, background .12s;
}
.palette-card:hover { border-color: var(--ink); }
.palette-card.active {
  border: 1.5px solid var(--persimmon);
  background: var(--persimmon-soft);
}
.palette-swatches { display: flex; gap: 2px; flex-shrink: 0; }
.palette-swatches > span {
  width: 14px; height: 24px;
  border: 1px solid var(--line);
  display: block;
}
.palette-card-meta { flex: 1; min-width: 0; }
.palette-card-name {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink);
}
.palette-card-sub {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.theme-segmented {
  display: inline-flex;
  border: 1px solid var(--line-2);
  background: var(--surface);
}
.theme-segmented button {
  padding: 7px 14px;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  background: transparent;
  border-top: 0; border-bottom: 0; border-left: 0;
  cursor: pointer;
}
.theme-segmented button:last-child { border-right: 0; }
.theme-segmented button.active {
  background: var(--ink);
  color: var(--bg);
}


/* ═══ SCROLLBAR ═════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-track { background: transparent; }


/* ═══ RESPONSIVE — admin shell collapse ═════════════════════════════════ */
@media (max-width: 1100px) {
  .app { grid-template-columns: 200px 1fr !important; }
}
@media (max-width: 768px) {
  .topbar { padding: 14px 18px !important; }
  .content { padding: 18px 16px calc(80px + env(safe-area-inset-bottom)) !important; }   /* keep room for 60px mobile-nav + iOS home indicator */
  .page-title { font-size: 22px !important; }
}

/* ═══ FINAL MOBILE SHELL FIXES ══════════════════════════════════════════
   This intentionally sits after the 1100px desktop squeeze rule above.
   At phone/tablet widths the sidebar is hidden, so the app must be a
   single column or the main content gets trapped in a 200px grid track. */
@media (max-width: 1024px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .app {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .main {
    grid-column: 1 / -1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px calc(84px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  .page,
  .page.active,
  .dashboard-hero,
  .dashboard-panel,
  .card,
  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dashboard-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .dashboard-hero-greeting,
  .dashboard-hero-service {
    padding: 20px !important;
    min-width: 0 !important;
  }

  #dash-hero-greeting {
    font-size: clamp(30px, 9vw, 42px) !important;
    max-width: 100% !important;
  }

  #dash-hero-summary {
    max-width: 100% !important;
  }

  #dash-service-windows {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding-bottom: 4px;
  }

  #dash-service-windows > * {
    flex: 0 0 86px !important;
    min-width: 86px !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Staff cards need a predictable grid so long emails do not steal all space
   from role chips and action buttons. */
@media (min-width: 1025px) {
  .staff-card {
    display: grid !important;
    grid-template-columns: 32px minmax(220px, 1fr) minmax(250px, auto) !important;
    gap: 12px !important;
    align-items: start !important;
  }
  .staff-card > div:first-child { grid-column: 1; }
  .staff-card-main { grid-column: 2; min-width: 0 !important; }
  .staff-card-meta {
    grid-column: 3;
    min-width: 0 !important;
    justify-self: end;
  }
  .staff-card-actions .btn {
    white-space: nowrap;
  }
}

@media (max-width: 1360px) and (min-width: 1025px) {
  .staff-card {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }
  .staff-card-meta {
    grid-column: 1 / -1;
    justify-self: stretch;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .staff-card-actions {
    flex-wrap: wrap !important;
  }
}

.staff-card-name,
.staff-card-email,
.staff-card-sub {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Architectural floor-plan scaffold ported from Claude's floor-plan.jsx.
   Table tiles stay interactive above this SVG; the scaffold is pointer-free. */
.floor-architecture {
  z-index: 0;
}
.floor-arch-room,
.floor-arch-wall {
  fill: none;
  stroke: var(--ink-4, var(--line-2));
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.floor-arch-entrance {
  fill: var(--persimmon-soft, var(--bg-alt));
  stroke: var(--persimmon, var(--accent));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.floor-arch-arc {
  fill: none;
  stroke: var(--persimmon, var(--accent));
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: .7;
  vector-effect: non-scaling-stroke;
}
.floor-arch-kitchen {
  fill: var(--surface-2, var(--paper2));
  stroke: var(--ink-4, var(--line-2));
  stroke-width: 1;
  opacity: .62;
  vector-effect: non-scaling-stroke;
}
.floor-arch-pass {
  fill: var(--bg, var(--paper));
  stroke: var(--persimmon, var(--accent));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.floor-arch-counter {
  fill: none;
  stroke: var(--ink-4, var(--line-2));
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: .62;
  vector-effect: non-scaling-stroke;
}
.floor-arch-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .16em;
  fill: var(--ink-4);
}
.floor-arch-label-strong {
  fill: var(--persimmon, var(--accent));
}
.floor-arch-jp {
  font-family: var(--font-jp);
  font-size: 11px;
  letter-spacing: .2em;
  fill: var(--ink-4);
}
.floor-arch-kitchen-label {
  font-size: 14px;
}
.floor-tile,
.floor-decor {
  z-index: 2;
}


/* ═══ MISC LEGACY OVERRIDES ════════════════════════════════════════════ */
.bookings-filter-band, .filter-bar, .toolbar {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.detail-panel {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.byb-overlay {
  background: rgba(20, 16, 12, 0.6) !important;
  backdrop-filter: none !important;
}

/* Generic — kill all rounded corners on user-facing surfaces */
.card, .panel, .container-card { border-radius: 0 !important; }

/* ═══ FLOOR VIEW FINAL REFINEMENT — closer to Claude service-board target ═ */
.floor-3col {
  grid-template-columns: minmax(300px, 320px) minmax(560px, 1fr) minmax(300px, 320px) !important;
  gap: 14px !important;
}
@media (max-width: 1280px) {
  .floor-3col {
    grid-template-columns: minmax(260px, 290px) minmax(520px, 1fr) minmax(270px, 290px) !important;
    gap: 10px !important;
  }
}
@media (max-width: 1080px) {
  .floor-3col {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.floor-stage {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px !important;
}
.floor-stage-canvas {
  background: var(--bg-alt) !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /* Cap the canvas to roughly match the design's intended size — the SVG
     scales gracefully via preserveAspectRatio so this just keeps it from
     ballooning on ultra-wide centre columns. */
  max-width: 720px;
  margin: 0 auto;
}
.floor-stage-canvas::before { display: none !important; }
#floor-canvas-view { padding: 0 !important; min-height: 0 !important; height: auto !important; }

/* Design-spec SVG floor — fills the canvas, scales by aspect ratio */
.floor-design-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  font-family: var(--font-mono);
  user-select: none;
}
.floor-design-svg .floor-svg-table {
  cursor: pointer;
  transition: filter .12s;
}
.floor-design-svg .floor-svg-table:hover {
  filter: drop-shadow(0 0 0 var(--persimmon)) brightness(1.04);
}
.floor-design-svg text { pointer-events: none; }

/* Legacy classes still referenced elsewhere — keep no-op so they don't fail */
.floor-grid-svg,
.floor-architecture {
  z-index: 0;
}
.floor-tables-svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

/* Floor unplaced (custom tables outside the design's ID map) */
.floor-unplaced-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 14px 0 8px;
}
.floor-unplaced-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.floor-unplaced-chip {
  background: var(--surface);
  border: 1px solid var(--line-2);
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-2);
  border-radius: 0;
}
.floor-busy-badge {
  font-size: 11px;
  padding: 6px 10px;
  background: var(--yuzu-soft, #f5e9c5);
  color: var(--gold, #8c6913);
  border: 1px solid var(--gold, #8c6913);
  margin-bottom: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.floor-svg-table {
  cursor: pointer;
  pointer-events: auto;
  opacity: 1;
}
.floor-svg-table-dimmed {
  opacity: .18;
}
.floor-svg-shape {
  vector-effect: non-scaling-stroke;
  transition: fill .12s ease, stroke .12s ease, stroke-width .12s ease;
}
.floor-svg-outline {
  fill: none;
  stroke: var(--persimmon);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  transition: opacity .12s ease;
}
.floor-svg-table:hover .floor-svg-shape,
.floor-svg-table.drag-over .floor-svg-shape {
  stroke: var(--persimmon);
  stroke-width: 2;
}
.floor-svg-table-selected .floor-svg-outline {
  opacity: 1;
}
.floor-svg-name,
.floor-svg-cap,
.floor-svg-guest {
  font-family: var(--font-mono);
  dominant-baseline: middle;
  pointer-events: none;
}
.floor-svg-name {
  fill: var(--ink);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.floor-svg-cap {
  fill: var(--ink-4);
  font-size: 8.5px;
}
.floor-svg-guest {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.floor-legend-swatch {
  border-radius: 0 !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 40%, transparent);
}
.floor-legend-swatch.legend-seated { background: var(--olive-soft) !important; border-color: var(--olive) !important; }
.floor-legend-swatch.legend-confirmed { background: var(--sky-soft) !important; border-color: var(--sky) !important; }
.floor-legend-swatch.legend-pending { background: var(--yuzu-soft) !important; border-color: var(--gold) !important; }
.floor-legend-swatch.legend-vip { background: var(--plum-soft) !important; border-color: var(--plum) !important; }
.floor-legend-swatch.legend-finished { background: var(--surface-2) !important; border-color: var(--line-2) !important; }
.floor-legend-swatch.legend-free { background: var(--surface) !important; border-color: var(--olive) !important; }

.floor-selected-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}
.floor-selected-actions-grid .btn-primary {
  grid-column: 1 / -1;
}
.floor-walkin-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.floor-walkin-section-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.floor-walkin-picker button {
  min-height: 32px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.floor-walkin-picker button:hover,
.floor-walkin-picker button.active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.floor-bk-row {
  border-left: 3px solid transparent !important;
  background: var(--surface) !important;
}
.floor-bk-row.is-seated {
  background: var(--olive-soft) !important;
  border-left-color: var(--olive) !important;
}
.floor-bk-row.is-arriving {
  background: var(--sky-soft) !important;
  border-left-color: var(--sky) !important;
}
.floor-bk-row.is-pending {
  background: var(--yuzu-soft) !important;
  border-left-color: var(--gold) !important;
}
.floor-bk-row.is-vip {
  background: var(--plum-soft) !important;
  border-left-color: var(--plum) !important;
}
.floor-bk-row-avatar {
  background: var(--surface) !important;
}
.floor-bk-row.is-seated .floor-bk-row-avatar {
  background: var(--olive) !important;
  color: var(--bg) !important;
  border-color: var(--olive) !important;
}
.floor-bk-row.is-arriving .floor-bk-row-avatar {
  background: var(--sky) !important;
  color: var(--bg) !important;
  border-color: var(--sky) !important;
}
.floor-bk-row.is-pending .floor-bk-row-avatar {
  background: var(--gold) !important;
  color: var(--bg) !important;
  border-color: var(--gold) !important;
}
.floor-bk-row.is-vip .floor-bk-row-avatar {
  background: var(--plum) !important;
  color: var(--bg) !important;
  border-color: var(--plum) !important;
}

.floor-tile.ft-occupied {
  background: var(--sky-soft) !important;
  border-color: color-mix(in srgb, var(--sky) 45%, var(--sky-soft) 55%) !important;
  border-left-color: var(--sky) !important;
}
.floor-tile.ft-occupied .floor-tile-guest { color: var(--sky) !important; }
.floor-tile.ft-vip {
  background: var(--plum-soft) !important;
  border-color: color-mix(in srgb, var(--plum) 40%, var(--plum-soft) 60%) !important;
  border-left-color: var(--plum) !important;
}
.floor-tile.ft-vip .floor-tile-guest { color: var(--plum) !important; }

.floor-arch-backup-band {
  fill: var(--surface);
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  opacity: .42;
  vector-effect: non-scaling-stroke;
}
.floor-arch-daily-band {
  fill: var(--surface);
  stroke: var(--line-2);
  stroke-width: 1;
  opacity: .22;
  vector-effect: non-scaling-stroke;
}
.floor-arch-kitchen-line {
  stroke: var(--ink-5, var(--line-2));
  stroke-width: 5;
  opacity: .28;
  vector-effect: non-scaling-stroke;
}
.floor-arch-counter {
  fill: color-mix(in srgb, var(--ink) 70%, var(--surface) 30%) !important;
  stroke: var(--ink) !important;
  stroke-dasharray: none !important;
  opacity: .88 !important;
}
.floor-arch-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  fill: var(--bg);
}

/* ═══ BOOKINGS PAGE FINAL PASS — compact editorial layout ═══════════════ */
.bookings-main {
  min-width: 0 !important;
}
.bookings-slim-toolbar {
  justify-content: flex-start !important;
  margin-bottom: 8px !important;
}
.bookings-date-bar {
  display: grid !important;
  grid-template-columns: minmax(220px, max-content) minmax(260px, 1fr) auto;
  align-items: end !important;
  gap: 12px !important;
  margin: 6px 0 14px !important;
}
.bookings-date-search {
  min-width: 0;
  align-self: end;
}
.bookings-date-search .search-input,
#search-input {
  height: 36px !important;
  min-height: 36px !important;
  padding: 7px 11px !important;
  line-height: 1.35 !important;
  text-indent: 0 !important;
  overflow: visible !important;
  text-overflow: ellipsis;
  box-shadow: none !important;
}
.bookings-table-panel {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.bookings-table-panel .table-wrap {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bookings-table-panel .data-table thead th {
  background: var(--surface-2) !important;
  background-image: none !important;
}
.bookings-table-panel .data-table tbody tr:hover td,
.bookings-table-panel .data-table tbody tr:hover td:first-child {
  background: var(--bg-alt) !important;
  color: inherit !important;
}
.bookings-cal-hint {
  display: none !important;
}

@media (max-width: 1180px) {
  .bookings-date-bar {
    grid-template-columns: 1fr auto !important;
  }
  .bookings-date-search {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (max-width: 700px) {
  .bookings-slim-toolbar {
    align-items: stretch !important;
  }
  .bookings-slim-toolbar .segmented,
  .bookings-view-segmented,
  .bookings-date-search {
    width: 100%;
  }
  .bookings-date-bar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .bookings-view-segmented {
    justify-content: stretch;
  }
  .bookings-view-segmented button {
    flex: 1 1 0;
  }
}

/* ═══ BROADER CLAUDE-PORT CLEANUP — forms, waitlist, settings, analytics ═══ */
#page-new-booking {
  padding-top: 28px !important;
}
#page-new-booking > .page-surface {
  max-width: 680px !important;
  width: min(680px, 100%) !important;
  margin: 0 !important;
  padding: 20px !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#page-new-booking .form-grid {
  gap: 12px !important;
}
#page-new-booking .form-row {
  gap: 12px !important;
}
#page-new-booking .divider {
  margin: 2px 0 !important;
  border-color: var(--line) !important;
}
#page-new-booking .form-textarea {
  min-height: 76px !important;
}

.table-booking-bars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 130px !important;
}
.table-booking-bars span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  overflow: visible !important;
}
.table-booking-bars span i {
  display: block !important;
  width: 18px !important;
  height: 3px !important;
  background: var(--surface-2) !important;
}
.table-booking-bars span i.is-active {
  background: var(--olive) !important;
}
.table-booking-bars b {
  color: var(--ink-2) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

#page-waitlist .waitlist-main {
  min-width: 0 !important;
}
#page-waitlist #waitlist-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#page-waitlist #waitlist-stats .stat-card,
#page-waitlist .waitlist-side .card,
#page-settings .settings-section,
#page-settings .guest-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#page-waitlist #waitlist-stats .stat-card[data-tone="alert"] {
  border-top-color: var(--gold) !important;
}
#page-waitlist #waitlist-stats .stat-card[data-tone="calm"] {
  border-top-color: var(--olive) !important;
}
#page-waitlist #waitlist-table .table-wrap,
#page-waitlist #waitlist-table {
  min-width: 0 !important;
}
#page-waitlist .data-table {
  table-layout: fixed;
}
#page-waitlist .data-table th:nth-child(2),
#page-waitlist .data-table td:nth-child(2) {
  width: 25%;
}
#page-waitlist .data-table td {
  overflow-wrap: anywhere;
}
#page-waitlist .data-table td[data-label="Actions"] .btn {
  white-space: nowrap;
}
#page-waitlist .data-table td[data-label="Guest"] > div {
  min-width: 0;
}
#page-waitlist .data-table td[data-label="Guest"] .avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  overflow: hidden;
}
#page-waitlist .data-table td[data-label="Actions"] > div {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}
#page-waitlist .data-table td[data-label="Actions"] .btn {
  padding: 5px 7px !important;
  font-size: 10.5px !important;
}
.badge-waiting,
.badge-notified {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
.badge-waiting::before,
.badge-notified::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
}
#modal-waitlist-notify .modal {
  background: var(--surface) !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#page-analytics .analytics-toolbar {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
#page-analytics .stats-grid {
  gap: 12px !important;
}
#page-analytics .analytics-grid-wide,
#page-analytics .analytics-grid-half {
  align-items: stretch;
}
#page-analytics .analytics-card,
#page-analytics .analytics-revenue,
#page-analytics .dashboard-panel,
#page-analytics .table-wrap {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#page-analytics .analytics-card {
  min-height: 260px;
}
#page-analytics .analytics-card-title,
#page-analytics .dashboard-panel-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}
#page-analytics canvas {
  max-height: 340px;
}
#page-settings .settings-shell {
  align-items: start !important;
}
#page-settings .settings-section {
  padding: 22px 24px !important;
}
#page-settings .settings-security-lock {
  border-top: 2px solid var(--olive) !important;
}
#page-settings .is-locked-control {
  opacity: .58;
  cursor: not-allowed !important;
}
#settings-edit-lock-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--olive) !important;
}
#settings-edit-lock-status::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  background: currentColor;
}

.floor-audit-list {
  max-height: 360px;
  overflow: auto;
}
.floor-audit-more {
  border: 1px dashed var(--line);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 10px;
}
.floor-walkin-shortcuts {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.floor-walkin-picker button {
  border-radius: 0 !important;
  text-align: center;
}

#staff-list {
  display: grid;
  gap: 10px;
}
.staff-card {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) minmax(0, auto) !important;
  align-items: center !important;
  gap: 12px !important;
}
.staff-card .avatar {
  grid-column: 1;
}
.staff-card-main {
  grid-column: 2;
  min-width: 0 !important;
}
.staff-card-meta {
  grid-column: 3;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.staff-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  max-width: 360px;
}
.staff-card-actions .btn {
  white-space: nowrap;
  min-width: auto !important;
}
#page-settings .settings-section .settings-copy,
#page-settings .settings-section .settings-mini-copy {
  max-width: 58ch;
}

@media (max-width: 900px) {
  #page-waitlist .waitlist-2col {
    grid-template-columns: 1fr !important;
  }
  #page-waitlist #waitlist-stats {
    grid-template-columns: 1fr !important;
  }
  #page-waitlist .data-table {
    table-layout: auto;
  }
  #page-new-booking {
    padding-top: 12px !important;
  }
  #page-new-booking > .page-surface {
    padding: 14px !important;
  }
}

@media (max-width: 768px) {
  #page-bookings .bookings-table-panel,
  #page-dashboard .dashboard-table,
  #page-dashboard .dashboard-panel,
  #page-bookings .table-wrap,
  #page-dashboard .table-wrap {
    background: var(--surface) !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #page-bookings .bookings-table-panel {
    border: 1px solid var(--line) !important;
    overflow: visible !important;
  }

  #page-bookings .data-table,
  #page-dashboard .dashboard-table .data-table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 11px !important;
  }

  #page-bookings .data-table thead,
  #page-dashboard .dashboard-table .data-table thead {
    display: none !important;
  }

  #page-bookings .data-table tbody,
  #page-dashboard .dashboard-table .data-table tbody {
    display: table-row-group !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #page-bookings .data-table tr,
  #page-dashboard .dashboard-table .data-table tr {
    display: table-row !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #page-bookings .data-table td,
  #page-dashboard .dashboard-table .data-table td {
    display: table-cell !important;
    padding: 9px 6px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: transparent !important;
    vertical-align: middle !important;
  }

  #page-bookings .data-table td::before,
  #page-dashboard .dashboard-table .data-table td::before {
    content: none !important;
    display: none !important;
  }

  #page-bookings .data-table td[data-label="Time"],
  #page-dashboard .dashboard-table .data-table td[data-label="Time"] {
    width: 58px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  #page-bookings .data-table td[data-label="Guest"],
  #page-dashboard .dashboard-table .data-table td[data-label="Guest"] {
    width: auto !important;
  }

  #page-bookings .data-table td[data-label="Guest"] .avatar,
  #page-dashboard .dashboard-table .data-table td[data-label="Guest"] .avatar {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 9px !important;
  }

  #page-bookings .data-table td[data-label="Party"],
  #page-dashboard .dashboard-table .data-table td[data-label="Party"] {
    width: 28px !important;
    text-align: center !important;
  }

  #page-bookings .data-table td[data-label="Table"],
  #page-dashboard .dashboard-table .data-table td[data-label="Table"] {
    width: 54px !important;
    font-size: 10px !important;
  }

  #page-bookings .data-table td[data-label="Status"],
  #page-dashboard .dashboard-table .data-table td[data-label="Status"] {
    width: 68px !important;
  }

  #page-bookings .data-table td[data-label="Notes"],
  #page-bookings .data-table td[data-label="Via"],
  #page-dashboard .dashboard-table .data-table td[data-label="Notes"],
  #page-dashboard .dashboard-table .data-table td[data-label="Via"] {
    display: none !important;
  }

  #page-bookings .data-table td[data-label=""],
  #page-dashboard .dashboard-table .data-table td[data-label=""] {
    width: 32px !important;
    text-align: right !important;
  }

  #page-bookings .data-table .badge,
  #page-dashboard .dashboard-table .data-table .badge,
  #page-bookings .data-table .tag,
  #page-dashboard .dashboard-table .data-table .tag {
    border-radius: 0 !important;
    padding: 3px 5px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 64px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #page-bookings .bookings-date-bar {
    gap: 8px !important;
  }

  #page-bookings .bookings-date-search {
    grid-column: 1 / -1 !important;
  }
}

/* ═══ Guest Experience preview (admin → page-public) ═══════════════════
   The admin tab embeds the live /make-a-booking page in an iframe so the
   preview matches reality 1:1. Editorial: hairline borders, 0 radius, no
   shadow, no emoji callout from the pre-migration era. */
.public-urls-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-left: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  margin-bottom: 18px !important;
}
.public-urls-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 10px;
}
.public-urls-body {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
}
.public-urls-body > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.public-urls-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-width: 150px;
}
.public-urls-body code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink);
  background: var(--bg-alt);
  padding: 1px 6px;
  border: 1px solid var(--line-2);
}

.public-preview-frame {
  border: 1px solid var(--line) !important;
  background: var(--surface);
  height: calc(100vh - 280px);
  min-height: 640px;
  overflow: hidden;
  position: relative;
}
.public-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
}
@media (max-width: 1024px) {
  .public-preview-frame { height: calc(100vh - 220px); min-height: 520px; }
  .public-urls-label { min-width: 120px; }
}

/* ═══ FINAL CLAUDE MIGRATION PASS — annotation cleanup, mobile density, stale-theme removal ═══ */
#page-floor #floor-modebar,
#page-floor .floor-toolbar,
#page-floor .floor-col,
#page-floor .table-wrap,
#page-floor .floor-selected-card,
#page-floor .floor-map-wrap,
#page-floor .floor-walkin-body,
#page-floor .floor-audit-panel,
#page-floor .floor-tonight-card,
#page-floor .floor-pacing-card,
#page-analytics .stat-card,
#page-analytics .analytics-card,
#page-analytics .analytics-revenue,
#page-analytics .dashboard-panel,
#page-analytics .table-wrap,
#page-settings .settings-section,
#page-settings .guest-card,
#page-settings .settings-card,
#page-settings .integration-card,
#page-public .guest-card,
#page-public .page-surface,
#page-staff .settings-section,
#page-waitlist .waitlist-side .card,
#page-waitlist #waitlist-table,
#page-bookings .bookings-table-panel,
#page-bookings .table-wrap,
#page-dashboard .dashboard-panel,
#page-dashboard .dashboard-table,
#page-new-booking > .page-surface {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#page-floor #floor-modebar {
  padding: 16px !important;
  max-width: 1160px !important;
}
#page-floor .floor-3col {
  grid-template-columns: minmax(260px, 300px) minmax(560px, 1fr) minmax(260px, 300px) !important;
  align-items: start !important;
  gap: 14px !important;
  overflow-x: auto !important;
}
#page-floor .floor-map-wrap,
#page-floor .floor-map-scroll {
  overflow: auto !important;
}
#page-floor .floor-map {
  min-width: 560px !important;
}
#page-floor .chip,
#page-floor .floor-bk-row-table .chip,
#page-floor .floor-table-chip,
#page-floor .floor-table-pill {
  border-radius: 0 !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  max-width: 82px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#page-floor .floor-bk-row {
  grid-template-columns: 62px minmax(0, 1fr) minmax(70px, auto) !important;
}
#page-floor .floor-bk-row-guest,
#page-floor .floor-bk-row-note {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#page-floor .floor-walkin-picker {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
#page-floor .floor-walkin-picker button,
#page-floor .floor-walkin-section button {
  min-height: 32px !important;
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
#page-floor .floor-walkin-picker button.is-active,
#page-floor .floor-walkin-section button.is-active,
#page-floor .floor-walkin-picker button[aria-pressed="true"],
#page-floor .floor-walkin-section button[aria-pressed="true"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
#page-floor .floor-audit-list {
  max-height: 240px !important;
  overflow: auto !important;
}
#page-floor .floor-audit-card {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
}

#page-settings .settings-shell {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  max-width: 1180px !important;
  align-items: start !important;
}
#page-settings .settings-section {
  padding: 22px 24px !important;
}
#page-settings .settings-tabs {
  overflow-x: auto !important;
  white-space: nowrap !important;
}
#page-settings .settings-inline-stack {
  flex-wrap: wrap !important;
}

.staff-card {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.staff-card-main {
  min-width: 0 !important;
}
.staff-card-name,
.staff-card-email,
.staff-card-sub {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.staff-card-meta {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  padding-left: 44px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.staff-card-actions {
  display: flex !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: none !important;
}
.staff-card-actions .btn {
  min-width: auto !important;
  white-space: nowrap !important;
}
@media (min-width: 1450px) {
  .staff-card {
    grid-template-columns: 32px minmax(220px, 1fr) minmax(360px, auto) !important;
    align-items: center !important;
  }
  .staff-card-meta {
    grid-column: 3 !important;
    padding-left: 0 !important;
    justify-content: flex-end !important;
  }
}

#mobile-menu-panel {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px !important;
}
#mobile-menu-panel .mobile-menu-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 4px 6px 0 !important;
  padding: 9px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
}
#mobile-menu-panel .mobile-menu-item:hover {
  background: var(--surface-2) !important;
}

#page-waitlist .data-table {
  table-layout: fixed !important;
}
#page-waitlist .data-table td,
#page-waitlist .data-table th {
  min-width: 0 !important;
}
#page-waitlist .data-table td[data-label="Guest"] > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
#page-waitlist .data-table td[data-label="Guest"] .avatar {
  letter-spacing: 0 !important;
  word-break: normal !important;
  overflow: hidden !important;
  flex: 0 0 30px !important;
}
#page-waitlist .data-table td[data-label="Guest"] .muted {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#page-waitlist .data-table td[data-label="Actions"] > div {
  display: flex !important;
  gap: 4px !important;
  justify-content: flex-end !important;
}
#page-waitlist .data-table td[data-label="Actions"] .btn {
  min-width: auto !important;
  white-space: nowrap !important;
}

#page-bookings .data-table .badge,
#page-dashboard .data-table .badge,
#page-waitlist .data-table .badge,
#page-floor .chip {
  border-radius: 0 !important;
}

@media (max-width: 1024px) {
  #page-floor .floor-3col {
    grid-template-columns: minmax(240px, 280px) minmax(560px, 1fr) minmax(250px, 280px) !important;
  }
  #page-settings .settings-shell,
  #page-staff .staff-layout,
  #page-waitlist .waitlist-2col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  #page-bookings .content,
  #page-dashboard .content,
  #page-waitlist .content,
  #page-floor .content,
  #page-settings .content,
  #page-staff .content,
  #page-analytics .content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  #page-bookings .data-table,
  #page-dashboard .dashboard-table .data-table {
    display: table !important;
    table-layout: fixed !important;
    font-size: 11px !important;
  }
  #page-bookings .data-table td,
  #page-dashboard .dashboard-table .data-table td {
    padding: 7px 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #page-bookings .data-table td[data-label="Time"],
  #page-dashboard .dashboard-table .data-table td[data-label="Time"] {
    width: 58px !important;
  }
  #page-bookings .data-table td[data-label="Party"],
  #page-dashboard .dashboard-table .data-table td[data-label="Party"] {
    width: 30px !important;
  }
  #page-bookings .data-table td[data-label="Table"],
  #page-dashboard .dashboard-table .data-table td[data-label="Table"] {
    width: 56px !important;
  }
  #page-bookings .data-table td[data-label="Status"],
  #page-dashboard .dashboard-table .data-table td[data-label="Status"] {
    width: 68px !important;
  }
  #page-bookings .data-table td[data-label="Guest"] .muted,
  #page-dashboard .dashboard-table .data-table td[data-label="Guest"] .muted {
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #page-waitlist #waitlist-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  #page-waitlist #waitlist-stats .stat-card {
    padding: 10px !important;
    min-width: 0 !important;
  }
  #page-waitlist .data-table thead {
    display: none !important;
  }
  #page-waitlist .data-table,
  #page-waitlist .data-table tbody {
    display: block !important;
  }
  #page-waitlist .data-table tr {
    display: grid !important;
    grid-template-columns: 24px minmax(120px, 1fr) 34px auto !important;
    gap: 6px !important;
    align-items: center !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #page-waitlist .data-table td {
    display: block !important;
    padding: 2px 4px !important;
    border: 0 !important;
  }
  #page-waitlist .data-table td::before {
    content: none !important;
    display: none !important;
  }
  #page-waitlist .data-table td[data-label="Added"],
  #page-waitlist .data-table td[data-label="Quoted"],
  #page-waitlist .data-table td[data-label="Waited"] {
    display: none !important;
  }
  #page-waitlist .data-table td[data-label="Actions"] {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
  }
  #page-floor #floor-modebar {
    margin: 0 !important;
    max-width: none !important;
  }
  #page-floor .floor-3col {
    grid-template-columns: minmax(220px, 260px) minmax(540px, 1fr) minmax(230px, 260px) !important;
    gap: 10px !important;
  }
}

/* --------------------------------------------------------------------------
   Final Claude migration completion guard
   Flat paper/olive operational theme + annotated UI cleanup.
   -------------------------------------------------------------------------- */
:root{--ops-paper:var(--paper,#f6f1e3);--ops-surface:var(--surface,#fbf8ed);--ops-panel:var(--surface-2,#efe8d6);--ops-line:var(--line,#cfc6a9);--ops-ink:var(--ink,#0f1609);--ops-muted:var(--ink-2,#62704c);--ops-olive:var(--olive,#6f7f42);}
body,#app,.main,.content,#page-dashboard,#page-bookings,#page-new-booking,#page-tables,#page-floor,#page-analytics,#page-waitlist,#page-public,#page-staff,#page-settings,#page-account,#page-roadmap{background:var(--ops-paper)!important;background-image:none!important;}
.page-surface,.card,.guest-card,.table-wrap,.settings-section,.dashboard-panel,.bookings-table-panel,.floor-col,.waitlist-main,.waitlist-side,.analytics-panel,.stat-card,.staff-card,.modal,#page-floor #floor-modebar{background:var(--ops-surface)!important;background-image:none!important;border:1px solid var(--ops-line)!important;border-radius:0!important;box-shadow:none!important;}
.btn,.btn-sm,.btn-ghost,.icon-btn,.filter-btn,.tab-btn,.chip,.badge,input,select,textarea,.form-input,.form-select,.form-textarea{border-radius:0!important;box-shadow:none!important;}
#page-floor #floor-modebar{margin:0 0 18px!important;max-width:none!important;padding:0!important;border:0!important;background:transparent!important;}
#page-floor #floor-modebar .floor-toolbar,#page-floor .floor-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:14px!important;align-items:start!important;padding:0 0 16px!important;border-bottom:1px solid var(--ops-line)!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;}
#page-floor #floor-modebar .floor-control-row,#page-floor .floor-control-row{grid-column:1/-1!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
#page-floor .floor-3col{align-items:start!important;overflow-x:auto!important;}
#page-floor .floor-plan-wrap{border-radius:0!important;box-shadow:none!important;background:var(--ops-panel)!important;}
#page-floor .floor-table-pill,#page-floor .floor-bk-row-table .chip,#page-floor .floor-selected-card .chip{border-radius:0!important;background:var(--ops-panel)!important;}
#page-floor .floor-walkin-picker{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;}
#page-floor .floor-walkin-section-picker{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
#page-floor .floor-walkin-picker .btn{height:32px!important;padding:0 10px!important;background:transparent!important;border:1px solid var(--ops-line)!important;color:var(--ops-ink)!important;font-weight:700!important;}
#page-floor .floor-walkin-picker .btn.is-active,#page-floor .floor-walkin-picker .btn.active{background:var(--ops-ink)!important;color:var(--ops-surface)!important;border-color:var(--ops-ink)!important;}
#page-floor .floor-audit-panel{max-height:250px!important;overflow:auto!important;border-top:1px solid var(--ops-line)!important;background:var(--ops-surface)!important;}
#page-floor .floor-audit-panel .floor-walkin-card:nth-of-type(n+7){display:none!important;}
#page-floor .floor-audit-panel::after{content:'Showing latest 6 walk-ins';display:block;margin-top:8px;color:var(--ops-muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;}
#page-tables .table-booking-bars{display:flex!important;align-items:center!important;gap:10px!important;width:150px!important;background:transparent!important;overflow:visible!important;}
#page-tables .table-booking-bars span{display:flex!important;flex-direction:row!important;align-items:center!important;gap:4px!important;width:92px!important;min-width:92px!important;height:8px!important;background:transparent!important;overflow:hidden!important;}
#page-tables .table-booking-bars span i{display:block!important;flex:0 0 16px!important;width:16px!important;min-width:16px!important;height:4px!important;min-height:4px!important;max-height:4px!important;margin:0!important;border:0!important;border-top:1px solid var(--ops-line)!important;background:transparent!important;transform:none!important;}
#page-tables .table-booking-bars span i.is-active{border-top:0!important;background:var(--ops-olive)!important;}
#page-tables .table-booking-bars b{display:block!important;min-width:34px!important;font-weight:400!important;color:var(--ops-muted)!important;}

/* Final Claude migration staff waitlist guard */
#page-staff .staff-card{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;min-width:0!important;}
#page-staff .staff-card-main{min-width:0!important;}
#page-staff .staff-card-name,#page-staff .staff-card-email,#page-staff .staff-card-sub{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important;}
#page-staff .staff-card-meta{min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;}
#page-staff .staff-card-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;max-width:min(420px,42vw)!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;padding-bottom:2px!important;}
#page-staff .staff-card-actions .btn{white-space:nowrap!important;flex:0 0 auto!important;}
#page-staff .access-log-wrap{overflow:auto!important;}
#page-waitlist #waitlist-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;}
#page-waitlist .badge-waiting::before,#page-waitlist .badge-notified::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:middle;}
#page-waitlist .data-table{table-layout:fixed!important;}
#page-waitlist .data-table td[data-label="Guest"]>div{min-width:0!important;}
#page-waitlist .data-table td[data-label="Guest"] .avatar{white-space:nowrap!important;word-break:normal!important;letter-spacing:0!important;}
#page-waitlist .data-table td[data-label="Actions"]>div{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;justify-content:flex-end!important;}
#mobile-menu-panel{left:10px!important;right:10px!important;bottom:66px!important;padding:12px!important;background:var(--ops-surface)!important;border:1px solid var(--ops-line)!important;border-radius:0!important;box-shadow:none!important;}
#mobile-menu-panel .mobile-menu-item{display:flex!important;width:100%!important;margin:0!important;padding:12px 10px!important;border:0!important;border-bottom:1px solid var(--ops-line)!important;background:transparent!important;color:var(--ops-ink)!important;justify-content:flex-start!important;text-align:left!important;}
#mobile-menu-panel .mobile-menu-item:last-of-type{border-bottom:0!important;}
#page-public .page-surface,#page-public .booking-preview-card{background:var(--ops-surface)!important;border-radius:0!important;border:1px solid var(--ops-line)!important;box-shadow:none!important;}
#page-analytics .analytics-panel,#page-analytics .chart-card,#page-analytics .stat-card{background:var(--ops-panel)!important;border-radius:0!important;box-shadow:none!important;}
#page-settings .settings-shell{display:grid!important;grid-template-columns:repeat(2,minmax(320px,1fr))!important;gap:18px!important;align-items:start!important;}
#page-settings .settings-column{min-width:0!important;}
#page-settings .settings-section{padding:24px!important;}
#page-settings .settings-section .info-box,#page-settings .setup-box{border-radius:0!important;background:var(--ops-panel)!important;box-shadow:none!important;}

/* Final Claude migration responsive guard */
@media(max-width:1180px){
  #page-settings .settings-shell{grid-template-columns:1fr!important;}
  #page-floor .floor-3col{grid-template-columns:280px minmax(600px,1fr) 280px!important;}
}
@media(max-width:760px){
  .content{padding-left:14px!important;padding-right:14px!important;}
  .topbar{padding-left:16px!important;padding-right:16px!important;}
  #page-dashboard .dashboard-table .data-table thead,#page-bookings .data-table thead{display:none!important;}
  #page-dashboard .dashboard-table .data-table,#page-dashboard .dashboard-table .data-table tbody,#page-bookings .data-table,#page-bookings .data-table tbody{display:block!important;width:100%!important;}
  #page-dashboard .dashboard-table .data-table tr,#page-bookings .data-table tr{display:grid!important;grid-template-columns:56px minmax(0,1fr) 28px 64px 28px!important;gap:6px 8px!important;align-items:center!important;padding:9px 10px!important;border:1px solid var(--ops-line)!important;border-bottom:0!important;background:var(--ops-surface)!important;border-radius:0!important;box-shadow:none!important;}
  #page-dashboard .dashboard-table .data-table tr:last-child,#page-bookings .data-table tr:last-child{border-bottom:1px solid var(--ops-line)!important;}
  #page-dashboard .dashboard-table .data-table td,#page-bookings .data-table td{display:block!important;padding:0!important;border:0!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  #page-dashboard .dashboard-table .data-table td::before,#page-bookings .data-table td::before{content:none!important;display:none!important;}
  #page-dashboard .dashboard-table .data-table td[data-label="Time"],#page-bookings .data-table td[data-label="Time"]{grid-column:1!important;font-weight:700!important;}
  #page-dashboard .dashboard-table .data-table td[data-label="Guest"],#page-bookings .data-table td[data-label="Guest"]{grid-column:2!important;}
  #page-dashboard .dashboard-table .data-table td[data-label="Pax"],#page-bookings .data-table td[data-label="Party"]{grid-column:3!important;text-align:center!important;}
  #page-dashboard .dashboard-table .data-table td[data-label="Status"],#page-bookings .data-table td[data-label="Status"]{grid-column:4!important;}
  #page-dashboard .dashboard-table .data-table td[data-label="Actions"],#page-bookings .data-table td[data-label="Actions"]{grid-column:5!important;justify-self:end!important;}
  #page-dashboard .dashboard-table .data-table td[data-label="Table"],#page-bookings .data-table td[data-label="Table"],#page-bookings .data-table td[data-label="Notes"],#page-bookings .data-table td[data-label="Via"]{display:none!important;}
  #page-dashboard .dashboard-table .data-table .badge,#page-bookings .data-table .badge{display:inline-flex!important;max-width:64px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  #page-waitlist .waitlist-2col{grid-template-columns:1fr!important;}
  #page-waitlist #waitlist-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;}
  #page-waitlist #waitlist-stats .stat-card{padding:12px 10px!important;min-width:0!important;border-right:0!important;}
  #page-waitlist .data-table thead{display:none!important;}
  #page-waitlist .data-table,#page-waitlist .data-table tbody{display:block!important;width:100%!important;}
  #page-waitlist .data-table tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px 10px!important;align-items:center!important;padding:10px!important;border:1px solid var(--ops-line)!important;border-bottom:0!important;background:var(--ops-surface)!important;border-radius:0!important;}
  #page-waitlist .data-table tr:last-child{border-bottom:1px solid var(--ops-line)!important;}
  #page-waitlist .data-table td{display:block!important;padding:0!important;border:0!important;min-width:0!important;}
  #page-waitlist .data-table td::before{content:none!important;display:none!important;}
  #page-waitlist .data-table td[data-label="#"],#page-waitlist .data-table td[data-label="Added"],#page-waitlist .data-table td[data-label="Quoted"],#page-waitlist .data-table td[data-label="Waited"]{display:none!important;}
  #page-waitlist .data-table td[data-label="Guest"]{grid-column:1!important;}
  #page-waitlist .data-table td[data-label="Party"]{grid-column:2!important;justify-self:end!important;font-weight:700!important;}
  #page-waitlist .data-table td[data-label="Status"]{grid-column:1!important;}
  #page-waitlist .data-table td[data-label="Actions"]{grid-column:2!important;justify-self:end!important;}
  #page-waitlist .data-table td[data-label="Actions"] .btn{padding:6px 8px!important;font-size:11px!important;}
  #page-staff .staff-card{grid-template-columns:32px minmax(0,1fr)!important;}
  #page-staff .staff-card-meta{grid-column:1/-1!important;justify-content:flex-start!important;flex-wrap:wrap!important;}
  #page-staff .staff-card-actions{max-width:100%!important;justify-content:flex-start!important;}
  #page-floor #floor-modebar .floor-toolbar,#page-floor .floor-toolbar{display:block!important;}
  #page-floor .floor-3col{grid-template-columns:260px minmax(620px,1fr) 270px!important;gap:10px!important;}
}
@media(max-width:520px){
  #page-dashboard .dashboard-table .data-table tr,#page-bookings .data-table tr{grid-template-columns:52px minmax(0,1fr) 24px 58px 26px!important;padding:8px!important;}
  #page-dashboard .dashboard-table .data-table td[data-label="Guest"] .muted,#page-bookings .data-table td[data-label="Guest"] .muted{display:none!important;}
  #page-waitlist #waitlist-stats{grid-template-columns:1fr!important;}
  #page-waitlist #waitlist-stats .stat-card{border-bottom:1px solid var(--ops-line)!important;}
}

/* ════════════════════════════════════════════════════════════════════
   PR #21 — Hours & service tab + Billing tab + Roadmap + Account
   ════════════════════════════════════════════════════════════════════ */

/* Settings — fluid tabs (Hours/Billing) span full settings column */
.settings-section-fluid { padding: 0; background: transparent; border: 0; }
.settings-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px) {
  .settings-twocol { grid-template-columns: 1fr; }
}

/* Hours & Billing tabs: collapse the 2-column settings-shell to a single
   full-width column so the inner .settings-twocol gets the whole shell
   width to split between its two cards. Without this, the Hours/Billing
   section sits inside one half of the shell grid and the .settings-twocol
   then splits that half again — producing two cramped 150-180px cards.
   Using `display: contents` on the column lets the fluid section
   participate in the shell grid directly. Other tabs are unaffected. */
#page-settings[data-settings-tab="hours"] .settings-shell,
#page-settings[data-settings-tab="billing"] .settings-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}
#page-settings[data-settings-tab="hours"] .settings-column,
#page-settings[data-settings-tab="billing"] .settings-column {
  display: contents !important;
}
.settings-card {
  background: var(--surface, var(--paper));
  border: 1px solid var(--line);
  padding: 20px;
}

/* Hours list */
.settings-hours-list { display: grid; gap: 0; margin-top: 8px; }
.settings-hours-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.settings-hours-row:last-child { border-bottom: 0; }
.settings-hours-day {
  font-size: 13px;
  color: var(--ink);
}
.settings-hours-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-hours-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: var(--bg-alt, var(--paper2));
  color: var(--ink);
  white-space: nowrap;
}
.settings-hours-tag.is-closed {
  opacity: 0.45;
  font-style: italic;
}

/* Holidays / exceptions list */
.settings-holidays-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.settings-holiday-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-alt, var(--paper2));
  border: 1px solid var(--line);
}
.settings-holiday-date {
  font-size: 11px;
  color: var(--persimmon, #c4633a);
  letter-spacing: 0.04em;
}
.settings-holiday-name { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.settings-holiday-action { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.settings-holiday-edit {
  width: 26px; height: 26px;
  font-size: 14px;
  line-height: 1;
}
.settings-add-exception {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}

/* Billing — plan card */
.settings-plan-name {
  font-family: var(--font-display);
  font-size: 32px;
  margin-top: 4px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.settings-plan-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.5;
}
.settings-divider {
  border-top: 1px solid var(--line);
  margin: 16px 0;
}
.settings-billing-lines { display: grid; gap: 10px; font-size: 12px; }
.settings-billing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.settings-billing-meta { min-width: 0; }
.settings-billing-label { color: var(--ink); }
.settings-billing-sub { color: var(--ink-3); font-size: 10.5px; margin-top: 1px; }
.settings-billing-value { font-size: 12px; color: var(--ink); }
.settings-billing-divider { border-top: 1px solid var(--line); margin: 4px 0; }
.settings-billing-total strong { color: var(--ink); font-size: 12.5px; }
.settings-billing-total-val { color: var(--persimmon, #c4633a); }

/* Guest profile modal — read-only aggregate from state.bookings */
.guest-contact-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; flex-wrap: wrap; }
.guest-contact-row a { color: var(--accent); text-decoration: none; }
.guest-contact-row a:hover { text-decoration: underline; }
.guest-flags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.guest-flag { display: inline-block; padding: 3px 9px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; border-radius: 0; border: 1px solid var(--line); color: var(--ink); background: var(--paper); text-transform: uppercase; }
.guest-flag-vip { background: var(--gold-bg); color: var(--gold); border-color: var(--gold); }
.guest-flag-diet { background: var(--green-bg); color: var(--green); border-color: var(--green); text-transform: none; letter-spacing: 0; font-weight: 500; }
.guest-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 12px 0 8px; }
.guest-stat { padding: 10px 12px; border: 1px solid var(--line); background: var(--paper); }
.guest-stat-label { font-size: 10.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.guest-stat-value { font-size: 18px; color: var(--ink); font-weight: 600; }
.guest-stat-accent { border-color: var(--gold); background: var(--gold-bg); }
.guest-stat-accent .guest-stat-value { color: var(--gold); }
.guest-stat-warn { border-color: var(--red); background: var(--red-bg); }
.guest-stat-warn .guest-stat-value { color: var(--red); }
.guest-first-seen { font-size: 11px; margin-top: 2px; }
.guest-history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.guest-history-table thead th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink3); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.guest-history-table tbody td { padding: 8px; border-bottom: 1px solid var(--line); }
.guest-history-table tbody tr:last-child td { border-bottom: none; }
.guest-hist-status { display: inline-block; padding: 2px 7px; font-size: 10.5px; border-radius: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); text-transform: capitalize; }
.guest-hist-status-confirmed { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.guest-hist-status-seated, .guest-hist-status-completed { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.guest-hist-status-cancelled, .guest-hist-status-rejected { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.guest-hist-status-noshow { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.guest-hist-status-pending { background: var(--paper2); color: var(--ink2); }

/* Compact "5 visits" badge shown next to the guest name in booking rows */
.guest-visits-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 600; background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold); cursor: pointer; user-select: none; }
.guest-visits-badge:hover { background: var(--gold); color: #fff; }

/* Time blockout — section selector checkboxes */
.blockout-sections {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink2);
}
.blockout-sections label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.blockout-sections input[type="checkbox"] { margin: 0; }
.blockout-sections-label { color: var(--ink3); margin-left: 6px; font-size: 11px; }

/* Time blockout — active dashboard quick blockout button (clickable to clear) */
.btn.btn-active-blockout {
  background: var(--accent-soft, #fff0df) !important;
  color: var(--accent, #d35c2f) !important;
  border-color: var(--accent, #d35c2f) !important;
}
.settings-billing-row-actions { display: flex; align-items: center; gap: 6px; }
.settings-billing-add-row { margin-top: 8px; display: flex; justify-content: flex-end; }
.settings-billing-row-edit { padding: 8px 0; }
.settings-billing-edit-form {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 8px;
  width: 100%;
  align-items: center;
}
.settings-billing-edit-form .form-input { font-size: 12px; padding: 6px 8px; }
.settings-billing-edit-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .settings-billing-edit-form { grid-template-columns: 1fr; }
}

/* Billing — invoices */
.settings-invoices-list { display: grid; gap: 0; font-size: 12px; }
.settings-invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.settings-invoice-row:last-child { border-bottom: 0; }
.settings-invoice-month { color: var(--ink); }
.settings-invoice-issued { color: var(--ink-3); font-size: 10.5px; margin-top: 1px; }
.settings-invoice-actions { display: flex; align-items: center; gap: 14px; }
.settings-invoice-amt { color: var(--ink); }

/* Roadmap — editorial board */
.roadmap-shell {
  max-width: 880px;
  display: grid;
  gap: 16px;
}
.roadmap-intro { padding-bottom: 4px; }
.roadmap-board { display: grid; gap: 22px; }
.roadmap-section { display: grid; gap: 10px; }
.roadmap-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.roadmap-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.roadmap-section-count {
  font-size: 11px;
  color: var(--ink-3);
}
.roadmap-list { display: grid; gap: 6px; }
.roadmap-card {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--surface, var(--paper));
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.roadmap-card:hover {
  border-color: var(--ink);
  background: var(--bg-alt, var(--paper2));
}
.roadmap-card-rule {
  width: 4px;
  align-self: stretch;
  display: block;
  min-height: 32px;
}
.roadmap-card-body { min-width: 0; }
.roadmap-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.roadmap-card-done .roadmap-card-title {
  text-decoration: line-through;
  opacity: 0.55;
}
.roadmap-card-notes {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.55;
}
.roadmap-card-status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid currentColor;
  white-space: nowrap;
  align-self: center;
}

/* Account — editorial */
.account-shell {
  display: grid;
  gap: 14px;
  max-width: 640px;
}
.account-identity-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  background: var(--surface, var(--paper));
  border: 1px solid var(--line);
  padding: 18px 20px;
}
.account-avatar {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  background: var(--surface-2, var(--bg-alt));
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.account-identity-meta { min-width: 0; display: grid; gap: 4px; }
.account-identity-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.account-identity-email {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.account-identity-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.account-card {
  background: var(--surface, var(--paper));
  border: 1px solid var(--line);
  padding: 20px;
}
.account-card-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.account-card-title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.account-card-sub {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.55;
}
.account-form { display: grid; gap: 14px; }
.account-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}