:root {
  /* Layout tokens */
  --col-tbl: 84px;
  --col-walk: 90px;
  --col-cap: 52px;
  --col-slot: 30px;
  --row-h: 42px;
  --header-h: 56px;

  /* Dark theme palette */
  --bg: #0f1115;
  --bg-elev: #161a21;
  --bg-elev-2: #1c2128;
  --border: #2a2f39;
  --border-soft: #20242c;
  --text: #e6e9ef;
  --text-dim: #9aa3b2;
  --text-mute: #7b8494;

  --accent: #60a5fa;
  --accent-bg: #1d4ed8;

  /* Status colors (matched by STATUS_COLORS in main.py) */
  --status-blue:   #2563eb;
  --status-blue-d: #1e40af;
  --status-purple: #7c3aed;
  --status-purple-d: #6d28d9;
  --status-orange: #ea580c;
  --status-orange-d: #c2410c;
  --status-gray:   #4b5563;
  --status-gray-d: #374151;
  /* Derived states. Amber = late but expected; calm amber = the guest promised
     a time and the table is held for them; red = nobody has resolved this. */
  --status-amber:  #d97706;
  --status-amber-d: #b45309;
  --status-amber-calm:   #78591f;
  --status-amber-calm-d: #5c441a;
  --status-red:    #dc2626;
  --status-red-d:  #991b1b;

  --danger: #dc2626;
  --shadow: 0 10px 30px rgba(0,0,0,.4);

  /* Radius scale */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* Elevated surface hover states */
  --bg-elev-hover: #232932;
  --border-hover: #3a4150;

  /* Status foreground text colors (lighter tints of the --status-* fills,
     used for pill/label text and status links) */
  --fg-blue: #93c5fd;
  --fg-blue-strong: #bfdbfe;
  --fg-purple: #c4b5fd;
  --fg-orange: #fdba74;
  --fg-gray: #cbd5e1;
  --fg-amber: #fcd34d;
  --fg-amber-calm: #d6b673;
  --fg-red: #fca5a5;
  --fg-green: #6ee7b7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------- Header */
.app-header {
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.app-nav { display: flex; gap: 6px; }
.app-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid transparent;
}
.app-nav a:hover { color: var(--text); background: var(--bg-elev-2); }
.app-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-nav a.is-active {
  color: var(--text);
  background: var(--bg-elev-2);
  border-color: var(--border);
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand-mark { color: var(--accent); font-size: 20px; }
.brand h1 {
  font-size: 18px; margin: 0; font-weight: 600; letter-spacing: .2px;
}
.brand-sub { color: var(--text-mute); font-size: 12px; }

/* ---------------------------------------------------------------- Page */
.page { padding: 14px 18px 18px; }

/* ---------------------------------------------------------------- Toolbar */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.date-nav { display: flex; align-items: center; gap: 8px; }
.day-pill {
  margin-left: 8px;
  padding: 6px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 13px;
  color: var(--text);
}
.date-picker input {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color-scheme: dark;
}
.legend { display: flex; gap: 10px; font-size: 12px; }
.legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  color: var(--text-dim); border: 1px solid transparent;
}
.legend-item::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot, var(--text-mute));
}
.legend-item.status-blue   { --dot: var(--status-blue);   }
.legend-item.status-purple { --dot: var(--status-purple); }
.legend-item.status-orange { --dot: var(--status-orange); }
.legend-item.status-gray   { --dot: var(--status-gray);   }
.legend-item.status-free { --dot: #10b981; }
.legend-item.status-reserved { --dot: var(--status-blue); }
.legend-item.status-seated { --dot: var(--status-purple); }
.legend-item.status-held { --dot: #f59e0b; }
.legend-item.status-blocked { --dot: #ef4444; }
.legend-item.status-walkin { --dot: #f59e0b; }
.legend-item.status-late { --dot: var(--status-amber); }
.legend-item.status-intervention { --dot: var(--status-red); }

/* ---------------------------------------------------------------- Buttons */
.btn {
  font: inherit; cursor: pointer; border-radius: var(--radius-sm);
  padding: 7px 14px; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent-bg); color: #fff; }
.btn.primary:hover { background: #1e40af; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: #b91c1c; }
.btn.ghost {
  background: var(--bg-elev-2); color: var(--text);
  border-color: var(--border);
}
.btn.ghost:hover { background: var(--bg-elev-hover); border-color: var(--border-hover); }
/* Sits inline in a sentence of body copy rather than in a toolbar. */
.btn.btn-inline { padding: 2px 8px; font-size: 11px; vertical-align: baseline; }
.unsaved-count { margin-left: 6px; font-size: 11px; color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- Workspace */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.workspace.panel-open {
  grid-template-columns: minmax(0, 1fr) 340px;
}
@media (max-width: 1024px) {
  .workspace,
  .workspace.panel-open { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Table list view */
.table-toolbar { margin-bottom: 10px; }
.table-note {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 12px;
}
.table-list {
  display: grid;
  gap: 18px;
}
.table-section {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.table-section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elev-2);
  cursor: pointer;
  user-select: none;
  list-style: none; /* drop the native disclosure triangle... */
}
.table-section-head::-webkit-details-marker { display: none; } /* ...in Safari too */
.table-section-head:hover { background: var(--bg-elev-hover); }
.table-section[open] .table-section-head { border-bottom: 1px solid var(--border-soft); }
.table-section-head h2 { margin: 0; font-size: 14px; color: var(--text); }
/* Pushes the count to the right without a wrapper element. */
.table-section-count { margin-left: auto; font-size: 12px; color: var(--text-mute); }
.section-caret {
  display: inline-block; /* transform is a no-op on inline elements */
  font-size: 10px;
  color: var(--text-mute);
  transition: transform .12s;
}
.table-section[open] .section-caret { transform: rotate(90deg); }
.section-over { margin-left: 8px; }

.table-rows {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table-rows th, .table-rows td {
  text-align: left;
  padding: 7px 14px;
  border-top: 1px solid var(--border-soft);
}
.table-rows thead th {
  border-top: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-mute);
}
.table-rows tbody tr:hover { background: var(--bg-elev-2); }
/* A status stripe down the row's leading edge: the same signal the cards
   carried in their border, at a density a list can afford. */
.table-rows tbody .t-name {
  font-weight: 700;
  color: var(--text);
  border-left: 3px solid transparent;
}
.table-rows tbody tr.status-free .t-name { border-left-color: rgba(16, 185, 129, .6); }
.table-rows tbody tr.status-reserved .t-name { border-left-color: rgba(37, 99, 235, .65); }
.table-rows tbody tr.status-seated .t-name { border-left-color: rgba(124, 58, 237, .65); }
.table-rows tbody tr.status-held .t-name { border-left-color: rgba(245, 158, 11, .65); }
.table-rows tbody tr.status-blocked .t-name { border-left-color: rgba(239, 68, 68, .7); }
.table-rows tbody tr.status-late .t-name { border-left-color: var(--status-amber); }
.table-rows tbody tr.status-late_confirmed .t-name { border-left-color: var(--status-amber-calm); }
.table-rows tbody tr.status-intervention .t-name { border-left-color: var(--status-red); }
.table-rows tbody tr.walkin-only .t-name { border-left-style: dashed; }
.table-rows .num { font-variant-numeric: tabular-nums; }
.table-rows .t-next { color: var(--text-dim); }
.table-rows .t-guest { color: var(--text-dim); }
.table-rows .t-unknown { color: var(--text-mute); cursor: help; }

/* Sortable headers. The caret slot is always reserved so the heading row
   doesn't reflow by a few pixels each time you re-sort. */
.table-rows thead th a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.table-rows thead th a:hover { color: var(--text); }
.table-rows thead th.is-sorted { color: var(--text); }
.sort-caret { display: inline-block; min-width: 8px; font-size: 8px; }

/* Occupancy: a duration, anchored to the absolute time it counts from. The
   absolute time is the part that stays true on a page nobody has refreshed. */
.table-rows .t-occupied { white-space: nowrap; }
.t-since {
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-mute);
}
.t-ontime { font-size: 11px; color: var(--text-mute); }
.over-pill {
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 3px 7px;
  white-space: nowrap;
  color: var(--fg-red);
  border: 1px solid rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .14);
}
.over-summary { color: var(--fg-red); }

.table-state {
  text-transform: capitalize;
  font-size: 11px;
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  border: 1px solid transparent;
  color: var(--text-dim);
  background: var(--bg-elev);
  white-space: nowrap;
}
.table-state.state-free {
  color: var(--fg-green);
  border-color: rgba(16, 185, 129, .4);
}
.table-state.state-reserved {
  color: var(--fg-blue);
  border-color: rgba(37, 99, 235, .4);
}
.table-state.state-seated {
  color: var(--fg-purple);
  border-color: rgba(124, 58, 237, .4);
}
.table-state.state-held {
  color: var(--fg-amber);
  border-color: rgba(245, 158, 11, .45);
}
.table-state.state-blocked {
  color: var(--fg-red);
  border-color: rgba(239, 68, 68, .45);
}
.table-state.state-late {
  color: var(--fg-amber);
  border-color: rgba(217, 119, 6, .5);
}
.table-state.state-late_confirmed {
  color: var(--fg-amber-calm);
  border-color: rgba(120, 89, 31, .7);
}
.table-state.state-intervention {
  color: var(--fg-red);
  border-color: rgba(220, 38, 38, .6);
  background: rgba(220, 38, 38, .14);
  font-weight: 700;
}

/* ---------------------------------------------------------------- Reservations day view */
.reservations-toolbar { margin-bottom: 10px; }
.reservation-day-list {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.reservation-day-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.reservation-day-table th,
.reservation-day-table td {
  text-align: left;
  padding: 7px 12px;
  border-top: 1px solid var(--border-soft);
}
.reservation-day-table thead th {
  border-top: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-mute);
  background: var(--bg-elev-2);
}
.reservation-day-table tbody tr:hover { background: var(--bg-elev-2); }
.reservation-day-table .num { font-variant-numeric: tabular-nums; }
.res-when { white-space: nowrap; }
.res-when-end {
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-mute);
}
.reservation-link {
  font: inherit;
  font-weight: 600;
  color: var(--fg-blue);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.reservation-link:hover { color: var(--fg-blue-strong); text-decoration: underline; }
.reservation-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.reservation-list-empty {
  padding: 26px;
  text-align: center;
  color: var(--text-mute);
}

.reservation-state {
  text-transform: capitalize;
  font-size: 11px;
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.reservation-state.status-blue {
  color: var(--fg-blue);
  border-color: rgba(37, 99, 235, .45);
  background: rgba(37, 99, 235, .16);
}
.reservation-state.status-purple {
  color: var(--fg-purple);
  border-color: rgba(124, 58, 237, .45);
  background: rgba(124, 58, 237, .16);
}
.reservation-state.status-orange {
  color: var(--fg-orange);
  border-color: rgba(234, 88, 12, .45);
  background: rgba(234, 88, 12, .16);
}
.reservation-state.status-gray {
  color: var(--fg-gray);
  border-color: rgba(100, 116, 139, .45);
  background: rgba(100, 116, 139, .16);
}
.reservation-state.status-amber {
  color: var(--fg-amber);
  border-color: rgba(217, 119, 6, .5);
  background: rgba(217, 119, 6, .18);
}
.reservation-state.status-amber-calm {
  color: var(--fg-amber-calm);
  border-color: rgba(120, 89, 31, .65);
  background: rgba(120, 89, 31, .22);
}
.reservation-state.status-red {
  color: var(--fg-red);
  border-color: rgba(220, 38, 38, .6);
  background: rgba(220, 38, 38, .2);
  font-weight: 700;
}

.reservation-detail-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
}
.reservation-detail-list dt {
  color: var(--text-mute);
  font-size: 12px;
}
.reservation-detail-list dd {
  margin: 0;
  color: var(--text);
}
.reservation-detail-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}
.reservation-detail-note a { color: var(--fg-blue); }

/* ---------------------------------------------------------------- Floor plan view */
.layout-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.layout-tab {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  cursor: pointer;
}
.layout-tab:hover { color: var(--text); border-color: var(--border-hover); }
.layout-tab.is-active {
  color: #fff;
  background: var(--accent-bg);
  border-color: var(--accent-bg);
}

/* One workspace, five operator lenses.  The panels remain mounted so moving
   between the reservation book, roster, and floor plan never loses a selected
   reservation or an unsaved floor drag. */
.operations-tabs {
  display: flex;
  gap: 4px;
  margin: 2px 0 14px;
  border-bottom: 1px solid var(--border);
}
.operations-tabs button {
  appearance: none;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 12px 8px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.operations-tabs button:hover { color: var(--text); }
.operations-tabs button.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.operations-tabs button span {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  color: var(--text-mute);
  background: var(--bg-elev-2);
  font-size: 11px;
}
.section-picker select {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color-scheme: dark;
}

/* Daily operations dashboard: dense enough for a pre-service scan while the
   demand curve and next arrivals retain enough room to be read at a distance. */
.dashboard-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  margin: 6px 0 16px;
}
.dashboard-heading h2 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.02em; }
.dashboard-eyebrow, .dashboard-card header p {
  margin: 0; color: var(--text-mute); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.dashboard-alert {
  color: var(--fg-red); border: 1px solid rgba(220, 38, 38, .45);
  border-radius: var(--radius-pill); background: rgba(220, 38, 38, .1);
  padding: 7px 11px; font-size: 12px; text-decoration: none;
}
.dashboard-kpis {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
  margin-bottom: 10px;
}
.dashboard-kpis article, .dashboard-card {
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--bg-elev); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.dashboard-kpis article { min-height: 112px; padding: 15px; }
.dashboard-kpis span { display: block; color: var(--text-dim); font-size: 12px; }
.dashboard-kpis strong { display: block; margin: 8px 0 5px; font-size: 27px; line-height: 1; }
.dashboard-kpis small { color: var(--text-mute); font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.dashboard-card { min-width: 0; padding: 16px; }
.dashboard-card--wide { grid-column: span 2; }
.dashboard-card--arrivals { grid-column: span 2; }
.dashboard-card--capacity { grid-column: 1 / -1; }
.dashboard-card header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.dashboard-card header h3 { margin: 4px 0 0; font-size: 15px; }
.dashboard-card header > span { color: var(--text-mute); font-size: 12px; }
.dashboard-card header button {
  border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer;
}
.dashboard-chart { position: relative; height: 210px; margin-top: 12px; }
.dashboard-chart--bar { height: 250px; }
.dashboard-chart--capacity { height: 280px; }
.dashboard-arrivals { list-style: none; padding: 0; margin: 9px 0 0; }
.dashboard-arrivals li { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.dashboard-arrivals time { width: 68px; color: var(--accent); font-variant-numeric: tabular-nums; font-size: 12px; }
.dashboard-arrivals strong, .dashboard-arrivals span { display: block; }
.dashboard-arrivals strong { font-size: 13px; }
.dashboard-arrivals span, .dashboard-empty { margin: 3px 0 0; color: var(--text-mute); font-size: 11px; }
@media (max-width: 980px) {
  .dashboard-kpis { grid-template-columns: repeat(3, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-card--wide, .dashboard-card--arrivals { grid-column: span 2; }
}
@media (max-width: 620px) {
  .dashboard-heading { align-items: start; flex-direction: column; }
  .dashboard-kpis { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-card--wide, .dashboard-card--arrivals { grid-column: auto; }
  .dashboard-chart--bar { height: 210px; }
}

/* Host-managed waitlist: ticket order remains visually dominant while the
   action rail makes the commitment point explicit before capacity is held. */
.waitlist-heading { display: flex; justify-content: space-between; align-items: end; margin: 6px 0 14px; }
.waitlist-heading h2 { margin: 3px 0; font-size: 22px; }
.waitlist-heading span { color: var(--text-mute); font-size: 12px; }
.waitlist-add, .waitlist-card { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg-elev); }
.waitlist-add { margin-bottom: 12px; padding: 12px 14px; }
.waitlist-add summary, .waitlist-edit summary { color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 700; }
.waitlist-form { display: grid; grid-template-columns: 2fr 1.4fr .6fr 1fr 1fr 1fr; gap: 9px; margin-top: 12px; }
.waitlist-form label span { display: block; margin-bottom: 4px; color: var(--text-mute); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.waitlist-form input, .waitlist-form select, .waitlist-actions input { width: 100%; box-sizing: border-box; color: var(--text); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 9px; }
.waitlist-form-wide { grid-column: span 2; }
.waitlist-form .btn { align-self: end; }
.waitlist-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.waitlist-card { display: grid; grid-template-columns: 42px minmax(180px, 1.3fr) minmax(130px, .8fr) minmax(260px, 1.4fr); gap: 14px; align-items: center; padding: 13px 14px; }
.waitlist-card--offered { border-color: rgba(245, 158, 11, .45); }
.waitlist-ticket { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--text-dim); background: var(--bg-elev-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.waitlist-guest strong, .waitlist-guest span, .waitlist-guest small, .waitlist-state small { display: block; }
.waitlist-guest strong { font-size: 14px; }
.waitlist-guest span { margin-top: 3px; color: var(--text-dim); font-size: 12px; }
.waitlist-guest small, .waitlist-state small { margin-top: 4px; color: var(--text-mute); font-size: 11px; }
.waitlist-badge { display: inline-block; padding: 4px 8px; border-radius: var(--radius-pill); color: var(--text-mute); background: var(--bg-elev-2); font-size: 11px; }
.waitlist-badge--ready { color: #86efac; background: rgba(22, 163, 74, .13); }
.waitlist-badge--offered { color: var(--fg-amber); background: rgba(245, 158, 11, .12); }
.waitlist-actions { display: flex; align-items: center; justify-content: end; gap: 6px; flex-wrap: wrap; }
.waitlist-actions form { display: flex; gap: 6px; align-items: center; }
.waitlist-actions input { min-width: 150px; padding: 6px 8px; font-size: 11px; }
.waitlist-edit { grid-column: 2 / -1; border-top: 1px solid var(--border-soft); padding-top: 8px; }
.waitlist-withdraw { flex-basis: 100%; justify-content: end; }
@media (max-width: 900px) {
  .waitlist-form { grid-template-columns: repeat(3, 1fr); }
  .waitlist-card { grid-template-columns: 36px 1fr 1fr; }
  .waitlist-actions { grid-column: 2 / -1; justify-content: start; }
}
@media (max-width: 620px) {
  .operations-tabs { overflow-x: auto; }
  .operations-tabs button { white-space: nowrap; }
  .waitlist-form { grid-template-columns: 1fr 1fr; }
  .waitlist-form-wide { grid-column: span 2; }
  .waitlist-card { grid-template-columns: 34px 1fr; }
  .waitlist-state, .waitlist-actions, .waitlist-edit { grid-column: 2; }
  .waitlist-actions { justify-content: start; }
  .waitlist-actions form { width: 100%; flex-wrap: wrap; }
}

.floor-plan-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* An in-app full-page mode keeps browser chrome available but gives the floor
   the entire application viewport. It works for both the standalone route and
   the Operations panel, without invoking the browser Fullscreen API. */
[data-floor-plan-view].is-full-page {
  position: fixed !important;
  inset: 0;
  z-index: 100;
  overflow: auto;
  padding: 18px;
  background: var(--bg);
}
[data-floor-plan-view].is-full-page .floor-plan-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: var(--floor-plan-fit-height, calc(100dvh - 160px));
  overflow: hidden;
}
[data-floor-plan-view].is-full-page .floor-plan-canvas {
  /* The viewport height is measured by app.js after the toolbar and controls
     have laid out. The smaller dimension wins, so no room geometry is hidden
     below the fold in full-page mode. */
  width: min(100%, calc(var(--floor-plan-fit-height, 100dvh) * var(--canvas-ratio, 1)));
}
/* In full-page mode, hide the instructional text and action buttons — only the
   exit toggle remains visible so the operator can leave the mode. */
[data-floor-plan-view].is-full-page .floor-note-text,
[data-floor-plan-view].is-full-page .floor-note-btn {
  display: none;
}
/* Table rectangles are positioned in percentages of this canvas, matching
   the bounding box of the POS PositionLeft/Top/Right/Bottom rectangles —
   so left/top/width/height here need no client-side layout code.

   The server still supplies --canvas-width as an optional sizing hint, but the
   operator floor deliberately uses the complete available width. */
.floor-plan-canvas {
  position: relative;
  aspect-ratio: var(--canvas-ratio, 1);
  /* The floor is an operational workspace, not a thumbnail.  Let it consume
     the complete panel width; vertical scrolling is preferable to shrinking
     tables and labels just to keep the whole room inside one viewport. */
  width: 100%;
  margin-inline: auto;
  touch-action: none; /* let pointer drags through instead of panning */
  background:
    linear-gradient(var(--border-soft) 1px, transparent 1px) 0 0 / 100% 5%,
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px) 0 0 / 5% 100%,
    var(--bg-elev-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
/* Sized purely as a percentage of the canvas — no pixel minimum, so tables keep
   their true relative footprint at every zoom. Legibility is handled instead by
   scaling the labels to the table (container queries below), and by the server
   never rendering a table smaller than one seat. */
.floor-table {
  position: absolute;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  border-radius: var(--radius-md);
  border: 2px solid #334155;
  background: linear-gradient(160deg, #2a3342, #1a2130);
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .1s;
  overflow: hidden;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
/* Operator-set table shape. Only the corner radius changes — the footprint
   itself stays the POS rectangle, so status fill, labels, badges, and drag
   all behave identically across shapes. Square/rectangle keep the base radius;
   the POS width/height already tells them apart. */
.floor-table.shape-round { border-radius: 50%; }
.floor-table.shape-oval { border-radius: 50% / 35%; }
.floor-table.shape-square,
.floor-table.shape-rectangle { border-radius: var(--radius-md); }
.floor-table:hover { transform: scale(1.06); z-index: 2; }
.floor-table.is-dragging {
  cursor: grabbing;
  z-index: 5;
  transform: none;
  transition: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  opacity: .92;
}
/* Dragged but not yet saved. Reads as "this is in your hands, not the
   server's" — and it clears the moment the board re-renders from a save. */
.floor-table.is-unsaved {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  z-index: 3;
}
.floor-table.status-free { border-color: rgba(16, 185, 129, .7); }
.floor-table.status-reserved { border-color: rgba(37, 99, 235, .75); background: linear-gradient(160deg, #1e3a72, #14203f); }
.floor-table.status-seated { border-color: rgba(124, 58, 237, .75); background: linear-gradient(160deg, #3a2a72, #201540); }
.floor-table.status-held { border-color: rgba(245, 158, 11, .8); }
.floor-table.status-blocked { border-color: rgba(239, 68, 68, .8); background: linear-gradient(160deg, #4a1f1f, #2a1414); }
.floor-table.status-late { border-color: var(--status-amber); }
.floor-table.status-late_confirmed { border-color: var(--status-amber-calm); }
/* Unresolved on the floor: the only table that should pull the eye. */
.floor-table.status-intervention {
  border-color: var(--status-red);
  background: linear-gradient(160deg, #4a1f1f, #2a1414);
  box-shadow: var(--shadow), 0 0 0 2px rgba(220, 38, 38, .45);
}
/* Walk-in-only: dashed amber border plus a corner badge (below) — a clear,
   status-color-independent cue since walk-in tables can still show any
   live status. */
.floor-table.walkin-only {
  border-style: dashed;
  border-color: #d97706;
  box-shadow: var(--shadow), 0 0 0 1px rgba(245, 158, 11, .35);
}
/* Labels are sized against the table that contains them (cqmin = 1% of its
   shorter side), so a bar stool and a six-top both read correctly and both stay
   legible as the canvas scales down to fit. */
.floor-table-id {
  pointer-events: none;
  font-size: clamp(7px, 34cqmin, 13px);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.floor-table-capacity {
  pointer-events: none;
  font-size: clamp(6px, 22cqmin, 10px);
  font-weight: 600;
  color: var(--text-dim);
  line-height: 1.1;
  white-space: nowrap;
}
.floor-table-next {
  pointer-events: none;
  font-size: clamp(6px, 22cqmin, 10px);
  font-weight: 600;
  color: var(--fg-blue);
  line-height: 1.1;
  white-space: nowrap;
}
/* On a table too small for three stacked lines, the name wins and the rest
   falls back to the hover tooltip. */
@container (max-height: 46px) {
  .floor-table-capacity, .floor-table-next { display: none; }
}
@container (max-height: 24px) {
  .floor-table-id { font-size: 7px; }
}
.floor-table-walkin-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  width: clamp(9px, 30cqmin, 15px);
  height: clamp(9px, 30cqmin, 15px);
  border-radius: 50%;
  background: #f59e0b;
  color: #241a06;
  font-size: clamp(6px, 18cqmin, 9px);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-elev-2);
  pointer-events: none;
}

/* The timeline scrolls horizontally inside this wrap. */
.timeline-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  overflow: auto;
  max-height: calc(100vh - 160px);
  position: relative;
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- Timeline grid */
.timeline { padding: 0; }
.timeline-grid {
  display: grid;
  grid-template-columns:
    var(--col-tbl)
    var(--col-walk)
    var(--col-cap)
    repeat(48, var(--col-slot));
  grid-template-rows: var(--header-h);
  grid-auto-rows: var(--row-h);
  width: max-content;            /* lets the grid be wider than container */
  min-width: 100%;
  background: var(--bg-elev);
  position: relative;            /* positioning context for the now-line */
}

/* Generic cell */
.cell {
  grid-row: var(--row);
  grid-column: var(--col);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  position: relative;
}

/* Header row */
.time-header {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  font-size: 11px;
  color: var(--text-dim);
  justify-content: flex-start;
  padding-left: 6px;
  overflow: hidden;
  white-space: nowrap;
}
.time-header.minor { background: var(--bg-elev-2); }
.time-label { font-weight: 600; color: var(--text); }

/* Sticky left labels */
.cell-tbl, .cell-walk, .cell-cap { position: sticky; z-index: 2; }
.cell-tbl { left: 0; }
.cell-walk { left: var(--col-tbl); }
.cell-cap { left: calc(var(--col-tbl) + var(--col-walk)); }

.cell-tbl, .cell-walk, .cell-cap, .corner {
  background: var(--bg-elev-2);
  border-right: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim);
}

/* Header corners get the highest z-index (sticky x + sticky y) */
.corner {
  position: sticky;
  top: 0;
  z-index: 5;
  height: var(--header-h);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* Row labels */
.row-label {
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.row-label .tbl-num { font-weight: 600; color: var(--text); font-size: 13px; }
.row-label.cell-cap { font-weight: 600; color: var(--text); }
.row-label.cell-walk { font-size: 10px; }
.row-label.walkin-label {
  background: linear-gradient(180deg, #2f2413, #241b10);
  border-right-color: #8b6b2f;
}
.row-label.walkin-label .tbl-num { color: #fde68a; }
.walkin-col-pill {
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .25px;
  text-transform: uppercase;
  color: #a7b0bf;
  background: rgba(148, 163, 184, .14);
  border: 1px solid rgba(148, 163, 184, .35);
}
.walkin-col-pill.is-walkin {
  color: #fef3c7;
  background: rgba(245, 158, 11, .22);
  border-color: rgba(245, 158, 11, .6);
}

/* Alternate row striping */
/* Done via nth-child on cells of the same row is tricky in grid; instead
   we stripe using a thin separator only. */

/* Empty clickable slot */
.slot.empty {
  cursor: pointer;
  background: var(--bg-elev);
  transition: background .12s;
  font: inherit;
}
.slot.empty:hover {
  background: rgba(96, 165, 250, .18);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .55);
}
.slot.empty:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.slot.empty.walkin-slot {
  background: linear-gradient(180deg, rgba(245, 158, 11, .08), rgba(245, 158, 11, .03));
}
.slot.empty.walkin-slot:hover {
  background: rgba(245, 158, 11, .2);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .55);
}

/* Reservation block */
.slot.reservation {
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 8px;
  margin: 3px 0;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.08);
  z-index: 1;
  transition: transform .08s, box-shadow .12s, filter .12s;
}
.slot.reservation:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.slot.reservation:focus-visible {
  outline: 2px solid #fff; outline-offset: 1px;
}
.slot.reservation .res-name { overflow: hidden; text-overflow: ellipsis; }
.slot.reservation .res-meta { opacity: .85; font-weight: 500; }
.slot.reservation.walkin-slot {
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .5);
}

.slot.reservation.status-blue   { background: linear-gradient(180deg, var(--status-blue),   var(--status-blue-d)); }
.slot.reservation.status-purple { background: linear-gradient(180deg, var(--status-purple), var(--status-purple-d)); }
.slot.reservation.status-orange { background: linear-gradient(180deg, var(--status-orange), var(--status-orange-d)); }
.slot.reservation.status-gray   { background: linear-gradient(180deg, var(--status-gray),   var(--status-gray-d)); }
.slot.reservation.status-amber  { background: linear-gradient(180deg, var(--status-amber),  var(--status-amber-d)); }
.slot.reservation.status-amber-calm { background: linear-gradient(180deg, var(--status-amber-calm), var(--status-amber-calm-d)); }
/* Unresolved: the one state on the floor that should nag. */
.slot.reservation.status-red {
  background: linear-gradient(180deg, var(--status-red), var(--status-red-d));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.res-alert {
  font-weight: 900;
  margin-right: 4px;
  color: #fff;
}

/* Moving current-time line (positioned by JS; sits under the sticky header
   and frozen columns so it never bleeds over them). */
.now-line {
  position: absolute;
  top: var(--header-h);
  bottom: 0;
  left: calc(var(--col-tbl) + var(--col-walk) + var(--col-cap));
  width: 2px;
  margin-left: -1px;
  background: #f87171;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(248,113,113,.45);
  transition: left .9s linear;
}
.now-line::before {
  content: "";
  position: absolute;
  top: 0; left: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #f87171;
}

/* Empty-state (no resources) */
.empty-state {
  grid-row: var(--row);
  grid-column: var(--col);
  padding: 30px;
  color: var(--text-mute);
  text-align: center;
}

/* ---------------------------------------------------------------- Side panel */
.side-panel {
  display: none;
  position: sticky;
  top: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  min-height: 200px;
}
.workspace.panel-open .side-panel { display: block; }
.panel-close {
  margin-left: auto;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.panel-close:hover {
  color: var(--text);
  border-color: var(--border-hover);
}
.panel-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.panel-header h2 {
  margin: 0 0 4px; font-size: 16px;
}
.panel-header .muted { margin: 0 0 16px; color: var(--text-mute); font-size: 12px; }

.panel-empty h2 { margin: 0 0 8px; font-size: 15px; }
.panel-empty p { color: var(--text-dim); line-height: 1.5; margin: 0 0 18px; }
.legend-vertical { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.legend-vertical li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.legend-dot {
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--status-gray);
}
.legend-dot.status-blue   { background: var(--status-blue); }
.legend-dot.status-purple { background: var(--status-purple); }
.legend-dot.status-orange { background: var(--status-orange); }
.legend-dot.status-gray   { background: var(--status-gray); }
.legend-dot.status-amber  { background: var(--status-amber); }
.legend-dot.status-amber-calm { background: var(--status-amber-calm); }
.legend-dot.status-red    { background: var(--status-red); }

/* Forms */
.res-form { display: grid; gap: 12px; }
.field { display: grid; gap: 5px; }
.field-label {
  font-size: 12px; color: var(--text-dim); font-weight: 600;
}
.field input, .field select {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font: inherit;
  color-scheme: dark;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(96,165,250,.2);
}
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Toast */
.toast {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
}
.toast-created { border-left-color: #10b981; }
.toast-updated { border-left-color: var(--accent); }
.toast-transferred { border-left-color: #a78bfa; }
.toast-deleted { border-left-color: var(--danger); }

/* Table transfer (seated party, host only) */
.transfer-table { margin-top: 14px; }
.transfer-table-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(167, 139, 250, .5);
  background: rgba(167, 139, 250, .1);
}
.transfer-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}
.transfer-confirm input { margin-top: 2px; }
.transfer-table-panel .btn:disabled { opacity: .5; cursor: not-allowed; }

/* HTMX loading indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }
.timeline-wrap.htmx-request { opacity: .85; }

/* Scrollbar polish */
.timeline-wrap::-webkit-scrollbar { height: 12px; width: 12px; }
.timeline-wrap::-webkit-scrollbar-track { background: var(--bg-elev); }
.timeline-wrap::-webkit-scrollbar-thumb {
  background: #2d333d; border-radius: var(--radius-md); border: 2px solid var(--bg-elev);
}
.timeline-wrap::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* Guest phone search (reservation panel) */
.guest-search .guest-search-results { margin-top: 6px; }
.guest-matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.guest-matches .guest-pick {
  width: 100%; text-align: left; font-size: 12px; padding: 6px 8px;
  border: 1px solid #2d333d; border-radius: var(--radius-sm); background: var(--bg-elev);
  color: var(--text); cursor: pointer;
}
.guest-matches .guest-pick:hover { border-color: var(--accent); }

.guest-search-row { display: flex; gap: 6px; align-items: center; }
.guest-search-row input { flex: 1; }

/* ---------------------------------------------------------------- Operator settings */
.page.settings { padding: 22px; }
.settings-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 18px; flex-wrap: wrap;
}
.settings-head h2 { margin: 0 0 6px; font-size: 18px; }
.settings-head .muted { max-width: 48ch; font-size: 13px; }
.settings-meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.settings-meta .section-picker select { min-width: 200px; }
.settings-meta .filter {
  padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text); min-width: 200px;
}
.settings-list { display: grid; gap: 4px; }
.settings-empty {
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--bg-elev);
}
.settings-row {
  display: grid;
  grid-template-columns: 1.2fr .5fr .8fr .8fr .9fr .9fr 1fr 1fr 1.3fr;
  align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--bg-elev);
}
.settings-row--head {
  background: transparent; border: none; padding-bottom: 2px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-mute);
}
.settings-row.is-walkin { border-color: var(--accent); }
.settings-row .t-name { font-weight: 600; font-size: 13px; }
.settings-row input[type="number"],
.settings-row select {
  width: 64px; padding: 5px 7px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.settings-row select { width: 110px; }
.walkin-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }

/* Adjacent-tables editor: a dropdown of checkboxes inside the row form */
.adj-edit { position: relative; }
.adj-edit > summary {
  list-style: none; cursor: pointer; font-size: 12px; color: var(--text-dim);
  padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); white-space: nowrap; user-select: none;
}
.adj-edit > summary::-webkit-details-marker { display: none; }
.adj-edit[open] > summary { border-color: var(--accent); color: var(--text); }
.adj-panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); right: 0;
  min-width: 240px; max-width: 320px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elev); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.adj-panel > .muted { font-size: 11px; }
.adj-panel p.muted { margin: 0 0 8px; font-size: 11px; }
.adj-options {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 4px 10px; max-height: 220px; overflow-y: auto;
}
.adj-option {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim); cursor: pointer;
}
.adj-option:has(input:checked) { color: var(--text); }
.row-actions { display: inline-flex; align-items: center; gap: 8px; }
.flash { font-size: 12px; }
.flash-ok { color: #10b981; }
.flash-err { color: var(--danger); }
.pill {
  display: none; /* reserved slot; count shown in adjacent text */
}

/* Operator overview chart */
.overview-card {
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--bg-elev); padding: 14px 16px; margin-bottom: 16px;
}
.overview-card h3 { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.chart-box { position: relative; height: 160px; }

/* ------------------------------------------------- Late / intervention */
.late-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 4px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(217, 119, 6, .5);
  background: rgba(217, 119, 6, .12);
}
.late-actions-label { font-size: 12px; color: var(--text-dim); }

/* The attention queue: bookings past their time that nobody has resolved. It
   sits above the timeline because the whole design refuses to auto-resolve, so
   this is the only thing standing between a forgotten booking and oblivion. */
.attention-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(220, 38, 38, .55);
  background: rgba(220, 38, 38, .12);
  font-size: 13px;
}
.attention-bar strong { color: var(--fg-red); }
.attention-chip {
  border: 1px solid rgba(220, 38, 38, .5);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-elev);
  cursor: pointer;
}
.attention-chip:hover { border-color: var(--fg-red); }