:root {
  --navy: #003366;
  --navy-2: #1e3a5f;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --red: #dc2626;
  --red-light: #fee2e2;
  --green: #16a34a;
  --green-light: #dcfce7;
  --amber: #d97706;
  --amber-light: #fef3c7;
  --blue: #2563eb;
  --blue-light: #dbeafe;
  --purple: #7c3aed;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: var(--slate-900); background: var(--slate-50); font-size: 14px; line-height: 1.45; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar { background: var(--slate-900); color: var(--slate-300); padding: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-brand { padding: 18px 20px; border-bottom: 1px solid var(--slate-800); display: flex; align-items: center; gap: 10px; }
.sidebar-brand .logo { width: 32px; height: 32px; background: var(--navy); border-radius: 6px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.5px; }
.sidebar-brand .name { font-weight: 600; color: #fff; font-size: 14px; }
.sidebar-brand .name small { display: block; font-weight: 400; color: var(--slate-400); font-size: 11px; margin-top: 2px; }

.sidebar-section { display: block; padding: 14px 12px 6px 18px; font-size: 10.5px; font-weight: 600; color: var(--slate-500); letter-spacing: 0.6px; text-transform: uppercase; }
a.sidebar-section { cursor: pointer; }
a.sidebar-section:hover { color: var(--slate-300); }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 7px 18px; color: var(--slate-300); font-size: 13px; text-decoration: none; border-left: 3px solid transparent; }
.sidebar-link:hover { background: var(--slate-800); color: #fff; text-decoration: none; }
.sidebar-link.active { background: var(--slate-800); color: #fff; border-left-color: var(--navy); }
.sidebar-link.active::before { content: ""; }
.sidebar-sub { padding-left: 32px; }
.sidebar-sub .sidebar-link { padding-left: 0; font-size: 12.5px; color: var(--slate-400); }

.sidebar-footer { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--slate-800); font-size: 12px; color: var(--slate-400); }
.sidebar-footer .who { color: #fff; }
.sidebar-footer .role { font-size: 11px; color: var(--slate-500); margin-top: 2px; }
.sidebar-footer .signout { display: inline-block; margin-top: 8px; color: var(--slate-300); font-size: 11.5px; }

/* ── Main ───────────────────────────────────────────────────────── */
.main { padding: 0; min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid var(--slate-200); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.crumbs { font-size: 12.5px; color: var(--slate-500); }
.crumbs a { color: var(--slate-500); }
.crumbs .sep { margin: 0 6px; color: var(--slate-300); }
.crumbs .here { color: var(--slate-900); }
.topbar-actions { display: flex; gap: 8px; }
/* View As picker, added to every top bar by sidebar.js for the view_as capability. */
.view-as { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--slate-600); margin: 0; }
.view-as select { font-size: 12.5px; min-width: 160px; }
.view-as.on span { color: #b45309; }
.view-as.on select { border-color: #d97706; background: #fffbeb; }

.page { padding: 24px 28px 60px; max-width: 1100px; }
/* Data-heavy pages (the Ledger). 1100px is sized for reading a form; a wide
   table needs the room before .table-wrap has to start scrolling. */
.page.page-wide { max-width: 1600px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 16px; }
.page-title { font-size: 22px; font-weight: 600; margin: 0; }
.page-sub { color: var(--slate-500); font-size: 13px; margin-top: 4px; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; border-radius: 6px; border: 1px solid var(--slate-300); background: #fff; color: var(--slate-900); cursor: pointer; text-decoration: none; font-family: inherit; }
.btn:hover { background: var(--slate-50); text-decoration: none; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.btn-danger { background: #fff; border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red-light); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--slate-100); }

/* ── Cards ──────────────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; }
.card-head { padding: 14px 18px; border-bottom: 1px solid var(--slate-200); display: flex; justify-content: space-between; align-items: center; }
.card-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card-body { padding: 18px; }
.card + .card { margin-top: 16px; }

/* ── Tables ─────────────────────────────────────────────────────── */
/* Tables: 100% width, browser auto-layout, cells wrap. Per-page width hints
   live on individual <th style="width:X%"> when a specific column needs to
   not bully the rest. Otherwise the browser handles it. */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { word-wrap: break-word; overflow-wrap: break-word; }

/* Wide tables scroll sideways INSIDE the page instead of running off the right
   edge of the window where the columns can't be reached. The rest of the CSS
   already assumed this existed (see the responsive block) but it was never
   written, so a 13-column ledger simply spilled. Wrap any table that can
   outgrow .page (max-width 1100px) in a .table-wrap. */
.table-wrap { overflow-x: auto; overflow-y: visible; max-width: 100%; }
.table-wrap .table { min-width: 1180px; }   /* below this the columns crush */

/* A read-only status that needs attention. Flat text — a table says its state in
   words, not pills (Mia's rule). Colour is for the one state that's a problem. */
.status-flag { color: var(--red); font-weight: 600; }

/* Compact row-metadata cell (used in the ID column on list pages) */
.cell-meta { vertical-align: top; }
.cell-id { font-family: ui-monospace, monospace; font-size: 12px; color: var(--slate-500); font-weight: 600; }
.cell-meta-line { font-size: 11.5px; line-height: 1.5; color: var(--slate-600); margin-top: 2px; }
.cell-meta-on  { color: #15803d; font-weight: 600; }
.cell-meta-off { color: var(--slate-400); }
.badge.badge-sm { font-size: 10.5px; padding: 1px 7px; }

/* Status as colored text (no bubble), used inside .cell-meta */
.status-text { font-weight: 600; font-size: 11.5px; }
.status-confirmed { color: #15803d; }
.status-cancelled { color: #cc0000; }
.status-tentative { color: #b45309; }
.status-completed { color: #475569; }
.status-draft     { color: var(--slate-400); font-style: italic; }

.table thead { background: var(--navy); }
.table th { text-align: left; padding: 12px 14px; font-weight: 700; color: #fff; border-bottom: none; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px; background: var(--navy); }
.table th + th { border-left: 1px solid rgba(255,255,255,0.18); }
.table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table th.sortable:hover { color: var(--slate-900); background: var(--slate-200); }
.table th.sortable .sort-arrow { display: inline-block; margin-left: 4px; opacity: 0.3; font-size: 10px; }
.table th.sortable.sort-asc .sort-arrow,
.table th.sortable.sort-desc .sort-arrow { opacity: 1; color: var(--slate-900); }
/* Sticky header row (Mia 10/14/2026, design rule 8: a grid pins its header while
   scrolling). Pins to the window under the sticky .topbar; pages with no topbar pin
   at the top edge. Stays below the topbar (z 50) and the multiselect panels (z 50).
   A .table-wrap scrolls sideways, so a table inside one pins to that box instead. */
.table thead th { position: sticky; top: 0; z-index: 5; }
body:has(.topbar) .table thead th { top: var(--topbar-h, 58px); }
/* Inside a .table-wrap the box is the scroll container, so the topbar offset would
   push the header 58px down into the rows (Spend Ledger, 10/15/2026). Pin at 0. */
body:has(.topbar) .table-wrap .table thead th { top: 0; }

/* ── Multi-select dropdown ──────────────────────────────────────── */
.multiselect { position: relative; display: inline-block; }
.multiselect-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--slate-300); border-radius: 5px; background: #fff; font-size: 12.5px; cursor: pointer; color: var(--slate-900); min-width: 140px; justify-content: space-between; }
.multiselect-btn:hover { border-color: var(--slate-400); }
.multiselect-btn .caret { color: var(--slate-500); font-size: 10px; }
.multiselect-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; background: #fff; border: 1px solid var(--slate-300); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 200px; max-width: 280px; padding: 6px 0; }
.multiselect-actions { padding: 4px 12px 6px; border-bottom: 1px solid var(--slate-100); display: flex; justify-content: flex-end; }
.multiselect-clear { font-size: 11.5px; color: var(--slate-500); text-decoration: none; }
.multiselect-clear:hover { color: var(--navy); text-decoration: underline; }
.multiselect-options { max-height: 280px; overflow-y: auto; padding: 4px 0; }
.multiselect-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; user-select: none; }
.multiselect-option:hover { background: var(--slate-50); }
.multiselect-option input[type=checkbox] { margin: 0; }
/* Optional search + Select Shown (mountMultiselect({ search: true })) and a wider panel for long names. */
.multiselect-search-row { padding: 4px 10px 6px; }
.multiselect-search { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--slate-300); border-radius: 5px; font-size: 12.5px; }
.multiselect-actions { gap: 12px; }
.multiselect-all { font-size: 11.5px; color: var(--slate-500); text-decoration: none; margin-right: auto; }
.multiselect-all:hover { color: var(--navy); text-decoration: underline; }
.multiselect-wide .multiselect-panel { max-width: 420px; min-width: 300px; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--slate-200); vertical-align: middle; color: var(--slate-700); }
.table td + td { border-left: 1px solid var(--slate-100); }
.table tbody tr:nth-child(odd) td  { background: #e3ecf7; }
.table tbody tr:nth-child(even) td { background: #f1f3f5; }
.table tbody tr:hover td           { background: #c9d8ed !important; }
.table tbody tr.row-selected td    { background: #b9cce6 !important; }
.table tbody tr:last-child td { border-bottom: 1px solid var(--slate-300); }
.table tbody tr[data-href] { cursor: pointer; }
.table .row-link { color: var(--slate-900); font-weight: 500; }
.table .row-link:hover { color: var(--navy); }
.table .muted { color: var(--slate-500); }
.table-toolbar { padding: 12px 14px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); }
.table-toolbar input[type=search] { flex: 1; max-width: 280px; padding: 6px 10px; border: 1px solid var(--slate-300); border-radius: 5px; font-size: 12.5px; }
.table-toolbar select { width: auto; padding: 6px 10px; border: 1px solid var(--slate-300); border-radius: 5px; font-size: 12.5px; background: #fff; }   /* width: auto beats the form-field 100%, which put each toolbar select on its own line */

/* ── Badges & Pills ─────────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 999px; letter-spacing: 0.2px; }
.badge-green { background: var(--green-light); color: var(--green); }
.badge-amber { background: var(--amber-light); color: var(--amber); }
.badge-red { background: var(--red-light); color: var(--red); }
.row-cancelled td,
.row-cancelled td .muted,
.row-cancelled td .row-link,
.row-cancelled td strong { color: var(--slate-400) !important; }
.row-cancelled td .badge { opacity: 0.55; }
.badge-blue { background: var(--blue-light); color: var(--blue); }
.badge-grey { background: var(--slate-100); color: var(--slate-600); }
.badge-navy { background: var(--navy); color: #fff; }
.badge-wwyt { background: #003366; color: #fff; }
.badge-club { background: #669944; color: #fff; }
.badge-ypv { background: #cc6600; color: #fff; }
.badge-other { background: #94a3b8; color: #fff; }
.badge-checklist { background: #7c3aed; color: #fff; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; vertical-align: middle; margin-right: 6px; }
.dot-wwyt { background: #003366; }
.dot-club { background: #669944; }
.dot-ypv { background: #cc6600; }
.dot-other { background: #94a3b8; }
.dot-checklist { background: #7c3aed; }
.dot-sales { background: #ffcc66; }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 200px 1fr; gap: 12px 18px; align-items: start; }
.form-grid label { font-size: 12.5px; font-weight: 600; color: var(--slate-700); padding-top: 8px; }
.form-grid .help { color: var(--slate-500); font-size: 12px; margin-top: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=search], textarea, select { width: 100%; padding: 7px 10px; border: 1px solid var(--slate-300); border-radius: 5px; font-size: 13px; font-family: inherit; background: #fff; color: var(--slate-900); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.15); }
textarea { resize: vertical; min-height: 70px; }
.checkbox-row { display: flex; gap: 8px; align-items: center; padding-top: 8px; }
.checkbox-row input { width: auto; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.wizard-steps { display: flex; gap: 6px; margin-bottom: 24px; align-items: center; }
.wizard-steps .step { padding: 6px 14px; border-radius: 999px; font-size: 12px; background: var(--slate-100); color: var(--slate-500); border: 1px solid var(--slate-200); }
.wizard-steps .step.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.wizard-steps .step.done { background: var(--green-light); color: var(--green); border-color: var(--green-light); }
.wizard-steps .arrow { color: var(--slate-300); }

.wizard-actions { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--slate-200); }

/* ── Section nav inside detail pages ───────────────────────────── */
.detail-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.detail-nav { position: sticky; top: 70px; align-self: start; }
.detail-nav a { display: block; padding: 7px 12px; color: var(--slate-600); font-size: 13px; border-radius: 5px; margin-bottom: 2px; }
.detail-nav a:hover { background: var(--slate-100); color: var(--slate-900); text-decoration: none; }
.detail-nav a.active { background: var(--navy); color: #fff; font-weight: 500; }

.section { background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; margin-bottom: 16px; }
.section-head { padding: 14px 18px; border-bottom: 1px solid var(--slate-200); display: flex; justify-content: space-between; align-items: center; }
.section-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.section-body { padding: 18px; }

/* ── Stat tiles (summary stat row at top of list/report pages) ─── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; align-items: stretch; }
.stat-tile { background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 0 rgba(15,23,42,0.03); }
.stat-tile .stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--slate-500); line-height: 16px; height: 16px; }
.stat-tile .stat-number { font-size: 22px; font-weight: 700; line-height: 28px; height: 28px; font-variant-numeric: tabular-nums; }
.stat-tile .stat-count  { font-size: 11.5px; line-height: 14px; height: 14px; color: var(--slate-500); }
.table tbody tr.row-total td { background: var(--slate-200) !important; border-top: 2px solid var(--slate-400); }
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Landing tiles ──────────────────────────────────────────────── */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile { display: block; background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; padding: 18px; text-decoration: none; color: var(--slate-900); transition: transform 0.05s, box-shadow 0.1s; position: relative; }
.tile:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07); border-color: var(--slate-300); }
.tile-icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; margin-bottom: 10px; font-size: 16px; }
.tile-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.tile-desc { font-size: 12.5px; color: var(--slate-500); margin: 0; line-height: 1.5; }
.tile-badge { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.2px; pointer-events: none; }
/* No status pills on tiles, anywhere (Mia 09/27/2026: "get rid of the pills"). Status lives on the Site Map only, as a plain word. */
.tile .tile-badge { display: none !important; }
.tile-badge-live { background: var(--green-light); color: var(--green); }
.tile-badge-port { background: var(--amber-light); color: var(--amber); }
.tile-badge-nb { background: var(--slate-100); color: var(--slate-500); }
.tile-badge-mockup { background: #e0f2fe; color: #0369a1; }

/* ── Auth gate ──────────────────────────────────────────────────── */
.gate { min-height: 100vh; display: grid; place-items: center; background: var(--slate-50); }
.gate-card { background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; padding: 40px 36px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 2px 16px rgba(15,23,42,0.06); }
.gate-logo { width: 44px; height: 44px; background: var(--slate-900); border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; margin: 0 auto 16px; letter-spacing: -0.5px; }
.gate-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.gate-sub { color: var(--slate-500); font-size: 13px; margin: 0 0 24px; }
.gate-sub code { background: var(--slate-100); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.gate-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--slate-900); color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.gate-btn:hover { background: var(--slate-700); }
.gate-hint { color: var(--slate-400); font-size: 12px; margin: 14px 0 0; }
.gate-hint code { background: var(--slate-100); padding: 1px 4px; border-radius: 3px; font-size: 11px; }

/* ── Misc ───────────────────────────────────────────────────────── */
.color-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; margin-right: 6px; border: 1px solid var(--slate-200); }
.kbd { font-family: ui-monospace, monospace; background: var(--slate-100); padding: 2px 5px; border-radius: 3px; font-size: 11.5px; }
.divider { height: 1px; background: var(--slate-200); margin: 24px 0; }
.muted { color: var(--slate-500); }
.empty { padding: 40px; text-align: center; color: var(--slate-500); font-size: 13px; }

/* ── Public form (call center) ──────────────────────────────────── */
.public-shell { min-height: 100vh; background: var(--slate-100); padding: 40px 20px; }
.public-card { max-width: 640px; margin: 0 auto; background: #fff; border-radius: 10px; border: 1px solid var(--slate-200); overflow: hidden; }
.public-head { padding: 24px 28px; background: var(--navy); color: #fff; }
.public-head h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.public-head p { margin: 0; opacity: 0.85; font-size: 13.5px; }
.public-body { padding: 24px 28px; }
.public-body .form-grid label { padding-top: 9px; }
.public-foot { padding: 18px 28px; background: var(--slate-50); border-top: 1px solid var(--slate-200); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.public-foot small { color: var(--slate-500); }

.timeshare-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.6fr 28px; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--slate-100); align-items: center; }
.timeshare-row.head { font-weight: 600; color: var(--slate-500); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.3px; padding-bottom: 6px; }

/* Who sees which page or link: admin_page_access in Supabase, applied by
   sidebar.js and assets/auth.js gate(). No role classes in CSS. */

/* In-page build-status banner. Injected by sidebar.js from STATUS_MAP.
   One of: LIVE / WIRED EMPTY / MOCKUP / STATIC BY DESIGN / OBSOLETE COPY.
   Source of truth is STATE.md; sidebar.js STATUS_MAP mirrors it. */
.page-status-banner { display: flex; align-items: center; gap: 8px; padding: 6px 28px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; border-bottom: 1px solid var(--slate-200); }
.page-status-banner .ps-label { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; }
.page-status-banner .ps-note { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--slate-600); }
.page-status-banner .ps-link { margin-left: auto; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--slate-500); text-decoration: none; }
.page-status-banner .ps-link:hover { color: var(--navy); text-decoration: underline; }
.page-status-banner.ps-live { background: var(--green-light); }
.page-status-banner.ps-live .ps-label { background: var(--green); color: #fff; }
.page-status-banner.ps-wired-empty { background: var(--blue-light); }
.page-status-banner.ps-wired-empty .ps-label { background: var(--blue); color: #fff; }
.page-status-banner.ps-mockup { background: var(--amber-light); }
.page-status-banner.ps-mockup .ps-label { background: var(--amber); color: #fff; }
.page-status-banner.ps-static { background: var(--slate-100); }
.page-status-banner.ps-static .ps-label { background: var(--slate-500); color: #fff; }
.page-status-banner.ps-obsolete { background: var(--red-light); }
.page-status-banner.ps-obsolete .ps-label { background: var(--red); color: #fff; }
/* status model: Planned -> Mockup -> Staged -> Live -> Static -> Retired */
.page-status-banner.ps-planned { background: var(--slate-100); }
.page-status-banner.ps-planned .ps-label { background: var(--slate-400); color: #fff; }
.page-status-banner.ps-staged { background: var(--blue-light); }
.page-status-banner.ps-staged .ps-label { background: var(--blue); color: #fff; }
.page-status-banner.ps-retired { background: var(--red-light); }
.page-status-banner.ps-retired .ps-label { background: var(--red); color: #fff; }
.tile-badge-planned { background: var(--slate-50); color: var(--slate-500); border: 1px dashed var(--slate-200); }
.tile-badge-retired { background: var(--red-light); color: var(--red); }

/* Show user-scope notices */
.scope-banner { display: none; padding: 10px 14px; background: var(--blue-light); border: 1px solid #bfdbfe; border-radius: 6px; font-size: 12.5px; margin-bottom: 14px; color: var(--blue); }

/* Dashboard: one view for everyone; sidebar.js hides tiles by permission.
   The jr-admin and user blocks are kept as the mockup spec for per-role views. */
.lens-jr-admin, .lens-user { display: none; }

/* ── Your Day widget on Dashboard ──────────────────────────────── */
.your-day { margin: 22px 0 32px; }

.yd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.yd-stat { background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.yd-stat-num { font-size: 28px; font-weight: 700; line-height: 1; color: var(--slate-900); font-variant-numeric: tabular-nums; }
.yd-stat-label { font-size: 12px; color: var(--slate-600); font-weight: 500; }
.yd-stat.urgent .yd-stat-num { color: var(--amber); }
.yd-stat.danger .yd-stat-num { color: var(--red); }

.yd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.yd-panel { background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; overflow: hidden; }
.yd-panel-head { padding: 12px 16px; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); display: flex; justify-content: space-between; align-items: center; }
.yd-panel-head h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--slate-900); }
.yd-panel-head .yd-h-link { font-size: 12px; font-weight: 500; color: var(--navy); text-decoration: none; }
.yd-panel-head .yd-h-link:hover { text-decoration: underline; }
.yd-panel-body { padding: 4px 0; }

.yd-item { display: flex; padding: 12px 16px; gap: 14px; align-items: flex-start; border-bottom: 1px solid var(--slate-100); }
.yd-item:last-child { border-bottom: none; }
.yd-item:hover { background: var(--slate-50); }

/* Schedule layout: time column + body */
.yd-item .when { flex-shrink: 0; min-width: 64px; color: var(--slate-900); font-weight: 600; font-size: 13px; }
.yd-item .when small { display: block; font-size: 11px; color: var(--slate-500); font-weight: 400; margin-top: 1px; }

/* Action items layout: tag column + body */
.yd-item .tag-col { flex-shrink: 0; min-width: 80px; padding-top: 1px; }

.yd-item .body { flex: 1; min-width: 0; }
.yd-item .body .title { font-size: 14px; font-weight: 600; color: var(--slate-900); line-height: 1.35; }
.yd-item .body .title a { color: inherit; text-decoration: none; }
.yd-item .body .title a:hover { color: var(--navy); text-decoration: underline; }
.yd-item .body .meta { color: var(--slate-500); font-size: 12px; margin-top: 3px; line-height: 1.4; }
.yd-item .right-badge { flex-shrink: 0; }

.yd-empty { color: var(--slate-500); font-size: 12.5px; padding: 28px 16px; text-align: center; }

.yd-tag { display: inline-block; padding: 3px 9px; font-size: 11px; font-weight: 600; border-radius: 999px; letter-spacing: 0.1px; }
.yd-tag-amber { background: var(--amber-light); color: var(--amber); }
.yd-tag-red   { background: var(--red-light); color: var(--red); }
.yd-tag-blue  { background: var(--blue-light); color: var(--blue); }
.yd-tag-grey  { background: var(--slate-100); color: var(--slate-600); }

/* ── Section landing pages (Admin / EP / MD / Call Center) ────── */
.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.lp-stat { background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; padding: 14px; border-left: 4px solid var(--slate-300); }
.lp-stat-num { font-size: 22px; font-weight: 600; color: var(--slate-900); font-variant-numeric: tabular-nums; }
.lp-stat-label { font-size: 11px; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

.lp-group { margin-bottom: 24px; }
.lp-group-h { font-size: 14px; font-weight: 600; color: var(--slate-900); padding-bottom: 8px; border-bottom: 2px solid var(--slate-300); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.lp-group-h .lp-h-sub { font-size: 11.5px; font-weight: 400; color: var(--slate-500); text-transform: none; letter-spacing: 0; }

.lp-tile-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lp-tile { display: block; background: #fff; border: 1px solid var(--slate-200); border-radius: 6px; padding: 14px; color: var(--slate-900); text-decoration: none; border-left: 4px solid var(--slate-300); }
.lp-tile:hover { background: var(--slate-50); text-decoration: none; box-shadow: 0 1px 4px rgba(15,23,42,0.06); }
.lp-tile .t-title { font-size: 13px; font-weight: 600; }
.lp-tile .t-sub { font-size: 11.5px; color: var(--slate-500); margin-top: 4px; line-height: 1.4; }
.lp-tile .t-badge { display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 600; border-radius: 999px; margin-top: 6px; }

body.lp-admin .lp-stat,
body.lp-admin .lp-tile { border-left-color: #334155; }
body.lp-admin .lp-group-h { border-bottom-color: #334155; }

body.lp-ep .lp-stat,
body.lp-ep .lp-tile { border-left-color: #003366; }
body.lp-ep .lp-group-h { border-bottom-color: #003366; }

body.lp-md .lp-stat,
body.lp-md .lp-tile { border-left-color: #1e40af; }
body.lp-md .lp-group-h { border-bottom-color: #1e40af; }

body.lp-cc .lp-stat,
body.lp-cc .lp-tile { border-left-color: #dc2626; }
body.lp-cc .lp-group-h { border-bottom-color: #dc2626; }

.lp-with-side { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
.lp-side-widget { background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; padding: 14px; position: sticky; top: 70px; }
.lp-side-widget h4 { margin: 0 0 8px; font-size: 11px; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.lp-side-row { padding: 8px 0; border-bottom: 1px solid var(--slate-100); font-size: 12.5px; }
.lp-side-row:last-child { border-bottom: none; }
.lp-side-row .name { font-weight: 500; }
.lp-side-row .meta { color: var(--slate-500); font-size: 11.5px; margin-top: 1px; }

/* ── Wizards (ep-event-new, ep-trip-new) ──────────────────────── */
.topbar-actions .sep { width: 1px; height: 22px; background: var(--slate-200); margin: 0 4px; display: inline-block; }
.btn-danger { background: #dc2626; border-color: #b91c1c; color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #991b1b; color: #fff; text-decoration: none; }
.step-panel { display: none; }
.step-panel.active { display: block; }
.form-grid { display: grid; grid-template-columns: 200px 1fr; gap: 12px 18px; align-items: start; }
.form-grid label { font-size: 12.5px; font-weight: 600; color: var(--slate-700); padding-top: 8px; }
.form-grid .help { color: var(--slate-500); font-size: 12px; margin-top: 4px; }
.checkbox-row { display: flex; gap: 8px; align-items: center; padding-top: 8px; }
.checkbox-row input { width: auto; }
.kbd { font-family: ui-monospace, monospace; background: var(--slate-100); padding: 2px 5px; border-radius: 3px; font-size: 11.5px; }
.derived { background: var(--slate-100); padding: 12px 14px; border-radius: 6px; font-size: 13px; color: var(--slate-700); margin-bottom: 14px; }
.derived strong { color: var(--slate-900); }
.derived .empty-derived { color: var(--slate-400); font-style: italic; }
.contact-row-grid { grid-template-columns: 150px 0.8fr 0.8fr 1.2fr 1fr 1fr 30px; }
.contact-row { display: grid; grid-template-columns: 150px 0.8fr 0.8fr 1.2fr 1fr 1fr 30px; gap: 8px; padding: 10px 12px; border: 1px solid var(--slate-200); border-radius: 6px; margin-bottom: 8px; background: var(--slate-50); align-items: center; }
.contact-row input, .contact-row select { font-size: 12.5px; padding: 5px 8px; }
.contact-row.invalid { border-color: #dc2626; background: #fef2f2; }
.contact-row .x { cursor: pointer; color: var(--slate-400); text-align: center; font-size: 18px; line-height: 1; user-select: none; }
.contact-row .x:hover { color: #dc2626; }
.contact-row-head { display: grid; gap: 10px; padding: 0 12px 6px; font-size: 11px; color: var(--slate-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.field-err { color: #dc2626; font-size: 11.5px; margin-top: 4px; min-height: 14px; }
input.invalid, select.invalid { border-color: #dc2626; background: #fef2f2; }
.wizard-bottom-actions { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--slate-200); padding: 12px 28px; display: flex; align-items: center; gap: 8px; box-shadow: 0 -1px 0 rgba(15,23,42,0.04); margin-top: 24px; z-index: 20; }
.wizard-bottom-actions .sep { width: 1px; height: 22px; background: var(--slate-200); margin: 0 4px; display: inline-block; }
.wiz-save-status { margin-right: auto; font-size: 12px; color: var(--slate-500); }
.wiz-save-status.saving { color: var(--slate-500); font-style: italic; }
.wiz-save-status.saved { color: #16a34a; }
.wiz-save-status.err { color: #dc2626; }
.venue-card { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--slate-200); border-radius: 6px; background: var(--slate-50); margin-bottom: 12px; }
.venue-card .venue-name { font-weight: 600; font-size: 13.5px; }
.venue-card .venue-meta { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.wizard-toast { position: fixed; top: 70px; right: 24px; max-width: 520px; background: var(--slate-900); color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 200; }
.wizard-toast.amber { background: #d97706; }
.wizard-toast.green { background: #16a34a; }
.wizard-toast.red { background: #dc2626; }

/* === Patterns from pattern_cc_drilldown_ux.md === */
.req { color: var(--red); margin-left: 2px; }
.calc-name { font-size: 11.5px; color: var(--slate-500); margin-top: 4px; font-family: ui-monospace, monospace; min-height: 16px; }
.label-help { display: block; font-weight: normal; color: var(--slate-500); font-size: 11px; margin-top: 4px; line-height: 1.4; }

/* Wizard action button row — sticky under topbar, tight to step pills + form */
.wizard-actions {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  margin-top: 0; margin-bottom: 12px;
  padding: 10px 0; border-top: 0;
  position: sticky; top: 58px; z-index: 30;
  background: var(--slate-50);
}
.wizard-actions .wiz-spacer { width: 1px; height: 22px; background: var(--slate-200); margin: 0 4px; }

/* ============================================================
   Detail page drill-down patterns (see pattern_cc_drilldown_ux.md)
   ============================================================ */
.step-panel { display: none; }
.step-panel.active { display: block; }

/* Data-table layout */
.data-table { width: 100%; }
.data-header { display: grid; gap: 0; padding: 0 0 8px; border-bottom: 1px solid var(--slate-200); margin-bottom: 8px; font-size: 11px; font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.4px; }
.data-header > div { padding: 0 12px; border-right: 1px solid var(--slate-100); }
.data-header > div:last-child { border-right: none; }

/* Venue card */
.venue-card { border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; margin-bottom: 0; }
.venue-card.view { display: grid; grid-template-columns: 1.4fr 2.2fr 1fr; align-items: center; cursor: pointer; transition: background .15s, border-color .15s; padding: 0; }
.venue-card.view > div { padding: 12px; border-right: 1px solid var(--slate-100); font-size: 12.5px; color: var(--slate-600); }
.venue-card.view > div:last-child { border-right: none; }
.venue-card.view .venue-name { font-weight: 600; font-size: 13px; color: var(--slate-900); }
.venue-card.view:hover { border-color: #93c5fd; box-shadow: 0 0 0 2px rgba(59,130,246,0.08); }
.venue-table .data-header { grid-template-columns: 1.4fr 2.2fr 1fr; }

/* Contact cards */
.contact-stack { display: flex; flex-direction: column; gap: 8px; }
.contact-card { border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; }
.contact-card.view { display: grid; grid-template-columns: 36px 1.1fr 1.1fr 1.6fr 1fr 0.95fr; align-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.contact-card.view > div { padding: 12px; border-right: 1px solid var(--slate-100); font-size: 12.5px; color: var(--slate-600); }
.contact-card.view > div:last-child { border-right: none; }
.contact-card.view > .star-cell { padding: 12px 0; text-align: center; }
.contact-card.view .c-name { font-weight: 600; font-size: 13px; color: var(--slate-900); }
.contact-card.view .c-field a { color: var(--navy); }
.contact-card.view .star { font-size: 18px; line-height: 1; user-select: none; }
.contact-card.view .star.on  { color: var(--amber); }
.contact-card.view .star.off { color: var(--slate-300); }
.contact-card.view:hover { border-color: #93c5fd; box-shadow: 0 0 0 2px rgba(59,130,246,0.08); }
.contact-card.edit { padding: 20px 22px; display: block; }
.contact-card.edit .c-added-display { font-size: 11.5px; color: var(--slate-400); margin-bottom: 8px; }
.contact-table .data-header { grid-template-columns: 36px 1.1fr 1.1fr 1.6fr 1fr 0.95fr; }

/* Inline edit form actions */
.inline-form-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 14px; align-items: center; }
.inline-form-actions .btn { padding: 3px 9px; font-size: 11.5px; }

/* lookup-admin: section heading (spans the form grid) + textarea fields */
.lk-section { grid-column: 1 / -1; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); border-bottom: 1px solid var(--slate-200); padding-bottom: 6px; margin: 10px 0 2px; }
.lk-section:first-child { margin-top: 0; }
/* Tabbed edit panel (two+ field groups). */
.lk-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--slate-200); margin-bottom: 16px; flex-wrap: wrap; }
.lk-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 16px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--slate-500); cursor: pointer; margin-bottom: -1px; }
.lk-tab:hover { color: var(--slate-700); }
.lk-tab.active { color: var(--navy, #003366); border-bottom-color: var(--navy, #003366); }
.contact-card.edit textarea { width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--slate-900); border: 1px solid var(--slate-300); border-radius: 6px; resize: vertical; }
/* Keep a rich edit panel from forcing the drill-down table wider than its card. */
.contact-card.edit { max-width: 100%; box-sizing: border-box; }
.contact-card.edit .form-grid > * { min-width: 0; }
.contact-card.edit input, .contact-card.edit textarea, .contact-card.edit select { max-width: 100%; box-sizing: border-box; }

/* Drill-down editing — blue outline + lock the rest of the page */
.venue-card.edit,
.status-edit-wrap {
  display: block !important;
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18) !important;
  background: #fff;
  padding: 20px 22px !important;
  margin: 6px 4px;
}
.contact-card.edit {
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18) !important;
  background: #fff;
  margin: 6px 4px;
}
.status-edit-wrap { border-radius: 8px; max-width: 320px; }
select option.danger { color: var(--red); font-weight: 600; }

/* Booking-detail visuals */
.type-stripe { display: inline-block; width: 4px; height: 14px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.timeline { border-left: 2px solid var(--slate-200); padding-left: 16px; margin-left: 6px; }
.timeline-item { position: relative; padding: 6px 0; font-size: 12.5px; }
.timeline-item::before { content: ""; position: absolute; left: -22px; top: 11px; width: 9px; height: 9px; border-radius: 999px; background: #fff; border: 2px solid var(--slate-300); }
.timeline-item.green::before { background: var(--green); border-color: var(--green); }
.timeline-item.amber::before { background: var(--amber); border-color: var(--amber); }
.timeline-item.red::before   { background: var(--red);   border-color: var(--red); }
.timeline-time { color: var(--slate-500); font-size: 11.5px; }

/* Host rows */
.host-row { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--slate-100); gap: 12px; color: inherit; text-decoration: none; }
.host-row:last-child { border-bottom: none; }
.host-row:hover { background: #eef4fb; }
.host-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--slate-200); display: grid; place-items: center; color: var(--slate-700); font-weight: 600; font-size: 12px; }
.drag-handle { color: var(--slate-300); cursor: grab; }

/* Intake field rows (sched-type-detail) */
.intake-field { display: grid; grid-template-columns: 30px 1fr 1fr 110px 70px; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--slate-100); font-size: 13px; }
.intake-field:last-child { border-bottom: none; }
.intake-field input, .intake-field select { padding: 5px 8px; font-size: 12.5px; }
.intake-field.head { font-weight: 600; color: var(--slate-500); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.3px; background: var(--slate-50); }

/* Host availability (sched-host-detail) */
.day-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--slate-100); }
.day-row:last-child { border-bottom: none; }
.day-label { font-weight: 600; font-size: 13px; }
.day-ranges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.time-range { display: inline-flex; gap: 4px; align-items: center; padding: 4px 8px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 5px; font-size: 12px; }
.time-range input { width: 80px; padding: 3px 6px; font-size: 12px; border: none; background: transparent; }
.day-off { font-size: 12px; color: var(--slate-500); font-style: italic; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }

#status-display.editable { cursor: pointer; transition: filter .15s; }
#status-display.editable:hover { filter: brightness(0.93); }
#status-display.editable::after { content: ' ✎'; font-size: 10px; opacity: 0.6; }

body.drill-down-active .wizard-actions,
body.drill-down-active .topbar-actions { display: none !important; }
body.drill-down-active .wizard-steps .step:not(.active) { opacity: 0.45; pointer-events: none; }
body.drill-down-active .wizard-steps .arrow { opacity: 0.45; }
body.drill-down-active .section-tabs .tab:not(.active) { opacity: 0.45; pointer-events: none; }
body.drill-down-active #btn-add-contact { display: none !important; }
body.drill-down-active .venue-card.view,
body.drill-down-active .contact-card.view {
  opacity: 0.45; pointer-events: none; cursor: default;
}
body.drill-down-active::after {
  content: 'Editing — finish or cancel to navigate';
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: #3b82f6; color: #fff; padding: 6px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px;
  box-shadow: 0 6px 16px rgba(59,130,246,0.35); z-index: 40; pointer-events: none;
}

/* ── Record edit lock (assets/detail-edit-lock.js) ───────────────
   Editing the PARENT record's own form, as opposed to a child card. It locks
   navigation the same way drill-down-active does, but must NOT hide
   .wizard-actions: this pattern's Save/Cancel live IN that bar, where a child
   card's live inside the card. Keeping them separate is why no page needs a
   local override to un-hide its own Save button. */
body.record-editing .topbar-actions { display: none !important; }
body.record-editing .wizard-steps .step:not(.active) { opacity: 0.45; pointer-events: none; }
body.record-editing .wizard-steps .arrow { opacity: 0.45; }
body.record-editing .section-tabs .tab:not(.active) { opacity: 0.45; pointer-events: none; }
/* showStep() owns prev/next display, so they are disabled here rather than hidden. */
body.record-editing .wiz-btn-prev,
body.record-editing .wiz-btn-next { opacity: 0.45; pointer-events: none; }
/* Child cards stay readable but can't be opened on top of an open parent edit. */
body.record-editing .venue-card.view,
body.record-editing .contact-card.view,
body.record-editing .loc-card.view { pointer-events: none; cursor: default; }
body.record-editing::after {
  content: 'Editing — save or cancel to navigate';
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: #3b82f6; color: #fff; padding: 6px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px;
  box-shadow: 0 6px 16px rgba(59,130,246,0.35); z-index: 40; pointer-events: none;
}
/* ONE read-only field look, everywhere. A disabled control means "not editing",
   and it must read identically on every detail page — ep-event-detail locks via
   .dirty-watch, ep-spend-detail via a `disabled` attr in its own template, and
   both land here. Grey = read-only. Do not restyle this per page, and do not
   pick a new grey: this is --slate-50 with normal text, the existing look. */
input:disabled, select:disabled, textarea:disabled {
  background: var(--slate-50, #f8fafc);
  color: var(--slate-900, #0f172a);
  -webkit-text-fill-color: var(--slate-900, #0f172a);  /* Safari greys disabled text */
  border-color: var(--slate-200, #e2e8f0);
  opacity: 1;
  cursor: default;
}

/* Tabs in section header */
.section-tabs { padding: 0 !important; display: flex; justify-content: space-between; align-items: stretch; }
.section-tabs .tab-group { display: flex; gap: 0; }
.section-tabs .tab {
  background: transparent;
  border: none;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  user-select: none;
}
.section-tabs .tab:hover { color: var(--slate-900); background: var(--slate-50); }
.section-tabs .tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.section-tabs .section-actions { padding: 8px 14px; display: flex; align-items: center; }
.sub-panel { display: none; }
.sub-panel.active { display: block; }

/* Money input */
.money-input { position: relative; max-width: 200px; margin-left: auto; }
.money-input::before { content: '$'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--slate-500); font-size: 13px; pointer-events: none; z-index: 1; }
.money-input input { padding-left: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.money-input input:focus { text-align: left; }

/* On the public forms the money field is one field in a stack, not a figure in a
   money column — so it lines up with the fields above it instead of hugging the
   right edge (which read as a layout bug on a phone). */
.public-body .money-input { margin-left: 0; max-width: 100%; }
.public-body .money-input input { text-align: left; }

/* Files placeholder */
.files-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 18px; background: var(--slate-50); border: 1px dashed var(--slate-300); border-radius: 8px; color: var(--slate-500); font-size: 13px; }
.muted { color: var(--slate-500); font-size: 12px; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.wizard-toast .close { float: right; cursor: pointer; opacity: 0.7; margin-left: 12px; }

/* === sched-types visuals === */
.type-card {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  align-items: center;
  gap: 0 18px;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--slate-100);
  cursor: pointer;
  transition: background 0.08s;
  overflow: hidden;
}
.type-card:last-child { border-bottom: none; }
.type-card:hover { background: var(--slate-50); }
.type-card.inactive { opacity: 0.7; }
.type-stripe { align-self: stretch; border-radius: 3px; background: var(--slate-400); }
.type-body { padding-left: 2px; min-width: 0; }
.type-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.type-meta { font-size: 12.5px; color: var(--slate-500); line-height: 1.5; }
.type-actions { display: flex; align-items: center; gap: 6px; }

.kebab-wrap { position: relative; }
.kebab-menu {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(15,23,42,0.12);
  padding: 6px;
  z-index: 30;
  min-width: 180px;
}
.kebab-menu.open { display: block; }
.kebab-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none;
  padding: 7px 10px; font-size: 13px;
  color: var(--slate-900); cursor: pointer; border-radius: 4px;
  font-family: inherit;
}
.kebab-menu button:hover { background: var(--slate-100); }
.kebab-menu button.danger { color: var(--red); }
.kebab-menu .km-sep { height: 1px; background: var(--slate-100); margin: 4px 0; }

/* === sched-hosts visuals === */
.host-card { display:flex; align-items:center; padding:14px 18px; border-bottom:1px solid var(--slate-100); gap:14px; }
.host-card:last-child { border-bottom:none; }
.host-body { flex:1; min-width:0; }
.host-name { font-size:14px; font-weight:600; margin:0 0 3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.host-meta { font-size:12.5px; color:var(--slate-500); }

/* === sched-bookings visuals === */
.scope-toggle, .view-toggle { display:inline-flex; border:1px solid var(--slate-300); border-radius:6px; overflow:hidden; }
.scope-toggle a, .view-toggle a { padding:6px 13px; font-size:12.5px; color:var(--slate-700); text-decoration:none; cursor:pointer; }
.scope-toggle a.active { background:var(--navy); color:#fff; }
.view-toggle a.active { background:var(--slate-100); color:var(--slate-900); font-weight:600; }
.view-toggle { margin-left:8px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.stat { background:#fff; border:1px solid var(--slate-200); border-radius:8px; padding:14px; }
.stat-num { font-size:22px; font-weight:600; }
.stat-label { font-size:11.5px; color:var(--slate-500); text-transform:uppercase; letter-spacing:0.3px; margin-top:2px; }
.type-stripe-inline { display:inline-block; width:4px; height:14px; border-radius:2px; vertical-align:middle; margin-right:6px; }

/* === sched-diagnostic visuals === */
.trail-row { display:grid; grid-template-columns: 64px 1fr auto; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--slate-100); font-size:13px; }
.trail-row:last-child { border-bottom:none; }
.trail-rank { font-family:ui-monospace,monospace; color:var(--slate-500); font-size:12px; }
.trail-host { font-weight:600; }
.trail-detail { font-size:11.5px; color:var(--slate-500); margin-top:2px; }

/* === ep-calendar visuals === */
.cal-layout { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.cal-side { background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; padding: 14px; position: sticky; top: 70px; }
.cal-side h4 { margin: 0 0 10px; font-size: 11px; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.cal-side-row { display: flex; align-items: center; padding: 5px 0; gap: 8px; font-size: 13px; cursor: pointer; }
.cal-side-row input[type=checkbox] { margin: 0; cursor: pointer; }
.cal-side-row .cdot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.cal-side-row .cname { flex: 1; }
.cal-side-row .ccount { color: var(--slate-500); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }

.cal-main { background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; overflow: hidden; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--slate-200); }
.cal-bar .nav-group { display: flex; align-items: center; gap: 6px; }
.cal-bar .nav-btn { border: 1px solid var(--slate-300); background: #fff; padding: 4px 10px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--slate-700); font-family: inherit; }
.cal-bar .nav-btn:hover { background: var(--slate-50); }
.cal-title { font-size: 16px; font-weight: 600; }

.cal-weekhead { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.cal-weekhead div { padding: 8px 10px; font-size: 11px; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; text-align: left; border-left: 1px solid var(--slate-200); }
.cal-weekhead div:first-child { border-left: none; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { border-left: 1px solid var(--slate-100); border-top: 1px solid var(--slate-100); padding: 6px 6px 8px; min-height: 100px; }
.cal-cell:nth-child(7n+1) { border-left: none; }
.cal-cell .day { font-size: 12px; color: var(--slate-700); font-weight: 500; margin-bottom: 4px; }
.cal-cell.outside { background: var(--slate-50); }
.cal-cell.outside .day { color: var(--slate-400); }
.cal-cell.today .day { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--navy); color: #fff; border-radius: 50%; font-weight: 700; }

.event-chip { display: block; padding: 2px 6px; font-size: 11px; line-height: 1.35; margin-bottom: 2px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; cursor: pointer; }
.event-chip.co-wwyt  { color: #fff; background: #003366; }
.event-chip.co-club  { color: #fff; background: #669944; }
.event-chip.co-ypv   { color: #fff; background: #cc6600; }
.event-chip.co-other { color: #fff; background: #94a3b8; }
.event-chip:hover { opacity: 0.85; }
.event-chip[data-co].hidden { display: none; }

/* === Responsive breakpoints ============================================
   Three tiers:
     > 1280px  : default layout (sidebar fixed, content centered)
     900-1280  : sidebar fixed, tables get .table-wrap horizontal scroll
     < 900px   : sidebar collapses behind hamburger, content full-width
   ===================================================================== */
.sidebar-toggle {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 50;
  background: #fff; border: 1px solid var(--slate-300); border-radius: 6px;
  padding: 6px 10px; font-size: 18px; line-height: 1; cursor: pointer;
}
.sidebar-toggle:hover { background: var(--slate-100); }
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 39;
}

@media (max-width: 1280px) {
  .table { min-width: 900px; }
}

@media (max-width: 900px) {
  .sidebar-toggle { display: block; }
  .layout > .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
    transform: translateX(-100%); transition: transform 180ms ease-out;
    width: 240px; max-width: 80vw;
  }
  .layout.sidebar-open > .sidebar { transform: translateX(0); box-shadow: 2px 0 16px rgba(0,0,0,0.2); }
  .layout.sidebar-open > .sidebar-backdrop { display: block; }
  .layout > .main { margin-left: 0; padding-top: 60px; }
  .page { padding-left: 14px; padding-right: 14px; }
  .table-toolbar { flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr !important; }
}

/* lookup-admin: click-to-edit cells for the small admin/EP lookup tables */
.lookup-table td { vertical-align: middle; }
.lookup-table td.cell-editable { cursor: text; }
.lookup-table td.cell-editable:hover { background: var(--slate-50, #f8fafc); }
.lookup-table td.cell-editable:focus { outline: 2px solid #2563eb; outline-offset: -2px; background: #eff6ff; }
.lookup-table td.editing { padding: 4px 8px; background: #eff6ff; }
.lookup-table .cell-input {
  width: 100%; padding: 6px 8px; border: 1.5px solid #2563eb; border-radius: 4px;
  font-size: 13px; font-family: inherit; background: #fff;
}
.lookup-table .cell-bool { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.lookup-table .cell-bool-input { margin: 0; cursor: pointer; }
.lookup-table .cell-bool-pill { font-size: 11.5px; font-weight: 600; color: var(--slate-600); }
.lookup-table .cell-bool-input:checked + .cell-bool-pill { color: #15803d; }
.lookup-table .btn-row-del {
  background: none; border: none; color: var(--slate-400); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 8px; border-radius: 4px;
}
.lookup-table .btn-row-del:hover { background: #fef2f2; color: #dc2626; }
.lookup-table tr.row-pending { background: #fffbeb; }
.lookup-table tr.row-pending td.muted { color: var(--slate-300); font-style: italic; }

/* Wizard action-bar color language: Discard = red (btn-danger), Duplicate =
   green outline, Next = soft green, Save = darker green. Scoped under
   .wizard-actions so they beat .btn-primary (which setDirty toggles on Save). */
.wizard-actions .wiz-btn-duplicate { background: #fff; border-color: #16a34a; color: #15803d; }
.wizard-actions .wiz-btn-duplicate:hover { background: #f0fdf4; color: #15803d; }
.wizard-actions .wiz-btn-next { background: #d1fae5; border-color: #a7f3d0; color: #065f46; }
.wizard-actions .wiz-btn-next:hover { background: #a7f3d0; color: #065f46; }
/* The same green Save in a page's top bar (ep-health Apply Ticked Fixes, 10/08/2026). Right side, never left. */
.wizard-actions .wiz-btn-save, .topbar-actions .wiz-btn-save { background: #16a34a; border-color: #15803d; color: #fff; }
.wizard-actions .wiz-btn-save:hover, .topbar-actions .wiz-btn-save:hover { background: #15803d; border-color: #166534; color: #fff; }


/* === Page Links call-out (trip <-> event <-> community cross-links) ======
   Slim signpost box. Originated inline on ep-trip-detail; promoted here so
   ep-event-detail (and anything else) can point at a related record. */
.page-links { background: var(--slate-50, #f8fafc); border: 1px solid var(--slate-200, #e2e8f0); border-radius: 8px; padding: 12px 14px; }
.page-links .pl-title { font-size: 13px; font-weight: 650; color: var(--slate-800, #1e293b); margin-bottom: 8px; }
.page-links .pl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.page-links .pl-note { font-size: 11.5px; color: var(--slate-500, #64748b); margin-top: 8px; line-height: 1.45; }
.page-links .pl-empty { font-size: 12.5px; color: var(--slate-500, #64748b); line-height: 1.45; }

/* === Trip call-out (event header -> its trip) ===========================
   Sits in .page-header opposite the title. Amber on purpose: the slate
   boxes on these pages all read as sections, and this has to read as a
   signpost. The whole block is the link. */
.trip-callout { display: flex; align-items: center; gap: 14px; max-width: 470px; padding: 10px 14px; background: var(--amber-light); border: 1px solid #fcd34d; border-left: 4px solid var(--amber); border-radius: 8px; text-decoration: none; }
.trip-callout:hover { background: #fde68a; text-decoration: none; }
.trip-callout .tc-body { min-width: 0; }
.trip-callout .tc-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #92400e; }
.trip-callout .tc-name { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 650; color: var(--slate-900); }
.trip-callout .tc-note { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: #92400e; }
.trip-callout .tc-cta { flex: none; padding: 7px 12px; background: var(--amber); border-radius: 5px; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ============================================================
   NO PILLS (Mia 09/27/2026: "get rid of the pills - look at our UX rules").
   Every .badge on every page renders as a plain word: no colored background,
   no rounded capsule. Only a red warning keeps its red text so a problem
   (e.g. Missing Receipt) still reads as a problem. Kept LAST so it wins over
   every badge colour above and any page-level badge style.
   ============================================================ */
.badge, .badge[class*="badge-"], .yd-tag, .yd-tag[class*="yd-tag-"], .lp-tile .t-badge {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; color: inherit !important;
  font-weight: inherit; font-size: inherit; letter-spacing: 0;
}
.badge.badge-red, .yd-tag.yd-tag-red { color: var(--red) !important; font-weight: 600; }