/* ==========================================================================
   HGV Rebooking — Gentelella-style theme (legacy platform console)
   AND Lovable-mockup tokens (Phase 5 — three-role /app/ UI).

   Visual language for the platform console (/admin-dash/) follows
   ColorlibHQ/gentelella. The /app/ three-role UI uses the Hilton-brand
   palette ported from the Lovable mockup. Both stay in one stylesheet
   so we don't ship two themes.
   ========================================================================== */

/* Hide Alpine-controlled elements until Alpine initialises (prevents a
   flash of expanded content on x-show/x-cloak blocks that default closed). */
[x-cloak] { display: none !important; }

:root {
  /* --- Gentelella legacy console (existing — don't change) --- */
  /* Sidebar */
  --gen-sidebar:        #2A3F54;
  --gen-sidebar-hover:  #1abb9c;
  --gen-sidebar-active: #1ABB9C;
  --gen-sidebar-text:   #ECF0F1;
  --gen-sidebar-muted:  #B6BCC4;
  --gen-sidebar-section:#73879C;

  /* Brand / accents */
  --gen-brand:    #1ABB9C;
  --gen-success:  #1ABB9C;
  --gen-info:     #3498DB;
  --gen-warning:  #F0AD4E;
  --gen-danger:   #E74C3C;
  --gen-purple:   #9B59B6;

  /* Surface */
  --gen-bg:        #F7F7F7;
  --gen-card-bg:   #FFFFFF;
  --gen-border:    #E6E9ED;
  --gen-border-2:  #DBDFE4;

  /* Text */
  --gen-text:      #333333;
  --gen-muted:     #73879C;
  --gen-heading:   #5A738E;

  /* --- /app/ three-role UI tokens (ported from Lovable index.css) --- */
  /* Brand greens */
  --bcg-green:    hsl(159 69% 29%);   /* #177B57 — primary brand */
  --bcg-green-d:  hsl(159 71% 21%);   /* #0F5C40 — darker accent */
  --accent:       hsl(168 100% 33%);  /* #00A887 — CTA / approve */
  --accent-soft:  hsl(162 47% 93%);   /* #E6F6F1 — hover / selected bg */

  /* Ink + surfaces */
  --ink:    hsl(0 0% 10%);            /* #1A1A1A — primary text */
  --ink-2:  hsl(158 9% 39%);          /* #5A6B66 — secondary text */
  --ink-3:  hsl(155 5% 57%);          /* #8A9690 — muted text */
  --line:   hsl(160 7% 89%);          /* #E1E6E4 — borders */
  --surface:hsl(0 0% 100%);           /* white */

  /* Status colors */
  --neg:        hsl(6 64% 46%);       /* #C0392B — destructive */
  --neg-soft:   hsl(8 80% 93%);
  --amber:      hsl(33 76% 50%);
  --amber-soft: hsl(40 87% 92%);
  --violet:     hsl(247 75% 63%);
  --violet-soft:hsl(252 86% 95%);
  --blue:       hsl(210 65% 50%);     /* #2D7DD2 — exec button */
  --blue-soft:  hsl(210 78% 94%);
}

/* --- /app/ shell utility classes (used by the three-role templates) --- */
.app-shell { font-family: "Segoe UI", Inter, Arial, sans-serif; color: var(--ink); }

/* Alpine x-show + grid/flex: on show, Alpine calls
   `el.style.removeProperty('display')`, which strips an inline
   `display:grid|flex` and reverts the element to `display:block`, collapsing
   the layout. Supplying `display` via a class survives that removal (Alpine
   only ever touches the inline `display`); other inline props
   (grid-template-columns, gap, align-items, …) stay inline. Apply these to
   any element that combines `x-show` with grid/flex. */
.app-grid { display: grid; }
.app-flex { display: flex; }
.app-card  { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.app-kpi   { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; position: relative; overflow: hidden; }
.app-kpi-accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.app-kpi-amber::before  { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber); }
.app-kpi-violet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--violet); }
.app-kpi-blue::before   { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--blue); }
.app-kpi-neg::before    { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--neg); }
.app-kpi-title { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.app-kpi-main  { font-size: 28px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.app-kpi-sub   { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
.app-kpi-strong { color: var(--bcg-green-d); font-weight: 600; }

/* Buttons share a snappy press/hover feel: colour eases, the button lifts
   on hover and presses down on :active, mirroring Lovable's transition-colors
   plus a tactile cue. */
.app-btn-primary, .app-btn-accent, .app-btn-blue, .app-btn-neg, .app-btn-ghost {
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.app-btn-primary:active, .app-btn-accent:active, .app-btn-blue:active,
.app-btn-neg:active, .app-btn-ghost:active { transform: translateY(1px); }
.app-btn-primary:disabled, .app-btn-accent:disabled { opacity: .7; cursor: default; transform: none; }

.app-btn-primary { background: var(--bcg-green); color: white; padding: 8px 14px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.app-btn-primary:hover:not(:disabled) { background: var(--bcg-green-d); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.app-btn-accent  { background: var(--accent); color: white; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 11.5px; }
.app-btn-accent:hover:not(:disabled) { background: var(--bcg-green); }
.app-btn-blue    { background: var(--blue); color: white; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 11.5px; }
.app-btn-neg     { background: var(--neg-soft); color: var(--neg); padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 11.5px; }
.app-btn-neg:hover { background: var(--neg); color: white; }
.app-btn-ghost   { background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 11.5px; }
.app-btn-ghost:hover { background: var(--line); }

/* Card/element entrance — soft fade + rise, mirrors Lovable's animate-fade-in. */
@keyframes app-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.app-fade-in { animation: app-fade-in .28s ease-out both; }

/* Run-optimization step checklist (mirrors Lovable ScanProgress). Rows move
   from dim → active → done as the optimizer works. */
.app-scan-step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  opacity: .55; transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.app-scan-step.is-active { opacity: 1; background: var(--accent-soft); border-color: var(--accent); }
.app-scan-step.is-done   { opacity: 1; background: var(--accent-soft); border-color: var(--accent); }
.app-scan-dot {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px;
}
.app-scan-step.is-done .app-scan-dot { background: var(--bcg-green); color: #fff; }

/* Approval-queue view toggle (Lovable: bordered pill, brand fill when active) */
.app-view-btn { background: #fff; border: 1px solid var(--line); color: var(--ink); padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 11.5px; }
.app-view-btn:hover { background: var(--surface); }
.app-view-btn.is-active { background: var(--bcg-green); border-color: var(--bcg-green); color: #fff; }

.app-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.app-pill-accent { background: var(--accent-soft); color: var(--bcg-green-d); }
.app-pill-amber  { background: var(--amber-soft); color: var(--amber); }
.app-pill-blue   { background: var(--blue-soft); color: var(--blue); }
.app-pill-neg    { background: var(--neg-soft); color: var(--neg); }

/* Action cell: keep row-action buttons side-by-side (Lovable: flex gap-1.5),
   never wrapping to a second line when the column is squeezed. */
.app-row-action { white-space: nowrap; }
.app-row-action button { vertical-align: middle; }
.app-row-action button + button { margin-left: 6px; }

/* Executor-queue action column — fixed-slot grid.
   The executor queue renders a VARIABLE set of mutating actions per row: Hold /
   Unanswered only surface inside the 60-day arrival window, while Execute /
   Execute w/ mod / Unable to execute are always present. Flowing them
   left-to-right (the default `.app-row-action`) leaves the column ragged —
   nothing lines up vertically across rows. Instead, pin every action to a
   dedicated grid track with a fixed width, in a stable left-to-right order
   [Execute · Execute w/ mod · Unable to execute · Already moved · Unqualified ·
   Hold · Unanswered]. The two
   conditional call-flow actions (Hold, Unanswered) sit at the END, so a row
   that omits them just trims the trailing tracks and the always-present actions
   stay locked in the same horizontal position on every row. Fixed track widths
   (buttons carry static labels at a fixed font size, so their rendered width is
   deterministic) are what make the alignment hold ACROSS rows — grid track
   sizing is per-container, so `auto`/`max-content` would resize per row and
   defeat the purpose. The Script (view) action is NOT part of this grid — it
   rides in the Call-window column next to the "Needs call" pill (the executor
   phones the guest inside the 60-day window, so the script sits beside the
   trigger). Scoped to its own class so the approver queue (which shares
   `.app-row-action`) is untouched. */
.app-rep-actions {
  display: grid;
  grid-template-columns:
    [exec]    58px
    [execmod] 92px
    [reject]  104px
    [moved]   164px
    [unqual]  82px
    [hold]    46px
    [unans]   84px;
  gap: 4px;
  justify-content: end;
  align-items: center;
}
.app-rep-actions > button {
  width: 100%;
  margin-left: 0;              /* override the flow-mode `button + button` rule */
  white-space: nowrap;
  font-size: 10.5px;
  padding: 2px 4px;
}
.app-rep-actions .slot-exec    { grid-column: exec; }
.app-rep-actions .slot-execmod { grid-column: execmod; }
.app-rep-actions .slot-reject  { grid-column: reject; }
.app-rep-actions .slot-hold    { grid-column: hold; }
.app-rep-actions .slot-unans   { grid-column: unans; }

/* The executor tables (queue / on-hold / unanswered) are the widest in the app
   (12-13 columns + an action group), so they're the ones most prone to
   horizontal scroll. Tighten their cell padding (10px → 6px each side reclaims
   ~8px × columns ≈ 100px) so a whole row fits on screen without a scrollbar on
   a standard laptop. Applied to the view-only executor tables (executed,
   rejected) too so every table on the rep page renders at one consistent row
   density — a page that mixes densities across sibling tables reads as jarring.
   Scoped by sort-key so the other `.app-table-sticky-action` tables (approver,
   viewer) keep their roomier default padding. */
.app-table[data-sort-key="rep-queue"] thead th,
.app-table[data-sort-key="rep-queue"] tbody td,
.app-table[data-sort-key="rep-on-hold"] thead th,
.app-table[data-sort-key="rep-on-hold"] tbody td,
.app-table[data-sort-key="rep-unanswered"] thead th,
.app-table[data-sort-key="rep-unanswered"] tbody td,
.app-table[data-sort-key="rep-executed"] thead th,
.app-table[data-sort-key="rep-executed"] tbody td,
.app-table[data-sort-key="rep-rejected"] thead th,
.app-table[data-sort-key="rep-rejected"] tbody td {
  padding: 7px 6px;
}

/* Lead-ID search shared by the four executor booking tables. The toolbar is a
   quiet white/green control between the section heading and the dense table:
   high contrast, keyboard-visible, and compact enough for a laptop queue. */
.app-table-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.app-table-search-label {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.app-table-search-field {
  position: relative;
  width: min(100%, 300px);
}
.app-table-search-field > i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--bcg-green);
  pointer-events: none;
}
.app-table-search-input {
  width: 100%;
  height: 32px;
  padding: 6px 30px 6px 30px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.app-table-search-input::placeholder { color: var(--ink-3); }
.app-table-search-input:hover { border-color: var(--ink-3); }
.app-table-search-input:focus {
  border-color: var(--bcg-green);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.app-table-search-status {
  min-width: 70px;
  font-size: 11px;
  color: var(--ink-2);
}
.app-search-hide { display: none !important; }
.app-search-empty td {
  padding: 24px 16px !important;
  text-align: center;
  color: var(--ink-2);
  background: var(--surface);
}

@media (max-width: 640px) {
  .app-table-searchbar { align-items: flex-start; flex-wrap: wrap; }
  .app-table-search-label { width: 100%; }
  .app-table-search-field { width: 100%; }
  .app-table-search-status { min-width: 0; }
}

/* Right-aligned compact action row for the executor tables whose button set is
   uniform across every row (on-hold, unanswered) — no conditional buttons, so
   a simple flex aligns them across rows without needing the fixed-slot grid the
   main queue uses. Shares the compact button sizing + right-hug with
   `.app-rep-actions` so all three executor action columns look identical. */
.app-rep-actions-flow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.app-rep-actions-flow > button {
  margin-left: 0;              /* override the flow-mode `button + button` rule */
  white-space: nowrap;
  font-size: 10.5px;
  padding: 2px 4px;
}

/* Inline Script button beside the "Needs call" pill (Call-window column on the
   main queue, Dates cell on on-hold) — the executor phones the guest inside the
   60-day window, so the script sits next to the pill that flags the call.
   Deliberately a FILLED amber call-to-action (not a subtle ghost button): for a
   row that needs a call, opening the script is the executor's first step, so it
   has to read as an obvious, tappable action — amber ties it visually to the
   amber "Needs call" pill it sits next to. Kept compact so the pill + button
   pair stays on one line. */
.app-call-script-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  color: white;
  background: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 6px;
  cursor: pointer;
}
.app-call-script-btn:hover { filter: brightness(0.94); box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.app-call-script-btn:active { transform: translateY(1px); }

/* Sticky action column: on a queue table with many data columns (dates, pax,
   room, cost, VPG, status...) the Action buttons land off the right edge of
   the viewport, so an operator has to scroll horizontally every single time
   they act on a row. Pin the Action header/cell to the right edge of the
   `overflow-x: auto` wrapper instead, so it's always reachable regardless of
   scroll position. Opt-in via `.app-table-sticky-action` on the `<table>`;
   relies on the existing `[data-no-sort]` (Action header) / `.app-row-action`
   (Action cell) markers already used on every Action column, so no other
   markup changes are needed. Box-shadow (not border) draws the divider,
   because `border-collapse: collapse` swallows a plain border on a sticky
   cell; the shadow only appears once the row has scrolled under the pin. */
.app-table-sticky-action thead th[data-no-sort]:last-child,
.app-table-sticky-action tbody td.app-row-action:last-child {
  position: sticky;
  right: 0;
  background: var(--surface);
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25);
}
.app-table-sticky-action thead th[data-no-sort]:last-child { z-index: 2; }
.app-table-sticky-action tbody td.app-row-action:last-child { z-index: 1; }

/* Explicit row selection for the platform-only bulk release on the executor
   panel. The narrow first column keeps the operational table compact; the green
   tint makes exceptions easy to spot after Select all filtered and before the
   destructive confirmation. The column is omitted entirely for anyone without
   the capability, so there is no disabled state to style. */
.app-table th.app-row-select,
.app-table td.app-row-select {
  width: 38px;
  min-width: 38px;
  padding-left: 10px;
  padding-right: 4px;
  text-align: center;
}
.app-row-select input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--bcg-green);
  cursor: pointer;
}
.app-table tbody tr.app-row-selected > td { background: var(--accent-soft); }
.app-table-sticky-action tbody tr.app-row-selected > td.app-row-action:last-child {
  background: var(--accent-soft);
}

/* ───────────── Admin sidebar accordion (Phase 5a + 5e) ───────────── */
.app-side-section { border-bottom: 1px solid var(--line); }
.app-side-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Title fills the row so the badge + chevron stay grouped on the right
   (mirrors Lovable's flex-1 title). Without this the space-between layout
   strands the badge in the middle. */
.app-side-section > summary > span:first-child {
  flex: 1;
  min-width: 0;
}
.app-side-section > summary::-webkit-details-marker { display: none; }
.app-side-section > summary::after {
  /* Chevron rotates on open */
  content: "›";
  font-size: 16px;
  color: var(--ink-3);
  margin-left: 2px;
  flex: none;
  transition: transform .15s;
}
.app-side-section[open] > summary::after { transform: rotate(90deg); }
.app-side-section .app-side-badge {
  flex: none;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Numbered circle inside the summary title. */
.app-side-num {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--bcg-green-d);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 22px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Must-have guardrails (locked, read-only) — mirrors Lovable's panel.
   Self-contained so it doesn't inherit the green accent of .app-side-num
   or depend on --surface (which is pure white and would render the chips
   invisible). The lock sits to the right of the title, grouped with the
   chevron, exactly like the reference. */
.app-guardrail-head {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.app-guardrail-lock { flex: none; font-size: 11px; color: var(--ink-3); }
.app-guardrail-list { opacity: 0.6; user-select: none; }
.app-guardrail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
}
.app-guardrail-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--line);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
}
.app-guardrail-title { flex: 1; min-width: 0; color: var(--ink-2); }
.app-guardrail-val {
  flex: none;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--line);
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Section divider headings between accordion groups */
.app-side-heading {
  padding: 14px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* "Coming soon" overlay wrap — paints a soft scrim over disabled
   controls so they're visible but un-interactive. Used on the 4
   constraint accordions that don't have backend wiring yet (Phase 5e). */
.app-coming-soon {
  position: relative;
  padding: 4px 14px 14px;
  pointer-events: none;
  user-select: none;
}
.app-coming-soon > * { opacity: 0.55; }
.app-coming-soon::before {
  /* Diagonal hatching scrim — visible but lets the controls show through. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0) 8px,
      rgba(0,0,0,0.025) 8px,
      rgba(0,0,0,0.025) 9px);
  pointer-events: none;
}
.app-coming-soon-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.app-table { width: 100%; font-size: 11.5px; border-collapse: collapse; }
.app-table thead th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.app-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.app-table tbody tr:hover { background: var(--accent-soft); }
/* Numeric columns: center the data AND their header so the two line up as a
   tidy column (previously the header inherited the left-aligned `thead th`
   rule while the cell was right-aligned, so header and numbers didn't align).
   tabular-nums keeps digit widths equal so centered figures still read cleanly. */
.app-num { text-align: center; font-variant-numeric: tabular-nums; }
.app-table thead th.app-num { text-align: center; }

/* Off-page rows for the client-side paginator (core/static/core/js/app_tables.js).
   A CLASS (not inline style) with !important so the paginator can hide a row
   without fighting an external inline `display` controller like Alpine x-show. */
.app-page-hide { display: none !important; }

/* Sticky header for tables inside a scroll container (max-height + overflow).
   `border-collapse: collapse` makes the thead's bottom border belong to the
   table, so it scrolls away with the body and (in some Chromium builds) the
   sticky offset is ignored. Pin each <th> individually and draw the underline
   with an inset box-shadow so it travels with the cell. The opaque background
   keeps body rows from showing through as they scroll under the header. */
.app-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 var(--line);
}

/* ───────────── Call-script modal (executor queue) ─────────────
   Two-column reading surface: the pitch ("Say this") sits beside the
   property comparison/description tables so the executor never scrolls past
   one to read the other. Each column scrolls independently inside a
   fixed-height modal (set in app/rep.html), so the pitch stays put while the
   reference is scanned. Rendered by app/_call_script.html + views._render_script_columns. */
.script-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 20px 9px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
/* Booking facts repeated from the queue row so the executor never leaves the
   modal to re-check a detail mid-call. Wraps to as many rows as needed, never
   scrolls (flex-shrink:0). */
.script-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 20px 11px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.script-fact { display: flex; flex-direction: column; gap: 1px; }
.script-fact-l { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.script-fact-v { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.script-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.script-pill-from { background: var(--amber-soft); color: var(--amber); }
.script-pill-to   { background: var(--accent-soft); color: var(--bcg-green); }
.script-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px 1fr; }
.script-pitch { padding: 16px 18px; overflow-y: auto; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--accent-soft) 0%, rgba(230,246,241,0) 120px); }
.script-ref { padding: 16px 18px; overflow-y: auto; }
.script-sec-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-2); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.script-sec-h::before { content: ""; width: 3px; height: 12px; background: var(--accent); border-radius: 2px; }
.script-ref .script-sec-h { margin-top: 4px; }
@media (max-width: 720px) { .script-cols { grid-template-columns: 1fr; }
  .script-pitch { border-right: 0; border-bottom: 1px solid var(--line); } }

.app-tabs { display: inline-flex; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; gap: 4px; }
.app-tab { padding: 6px 14px; border: 0; background: transparent; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .15s; }
.app-tab:hover { color: var(--ink); }
.app-tab.is-active { background: var(--bcg-green); color: white; }

.app-banner { padding: 10px 14px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 12.5px; }
/* Banner variants mirror Lovable's <Banner variant="scn|exe">: scn = cream
   amber (scenario planning), exe = soft green (execution). */
.app-banner-scn { background: var(--amber-soft); border-color: hsl(40 60% 82%); color: hsl(33 60% 30%); }
.app-banner-exe { background: var(--accent-soft); border-color: var(--line); color: var(--bcg-green-d); }

/* Topbar uses the resort photo at low opacity beneath a green gradient
   wash — ported from the Lovable mockup's TopBar.tsx. The image URL is
   injected from the template via the --topbar-bg custom property so
   {% static %} resolution lives in templates, not this stylesheet. */
.app-topbar {
  position: relative;
  /* No overflow:hidden — the account dropdown is anchored below the header
     (top: calc(100% + 8px)) and must escape the header box. The decorative
     ::before image and ::after gradient are inset:0 absolutes, so they stay
     bounded to the header without clipping. z-index lifts the whole header
     (and its dropdown) above the panels in <main>, which create their own
     stacking contexts and would otherwise paint over the menu. */
  z-index: 30;
  background: hsl(159 71% 21%);  /* --bcg-green-d fallback if image fails */
  color: white;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.app-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--topbar-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  z-index: 0;
}
.app-topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    hsl(159 71% 21%) 0%,
    hsl(159 71% 21% / 0.92) 38%,
    hsl(159 69% 29% / 0.78) 70%,
    hsl(159 69% 29% / 0.55) 100%);
  z-index: 0;
}
/* Content sits above the image + gradient. */
.app-topbar > * { position: relative; z-index: 1; }
/* Subtle gold hairline at the bottom (Lovable detail). */
.app-topbar .app-topbar-hairline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(45 70% 65% / 0.9), transparent);
  z-index: 1;
}
/* The shared _brand_mark.html partial ships the H mark in Gentelella
   teal (#1ABB9C) which is what the platform-console sidebar wants.
   On the /app/ green topbar we want it white instead — recolor via
   filter so we don't have to ship a second PNG. */
.app-topbar img { filter: brightness(0) invert(1); }

.app-topbar .app-role-toggle { display: inline-flex; background: rgba(255,255,255,0.12); border-radius: 999px; padding: 3px; gap: 2px; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2); }
.app-topbar .app-role-toggle a { padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; color: white; opacity: 0.85; transition: background .15s; }
.app-topbar .app-role-toggle a:hover { background: rgba(255,255,255,0.1); opacity: 1; }
.app-topbar .app-role-toggle a.is-active { background: white; color: var(--bcg-green-d); opacity: 1; }

html, body {
  background: var(--gen-bg);
  color: var(--gen-text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
}

body { -webkit-font-smoothing: antialiased; }

a { color: #5A738E; }
a:hover { color: var(--gen-brand); }

/* ---------------------------------- Sidebar ---------------------------------- */
.gen-sidebar {
  background: var(--gen-sidebar);
  color: var(--gen-sidebar-text);
  width: 230px;
  height: 100vh;          /* exact viewport height — footer always visible */
  position: sticky; top: 0;
  align-self: flex-start;  /* prevent flex parent from stretching it */
  flex-shrink: 0;
  display: flex; flex-direction: column;
  transition: width 200ms ease;
  overflow: hidden;        /* hide truncated labels when collapsed */
  z-index: 30;
}

.gen-sidebar a { color: var(--gen-sidebar-text); text-decoration: none; }

.gen-sidebar .gen-logo {
  height: 64px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #36495D;
  color: #fff;
}
.gen-sidebar .gen-logo img { transition: opacity 160ms ease; }
.gen-sidebar .gen-logo:hover img { opacity: 0.85; }

.gen-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #36495D;
}
.gen-profile-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #1ABB9C, #169f86);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.gen-profile-text { line-height: 1.25; }
.gen-profile-text .small { display:block; font-size: 11px; color: var(--gen-sidebar-muted); }
.gen-profile-text .name { font-size: 13px; font-weight: 600; }

.gen-section-title {
  padding: 12px 18px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gen-sidebar-section);
  border-top: 1px solid #36495D;
}

.gen-nav { padding: 6px 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gen-nav a.gen-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--gen-sidebar-text);
  border-left: 3px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}
.gen-nav a.gen-nav-item i { width: 16px; text-align: center; opacity: 0.85; }
.gen-nav a.gen-nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.gen-nav a.gen-nav-item.active {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-left-color: var(--gen-brand);
}
.gen-nav a.gen-nav-item.active i { color: var(--gen-brand); opacity: 1; }

/* ----- Collapsible nav dropdown (uses <details>/<summary>) ----- */
.gen-nav-dropdown { padding: 0; }
.gen-nav-dropdown > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--gen-sidebar-text);
  border-left: 3px solid transparent;
  transition: background 120ms ease, color 120ms ease;
  user-select: none;
}
.gen-nav-dropdown > summary::-webkit-details-marker { display: none; }
.gen-nav-dropdown > summary i.gen-nav-chevron {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.6;
  transition: transform 160ms ease;
}
.gen-nav-dropdown[open] > summary i.gen-nav-chevron { transform: rotate(180deg); }
.gen-nav-dropdown > summary > i:first-child { width: 16px; text-align: center; opacity: 0.85; }
.gen-nav-dropdown > summary:hover { background: rgba(255,255,255,0.04); color: #fff; }
.gen-nav-dropdown-items a.gen-nav-item {
  padding-left: 44px;       /* visual indent under the parent */
  font-size: 12.5px;
}
.gen-nav-dropdown-items a.gen-nav-item i { font-size: 12px; }
/* When sidebar is collapsed, the dropdown collapses to a single icon and the
   children hide (no room for them). Hover-tooltip still shows the parent label. */
.gen-sidebar.is-collapsed .gen-nav-dropdown > summary {
  justify-content: center;
  gap: 0;
  padding: 12px 0;
  position: relative;
}
.gen-sidebar.is-collapsed .gen-nav-dropdown > summary > span,
.gen-sidebar.is-collapsed .gen-nav-dropdown > summary > i.gen-nav-chevron { display: none; }
.gen-sidebar.is-collapsed .gen-nav-dropdown[open] > .gen-nav-dropdown-items { display: none; }
.gen-sidebar.is-collapsed .gen-nav-dropdown > summary::after {
  content: attr(data-label);
  position: absolute;
  left: 100%; top: 50%;
  transform: translateY(-50%);
  background: var(--gen-sidebar);
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 3px;
  white-space: nowrap;
  margin-left: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 50;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4);
}
.gen-sidebar.is-collapsed .gen-nav-dropdown > summary:hover::after { opacity: 1; }

/* Deployed-commit stamp shown above the footer icons. Value comes from
   the GIT_COMMIT env var (set by the deploy step via `eb setenv`);
   falls back to "dev" locally. */
.gen-version-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 10.5px;
  color: var(--gen-sidebar-muted);
  border-top: 1px solid #36495D;
  background: rgba(0,0,0,0.08);
  flex-shrink: 0;
  user-select: text;
}
.gen-version-stamp code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--gen-sidebar-text);
  letter-spacing: 0.03em;
}
.gen-version-stamp i { opacity: 0.7; font-size: 11px; }
.gen-sidebar.is-collapsed .gen-version-stamp { padding: 6px 0; }
.gen-sidebar.is-collapsed .gen-version-stamp code { display: none; }

.gen-sidebar-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #36495D;
  background: rgba(0,0,0,0.12);
  flex-shrink: 0;            /* never collapse — always visible */
}
.gen-sidebar-footer button,
.gen-sidebar-footer a {
  background: none; border: 0;
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gen-sidebar-muted); cursor: pointer;
  border-right: 1px solid #36495D;
  font-size: 14px;
  transition: background 120ms ease, color 120ms ease;
}
.gen-sidebar-footer button:last-child,
.gen-sidebar-footer a:last-child { border-right: 0; }
.gen-sidebar-footer button:hover,
.gen-sidebar-footer a:hover { background: rgba(255,255,255,0.06); color: var(--gen-brand); }
.gen-sidebar-footer button:focus-visible,
.gen-sidebar-footer a:focus-visible { outline: 2px solid var(--gen-brand); outline-offset: -2px; }

/* ----- Collapsed (mini) state ----- */
.gen-sidebar.is-collapsed { width: 64px; }
.gen-sidebar.is-collapsed .gen-logo { padding: 0; justify-content: center; gap: 0; }
.gen-sidebar.is-collapsed .gen-logo span { display: none; }
.gen-sidebar.is-collapsed .gen-logo img { height: 28px; }
.gen-sidebar.is-collapsed .gen-profile { padding: 14px 0; justify-content: center; }
.gen-sidebar.is-collapsed .gen-profile-text { display: none; }
.gen-sidebar.is-collapsed .gen-section-title { padding: 12px 0; text-align: center; font-size: 9px; letter-spacing: 0.04em; }
.gen-sidebar.is-collapsed .gen-section-title { color: transparent; }
.gen-sidebar.is-collapsed .gen-section-title::before { content: "•••"; color: var(--gen-sidebar-section); }
.gen-sidebar.is-collapsed .gen-nav-item {
  justify-content: center;
  gap: 0;
  padding: 12px 0;
}
.gen-sidebar.is-collapsed .gen-nav-item span { display: none; }
.gen-sidebar.is-collapsed .gen-nav-item i {
  font-size: 16px;
  width: auto;
}

/* When collapsed, lay the footer icons in a 2x2 grid for usable touch targets */
.gen-sidebar.is-collapsed .gen-sidebar-footer {
  grid-template-columns: repeat(2, 1fr);
}
.gen-sidebar.is-collapsed .gen-sidebar-footer button,
.gen-sidebar.is-collapsed .gen-sidebar-footer a {
  height: 38px;
  border-right: 1px solid #36495D;
}
.gen-sidebar.is-collapsed .gen-sidebar-footer > *:nth-child(2n) { border-right: 0; }
.gen-sidebar.is-collapsed .gen-sidebar-footer > *:nth-child(-n+2) { border-bottom: 1px solid #36495D; }

/* Tooltip when collapsed: show the label on hover via the title attribute (browser default).
   Add a tiny inline label box for nav items too. */
.gen-sidebar.is-collapsed .gen-nav-item { position: relative; }
.gen-sidebar.is-collapsed .gen-nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gen-sidebar);
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 3px;
  white-space: nowrap;
  margin-left: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 50;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4);
}
.gen-sidebar.is-collapsed .gen-nav-item:hover::after { opacity: 1; }

/* ---------------------------------- Top navbar ---------------------------------- */
.gen-topnav {
  background: #EDEDED;
  border-bottom: 1px solid var(--gen-border-2);
  height: 56px;
  display: flex; align-items: center;
  padding: 0 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.gen-topnav .toggle {
  background: none; border: 0; padding: 8px 12px;
  color: #5A738E; font-size: 18px; cursor: pointer;
}
.gen-topnav .toggle:hover { color: var(--gen-brand); }
.gen-topnav .gen-page-title {
  font-size: 14px; font-weight: 600; color: #5A738E;
  margin-left: 8px;
}

/* ---------------------------------- Page title strip ---------------------------------- */
.gen-page-titlebar {
  border-bottom: 1px solid var(--gen-border);
  padding: 16px 0 6px;
  margin: 0 0 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.gen-page-titlebar h3 {
  font-size: 21px; font-weight: 400; color: #5A738E;
  margin: 0; line-height: 1.2;
}
.gen-page-titlebar .subtitle { font-size: 12px; color: var(--gen-muted); margin-top: 4px; }

/* ---------------------------------- x_panel (card) ---------------------------------- */
.x_panel {
  background: var(--gen-card-bg);
  border: 1px solid var(--gen-border);
  border-radius: 4px;
  padding: 10px 17px;
  margin-bottom: 16px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.x_title {
  border-bottom: 2px solid var(--gen-border);
  padding: 1px 5px 6px;
  margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.x_title h2 {
  margin: 5px 0 0;
  font-size: 16px; font-weight: 500; color: #5A738E;
  letter-spacing: 0.01em;
}
.x_title h2 small {
  font-size: 12px; color: var(--gen-muted); font-weight: normal; margin-left: 8px;
}
.x_title .title-actions { display: flex; gap: 4px; color: #B6BCC4; }
.x_title .title-actions a, .x_title .title-actions button {
  color: #B6BCC4; padding: 2px 6px; background: none; border: 0; cursor: pointer;
}
.x_title .title-actions a:hover, .x_title .title-actions button:hover { color: #5A738E; }
.x_content { clear: both; margin-top: 5px; }

/* ---------------------------------- KPI tile ---------------------------------- */
.tile_count {
  background: white;
  border: 1px solid var(--gen-border);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 16px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.tile_stats_count {
  padding: 12px 14px;
  border-right: 1px solid var(--gen-border);
  position: relative;
}
.tile_stats_count:last-child { border-right: none; }
.tile_stats_count:before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px; background: var(--gen-border);
}
.tile_stats_count:first-child:before { display: none; }
.count_top {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--gen-muted);
}
.count_top i { color: var(--gen-brand); }
.count {
  font-size: 30px; font-weight: 600; line-height: 1.4; color: #333;
  font-variant-numeric: tabular-nums;
}
.count_bottom { font-size: 12px; color: var(--gen-muted); }
.count_bottom .green { color: var(--gen-success); font-weight: 500; }
.count_bottom .red   { color: var(--gen-danger);  font-weight: 500; }

/* ---------------------------------- Buttons (Bootstrap-style flats) ---------------------------------- */
.btn-gen {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer; transition: filter 120ms ease, transform 80ms ease;
  text-decoration: none; line-height: 1.42857143;
}
.btn-gen:active { transform: translateY(1px); }
.btn-gen:hover { filter: brightness(0.95); text-decoration: none; }
.btn-gen i { font-size: 12px; }

.btn-success { background: var(--gen-success); border-color: #169f86; color: white; }
.btn-success:hover { color: white; }
.btn-info    { background: var(--gen-info);    border-color: #258cd1; color: white; }
.btn-info:hover { color: white; }
.btn-warning { background: var(--gen-warning); border-color: #ec971f; color: white; }
.btn-warning:hover { color: white; }
.btn-danger  { background: var(--gen-danger);  border-color: #c0392b; color: white; }
.btn-danger:hover { color: white; }
.btn-default { background: white; border-color: #ccc; color: #333; }
.btn-default:hover { background: #f5f5f5; color: #333; }
.btn-dark    { background: #5A738E; border-color: #455D74; color: white; }
.btn-dark:hover { color: white; }
.btn-lg { padding: 10px 16px; font-size: 14px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* ---------------------------------- Labels (badges) ---------------------------------- */
.label-gen {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1.4;
  color: white;
}
.label-success { background: var(--gen-success); }
.label-info    { background: var(--gen-info); }
.label-warning { background: var(--gen-warning); }
.label-danger  { background: var(--gen-danger); }
.label-muted   { background: #95A5A6; }
.label-dark    { background: #5A738E; }

/* ---------------------------------- Forms ---------------------------------- */
.form-control-gen {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  background: white;
  border: 1px solid var(--gen-border-2);
  border-radius: 3px;
  color: var(--gen-text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-control-gen:focus {
  outline: none;
  border-color: var(--gen-brand);
  box-shadow: 0 0 0 3px rgba(26, 187, 156, 0.15);
}
.form-label-gen {
  display: block; font-size: 12px; font-weight: 500; color: #5A738E;
  margin-bottom: 4px;
}

/* ---------------------------------- Tables ---------------------------------- */
.table-gen {
  width: 100%; background: white;
  border-collapse: collapse;
  font-size: 13px;
}
.table-gen thead th {
  background: #F5F7FA;
  border-bottom: 1px solid var(--gen-border);
  border-top: 1px solid var(--gen-border);
  text-align: left;
  font-size: 12px; font-weight: 600; color: #5A738E;
  padding: 8px 12px; text-transform: uppercase; letter-spacing: 0.03em;
}
.table-gen tbody td {
  border-bottom: 1px solid var(--gen-border);
  padding: 9px 12px;
  vertical-align: middle;
}
.table-gen tbody tr:hover { background: #fafbfc; cursor: pointer; }
.table-gen tbody tr:last-child td { border-bottom: 0; }
.table-gen .num { font-variant-numeric: tabular-nums; text-align: right; }

/* Empty-state */
.gen-empty {
  background: #FAFBFC;
  border: 1px dashed var(--gen-border-2);
  border-radius: 4px;
  padding: 36px 18px;
  text-align: center;
  color: var(--gen-muted);
}
.gen-empty i { font-size: 28px; color: #B6BCC4; margin-bottom: 10px; display: block; }
.gen-empty .gen-empty-title { color: #5A738E; font-weight: 500; font-size: 14px; }

/* ---------------------------------- Toast ---------------------------------- */
.toast {
  background: #2A3F54;
  color: white;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 3px;
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.4);
  opacity: 0; transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  display: inline-flex; align-items: center; gap: 8px;
  border-left: 3px solid var(--gen-brand);
}
.toast.toast--show { opacity: 1; transform: translateY(0); }
.toast--success { border-left-color: var(--gen-success); }
.toast--error   { border-left-color: var(--gen-danger); background: #2A3F54; }
.toast--info    { border-left-color: var(--gen-info); }

/* ---------------------------------- Misc ---------------------------------- */
.text-muted-gen { color: var(--gen-muted); }
.text-success-gen { color: var(--gen-success); }
.text-danger-gen  { color: var(--gen-danger); }

[data-copyable] { cursor: pointer; }
[data-copyable]:hover { color: var(--gen-brand); }

.tnum { font-variant-numeric: tabular-nums; }

/* Custom scrollbar (mostly visible on dark sidebar) */
.gen-sidebar::-webkit-scrollbar, .gen-nav::-webkit-scrollbar { width: 8px; }
.gen-sidebar::-webkit-scrollbar-thumb, .gen-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; }

/* Sticky outcome bar (used on opportunity detail) */
.gen-sticky-bar {
  position: fixed; left: 230px; right: 0; bottom: 0;
  background: white;
  border-top: 1px solid var(--gen-border);
  box-shadow: 0 -4px 16px -8px rgba(15, 23, 42, 0.12);
  z-index: 30;
}
@media (max-width: 1023px) { .gen-sticky-bar { left: 0; } }

/* Animated count-up (used on opportunity detail) */
.countup { display: inline-block; }

/* Pulse for in-progress dot */
@keyframes hgv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 173, 78, .6); } 50% { box-shadow: 0 0 0 6px rgba(240, 173, 78, 0); } }
.pulse-warn { animation: hgv-pulse 1.6s ease-out infinite; }

/* Mobile sidebar drawer */
@media (max-width: 1023px) {
  .gen-sidebar {
    position: fixed; top: 0; left: 0;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    z-index: 40;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
  }
  .gen-sidebar.is-open { transform: translateX(0); }
  .gen-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 35;
  }
}

/* Keep our existing chart-wrap helper to avoid Chart.js infinite-resize. */
.chart-wrap { position: relative; height: 260px; max-height: 260px; }
.chart-wrap > canvas { max-height: 260px !important; }

/* Login page: full-bleed HGV resort photo with a frosted sign-in card.
   The resort image URL is injected from the template via --login-bg so
   static-URL resolution stays in Django (mirrors the app topbar). */
.gen-login-bg {
  min-height: 100vh;
  position: relative;
  background:
    linear-gradient(135deg, rgba(42,63,84,0.78) 0%, rgba(26,187,156,0.42) 100%),
    var(--login-bg, linear-gradient(135deg, #1ABB9C 0%, #2A3F54 100%));
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center; padding: 32px 16px;
}
.gen-login-card {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(6px);
  width: 100%; max-width: 400px;
  border-radius: 12px;
  padding: 34px 32px;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 24px 70px -18px rgba(0,0,0,0.55);
}
.gen-login-card h1 {
  font-size: 21px; color: var(--gen-sidebar, #2A3F54);
  margin-bottom: 4px; font-weight: 700; letter-spacing: -0.01em;
}
.gen-login-card .small { font-size: 12px; color: var(--gen-muted); }

/* Typographic HGV wordmark lockup (no external logo asset required) */
.gen-login-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin-bottom: 18px;
}
.gen-login-brand .wordmark {
  text-align: center; line-height: 1.05;
  color: var(--gen-sidebar, #2A3F54);
}
.gen-login-brand .wordmark .lead {
  display: block; font-size: 20px; font-weight: 800;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.gen-login-brand .wordmark .sub {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gen-primary, #1ABB9C); margin-top: 3px;
}
.gen-login-brand .rule {
  width: 46px; height: 3px; border-radius: 2px;
  background: var(--gen-primary, #1ABB9C);
}