:root {
  --bg: #0a0a0c;
  --surface: #111116;
  --surface2: #18181f;
  --border: #242430;
  --gold: #c9a84c;
  --gold-bright: #f0c96b;
  --gold-dim: #7a612b;
  --green: #3ecf8e;
  --red: #ff5e5e;
  --blue: #5b9cf6;
  --text: #e8e8f0;
  --text-dim: #6b6b80;
  --text-muted: #38384a;
  --mono: "DM Mono", monospace;
  --sans: "DM Sans", sans-serif;
  --display: "Bebas Neue", sans-serif;
  --topbar-bg: rgba(10, 10, 12, 0.92);
}

/* ─── LIGHT THEME ─── */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface2: #ebebef;
  --border: #d1d1db;
  --gold: #9a6e1a;
  --gold-bright: #b07e1a;
  --gold-dim: #c9a84c;
  --green: #1a8f5f;
  --red: #c93030;
  --blue: #2563c4;
  --text: #18181f;
  --text-dim: #50506a;
  --text-muted: #9090a8;
  --topbar-bg: rgba(245, 245, 247, 0.96);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── TOP BAR ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 56px;
}
.topbar-title {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--gold-bright);
  white-space: nowrap;
}
.topbar-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.topbar-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.nav-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  background: none;
  color: var(--text-dim);
  transition: all 0.15s;
  text-transform: uppercase;
}
.nav-btn:hover {
  color: var(--text);
  border-color: var(--border);
}
.nav-btn.active {
  background: var(--gold);
  color: #0a0a0c;
  border-color: var(--gold);
  font-weight: 500;
}
.topbar-logout {
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.topbar-logout:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

/* ─── THEME TOGGLE ─── */
/* Small icon button in the topbar.  Icon is driven by the html[data-theme]
   attribute so it always matches the active theme without needing JS on
   first render.  Default (no attribute) falls back to dark → shows 🌙. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition:
    border-color 0.15s,
    background 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--text-dim);
  background: var(--surface);
}
/* Show sun icon when in dark mode (click → go light) */
html[data-theme="dark"] .theme-toggle::before,
html:not([data-theme]) .theme-toggle::before {
  content: "☀";
  color: var(--text);
}
/* Show moon icon when in light mode (click → go dark) */
html[data-theme="light"] .theme-toggle::before {
  content: "🌙";
}

/* ─── LAYOUT ─── */
.container {
  max-width: 1680px;
  margin: 0 auto;
  padding: 32px;
}
/* Specific pages with wide tables (Shows + Expenses tabs) get a bit
     more breathing room so the user doesn't have to horizontal-scroll
     when there's empty space on either side of the screen. */
body.wide-page .container {
  max-width: 1920px;
}
/* Lookup-family conditional visibility — elements tagged with
     data-lookup-only render only when the current tour belongs to the
     lookup-schema family (Presents / Event Services). The body class
     is toggled in loadTourIntoState. Used for the Hotel Lookup tab,
     Ticket Pricing panel, and any future lookup-only UI.
     [EVENT_SERVICES_TEMPLATE_PHASE_1_2026_05_08_v1] */
body:not(.lookup-family) [data-lookup-only] {
  display: none !important;
}
body.lookup-family [data-not-lookup-only] {
  display: none !important;
}

/* ─── HERO METRICS ─── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 28px;
}
/* 7-column variant — used on the Tour Summary page */
.metrics-grid-7col {
  grid-template-columns: repeat(7, 1fr);
}
/* 4-column variant — used on the Expenses and Cash Flow pages */
.metrics-grid-4col {
  grid-template-columns: repeat(4, 1fr);
}
.metric-card {
  background: var(--surface);
  padding: 22px 24px 20px;
  position: relative;
  transition: background 0.15s;
}
.metric-card:hover {
  background: var(--surface2);
}
.metric-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.metric-value {
  font-family: var(--display);
  font-size: 32px;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--text);
}
.metric-value.gold {
  color: var(--gold-bright);
}
.metric-value.green {
  color: var(--green);
}
.metric-value.red {
  color: var(--red);
}
.metric-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
}
.metric-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  margin-top: 6px;
}
.badge-green {
  background: rgba(62, 207, 142, 0.12);
  color: var(--green);
}
.badge-red {
  background: rgba(255, 94, 94, 0.12);
  color: var(--red);
}
.badge-gold {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold);
}

/* ─── SECTION HEADERS ─── */
.section {
  margin-bottom: 28px;
}
.section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--gold);
}
.section-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* ─── TWO-COL LAYOUT ─── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.three-col {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

/* ─── PANEL ─── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.panel-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.panel-body {
  padding: 20px;
}

/* ─── MINI CHART ─── */
.chart-wrap {
  position: relative;
}
canvas {
  width: 100% !important;
}

/* ─── SHOWS TABLE ─── */
.table-wrap {
  overflow-x: auto;
  min-width: 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
thead tr {
  border-bottom: 1px solid var(--border);
}
th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  position: sticky;
  top: 0;
}
th:hover {
  color: var(--text);
}
th.sorted {
  color: var(--gold);
}
tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.1s;
}
tbody tr:hover {
  background: rgba(201, 168, 76, 0.04);
}
td {
  padding: 9px 14px;
  white-space: nowrap;
  color: var(--text);
}
td.num {
  text-align: right;
}
td.city {
  color: var(--text-dim);
}
td.date-cell {
  color: var(--gold-dim);
}

.pct-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pct-bar-track {
  width: 60px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.pct-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--green);
}
.pct-bar-fill.warn {
  background: var(--gold);
}
.pct-bar-fill.danger {
  background: var(--red);
}

.pkg-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.pkg-vip1 {
  background: rgba(91, 156, 246, 0.15);
  color: var(--blue);
}
.pkg-vip2 {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold);
}

/* ─── EXPENSES LIST ─── */
.exp-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 12px;
}
.exp-row:last-child {
  border-bottom: none;
}
.exp-type {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.exp-memo {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  flex: 0.8;
}
.exp-consistency {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--surface2);
  color: var(--text-dim);
  width: 60px;
  text-align: center;
}
.exp-amount {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  text-align: right;
  min-width: 90px;
}
.exp-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  width: 80px;
}
.exp-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--red);
}

/* ─── INPUTS PAGE ─── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.form-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 9px 12px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.form-input:focus {
  border-color: var(--gold);
}
.form-input[type="number"]::-webkit-inner-spin-button {
  opacity: 0.3;
}

/* Hybrid date field: free-text input you can type into + a calendar button
   that opens the native date picker. The companion type=date input is kept
   off-screen (not display:none, so showPicker() still works) and only drives
   the popout calendar. */
.date-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.date-field .form-input {
  flex: 1;
}
.date-field-cal {
  position: absolute;
  right: 44px;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.date-field-btn {
  flex: 0 0 auto;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s;
}
.date-field-btn:hover {
  border-color: var(--text-dim);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.15s;
}
.btn-gold {
  background: var(--gold);
  color: #0a0a0c;
}
.btn-gold:hover {
  background: var(--gold-bright);
}
.btn-ghost {
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--text-dim);
}
.btn-danger {
  background: rgba(255, 94, 94, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 94, 94, 0.2);
}
.btn-danger:hover {
  background: rgba(255, 94, 94, 0.2);
}

/* ─── INLINE EDIT TABLE ─── */
.editable {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  width: 100%;
  text-align: right;
  outline: none;
  padding: 2px 0;
  transition: border-color 0.15s;
}
.editable:focus {
  border-bottom-color: var(--gold);
  background: rgba(201, 168, 76, 0.05);
}

/* ─── SIGNOFF ─── */
.signoff-row {
  display: grid;
  grid-template-columns: 160px 1fr 120px 120px 80px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.signoff-row:last-child {
  border-bottom: none;
}
.signoff-who {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
.signoff-purpose {
  font-size: 13px;
  color: var(--text);
}
.signoff-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}
.signoff-by {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.check {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.check.yes {
  background: rgba(62, 207, 142, 0.12);
  color: var(--green);
}
.check.no {
  background: var(--surface2);
  color: var(--text-muted);
}

/* ─── PROFIT WATERFALL ─── */
.waterfall {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.waterfall-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 16px;
}
.waterfall-row:last-child {
  border-bottom: none;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.waterfall-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-dim);
}
.waterfall-label.total {
  color: var(--text);
  font-weight: 500;
}
.waterfall-val {
  font-family: var(--mono);
  font-size: 14px;
  min-width: 100px;
  text-align: right;
}
.waterfall-val.pos {
  color: var(--green);
}
.waterfall-val.neg {
  color: var(--red);
}
.waterfall-val.total {
  color: var(--gold-bright);
  font-size: 18px;
}
.waterfall-bar {
  height: 6px;
  border-radius: 3px;
}

/* ─── PAGE VIEWS ─── */
.page {
  display: none;
}
.page.active {
  display: block;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .two-col,
  .three-col {
    grid-template-columns: 1fr;
  }
}

/* ─── UTILITY ─── */
.flex {
  display: flex;
  align-items: center;
}
.gap-8 {
  gap: 8px;
}
.ml-auto {
  margin-left: auto;
}
.text-green {
  color: var(--green);
}
.text-red {
  color: var(--red);
}
.text-gold {
  color: var(--gold);
}
.text-dim {
  color: var(--text-dim);
}
.mono {
  font-family: var(--mono);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

/* ─── SEARCH ─── */
.search-wrap {
  position: relative;
}
.search-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 12px 8px 34px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  width: 100%;
  max-width: 220px;
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus {
  border-color: var(--gold);
}
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 13px;
  pointer-events: none;
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface);
  border: 1px solid var(--green);
  color: var(--green);
  padding: 12px 20px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  z-index: 999;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════
     COMPANY DASHBOARD + ROUTING + PARTNER MODE
     ═══════════════════════════════════════════════════════════ */

/* Only one top-level view is visible at a time */
.view {
  display: none;
}
.view.active {
  display: block;
}

/* Back-to-company pill in the topbar (only shown on tour pages) */
.back-pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: none;
  color: var(--text-dim);
  transition: all 0.15s;
  text-transform: uppercase;
  display: none;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.back-pill:hover {
  color: var(--gold-bright);
  border-color: var(--gold-dim);
}
body.route-tour .back-pill {
  display: inline-flex;
}
body.route-tour .topbar-title,
body.route-tour .topbar-sub {
  cursor: pointer;
}

/* Partner mode: no escape hatches to the company view */
body.partner-mode .back-pill {
  display: none !important;
}
body.partner-mode .topbar-title,
body.partner-mode .topbar-sub {
  cursor: default !important;
  pointer-events: none;
}

/* Partner-mode back-to-home pill — mirrors .back-pill styling but is
   hidden for staff and visible only when body.partner-mode is present.
   The staff .back-pill rule above is intentionally left unchanged. */
.partner-back-pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: none;
  color: var(--text-dim);
  transition: all 0.15s;
  text-transform: uppercase;
  display: none;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.partner-back-pill:hover {
  color: var(--gold-bright);
  border-color: var(--gold-dim);
}
body.partner-mode .partner-back-pill {
  display: inline-flex;
}

/* Partner watermark — sits in the topbar, unmissable but not obnoxious */
.partner-stamp {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid var(--gold-dim);
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  display: none;
}
body.partner-mode .partner-stamp {
  display: inline-block;
}

/* Hide internal tabs in partner mode */
/* [PHASE_1M_FIXES_2026_05_15_v1] Added settlement to the hide list —
     it was previously visible to partners, which exposes 100X-internal
     reconciliation data. */
body.partner-mode .nav-btn[data-tab="cashflow"],
body.partner-mode .nav-btn[data-tab="inputs"],
body.partner-mode .nav-btn[data-tab="signoff"],
body.partner-mode .nav-btn[data-tab="settlement"],
body.partner-mode #undo-btn {
  display: none;
}

/* Fully lock inputs / controls / delete buttons in partner mode.
     Layered defense: CSS hides interactive controls, JS guards mutating
     functions, server enforces token-slug match. */

/* Inputs/textareas/selects: visually present but non-interactive. We
     keep them visible (read-only) so partners can SEE values. */
body.partner-mode .editable,
body.partner-mode input:not([type="search"]):not([type="range"]):not(.search-input),
body.partner-mode select,
body.partner-mode textarea {
  pointer-events: none !important;
  opacity: 0.85;
  user-select: text;
  background: transparent !important;
  border-color: transparent !important;
}

/* Checkboxes: extra strict. The `input` rule above sets pointer-events
     none, but clicks can still register via labels. Block label clicks too. */
body.partner-mode input[type="checkbox"],
body.partner-mode input[type="radio"] {
  pointer-events: none !important;
  cursor: default !important;
}
body.partner-mode label {
  pointer-events: none !important;
  cursor: default !important;
}

/* All action buttons: HIDE entirely. Delete buttons, add buttons,
     toolbar buttons, paste buttons. Whitelist navigation/topbar buttons. */
body.partner-mode
  button:not(.nav-btn):not(.back-pill):not(.partner-back-pill):not(.topbar-title):not(
    .tour-tile
  ):not(.search-input):not(.ss-btn):not([data-partner-allow]) {
  display: none !important;
}
/* Searchable dropdowns: button styling stripped in partner mode so they
     read as plain inline text (the display value is its textContent). */
body.partner-mode .ss-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: default !important;
  color: var(--text) !important;
  font-style: normal !important;
  pointer-events: none;
}
body.partner-mode .ss-btn::after,
body.partner-mode .ss-btn::before {
  display: none !important;
}

/* Specific named action elements — explicit hide for safety even if
     they're not <button> tags. */
body.partner-mode .row-actions,
body.partner-mode .btn-add,
body.partner-mode .btn-delete,
body.partner-mode .btn-danger,
body.partner-mode [data-internal-only],
body.partner-mode #undo-btn,
body.partner-mode #redo-btn,
body.partner-mode #partner-link-btn,
body.partner-mode .delete-row-btn {
  display: none !important;
}

/* Hide the Transactions section entirely — partner shouldn't see
     individual actuals or any "ADD ROW" / "PASTE FROM EXCEL" controls. */
body.partner-mode #transactions-panel,
body.partner-mode [data-section="transactions"] {
  display: none !important;
}

/* Hide all paste-from-excel modals and triggers */
body.partner-mode #txn-paste-modal,
body.partner-mode #hotel-paste-modal,
body.partner-mode #direct-exp-paste-modal,
body.partner-mode #hotel-lookup-paste-modal,
body.partner-mode #expense-paste-modal {
  display: none !important;
}

/* Partner mode: hide Actual Spent + Variance columns in expense tables */
body.partner-mode .col-actual,
body.partner-mode .col-variance {
  display: none !important;
}
/* Partner mode: hide Allotment column in Shows tab — it's an internal
     value (the max from ticketing audit) and partners only need to see
     Forecast and Current Sales. Also hides the forecast slider since
     partners shouldn't be adjusting forecasts. */
body.partner-mode .col-allotment,
body.partner-mode #forecast-slider-wrap {
  display: none !important;
}
/* Collapse the expense-top metric grid to 1 card (just Production Expenses Forecast) in partner mode */
body.partner-mode #page-expenses .metrics-grid {
  grid-template-columns: 1fr !important;
  max-width: 340px;
}
/* Tour summary: with the 100X tile hidden in partner mode, reflow the
     remaining 6 tiles to fill 6 columns instead of leaving a gap in 7. */
body.partner-mode #page-summary > .metrics-grid {
  grid-template-columns: repeat(6, 1fr) !important;
}
body.partner-mode input[type="range"] {
  pointer-events: none;
  opacity: 0.5;
}

/* Partner mode: lighten hover effects on editable cells since they can't edit */
body.partner-mode td[contenteditable],
body.partner-mode .editable {
  cursor: default !important;
  background: transparent !important;
}

/* ─── COMPANY HERO ─── */
.company-hero {
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
  position: relative;
}
.company-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 800px 300px at 20% 0%, rgba(201, 168, 76, 0.06), transparent 60%),
    radial-gradient(ellipse 600px 200px at 80% 100%, rgba(91, 156, 246, 0.04), transparent 60%);
  pointer-events: none;
}
.company-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.company-wordmark {
  font-family: var(--display);
  font-size: clamp(56px, 8vw, 96px);
  letter-spacing: 4px;
  line-height: 0.95;
  color: var(--text);
  margin-bottom: 8px;
}
.company-wordmark .accent {
  color: var(--gold-bright);
}
.company-tagline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
}

/* Portfolio-wide metrics */
.portfolio-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 36px;
}

/* ─── DIVISION TILES ─── 5 across, click navigates to /division/:slug.
     Empty divisions get a subtle dimmed treatment (lower opacity on
     the metrics, but the tile itself stays full-color so it's clearly
     a clickable destination). */
.division-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}
.division-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.division-tile:hover {
  border-color: var(--gold-dim);
  background: rgba(201, 168, 76, 0.04);
}
.division-tile-name {
  font-family: var(--display);
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.04em;
}
.division-tile-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.division-tile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 4px;
}
.division-tile-stat-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.division-tile-stat-value {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}
.division-tile.empty .division-tile-stat-value,
.division-tile.empty .division-tile-count {
  opacity: 0.55;
}

/* ─── PROGRAM FILTER PILLS (division page) ─── */
.program-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.program-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s;
}
.program-pill:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.program-pill.active {
  color: var(--gold-bright);
  border-color: var(--gold-dim);
  background: rgba(201, 168, 76, 0.08);
}
.program-pill-count {
  color: var(--text-muted);
  margin-left: 6px;
  font-size: 9px;
}
.program-pill.active .program-pill-count {
  color: var(--gold-dim);
}

/* ─── UPCOMING SCHEDULE LIST ───
     Shows tours starting / ending soon. Compact rows so the panel
     stays scannable even with 5+ items. Each row is clickable (opens
     the tour). Status pill at the start communicates urgency at a
     glance: red = past due / urgent, gold = within 7 days, green =
     14+ days out. Empty state has its own treatment. */
.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 36px;
}
.upcoming-row {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 16px;
  align-items: center;
  background: var(--surface);
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.upcoming-row:hover {
  background: var(--surface2);
}
.upcoming-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
}
.upcoming-pill.starting {
  background: rgba(86, 170, 108, 0.15);
  color: var(--green);
  border: 1px solid rgba(86, 170, 108, 0.35);
}
.upcoming-pill.ending-soon {
  background: rgba(201, 168, 76, 0.15);
  color: var(--gold-bright);
  border: 1px solid var(--gold-dim);
}
.upcoming-pill.ending {
  background: rgba(220, 90, 90, 0.15);
  color: var(--red);
  border: 1px solid rgba(220, 90, 90, 0.35);
}
.upcoming-pill.active {
  background: rgba(120, 160, 200, 0.15);
  color: var(--blue);
  border: 1px solid rgba(120, 160, 200, 0.35);
}
.upcoming-name {
  font-family: var(--display);
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.upcoming-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.upcoming-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  text-align: right;
}
.upcoming-countdown {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
  min-width: 80px;
}
.upcoming-countdown.urgent {
  color: var(--red);
}
.upcoming-countdown.soon {
  color: var(--gold-bright);
}
.upcoming-empty {
  background: var(--surface);
  padding: 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}

/* ─── TOUR LIST ─── */
.tour-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.tour-list-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tour-filter-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s;
}
.tour-filter-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.tour-filter-btn.active {
  color: var(--gold-bright);
  border-color: var(--gold-dim);
  background: rgba(201, 168, 76, 0.08);
}

.tour-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 40px;
}

.tour-tile {
  background: var(--surface);
  padding: 22px 28px;
  display: grid;
  grid-template-columns: 48px 1fr 140px 130px 110px 110px 110px 28px;
  gap: 18px;
  align-items: center;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: background 0.15s;
  position: relative;
}
.tour-tile:hover {
  background: var(--surface2);
}
.tour-tile:hover .tour-tile-arrow {
  transform: translateX(4px);
  color: var(--gold-bright);
}

/* Delete button — hidden until you hover the tile */
.tour-tile-wrap {
  position: relative;
  background: var(--surface);
}
.tour-tile-wrap .tour-tile {
  width: 100%;
}
.tour-tile-delete {
  position: absolute;
  top: 50%;
  right: 60px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  transition: all 0.15s;
}
.tour-tile-wrap:hover .tour-tile-delete {
  display: flex;
}
.tour-tile-delete:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.tour-tile-badge {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 18px;
  color: #0a0a0c;
  letter-spacing: 1px;
  font-weight: 500;
}
.tour-tile-badge.blue {
  background: linear-gradient(135deg, #2d4f7a, var(--blue));
  color: #fff;
}
.tour-tile-badge.green {
  background: linear-gradient(135deg, #1f5f44, var(--green));
  color: #0a0a0c;
}
.tour-tile-badge.red {
  background: linear-gradient(135deg, #7a2d2d, var(--red));
  color: #fff;
}

.tour-tile-main {
  min-width: 0;
}
.tour-tile-name {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 1.5px;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tour-tile-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.tour-tile-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tour-tile-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #9a9ab0;
  text-transform: uppercase;
}
.tour-tile-value {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
}
.tour-tile-value.gold {
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.5px;
}
.tour-tile-value.red {
  color: var(--red);
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.5px;
}

.tour-tile-pct {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tour-tile-pct-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.tour-tile-pct-fill {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.tour-tile-pct-fill.warn {
  background: var(--gold);
}
.tour-tile-pct-fill.danger {
  background: var(--red);
}
.tour-tile-pct-val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  min-width: 42px;
  text-align: right;
}

.tour-tile-arrow {
  font-family: var(--mono);
  font-size: 20px;
  color: var(--text-muted);
  transition: all 0.2s;
  justify-self: end;
}

.tour-status-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}
.tour-status-pill.active {
  background: rgba(62, 207, 142, 0.12);
  color: var(--green);
}
.tour-status-pill.planning {
  background: rgba(91, 156, 246, 0.12);
  color: var(--blue);
}
.tour-status-pill.closed {
  background: rgba(107, 107, 128, 0.15);
  color: var(--text-dim);
}
.tour-status-pill.cancelled {
  background: rgba(255, 94, 94, 0.12);
  color: var(--red);
}

/* "Add new tour" tile */
.tour-add {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 28px;
  text-align: center;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.2s;
}
.tour-add:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}

/* ─── PARTNER LINK MODAL (opens from tour Settings) ─── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.active {
  display: flex;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-height: 90dvh;
  overflow-y: auto;
}
.modal-title {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--gold-bright);
  margin-bottom: 6px;
}
.modal-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}
.modal-field {
  margin-bottom: 18px;
}
.modal-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.modal-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 13px;
  border-radius: 5px;
}
.modal-input:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.modal-link-box {
  background: #06060a;
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  word-break: break-all;
  line-height: 1.5;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}
.modal-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 9px 18px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.15s;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.modal-btn:hover {
  border-color: var(--text-dim);
}
.modal-btn.primary {
  background: var(--gold);
  color: #0a0a0c;
  border-color: var(--gold);
  font-weight: 500;
}
.modal-btn.primary:hover {
  background: var(--gold-bright);
}

/* Issued-links list inside the modal */
.link-list {
  max-height: 180px;
  overflow-y: auto;
  margin-top: 8px;
}
.link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
}
.link-item:last-child {
  border-bottom: none;
}
.link-item-email {
  color: var(--text);
}
.link-item-meta {
  color: var(--text-muted);
  font-size: 10px;
}
.link-item-revoke {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--red);
  padding: 3px 8px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
}

/* ─── PARTNER MODAL — WHO HAS ACCESS SECTION ─── */
.modal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 18px;
}
.access-list {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 6px;
}
.access-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.access-row:last-child {
  border-bottom: none;
}
.access-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--gold-bright);
  flex-shrink: 0;
}
.access-info {
  flex: 1;
  min-width: 0;
}
.access-name {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.access-email {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.access-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}
.badge-partner {
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
}
.badge-program {
  background: rgba(91, 156, 246, 0.12);
  border: 1px solid rgba(91, 156, 246, 0.3);
  color: var(--blue);
}
.access-empty {
  padding: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
}
.access-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 4px 10px;
}
.access-link:hover {
  background: rgba(201, 168, 76, 0.08);
}
.no-program-warning {
  background: rgba(255, 94, 94, 0.07);
  border: 1px solid rgba(255, 94, 94, 0.25);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  line-height: 1.5;
  margin-top: 6px;
}

/* ═══════════ PARTNER SNAPSHOT HISTORY TABLE ═══════════
   Replaces the old .link-list flex rows with a proper table that
   shows all snapshots (active + revoked + expired) with status
   badges and per-row action buttons.
   Class prefix: psnap- to avoid collisions.                       */
.psnap-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.psnap-th {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 6px 8px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.psnap-td {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.psnap-row--inactive .psnap-td {
  opacity: 0.55;
}
.psnap-meta {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Status badges */
.psnap-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.psnap-badge--active {
  background: rgba(62, 207, 142, 0.12);
  color: var(--green);
  border: 1px solid rgba(62, 207, 142, 0.25);
}
.psnap-badge--revoked {
  background: rgba(255, 94, 94, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 94, 94, 0.22);
}
.psnap-badge--expired {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.psnap-badge--live {
  background: rgba(255, 185, 50, 0.12);
  color: #c98a00;
  border: 1px solid rgba(255, 185, 50, 0.35);
}
.psnap-badge--snapshot {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* Snapshot / Live mode toggle in publish section */
.psnap-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.psnap-mode-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-dim);
  white-space: nowrap;
}
.psnap-mode-btn + .psnap-mode-btn {
  border-left: 1px solid var(--border);
}
.psnap-mode-btn--active {
  background: var(--surface2);
  color: var(--text);
  font-weight: 600;
}
.psnap-mode-btn:hover:not(.psnap-mode-btn--active) {
  background: var(--surface2);
  color: var(--text);
}
.psnap-mode-desc {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 2px;
}

/* Action buttons inside table */
.psnap-btn-row {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}
.psnap-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  white-space: nowrap;
}
.psnap-btn--preview {
  color: var(--gold);
  border-color: var(--gold-dim);
}
.psnap-btn--preview:hover {
  background: rgba(201, 168, 76, 0.12);
}
.psnap-btn--refresh {
  color: var(--gold);
  border-color: var(--gold-dim);
}
.psnap-btn--refresh:hover {
  background: rgba(201, 168, 76, 0.12);
}
.psnap-btn--revoke {
  color: var(--red);
  border-color: rgba(255, 94, 94, 0.3);
}
.psnap-btn--revoke:hover {
  background: rgba(255, 94, 94, 0.08);
}
.psnap-btn--delete {
  color: var(--text-dim);
  border-color: var(--border);
}
.psnap-btn--delete:hover {
  color: var(--red);
  border-color: rgba(255, 94, 94, 0.3);
  background: rgba(255, 94, 94, 0.06);
}

/* ═══════════ ADD TOUR MODAL ═══════════ */
.modal.wide {
  max-width: 720px;
}
.modal.extra-wide {
  max-width: 960px;
}

.path-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 24px;
}
.path-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 16px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
  text-align: left;
}
.path-card:hover {
  border-color: var(--gold-dim);
  background: rgba(201, 168, 76, 0.06);
}
.path-card.selected {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.1);
}
.path-card-icon {
  font-family: var(--display);
  font-size: 22px;
  color: var(--gold-bright);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.path-card-title {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.path-card-desc {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.45;
}

.step-indicator {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.step-indicator .active {
  color: var(--gold-bright);
}
.step-indicator .done {
  color: var(--green);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-row {
  margin-bottom: 14px;
}
.form-row label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.form-row .hint {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.paste-box {
  width: 100%;
  min-height: 140px;
  background: #06060a;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  border-radius: 5px;
  resize: vertical;
  line-height: 1.4;
}
.paste-box:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.paste-label-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.paste-example-toggle {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--blue);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.paste-example-toggle:hover {
  text-decoration: underline;
}
.paste-example {
  display: none;
  background: rgba(91, 156, 246, 0.06);
  border: 1px solid rgba(91, 156, 246, 0.2);
  padding: 10px 12px;
  border-radius: 5px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: pre;
  overflow-x: auto;
}
.paste-example.active {
  display: block;
}

.preview-summary {
  background: var(--surface2);
  padding: 12px 16px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 11px;
  margin-bottom: 14px;
}
.preview-summary .ok {
  color: var(--green);
}
.preview-summary .warn {
  color: var(--red);
}

.preview-table-wrap {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 14px;
}
.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 10px;
}
.preview-table th {
  background: var(--surface2);
  color: var(--text-dim);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
}
.preview-table td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(42, 42, 50, 0.5);
  color: var(--text);
}
.preview-table tr.bad td {
  color: var(--red);
  background: rgba(229, 72, 77, 0.06);
}

@media (max-width: 900px) {
  .path-cards {
    grid-template-columns: 1fr;
  }
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
  .division-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1200px) {
  .portfolio-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ─── SAVE INDICATOR (Phase 2) ─── */
.save-ind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 3px;
  text-transform: none;
  margin-right: 8px;
  display: none;
  transition: all 0.2s;
}
body.route-tour:not(.partner-mode) .save-ind {
  display: inline-block;
}
.save-ind-pending {
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold);
  border: 1px solid var(--gold-dim);
}
.save-ind-saving {
  background: rgba(91, 156, 246, 0.1);
  color: var(--blue);
  border: 1px solid rgba(91, 156, 246, 0.3);
}
.save-ind-saved {
  background: rgba(62, 207, 142, 0.1);
  color: var(--green);
  border: 1px solid rgba(62, 207, 142, 0.3);
}
.save-ind-error {
  background: rgba(229, 72, 77, 0.1);
  color: var(--red);
  border: 1px solid rgba(229, 72, 77, 0.3);
}

/* ─── CONFLICT BANNER ─── */
.conflict-banner {
  background: rgba(229, 72, 77, 0.15);
  border: 1px solid var(--red);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  display: none;
  margin: 16px 32px 0;
  line-height: 1.5;
}
.conflict-banner strong {
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}
.conflict-banner-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.conflict-banner-actions button {
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.conflict-banner-actions button.primary {
  background: var(--gold);
  color: #0a0a0c;
  border-color: var(--gold);
}
.conflict-banner-actions button:hover {
  opacity: 0.85;
}

/* ─── SEARCHABLE SELECT ─── */
.ss-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 24px 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-height: 26px;
  position: relative;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-btn::after {
  content: "▾";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--text-muted);
}
.ss-btn:hover {
  background: var(--surface2);
  border-color: var(--gold-dim);
}
.ss-btn.empty {
  color: var(--text-muted);
  font-style: italic;
  background: rgba(201, 168, 76, 0.08);
  border-color: var(--gold-dim);
}
.ss-btn.empty::before {
  content: "⚠ ";
  color: var(--gold);
  font-style: normal;
}
.ss-btn.invalid {
  color: var(--red);
  border-color: var(--red);
  background: rgba(229, 72, 77, 0.08);
}

.ss-popup {
  position: absolute;
  z-index: 10000;
  background: var(--surface);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  min-width: 240px;
  max-width: 400px;
  padding: 6px;
}
.ss-search {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  margin-bottom: 4px;
  box-sizing: border-box;
}
.ss-search:focus {
  outline: none;
  border-color: var(--gold);
}
.ss-list {
  max-height: 280px;
  overflow-y: auto;
}
.ss-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
}
.ss-opt:hover {
  background: var(--surface2);
  color: var(--gold-bright);
}
.ss-opt.current {
  background: rgba(201, 168, 76, 0.15);
  color: var(--gold-bright);
}
.ss-empty {
  padding: 10px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
}

/* VIP tours hide the Tickets/Package and Room Nights columns since
     they're always 1 ticket per package and 0 room nights for VIP shows. */
#shows-table.vip-mode .col-non-vip {
  display: none;
}

/* ─── FORECAST SLIDER ─── */
/* Wrapping row that holds "Forecast" label + range + pct text.
   flex-wrap: wrap lets it reflow to two rows on small screens instead of
   overflowing the header. The individual items already have white-space:
   nowrap so they stay on one line whenever there is enough room. */
#forecast-slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
  flex-wrap: wrap;
}

/* Range input inside the forecast slider row */
.forecast-slider-input {
  width: 120px;
  accent-color: var(--gold);
}

/* ─── SCENARIO ANALYSIS GRID ─── */
/* 6-column grid: row-label (1.2fr) + 5 data columns (0.8fr each).
   Extracted from inline style so responsive rules can narrow the grid
   on small screens. */
.scenario-targets-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

/* ─── SETTINGS TWO-COLUMN GRID ─── */
/* Used for the Ticket Pricing panel which lays out two equal columns
   (ticket types on the left, fee percentages on the right). Extracted
   from inline style so it can collapse to 1 column at narrow widths. */
.settings-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ─── FORM GRID 3-COLUMN VARIANT ─── */
/* Extends .form-grid-2 to 3 equal columns. Used in the Add Tour modal
   for the Status / Year / Division row. Collapses to 1 column at 900px
   (same breakpoint as .form-grid-2) so the modal remains usable on
   tablets and phones. */
.form-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ═══════════════════════════════════════════════════════════
     MOBILE BREAKPOINTS
     ═══════════════════════════════════════════════════════════ */

/* ─── 768px — tablet / large phone ─── */
@media (max-width: 768px) {
  .container {
    padding: 16px;
  }

  /* Two-row topbar: first row holds brand + controls, second row holds nav */
  .topbar {
    padding: 0 16px;
    gap: 8px 16px;
    height: auto;
    flex-wrap: wrap;
    padding-bottom: 0;
  }

  /* Nav drops to its own full-width row and becomes horizontally scrollable */
  .topbar-nav {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none; /* Firefox */
    padding-bottom: 6px;
    /* Extend the bottom border area so the scrollable row sits flush */
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .topbar-nav::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
  }

  /* Nav buttons must not shrink — they need their natural width for scrolling */
  .nav-btn {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .conflict-banner {
    margin: 12px 16px 0;
  }

  /* Metrics grid: default (5-col) and 4-col variant → 3 columns */
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .metrics-grid-4col {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 7-col variant (Tour Summary) → 4 columns at tablet */
  .metrics-grid-7col {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Portfolio metrics → 2 columns at tablet */
  .portfolio-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ─── Tour tile — card layout ───
       At ≤768px the 8-column list row collapses into a 2-row card:
       Row 1: badge | name + status pill | arrow
       Row 2: % Sold | Forecast Profit | 100X Share (3 equal cells)
       Lower-priority columns (Partner, Artist Share) are hidden. */
  .tour-tile {
    /* 6-unit equal grid:
         row 1 — badge(1) + name(4) + arrow(1)
         row 2 — three key cells × 2 units each */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    padding: 16px;
    gap: 8px 12px;
  }

  .tour-tile-badge {
    grid-row: 1;
    grid-column: 1;
    width: 44px;
    height: 44px;
    align-self: center;
    justify-self: start;
  }

  .tour-tile-main {
    grid-row: 1;
    grid-column: 2 / 6;
  }

  .tour-tile-arrow {
    grid-row: 1;
    grid-column: 6;
    align-self: center;
    justify-self: end;
  }

  /* Hide lower-priority columns: Partner (3rd child) and Artist Share (6th child) */
  .tour-tile > .tour-tile-cell:nth-child(3),
  .tour-tile > .tour-tile-cell:nth-child(6) {
    display: none;
  }

  /* Key metric cells in row 2 — two grid-units wide each (equal thirds) */
  .tour-tile > .tour-tile-cell:nth-child(4) {
    /* % Sold */
    grid-row: 2;
    grid-column: 1 / 3;
  }

  .tour-tile > .tour-tile-cell:nth-child(5) {
    /* Forecast Profit */
    grid-row: 2;
    grid-column: 3 / 5;
  }

  .tour-tile > .tour-tile-cell:nth-child(7) {
    /* 100X Share */
    grid-row: 2;
    grid-column: 5 / 7;
  }

  /* Tighten the progress bar track so it fits a narrow cell */
  .tour-tile-pct-track {
    min-width: 36px;
  }

  /* Data table density — reduce cell padding at tablet width */
  th {
    padding: 7px 8px;
  }
  td {
    padding: 6px 8px;
  }

  /* Modals — wide and extra-wide variants fill the viewport on tablets */
  .modal.wide,
  .modal.extra-wide {
    width: calc(100% - 24px);
  }

  /* Scenario analysis grid → 3 columns at tablet */
  .scenario-targets-grid {
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
  }

  /* Settings ticket pricing → 1 column at tablet */
  .settings-two-col {
    grid-template-columns: 1fr;
  }

  /* 3-col form grid → 1 column at tablet */
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  /* Signoff row — wrap to 2-col layout on tablets:
       left col: who + purpose (auto-stacked via auto-flow)
       right col: date + reviewed-by + check */
  .signoff-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Let who/purpose fill left col and date/by/check span or auto-flow naturally */
  .signoff-who {
    grid-column: 1;
  }
  .signoff-purpose {
    grid-column: 1;
  }
  .signoff-date {
    grid-column: 2;
  }
  .signoff-by {
    grid-column: 2;
  }
  .signoff-row .check {
    grid-column: 2;
    justify-self: start;
  }
}

/* ─── 480px — small phone ─── */
@media (max-width: 480px) {
  .container {
    padding: 12px;
  }

  .topbar {
    padding: 0 12px;
    gap: 8px 12px;
  }

  .topbar-nav {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .conflict-banner {
    margin: 8px 12px 0;
  }

  /* Metrics grid: all variants → 2 columns */
  .metrics-grid,
  .metrics-grid-4col,
  .metrics-grid-7col {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Division tiles → 2 columns on small phones */
  .division-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Upcoming schedule row — drop countdown column on small phones */
  .upcoming-row {
    grid-template-columns: 110px 1fr auto;
  }
  .upcoming-countdown {
    display: none;
  }

  /* Data table density — tighter font size on small phones */
  th,
  td {
    font-size: 11px;
  }

  /* Scenario analysis grid → 2 columns (row-label + 1 data col) */
  .scenario-targets-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }

  /* Settings ticket pricing → 1 column */
  .settings-two-col {
    grid-template-columns: 1fr;
  }

  /* 3-col form grid → 1 column */
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}