/* ─────────────────────────────────────────────────────────────
   ADMIN DASHBOARD — shares brand tokens with the public site
   (--black/--deep/--char/--gold/--amber/--ember/--cream/--mist)
   so the control panel feels like part of the same restaurant,
   not a generic bolt-on admin template.
───────────────────────────────────────────────────────────── */

:root {
  --black: #0a0805;
  --deep: #110e09;
  --char: #1c1710;
  --gold: #E8A020;
  --amber: #C97B1A;
  --ember: #E84320;
  --cream: #F5EDD6;
  --mist: #8a7f6e;
  --white: #fdfaf4;
  --success: #2ECC71;
  --hotel-accent: #6EC1E4;
  --danger: #E84320;

  --sidebar-w: 240px;
  --topbar-h: 68px;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* SAFETY NET: if anything (a wide table, a long unbroken string) ever
   pokes past the screen edge, the whole page must not scroll sideways
   with it — that's what pushed the sidebar off-screen in the Orders
   table bug above. `clip` (unlike `hidden`) keeps position:sticky/fixed
   elements (topbar, sidebar) working normally. */
html, body { overflow-x: clip; }
img, svg { max-width: 100%; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--deep);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: .03em; margin: 0; }

/* ── Focus visibility (accessibility floor) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ─────────────────────────────────────────────────────────────
   LOGIN PAGE
───────────────────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at top, rgba(232,160,32,.08) 0%, transparent 55%),
    var(--black);
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--char);
  border: 1px solid rgba(232,160,32,.15);
  border-radius: 16px;
  padding: 2.6rem 2.2rem;
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--ember), var(--gold));
}
.login-eyebrow {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: .6rem;
}
.login-title {
  font-size: 2.4rem; color: var(--white); line-height: 1; margin-bottom: .4rem;
}
.login-title span { color: var(--gold); }
.login-sub {
  font-size: .82rem; color: var(--mist); margin-bottom: 2rem; line-height: 1.5;
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mist); margin-bottom: .45rem; font-weight: 600;
}
.field input {
  width: 100%;
  background: var(--deep);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: .8rem .9rem;
  color: var(--white);
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
}
.field input:focus { outline: none; border-color: var(--gold); }
.field input::placeholder { color: var(--mist); }

.login-error {
  min-height: 1.2em;
  font-size: .78rem;
  color: var(--ember);
  margin-bottom: .8rem;
}

.btn-primary-full {
  width: 100%;
  background: var(--gold); color: var(--black);
  border: none; border-radius: 8px;
  padding: .85rem 1rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn-primary-full:hover:not(:disabled) { background: var(--amber); transform: translateY(-1px); }
.btn-primary-full:disabled { opacity: .6; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────
   APP SHELL (sidebar + topbar + content)
───────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--black);
  border-right: 1px solid rgba(255,255,255,.06);
  /* height (not min-height) + overflow:hidden caps the sidebar to exactly
     one viewport tall, so a full nav list can't push it taller than the
     screen — .sidebar-nav below is the one part that actually scrolls. */
  height: 100vh;
  overflow: hidden;
  position: -webkit-sticky; position: sticky; top: 0;
  display: flex; flex-direction: column;
  padding: 1.6rem 0;
}
.sidebar-brand {
  position: relative;
  flex-shrink: 0;
  padding: 0 1.4rem 1.4rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-close-btn { display: none; }
.sidebar-overlay { display: none; }
.sidebar-brand-mark {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem; letter-spacing: .04em; color: var(--gold);
  line-height: 1;
}
.sidebar-brand-sub {
  display: block;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist); margin-top: .35rem;
}
.sidebar-nav {
  flex: 1;
  min-height: 0; /* lets it actually shrink below content size instead of pushing .sidebar taller */
  display: flex; flex-direction: column; gap: .15rem;
  padding: .4rem .7rem;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; /* scrolling to the end of the nav won't also scroll the page behind it */
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS Safari */
}
.sidebar-section-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,237,214,.35);
  padding: 1rem .7rem .35rem;
}
.sidebar-section-label:first-child { padding-top: .4rem; }
.sidebar-link {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .8rem;
  border-radius: 8px;
  font-size: .84rem; font-weight: 500;
  color: rgba(245,237,214,.6);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.sidebar-icon { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-link:hover { color: var(--white); background: rgba(255,255,255,.04); }
.sidebar-link.active {
  color: var(--gold);
  background: rgba(232,160,32,.1);
}

/* ── Themed scrollbar — gold, matching the chat panes below.
   scrollbar-color covers Firefox; the ::-webkit-scrollbar-* rules cover
   Chrome/Edge/Safari. Only kicks in once the nav list is tall enough to
   overflow — invisible/inert otherwise. ── */
.sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  background-image: linear-gradient(var(--gold), var(--amber));
  border-radius: 999px;
  border: 2px solid var(--black); /* padding illusion so the thumb never touches the edge */
  background-clip: padding-box;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background-image: none;
  background-color: var(--amber);
}

/* Main column */
.main-column { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar
   NOTE: the sticky positioning lives on #topbar-container (the wrapper
   layout.js injects the <header> into), not on .topbar itself. A sticky
   element can only stay pinned within the bounds of its OWN parent's
   box — and #topbar-container, styled with nothing, would otherwise be
   exactly 68px tall (matching .topbar, its only child) sitting right at
   the top of the page. With zero extra height in that immediate parent,
   .topbar had nowhere to "stick" and just scrolled away with the rest
   of the page. #topbar-container's own parent, .main-column, spans the
   full page height (it also contains <main class="page-content">), so
   moving the sticky rule up one level onto #topbar-container gives it
   real room to stay pinned while everything below scrolls underneath. */
#topbar-container {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 10;
}
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: var(--deep);
}
.topbar-left { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.topbar-title {
  font-size: 1.5rem; color: var(--white); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-user { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.topbar-email { font-size: .8rem; color: var(--mist); white-space: nowrap; }

/* Hamburger — hidden on desktop, shown once the sidebar becomes an
   off-canvas drawer (see the 900px breakpoint below). */
.hamburger-btn {
  display: none;
  flex-shrink: 0;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px; color: var(--cream); cursor: pointer;
  padding: 0;
}
.hamburger-btn svg { width: 18px; height: 18px; }
.hamburger-btn:hover { border-color: var(--gold); color: var(--gold); }

/* Chat "back to conversations" button — mobile only (see chat page rules). */
.chat-back-btn {
  display: none;
  flex-shrink: 0;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px; color: var(--cream); cursor: pointer;
  padding: 0;
}
.chat-back-btn svg { width: 18px; height: 18px; }
.chat-back-btn:hover { border-color: var(--gold); color: var(--gold); }
.btn-logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--cream);
  border-radius: 7px;
  padding: .5rem 1rem;
  font-size: .76rem; font-weight: 500; letter-spacing: .03em;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-logout:hover { border-color: var(--gold); color: var(--gold); background: rgba(232,160,32,.06); }

/* ── STORE STATUS TOGGLE (topbar — writes siteSettings/storeStatus) ── */
.store-status-toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  border-radius: 99px; padding: .45rem 1rem .45rem .8rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .03em;
  border: 1px solid rgba(255,255,255,.14);
  background: transparent; color: var(--mist);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, opacity .2s;
}
.store-status-toggle:disabled { opacity: .5; cursor: default; }
.store-status-toggle .sst-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mist); flex-shrink: 0;
}
.store-status-toggle.open {
  border-color: rgba(46,204,113,.35); color: var(--success); background: rgba(46,204,113,.08);
}
.store-status-toggle.open .sst-dot { background: var(--success); }
.store-status-toggle.closed {
  border-color: rgba(232,67,32,.35); color: #ff8462; background: rgba(232,67,32,.08);
}
.store-status-toggle.closed .sst-dot { background: var(--ember); }
.store-status-toggle:not(:disabled):hover { filter: brightness(1.15); }

/* Content area */
.page-content { padding: 2rem; flex: 1; }

/* Generic content pieces used across admin pages/phases */
.panel {
  background: var(--char);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.panel + .panel { margin-top: 1.2rem; }

.stub-panel {
  background: var(--char);
  border: 1px dashed rgba(232,160,32,.25);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--mist);
}
.stub-panel h2 { color: var(--white); font-size: 1.8rem; margin-bottom: .6rem; }
.stub-panel p { font-size: .85rem; max-width: 420px; margin: 0 auto; line-height: 1.6; }
.stub-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(232,160,32,.12); border: 1px solid rgba(232,160,32,.22);
  border-radius: 99px; padding: .3rem .9rem;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 1rem;
}

.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-bottom: 1.4rem;
}
.stat-card {
  background: var(--char);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}
.stat-card .num { font-family: 'Bebas Neue', sans-serif; font-size: 2.1rem; color: var(--gold); line-height: 1; }
.stat-card .label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-top: .4rem; }

/* ─────────────────────────────────────────────────────────────
   DASHBOARD — Revenue Overview / Weekly Chart / Transactions
───────────────────────────────────────────────────────────── */

.dash-live-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mist); font-weight: 600;
}
.dash-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 rgba(46,204,113,.5);
  animation: dash-pulse 1.8s ease-in-out infinite;
}
@keyframes dash-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,204,113,.45); }
  70% { box-shadow: 0 0 0 6px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

.dash-revenue-grid { margin-bottom: .6rem; }
.stat-card-accent { border-color: rgba(232,160,32,.3); }
.stat-delta {
  font-size: .72rem; font-weight: 600; margin-top: .55rem; min-height: 1em;
}
.stat-delta-up { color: var(--success); }
.stat-delta-down { color: #ff8462; }

.dash-hint {
  font-size: .76rem; color: var(--mist); line-height: 1.55;
  margin: 0 0 1.4rem; max-width: 640px;
}

.dash-chart-panel { margin-bottom: .4rem; }
.dash-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem;
}
.dash-panel-head h3 { font-size: 1.15rem; color: var(--white); }

.week-bar-chart {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .9rem;
  align-items: end; height: 200px;
}
.week-bar-col {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%;
}
.week-bar-value {
  font-size: .68rem; font-weight: 700; color: var(--cream); margin-bottom: .4rem;
  min-height: 1em; white-space: nowrap;
}
.week-bar-track {
  width: 100%; max-width: 42px; flex: 1;
  background: rgba(255,255,255,.05); border-radius: 6px 6px 3px 3px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.week-bar-fill {
  width: 100%; background: linear-gradient(180deg, var(--amber), var(--gold));
  border-radius: 6px 6px 3px 3px;
  transition: height .4s ease;
}
.week-bar-fill.is-best { background: linear-gradient(180deg, var(--gold), #ffd873); }
.week-bar-label {
  font-size: .7rem; color: var(--mist); margin-top: .6rem; letter-spacing: .04em;
}
.week-bar-col.is-today .week-bar-label { color: var(--gold); font-weight: 700; }
.week-bar-col.is-today .week-bar-track { box-shadow: 0 0 0 1px rgba(232,160,32,.3); }

/* ── Needs Your Attention ── */
.attention-list { display: flex; flex-direction: column; }
.attention-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem .2rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .15s, padding-left .15s;
}
.attention-row:last-child { border-bottom: none; }
.attention-row:hover { background: rgba(232,160,32,.05); padding-left: .5rem; }
.attention-count {
  flex-shrink: 0; min-width: 28px; height: 28px; padding: 0 .4rem;
  border-radius: 8px; background: rgba(232,160,32,.15); color: var(--gold);
  font-weight: 700; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}
.attention-text { flex: 1; font-size: .86rem; color: var(--cream); }
.attention-arrow { color: var(--mist); font-size: .9rem; }
.attention-row:hover .attention-arrow { color: var(--gold); }

/* ── Two-column dashboard panels (Fulfilment/Payment, Top Items/Front Desk) ── */
.dash-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.dash-subpanel-title {
  font-size: .95rem; color: var(--white); margin-bottom: 1.2rem;
  display: flex; align-items: baseline; gap: .5rem;
}
.dash-subpanel-note { font-size: .68rem; color: var(--mist); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }

/* Mini bar charts (Fulfilment / Payment Methods) */
.mini-bar-group { display: flex; flex-direction: column; gap: .9rem; }
.mini-bar-row { display: grid; grid-template-columns: 90px 1fr 74px; align-items: center; gap: .8rem; }
.mini-bar-label { font-size: .78rem; color: rgba(245,237,214,.75); }
.mini-bar-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,.05); overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--amber), var(--gold)); }
.mini-bar-value { font-size: .74rem; color: var(--mist); text-align: right; white-space: nowrap; }

/* Top Selling Items */
.top-items-list { display: flex; flex-direction: column; gap: .1rem; }
.top-item-row { display: flex; align-items: center; gap: .9rem; padding: .7rem .1rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.top-item-row:last-child { border-bottom: none; }
.top-item-rank {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--deep); border: 1px solid rgba(232,160,32,.25); color: var(--gold);
  font-family: 'Bebas Neue', sans-serif; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.top-item-name { font-size: .85rem; color: var(--cream); font-weight: 500; }
.top-item-sub { font-size: .74rem; color: var(--mist); margin-top: .15rem; }

/* Front Desk — Today */
.frontdesk-block { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.frontdesk-col-label {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: .8rem;
}
.frontdesk-list { display: flex; flex-direction: column; gap: .8rem; }
.frontdesk-row { padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.frontdesk-row:last-child { border-bottom: none; padding-bottom: 0; }

/* ── Monthly Revenue — Hotel vs Restaurant ── */
.dash-monthly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.stat-card-hotel { border-color: rgba(110,193,228,.3); }
.stat-card-hotel .num { color: var(--hotel-accent); }

.monthly-legend { display: flex; gap: 1.2rem; }
.legend-item { display: flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--mist); }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.legend-dot-restaurant { background: linear-gradient(180deg, var(--amber), var(--gold)); }
.legend-dot-hotel { background: var(--hotel-accent); }

.monthly-chart {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
  align-items: end; height: 200px;
}
.monthly-col {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%;
}
.monthly-bars {
  display: flex; align-items: flex-end; gap: .35rem; height: 100%; width: 100%;
  justify-content: center;
}
.monthly-bar-track {
  width: 100%; max-width: 20px; height: 100%;
  background: rgba(255,255,255,.05); border-radius: 5px 5px 2px 2px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.monthly-bar-fill { width: 100%; border-radius: 5px 5px 2px 2px; transition: height .4s ease; }
.monthly-bar-fill.restaurant { background: linear-gradient(180deg, var(--amber), var(--gold)); }
.monthly-bar-fill.hotel { background: linear-gradient(180deg, var(--hotel-accent), #3f8fb3); }
.monthly-label { font-size: .7rem; color: var(--mist); margin-top: .6rem; letter-spacing: .03em; }
.monthly-col.is-current .monthly-label { color: var(--white); font-weight: 700; }


/* ─────────────────────────────────────────────────────────────
   CRUD SCREENS — shared by Menu, Specials, Gallery, etc.
───────────────────────────────────────────────────────────── */

.page-error {
  background: rgba(232,67,32,.12);
  border: 1px solid rgba(232,67,32,.35);
  color: var(--cream);
  border-radius: 8px;
  padding: .8rem 1.1rem;
  font-size: .82rem;
  margin-bottom: 1.2rem;
}

.page-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.2rem;
}

.section-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem;
  margin: 2rem 0 1.2rem;
}
.section-header h2 { font-size: 1.6rem; color: var(--white); }
.dash-txn-header-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* ── Full Transaction History modal ── */
.history-modal-controls {
  display: flex; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap;
  margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.06);
}
.history-control-label {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: .5rem;
}
.history-modal-body { max-height: 62vh; overflow-y: auto; padding-right: .3rem; }
.history-group { margin-bottom: 1.8rem; }
.history-group:last-child { margin-bottom: 0; }
.history-group-header {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .7rem;
}
.history-group-label { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: .03em; color: var(--white); }
.history-group-meta { font-size: .76rem; color: var(--mist); }
.history-group-total { color: var(--gold); font-weight: 700; }
.history-group-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); }
.history-group .data-table { margin: 0; }

/* Segmented filter control */
.segmented {
  display: inline-flex; gap: .2rem;
  background: var(--char); border: 1px solid rgba(255,255,255,.06);
  border-radius: 9px; padding: .3rem;
  flex-wrap: wrap;
}
.segmented button {
  border: none; background: transparent; color: rgba(245,237,214,.55);
  font-size: .74rem; font-weight: 500; letter-spacing: .04em;
  padding: .5rem .9rem; border-radius: 6px; cursor: pointer;
  transition: background .2s, color .2s;
}
.segmented button:hover { color: var(--white); }
.segmented button.active { background: var(--gold); color: var(--black); }

/* Small search box used in page toolbars (e.g. Customers) */
.toolbar-search {
  background: var(--char); border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; padding: .6rem .9rem;
  font-size: .82rem; color: var(--white); font-family: 'Inter', sans-serif;
  min-width: 240px;
}
.toolbar-search::placeholder { color: var(--mist); }
.toolbar-search:focus { outline: none; border-color: var(--gold); }

/* Small round initials avatar used in table cells (e.g. Customers) */
.cell-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--deep); color: var(--gold); border: 1px solid rgba(232,160,32,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700;
}

/* Buttons */
.btn-primary-sm {
  background: var(--gold); color: var(--black);
  border: none; border-radius: 7px;
  padding: .65rem 1.1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s, transform .2s;
  white-space: nowrap;
}
.btn-primary-sm:hover { background: var(--amber); transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--cream);
  border-radius: 7px;
  padding: .65rem 1.1rem;
  font-size: .78rem; font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }

.btn-primary {
  background: var(--gold); color: var(--black);
  border: none; border-radius: 7px;
  padding: .75rem 1.3rem;
  font-size: .82rem; font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.btn-primary:hover:not(:disabled) { background: var(--amber); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* Data table
   FIX: tables (Orders especially, now with extra Fulfilment/Location and
   Total/Delivery Fee columns) could get wider than the panel at ANY
   screen width, not just phones — and with nothing to contain that
   overflow, the whole page scrolled sideways instead, dragging the
   fixed sidebar off-screen (only a sliver of its badges stayed visible
   on the left). The table's own panel now scrolls horizontally on its
   own, at every width, so the sidebar and rest of the page never move. */
.panel:has(.data-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: max-content; border-collapse: collapse; }
.data-table th {
  text-align: left; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist); font-weight: 600;
  padding: 0 .8rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.data-table td {
  padding: .8rem; font-size: .84rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255,255,255,.02); }

.cell-item { display: flex; align-items: center; gap: .8rem; }
.cell-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--deep); }
.cell-thumb-empty { border: 1px dashed rgba(255,255,255,.12); }
.cell-title { font-weight: 600; color: var(--white); }
.cell-sub { font-size: .74rem; color: var(--mist); margin-top: .15rem; }
.cell-actions { text-align: right; white-space: nowrap; }
.was-price { color: var(--mist); text-decoration: line-through; }

.pill {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  padding: .25rem .65rem; border-radius: 99px;
}
.pill-gold { background: rgba(232,160,32,.15); color: var(--gold); }
.pill-mist { background: rgba(255,255,255,.06); color: var(--mist); }
.pill-success { background: rgba(46,204,113,.14); color: var(--success); }
.pill-danger { background: rgba(232,67,32,.14); color: #ff8462; }

.icon-btn {
  width: 32px; height: 32px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.1); background: var(--deep);
  color: var(--cream); font-size: .85rem; cursor: pointer;
  margin-left: .4rem;
  transition: border-color .2s, color .2s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn-danger:hover { border-color: var(--ember); color: var(--ember); }

.empty-state, .empty-state-small {
  text-align: center; color: var(--mist); font-size: .82rem;
  padding: 2rem 1rem;
}
.empty-state-small { padding: .8rem; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,8,5,.75);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 1rem;
  overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }
.modal {
  width: 100%; max-width: 520px;
  background: var(--char);
  border: 1px solid rgba(232,160,32,.18);
  border-radius: 14px;
  padding: 1.8rem;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.4rem;
}
.modal-header h3 { font-size: 1.5rem; color: var(--white); }
.modal-close {
  background: transparent; border: none; color: var(--mist);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .2rem .5rem;
}
.modal-close:hover { color: var(--gold); }
.modal-actions { display: flex; justify-content: flex-end; gap: .8rem; margin-top: 1.4rem; }
.modal-wide { max-width: 920px; }

.field textarea, .field select {
  width: 100%;
  background: var(--deep);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: .8rem .9rem;
  color: var(--white);
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
}
.field textarea { resize: vertical; min-height: 70px; }
.field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox-field { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.checkbox-field input { accent-color: var(--gold); width: 16px; height: 16px; }
.checkbox-field label { font-size: .82rem; color: var(--cream); text-transform: none; letter-spacing: 0; font-weight: 500; }

.checklist-box {
  max-height: 180px; overflow-y: auto;
  border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  padding: .6rem .8rem; background: var(--deep);
}
.checklist-row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; font-size: .84rem; }
.checklist-row input { accent-color: var(--gold); width: 15px; height: 15px; }

.form-error {
  min-height: 1.2em; font-size: .78rem; color: var(--ember); margin: -.4rem 0 .8rem;
}

/* Image input: file upload + URL fallback + live preview */
.image-preview {
  width: 100%; height: 140px; border-radius: 8px;
  background: var(--deep); border: 1px dashed rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: .7rem;
}
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
/* Video preview (Gallery "Videos" tab, Settings hero-video clip) — same
   box as the image preview, just taller so the native <video> controls
   bar has room, and object-fit:contain so controls aren't cropped off
   a portrait/vertical clip the way object-fit:cover would crop them. */
.image-preview:has(video) { height: 220px; }
.image-preview video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.image-preview span { font-size: .76rem; color: var(--mist); padding: 0 1rem; text-align: center; }
.image-input-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.file-btn { cursor: pointer; white-space: nowrap; display: inline-block; }
.image-input-or { font-size: .72rem; color: var(--mist); white-space: nowrap; }
.image-input-actions input[type="url"] {
  flex: 1; min-width: 160px;
  background: var(--deep); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: .7rem .85rem;
  color: var(--white); font-size: .82rem; font-family: 'Inter', sans-serif;
}
.image-input-actions input[type="url"]:focus { outline: none; border-color: var(--gold); }
.upload-status { font-size: .74rem; color: var(--gold); margin-top: .5rem; min-height: 1.1em; }

/* Responsive */

body.no-scroll { overflow: hidden; }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }

  /* Sidebar becomes a fixed off-canvas drawer instead of a cramped
     horizontal icon strip, opened via the topbar hamburger button. */
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 210;
    width: min(280px, 84vw); height: 100vh;
    overflow: hidden;
    flex-direction: column; align-items: stretch;
    padding: 1.6rem 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 12px 0 32px rgba(0,0,0,.45);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-brand {
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-right: none;
    padding: 0 1.4rem 1.4rem;
    margin-bottom: .8rem;
  }
  .sidebar-close-btn {
    display: block;
    position: absolute; top: -.3rem; right: 0;
    background: transparent; border: none; color: var(--mist);
    font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .3rem .5rem;
  }
  .sidebar-close-btn:hover { color: var(--gold); }
  .sidebar-nav { flex-direction: column; padding: .4rem .7rem; }
  .sidebar-link span { display: inline; }
  .sidebar-section-label { display: block; }

  .sidebar-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 200;
    background: rgba(10,8,5,.65);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .sidebar-overlay.open { opacity: 1; pointer-events: auto; }

  .hamburger-btn { display: inline-flex; }

  /* Reinforce stickiness on mobile: sit above ordinary in-page content
     (data tables, panels, filter bars all default to the page's normal
     stacking order), but stay below modal overlays (z-index 100) and
     the off-canvas sidebar (200/210) so neither gets covered by a
     "stuck" topbar. z-index has to go on #topbar-container itself
     (the actual sticky/positioned element) — setting it on the plain,
     unpositioned .topbar inside would be a no-op. */
  #topbar-container { z-index: 50; }
  .topbar {
    padding: 0 1.2rem; gap: .8rem;
    /* Blur + shadow once there's content scrolled underneath it, so it
       visually reads as "pinned" instead of blending into whatever's
       now behind it. */
    background: rgba(17,14,9,.92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
  }
  .page-content { padding: 1.2rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .dash-revenue-grid { grid-template-columns: 1fr 1fr; }
  .dash-two-col { grid-template-columns: 1fr; }
  .monthly-chart { height: 160px; }
  .week-bar-chart { height: 160px; }
  .field-row { grid-template-columns: 1fr; }
  /* Scrolling itself now comes from .panel:has(.data-table) above, at
     every width — this just keeps single-line cells (dates, prices,
     statuses) compact on phones instead of wrapping awkwardly. Cells
     with real paragraphs (Items, Location) set their own white-space
     back to normal below so they don't turn into one giant unreadable line. */
  .data-table { white-space: nowrap; }
  .data-table .cell-notes, .data-table .cell-sub, .data-table .cell-title { white-space: normal; }
  .week-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .topbar-title { font-size: 1.2rem; }
  .topbar { padding: 0 .9rem; }
  .topbar-user { gap: .6rem; }
  .topbar-email { display: none; }
  .store-status-toggle .sst-text { display: none; }
  .store-status-toggle { padding: .5rem; border-radius: 50%; }
  .btn-logout { padding: .5rem .75rem; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .stat-card { padding: 1rem 1.1rem; }
  .stat-card .num { font-size: 1.7rem; }

  .dash-revenue-grid { grid-template-columns: 1fr 1fr; }
  .dash-panel-head { flex-direction: column; align-items: flex-start; }
  .week-bar-chart { height: 140px; gap: .4rem; }
  .week-bar-value { font-size: .6rem; }
  .week-bar-label { font-size: .62rem; }
  .week-bar-track { max-width: 30px; }

  .mini-bar-row { grid-template-columns: 76px 1fr 64px; gap: .5rem; }
  .frontdesk-block { grid-template-columns: 1fr; gap: 1.2rem; }
  .attention-row { gap: .6rem; }
  .attention-text { font-size: .8rem; }

  .dash-monthly-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .monthly-chart { height: 140px; gap: .5rem; }
  .monthly-bar-track { max-width: 14px; }
  .monthly-label { font-size: .62rem; }
  .monthly-legend { gap: .8rem; }

  .page-toolbar { flex-direction: column; align-items: stretch; }
  .page-toolbar > * { width: 100%; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; text-align: center; }
  .toolbar-search { min-width: 0; width: 100%; }
  .btn-primary-sm { width: 100%; text-align: center; }

  .section-header { flex-direction: column; align-items: stretch; gap: .8rem; }
  .section-header .btn-primary-sm { width: 100%; }

  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { max-width: none; min-height: 100%; border-radius: 0; padding: 1.4rem; }
  .modal-actions { flex-direction: column-reverse; gap: .6rem; }
  .modal-actions button { width: 100%; }
  .modal-actions-split { flex-direction: column-reverse; align-items: stretch; gap: .8rem; }

  .image-input-actions { flex-direction: column; align-items: stretch; }
  .image-input-actions input[type="url"] { min-width: 0; width: 100%; }
  .image-input-or { text-align: center; }

  .week-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .hh-save-row { flex-direction: column; align-items: stretch; gap: .6rem; }

  .cell-notes { max-width: 140px; }
  /* Keep more room than the generic .cell-notes here too — the table
     already scrolls horizontally (see .panel:has(.data-table) above),
     so there's no need to squeeze a full order's items into 140px. */
  .cell-items { max-width: 220px; }
}

@media (max-width: 420px) {
  .week-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .dash-revenue-grid { grid-template-columns: 1fr; }
  .dash-monthly-grid { grid-template-columns: 1fr; }
  .login-card { padding: 2rem 1.3rem; }
}

/* ─────────────────────────────────────────────────────────────
   SPECIALS PAGE — weekly schedule + happy hour
───────────────────────────────────────────────────────────── */

.page-intro { font-size: .82rem; color: var(--mist); max-width: 640px; margin: -.6rem 0 1.6rem; line-height: 1.6; }

.week-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.day-card {
  background: var(--char);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s;
}
.day-card:hover { border-color: rgba(232,160,32,.25); }
.day-card-img { position: relative; height: 110px; background: var(--deep); }
.day-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.day-card-img-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mist); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.day-card-label {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(10,8,5,.75); color: var(--gold);
  font-family: 'Bebas Neue', sans-serif; font-size: .95rem; letter-spacing: .06em;
  padding: .2rem .6rem; border-radius: 5px;
}
.day-card-body { padding: .9rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; }
.day-card-theme { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .3rem; }
.day-card-title { font-size: .88rem; font-weight: 600; color: var(--white); line-height: 1.3; }
.day-card-empty-msg { font-size: .76rem; color: var(--mist); flex: 1; margin: .3rem 0 .8rem; }
.day-card-prices { display: flex; align-items: baseline; gap: .5rem; margin: .5rem 0 .8rem; }
.day-card-prices .was { font-size: .72rem; color: var(--mist); text-decoration: line-through; }
.day-card-prices .now { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: var(--gold); }
.day-card-footer { margin-top: auto; display: flex; justify-content: flex-end; }

.day-modal-day {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(232,160,32,.1); border: 1px solid rgba(232,160,32,.2);
  border-radius: 99px; padding: .35rem .9rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 1.1rem;
}
.modal-actions-split { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4rem; }
.link-danger {
  background: none; border: none; color: var(--mist); font-size: .76rem;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.link-danger:hover { color: var(--ember); }

/* Happy Hour form panel */
.hh-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
.perks-editor label { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-bottom: .5rem; font-weight: 600; }
.perk-add-row { display: flex; gap: .6rem; margin-bottom: .8rem; }
.perk-add-row input {
  flex: 1; background: var(--deep); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: .7rem .9rem; color: var(--white); font-size: .84rem; font-family: 'Inter', sans-serif;
}
.perk-add-row input:focus { outline: none; border-color: var(--gold); }
.perks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.perk-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: var(--deep); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; padding: .55rem .9rem; font-size: .82rem; color: var(--cream);
}
.perk-row button {
  background: none; border: none; color: var(--mist); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .2rem;
}
.perk-row button:hover { color: var(--ember); }
.perks-empty { font-size: .78rem; color: var(--mist); padding: .5rem 0; }
.hh-save-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.hh-save-status { font-size: .78rem; color: var(--success); }

@media (max-width: 1100px) {
  .week-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 700px) {
  .week-grid { grid-template-columns: 1fr 1fr; }
  .hh-panel-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   GALLERY PAGE — tabbed collections
───────────────────────────────────────────────────────────── */

.tab-nav {
  display: flex; gap: .3rem; margin-bottom: 1.6rem;
  background: var(--char); border-radius: 10px; padding: .35rem;
  width: fit-content; max-width: 100%; overflow-x: auto;
}
.tab-nav button {
  flex-shrink: 0;
  padding: .65rem 1.3rem; border-radius: 7px;
  font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  border: none; background: transparent; color: rgba(245,237,214,.55);
  cursor: pointer; transition: .2s; white-space: nowrap;
}
.tab-nav button:hover { color: var(--white); }
.tab-nav button.active { background: var(--gold); color: var(--black); }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .25s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.field-hint { font-size: .72rem; color: var(--mist); margin-top: .3rem; line-height: 1.4; }

/* Rating: 1-5 stars, table cell display */
.rating-stars-display { color: var(--gold); font-size: .85rem; letter-spacing: .1em; }
.rating-stars-display .dim { color: rgba(245,237,214,.18); }

/* Rating: interactive picker in forms */
.star-picker { display: flex; gap: .3rem; }
.star-picker button {
  background: none; border: none; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: rgba(245,237,214,.18);
  padding: 0; transition: color .15s, transform .1s;
}
.star-picker button:hover { transform: scale(1.1); }
.star-picker button.filled { color: var(--gold); }

.main-feature-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(232,160,32,.15); color: var(--gold);
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 99px;
}
.form-hint-banner {
  background: rgba(232,160,32,.08); border: 1px solid rgba(232,160,32,.2);
  border-radius: 8px; padding: .7rem .9rem; font-size: .76rem; color: var(--gold);
  margin-bottom: 1.1rem; line-height: 1.5;
}

/* Inline status dropdown, used in table rows (reservations/messages) */
.status-select {
  background: var(--deep); border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; padding: .4rem .6rem; font-size: .78rem;
  color: var(--white); font-family: 'Inter', sans-serif; cursor: pointer;
}
.status-select:focus { outline: none; border-color: var(--gold); }
.status-select.status-new, .status-select.status-pending, .status-select.status-preparing, .status-select.status-out-for-delivery { border-color: rgba(232,160,32,.4); color: var(--gold); }
.status-select.status-confirmed, .status-select.status-replied, .status-select.status-read, .status-select.status-delivered { border-color: rgba(46,204,113,.4); color: var(--success); }
.status-select.status-cancelled { border-color: rgba(232,67,32,.4); color: var(--ember); }
.status-select.status-pending-payment { border-color: rgba(232,160,32,.4); color: var(--gold); } /* bookings.js (Phase 4) */

.cell-notes { font-size: .78rem; color: rgba(245,237,214,.6); max-width: 220px; line-height: 1.45; }
/* Orders table's items column (see orders.js) — was being hard-truncated
   at 90 characters with "…", silently hiding items on any order past
   that length. It's no longer truncated in JS, so this just needs a
   sensible width to wrap into rather than a tight clip. Wider than the
   generic .cell-notes above (dish names + extras run longer than a
   typical note), and wraps long/unbroken dish names instead of
   overflowing the cell. */
.cell-items { max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
.cell-timestamp { font-size: .74rem; color: var(--mist); white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────
   SIDEBAR UNREAD BADGE (used by the Live Chat nav link)
───────────────────────────────────────────────────────────── */
.sidebar-link { position: relative; }
.sidebar-badge {
  margin-left: auto;
  background: var(--ember); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: 0;
  min-width: 18px; height: 18px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px; flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   LIVE CHAT PAGE — real-time inbox for the public site widget
───────────────────────────────────────────────────────────── */
.chat-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Only the chat page needs a fixed-height, non-scrolling shell
   (like a messaging app) — scoped here so every other admin page
   keeps its normal, freely-growing scroll behaviour. */
.main-column:has(.chat-page) {
  height: 100dvh;
  overflow: hidden;
}
.chat-page .page-error { flex-shrink: 0; }
.chat-shell {
  display: grid; grid-template-columns: 340px 1fr;
  /* Grid rows default to auto-sizing on content ("implicit minimum size"),
     the same trap flex items fall into without min-height:0 — without this,
     .chat-sidebar/.chat-conversation-pane are free to grow as tall as their
     content (a long thread list, a long conversation) instead of being
     capped to the space actually available. That let the whole shell push
     past the viewport, so the *page* scrolled instead of the panes inside
     it — cutting off the reply box at the bottom on shorter screens. */
  grid-template-rows: minmax(0, 1fr);
  background: var(--char);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* Thread list */
.chat-sidebar {
  background: var(--deep);
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.chat-sidebar-head {
  flex-shrink: 0; padding: 1.2rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mist); font-weight: 600;
}
.chat-thread-list {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: .6rem;
  overscroll-behavior: contain; /* scrolling the thread list to its end won't also scroll the page behind it */
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS Safari */
}
.chat-thread {
  width: 100%; display: flex; align-items: flex-start; gap: .85rem;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: left; cursor: pointer;
  padding: .95rem .8rem; border-radius: 8px; position: relative;
  color: var(--white); transition: background .2s;
}
.chat-thread:last-child { border-bottom: none; }
.chat-thread:hover { background: rgba(255,255,255,.045); }
.chat-thread.active { background: rgba(232,160,32,.14); }
.chat-thread-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--char); color: var(--gold); border: 1px solid rgba(232,160,32,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700;
}
.chat-thread-main { flex: 1; min-width: 0; }
.chat-thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.chat-thread-name {
  font-size: .87rem; font-weight: 600; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-thread.unread .chat-thread-name { color: var(--gold); }
.chat-thread-time { font-size: .66rem; color: var(--mist); flex-shrink: 0; }
.chat-thread-preview {
  font-size: .78rem; color: var(--mist); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-thread.unread .chat-thread-preview { color: rgba(245,237,214,.85); }
.chat-thread-dot {
  position: absolute; top: 1.05rem; right: .8rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ember);
}
.chat-thread:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.chat-thread-delete {
  flex-shrink: 0; align-self: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid transparent; background: none;
  color: var(--mist); font-size: .78rem; cursor: pointer;
  transition: opacity .15s, border-color .2s, color .2s;
}
/* Hide-until-hover only makes sense on devices that actually have a hover
   state (mouse/trackpad). On touch devices :hover never fires, so this
   button would otherwise be permanently invisible and undiscoverable —
   only reveal-on-hover it there, and leave it always visible everywhere
   else (touch, and keyboard focus via the rule above / below). */
@media (hover: hover) and (pointer: fine) {
  .chat-thread-delete { opacity: 0; }
  .chat-thread:hover .chat-thread-delete,
  .chat-thread-delete:focus-visible { opacity: 1; }
}
.chat-thread-delete:hover,
.chat-thread-delete:focus-visible { border-color: var(--ember); color: var(--ember); background: rgba(233,90,90,.08); }

/* Conversation pane */
.chat-conversation-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-conv-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--mist); font-size: .85rem; text-align: center; padding: 2rem;
}
.chat-conv-empty[hidden] { display: none; }
.chat-conversation { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-conversation[hidden] { display: none; }
.chat-conv-head {
  flex-shrink: 0; display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.6rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: var(--char);
}
.chat-conv-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--char); color: var(--gold); border: 1px solid rgba(232,160,32,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700;
}
.chat-conv-head-info { flex: 1; min-width: 0; }
.chat-conv-name { font-size: .98rem; font-weight: 600; color: var(--white); line-height: 1.3; }
.chat-conv-phone { font-size: .76rem; color: var(--mist); margin-top: .15rem; }
.chat-conv-delete-btn {
  flex-shrink: 0; width: auto; height: auto;
  padding: .5rem .9rem; font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; margin-left: 0;
}
.chat-conv-body {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1.6rem;
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--deep);
  overscroll-behavior: contain; /* scrolling to the top/bottom of a conversation won't also scroll the page behind it */
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS Safari */
}
.chat-msg {
  max-width: 62%; padding: .7rem 1rem; border-radius: 14px;
  font-size: .85rem; line-height: 1.55; word-wrap: break-word;
}
.chat-msg.from-customer {
  align-self: flex-start; background: var(--char); color: var(--cream);
  border: 1px solid rgba(255,255,255,.06); border-bottom-left-radius: 4px;
}
.chat-msg.from-admin {
  align-self: flex-end; background: var(--gold); color: var(--black);
  border-bottom-right-radius: 4px;
}
.chat-msg-time { display: block; font-size: .62rem; opacity: .6; margin-top: .35rem; }
.chat-conv-input {
  flex-shrink: 0; display: flex; gap: .8rem;
  padding: 1.1rem 1.6rem; border-top: 1px solid rgba(255,255,255,.06);
  background: var(--char);
}
.chat-conv-input input {
  flex: 1; background: var(--deep); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: .8rem 1rem; color: var(--white);
  font-size: .85rem; font-family: 'Inter', sans-serif;
}
.chat-conv-input input:focus { outline: none; border-color: var(--gold); }

/* ── Themed scrollbar — gold, to match the rest of the panel.
   scrollbar-color covers Firefox; the ::-webkit-scrollbar-* rules cover
   Chrome/Edge/Safari. Both the thread list and the message body get it. ── */
.chat-thread-list,
.chat-conv-body {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.chat-thread-list::-webkit-scrollbar,
.chat-conv-body::-webkit-scrollbar {
  width: 9px;
}
.chat-thread-list::-webkit-scrollbar-track,
.chat-conv-body::-webkit-scrollbar-track {
  background: transparent;
}
.chat-thread-list::-webkit-scrollbar-thumb,
.chat-conv-body::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  background-image: linear-gradient(var(--gold), var(--amber));
  border-radius: 999px;
  border: 2px solid var(--deep); /* padding illusion so the thumb never touches the edge */
  background-clip: padding-box;
}
.chat-thread-list::-webkit-scrollbar-thumb:hover,
.chat-conv-body::-webkit-scrollbar-thumb:hover {
  background-image: none;
  background-color: var(--amber);
}

@media (max-width: 900px) {
  /* .app-shell flips to flex-direction:column at this width, which makes
     .main-column's generic `flex: 1` (flex-basis: 0%) govern its HEIGHT
     instead of width — overriding the height:100dvh set above for the
     chat page and letting it grow with content instead of staying bounded.
     flex:none restores flex-basis:auto so the explicit height wins again. */
  .main-column:has(.chat-page) { flex: none; }
  .chat-shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  .chat-sidebar { max-height: none; border-right: none; border-bottom: none; }

  /* Only one pane is visible at a time on mobile — the thread list by
     default, or the open conversation once #chat-shell gets .show-conversation
     (added/removed by chat.js on open / back / delete). This keeps every
     other conversation out of view until the user taps "back", instead of
     both panes being visible on the same screen. */
  .chat-conversation-pane { display: none; min-height: 0; }
  .chat-shell.show-conversation .chat-sidebar { display: none; }
  .chat-shell.show-conversation .chat-conversation-pane { display: flex; }

  .chat-back-btn { display: inline-flex; }
}

@media (max-width: 560px) {
  .chat-conv-head { padding: .9rem 1rem; gap: .6rem; }
  .chat-conv-delete-btn { padding: .5rem .7rem; font-size: 0; }
  .chat-conv-delete-btn::before { content: "✕"; font-size: .8rem; }
  .chat-conv-body { padding: 1rem; }
  .chat-msg { max-width: 82%; }
  .chat-conv-input { padding: .9rem 1rem; gap: .6rem; }
  .chat-thread-list::-webkit-scrollbar,
  .chat-conv-body::-webkit-scrollbar { width: 6px; }
}
/* ── Notification sound toggle (topbar) ── */
.topbar-sound-slot { display: inline-flex; }
.sound-toggle {
  width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1); background: var(--deep);
  color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s, background .2s;
}
.sound-toggle svg { width: 18px; height: 18px; }
.sound-toggle:hover { border-color: var(--gold); color: var(--gold); }
.sound-toggle.is-muted { color: var(--mist); background: var(--black); }
.sound-toggle.is-muted:hover { border-color: var(--mist); color: var(--white); }

/* ── New-order / new-booking / new-message toast (admin-sound.js) ── */
#admin-notif-toasts {
  position: fixed; top: 1.2rem; right: 1.2rem; z-index: 999;
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-end;
  pointer-events: none;
}
.admin-notif-toast {
  background: var(--char); border: 1px solid rgba(232,160,32,.35);
  border-left: 3px solid var(--gold); border-radius: 8px;
  padding: .75rem 1.1rem; max-width: 340px;
  font-size: .84rem; color: var(--white); font-family: 'Inter', sans-serif;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  opacity: 0; transform: translateX(16px);
  transition: opacity .25s, transform .25s;
}
.admin-notif-toast.is-in { opacity: 1; transform: translateX(0); }
@media (max-width: 560px) {
  #admin-notif-toasts { left: 1rem; right: 1rem; top: 4.6rem; align-items: stretch; }
  .admin-notif-toast { max-width: none; }
}
/* ── ETA / delivery-fee inline editors (Orders page) ──
   FIX: these used `border: 1px solid var(--line)`, but --line was never
   defined anywhere in this file — an invalid custom property makes the
   whole border declaration drop, so the input/button just floated in
   the cell with no visible edge at all. Rebuilt as one bordered "box"
   per editable field (input + save button together) instead of a bare
   input, so it's obviously something you can click into and edit. */
.eta-cell, .fee-cell {
  display: flex; align-items: center; gap: 0;
  background: var(--deep); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: .25rem; max-width: 220px;
  transition: border-color .2s;
}
.eta-cell:focus-within, .fee-cell:focus-within { border-color: var(--gold); }
.eta-input, .fee-input {
  flex: 1; min-width: 70px; width: 100%; background: transparent; border: none;
  padding: .35rem .5rem; font-size: .82rem; color: var(--white);
  font-family: 'Inter', sans-serif;
}
.eta-input:focus, .fee-input:focus { outline: none; }
.eta-input::placeholder, .fee-input::placeholder { color: var(--mist); }
.eta-save-btn, .fee-save-btn {
  flex-shrink: 0; width: 28px; height: 28px; margin-left: 0;
  border-radius: 6px; border: none; background: transparent; color: var(--mist);
}
.eta-save-btn:not(:disabled), .fee-save-btn:not(:disabled) { color: var(--gold); background: rgba(232,160,32,.12); }
.eta-save-btn:disabled, .fee-save-btn:disabled { cursor: default; }
.eta-save-status { font-size: .72rem; color: var(--success); margin-top: .3rem; min-height: 1em; padding-left: .25rem; }

/* ─────────────────────────────────────────────────────────────
   REVIEWS MODERATION (reviews.html) — pending queue for guest
   reviews: section pills, Accept / Reject buttons, filter row.
───────────────────────────────────────────────────────────── */
.toolbar-filters { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }

.pill-hotel { background: rgba(110,193,228,.14); color: var(--hotel-accent); }
.pill-restaurant { background: rgba(155,89,182,.18); color: #c89be0; }

/* Full review text is shown (no truncation) — staff need to read all of
   it to decide, so this cell is wider than the generic .cell-notes. */
.data-table td.cell-review { max-width: 340px; min-width: 200px; white-space: normal; overflow-wrap: anywhere; }

.rv-actions { display: inline-flex; gap: .35rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.rv-btn {
  border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--cream);
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  padding: .4rem .75rem; border-radius: 7px; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: background .2s, border-color .2s, color .2s;
}
.rv-btn:disabled { opacity: .5; cursor: default; }
.rv-btn-accept { border-color: rgba(46,204,113,.4); color: var(--success); }
.rv-btn-accept:hover:not(:disabled) { background: rgba(46,204,113,.14); border-color: var(--success); }
.rv-btn-reject { border-color: rgba(232,67,32,.4); color: #ff8462; }
.rv-btn-reject:hover:not(:disabled) { background: rgba(232,67,32,.14); border-color: var(--ember); }

.rv-sent-line { font-size: .78rem; color: var(--mist); margin: 0 0 1rem; }

@media (max-width: 900px) {
  .toolbar-filters { flex-direction: column; align-items: stretch; width: 100%; }
  .toolbar-filters .segmented { width: 100%; }
  .rv-actions { justify-content: flex-start; }
}

/* ═════════════════════════════════════════════════════════════
   RESTORE TAB (Settings → Restore)  — markup comes from restore.js
   Before this block existed none of the .rb-* classes had any style,
   so each entry rendered as plain, unspaced text.
   The coloured bar on the left of each entry is information, not
   decoration: red = the item was deleted, gold = it was changed.
═════════════════════════════════════════════════════════════ */

.rb-count { font-size: .82rem; font-weight: 600; color: var(--cream); margin: 0 0 .6rem; }
.rb-count:empty { display: none; }

.rb-list { display: grid; gap: .8rem; }

.rb-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .9rem 1.4rem;
  align-items: center;
  background: var(--char);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.rb-entry.is-deleted { border-left-color: var(--ember); }

.rb-main { min-width: 0; }
.rb-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.rb-title { font-size: 1rem; font-weight: 600; color: var(--white); overflow-wrap: anywhere; }
.rb-meta { font-size: .76rem; color: var(--mist); margin-top: .35rem; line-height: 1.55; }
.rb-summary { font-size: .8rem; color: var(--cream); margin-top: .45rem; overflow-wrap: anywhere; }
.rb-summary strong { font-weight: 600; color: var(--gold); }

.rb-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.rb-actions .btn-secondary,
.rb-actions .btn-primary-sm { padding: .5rem .9rem; font-size: .76rem; }
.rb-actions .link-danger { padding: .5rem .3rem; font-size: .76rem; }

/* "Delete all" is destructive — say so on hover instead of turning gold. */
#restore-erase-all-btn:hover { border-color: var(--ember); color: #ff8462; }

/* what it was vs. what it is now */
.rb-details { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.07); padding-top: 1rem; min-width: 0; }
.rb-note {
  font-size: .78rem; color: var(--cream); line-height: 1.5;
  background: rgba(232,160,32,.08); border: 1px solid rgba(232,160,32,.2);
  border-radius: 8px; padding: .65rem .85rem; margin: 0 0 .9rem;
}
.rb-empty-val { color: var(--mist); font-style: italic; }

.rb-diff { width: 100%; border-collapse: separate; border-spacing: 0 .4rem; table-layout: fixed; font-size: .82rem; }
.rb-diff th, .rb-diff td { text-align: left; vertical-align: top; padding: .65rem .8rem; overflow-wrap: anywhere; line-height: 1.5; }
.rb-diff thead th { font-size: .7rem; font-weight: 600; color: var(--mist); padding-top: 0; padding-bottom: .2rem; letter-spacing: .04em; }
.rb-diff tbody th { width: 18%; font-weight: 600; color: var(--cream); background: rgba(255,255,255,.03); border-radius: 8px 0 0 8px; }
.rb-diff .rb-was { background: rgba(232,67,32,.08); box-shadow: inset 3px 0 0 rgba(232,67,32,.55); color: var(--cream); }
.rb-diff .rb-now { background: rgba(46,204,113,.07); box-shadow: inset 3px 0 0 rgba(46,204,113,.5); color: var(--cream); border-radius: 0 8px 8px 0; }
.rb-diff img { display: block; max-width: 160px; max-height: 110px; object-fit: cover; border-radius: 8px; background: var(--deep); }

@media (max-width: 760px) {
  .rb-entry { grid-template-columns: minmax(0, 1fr); padding: .95rem 1rem; }
  .rb-actions { justify-content: stretch; }
  .rb-actions .btn-primary-sm { order: -1; flex: 1 1 100%; width: auto; text-align: center; padding: .7rem 1rem; }
  .rb-actions .btn-secondary { flex: 1 1 auto; text-align: center; }
  .rb-actions .link-danger { flex: 1 1 100%; text-align: center; }

  /* the three-column comparison becomes one block per field */
  .rb-diff, .rb-diff tbody, .rb-diff tr, .rb-diff th, .rb-diff td { display: block; width: auto; }
  .rb-diff thead { display: none; }
  .rb-diff tr { margin-bottom: .8rem; }
  .rb-diff tbody th { width: auto; background: none; padding: 0 0 .35rem; border-radius: 0; font-size: .8rem; }
  .rb-diff .rb-was, .rb-diff .rb-now { border-radius: 8px; margin-bottom: .3rem; }
  .rb-diff .rb-was::before, .rb-diff .rb-now::before {
    display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--mist); margin-bottom: .2rem;
  }
  .rb-diff .rb-was::before { content: "What it was"; }
  .rb-diff .rb-now::before { content: "What it is now"; }
}


/* ═════════════════════════════════════════════════════════════
   TABLES AS CARDS ON PHONES
   Below 720px each table row becomes a small card (first cell = the
   title, the rest = "Label  value" pairs, action buttons along the
   bottom) instead of making you scroll sideways. js/table-labels.js
   copies each column heading onto its cells as data-label.
   Tables inside popups keep the horizontal scroll.
═════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .page-content .panel:has(> .data-table) {
    background: transparent; border: none; padding: 0; overflow: visible;
  }
  .page-content .panel > .data-table { display: block; min-width: 0; white-space: normal; }
  .page-content .panel > .data-table thead { display: none; }
  .page-content .panel > .data-table tbody { display: grid; gap: .8rem; }

  .page-content .panel > .data-table tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem;
    background: var(--char); border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius); padding: 1rem;
  }
  .page-content .panel > .data-table tbody tr:hover { background: var(--char); }
  .page-content .panel > .data-table tbody td {
    display: block; padding: 0; border: none; min-width: 0; max-width: none;
    white-space: normal; overflow-wrap: anywhere; text-align: left;
  }
  /* every cell is labelled by its column heading — except the first (the card's
     title) and the actions cell, which need no label */
  .page-content .panel > .data-table tbody td[data-label]:not([data-label=""]):not(:first-child):not(.cell-actions)::before {
    content: attr(data-label); display: block;
    font-size: .76rem; font-weight: 500; color: var(--mist); margin-bottom: .3rem;
  }

  /* first cell is the card's title; long-text cells and the actions row span the full width */
  .page-content .panel > .data-table tbody td:first-child,
  .page-content .panel > .data-table tbody td.cell-notes,
  .page-content .panel > .data-table tbody td.cell-items,
  .page-content .panel > .data-table tbody td.cell-review { grid-column: 1 / -1; }
  .page-content .panel > .data-table tbody td.cell-actions {
    grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .5rem;
    padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.07);
  }

  /* cells holding an editable control get the full width so nothing is clipped */
  .page-content .panel > .data-table tbody td:has(> .status-select),
  .page-content .panel > .data-table tbody td:has(> .fee-cell),
  .page-content .panel > .data-table tbody td:has(> .eta-cell),
  .page-content .panel > .data-table tbody td:has(.fee-cell),
  .page-content .panel > .data-table tbody td:has(.eta-cell) { grid-column: 1 / -1; }

  /* controls inside cards fill their column */
  .page-content .panel > .data-table .status-select { width: 100%; }
  .page-content .panel > .data-table .fee-cell,
  .page-content .panel > .data-table .eta-cell { display: flex; gap: .4rem; }
  .page-content .panel > .data-table .fee-input,
  .page-content .panel > .data-table .eta-input { flex: 1; min-width: 0; width: 100%; }

  /* full-width "section" rows (Menu categories etc.) stay as banners, not cards */
  .page-content .panel > .data-table tbody tr:has(> td[colspan]) {
    display: block; background: none; border: none; padding: 0;
  }
  .page-content .panel > .data-table tbody tr:has(> td[colspan]) > td { grid-column: auto; }
}


/* ═════════════════════════════════════════════════════════════
   TOUCH SCREENS — comfortable tap targets, and 16px form text so
   iPhones don't zoom the page when a field is tapped.
═════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  .icon-btn { min-width: 40px; min-height: 40px; }
  .segmented button, .tab-nav button, .btn-secondary, .btn-primary-sm, .btn-primary, .btn-logout { min-height: 40px; }
  .sidebar-link { min-height: 44px; }
  .page-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
  .modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { font-size: 16px; }
  .checkbox-field input, .checklist-row input { width: 20px; height: 20px; }
}

/* notches / home-indicator bars on phones */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 900px) {
    .page-content { padding-left: max(1.2rem, env(safe-area-inset-left)); padding-right: max(1.2rem, env(safe-area-inset-right)); padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); }
  }
}


/* ── Tab bars on phones (Settings, About, Gallery, …) ──
   They scroll sideways when they don't fit. Tighter tabs show more at once,
   and js/tab-scroll.js scrolls the chosen tab into view so the active one
   is never hidden off-screen. */
@media (max-width: 640px) {
  .tab-nav { width: 100%; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding: 0 .5rem; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav button { padding: .6rem .95rem; font-size: .72rem; letter-spacing: .03em; scroll-snap-align: center; }
}


/* ═════════════════════════════════════════════════════════════
   DESKTOP — laptops, monitors and very wide screens
   Everything above was written for phones and tablets. This block
   adapts the same pages to bigger screens:
     • a slim, collapsible sidebar (more room for wide tables)
     • tables that fit a laptop and show when there is more to scroll to
     • content that stops stretching on huge monitors, and a larger
       interface scale so text isn't tiny on 2K / 4K displays
     • dashboard cards and panels that line up
═════════════════════════════════════════════════════════════ */

/* The two panels inside a two-column dashboard row sit side by side — the
   general ".panel + .panel" stacking margin was pushing the right-hand one
   about 19px lower (and shorter) than the left one. */
.dash-two-col > .panel + .panel { margin-top: 0; }

/* A row of exactly five stat cards (the Dashboard's top row) fills the width
   instead of wrapping four + one. */
@media (min-width: 901px) {
  .stats-grid:has(> .stat-card:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .stats-grid:has(> .stat-card:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Collapsible sidebar (desktop only) ── */
.sidebar-collapse-btn { display: none; }

@media (min-width: 901px) {
  .sidebar { transition: width .2s ease; }

  .sidebar-collapse-btn {
    display: flex; align-items: center; gap: .8rem;
    flex-shrink: 0;
    margin: .6rem .7rem 0; padding: .6rem .8rem;
    background: none; border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
    color: rgba(245,237,214,.55); font: inherit; font-size: .78rem; font-weight: 500;
    cursor: pointer; transition: color .2s, border-color .2s, background .2s;
  }
  .sidebar-collapse-btn:hover { color: var(--white); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
  .sidebar-collapse-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s ease; }

  /* the slim icon rail */
  html.sidebar-collapsed { --sidebar-w: 72px; }
  html.sidebar-collapsed .sidebar-brand { padding: 0 .4rem 1.1rem; text-align: center; }
  html.sidebar-collapsed .sidebar-brand-mark { font-size: 1.05rem; }
  html.sidebar-collapsed .sidebar-brand-sub { display: none; }
  html.sidebar-collapsed .sidebar-nav { padding: .4rem .55rem; }
  html.sidebar-collapsed .sidebar-link { justify-content: center; padding: .62rem 0; gap: 0; }
  html.sidebar-collapsed .sidebar-nav { gap: .1rem; }
  html.sidebar-collapsed .sidebar-link > span:not(.sidebar-badge) { display: none; }
  html.sidebar-collapsed .sidebar-badge {
    position: absolute; top: 3px; right: 3px; margin: 0;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: .58rem;
  }
  /* section headings become thin dividers */
  html.sidebar-collapsed .sidebar-section-label {
    font-size: 0; line-height: 0; padding: 0; height: 1px; margin: .7rem .5rem;
    background: rgba(255,255,255,.08);
  }
  html.sidebar-collapsed .sidebar-section-label:first-child { display: none; }
  html.sidebar-collapsed .sidebar-collapse-btn { justify-content: center; padding: .6rem 0; margin: .6rem .55rem 0; gap: 0; }
  html.sidebar-collapsed .sidebar-collapse-btn span { display: none; }
  html.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
}

/* ── Desktop tables: fit the screen, and hint when there's more to the right ── */
@media (min-width: 901px) {
  /* Let the table shrink to the panel and wrap, instead of sizing itself to its
     widest line and scrolling sideways. Inputs flex to whatever room the column has. */
  .page-content .panel > .data-table { min-width: 0; }
  /* Headings and short values (a price, a count, a date, a pill) never break across lines;
     only cells holding a name + description are allowed to wrap. */
  .data-table th { white-space: nowrap; }
  .data-table td:not(:has(div, p)) { white-space: nowrap; }
  .data-table .status-select { width: 100%; min-width: 9.5rem; }   /* wide enough for "Pending (unconfirmed)" */
  .fee-cell, .eta-cell { width: 100%; }
  .fee-input, .eta-input { width: 100%; min-width: 0; flex: 1 1 5rem; }
}
/* Soft edge shadows on a table panel that scrolls sideways: the right edge
   darkens while there is more to see, the left edge once you've scrolled. */
@media (min-width: 721px) {
  .panel:has(> .data-table) {
    background:
      linear-gradient(to right, var(--char) 30%, rgba(28,23,16,0)) left center / 36px 100% no-repeat local,
      linear-gradient(to left,  var(--char) 30%, rgba(28,23,16,0)) right center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,    rgba(232,160,32,.22), rgba(232,160,32,0)) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(232,160,32,.22), rgba(232,160,32,0)) right center / 14px 100% no-repeat scroll,
      var(--char);
  }
}

/* ── Popups: roomier forms on a desktop screen ── */
@media (min-width: 1100px) {
  .modal { max-width: 620px; }
  .checklist-box {
    max-height: 260px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; align-content: start;
  }
}

/* ── Big monitors ── */
@media (min-width: 1700px) {
  /* stop tables and forms stretching across a 2K / 4K screen */
  .page-content { width: 100%; max-width: 105rem; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1920px) {
  :root { --sidebar-w: 264px; }
  html { font-size: 112.5%; }   /* everything is in rem, so the whole interface scales up */
}
@media (min-width: 2560px) {
  :root { --sidebar-w: 288px; }
  html { font-size: 125%; }
}
@media (min-width: 1920px) and (min-width: 901px) {
  html.sidebar-collapsed { --sidebar-w: 80px; }
}



/* ═════════════════════════════════════════════════════════════
   READABILITY PASS — less congested text, everywhere
   • the page never set a line height, so stacked lines (item lists,
     phone / e-mail lines, descriptions) used the browser's tight default
   • secondary grey text was 11–13px at barely-passing contrast
   • table cells were cramped
   Orders and Bookings (the busiest lists) also become roomy card rows.
═════════════════════════════════════════════════════════════ */

:root {
  --mist: #a39983;       /* secondary text: 4.5:1 -> 6.3:1 on the panels */
  --gold-ink: #F0B54A;   /* was used ("Set the fee before confirming") but never defined, so it showed white */
}

body { line-height: 1.55; }

/* tables */
.data-table th { font-size: .72rem; letter-spacing: .08em; padding: 0 .9rem .95rem; }
.data-table td { font-size: .875rem; line-height: 1.5; padding: 1rem .9rem; }
.cell-title { line-height: 1.4; }
.cell-sub { font-size: .8rem; line-height: 1.5; margin-top: .2rem; }
.cell-timestamp { font-size: .8rem; }
.cell-sub + .cell-sub { margin-top: .1rem; }

/* intro text, labels, stat cards */
.page-intro { font-size: .9rem; line-height: 1.7; max-width: 68ch; }
.stat-card .label { font-size: .74rem; }
.sidebar-link { font-size: .875rem; }
.field label { line-height: 1.4; }
.empty-state, .empty-state-small { line-height: 1.6; }

/* Restore tab */
.rb-meta { font-size: .8rem; line-height: 1.65; }
.rb-summary { font-size: .86rem; line-height: 1.55; }
.rb-diff { font-size: .875rem; }

/* ── Orders & Bookings: one roomy card per order / booking ── */
@media (min-width: 721px) {
  .page-content .panel:has(> .data-table > #orders-tbody),
  .page-content .panel:has(> .data-table > #bookings-tbody) {
    background: none; border: none; padding: 0; overflow: visible;
  }
  .page-content .data-table:has(> #orders-tbody),
  .page-content .data-table:has(> #bookings-tbody) { display: block; min-width: 0; width: 100%; }
  .data-table:has(> #orders-tbody) > thead,
  .data-table:has(> #bookings-tbody) > thead { display: none; }

  #orders-tbody, #bookings-tbody { display: grid; gap: 1rem; }
  #orders-tbody > tr, #bookings-tbody > tr {
    display: grid; gap: 1.2rem 2rem; align-items: start;
    background: var(--char); border: 1px solid rgba(255,255,255,.06);
    border-left-width: 3px;
    border-radius: var(--radius); padding: 1.4rem 1.6rem;
    transition: border-color .2s;
  }
  #orders-tbody > tr:hover, #bookings-tbody > tr:hover { background: var(--char); border-color: rgba(232,160,32,.3); }
  #orders-tbody > tr > td, #bookings-tbody > tr > td {
    display: block; padding: 0; border: none; min-width: 0; max-width: none;
    white-space: normal; overflow-wrap: anywhere;
  }
  /* every value is labelled by its column heading, except the first (the card's title) */
  #orders-tbody > tr > td[data-label]:not(:first-child)::before,
  #bookings-tbody > tr > td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block;
    font-size: .74rem; font-weight: 500; color: var(--mist); margin-bottom: .3rem;
  }
  #orders-tbody > tr > td:first-child, #bookings-tbody > tr > td:first-child { font-size: 1rem; }
  #orders-tbody > tr > td:first-child .cell-title { font-size: 1rem; }

  /* an order / booking waiting on staff gets a gold edge; a cancelled one fades back */
  #orders-tbody > tr:has(.status-pending), #bookings-tbody > tr:has(.status-pending-payment) { border-left: 3px solid var(--gold); }
  #orders-tbody > tr:has(.status-cancelled), #bookings-tbody > tr:has(.status-cancelled) { opacity: .6; }
  #orders-tbody > tr:has(.status-cancelled):hover, #bookings-tbody > tr:has(.status-cancelled):hover { opacity: 1; }

  #orders-tbody .status-select, #bookings-tbody .status-select { width: 100%; max-width: 16rem; }
  #orders-tbody .fee-cell, #orders-tbody .eta-cell { max-width: 16rem; }
  #orders-tbody .fee-cell { margin-top: .55rem; }

  /* tablets / small windows: two columns */
  #orders-tbody > tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "order customer" "fulfil total" "items placed" "status eta";
  }
  #orders-tbody > tr > td:nth-child(1) { grid-area: order; }
  #orders-tbody > tr > td:nth-child(2) { grid-area: customer; }
  #orders-tbody > tr > td:nth-child(3) { grid-area: items; }
  #orders-tbody > tr > td:nth-child(4) { grid-area: fulfil; }
  #orders-tbody > tr > td:nth-child(5) { grid-area: total; }
  #orders-tbody > tr > td:nth-child(6) { grid-area: placed; }
  #orders-tbody > tr > td:nth-child(7) { grid-area: status; }
  #orders-tbody > tr > td:nth-child(8) { grid-area: eta; }

  #bookings-tbody > tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "guest room" "dates guests" "total placed" "status status";
  }
  #bookings-tbody > tr > td:nth-child(1) { grid-area: guest; }
  #bookings-tbody > tr > td:nth-child(2) { grid-area: room; }
  #bookings-tbody > tr > td:nth-child(3) { grid-area: dates; }
  #bookings-tbody > tr > td:nth-child(4) { grid-area: guests; }
  #bookings-tbody > tr > td:nth-child(5) { grid-area: total; }
  #bookings-tbody > tr > td:nth-child(6) { grid-area: placed; }
  #bookings-tbody > tr > td:nth-child(7) { grid-area: status; }
}

/* laptops and up: four columns, two rows */
@media (min-width: 1240px) {
  #orders-tbody > tr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "order customer fulfil total" "items placed status eta";
  }
  #bookings-tbody > tr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "guest room dates status" "guests total placed status";
  }
}


/* ═════════════════════════════════════════════════════════════
   LISTED ITEMS — each one reads as its own item
   One bullet style used for the dishes inside an order, the guest
   details in a booking, and the dishes on the Menu page.
═════════════════════════════════════════════════════════════ */

.item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.item-list li {
  position: relative; padding-left: 1.1rem; line-height: 1.45;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .55rem;
  overflow-wrap: anywhere;
}
.item-list li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .42rem; height: .42rem; border-radius: 50%; background: var(--gold);
}
.item-list .item-name { color: var(--cream); font-weight: 500; }
.item-list .item-qty {
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--gold);
  background: rgba(232,160,32,.13); border-radius: 99px; padding: .05rem .55rem; white-space: nowrap;
}
/* quieter bullets for supporting details (phone, e-mail) */
.item-list--sub { gap: .25rem; margin-top: .3rem; }
.item-list--sub li { color: var(--mist); font-size: .8rem; }
.item-list--sub li::before { width: .28rem; height: .28rem; top: .6em; background: var(--mist); }

/* booking reference as a small tag */
.ref-tag {
  display: inline-block; margin-top: .55rem; padding: .12rem .55rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .05em; color: var(--cream);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
}

/* ── Menu page: dishes as a bulleted list under each category heading ── */
#items-tbody > tr:not(.cat-row):not(.cat-empty-row) > td:first-child {
  position: relative;
  border-left: 2px solid rgba(232,160,32,.28);    /* the guide line a list hangs from */
  padding-left: 1.4rem;
}
#items-tbody > tr:not(.cat-row):not(.cat-empty-row) > td:first-child .cell-title {
  position: relative; padding-left: 1.1rem;
}
#items-tbody > tr:not(.cat-row):not(.cat-empty-row) > td:first-child .cell-title::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(232,160,32,.15);
}
/* a hidden (unavailable) dish: grey bullet, whole row fades back */
#items-tbody > tr:has(> td:nth-child(5) .pill-mist) > td:first-child .cell-title::before { background: var(--mist); box-shadow: none; }
#items-tbody > tr:has(> td:nth-child(5) .pill-mist) > td:first-child { border-left-color: rgba(255,255,255,.12); }
#items-tbody > tr:has(> td:nth-child(5) .pill-mist) > td { opacity: .62; }
#items-tbody > tr:has(> td:nth-child(5) .pill-mist):hover > td { opacity: 1; }
#items-tbody .cell-thumb { margin-right: .2rem; }