@font-face {
  font-family: "TEXAR";
  src: url("assets/fonts/TEXAR.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TEXAR";
  src: url("assets/fonts/TEXAR-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --void: #0a0a0a;
  --deep: #0c140e;
  --surface: #0c140e;
  --surface-strong: #131d15;
  --forest-3: #17221a;
  --gold: #9d8a5f;
  --gold-text: #d4bd7a;
  --gold-lt: rgba(157, 138, 95, 0.12);
  --gold-border: rgba(157, 138, 95, 0.22);
  --sage: #93a696;
  --sage-bright: #abc2af;
  --sage-lt: rgba(122, 150, 128, 0.1);
  --white: #fefefe;
  --cream: rgba(254, 254, 254, 0.86);
  --text: rgba(247, 241, 230, 0.92);
  --muted: rgba(247, 241, 230, 0.82);
  --faint: rgba(247, 241, 230, 0.68);
  --border: rgba(157, 138, 95, 0.14);
  --border-strong: rgba(157, 138, 95, 0.34);
  --field: rgba(247, 241, 230, 0.045);
  --field-ink: #f7f1e6;
  --warn: #c9a86a;
  --danger: #ce8a78;
  --shadow: rgba(0, 0, 0, 0.34);
  --callout-bg: var(--surface-strong);
  --callout-ink: #e8e2d4;
  --callout-kicker: var(--gold-text);
  --callout-warn-bg: #3a2018;
  --brand: "TEXAR", "Oxanium", sans-serif;
  --serif: "Oxanium", "DM Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --display: "Oxanium", "DM Sans", sans-serif;
  --sans: "DM Sans", Inter, system-ui, sans-serif;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* ─── where anything else that sticks must park ─────────────────────────
     This was `--staff-header-offset: 132px`, a guess at the header's height.
     `.staff-header` is not a fixed height: between ~861px and ~1150px wide it
     wraps "Property Control" onto a second line and grows from 107px to 149px,
     so 132px put the sticky front-office panel and the restaurant reservation
     sidebar 30px UNDERNEATH the header. Above ~1150px the same constant left
     13px of dead space. A constant is wrong in both directions and goes wrong
     again the next time anything in the header changes.

     So the offset is now derived, and the only number the layout still owns is
     the gap it wants below the header:

       offset = header's own sticky top + the header's measured height + gap

     `--staff-header-height` is written on <html> by `syncStaffHeaderOffset()`
     in staff.js, from a ResizeObserver on the header itself — no CSS length can
     read an element's height, and a container query cannot either. The value
     below is only the fallback for the moment before that first measurement
     (and if scripting is off). It is deliberately the TALL, wrapped case:
     over-clearing costs a few pixels of gap, under-clearing hides content
     behind the header, which is the bug this replaced. */
  --staff-header-top: 12px;
  --staff-header-height: 149px;
  --staff-header-gap: 12px;
  --staff-header-offset: calc(
    var(--staff-header-top) + var(--staff-header-height) + var(--staff-header-gap)
  );
}

[data-theme="light"] {
  color-scheme: light;
  --void: #f2eee5;
  --deep: #e9e3d6;
  --surface: #ede7d8;
  --surface-strong: #f8f3e9;
  --white: #1a1a18;
  --cream: rgba(26, 26, 24, 0.86);
  --text: rgba(28, 24, 18, 0.92);
  --muted: rgba(36, 30, 22, 0.84);
  --faint: rgba(36, 30, 22, 0.72);
  --border: rgba(122, 92, 46, 0.2);
  --border-strong: rgba(122, 92, 46, 0.34);
  --gold: #9b8455;
  --gold-text: #7a5c2e;
  --gold-border: rgba(122, 92, 46, 0.26);
  --gold-lt: rgba(122, 92, 46, 0.08);
  --sage: #4a7a55;
  --sage-bright: #2f5a3a;
  --sage-lt: rgba(74, 122, 85, 0.1);
  --forest-3: #e4dcc8;
  --field: rgba(255, 255, 255, 0.48);
  --field-ink: #1a1a18;
  --warn: #b3683d;
  --danger: #a33d34;
  --shadow: rgba(74, 58, 30, 0.14);
  --callout-bg: var(--surface-strong);
  --callout-ink: #2c281f;
  --callout-kicker: var(--gold-text);
  --callout-warn-bg: #f3e4dc;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 80% at 72% 8%, rgba(20, 36, 22, 0.64), transparent 58%),
    radial-gradient(ellipse 50% 50% at 12% 82%, rgba(155, 132, 85, 0.08), transparent 62%),
    var(--void);
  color: var(--white);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: hidden;
}

[data-theme="light"] body {
  background:
    radial-gradient(ellipse 72% 82% at 70% 6%, rgba(122, 92, 46, 0.09), transparent 58%),
    radial-gradient(ellipse 48% 50% at 10% 84%, rgba(74, 122, 85, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(255, 252, 245, 0.5), rgba(233, 227, 214, 0.16)),
    var(--void);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  background-image:
    linear-gradient(rgba(157, 138, 95, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 138, 95, 0.028) 1px, transparent 1px);
  background-size: 52px 52px;
}

body::after {
  z-index: 9999;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(122, 92, 46, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 92, 46, 0.055) 1px, transparent 1px);
}

[data-theme="light"] body::after {
  opacity: .22;
}

button, input, select, textarea { font: inherit; }
a { color: var(--gold-text); font-weight: 600; }

.app-shell,
.staff-shell {
  position: relative;
  z-index: 1;
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
  padding: 22px 0 34px;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
}

.panel,
.status-panel,
.staff-login-card,
.metric,
.toolbar,
.report-panel,
.table-panel,
.settings-panel {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 70px var(--shadow);
  backdrop-filter: blur(16px);
}

[data-theme="light"] .panel,
[data-theme="light"] .status-panel,
[data-theme="light"] .staff-login-card,
[data-theme="light"] .toolbar,
[data-theme="light"] .report-panel,
[data-theme="light"] .table-panel,
[data-theme="light"] .settings-panel {
  background: rgba(248, 243, 233, 0.72);
  box-shadow: 0 28px 80px rgba(74, 58, 30, 0.12);
}

.panel { overflow: hidden; }

.topbar,
.staff-header {
  position: relative;
  flex-wrap: wrap;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgba(157, 138, 95, 0.12), rgba(147, 166, 150, 0.07) 46%, rgba(10, 10, 10, 0.22)),
    color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

[data-theme="light"] .topbar,
[data-theme="light"] .staff-header {
  background:
    linear-gradient(135deg, rgba(155, 132, 85, 0.12), rgba(74, 122, 85, 0.075) 48%, rgba(255, 255, 255, 0.22)),
    rgba(248, 243, 233, 0.58);
}

/* The one bar in the shell that the whole page scrolls underneath, so it is
   the one bar that must be fully opaque. It shared `.topbar`'s 94% background
   above and had no `backdrop-filter` (unlike every panel in the list at the
   top of this file), so the Restaurant sub-header — the Floor/Timeline/Heatmap
   tabs and the "confirm tonight's special" banner — bled straight through it
   and both layers of text became unreadable. Restated opaque here rather than
   in the shared rule: `.topbar` is not sticky and nothing scrolls under it. */
.staff-header {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: sticky;
  /* The one place this is stated. `--staff-header-offset` adds it back, so the
     header and everything that must clear it can never disagree. */
  top: var(--staff-header-top);
  z-index: 25;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  background:
    linear-gradient(135deg, rgba(157, 138, 95, 0.12), rgba(147, 166, 150, 0.07) 46%, rgba(10, 10, 10, 0.22)),
    var(--surface);
}

[data-theme="light"] .staff-header {
  background:
    linear-gradient(135deg, rgba(155, 132, 85, 0.12), rgba(74, 122, 85, 0.075) 48%, rgba(255, 255, 255, 0.22)),
    var(--surface);
}

.brand-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  row-gap: 2px;
  flex: 1 1 240px;
  min-width: 0;
}

.brand-lockup h1,
.property-name,
.page-section-label {
  overflow-wrap: anywhere;
}

.property-name {
  margin: 0;
  color: var(--cream);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}

.property-name[hidden] {
  display: none;
}

.brand-logo-link {
  grid-row: 1 / span 3;
  display: inline-flex;
  width: fit-content;
}

.brand-logo-link.is-disabled {
  cursor: default;
  pointer-events: none;
}

/* Moon/sun sits on the title, not in the tab bar, so a full row of tabs
   cannot push it off the header. The icon size is stated with the other
   .theme-toggle rules, after their colours. */
.brand-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.brand-title-row h1 {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .brand-title-row h1 {
    font-size: 17px;
  }

  .staff-header .brand-lockup img {
    width: 64px;
  }
}

.brand-lockup img,
.login-logo {
  width: 112px;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.26));
}

[data-theme="light"] .brand-lockup img,
[data-theme="light"] .login-logo {
  filter: invert(1) contrast(1.08) drop-shadow(0 10px 18px rgba(74, 58, 30, 0.12));
}

.brand-lockup img.hotel-logo,
[data-theme="light"] .brand-lockup img.hotel-logo {
  width: auto;
  max-width: 168px;
  max-height: 40px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  /* The file is black ink on a clear background. On a dark header it is
     painted in the header ink. There is no white plate behind it. */
  filter: brightness(0) invert(1);
  image-rendering: auto;
}

[data-theme="light"] .brand-lockup img.hotel-logo {
  filter: brightness(0);
}

.topbar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 320px;
  min-width: 0;
}

.staff-identity {
  min-height: 34px;
  min-width: 164px;
  max-width: 300px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--forest-3) 70%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.staff-identity[hidden] {
  display: none;
}

/* The same `overflow: visible` + `text-overflow: ellipsis` pair that broke
   `.fo-head-summary`: text-overflow does nothing on a box that does not clip,
   so a long name and role ran 18px past the chip's 300px cap and into the
   header's right padding at ~990px wide. `min-width: 0` as well, or these flex
   items refuse to shrink and the ellipsis still never engages. The full name
   and role go on the chip's `title` in staff.js. */
.staff-identity span,
.staff-identity strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-identity span {
  color: var(--cream);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.staff-identity strong {
  padding-left: 8px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ─── user menu ─────────────────────────────────────────────────────────
   Theme, language, the name/role chip and Log out. Below 1280px the wrapper
   and its panel are `display: contents` and the trigger is gone, so those four
   controls lay out in `.topbar-controls` exactly as they did before the menu
   existed. From 1280px up they fold into one dropdown so the whole header
   fits on one line. */
.staff-user-menu,
.staff-user-panel {
  display: contents;
}

.staff-user-trigger {
  display: none;
}

@media (min-width: 1280px) {
  .staff-header {
    flex-wrap: nowrap;
    padding: 10px 16px;
    gap: 14px;
  }

  .brand-lockup {
    flex: 0 0 auto;
    column-gap: 10px;
    row-gap: 0;
  }

  .brand-lockup img {
    width: 64px;
  }

  .brand-lockup h1 {
    font-size: 18px;
    white-space: nowrap;
  }

  .brand-lockup .property-name {
    font-size: 12px;
  }

  .brand-lockup .page-section-label {
    font-size: 10px;
  }

  /* Still allowed to wrap: a longer translation or an extra tab then drops a
     tab to a second row instead of running under the title. */
  .topbar-controls {
    flex: 1 1 0;
    gap: 5px;
  }

  .topbar-controls > button.secondary,
  .topbar-controls > .tenant-dashboard-link {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 9px;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .staff-user-menu {
    display: block;
    position: relative;
    flex: 0 0 auto;
    margin-left: 4px;
  }

  .staff-user-trigger {
    display: inline-flex;
    gap: 8px;
    min-height: 32px;
    max-width: 200px;
    padding: 0 10px 0 4px;
    background: transparent;
    border-color: var(--border-strong);
    color: var(--cream);
    letter-spacing: .06em;
    text-transform: none;
  }

  .staff-user-trigger:hover,
  .staff-user-menu.is-open .staff-user-trigger {
    opacity: 1;
    border-color: var(--gold);
    background: var(--gold-lt);
  }

  .staff-user-avatar {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--void);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .staff-user-trigger-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }

  .staff-user-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 260px;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  }

  .staff-user-menu.is-open .staff-user-panel {
    display: flex;
  }

  /* The name and role head the dropdown; the DOM keeps the mobile order. */
  .staff-user-panel .staff-identity {
    order: -1;
    min-width: 0;
    max-width: none;
  }

  .staff-user-panel .language {
    min-width: 0;
  }

  .staff-user-panel .theme-toggle,
  .staff-user-panel #logoutButton {
    width: 100%;
  }
}

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-tab-button.is-active,
.topbar-controls .is-active {
  border-color: var(--sage);
  background: var(--sage-lt);
  color: var(--white);
}

@media (min-width: 861px) {
  .staff-header {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
  }

  .staff-header .brand-lockup {
    flex: 0 0 auto;
    column-gap: 12px;
    /* The title column has to keep the moon/sun button inside the brand.
       minmax(0, 1fr) let that button hang over the tabs. */
    grid-template-columns: auto max-content;
  }

  .staff-header .brand-lockup img {
    width: clamp(72px, 7.5vw, 92px);
  }

  .staff-header .brand-lockup h1 {
    font-size: clamp(17px, 1.55vw, 22px);
    white-space: nowrap;
  }

  .staff-header .property-name,
  .staff-header .page-section-label {
    white-space: nowrap;
  }

  .staff-header .topbar-controls {
    flex-wrap: wrap;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Wide screens: the title takes its own row so "Property Control" cannot
   paint over Check-In. The 861px rule stays nowrap so the mid-width bar
   and the More menu still share one row. This block comes later, so at
   1280px and up it wins. */
@media (min-width: 1280px) {
  .staff-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .staff-header .brand-lockup {
    flex: 1 1 100%;
  }

  .staff-header .topbar-controls {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.staff-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}

.nav-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.nav-group[hidden] { display: none; }

.nav-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.nav-group-label {
  display: block;
  margin: 0;
  min-height: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-group-label[hidden] { display: none; }

.login-property {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.sandbox-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 8px 0 0;
  padding: 0 10px;
  border-radius: 999px;
  background: #8a5a12;
  color: #fff8e8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 16%, var(--surface));
  color: var(--danger);
  font-size: 14px;
}

.login-text-link {
  background: none;
  border: 0;
  box-shadow: none;
  min-height: 44px;
  padding: 0;
  color: var(--gold-text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panel-error {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--text);
  font-size: 14px;
}

.staff-nav-more {
  position: relative;
}

.staff-nav-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 168px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.staff-nav-more-menu > :is(button, .text-button) {
  width: 100%;
  justify-content: flex-start;
}

.cash-layout,
.cash-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.cash-layout-guided {
  grid-template-columns: 1fr;
}

.cash-layout .cash-card:first-child,
.cash-layout .cash-card:nth-child(2) {
  grid-column: 1 / -1;
}

.cash-guided-card {
  max-width: none;
}

.cash-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 22px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: visible;
  background: var(--border);
}

button.workflow-step {
  width: 100%;
  margin: 0;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.workflow-step {
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
}

.workflow-step span {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--gold-text);
  font-family: var(--display);
  font-weight: 700;
}

.workflow-step strong {
  color: var(--cream);
  font-family: var(--display);
  font-size: 14px;
}

.workflow-step small {
  color: var(--muted);
  line-height: 1.5;
}

.workflow-step.is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sage) 20%, var(--surface)), var(--surface-strong));
}

.workflow-step.is-active span {
  background: var(--gold);
  color: #17140b;
  border-color: var(--gold);
}

.cash-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
  padding: 18px;
  position: relative;
  overflow: visible;
}

.cash-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--gold);
  opacity: .78;
}

.cash-card h3 {
  margin: 0 0 10px;
  color: var(--white);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
}

.cash-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  background: var(--gold-lt);
}

.cash-result span,
.cash-event span {
  color: var(--muted);
}

.cash-result span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.cash-result strong {
  min-width: 0;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: right;
}

.cash-result strong.is-warning {
  color: var(--warn);
}

.cash-event-list {
  display: grid;
  gap: 10px;
}

.cash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cash-card-head h3 {
  margin: 0;
}

.cash-collapse-toggle {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.cash-collapsible-card.is-collapsed {
  min-height: 0;
}

.cash-collapsible-card.is-collapsed .cash-event-list {
  display: none;
}

.cash-event {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.cash-event-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cash-event strong {
  font-family: var(--display);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.cash-proof-link {
  min-height: 26px;
  padding: 0 10px;
  font-size: 9px;
  letter-spacing: .14em;
  white-space: nowrap;
}

.cash-event:last-child {
  border-bottom: 0;
}

.cash-event.variance strong {
  color: var(--warn);
}

.finance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cash-bank-task {
  margin: 18px 0;
}

.cash-bank-task.is-attention {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(198, 169, 103, 0.28), 0 18px 60px rgba(198, 169, 103, 0.08);
}

.cash-option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.accountant-file-drop {
  align-items: end;
  border: 1px solid var(--border);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.25fr) auto;
  margin: 16px 0 22px;
  padding: 14px;
}

.accountant-file-drop h4 {
  font-family: var(--display);
  font-size: 14px;
  margin: 0 0 6px;
}

.accountant-file-drop p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.accountant-file-input {
  display: grid;
  gap: 8px;
}

.accountant-file-input span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cash-option-button {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
}

.cash-option-button.is-selected {
  background: var(--gold);
  color: #071711;
}

.cash-option-check {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-size: 11px;
  height: 18px;
  justify-content: center;
  line-height: 1;
  width: 18px;
}

.cash-pill {
  align-items: center;
  border: 1px solid rgba(198, 169, 103, 0.35);
  color: var(--muted);
  display: inline-flex;
  font-family: var(--mono);
  font-size: 0.78rem;
  min-height: 38px;
  padding: 0 14px;
}

.compact-form {
  margin: 0;
}

.settings-head.compact {
  margin-bottom: 14px;
}

.cash-expense-rows {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.cash-expense-row,
.cash-sale-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-strong) 64%, transparent);
}

.cash-expense-row.is-collapsed {
  display: block;
  padding: 0;
  background: color-mix(in srgb, var(--surface-strong) 42%, transparent);
}

.cash-expense-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
}

.cash-expense-main,
.cash-expense-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cash-expense-main strong {
  color: var(--white);
  white-space: nowrap;
}

.cash-expense-main span,
.cash-expense-meta span {
  overflow: visible;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cash-expense-summary-category {
  color: var(--gold) !important;
}

.cash-expense-actions,
.cash-expense-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cash-expense-editor {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cash-expense-row .settings-wide,
.cash-expense-row .cash-expense-editor-actions,
.cash-sale-row .settings-wide,
.cash-sale-row .remove-sale-row {
  grid-column: 1 / -1;
}

.cash-total-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.eyebrow {
  margin: 4px 0 0;
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 600;
}

h1, h2 { margin: 0; letter-spacing: 0; }

h1 {
  max-width: 720px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700;
  line-height: 1.05;
}

.page-section-label {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: none;
}

h2 {
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.1;
}

.language {
  display: grid;
  gap: 7px;
  min-width: 124px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

label {
  display: grid;
  gap: 8px;
  align-content: start;
  color: var(--cream);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.language select,
input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  background: color-mix(in srgb, var(--forest-3) 72%, transparent);
  color: var(--field-ink);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

input:not([type="checkbox"]):not([type="hidden"]),
select {
  height: 45px;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: rgba(255, 252, 245, 0.62);
  border-color: rgba(122, 92, 46, 0.24);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--void), 0 0 0 3px var(--gold-lt);
  background: color-mix(in srgb, var(--forest-3) 92%, transparent);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  background: rgba(74, 122, 85, 0.2);
}

.password-control {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.password-control input {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 13px;
}

.password-toggle {
  flex: 0 0 42px;
  width: 28px;
  width: 42px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--field);
  color: var(--muted);
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--gold-text);
  background: var(--gold-lt);
}

.password-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phone-field {
  display: grid;
  grid-template-columns: minmax(170px, 0.72fr) minmax(150px, 1fr);
  gap: 8px;
}

.phone-field select,
.phone-field input {
  min-width: 0;
}

textarea {
  min-height: 92px;
  resize: vertical;
  text-transform: none;
  letter-spacing: 0;
}

label small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
  background: rgba(8, 10, 8, 0.18);
}

[data-theme="light"] .steps {
  background: rgba(255, 252, 245, 0.34);
}

.step {
  min-height: 66px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.step:last-child { border-right: 0; }

.step span {
  width: 25px;
  height: 25px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  color: var(--sage);
  font-size: 11px;
  font-weight: 600;
}

.step strong {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}

.step.is-active {
  background: var(--gold-lt);
  color: var(--gold-text);
}

.step.is-active span {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--void);
}

form { padding: 32px 30px 0; }
.form-step { display: none; }
.form-step.is-active { display: block; }

.section-head {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.section-head p,
.status-panel p,
.staff-login-card p {
  margin: 0;
  color: var(--text);
  font-weight: 300;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.wide { margin-top: 17px; }

.camera-card { display: grid; gap: 14px; }

#camera {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050705;
  border: 1px solid var(--border);
  border-radius: 4px;
  object-fit: cover;
}

.camera-actions,
.success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button,
.text-button,
.capture-file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--void);
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}

button:hover,
.text-button:hover,
.capture-file-button:hover {
  opacity: .86;
}

button:focus-visible,
.text-button:focus-visible,
.capture-file-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--void), 0 0 0 3px var(--gold-lt);
}

.theme-toggle,
button.secondary,
.text-button,
.capture-file-button {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--gold-text);
}

button.secondary:hover,
.text-button:hover,
.capture-file-button:hover {
  border-color: var(--gold);
  color: var(--gold-text);
  background: var(--gold-lt);
}

.sandbox-test-id {
  border-style: dashed;
}

.capture-file-button.primary-capture-button {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--void);
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  background: #141816;
  border-color: rgba(244, 240, 232, 0.45);
  color: #f4f0e8;
  font-size: 0;
  letter-spacing: 0;
  text-transform: none;
}

[data-theme="light"] .theme-toggle {
  background: #ffffff;
  border-color: rgba(26, 26, 24, 0.4);
  color: #1a1a18;
}

.theme-toggle .theme-icon {
  display: none;
  width: 18px;
  height: 18px;
}

html:not([data-theme="light"]) .theme-toggle .theme-icon-sun,
html[data-theme="light"] .theme-toggle .theme-icon-moon {
  display: block;
}

.theme-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

.brand-title-row .theme-toggle {
  flex: 0 0 auto;
  align-self: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  /* The circle was centered on the line box, which sits above the letters. */
  transform: translateY(3px);
}

button:disabled {
  opacity: .48;
  cursor: wait;
}

.topbar-controls button.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--void);
}

.file-fallback {
  width: min(100%, 330px);
  padding: 13px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  background: var(--gold-lt);
}

.file-fallback.primary-upload {
  border-style: solid;
  border-color: var(--gold);
  background: rgba(155, 132, 85, .2);
}

.file-fallback span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.file-fallback input {
  width: 100%;
  min-height: 0;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.uppy-id-uploader {
  max-width: 100%;
  overflow: visible;
}

.uppy-id-uploader .uppy-Dashboard-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: var(--surface);
  border-color: var(--border-strong);
  border-radius: 4px;
  font-family: var(--sans);
}

.uppy-id-uploader .uppy-Dashboard-innerWrap,
.uppy-id-uploader .uppy-Dashboard-AddFiles,
.uppy-id-uploader .uppy-Dashboard-AddFilesPanel,
.uppy-id-uploader .uppy-Dashboard-AddFiles-list {
  max-width: 100% !important;
  min-width: 0 !important;
}

.uppy-id-uploader .uppy-Dashboard-AddFiles-title,
.uppy-id-uploader .uppy-Dashboard-note {
  color: var(--text);
}

@media (max-width: 700px) {
  .uppy-id-uploader .uppy-Dashboard-inner {
    height: 260px !important;
  }

  .uppy-id-uploader .uppy-Dashboard-AddFiles-title {
    max-width: 100%;
    padding: 0 14px;
    font-size: 16px;
    line-height: 1.35;
    white-space: normal;
  }

  .uppy-id-uploader .uppy-Dashboard-AddFiles-list {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px;
  }

  .uppy-id-uploader .uppy-DashboardTab {
    width: 82px;
    min-width: 82px;
  }
}

.capture-file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sumsub-frame {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-top: 16px;
  min-height: 620px;
  overflow: visible;
  background: var(--surface-strong);
}

.sumsub-frame iframe {
  border: 0;
  width: 100%;
}

.compliance-note,
label small {
  color: var(--muted);
  display: block;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 8px;
}

.id-progress {
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  padding: 12px 14px;
  text-transform: uppercase;
}

.captures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.capture {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: visible;
  background: var(--surface-strong);
  position: relative;
}

.capture.is-checking {
  border-color: var(--gold);
}

.capture.is-rejected {
  border-color: var(--danger);
}

.capture.is-review {
  border-color: var(--warn);
}

.capture img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.capture span {
  display: block;
  padding: 9px 10px;
  color: var(--muted);
}

.capture.is-checking span,
.capture.is-review span {
  color: var(--gold);
}

.capture.is-rejected span {
  color: var(--danger);
}

.capture > small {
  border-top: 1px solid var(--border);
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.45;
  padding: 0 10px 42px;
}

.capture.is-rejected > small {
  color: var(--danger);
}

.capture-placeholder {
  align-items: center;
  aspect-ratio: 4 / 3;
  color: var(--muted);
  display: grid;
  font-family: var(--mono);
  justify-items: center;
  letter-spacing: .08em;
  padding: 18px;
  text-transform: uppercase;
}

.capture-placeholder small {
  color: var(--gold);
  font-size: 12px;
  margin-top: 8px;
}

.remove-capture {
  border: 0;
  border-radius: 0;
  bottom: 0;
  font-size: 12px;
  min-height: 0;
  padding: 8px 10px;
  position: absolute;
  right: 0;
}

.consent {
  grid-template-columns: 22px 1fr;
  align-items: start;
  padding: 16px;
  background: var(--sage-lt);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.consent input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 2px;
}

.signature-wrap {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

#signaturePad {
  width: 100%;
  height: 220px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-strong) 76%, white);
  touch-action: none;
}

[data-theme="light"] #signaturePad {
  background: rgba(255, 252, 245, 0.74);
}

.form-actions {
  margin: 32px -30px 0;
  padding: 18px 30px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
  background: rgba(8, 10, 8, 0.14);
}

[data-theme="light"] .form-actions {
  background: rgba(255, 252, 245, 0.36);
}

.status-panel {
  padding: 24px;
  align-self: start;
  position: sticky;
  top: 20px;
}

.status-panel h2 { margin-bottom: 18px; }

.status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.status-row span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.status-row strong { color: var(--warn); }
.status-row strong.is-done { color: var(--sage-bright); }

#submitStatus {
  margin-top: 18px;
  line-height: 1.55;
}

.success-state {
  padding: 58px 30px;
  text-align: center;
}

.success-mark {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  background: var(--gold);
  color: var(--void);
  font-size: 31px;
  font-weight: 900;
}

.success-state p:not(.success-mark) {
  margin: 10px auto 0;
  max-width: 520px;
  color: var(--muted);
}

.success-actions {
  justify-content: center;
  margin-top: 24px;
}

.confirm-summary {
  width: min(520px, 100%);
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.confirm-summary div {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px;
  background: var(--surface-strong);
  text-align: left;
}

.confirm-summary dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.confirm-summary dd {
  margin: 6px 0 0;
  color: var(--white);
  font-weight: 600;
}

.restaurant-success-panel {
  width: min(560px, 100%);
  margin: 22px auto 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--gold) 12%, var(--surface-strong));
  text-align: left;
}

.restaurant-success-panel .eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
}

.restaurant-success-panel h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.restaurant-success-panel p:not(.eyebrow) {
  margin: 10px 0 0;
  max-width: none;
}

.restaurant-success-panel .text-button {
  margin-top: 14px;
}

.id-replacement-panel {
  width: min(560px, 100%);
  margin: 22px auto 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, #d66a3d 58%, var(--border));
  border-radius: 4px;
  background: color-mix(in srgb, #d66a3d 12%, var(--surface-strong));
  text-align: left;
}

.id-replacement-panel h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.id-replacement-panel p:not(.eyebrow) {
  margin: 10px 0 0;
  max-width: none;
}

.id-replacement-panel .replacement-upload {
  margin-top: 16px;
}

.replacement-status {
  color: var(--muted);
}

.replacement-status.is-success {
  color: var(--sage-bright);
}

.replacement-status.is-error {
  color: #ff9a7a;
}

.staff-login-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.staff-login-card {
  width: min(460px, 100%);
  padding: 30px;
}

.staff-login-card h1 {
  margin: 4px 0 10px;
  font-size: clamp(38px, 6vw, 58px);
}

.staff-login-card form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding: 0;
}

.staff-login-card .text-button {
  margin-top: 16px;
}

.login-logo {
  margin-bottom: 8px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 10px;
  margin: 18px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: visible;
  background: var(--border);
}

/* Check-In summary is six cards. The public-form allowance is the sixth, and
   a fixed five-column grid left it alone on a second row. Six equal columns
   keep one row from tablet widths up. Cash and invoice strips keep the
   five-column rule above. When the public-form card is hidden, the other
   five still fill the row. A long label wraps inside its card instead of
   pushing the row wider than the screen. */
#arrivalsView > .metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#arrivalsView > .metric-grid:has(> #admissionUsageMetric[hidden]) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#arrivalsView > .metric-grid > .metric {
  min-width: 0;
  container-type: inline-size;
}

#arrivalsView > .metric-grid > .metric span {
  white-space: normal;
}

#arrivalsView > .metric-grid > .metric strong {
  font-size: clamp(16px, 30cqi, 30px);
}

@media (max-width: 640px) {
  /* Narrow phones only. The 860px rule below wraps every other strip to two
     columns; this selector is more specific, so the Check-In strip stays one
     row through tablet widths and wraps here. It also wins over the 560px
     one-column rule, so six cards become three rows of two rather than six
     rows of one. */
  #arrivalsView > .metric-grid,
  #arrivalsView > .metric-grid:has(> #admissionUsageMetric[hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.metric {
  min-height: 86px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  transition: background .2s var(--ease);
}

.metric:hover {
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
  white-space: nowrap;
}

.metric strong {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}

.toolbar {
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
}

.toolbar label {
  width: min(300px, 100%);
}

.report-panel {
  margin-top: 14px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.report-panel h2 {
  margin: 4px 0 0;
  font-size: 19px;
  color: var(--white);
}

.report-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  width: min(100%, 760px);
}

.reports-page {
  display: block;
}

.report-hero {
  margin: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: visible;
  background: var(--border);
}

.report-hero > article {
  padding: 22px;
  min-width: 0;
  background: var(--callout-bg);
  color: var(--callout-ink);
}

.report-hero > article > span {
  display: block;
  color: var(--callout-ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.report-hero > article > strong {
  display: block;
  color: var(--callout-kicker);
  font-family: var(--display);
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.08;
  white-space: nowrap;
}

.report-hero > article > p {
  margin: 12px 0 0;
  color: var(--callout-ink);
  max-width: 56ch;
}

.report-catalog {
  margin: 0 22px 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.report-group {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--callout-bg);
  color: var(--callout-ink);
}

.report-group h3 {
  margin: 0 0 14px;
  color: var(--callout-kicker);
  font-family: var(--display);
  font-size: 20px;
}

.report-link {
  min-height: 36px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  text-align: left;
  background: var(--callout-bg);
  color: var(--callout-ink);
  text-decoration: none;
}

.report-link strong {
  color: var(--callout-ink);
  font-size: 13px;
}

.report-link span {
  color: var(--callout-ink);
  font-size: 12px;
  text-align: right;
}

.settings-panel {
  margin-top: 18px;
  padding: 0;
  overflow: visible;
}

.settings-head {
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.settings-head h2 {
  margin: 4px 0 0;
  color: var(--white);
  font-size: 23px;
}

.settings-form {
  padding: 22px;
  display: grid;
  gap: 22px;
  scroll-margin-top: 190px;
}

.settings-form fieldset {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-strong) 38%, transparent);
}

.settings-form legend {
  padding: 0 8px;
  color: var(--gold-text);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.form-guidance {
  margin: 0 0 16px;
  max-width: 900px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.settings-grid,
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cash-close-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(120px, 170px);
  align-items: end;
}

.cash-pin-field input {
  max-width: 170px;
}

.settings-wide {
  grid-column: 1 / -1;
}

.settings-subsection {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.settings-subsection h3 {
  margin: 0 0 8px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.settings-form output {
  display: block;
  min-height: 44px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--field-ink);
  font-family: var(--mono);
  font-weight: 700;
}

.settings-form output.is-negative {
  color: #8c2f28;
}

.settings-form output.is-positive {
  color: #2e6a44;
}

.schedule-grid {
  margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.schedule-block {
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

.schedule-default {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: grid;
  gap: 12px;
}

.schedule-day {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: grid;
  gap: 10px;
}

.schedule-day strong {
  color: var(--cream);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.schedule-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.schedule-closed {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.schedule-closed input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  flex: 0 0 18px;
}

.email-chip-input {
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.email-chip-list {
  display: contents;
}

.email-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 9px;
  gap: 8px;
  border: 1px solid var(--sage);
  border-radius: 4px;
  border-color: var(--sage);
  background: var(--sage-lt);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.email-chip-remove {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  margin-right: -7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
}

.email-chip-remove:hover,
.email-chip-remove:focus-visible {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
  outline: 2px solid var(--sage);
  outline-offset: -2px;
}

.email-chip-input input {
  min-width: 240px;
  flex: 1;
  border: 0;
  min-height: 36px;
  padding: 0 6px;
  background: transparent;
}

.email-chip-add {
  min-height: 36px;
  padding: 0 14px;
  flex: 0 0 auto;
}

.team-intro {
  margin: 18px 22px 0;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: visible;
  background: var(--border);
}

.team-intro article,
.team-intro p {
  margin: 0;
  padding: 18px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.team-intro span {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.team-intro strong {
  color: var(--gold-text);
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.05;
}

.team-intro p {
  color: var(--muted);
  line-height: 1.55;
}

.team-list {
  padding: 18px 22px 22px;
  display: grid;
  gap: 10px;
}

.team-form-actions {
  margin: 16px 0 0;
  padding: 14px 0 0;
  background: transparent;
}

.team-row {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.team-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.team-identity strong {
  color: var(--cream);
  white-space: nowrap;
}

.team-identity span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.team-access-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.team-access-badges span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--sage);
  border-radius: 999px;
  background: var(--sage-lt);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
}

.team-access-badges span.is-off {
  border-color: var(--border);
  background: transparent;
  color: var(--muted);
}

.team-pin-button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
}

.team-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.team-row-danger {
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--danger) 70%, transparent);
}

.team-pin-button.is-danger,
#confirmModalOk.is-danger {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.review-modal[hidden] {
  display: none;
}

.review-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.review-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 8, 0.72);
  backdrop-filter: blur(10px);
}

.review-dialog {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: auto;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 32px 90px var(--shadow);
}

.manual-review-grid {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 16px;
}

.manual-review-card {
  align-self: start;
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--sage-lt);
}

.manual-review-card strong {
  color: var(--cream);
  font-size: 17px;
}

.manual-review-card span {
  color: var(--muted);
  font-size: 13px;
}

.settings-form select.is-invalid,
.settings-form input.is-invalid,
.settings-form textarea.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 70%, transparent);
}

.field-error {
  display: block;
  min-height: 16px;
  margin-top: 6px;
  color: var(--danger);
  font-size: 11px;
  letter-spacing: .06em;
}

.field-error:empty,
.field-error[hidden] {
  display: none;
}

.modal-actions {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-actions .staff-note {
  flex: 1 1 auto;
  margin: 0 auto 0 0;
}

.table-panel {
  margin-top: 14px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

th, td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  position: sticky;
  top: 0;
  z-index: 2;
}

[data-theme="light"] th {
  background: rgba(74, 122, 85, 0.085);
}

td strong,
td span {
  display: block;
}

td strong {
  color: var(--white);
  font-weight: 600;
}

td span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
}

tbody tr {
  transition: background .2s var(--ease);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--surface-strong) 62%, transparent);
}

.pill {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .15em;
  font-weight: 600;
}

.pill.ready {
  color: var(--sage-bright);
  background: var(--sage-lt);
  border: 1px solid rgba(122, 150, 128, 0.22);
}

.pill.incomplete {
  color: var(--warn);
  background: rgba(212, 148, 106, 0.12);
  border: 1px solid rgba(212, 148, 106, 0.2);
}

.attention-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.attention-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.attention-badge.danger {
  color: var(--danger);
  background: rgba(206, 138, 120, 0.12);
  border: 1px solid rgba(206, 138, 120, 0.28);
}

/* An allergy chip carries a medical need: it wraps rather than truncating, so
   the full text is always readable. */
select.room-assign {
  height: 34px;
  min-width: 148px;
  max-width: 220px;
  padding: 0 8px;
  font-size: 11px;
}

.room-assign-wrap {
  display: grid;
  gap: 4px;
}

.room-source-label {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6356;
}

/* Staff-confirmed reads darker and bolder than an auto or voucher match. */
.room-source-label[data-room-source="staff"] {
  color: #1b1b18;
  font-weight: 600;
}

.room-decision-block {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #fff7e8;
  border: 1px solid rgba(201, 168, 106, 0.45);
}

.room-decision-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 13px;
}

.attention-badge.allergy-chip {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  white-space: normal;
  overflow: visible;
  max-width: none;
  height: auto;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 6px;
}

.attention-badge.birthday-chip {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  white-space: normal;
  overflow: visible;
  max-width: none;
  height: auto;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--warn);
  background: rgba(201, 168, 106, 0.12);
  border: 1px solid rgba(201, 168, 106, 0.28);
}

.attention-badge.warn {
  color: var(--warn);
  background: rgba(201, 168, 106, 0.12);
  border: 1px solid rgba(201, 168, 106, 0.28);
}

.file-cell {
  display: table-cell;
}

.file-cell a { white-space: nowrap; }

.card-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.status-actions {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.status-cell .mark-ready-button,
.status-cell .edit-id-button,
.file-cell .card-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 9px;
}

.delete-submission-button {
  align-items: center;
  background: rgba(214, 111, 95, 0.12);
  border: 1px solid color-mix(in srgb, var(--danger) 48%, transparent);
  border-radius: 999px;
  color: var(--danger);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 34px;
  justify-content: center;
  line-height: 1;
  margin-left: 12px;
  padding: 0 12px;
  text-transform: uppercase;
  width: auto;
}

.delete-submission-button:hover {
  background: rgba(214, 111, 95, 0.2);
  border-color: var(--danger);
}

.delete-submission-button:disabled {
  cursor: wait;
  opacity: .62;
  width: auto;
  padding: 0 10px;
}

.muted { color: var(--muted); }

.empty-state,
.staff-note {
  color: var(--muted);
}

.empty-state {
  margin: 0;
  padding: 24px;
}

.table-pagination {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.table-pagination span {
  color: var(--muted);
  font-size: 12px;
}

.pagination-actions {
  display: flex;
  gap: 6px;
}

.pagination-actions .text-button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  border-color: var(--border);
  background: transparent;
  padding: 0;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.pagination-actions .text-button:hover {
  background: rgba(157, 138, 95, 0.08);
}

.staff-note {
  margin: 14px 2px 0;
  font-size: 13px;
}

.staff-note.is-success {
  color: #5c8f62;
}

.staff-note.is-error {
  color: #b85c4a;
}

.status-check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}

button.is-saved {
  background: #5c8f62;
  border-color: #5c8f62;
  color: #fffaf0;
}

@media (max-width: 860px) {
  /* The header stops being sticky below this width, so nothing needs to clear
     it any more — but the gap below it is still wanted, so zero the two header
     terms rather than restating the offset as a constant. */
  :root {
    --staff-header-top: 0px;
    --staff-header-height: 0px;
  }

  .app-shell,
  .staff-shell {
    width: 100%;
    padding: 0;
    grid-template-columns: 1fr;
  }

  .panel,
  .status-panel,
  .toolbar,
  .table-panel,
  .settings-panel,
  .staff-header {
    border-radius: 0;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
  }

  .topbar,
  .staff-header {
    padding: 18px;
    align-items: flex-start;
    position: relative;
    top: 0;
  }

  .topbar-controls {
    align-items: stretch;
  }

  .staff-nav-more:not([hidden]) {
    display: flex;
    flex: 0 0 auto;
  }

  /* Phone width: fold theme, language, identity and Log out like desktop. */
  .staff-user-menu {
    display: block;
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .staff-user-trigger {
    display: inline-flex;
    gap: 8px;
    min-height: 32px;
    max-width: 140px;
    padding: 0 10px 0 4px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--cream);
    letter-spacing: .06em;
    text-transform: none;
  }

  .staff-user-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: min(260px, calc(100vw - 36px));
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  }

  .staff-user-menu.is-open .staff-user-panel {
    display: flex;
  }

  .staff-user-panel .staff-identity {
    order: -1;
    min-width: 0;
    max-width: none;
  }

  .staff-user-panel .theme-toggle,
  .staff-user-panel #logoutButton {
    width: 100%;
  }

  .brand-lockup {
    grid-template-columns: 1fr;
  }

  .brand-logo-link {
    grid-row: auto;
  }

  .brand-lockup img,
  .login-logo {
    width: 110px;
  }

  form { padding: 24px 18px 0; }
  .grid,
  .settings-grid { grid-template-columns: 1fr; }
  .cash-pin-field input { max-width: none; }
  .manual-review-grid { grid-template-columns: 1fr; }

  .cash-expense-summary {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cash-expense-main,
  .cash-expense-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .cash-expense-actions {
    justify-content: flex-start;
  }

  .cash-open-expense-head,
  .cash-open-expense,
  .cash-shift-closed {
    align-items: stretch;
    flex-direction: column;
  }

  .cash-open-expense button,
  .cash-shift-closed button {
    width: 100%;
  }

  .cash-handover-shift {
    align-items: flex-start;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
  }

  .cash-expense-editor {
    grid-template-columns: 1fr;
  }

  .form-actions {
    margin-left: -18px;
    margin-right: -18px;
    padding: 14px 18px;
  }

  .step {
    flex-direction: column;
    gap: 5px;
    padding: 10px 4px;
    min-height: 70px;
  }

  .step strong {
    width: min-content;
    min-width: 64px;
    text-align: center;
    font-size: 9px;
  }

  .confirm-summary,
  #shiftCloseConfirmSummary,
  .cash-total-grid { grid-template-columns: 1fr; }
  .status-panel { position: static; }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 14px;
  }

  .cash-workflow,
  .report-hero,
  .report-catalog,
  .team-intro {
    grid-template-columns: 1fr;
    margin-left: 14px;
    margin-right: 14px;
  }

  .report-catalog {
    gap: 12px;
  }

  .report-hero > article > strong {
    white-space: normal;
  }

  .team-list {
    padding-left: 14px;
    padding-right: 14px;
  }

  .team-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-access-badges {
    justify-content: flex-start;
  }

  .finance-grid {
    grid-template-columns: 1fr;
  }

  .metric span {
    white-space: normal;
  }

  .toolbar {
    margin: 0;
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar label { width: 100%; }
  .phone-field { grid-template-columns: 1fr; }
  .staff-note { margin: 14px; }

  .modal {
    align-items: start;
    padding: 12px;
  }

  .modal-card {
    max-height: calc(100dvh - 24px);
    padding: 16px;
  }

  .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .modal-actions button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  body { font-size: 13px; }

  .topbar,
  .staff-header {
    display: grid;
  }

  .topbar-controls {
    width: 100%;
    justify-content: space-between;
  }

  .staff-identity {
    max-width: none;
    width: 100%;
  }

  .language {
    flex: 1;
    min-width: 120px;
  }

  .form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-actions button,
  .form-actions [type="submit"] {
    width: 100%;
    padding: 0 10px;
  }

  #submitButton {
    grid-column: 1 / -1;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .cash-result {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cash-result strong {
    text-align: left;
  }

  .cash-close-grid {
    grid-template-columns: 1fr;
  }

  .cash-pin-field input {
    max-width: none;
  }

  .table-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .pagination-actions {
    justify-content: space-between;
  }
}

.cash-handover-card {
  margin-bottom: 16px;
}

.cash-handover-line {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
}

.cash-handover-shift {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cash-open-expense-head,
.cash-open-expense {
  border: 1px solid var(--gold-border);
}

.cash-warning-panel {
  border: 1px solid rgba(212, 109, 74, 0.42);
  display: grid;
  gap: 12px;
  margin: 16px 0 18px;
  padding: 16px 18px;
}

.cash-warning-panel h3 {
  font-size: 1rem;
  margin: 2px 0 0;
}

.cash-warning-list {
  display: grid;
  gap: 8px;
}

.cash-warning-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}

.cash-warning-row strong {
  color: var(--white);
}

.cash-handover-line span {
  color: var(--gold-text);
  flex: 0 0 auto;
}

.cash-handover-shift.is-missing,
.cash-handover-shift em {
  color: var(--muted);
}

.cash-handover-shift em {
  font-style: normal;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.cash-handover-line strong {
  color: var(--white);
  text-transform: capitalize;
}

.cash-shift-closed {
  align-items: center;
  background: rgba(197, 169, 103, 0.1);
  border: 1px solid rgba(197, 169, 103, 0.32);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 14px 0 18px;
  padding: 14px 16px;
}

.cash-shift-closed strong {
  color: var(--gold-text);
  display: block;
  font-family: var(--display);
  font-size: 16px;
}

.cash-shift-closed p {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.cash-guided-card.is-shift-closed h3,
.cash-guided-card.is-shift-closed .cash-result,
.cash-guided-card.is-shift-closed .cash-open-expense-list,
.cash-guided-card.is-shift-closed .cash-expense-rows,
.cash-guided-card.is-shift-closed .cash-close-grid,
.cash-guided-card.is-shift-closed .cash-total-grid {
  opacity: 0.52;
}

.cash-open-expense-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
}

.cash-open-expense-head,
.cash-open-expense {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.cash-open-expense {
  min-height: 54px;
}

.cash-open-expense div {
  display: grid;
  gap: 3px;
}

.cash-open-expense small {
  color: rgba(246, 241, 226, 0.58);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.empty-state.compact {
  margin: 4px 0 10px;
}

/* === Phase 1 cash stabilization additions ================================ */

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 20px;
  background: rgba(8, 10, 8, 0.72);
  backdrop-filter: blur(10px);
  overflow: auto;
}

.modal-card {
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 20px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 32px 90px var(--shadow);
}

.modal-card.compact-modal {
  width: min(520px, 100%);
}

#shiftCloseConfirmSummary,
#shiftCloseSavedSummary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 4px 0 0;
}

#shiftCloseConfirmSummary .cash-result,
#shiftCloseSavedSummary .cash-result {
  min-height: 82px;
  margin-top: 0;
  align-content: space-between;
}

#shiftCloseConfirmSummary .cash-result strong,
#shiftCloseSavedSummary .cash-result strong {
  font-size: 14px;
}

.shift-close-confirm-status {
  margin: -4px 0 0;
}

.shift-close-confirm-status.is-error {
  color: var(--danger);
}

.shift-close-saved-card {
  border-color: rgba(74, 122, 85, 0.52);
}

.shift-close-saved-card h3 {
  color: var(--white);
}

.shift-close-saved-card .staff-note {
  color: var(--gold-text);
  margin: 0;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-card button[type="button"]:not(.secondary):not(.icon-button) {
  min-height: 48px;
  font-size: 14px;
}

.field-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.staff-note.is-warning {
  color: #e7b6a6;
}

/* Cash status as a visible sticky toast on mobile so feedback is never off-screen. */
#cashStatus.is-visible {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--border-strong);
  box-shadow: 0 10px 30px var(--shadow);
}

#cashStatus.is-error {
  border-color: #b2563f;
  color: #e7b6a6;
}

/* Mobile ergonomics: comfortable tap targets and no iOS focus zoom (inputs
   under 16px trigger Safari auto-zoom). Covers the high-traffic surfaces staff
   touch on a phone: login, check-in link form, and the whole cash panel. */
#cashPanel input,
#cashPanel select,
#cashPanel textarea,
#shiftCloseConfirmModal input,
#staffLoginForm input,
#checkinLinkForm input,
#checkinLinkForm select {
  font-size: 16px;
  min-height: 46px;
}

#cashPanel button[type="submit"],
#bankDepositConfirmForm button[type="submit"] {
  min-height: 48px;
  font-size: 14px;
}

.shift-close-variance-block {
  display: grid;
  gap: 10px;
}

@media (max-width: 560px) {
  .modal {
    align-items: start;
    padding: 12px;
  }

  .modal-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 16px;
    gap: 10px;
  }

  #shiftCloseConfirmSummary,
  #shiftCloseSavedSummary {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #shiftCloseConfirmSummary .cash-result,
  #shiftCloseSavedSummary .cash-result {
    min-height: 0;
    padding: 10px 12px;
  }
}

/* ─── Restaurant / The Botanist floor plan ─────────────────────────── */
.restaurant-page {
  --rs-available: var(--sage-bright);
  --rs-reserved: var(--gold-text);
  --rs-seated: #6f9bb0;
  --rs-cleaning: var(--faint);
  --rs-event: #b58bc4;
  --rs-tentative: #c79a4a;
  --rs-seat: rgba(247, 241, 230, 0.14);
}
[data-theme="light"] .restaurant-page {
  --rs-seat: rgba(40, 36, 28, 0.16);
  --rs-tentative: #9a6b1e;
  --rs-seated: #2a5a70;
}
.rl-tentative { background: var(--rs-tentative); }
.restaurant-title {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  margin: 0 0 2px;
  color: var(--cream);
}
.restaurant-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.restaurant-date-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.restaurant-date {
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--field-ink);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 6px 9px;
}
.restaurant-tabs {
  display: flex;
  gap: 2px;
  background: var(--void);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.restaurant-tab {
  font-family: inherit;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.restaurant-tab.is-active {
  background: var(--gold-lt);
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px var(--gold-border);
}
.restaurant-stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 14px 2px 4px;
}
.restaurant-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.restaurant-stat b {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--cream);
}
.restaurant-stat span {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--faint);
}
.restaurant-stage {
  position: relative;
  margin-top: 12px;
}
/* Floor first, sidebars beside it.
   This grid was written for TWO children — reservation sidebar, then floor —
   so `minmax(250px, 320px) minmax(0, 1fr)` put the floor in the wide column.
   PR #68 added a THIRD child (`#inHouseSidebar`, the Tonight panel) between
   them without touching the grid, so auto-placement pushed the floor onto row
   2 / column 1: the floor rendered inside the 320px sidebar column, ~227px
   wide after its own `max-width: 75%`. That is the tiny thumbnail in the
   bottom-left. Placement is stated explicitly now, so adding a fourth child
   cannot silently demote the floor again. */
.restaurant-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  grid-template-rows: auto auto;
  gap: 14px;
  align-items: start;
}
.restaurant-floor-wrap {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.restaurant-inhouse-sidebar {
  grid-column: 2;
  grid-row: 1;
}
.restaurant-reservation-sidebar {
  grid-column: 2;
  grid-row: 2;
}
.restaurant-map-layout[hidden],
.restaurant-reservation-sidebar[hidden] {
  display: none;
}
.restaurant-status {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  padding: 36px 0;
  text-align: center;
}
.restaurant-status.is-error { color: var(--danger); }
.restaurant-floor-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  min-width: 0;
}
.restaurant-floor-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}
.rt-group {
  cursor: pointer;
  transition: opacity 0.15s var(--ease);
}
.rt-group:hover { opacity: 0.86; }
.restaurant-reservation-sidebar {
  position: sticky;
  /* Was `top: 12px` — the same offset as the sticky `.staff-header`, and with
     `z-index: auto` against the header's 25 it parked itself directly behind
     the header on every scroll. */
  top: var(--staff-header-offset);
  max-height: min(72vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.rr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.rr-head b,
.rr-head span { display: block; }
.rr-head b {
  font-family: var(--display);
  font-size: 0.86rem;
  color: var(--cream);
}
.rr-head span {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--faint);
}
.rr-refresh {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 8px;
  cursor: pointer;
}
.rr-list { display: flex; flex-direction: column; gap: 8px; }
.rr-card {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 9px;
  padding: 10px;
  text-align: left;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
}
.rr-card:hover,
.rr-card:focus-visible {
  border-color: var(--gold-border);
  box-shadow: inset 0 0 0 1px var(--gold-border);
  outline: none;
}
.rr-time {
  grid-row: span 2;
  min-width: 42px;
  font-family: var(--display);
  font-size: 0.82rem;
  color: var(--gold-text);
}
.rr-main { min-width: 0; }
.rr-main b,
.rr-main em {
  display: block;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rr-main b { font-size: 0.78rem; color: var(--cream); }
.rr-main em {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-style: normal;
  color: var(--muted);
}
.rr-status {
  justify-self: start;
  font-family: var(--mono);
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}
.rr-empty {
  padding: 16px 4px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}
.restaurant-pop {
  position: absolute;
  z-index: 40;
  width: 234px;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: 0 18px 48px var(--shadow);
  pointer-events: auto;
}
.rp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.rp-name {
  font-family: var(--display);
  font-size: 0.82rem;
  color: var(--cream);
}
.rp-zone {
  font-family: var(--mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-top: 3px;
}
.rp-chip {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.rp-row {
  display: flex;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 6px;
}
.rp-row i {
  color: var(--gold);
  font-style: normal;
  width: 13px;
  flex-shrink: 0;
}
.rp-diet {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.58rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--gold-lt);
  color: var(--gold-text);
  margin: 2px 3px 0 0;
}
.rp-actions {
  display: flex;
  gap: 7px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}
.rp-wa {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  background: rgba(37, 211, 102, 0.12);
  color: #42c97a;
  border: 1px solid rgba(37, 211, 102, 0.3);
}
.rp-close {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: pointer;
}
.restaurant-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
}
.rl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.rl-available { background: var(--rs-available); }
.rl-reserved { background: var(--rs-reserved); }
.rl-seated { background: var(--rs-seated); }
.rl-cleaning { background: var(--rs-cleaning); }
.rl-event { background: var(--rs-event); }
.rl-fav { color: var(--gold-text); }
.restaurant-timeline-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow-x: auto;
}
.rtl-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.rtl-label {
  width: 132px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
  padding-right: 10px;
}
.rtl-track {
  flex: 1;
  height: 26px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: visible;
  min-width: 420px;
}
.rtl-block {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: visible;
}
.rtl-axis {
  display: flex;
  margin-left: 132px;
  margin-bottom: 8px;
}
.rtl-axis span {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--faint);
  border-left: 1px solid var(--border);
  padding-left: 4px;
}

/* ─── Restaurant: actions, modal, setup mode ───────────────────────── */
.rp-act {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}
.rp-btn {
  flex: 1 1 auto;
  min-width: 64px;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.rp-btn:hover { border-color: var(--gold-border); color: var(--gold-text); }
.rp-btn.is-primary { background: var(--gold-lt); color: var(--gold-text); border-color: var(--gold-border); }
.rp-btn.is-danger:hover { border-color: var(--danger); color: var(--danger); }
.rp-history {
  background: none;
  border: none;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.62rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-top: 4px;
}
/* Experiences admin */
.experiences-admin-list {
  display: grid;
  gap: 12px;
  margin: 16px 0 24px;
}

.experiences-admin-card {
  border: 1px solid var(--border);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
}

.experiences-admin-card strong {
  display: block;
  margin-bottom: 4px;
}

.experiences-admin-card span {
  font-family: var(--mono);
  font-size: 0.7rem;
}

.experiences-admin-card p {
  margin: 8px 0 12px;
  font-size: 0.9rem;
}

.experiences-preview-persona {
  display: block;
  margin: 16px 0 8px;
}

.experiences-preview-frame {
  width: 100%;
  min-height: 640px;
  border: 1px solid var(--border);
  background: #ece6da;
  margin-top: 8px;
}

.restaurant-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 5, 0.72);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.restaurant-modal-card {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 26px;
  box-shadow: 0 24px 70px var(--shadow);
}
.rm-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.rm-title { font-family: var(--display); font-size: 1.05rem; color: var(--cream); }
.rm-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
.rm-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.rm-stat { background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.rm-stat b { display: block; font-family: var(--display); font-size: 1.3rem; color: var(--cream); }
.rm-stat span { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.rm-section-label { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin: 16px 0 8px; }
.rm-timeline-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.78rem; color: var(--text); }
.rm-timeline-item span:last-child { color: var(--muted); }
.rm-field { margin-bottom: 14px; }
.rm-field label { display: block; font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin-bottom: 6px; }
.rm-field input[type="text"], .rm-field input[type="number"] { width: 100%; background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--field-ink); font-family: var(--mono); font-size: 0.82rem; padding: 9px 11px; }
.rm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.rm-toggle-row span { font-size: 0.78rem; color: var(--text); }
/* Toggle name + helper text stack to the left of the pill switch */
.rm-toggle-label { flex: 1 1 auto; min-width: 0; }
.rm-toggle-label .field-hint { padding-right: 8px; }
/* "On / Off" header aligned above the pill-switch column */
.rm-toggle-colhead { display: flex; justify-content: flex-end; padding: 0 0 6px; }
.rm-toggle-colhead span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); min-width: 56px; text-align: center; }
/* Minimalist gold pill switch (replaces native checkboxes in the settings modal) */
.rm-toggle-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  box-sizing: border-box; flex: 0 0 auto; margin: 0;
  position: relative; width: 34px; height: 19px; min-height: 0;
  border-radius: 999px; background: var(--field);
  border: 1px solid var(--border-strong); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.rm-toggle-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 50%; left: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--sage); transform: translateY(-50%);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.rm-toggle-row input[type="checkbox"]:checked {
  background: var(--gold-lt); border-color: var(--gold);
}
.rm-toggle-row input[type="checkbox"]:checked::after {
  transform: translateY(-50%) translateX(15px); background: var(--gold-text);
}
.rm-toggle-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold-text); outline-offset: 2px;
}
.rm-save { width: 100%; margin-top: 18px; padding: 12px; background: var(--gold-text); border: none; border-radius: var(--radius-sm); color: #10180f; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; }
/* Daily dish-special confirmation banner (restaurant dashboard) */
.restaurant-special-banner { margin: 0 0 14px; padding: 13px 16px; border-radius: var(--radius-md); border: 1px solid var(--gold-border); background: var(--gold-lt); }
.restaurant-special-banner[hidden] { display: none; }
.restaurant-special-banner.is-confirmed { display: flex; align-items: center; gap: 10px; background: var(--sage-lt); border-color: var(--border); }
.restaurant-special-banner .rsb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-text); flex: 0 0 auto; }
.restaurant-special-banner .rsb-msg { font-size: 0.8rem; color: var(--text); flex: 1; }
.restaurant-special-banner .rsb-link { background: none; border: none; color: var(--gold-text); font-family: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.restaurant-special-banner .rsb-head { font-size: 0.82rem; color: var(--cream); margin-bottom: 10px; }
.restaurant-special-banner .rsb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.restaurant-special-banner .rsb-btn { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-family: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.restaurant-special-banner .rsb-btn.rsb-primary { background: var(--gold-text); border-color: var(--gold-text); color: #10180f; }
.restaurant-special-banner .rsb-btn.rsb-ghost { color: var(--muted); }
.restaurant-special-banner .rsb-edit { display: flex; gap: 8px; }
.restaurant-special-banner .rsb-edit input { flex: 1; background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--field-ink); font-family: var(--mono); font-size: 0.8rem; padding: 8px 10px; }
.restaurant-special-banner .rsb-save { padding: 8px 14px; border-radius: var(--radius-sm); border: none; background: var(--gold-text); color: #10180f; font-family: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.rt-group.is-dragging { opacity: 0.6; }
.restaurant-floor-wrap.is-setup { cursor: move; outline: 1px dashed var(--gold-border); }

/* ─── Map size + editable timeline ─────────────────────────────────── */
.restaurant-floor-wrap svg { max-width: 75%; margin: 0 auto; }
@media (max-width: 980px) {
  /* One column: the floor still comes first, so a phone opens on the thing
     staff drag guests onto rather than scrolling past two sidebars to reach
     it. Stated explicitly because the DOM order is sidebars-then-floor. */
  .restaurant-map-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
  .restaurant-floor-wrap { grid-column: 1; grid-row: 1; }
  .restaurant-inhouse-sidebar { grid-column: 1; grid-row: 2; max-width: none; }
  .restaurant-reservation-sidebar {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    top: auto;
    max-height: 260px;
  }
}
@media (max-width: 640px) { .restaurant-floor-wrap svg { max-width: 100%; } }

.rtl-hint { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
.rtl-scroll { position: relative; min-width: 760px; }
.rtl-axis2 { position: relative; height: 16px; margin-left: 132px; margin-bottom: 10px; }
.rtl-axis2 span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 0.56rem; color: var(--faint); }
.rtl-row2 { display: flex; align-items: center; margin-bottom: 7px; }
.rtl-label2 { width: 132px; flex-shrink: 0; font-family: var(--mono); font-size: 0.66rem; color: var(--muted); padding-right: 10px; }
.rtl-track2 {
  flex: 1; height: 34px; background: var(--field); border: 1px solid var(--border);
  border-radius: var(--radius-sm); position: relative; cursor: copy;
  background-image: repeating-linear-gradient(90deg, transparent, transparent calc(8.333% - 1px), var(--border) calc(8.333% - 1px), var(--border) 8.333%);
}
.rtl-track2.rtl-target { box-shadow: inset 0 0 0 2px var(--gold-border); }
.rtl-bar {
  position: absolute; top: 3px; height: 28px; border: 1.5px solid var(--gold-text);
  background: var(--gold-lt); border-radius: var(--radius-xs); display: flex; align-items: center;
  padding: 0 8px; cursor: grab; touch-action: none; overflow: hidden; z-index: 2;
}
.rtl-bar:hover { filter: brightness(1.08); }
.rtl-bar.rtl-dragging { cursor: grabbing; z-index: 5; box-shadow: 0 6px 18px var(--shadow); }
.rtl-bar-label { font-family: var(--mono); font-size: 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.rtl-clean {
  position: absolute; top: 3px; height: 28px; border-radius: var(--radius-xs); z-index: 1;
  background: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 2px, transparent 2px, transparent 5px);
  opacity: 0.7; pointer-events: none;
}

/* Staff callout: theme-following opaque surface + pinned ink.
   Body copy inside these panels must stay ≥ 4.5:1 in both themes.
   Do not use --muted / --cream / --faint here — those tokens are translucent. */
.staff-callout,
.report-hero > article,
.team-intro article,
.team-intro p,
.report-group,
.report-link,
.cash-handover-card,
.cash-open-expense-head,
.cash-open-expense,
.cash-card,
.restaurant-stats,
.metric,
.experiences-admin-card,
.team-row,
.invoicing-note {
  background: var(--callout-bg);
  color: var(--callout-ink);
}

.cash-warning-panel {
  background: var(--callout-warn-bg);
  color: var(--callout-ink);
}

.report-hero > article > span,
.report-hero > article > p,
.team-intro span,
.team-intro p,
.report-link span,
.report-link strong,
.cash-handover-line,
.cash-handover-shift.is-missing,
.cash-handover-shift em,
.cash-open-expense span,
.cash-open-expense small,
.cash-warning-row span,
.restaurant-stat b,
.restaurant-stat span,
.metric span,
.form-guidance,
.experiences-admin-card strong,
.experiences-admin-card span,
.experiences-admin-card p,
.experiences-admin-card button.secondary,
.team-identity strong,
.team-identity span,
.staff-note,
.empty-state,
.invoicing-note,
th,
.rr-head b,
.rr-head span,
.team-access-badges span,
.team-access-badges span.is-off {
  color: var(--callout-ink);
}

.report-hero > article > strong,
.team-intro strong,
.report-group h3,
.metric strong,
.cash-handover-line span {
  color: var(--callout-kicker);
}

/* ── Invoicing ──────────────────────────────────────────────────────────── */

.invoicing-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.invoice-inline-create {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.03));
}

.invoice-inline-create[hidden] {
  display: none;
}

.invoice-party-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}

.invoice-party-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.invoice-party-row strong {
  display: block;
}

.invoice-party-row span {
  display: block;
  color: var(--muted, #6b6b6b);
  font-size: 12px;
  margin-top: 2px;
}

.invoicing-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--warning, #C0392B);
  background: var(--surface-muted, rgba(0, 0, 0, 0.04));
  border-radius: 4px;
  font-size: 13px;
}

.invoicing-subtabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

/* Money sized to its tile, not to the page.
   A single-currency figure used to inherit the 30px count size through
   :only-child, and "IDR 562.870.912" in Oxanium is wider than a desktop tile.
   The grid is overflow: visible, so it spilled into the neighbouring tile and
   made both unreadable. The tile is now a size container and money scales to
   it, so the whole figure always fits. Money is never truncated: a clipped
   digit is worse than a small one. */
.metric {
  container-type: inline-size;
  min-width: 0;
}

.metric strong .invoice-money-line {
  display: block;
  font-size: clamp(12px, 6.5cqi, 18px);
  line-height: 1.25;
  white-space: nowrap;
}

.metric strong .invoice-money-line:only-child {
  font-size: clamp(14px, 10.5cqi, 30px);
  line-height: 1.1;
}

/* `.metric span` styles every span in a tile as the small grey uppercase
   label. These two are part of the figure, so undo that for them only, with
   higher specificity rather than by changing the shared label rule. */
.metric strong .invoice-money-unit,
.metric strong .invoice-money-amount {
  display: inline;
  margin: 0;
  color: inherit;
  text-transform: none;
  white-space: nowrap;
}

.metric strong .invoice-money-amount {
  font-size: 1em;
  letter-spacing: inherit;
}

/* The currency is a unit, not part of the figure: small, quiet, beside it. */
.metric strong .invoice-money-unit {
  font-size: 0.48em;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-right: 0.35em;
  opacity: 0.7;
  vertical-align: 0.18em;
}

#invoiceReportsView .table-panel {
  margin-bottom: 18px;
}

#invoiceReportsView .eyebrow {
  margin: 0 0 8px;
}

.invoicing-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.invoicing-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  min-width: 140px;
  flex: 1 1 140px;
}
/* List filters are one-word choices. The shared rule lets each label grow to
   fill the row, which suits the create form but stretched Status and Type
   across half the page each. Here they size to their content. */
.invoicing-filters--list label {
  flex: 0 1 220px;
  min-width: 160px;
}

.invoicing-filters.is-required label span::after {
  content: ' *';
  color: var(--warning, #C0392B);
}

.invoice-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 720px) {
  .invoice-detail-grid { grid-template-columns: 1fr; }
}
.invoice-detail-grid .is-warning { color: var(--warning, #C0392B); }

.invoice-detail-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  margin: 16px 0;
}
.invoice-detail-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-width: 260px;
  font-variant-numeric: tabular-nums;
}

.invoice-payment-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--border, #E0DDD8);
  font-variant-numeric: tabular-nums;
}

.invoice-payment-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #E0DDD8);
}
.invoice-payment-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.invoice-address {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  margin-bottom: 16px;
}

.invoice-create-total {
  margin: 12px 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.invoice-line input { width: 100%; }

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-pill.is-draft { background: rgba(136, 136, 136, 0.18); color: var(--muted, #888); }
.status-pill.is-sent { background: rgba(157, 138, 95, 0.18); color: var(--gold, #9D8A5F); }
.status-pill.is-partial { background: rgba(157, 138, 95, 0.28); color: var(--gold, #9D8A5F); }
.status-pill.is-paid { background: rgba(147, 166, 150, 0.22); color: var(--sage, #93A696); }
.status-pill.is-overdue { background: rgba(192, 57, 43, 0.20); color: #C0392B; }
.status-pill.is-void { background: rgba(136, 136, 136, 0.12); color: var(--muted, #888); text-decoration: line-through; }


/* ── In-house sidebar: every party in house tonight ─────────────────────── */

/* Themed from the shared token set at the top of this file, so the panel
   follows `[data-theme]` in both directions. It was authored light-only —
   `#fff` cards and `#1b1b18` ink — which rendered a white slab in the dark
   default. Every colour here is a token; that is why this block needs no
   `[data-theme="light"]` overrides of its own. */
.restaurant-inhouse-sidebar {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 240px;
  max-width: 320px;
  max-height: 620px;
  overflow-y: auto;
  padding: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.inhouse-head {
  display: grid;
  gap: 4px;
}

.inhouse-head h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
}

.inhouse-covers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--text);
}

.inhouse-covers strong {
  color: var(--cream);
}

.inhouse-asof {
  font-size: 11px;
  color: var(--text);
}

/* Not `--warn`: at #b3683d on the light surface it measures 3.43:1, under the
   4.5:1 floor, and "refresh failed, retrying" is the one line here a host must
   not miss. `--gold-text` carries the same attention and clears both themes;
   the weight keeps it apart from `.inhouse-group-title`, which shares it.
   (`--warn` is used as body text in six other places in this file and is below
   the floor in light there too — repo-wide, out of this block's scope.) */
.inhouse-asof[data-stale="true"] {
  color: var(--gold-text);
  font-weight: 600;
}

.inhouse-group-title {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.inhouse-party {
  display: grid;
  gap: 6px;
  padding: 10px;
  color: var(--callout-ink);
  background: var(--callout-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.inhouse-party-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--callout-ink);
}

.inhouse-room {
  font-weight: 600;
  color: var(--cream);
}

.inhouse-covers-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--callout-ink);
}

.inhouse-room-source {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--callout-ink);
}

/* "Name match" is a weaker claim than a staff-entered room, so staff-entered
   is the one that gets the weight. Neither ever reads as "verified". */
.inhouse-room-source[data-room-source="staff"] {
  color: var(--cream);
  font-weight: 600;
}

/* An allergy is a medical need. Red, above the preferences, never truncated.
   The tint and rule are mixed from `--danger` so the red survives the theme
   flip instead of staying the dark theme's salmon on a cream card. */
.inhouse-allergies {
  display: grid;
  gap: 4px;
}

.inhouse-allergy {
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: 6px;
}

.inhouse-birthdays {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.inhouse-preferences {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.inhouse-preference {
  padding: 2px 7px;
  font-size: 11px;
  color: var(--callout-ink);
  background: var(--field);
  border-radius: 10px;
}

.inhouse-empty {
  font-size: 12px;
  color: var(--text);
}

/* ─── drag-to-seat ─────────────────────────────────────────────────────────
   A party with heads left to seat can be dragged onto a table, or seated with
   the button on its own row. The button is not a lesser path: drag does not
   fire on touch, so on a phone the button IS the interaction. */

.inhouse-party.is-seatable { cursor: grab; }
.inhouse-party.is-dragging { cursor: grabbing; opacity: .55; }

.inhouse-party-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.inhouse-seat-btn {
  background: var(--gold-lt);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  color: var(--gold-text);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: 5px 10px;
  cursor: pointer;
}
.inhouse-seat-btn:hover { filter: brightness(1.1); }

/* `--muted` measures 4.48:1 dark / 2.87:1 light on the party card — this is the
   only text saying the drag gesture exists, so it takes body-copy ink. */
.inhouse-drag-hint {
  color: var(--text);
  font-size: .68rem;
  letter-spacing: .04em;
}

/* Follows the pointer so the host can see what they are carrying. */
.inhouse-drag-ghost {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  background: var(--gold-lt);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  color: var(--gold-text);
  font-family: var(--mono);
  font-size: .72rem;
  padding: 4px 8px;
}

/* Big enough highlights; too small dims; occupied reads as a shared-seating
   candidate rather than a blocked one — sharing is offered, never silent. */
.rt-group.is-drop-ok > * { opacity: 1; }
.rt-group.is-drop-small { opacity: .35; }
.rt-group.is-drop-shared { opacity: .8; }
.rt-group.is-drop-ok rect,
.rt-group.is-drop-ok circle,
.rt-group.is-drop-ok ellipse { stroke: var(--gold-border); stroke-width: 2.5; }
.rt-group.is-drop-shared rect,
.rt-group.is-drop-shared circle,
.rt-group.is-drop-shared ellipse { stroke: var(--gold-border); stroke-dasharray: 4 3; stroke-width: 2; }
.rt-group.is-drop-over rect,
.rt-group.is-drop-over circle,
.rt-group.is-drop-over ellipse { stroke-width: 3.5; }

/* Labelled undo. Reads "Undo: seat Room 5 at Table 7" — never a bare arrow,
   because a host who walked away must know what they are reversing. */
.restaurant-undo-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.restaurant-undo-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--field-ink);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  padding: 5px 10px;
  cursor: pointer;
}
.restaurant-undo-btn:hover { border-color: var(--gold-border); color: var(--gold-text); }
.restaurant-undo-btn:disabled { opacity: .5; cursor: default; }

/* ─── front-office panel ───────────────────────────────────────────────────
   The Check-In tab organised by the desk's day. The records list below it is
   unchanged — this is the front page, not a replacement. */

/* INCOMPLETE and IN-HOUSE now open the section they count. */
.metric-click { cursor: pointer; }
.metric-click:focus-visible { outline: 2px solid var(--gold-border); outline-offset: -2px; }

/* `grid-template-columns` is not decoration here. Without it the panel had one
   IMPLICIT column, and an implicit track is sized `auto` — which resolves to
   its contents' max-content width. `.fo-head-summary` is `white-space: nowrap`,
   so one long summary ("VERONIKA BOEGOEDINEKOVACS, THIJS VAN DER BERG +4")
   sized that track to about 1000px inside a 380px panel box. Every
   `.fo-section` then overflowed the panel column by 600px, straight under the
   opaque check-in records panels next door — which is why the founder's
   screenshot shows the summaries and the rooms note cut off mid-word at the
   column's right edge. Nothing was clipping them; they were painted behind the
   column to their right.

   `minmax(0, 1fr)` gives the track a zero minimum, so it can never be pushed
   wider than the panel box by its own contents. */
.fo-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0 0 14px;
}

/* ─── the Check-In tab is two columns ──────────────────────────────────────
   The founder's complaint was not density — PR #115 fixed that. It was that
   the panel ran the full width, stretched on a wide screen, left blank space
   beside it, and pushed the check-in records list below the fold. So: the
   desk's day on the LEFT, the records list on the RIGHT, both visible at once.

   Same shape as `.restaurant-map-layout` above — a fixed narrow track, a
   `minmax(0, 1fr)` content track, `align-items: start`, and a stacking
   breakpoint — rather than a second bespoke shell.

   380px for the panel column. Below ~300px the multi-room label
   ("5 rooms · ARABICA, AVOCADO, CACAO, MANGO, PAPAYA") wraps to four or five
   lines and the guest-name cell starts ellipsising real names. At 380px the
   row's two cells land at roughly 150px / 200px: the long room label takes two
   lines and ordinary names fit on one. Nothing truncates either way — the name
   cell wraps here instead of ellipsising (see `.fo-name` below).

   EVERY child states its own grid-column and grid-row. When PR #68 added a
   third child to `.restaurant-map-layout` without a placement rule, auto
   placement dropped the floor plan into the 320px track and shrank it to a
   thumbnail. A future fifth section or third column cannot do that here. */
.fo-layout {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 14px;
  align-items: start;
}
.fo-layout > .fo-panel {
  grid-column: 1;
  grid-row: 1;
  /* A grid item's automatic minimum size is min-content, so without this the
     panel's own contents could push it past the 380px track. */
  min-width: 0;
  margin: 0;
  /* Deliberately no `overflow-y` here. The slot overlay (`.fo-hover`) is
     absolutely positioned inside a row; a scroll container on this column
     would clip it and break the tap/keyboard path. Sticky with no clip means
     a very tall expanded panel simply scrolls with the page. */
  position: sticky;
  top: var(--staff-header-offset);
}
.fo-layout > .fo-records {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.fo-layout > .fo-panel[hidden] { display: none; }

/* The action row's four-cell desktop grid asks for 120+90+140+button+gaps —
   more than a 380px column can give, so it would overflow the panel. In the
   narrow column the button moves to its own track on the right and the three
   text cells stack under each other. Stated as min-width so that below the
   stacking breakpoint (where the panel is full width again) the original
   four-cell rule and the 560px phone rule both apply untouched.
   Every child is placed explicitly. */
@media (min-width: 981px) {
  .fo-layout > .fo-panel .fo-row.fo-action {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .fo-layout > .fo-panel .fo-action .fo-name { grid-column: 1; grid-row: 1; }
  .fo-layout > .fo-panel .fo-action .fo-rooms { grid-column: 1; grid-row: 2; }
  .fo-layout > .fo-panel .fo-action .fo-reason { grid-column: 1; grid-row: 3; }
  .fo-layout > .fo-panel .fo-action .fo-tags { grid-column: 1 / -1; grid-row: 4; }
  .fo-layout > .fo-panel .fo-action .text-button {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: end;
  }
}

/* Below the breakpoint the RECORDS come first, not the panel: the records list
   is the primary content of this tab and the panel is a summary of it. The DOM
   order is panel-then-records, so both rows are stated explicitly. */
@media (max-width: 980px) {
  .fo-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .fo-layout > .fo-records { grid-column: 1; grid-row: 1; }
  .fo-layout > .fo-panel {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    top: auto;
    margin: 0;
  }
}

/* No `overflow: hidden` here, deliberately. It was clipping `.fo-hover`, the
   slot overlay, which is `position: absolute` inside a row: a row near the
   bottom of a section had its card cut off mid-line — the founder's screenshot
   showed "Preferred language" sliced through at the card's edge, so the card
   read as though it had merged into the rows underneath. Nothing in this
   section paints a background into the rounded corners (`.fo-head` is
   `background: none`), so there is nothing left for it to clip. */
.fo-section {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: visible;
}

/* Closed, a section is one line: title, count, and a hint of what is inside.
   Four of them cost about 130px, so the records list below stays on screen. */
.fo-head-h { margin: 0; font-size: inherit; font-weight: inherit; }

.fo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fo-head:focus-visible { outline: 2px solid var(--gold-border); outline-offset: -2px; }

.fo-head-title {
  color: var(--field-ink);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fo-head-count {
  min-width: 22px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--field-ink);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* One line of what is inside, so closed never means unknowable.
   Deliberately one line and deliberately ellipsised: this is a closed
   section's teaser, and the whole point of the closed panel is that four
   headers cost one line each. `overflow: hidden` here is safe and is NOT the
   `.fo-section` rule PR #136 removed — `.fo-hover` lives in `.fo-body` >
   `.fo-list` > `.fo-row`, and `.fo-head` is a sibling of `.fo-body`, so
   nothing in this box is on the overlay's path to the page.
   It was `overflow: visible` with `text-overflow: ellipsis`, which does
   nothing: text-overflow only applies to a box that clips. So the nowrap text
   spilled out of the panel column instead of ellipsising.
   `title` carries the full text on hover — set in `renderFrontOffice()` — and
   expanding the section shows every row in full. */
.fo-head-summary {
  flex: 1;
  min-width: 0;
  color: var(--field-ink);
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fo-head-caret::before { content: '\203A'; }
.fo-head-caret {
  color: var(--field-ink);
  font-size: 0.9rem;
  transition: transform .12s ease;
}
.fo-section:not(.is-collapsed) .fo-head-caret { transform: rotate(90deg); }

.fo-section.is-collapsed .fo-body { display: none; }
.fo-body { padding: 0 12px 8px; }

/* Something is genuinely waiting. This one must not be missable. */
.fo-section.is-urgent { border-color: var(--danger); }
.fo-section.is-urgent .fo-head-count {
  border-color: var(--danger);
  font-weight: 700;
}

.fo-empty {
  margin: 0;
  padding: 4px 0;
  color: var(--field-ink);
  font-size: 0.8rem;
}

/* Every action row carries the one button that fixes it, on one line. */
.fo-row.fo-action {
  grid-template-columns: minmax(120px, 1.1fr) minmax(90px, 1fr) minmax(140px, 2fr) auto;
}
.fo-action .fo-reason {
  color: var(--field-ink);
  font-size: 0.78rem;
  min-width: 0;
}
.fo-action .text-button {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  padding: 1px 8px;
  font-size: 0.74rem;
}

/* Where the counter just took you. */
.fo-flash { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-border) 70%, transparent); }

/* When the property has no PMS room feed, say so rather than showing blanks.
   This is a warning that the rooms underneath it may be wrong, so it is the
   one thing on this panel that must never be shortened: it WRAPS. No nowrap,
   no ellipsis, no clip. `overflow-wrap: anywhere` so an unbroken PMS token in
   the message cannot push the note out of the column the way the section
   summaries used to. */
.fo-rooms-note {
  margin: 0 0 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: .02em;
  white-space: normal;
  overflow-wrap: anywhere;
}

.fo-list { display: grid; }

/* A slot, not a card: name and room on one line, a hairline between slots
   instead of a box round each. About 24px a slot rather than 90, so a normal
   day fits on one screen next to the check-in records list. Everything else is
   in the overlay, one tap or one focus away. */
.fo-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr);
  align-items: baseline;
  gap: 2px 12px;
  padding: 3px 0;
  line-height: 1.35;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  cursor: default;
}
.fo-list > .fo-row:first-child { border-top: 0; }
.fo-row[role="button"] { cursor: pointer; }
.fo-row:focus-visible { outline: 2px solid var(--gold-border); outline-offset: -2px; }

/* In the 380px panel column a nowrap+ellipsis name cell would clip real guest
   names. The slot costs a second line for a long name instead of hiding it —
   the same trade `.fo-rooms` and `.fo-chip` already make. */
.fo-name {
  font-size: 0.82rem;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The rooms of a booking wrap rather than truncate — a party in five rooms must
   show all five, and the "Name match" / "Name + dates" badge must stay visible
   rather than being clipped off the end of the line. */
.fo-rooms {
  color: var(--field-ink);
  font-size: 0.76rem;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A stay the PMS has not matched to a room yet is ordinary, not broken: it
   reads as absent information, never as an error. */
.fo-rooms.is-noroom { font-style: italic; opacity: .85; }

/* Allergies and anything outstanding get their own line under the row, and only
   when there are any. They wrap: a half-read allergy is worse than none. */
.fo-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.fo-outstanding { color: var(--field-ink); font-size: 0.73rem; }

/* "Name match" is one plausible surname candidate. The hint says so on hover
   and the label never reads "verified". */
.fo-source {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* Was --muted. "Name match" is a caveat the desk has to be able to read, so
     it takes the body ink rather than the faint one. */
  color: var(--field-ink);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* An allergy chip wraps rather than truncating: a half-read allergy is worse
   than none. */
.fo-chip {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  padding: 2px 8px;
}

/* The card sizes to its contents. No height, no max-height and no overflow:
   a truncated card is worse than no card, and this one carries the checkout
   date and the preferred language. */
.fo-hover {
  display: none;
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  min-width: 220px;
  max-width: min(340px, 100%);
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* An open row outranks its neighbours, so the card is painted over the rows it
   covers rather than interleaved with them. */
.fo-row:hover,
.fo-row:focus-within,
.fo-row.is-open { z-index: 2; }

/* Not enough room under the row: the card flips above it rather than running
   off the bottom of the viewport. `foHoverPlacement` in staff.js measures and
   sets this; the default stays below. */
.fo-row.is-hover-up .fo-hover {
  top: auto;
  bottom: 100%;
}
/* Hover for the laptop, focus for the keyboard, and `.is-open` for the tap —
   the floor runs this on tablets, where :hover does not exist. */
.fo-row:hover .fo-hover,
.fo-row:focus-within .fo-hover,
.fo-row.is-open .fo-hover { display: block; }

.fo-hover-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--field-ink);
  font-size: 0.78rem;
  padding: 2px 0;
}
.fo-hover-row span { color: var(--muted); }

/* On a phone the slot stacks rather than squeezing the room off the line, and
   the action row puts its one button under the reason it fixes. */
@media (max-width: 560px) {
  .fo-row { grid-template-columns: 1fr; }
  .fo-row.fo-action { grid-template-columns: 1fr; }
  .fo-action .text-button { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* --- Manager-facing deletion confirmation -------------------------------- */

.delete-checkin-card {
  border-color: rgba(192, 58, 43, 0.45);
}

.delete-checkin-card #deleteCheckinIntro {
  margin: 0 0 10px;
  line-height: 1.5;
}

.delete-checkin-subhead {
  margin: 14px 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.delete-checkin-files {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 6px;
  line-height: 1.45;
}

.delete-checkin-files.is-left-behind {
  color: #e7b6a6;
}

.delete-checkin-warnings {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.delete-checkin-warnings p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(192, 58, 43, 0.5);
  border-radius: 6px;
  background: rgba(192, 58, 43, 0.12);
  line-height: 1.45;
}

.delete-checkin-undo {
  margin: 14px 0 0;
  font-weight: 600;
  line-height: 1.45;
}

.delete-checkin-outcome {
  display: grid;
  gap: 8px;
  line-height: 1.45;
}

.delete-checkin-outcome p {
  margin: 0;
}

.delete-checkin-outcome.is-warning strong,
.delete-checkin-outcome.is-error strong {
  color: #e7b6a6;
}

/* --- room inventory (settings › Rooms) ---------------------------------- */
/* One line per room: name, PMS code, and the controls. Retired rooms sit in
   their own group below, dimmed but readable — they are kept, not deleted. */
.rooms-inventory-list { display: flex; flex-direction: column; gap: 8px; }
.rooms-inventory-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
}
.rooms-inventory-row input { min-width: 0; }
.rooms-inventory-row[data-retired="true"] { opacity: 0.6; }
.rooms-retired-heading { margin: 12px 0 4px; }
@media (max-width: 720px) {
  .rooms-inventory-row { grid-template-columns: 1fr 1fr; }
  .rooms-inventory-row button { grid-column: span 1; }
}

/* Shared front-desk PIN dialog. It can open over the delete, review and
   restaurant dialogs, so it sits above them. */
.modal.action-pin-modal { z-index: 1100; }
.action-pin-form,
.action-pin-result { display: grid; gap: 12px; }
.action-pin-form[hidden],
.action-pin-result[hidden] { display: none; }
.action-pin-form label { display: grid; gap: 6px; }
.action-pin-form select { min-height: 48px; font-size: 16px; }
.action-pin-form input[name="pin"] { min-height: 52px; font-size: 22px; letter-spacing: 0.3em; }
.action-pin-preview {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

/* POMEC maintenance schedule tab */
.pomec-week-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.pomec-crew-link {
  margin: 12px 0; padding: 12px 14px; border: 1px solid var(--gold-border); border-radius: var(--radius-sm);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between;
}
.pomec-crew-link a { color: var(--gold-text); word-break: break-all; }
.pomec-block { margin-top: 20px; }
.pomec-block h3 { margin: 0 0 8px; }
.pomec-closure {
  padding: 12px 14px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: grid; gap: 6px;
}
.pomec-closure.is-pending { border-color: var(--gold-border); }
.pomec-closure-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pomec-closure-actions input { flex: 1 1 220px; min-width: 0; }
.pomec-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); color: var(--muted); }
.pomec-chip.is-pending { color: var(--gold-text); border-color: var(--gold-border); }
.pomec-chip.is-approved { color: var(--sage); border-color: var(--sage); }
.pomec-chip.is-declined { color: var(--danger); border-color: var(--danger); }
.pomec-grid-wrap { overflow-x: auto; }
.pomec-grid { width: 100%; border-collapse: collapse; min-width: 640px; }
.pomec-grid th, .pomec-grid td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; font-size: 13px; vertical-align: top; }
.pomec-grid td.is-work { color: var(--text); }
.pomec-grid td.is-weekend { color: var(--faint); }
.pomec-day { margin-top: 10px; }
.pomec-day h4 { margin: 0 0 4px; font-size: 14px; }
.pomec-job { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.pomec-job .pomec-chip { margin-left: 6px; }
.pomec-approved-days { font-size: 14px; color: var(--sage); }
.pomec-partial { border: 1px solid var(--gold-border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.pomec-partial[hidden] { display: none; }
.pomec-partial legend { padding: 0 4px; font-weight: 600; }
.pomec-partial-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.pomec-partial-quick button[aria-pressed="true"] { border-color: var(--sage); color: var(--sage); }
.pomec-partial-week { display: grid; gap: 4px; }
.pomec-partial-days { display: flex; gap: 6px; flex-wrap: wrap; }
.pomec-partial-day {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text); font-size: 14px; text-transform: none; letter-spacing: normal;
}
.pomec-partial-day input { width: 18px; height: 18px; margin: 0; }

#loginStatus.is-info,
.staff-note.is-info {
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
}

.login-help {
  margin-top: 12px;
}

.settings-section-note {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 14px;
}

.settings-section-note:not([hidden]) {
  padding: 10px 12px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.checkin-card-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.checkin-card-nav .checkin-card-tab {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
}

.checkin-card {
  display: grid;
  gap: 16px;
}

.checkin-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.checkin-card-saved {
  color: var(--sage);
  font-size: 14px;
}

.link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.link-row input {
  flex: 1 1 180px;
  min-width: 0;
}

/* A checkbox is never a full-width field. Switches below set their own size. */
input[type="checkbox"] {
  width: 1.15rem;
  min-width: 1.15rem;
  max-width: 1.15rem;
  height: 1.15rem;
  min-height: 1.15rem;
  padding: 0;
  flex: 0 0 auto;
}

#cashPanel input[type="checkbox"],
#settingsForm input[type="checkbox"],
#teamForm input[type="checkbox"] {
  width: 1.15rem;
  min-width: 1.15rem;
  max-width: 1.15rem;
  height: 1.15rem;
  min-height: 1.15rem;
  padding: 0;
}

.staff-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 500;
}

.staff-switch-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.staff-switch-copy small,
.staff-switch .field-hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

#settingsForm .staff-switch input[type="checkbox"],
.staff-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0;
  flex: 0 0 44px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--field);
  position: relative;
  cursor: pointer;
  accent-color: auto;
}

#settingsForm .staff-switch input[type="checkbox"]::after,
.staff-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s ease, background .15s ease;
}

#settingsForm .staff-switch input[type="checkbox"]:checked,
.staff-switch input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--gold) 35%, var(--field));
  border-color: var(--gold);
}

#settingsForm .staff-switch input[type="checkbox"]:checked::after,
.staff-switch input[type="checkbox"]:checked::after {
  transform: translateX(18px);
  background: var(--gold-text);
}

#settingsForm .staff-switch input[type="checkbox"]:focus-visible,
.staff-switch input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
}

.role-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.role-presets button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
}

.role-presets button.is-active {
  background: var(--gold);
  color: var(--void);
  border-color: var(--gold);
}

.team-advanced {
  margin: 8px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.team-advanced summary {
  cursor: pointer;
  color: var(--cream);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.team-invite-success {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--sage);
  border-radius: var(--radius-md);
  background: var(--sage-lt);
}

.team-invite-success h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.team-invite-success p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.team-row-invite {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#inviteCard {
  max-width: 440px;
  margin: 8vh auto;
}

#inviteForm {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.invite-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.invite-checklist li {
  font-size: 13px;
  color: var(--muted);
}

.invite-checklist li.is-met {
  color: var(--sage);
}

.invite-checklist li.is-met::before {
  content: "✓ ";
}

.cash-fold,
.settings-fold {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 12px 0;
  padding: 4px 12px 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.cash-fold > summary,
.settings-fold > summary {
  cursor: pointer;
  color: var(--cream);
  font-weight: 650;
  padding: 10px 0;
}

.report-format {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.restaurant-control-split {
  width: 1px;
  align-self: stretch;
  min-height: 28px;
  background: var(--border-strong);
}

.restaurant-recap {
  margin-left: 4px;
}

.metric-hint {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  white-space: normal;
}

.room-dropdown-note {
  margin: 0 0 10px;
  color: var(--text);
}

.pomec-crew-link {
  display: grid;
  gap: 8px;
}

.pomec-link-mask {
  font-family: var(--mono);
  letter-spacing: 0.04em;
  color: var(--text);
}

.team-kind {
  font-weight: 700;
}

/* Origin: the hotel's reading earnings, and the founder's per-hotel split. */
.origin-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 12px; }
.origin-tile { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--field); display: flex; flex-direction: column; gap: 4px; }
.origin-tile span { color: var(--muted); font-size: 0.85rem; }
.origin-tile strong { font-size: 1.35rem; color: var(--text); font-variant-numeric: tabular-nums; }
.origin-tile.is-earnings { border-color: var(--gold-border); background: var(--gold-lt); }
.origin-tile.is-earnings strong { color: var(--gold-text); }
.origin-coverage { margin: 0 0 4px; color: var(--sage-bright); font-weight: 600; }
.origin-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-top: 12px; }
.origin-card h3 { margin: 0 0 10px; font-size: 0.95rem; }
.origin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.origin-grid .origin-card { margin-top: 12px; }
.origin-chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 170px; }
.origin-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; }
.origin-bar-fill { width: 100%; max-width: 48px; border-radius: 4px 4px 0 0; background: var(--gold); min-height: 2px; }
.origin-bar.is-current .origin-bar-fill { background: var(--gold-text); }
.origin-bar-value { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-variant-numeric: tabular-nums; }
.origin-bar-label { font-size: 0.78rem; color: var(--faint); }
.origin-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 0.88rem; }
.origin-table th, .origin-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.origin-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.origin-table td.num, .origin-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.origin-table .origin-empty { color: var(--faint); }
.origin-status-paid { color: var(--sage-bright); }
.origin-status-pending { color: var(--warn); }
.origin-table a.text-button, .origin-table button { font-size: 0.82rem; }
.origin-table-wrap { overflow-x: auto; }
.origin-founder-table { min-width: 1120px; }
.origin-founder-table td:first-child { min-width: 220px; }
.origin-card { min-width: 0; }
.origin-grid .origin-card { overflow-x: auto; }
.origin-founder-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.origin-founder-head h3 { margin: 0; }
.origin-flag { display: block; color: var(--warn); font-size: 0.74rem; }
.origin-payout-form { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-strong); max-width: 420px; }
.origin-payout-form label { display: grid; gap: 4px; }
.origin-payout-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .origin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .origin-grid { grid-template-columns: 1fr; }
  .origin-chart { gap: 6px; height: 150px; }
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.filter-chip.is-active {
  background: var(--gold);
  color: var(--void);
  border-color: var(--gold);
}

@media (max-width: 700px) {
  .staff-shell,
  #arrivalsView,
  #cashPanel,
  .fo-records,
  .table-panel,
  .metric-grid {
    min-width: 0;
    max-width: 100%;
  }

  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  #submissionsTable,
  #submissionsTable thead,
  #submissionsTable tbody,
  #submissionsTable tr,
  #submissionsTable th,
  #submissionsTable td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #submissionsTable thead { display: none; }

  #submissionsTable tr {
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .cash-close-grid,
  .settings-grid.cash-close-grid {
    grid-template-columns: 1fr;
  }

  .cash-pin-field input { max-width: none; }

  #cashPanel,
  #shiftCloseForm,
  .cash-layout,
  .cash-layout-guided,
  .cash-fold,
  #cashPanel input,
  #cashPanel select,
  #cashPanel label,
  #cashPanel .field-hint {
    min-width: 0;
    max-width: 100%;
  }

  #cashPanel {
    overflow-x: hidden;
  }
}

.cash-mode-tabs {
  display: flex;
  gap: 8px;
  margin: 0 22px 14px;
  flex-wrap: wrap;
}

.cash-mode-tab {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.cash-mode-tab.is-active {
  background: var(--gold);
  color: var(--void);
  border-color: var(--gold);
}

.cash-step-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.toolbar:has(details[open]),
.restaurant-controls:has(details[open]),
.invoicing-head-actions:has(details[open]),
.team-row:has(details[open]) {
  position: relative;
  z-index: 30;
}

.staff-menu {
  position: relative;
}

.staff-menu > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.staff-menu > summary::-webkit-details-marker { display: none; }

.staff-menu-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 200px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.staff-menu-panel > :is(button, a) {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

.restaurant-empty {
  margin: 12px 0 18px;
  padding: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

.restaurant-empty p { margin: 0 0 12px; }

.team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 16px;
  align-items: start;
}

.team-side-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px 8px 16px;
}

.team-side-head {
  padding: 12px 14px 0;
}

.team-side-head h3 {
  margin: 0;
  font-size: 22px;
}

.team-row-meta { color: var(--muted); }

.team-row-menu { margin-left: auto; }

.team-row-menu > summary {
  width: 44px;
  justify-content: center;
  padding: 0;
  font-size: 20px;
  letter-spacing: 0.12em;
}

.team-row .is-danger { color: var(--danger); }

@media (max-width: 800px) {
  .team-layout { grid-template-columns: 1fr; }
  .team-side-panel.is-editing {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 420px);
    z-index: 40;
    overflow: auto;
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35);
  }
}