/* ==========================================================================
   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.
   ========================================================================== */

: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; }

/* ───────────── 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); }
.app-num { text-align: right; font-variant-numeric: tabular-nums; }

/* 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);
}

.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; }

/* django-simple-captcha — image + text input side-by-side. */
.captcha-row .captcha {
  height: 38px;
  border: 1px solid var(--gen-border-2);
  border-radius: 3px;
  background: #FAFBFC;
  flex-shrink: 0;
}
.captcha-row input[type="text"] {
  flex: 1;
}

/* 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);
}