/*
 * Varial Platform — Brand & Component Overrides
 *
 * Loaded after bootstrap.min.css and layout.css.
 * Owns: design tokens, typography, Bootstrap component overrides,
 * sidebar visual styling, and app-chrome details.
 */

/* ----------------------------------------
   1. Design Tokens (CSS Custom Properties)
   ---------------------------------------- */
:root {
  /* The page <meta name="color-scheme" content="dark light"> (base.html) tells
     the browser it supports both, so absent anything more specific it renders
     native chrome (the page scrollbar, form control defaults) to match the OS
     preference — not the app's own light/dark toggle. On a light-themed page
     with a dark-mode OS, that rendered the main scrollbar dark against the
     cream background (#3731). Pin it to the active data-bs-theme (overridden
     below for dark) so native chrome always matches what's actually on screen. */
  color-scheme: light;
  /* Native checkboxes, radios and range inputs follow the brand teal. */
  accent-color: var(--varial-primary);

  /* Primary palette: Varial Energy teal. Deep for buttons, links and
     coloured text; hover one step darker; light for borders and highlights. */
  --varial-primary:       #0F745B;
  --varial-primary-dark:  #04614B;
  --varial-primary-light: #09AB86;
  /* Solid button fill: a brighter teal than the deep text colour, with a
     darker hover. Outline buttons and links keep the deep teal for contrast.
     Value-it pages restate these three as violet (see [data-service]). */
  --varial-action:        #0C9474;
  --varial-action-hover:  #0F745B;
  --varial-action-rgb:    12, 148, 116;
  --varial-action-text:   var(--varial-primary);

  /* Brand palette. Every family has three shades of one hue: light for
     dark pages, base for charts on light pages and brand artwork, deep for
     buttons, links and coloured text on light pages. The style guide renders
     these tokens directly, so it stays the live reference. */
  --varial-brand-teal-light:    #1FCAA0;
  --varial-brand-teal:          #09AB86;
  --varial-brand-teal-deep:     #0F745B;
  --varial-brand-violet-light:  #BA93FB;
  --varial-brand-violet:        #A76CFB;
  --varial-brand-violet-deep:   #7614D0;
  --varial-brand-blue-light:    #51B3FF;
  --varial-brand-blue:          #0695FD;
  --varial-brand-blue-deep:     #0D64B1;
  --varial-brand-amber-light:   #FBBF24;
  --varial-brand-amber:         #DD8818;
  --varial-brand-amber-deep:    #B45309;
  --varial-brand-fuchsia-light: #FE7C90;
  --varial-brand-fuchsia:       #FD3B6C;
  --varial-brand-fuchsia-deep:  #B60B49;
  --varial-brand-dark:          #232629;
  --varial-brand-dark-surface:  #2D3135;
  --varial-brand-dark-raised:   #3A3F44;
  /* Violet tint on dark grey: hover and selected fills on Varial X pages. */
  --varial-brand-violet-tint:   #382B4D;
  /* The platform's original blue and green. Used only for the card header
     tint (cta-card.css) and the first scenario chart colour; platform charts
     have not moved to the brand chart order. */
  --varial-legacy-blue:         #2563EB;
  --varial-legacy-green:        #059669;

  /* Public marketing roles shared by home, Docs and the style guide.
     These stay stable when the application theme changes. Varial Energy
     sits on sage; Varial X sits on the dark grey. */
  --varial-marketing-ink: #102A34;
  --varial-marketing-dark: var(--varial-brand-dark);
  --varial-marketing-dark-surface: var(--varial-brand-dark-surface);
  --varial-marketing-dark-raised: var(--varial-brand-dark-raised);
  --varial-marketing-dark-text: #F3F5F6;
  --varial-marketing-dark-muted: #C0C6CC;
  --varial-marketing-energy: var(--varial-brand-teal-deep);
  --varial-marketing-energy-hover: #04614B;
  --varial-marketing-energy-pale: #DDF7ED;
  /* Varial X leads with violet, matching its logo, and uses teal as the accent. */
  --varial-marketing-x-action: var(--varial-brand-violet-light);
  --varial-marketing-x-action-hover: #D1BAFD;
  --varial-marketing-x-accent: var(--varial-brand-teal-light);
  /* Varial X buttons and markers on light pages use the deep violet. */
  --varial-marketing-x-action-on-light: var(--varial-brand-violet-deep);
  --varial-marketing-x-action-on-light-hover: #5C0CA2;
  /* Aliases read by the archived style guide (archive/styleguide_legacy.css). */
  --varial-marketing-navy: var(--varial-marketing-dark);
  --varial-marketing-navy-raised: var(--varial-marketing-dark-surface);
  --varial-marketing-x-mint: var(--varial-marketing-x-accent);
  --varial-marketing-page: #F7F9F6;
  --varial-marketing-neutral: #EDEFEA;
  --varial-marketing-docs: var(--varial-marketing-neutral);
  --varial-marketing-muted: #455668;
  --varial-marketing-serif: 'Frank Ruhl Libre', Georgia, serif;

  /* App shell navigation — dark green, matching the homepage redesign's
     departure from navy. --varial-nav-hover has no light-mode use today
     beyond the sidebar collapse-toggle button, which previously only had an
     undefined-token fallback (#1a2e47, itself a navy) — defined properly
     here instead so it actually tracks this palette. */
  --varial-nav:           #042B1D;
  --varial-nav-hover:     #0A3D28;

  /* Accent — amber/gold (action/energy) — aliases the amber family */
  --varial-accent:        var(--varial-amber);
  --varial-accent-dark:   var(--varial-amber-dark);
  --varial-accent-light:  var(--varial-amber-light);

  /* Secondary: the same teal as the primary. Solid green buttons, completed
     states and positive deltas read as one Varial Energy colour. */
  --varial-secondary:      var(--varial-brand-teal-deep);
  --varial-secondary-dark: #04614B;
  --varial-secondary-light:var(--varial-brand-teal-light);

  /* Shorthand aliases for green — map to secondary tokens */
  --varial-green:         var(--varial-secondary);
  --varial-green-dark:    var(--varial-secondary-dark);
  --varial-green-light:   var(--varial-secondary-light);

  /* Amber — also used as "Gold" in color family palette */
  --varial-amber:         #F59E0B;
  --varial-amber-dark:    #D97706;
  --varial-amber-light:   #FCD34D;

  /* Premium — the "PRO"/paid-tier accent (#4189), on the brand violet family
     (--varial-purple #9333EA; dark/light from the VIOLET styleguide swatch). A
     deliberate non-warning colour distinct from the FREE badge's primary blue; used
     for the VarialView paid row's badge + Buy-now CTA so both read as one coherent
     premium treatment. */
  --varial-premium:       var(--varial-brand-violet-deep, #7614D0);
  --varial-premium-dark:  #5C0CA2;
  --varial-premium-light: var(--varial-brand-violet-light, #BA93FB);

  /* Status */
  --varial-danger:        #DC2626;
  --varial-info:          #0EA5E9;
  --varial-success:       #0F745B;
  --varial-warning:       #F59E0B;

  /* Style exploration palettes (styleguide previews only) */
  --varial-alt-a-nav:      #1F3A8A;
  --varial-alt-a-main:     #F5F7FC;
  --varial-alt-a-surface:  var(--varial-white, #FFFFFF);
  --varial-alt-a-line:     #D7DEEC;
  --varial-alt-a-accent:   #0EA5E9;
  --varial-alt-a-copy:     #64748B;

  --varial-alt-b-nav:      #1F2937;
  --varial-alt-b-main:     #F7F8F9;
  --varial-alt-b-surface:  var(--varial-white, #FFFFFF);
  --varial-alt-b-line:     #D7DCE3;
  --varial-alt-b-accent:   #0F766E;
  --varial-alt-b-copy:     #6B7280;
  --varial-alt-b-amber:    #C18A1A;
  --varial-alt-b-amber-dark:#9B6F13;
  --varial-alt-b-amber-light:#D9B25E;

  --varial-alt-c-nav:      #1E3A34;
  --varial-alt-c-main:     #F7F7F3;
  --varial-alt-c-surface:  var(--varial-white, #FFFFFF);
  --varial-alt-c-line:     #D9DDD3;
  --varial-alt-c-accent:   #B45309;
  --varial-alt-c-copy:     #6B6F62;
  --varial-alt-c-warning:  #B06C17;

  --varial-alt-d-nav:      #2A2F36;
  --varial-alt-d-main:     #F5F6F7;
  --varial-alt-d-surface:  var(--varial-white, #FFFFFF);
  --varial-alt-d-line:     #D9DDE1;
  --varial-alt-d-accent:   #4B5563;
  --varial-alt-d-copy:     #6B7280;

  --varial-alt-e-nav:      #111827;
  --varial-alt-e-main:     #EEF6FF;
  --varial-alt-e-surface:  var(--varial-white, #FFFFFF);
  --varial-alt-e-line:     #C9D8F2;
  --varial-alt-e-accent:   #FF4D6D;
  --varial-alt-e-copy:     #4B5563;
  --varial-alt-e-primary-light: #1D4ED8;
  --varial-alt-e-success:  #14B8A6;
  --varial-alt-e-glow:     rgba(255, 77, 109, 0.28);

  /* Brand tertiary accents */
  --varial-fuchsia:        #FF4D6D;
  --varial-fuchsia-dark:   #C94359;
  --varial-fuchsia-light:  #F46D80;

  /* Pastel backgrounds — light tints for icon badges / accents */
  --varial-primary-bg:       #C3EBDD;
  --varial-primary-bg-light: #DDF7ED;
  --varial-green-bg:         #bbf7d0;
  --varial-green-bg-light:   #dcfce7;
  --varial-purple:           #9333EA;
  --varial-purple-bg:        #e9d5ff;
  --varial-purple-bg-light:  #f3e8ff;
  /* --varial-amber duplicate removed — canonical value is #F59E0B above */
  --varial-amber-bg:         #fde68a;
  --varial-amber-bg-light:   #fef3c7;

  /* Surfaces — sage, matching the sidebar's aurora-mesh base (#F7F9F6)
     exactly: the platform page background. */
  --varial-bg:            #F7F9F6;
  --varial-bg-subtle:     #EDEFEA;
  --varial-border:        #E3E5DE;
  /* Interactive-control boundary (form inputs). Meets WCAG 2.1 AA 1.4.11
     (3:1) on the white field fill — 3.39:1. --varial-border above stays the
     light cream edge for decorative card borders/dividers, which are exempt
     from the UI-component contrast bar (#3189). */
  --varial-border-interactive: #948B72;

  /* Neutrals — warm-leaning gray scale */
  --varial-gray-50:  #F8F7F5;
  --varial-gray-100: #F1F0ED;
  --varial-gray-200: #E4E2DC;
  --varial-gray-300: #CCC9C3;
  --varial-gray-400: #6E6A63; /* darkened for WCAG AA text contrast — 5.02:1 cream / 4.51:1 subtle (#3189) */
  --varial-gray-500: #6B6763;
  --varial-gray-600: #4D4A46;
  --varial-gray-700: #38352F;
  --varial-gray-800: #211F1C;
  --varial-gray-900: #131210;

  /* Typography */
  /* @font-face rules for Inter and JetBrains Mono live in fonts.css. */
  --varial-font-family:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Kept consistent with the body face across the platform — the serif display
     face is scoped to the marketing home page's own tokens instead. */
  --varial-font-heading: var(--varial-font-family);
  --varial-font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Modular type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Spacing */
  --varial-space-xs: 0.25rem;
  --varial-space-sm: 0.5rem;
  --varial-space-md: 1rem;
  --varial-space-lg: 1.5rem;
  --varial-space-xl: 2rem;
  --varial-space-2xl: 3rem;

  /* Borders & Shadows */
  --varial-radius-sm: 0.25rem;
  --varial-radius-md: 0.375rem;
  --varial-radius-lg: 0.5rem;
  --varial-radius-xl: 0.75rem;
  --varial-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --varial-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --varial-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Compact density — data-heavy UI elements */
  --varial-density-2xs: 2px;
  --varial-density-xs:  4px;
  --varial-density-sm:  6px;
  --varial-density-md:  8px;
  --varial-density-lg:  12px;
  --varial-density-xl:  16px;

  /* Brand whites — single source of truth for any direct #fff/#ffffff usage. */
  --varial-white:         #ffffff;

  /* Card surfaces */
  --varial-card-bg:       var(--varial-white, #ffffff);
  --varial-card-border:   var(--varial-border);
  --varial-card-shadow:   var(--varial-shadow-sm);
  --varial-card-radius:   var(--varial-radius-lg);

  /* Card spacing — single source of truth, tune here to scale density globally.
     Used by static/css/components/cards.css and row gutters in card-grid pages. */
  --varial-card-gutter:                 var(--varial-space-md, 1rem);  /* gap between cards in a row */
  --varial-card-body-padding:           var(--varial-space-md, 1rem);  /* standard interior padding */
  --varial-card-body-padding-compact:   0.625rem 0.75rem;              /* dense data layouts */
  --varial-card-body-padding-metric:    0.875rem var(--varial-space-md, 1rem);
  --varial-card-header-padding:         0.625rem var(--varial-space-md, 1rem);
  --varial-card-header-padding-compact: 0.375rem 0.75rem;
  --varial-card-header-padding-flush:   var(--varial-space-sm, 0.5rem) var(--varial-space-md, 1rem);

  /* App chrome sizing */
  --varial-topnav-height: 56px;
  --varial-sidebar-inner-inset: 0.75rem;

  /* Subtle square-grid textures */
  --varial-shell-grid-line: rgba(27, 58, 160, 0.045);
  --varial-shell-grid-size: 14px;
  --varial-sidebar-stripe-line: rgba(255, 255, 255, 0.04);
  --varial-sidebar-stripe-step: 4px;

  /* MarketView VWAP comparison-row backgrounds (Tabulator-overridden).
     Slot-B mirrors --varial-secondary (green); active-row mirrors
     Bootstrap's primary blue at the same alpha. Keep both as raw rgba
     literals (rather than color-mix(...)) for simpler theming + no new
     CSS-feature dependency. */
  --varial-vwap-slot-b-bg:      rgba(15, 116, 91, 0.06);
  --varial-vwap-row-active-bg:  rgba(13, 110, 253, 0.06);

  /* Data table row sizing */
  --varial-row-height:         40px;
  --varial-row-height-compact: 32px;  /* read-only tables (dashboard, review) */
  --varial-row-height-dense:   28px;  /* wizard/editable tables */
  --varial-cell-px:            8px;
  --varial-cell-py:            4px;
  --varial-cell-px-dense:      6px;   /* wizard/editable cell horizontal padding */
  --varial-cell-py-dense:      2px;   /* wizard/editable cell vertical padding */

  /* Transitions */
  --varial-transition-fast: 150ms ease;
  --varial-transition-base: 250ms ease;

  /* ── Bootstrap body typography — flows into ALL BS components automatically.
     Setting these here means nav-links, badges, etc. all inherit the Varial
     compact scale. NOTE: some BS5 components (dropdown, tooltip, popover) set
     their own font vars locally on the element — those require direct overrides
     in Section 3b below; `:root` values are ignored for those components. ── */
  --bs-body-font-family: var(--varial-font-family);
  --bs-body-font-size:   0.8125rem; /* 13px */
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;

  /* Map Varial primary to Bootstrap's primary-rgb for bg-primary consistency */
  --bs-primary: var(--varial-primary);
  --bs-primary-rgb: 15, 116, 91;

  /* ----------------------------------------
     Domain Chart Colors
     To change any color: edit here, it flows
     through CSS and JS (varial-colors.js).
     ---------------------------------------- */

  /* Scenario series (up to 5) — brand five-colour palette */
  --chart-scenario-1: var(--varial-legacy-blue);  /* S1 — platform charts use the original blue, not the brand chart order */
  --chart-scenario-2: var(--varial-amber);    /* S2 — amber */
  --chart-scenario-3: #16A34A;  /* S3 — green */
  --chart-scenario-4: #FF4D6D;  /* S4 — fuchsia */
  --chart-scenario-5: #9333EA;  /* S5 — violet */

  /* Portfolio *total* series on the VAR earnings band chart — a neutral slate reserved for
     "the aggregate" so it never collides with a dominant position's tech colour (#4368).
     Mirror: apps/diyvar/charts/base.py::_PORTFOLIO_COLOR (parity in test_position_colours.py). */
  --chart-portfolio: #64748B;

  /* Weather year band opacity (applied to scenario color) */
  --chart-band-opacity: 0.12;

  /* NEM Regions — aligned with S1–S5 brand palette */
  --chart-region-nsw: #2563EB;  /* NSW — primary blue (S1) */
  --chart-region-qld: #F59E0B;  /* QLD — gold (S2) */
  --chart-region-vic: #16A34A;  /* VIC — green (S3) */
  --chart-region-sa:  #FF4D6D;  /* SA  — fuchsia (S4) */
  --chart-region-tas: #9333EA;  /* TAS — violet (S5) */

  /* Generation technologies */
  --chart-tech-solar:        #F59E0B;
  --chart-tech-rooftop-pv:   #FCD34D;
  --chart-tech-wind:         #93C5FD;
  --chart-tech-wind-offshore:#60A5FA;
  --chart-tech-black-coal:   #1C1917;
  --chart-tech-brown-coal:   #92400E;
  --chart-tech-gas-ccgt:     #6B7280;
  --chart-tech-gas-ocgt:     #9CA3AF;
  --chart-tech-gas-steam:    #4B5563;
  --chart-tech-hydro:        #0284C7;
  --chart-tech-pumped-hydro: #0369A1;
  --chart-tech-battery:      #8B5CF6;
  --chart-tech-diesel:       #DC2626;

  /* teal — REZ / flow capacity limit line */
  --chart-rez-limit:         #0D9488;

  /* Chart axis grid + zero line — read by varial.plotlyLayout() (varial-colors.js)
     so every Plotly chart that uses the shared layout picks the theme-correct,
     subtle grid. Edit here (not JS) per the static/ CSS-token rule. */
  --chart-grid:     rgba(204, 201, 195, 0.35);
  --chart-zeroline: #B4B0AA;
  /* Dark warm-grey (gray-700) so axis ticks/titles read clearly on the cream page.
     Was gray-500 (#6B6763), which sat too faint against light backgrounds. The grid
     above stays deliberately subtle — only the axis text/zero line darken. */
  --chart-axis-text: #38352F;
  /* Chart (Plotly) title text — read by varial.plotlyLayout(). Dark ink on the
     cream page; flips to near-white on the dark theme below so titles stop
     rendering as Plotly's default mid-grey on navy. */
  --chart-title:    #131210;

  /* Fuel-icon palette — semantic aliases of the chart-tech tokens for
     fuel labels / badges in product UI. Both names resolve to the same
     hex; pick the one that fits the surface (charts vs UI badges). */
  --varial-fuel-solar:        var(--chart-tech-solar);
  --varial-fuel-rooftop-pv:   var(--chart-tech-rooftop-pv);
  --varial-fuel-wind:         var(--chart-tech-wind);
  --varial-fuel-wind-offshore:var(--chart-tech-wind-offshore);
  --varial-fuel-black-coal:   var(--chart-tech-black-coal);
  --varial-fuel-brown-coal:   var(--chart-tech-brown-coal);
  --varial-fuel-gas-ccgt:     var(--chart-tech-gas-ccgt);
  --varial-fuel-gas-ocgt:     var(--chart-tech-gas-ocgt);
  --varial-fuel-gas-steam:    var(--chart-tech-gas-steam);
  --varial-fuel-hydro:        var(--chart-tech-hydro);
  --varial-fuel-pumped-hydro: var(--chart-tech-pumped-hydro);
  --varial-fuel-battery:      var(--chart-tech-battery);
  --varial-fuel-diesel:       var(--chart-tech-diesel);

  /* Retro 3D button palette — the "New Forecast" / "New Valuation" CTA
     on the Spot and DIYvar landing pages. Base maps to varial-green;
     hover/active deepen along the secondary scale; shadow is the bottom
     edge of the 3D press effect. */
  --varial-retro-green:        var(--varial-secondary);
  --varial-retro-green-hover:  var(--varial-secondary-dark);
  --varial-retro-green-active: #14532D;
  --varial-retro-green-shadow: #0D6B30;

  /* Override Bootstrap body background */
  --bs-body-bg:              #F7F9F6; /* = --varial-bg */
  --bs-body-bg-rgb:          247, 249, 246;

  /* Layout dimensions (used in Section 4 and layout.css) */
  --vrl-sidebar-w:         12.625rem;  /* expanded sidebar */
  --vrl-sidebar-collapsed: 3.125rem;   /* collapsed sidebar (icons only) */
  --vrl-sidebar-gap:       0.75rem;    /* inset on all sides for the floating sidebar panel */
  --vrl-content-max-w:     100rem;     /* max content width — caps stretching on ultra-wide screens */
  --vrl-content-px:        1.5rem;      /* side padding on the main content container — edit here to adjust globally */
}

/* ----------------------------------------
   Sidebar — aurora mesh: light base with soft pastel blobs of the brand
   palette (green / blue / amber) bleeding in from the corners.
   ---------------------------------------- */
.navbar-vertical {
  background: #F7F9F6;
  border: 1px solid rgba(4, 43, 29, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}

/* In dark mode the rail stays dark so it still reads as its own surface
   over the (also dark) page. */
[data-bs-theme="dark"] .navbar-vertical {
  background: #050F0C;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

/* Aurora blobs + dot-grid texture. Large, soft-edged radial gradients read
   as blurred without an actual filter: blur (cheaper, and clips cleanly to
   the panel's rounded corners via the parent's overflow: hidden). */
.navbar-vertical::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 45% at 8% -8%, rgba(16, 185, 129, 0.22) 0%, transparent 68%),
    radial-gradient(ellipse 65% 50% at 108% 38%, rgba(15, 116, 91, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 70% 50% at 0% 112%, rgba(245, 158, 11, 0.16) 0%, transparent 68%),
    radial-gradient(rgba(4, 43, 29, 0.05) 1px, transparent 1px);
  background-size: auto, auto, auto, 24px 24px;
  pointer-events: none;
  z-index: 0;
}

.navbar-vertical .navbar-collapse {
  background-color: transparent;
}

/* Links */
.navbar-vertical .nav-link {
  color: var(--varial-gray-600, #4D4A46);
}
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus {
  color: var(--varial-gray-900, #131210);
}
.navbar-vertical .nav-link.active {
  color: var(--varial-gray-900, #131210);
}

/* Section labels & dividers */
.navbar-vertical .navbar-vertical-label {
  color: var(--varial-gray-500, #6B6763);
}
.navbar-vertical .navbar-vertical-divider,
.navbar-vertical hr {
  border-color: rgba(4, 43, 29, 0.12);
}

/* Brand text + toggle icon in sidebar header */
.navbar-vertical .navbar-brand {
  color: var(--varial-gray-900, #131210);
}

/* Scrollbar in the sidebar */
.navbar-vertical .navbar-vertical-content.scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(4, 43, 29, 0.2);
}

/* Dark mode overrides */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --varial-bg:          #0F172A;
  --varial-bg-subtle:   #1E293B;
  --varial-border:      #334155;
  /* Interactive-control boundary on dark — 3.35:1 on the #1E293B field fill (#3189). */
  --varial-border-interactive: #6B7A90;
  --varial-card-bg:     #1E293B;
  --varial-card-border: #334155;
  /* Generic panel surface — hardcoded to white at :root and used directly by
     several components (e.g. the commodity chart cards, fuel/policy panels).
     Without a dark value those surfaces rendered white on the dark page. */
  --varial-surface:     #1E293B;
  /* Re-point the Bootstrap body bg we override at :root (line ~297) so BS
     components keyed off it (accordions, etc.) stop rendering cream on dark. */
  --bs-body-bg:         #0F172A;
  --bs-body-bg-rgb:     15, 23, 42;
  --varial-gray-50:     #1E293B;
  --varial-gray-100:    #334155;
  --varial-gray-200:    #475569;
  --varial-gray-300:    #64748B;
  --varial-gray-400:    #94A3B8;
  --varial-gray-500:    #CBD5E1;
  /* 600-800 continue the inverted scale toward light so secondary/label/
     heading TEXT stays legible on dark (the only bg uses are styleguide swatches). */
  --varial-gray-600:    #E2E8F0;
  --varial-gray-700:    #F1F5F9;
  --varial-gray-800:    #F8FAFC;
  --varial-gray-900:    #F8F7F5;
  --varial-shell-grid-line: rgba(148, 163, 184, 0.07);
  --varial-sidebar-stripe-line: rgba(255, 255, 255, 0.045);
  /* The deep teal primary is too dark on navy. Lift it to the light teal so
     every link or accent that colours TEXT with it stays legible. Solid
     buttons keep the action fill (--varial-action) so their white text keeps
     contrast. */
  --varial-primary:      #1FCAA0;
  /* --varial-text-muted has no :root definition — callers rely on a #5b6472
     fallback that vanishes on navy. Pin it to the dark muted grey here. NOTE we
     deliberately do NOT lift --varial-success/-danger/-warning here: those double
     as solid badge backgrounds (settings .badge.bg-* with white text), so a
     lighter value would wreck white-on-colour contrast. Status TEXT that needs
     lifting on dark is handled per-component. */
  --varial-text-muted:   #94A3B8;
  /* Pastel "-bg"/"-bg-light" tints are near-white at :root, so chip/badge
     backgrounds that use them (e.g. the bidding "Set next" badge) rendered as
     bright boxes. Repoint to translucent primary accents. */
  --varial-primary-bg:        rgba(31, 202, 160, 0.24);
  --varial-primary-bg-light:  rgba(31, 202, 160, 0.16);
  --bs-link-color:       #1FCAA0;
  --bs-link-hover-color: #7BE3C6;
  --bs-link-color-rgb:   31, 202, 160;
  /* Soft surface tokens the chat widget (and others) reference only via
     fallback — define them dark so those surfaces stop rendering light. */
  --varial-bg-muted:      #172033;
  --varial-primary-soft:  rgba(31, 202, 160, 0.16);
  --varial-fg-muted:      #94A3B8;
  --varial-warning-soft:  rgba(248, 113, 113, 0.16);
  --varial-error-soft:    rgba(248, 113, 113, 0.16);
  /* Much more subtle chart grid on navy, standardised across every Plotly chart
     that builds its layout via varial.plotlyLayout(). */
  --chart-grid:     rgba(148, 163, 184, 0.10);
  --chart-zeroline: rgba(148, 163, 184, 0.22);
  /* Axis tick/title text — light enough to read on navy. Read by plotlyLayout()
     so it's set directly on the chart (the CSS .xtick override alone wasn't
     reliably beating Plotly's inline default fill). */
  --chart-axis-text: #CBD5E1;
  /* Chart title — white on navy (the light-theme value is mid-grey on dark). */
  --chart-title:    #F8FAFC;
}

/* Dark-mode surface overrides for components that hardcode a light bg off the
   cream page (tables lift via white rows, inputs via white fill). */
[data-bs-theme="dark"] .table {
  --bs-table-bg: var(--varial-bg-subtle);
}

/* Bootstrap's .table-light forces a near-white --bs-table-bg on the header cells,
   which collides with our light .table thead th text and renders white-on-white in
   dark mode (staff-hub headers). Remap it to the dark table surface so headers read. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table .table-light > th,
[data-bs-theme="dark"] .table .table-light > td {
  --bs-table-bg: var(--varial-bg-subtle);
  --bs-table-color: var(--varial-gray-800);
  color: var(--varial-gray-800);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--varial-gray-50);
  border-color: var(--varial-border-interactive);
  /* Pin the text colour alongside the background — without this the field
     inherits whatever colour an enclosing surface set, which produced
     low-contrast "light text on grey" inputs on dark. */
  color: var(--varial-gray-900);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--varial-gray-400);
}

/* ----------------------------------------
   2. Typography
   ---------------------------------------- */

body {
  color: var(--varial-gray-800, #211F1C);
  background-color: var(--varial-bg);
  -webkit-font-smoothing: antialiased;
}

/* Heading scale — proportional to 14px base, tight weights */
h1, .h1 { font-size: 1.75rem;  font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.3;  letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
h4, .h4 { font-size: 1rem;     font-weight: 600; line-height: 1.4;  }
h5, .h5 { font-size: 0.875rem; font-weight: 600; line-height: 1.4;  }
h6, .h6 { font-size: 0.875rem; font-weight: 600; line-height: 1.4;  letter-spacing: 0.03em; text-transform: uppercase; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--varial-font-heading);
  color: var(--varial-gray-900, #131210);
  margin-bottom: 0.5rem;
}

/* Page-level section headings scoped to .content */
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  font-family: var(--varial-font-heading);
  color: var(--varial-gray-900);
}

/* Small / muted text */
.small, small { font-size: 0.8125rem; }  /* 11.375px at 14px base */
/* !important: Bootstrap's .text-muted ships with !important; only !important
   can repaint it to our gray-500 token. */
.text-muted   { color: var(--varial-gray-500, #6B6763) !important; }

/* Labels — form labels, table column headers */
label,
.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--varial-gray-700, #38352F);
}

/* Monospace — code, data values. Fuchsia is intentional brand treatment for inline code. */
code, pre, .text-mono {
  font-family: var(--varial-font-mono);
  font-size: 0.8125rem;
  color: var(--varial-fuchsia, #FF4D6D);
}

/* ----------------------------------------
   2b. Contrast Safety — White Text on Dark Backgrounds
   Needed because Section 2 sets headings to --varial-gray-900.
   Only override where OUR rules cause contrast problems;
   Bootstrap handles .bg-primary/.bg-dark contrast natively.
   ---------------------------------------- */

/* Explicit .text-white must win over our heading color rules.
   !important: .text-white is also a Bootstrap utility shipped with !important;
   matching it ensures our token wins consistently across heading + non-heading
   elements regardless of source order. */
.content .text-white,
.content h1.text-white, .content h2.text-white, .content h3.text-white,
.content h4.text-white, .content h5.text-white, .content h6.text-white {
  color: var(--varial-white, #fff) !important;
}

/* Our custom components with colored backgrounds */
.card-header-gradient,
.card-header-gradient h5,
.card-header-gradient h6,
.pricing-cta,
.pricing-cta h2,
.pricing-cta h3,
.pricing-cta p {
  color: var(--varial-white, #fff);
}

/* ----------------------------------------
   3. Bootstrap Component Overrides
   ---------------------------------------- */

/* --- Button base: compact padding, sharp radius, brand transitions, 3D depth --- */
.btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--varial-radius-sm, 0.25rem);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: background-color 150ms ease, border-color 150ms ease,
              color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
.btn:hover {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.btn:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.12),
              inset 0 2px 3px rgba(0, 0, 0, 0.12);
  transform: translateY(1px);
}
/* btn-link has no fill/border to anchor the 3D depth treatment against — it
   would render as a bare shadow floating with nothing underneath. Opt it out
   entirely so it stays a plain, flat text link. */
.btn-link,
.btn-link:hover,
.btn-link:active {
  box-shadow: none;
  transform: none;
}
/* Outline buttons: white fill so they lift off the cream page bg; subtler depth */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
  --bs-btn-bg: var(--varial-white, #fff);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Value-it pages (valuations and the book) use violet buttons. base.html
   sets data-service="value" on <body> for the var and positions URL
   namespaces. Only the action tokens differ on these pages; links, cards
   and status colours match the rest of the platform. */
[data-service="value"] {
  --varial-action:       var(--varial-brand-violet-deep, #7614D0);
  --varial-action-hover: #5C0CA2;
  --varial-action-rgb:   118, 20, 208;
  --varial-action-text:  var(--varial-brand-violet-deep, #7614D0);
}
[data-bs-theme="dark"] [data-service="value"] {
  --varial-action-text:  var(--varial-brand-violet-light, #BA93FB);
}

/* Bootstrap checkboxes, radios and switches follow the brand teal. */
.form-check-input:checked {
  background-color: var(--varial-primary);
  border-color: var(--varial-primary);
}
.form-check-input:focus {
  border-color: var(--varial-primary-light);
  box-shadow: 0 0 0 0.25rem rgba(15, 116, 91, 0.25);
}

/* Primary button uses Varial Energy teal */
.btn-primary {
  --bs-btn-bg: var(--varial-action, #0C9474);
  --bs-btn-border-color: var(--varial-action, #0C9474);
  --bs-btn-hover-bg: var(--varial-action-hover, #0F745B);
  --bs-btn-hover-border-color: var(--varial-action-hover, #0F745B);
  --bs-btn-active-bg: var(--varial-action-hover, #0F745B);
  --bs-btn-active-border-color: var(--varial-action-hover, #0F745B);
  --bs-btn-color: var(--varial-white, #fff);
  --bs-btn-hover-color: var(--varial-white, #fff);
}

/* Dark mode lifts --varial-primary to the light teal for readable link text,
   but a solid button keeps the action fill so its white label stays legible. */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--varial-action, #0C9474);
  --bs-btn-border-color: var(--varial-action, #0C9474);
  --bs-btn-hover-bg: var(--varial-action-hover, #0F745B);
  --bs-btn-hover-border-color: var(--varial-action-hover, #0F745B);
  --bs-btn-active-bg: var(--varial-action-hover, #0F745B);
  --bs-btn-active-border-color: var(--varial-action-hover, #0F745B);
}

/* Outline buttons hardcode a white fill (to lift off the cream page). In dark
   that's a bright patch — give them the dark surface; per-variant text/border
   (primary blue, etc.) stays readable, and secondary gets a light text/border. */
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-success,
[data-bs-theme="dark"] .btn-outline-danger,
[data-bs-theme="dark"] .btn-outline-warning,
[data-bs-theme="dark"] .btn-outline-info {
  --bs-btn-bg: var(--varial-bg-subtle);
}

[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--varial-gray-700);
  --bs-btn-border-color: var(--varial-border);
  --bs-btn-hover-bg: var(--varial-gray-100);
  --bs-btn-hover-color: var(--varial-gray-800);
}

/* Bootstrap utility classes (.text-muted/.text-dark/.bg-light/.bg-white) don't
   flip for dark, so re-point them here. `!important` is required because the
   Bootstrap utilities themselves ship with `!important` — only `!important` can
   beat them. This matches the existing justified utility overrides in this file
   (e.g. .text-white / .text-success above); see static/CLAUDE.md CSS rule #1. */
[data-bs-theme="dark"] .text-muted {
  color: var(--varial-gray-400, #94A3B8) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--varial-gray-700, #F1F5F9) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--varial-action-text, #0F745B);
  --bs-btn-border-color: var(--varial-action-text, #0F745B);
  --bs-btn-hover-bg: var(--varial-action, #0C9474);
  --bs-btn-hover-border-color: var(--varial-action, #0C9474);
  --bs-btn-hover-color: var(--varial-white, #fff);
}

/* Size variants: keep distinct from our compact base */
.btn-sm {
  --bs-btn-padding-y: 0.125rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.75rem;
}
.btn-lg {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-size: 1rem;
}

/* Disabled buttons: solid gray, flat (no 3D depth), not washed-out opacity */
.btn.disabled, .btn:disabled {
  --bs-btn-disabled-bg: var(--varial-gray-300, #CCC9C3);
  --bs-btn-disabled-border-color: var(--varial-gray-300, #CCC9C3);
  --bs-btn-disabled-color: var(--varial-gray-500, #6B6763);
  --bs-btn-disabled-opacity: 1;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* Icon-only button: square, centered icon */
.btn-icon {
  --bs-btn-padding-x: 0.25rem;
  --bs-btn-padding-y: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  line-height: 1;
}

/* Success button: the same action teal as the primary */
.btn-success {
  --bs-btn-bg: var(--varial-action, #0C9474);
  --bs-btn-border-color: var(--varial-action, #0C9474);
  --bs-btn-hover-bg: var(--varial-action-hover, #0F745B);
  --bs-btn-hover-border-color: var(--varial-action-hover, #0F745B);
  --bs-btn-active-bg: var(--varial-action-hover, #0F745B);
  --bs-btn-active-border-color: var(--varial-action-hover, #0F745B);
  --bs-btn-color: var(--varial-white, #fff);
  --bs-btn-hover-color: var(--varial-white, #fff);
}

/* Success text — match varial-green rather than Bootstrap's duller #198754.
   !important: Bootstrap's .text-success ships with !important; only !important
   can repaint it. */
.text-success {
  color: var(--varial-green, #16A34A) !important;
}

/* Retro 3D press button — reusable bold CTA (same press effect as .btn-new-forecast).
   Used as `.btn .btn-retro` on <a>/<button>; the color !important pins the cream
   label across all states over Bootstrap's .btn `--bs-btn-color`/`--bs-btn-hover-color`
   (and <a> link colour), which otherwise win on hover/focus. */
.btn-retro {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--varial-bg, #FAF3DC) !important;
  background: var(--varial-primary, #1B3AA0);
  border: none;
  border-radius: var(--varial-radius-md, 0.375rem);
  box-shadow:
    0 6px 0 0 var(--varial-primary-dark, #122880),
    0 8px 12px 0 rgba(0, 0, 0, 0.22);
  transform: translateY(0);
  transition: box-shadow 0.08s ease, transform 0.08s ease, background 0.08s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-retro:hover {
  background: var(--varial-primary-light, #2748C8);
  color: var(--varial-bg, #FAF3DC) !important;
  box-shadow:
    0 6px 0 0 var(--varial-primary-dark, #122880),
    0 10px 16px 0 rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}
.btn-retro:active {
  background: var(--varial-primary-dark, #122880);
  color: var(--varial-bg, #FAF3DC) !important;
  box-shadow:
    0 2px 0 0 var(--varial-primary-dark, #122880),
    0 3px 6px 0 rgba(0, 0, 0, 0.18);
  transform: translateY(4px);
}

/* Retro 3D green button — color !important pins the cream label over Bootstrap's
   .btn state colours, same rationale as .btn-retro above. */
.btn-retro-success {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--varial-bg, #FAF3DC) !important;
  background: var(--varial-green, #16A34A);
  border: none;
  border-radius: var(--varial-radius-md, 0.375rem);
  box-shadow:
    0 6px 0 0 var(--varial-green-dark, #15803D),
    0 8px 12px 0 rgba(0, 0, 0, 0.22);
  transform: translateY(0);
  transition: box-shadow 0.08s ease, transform 0.08s ease, background 0.08s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-retro-success:hover {
  background: var(--varial-green-light, #22C55E);
  color: var(--varial-bg, #FAF3DC) !important;
  box-shadow:
    0 6px 0 0 var(--varial-green-dark, #15803D),
    0 10px 16px 0 rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}
.btn-retro-success:active {
  background: var(--varial-green-dark, #15803D);
  color: var(--varial-bg, #FAF3DC) !important;
  box-shadow:
    0 2px 0 0 var(--varial-green-dark, #15803D),
    0 3px 6px 0 rgba(0, 0, 0, 0.18);
  transform: translateY(4px);
}
.btn-retro-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Spot review page's large standalone Submit & Run CTA, disabled state
   (insufficient credits) (#3951). The shared .btn-retro-success:disabled
   above just drops opacity to 0.5 — on this card's white backdrop that
   blends the cream label AND the green fill toward white in equal measure,
   collapsing the contrast between them into a washed-out, barely-legible
   pastel. Swap to a fully-opaque muted grey treatment instead of relying on
   translucency, scoped to this button so every other (small, opacity-fine)
   .btn-retro-success "Continue" button across the wizard is untouched. */
.review-submit-cta:disabled {
  opacity: 1;
  background: var(--varial-gray-200, #E4E2DC) !important;
  color: var(--varial-gray-700, #38352F) !important;
  border: 1px solid var(--varial-gray-300, #CCC9C3) !important;
  box-shadow: none !important;
}

/* "Contact us for credits" CTA on the Spot review page (#3951) — the plain
   .btn-outline-warning amber (#F59E0B) text/border on the white footer sits
   under ~2.2:1 contrast, hard to read. Darken text + outline for this one
   button rather than the shared .btn-outline-warning class, which is used
   elsewhere at sizes/positions where the lighter amber still reads fine. */
.review-credits-cta {
  color: var(--varial-gray-800, #211F1C) !important;
  border-color: var(--varial-gray-800, #211F1C) !important;
}
.review-credits-cta:hover {
  color: var(--varial-gray-900, #131210) !important;
  border-color: var(--varial-gray-900, #131210) !important;
  background: var(--varial-gray-100, #F1F0ED) !important;
}

/* Accent button — amber/gold CTA */
.btn-accent {
  --bs-btn-bg: var(--varial-accent, #F59E0B);
  --bs-btn-border-color: var(--varial-accent, #F59E0B);
  --bs-btn-hover-bg: var(--varial-accent-dark, #D97706);
  --bs-btn-hover-border-color: var(--varial-accent-dark, #D97706);
  --bs-btn-color: var(--varial-nav, #0D1B2E);
  --bs-btn-hover-color: var(--varial-nav, #0D1B2E);
  --bs-btn-active-bg: var(--varial-accent-dark, #D97706);
  --bs-btn-active-border-color: var(--varial-accent-dark, #D97706);
  --bs-btn-active-color: var(--varial-nav, #0D1B2E);
  font-family: var(--varial-font-family);
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 4px 20px rgba(245, 158, 11, 0.45);
}
.btn-accent:hover {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.10), 0 8px 28px rgba(245, 158, 11, 0.50);
}

/* Premium button — violet "PRO"/paid-tier CTA (#4189). Pairs with the .pro badge
   so the VarialView paid row's badge + Buy-now button share one premium accent
   (replacing the amber CTA that read as a warning). */
.btn-premium {
  --bs-btn-bg: var(--varial-premium, #9333EA);
  --bs-btn-border-color: var(--varial-premium, #9333EA);
  --bs-btn-hover-bg: var(--varial-premium-dark, #6A25A8);
  --bs-btn-hover-border-color: var(--varial-premium-dark, #6A25A8);
  --bs-btn-color: var(--varial-white, #fff);
  --bs-btn-hover-color: var(--varial-white, #fff);
  --bs-btn-active-bg: var(--varial-premium-dark, #6A25A8);
  --bs-btn-active-border-color: var(--varial-premium-dark, #6A25A8);
  --bs-btn-active-color: var(--varial-white, #fff);
  font-family: var(--varial-font-family);
  font-weight: 700;
}

/* --- Hero CTA skin ---------------------------------------------------------
   Bolder, rounder, slightly larger, glowing treatment for the prominent CTA
   buttons in page heroes. Auto-applied to any button inside a hero action
   container (`.page-hero-actions` / home's `.home-cta-row` / the Price-it
   intro card's `.forecast-cta-actions`) so every app and marketing hero CTA
   is covered without per-button tagging, plus the explicit `.btn-cta`
   modifier for bespoke marketing heroes (the product landing pages) that
   don't use those containers. Dense product-UI buttons (forms, wizards,
   tables) never sit in a hero container and don't carry `.btn-cta`, so they
   stay on the compact base — do not move these properties onto the base
   variants. */
.btn-cta,
.page-hero-actions .btn,
.home-cta-row .btn,
.forecast-cta-actions .btn {
  --bs-btn-border-radius: 0.625rem;   /* "quite rounded" — softer than the near-square base */
  --bs-btn-padding-y: 0.625rem;       /* a fraction larger than btn-lg (0.5rem) */
  --bs-btn-padding-x: 1.5rem;         /* btn-lg is 1.25rem */
  --bs-btn-font-size: 1.0625rem;      /* btn-lg is 1rem */
  font-family: var(--varial-font-family);
  font-weight: 700;
}
/* Primary CTA gains the amber CTA's glow, tinted to brand teal.
   (15, 116, 91) == --varial-primary / --bs-primary-rgb. The amber btn-accent
   keeps its own glow from its variant rule above. */
.btn-primary.btn-cta,
.page-hero-actions .btn-primary,
.home-cta-row .btn-primary,
.forecast-cta-actions .btn-primary {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 4px 20px rgba(var(--varial-action-rgb), 0.45);
}
.btn-primary.btn-cta:hover,
.page-hero-actions .btn-primary:hover,
.home-cta-row .btn-primary:hover,
.forecast-cta-actions .btn-primary:hover {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.10), 0 8px 28px rgba(var(--varial-action-rgb), 0.50);
}
/* Green CTA glow — same treatment, tinted to --varial-green (15, 116, 91).
   Keeps green hero CTAs (Sign up, the dashboard's Request a demo) in the same
   glowing family as the blue and amber siblings. */
.btn-success.btn-cta,
.page-hero-actions .btn-success,
.home-cta-row .btn-success,
.forecast-cta-actions .btn-success {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 4px 20px rgba(var(--varial-action-rgb), 0.45);
}
.btn-success.btn-cta:hover,
.page-hero-actions .btn-success:hover,
.home-cta-row .btn-success:hover,
.forecast-cta-actions .btn-success:hover {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.10), 0 8px 28px rgba(var(--varial-action-rgb), 0.50);
}

/* --- Compact glow modifiers -----------------------------------------------
   The hero CTA skin (`.btn-cta` / `.page-hero-actions .btn`) glows *and* bumps the
   size, so it can't be used on dense product-UI buttons (the style guide forbids
   `.btn-cta` outside a hero). These two modifiers add ONLY the colour-matched glow —
   no padding/font change — so a compact `.btn-sm` in a card header can carry the same
   blue/green glow as the hero CTAs while staying its normal size. Pair with the solid
   variant, e.g. `.btn.btn-sm.btn-success.btn-glow-success`. */
.btn-glow-primary {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.10), 0 3px 14px rgba(var(--varial-action-rgb), 0.45);
}
.btn-glow-primary:hover {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08), 0 6px 20px rgba(var(--varial-action-rgb), 0.52);
}
.btn-glow-success {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.10), 0 3px 14px rgba(var(--varial-action-rgb), 0.45);
}
.btn-glow-success:hover {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08), 0 6px 20px rgba(var(--varial-action-rgb), 0.52);
}

/* Card styling → owned by components/cards.css (do not duplicate here) */

/* Tables — compact body text, white rows to lift off cream page bg */
.table {
  font-size: var(--text-sm, 0.875rem);
  --bs-table-bg: var(--varial-white, #fff);
}
.table td {
  vertical-align: middle;
}
@media (min-width: 768px) {
  .table-forecast {
    table-layout: fixed;
  }
}
.table thead th {
  font-family: var(--varial-font-heading);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--varial-gray-800, #211F1C);
  border-bottom-width: 2px;
}

/* Form controls — compact, warm border, white bg to lift off cream page surface */
.form-control,
.form-select {
  padding: 0.25rem 0.625rem;
  font-size: var(--text-sm, 0.875rem);
  border-color: var(--varial-border-interactive, #948B72);
  border-radius: var(--varial-radius-sm, 0.25rem);
  background-color: var(--varial-white, #fff);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--varial-primary-light, #2748C8);
  box-shadow: 0 0 0 0.2rem rgba(27, 58, 160, 0.12);
}

/* Browser autofill — Chrome/WebKit paints its own pale background and ignores
   the theme, so an autofilled field rendered the body text colour (light on
   dark) over a light fill = unreadable. Pin the text fill and repaint the
   background to the theme surface via the inset box-shadow trick. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--varial-gray-900, #131210);
  caret-color: var(--varial-gray-900, #131210);
  -webkit-box-shadow: 0 0 0 1000px var(--varial-white, #fff) inset;
}

[data-bs-theme="dark"] .form-control:-webkit-autofill,
[data-bs-theme="dark"] .form-control:-webkit-autofill:hover,
[data-bs-theme="dark"] .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--varial-gray-900);
  caret-color: var(--varial-gray-900);
  -webkit-box-shadow: 0 0 0 1000px var(--varial-gray-50) inset;
}

/* Links — scoped to content area (not sidebar/navbar). Marketing home/footer
   links (.home-nav-*, .home-footer-*) opt out — they own their own colour.
   The draft homepage redesign (.hc-*) opts out the same way, as do the
   results tabs, the app footer, the report contents list and list row names,
   which set their own quieter colours. */
body:not(.docs-shell-page):not(.docs-hub-page) .content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.btn-new-forecast):not(.dashboard-guest-cta-btn-primary):not(.home-nav-link):not(.home-nav-login):not(.home-footer-link):not(.home-footer-signin):not(.usecase-cta-row):not(.hc-nav-link):not(.hc-btn):not(.hc-btn-ghost):not(.hc-vx-promo-link):not(.hc-contact-link):not(.marketing-link):not(.results-tab):not(.dashboard-footer-legal):not(.dashboard-footer-link):not(.wiki-nav a):not(.list-workspace a.fw-medium) {
  color: var(--varial-primary);
}
body:not(.docs-shell-page):not(.docs-hub-page) .content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.btn-new-forecast):not(.dashboard-guest-cta-btn-primary):not(.home-nav-link):not(.home-nav-login):not(.home-footer-link):not(.home-footer-signin):not(.usecase-cta-row):not(.hc-nav-link):not(.hc-btn):not(.hc-btn-ghost):not(.hc-vx-promo-link):not(.hc-contact-link):not(.marketing-link):not(.results-tab):not(.dashboard-footer-legal):not(.dashboard-footer-link):not(.wiki-nav a):not(.list-workspace a.fw-medium):hover {
  color: var(--varial-primary-dark);
}

/* Alerts — base sizing for any Bootstrap alert (legacy / non-flash uses).
   The unified flash-message styling lives in css/components/alerts.css under
   `.alert-varial` and is loaded after this file so it wins where it applies. */
.alert {
  border-radius: var(--varial-radius-md, 0.375rem);
  padding: 0.625rem 1rem;
  font-size: var(--text-sm, 0.875rem);
}
.alert-success:not(.alert-varial) { --bs-alert-bg: #ecfdf5; --bs-alert-color: #065f46; --bs-alert-border-color: #a7f3d0; }
.alert-danger:not(.alert-varial)  { --bs-alert-bg: #fef2f2; --bs-alert-color: #991b1b; --bs-alert-border-color: #fecaca; }
.alert-warning:not(.alert-varial) { --bs-alert-bg: #fffbeb; --bs-alert-color: #92400e; --bs-alert-border-color: #fde68a; }
.alert-info:not(.alert-varial)    { --bs-alert-bg: #eff6ff; --bs-alert-color: #1e40af; --bs-alert-border-color: #bfdbfe; }

/* Dark mode: the light alert tints + bg-light/bg-white utilities are bright
   patches on dark — repaint to dark-tinted surfaces with readable text. */
[data-bs-theme="dark"] .alert-success:not(.alert-varial) { --bs-alert-bg: rgba(34, 197, 94, 0.12);  --bs-alert-color: #A7F3D0; --bs-alert-border-color: rgba(34, 197, 94, 0.30); }
[data-bs-theme="dark"] .alert-danger:not(.alert-varial)  { --bs-alert-bg: rgba(248, 113, 113, 0.12); --bs-alert-color: #FECACA; --bs-alert-border-color: rgba(248, 113, 113, 0.30); }
[data-bs-theme="dark"] .alert-warning:not(.alert-varial) { --bs-alert-bg: rgba(245, 158, 11, 0.12);  --bs-alert-color: #FDE68A; --bs-alert-border-color: rgba(245, 158, 11, 0.30); }
[data-bs-theme="dark"] .alert-info:not(.alert-varial)    { --bs-alert-bg: rgba(96, 165, 250, 0.12);  --bs-alert-color: #BFDBFE; --bs-alert-border-color: rgba(96, 165, 250, 0.30); }

[data-bs-theme="dark"] .bg-light { background-color: var(--varial-bg-subtle) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--varial-card-bg) !important; }

/* ----------------------------------------
   3b. Bootstrap Component Font Resets
   Bootstrap 5 sets font vars as LOCALLY SCOPED properties on the component
   element itself (e.g. `.dropdown-menu { --bs-dropdown-font-size: 1rem }`).
   That means `:root` overrides are completely ignored for those vars — we must
   re-declare them here at the component level. Font-family also needs explicit
   override on tooltip/popover since they hardcode var(--bs-font-sans-serif).
   ---------------------------------------- */

/* Dropdown — default is 1rem scoped on .dropdown-menu */
.dropdown-menu {
  --bs-dropdown-font-size: var(--text-sm, 0.875rem);
  font-family: var(--varial-font-family);
}

/* Tooltip — font-family is hardcoded as var(--bs-font-sans-serif) in BS5 rule */
.tooltip {
  font-family: var(--varial-font-family);
  /* --bs-tooltip-font-size: 0.875rem is already the BS5 default — no change needed */
}

/* Popover — same hardcoded font-family; header defaults to 1rem */
.popover {
  font-family: var(--varial-font-family);
  --bs-popover-header-font-size: var(--text-sm, 0.875rem);
}

/* ----------------------------------------
   4. Layout — sidebar + topnav visual overrides
   Structural positioning lives in layout.css.
   This section owns visual properties for sidebar nav items,
   collapsed-state visual adjustments, and brand/chrome details.
   No !important needed — layout.css owns the structure,
   Falcon is gone, no specificity battles remain.
   ---------------------------------------- */

.navbar-brand {
  font-family: var(--varial-font-heading);
  font-weight: 700;
  font-size: 1rem;
}

/* --- Sidebar visual — icons, links, active states ---------------------- */
/* Navbar nav must fill the full sidebar width so nav items stretch edge-to-edge */
.navbar-vertical .navbar-nav {
  width: 100%;
}

/*
  Icon pinning: padding-left is calculated so the icon centres inside the
  collapsed icon-rail (--vrl-sidebar-collapsed: 3.125rem / 50px).
  icon = 1.5rem (24px), sidebar margin = 0.5rem each side → available = 42px
  (50px - 2×0.25rem margin each side = 42px in collapsed; same margin kept always)
  centred left pad = (42px - 24px) / 2 = 9px ≈ 0.5625rem
  Using 0.5625rem keeps the icon at the same horizontal position in all three
  states — collapsed, hover-expanded, and fully expanded. The text simply
  appears to the right; overflow:hidden on .navbar-vertical clips it when narrow.
*/
.navbar-vertical .nav-link {
  padding: 0.45rem 0.75rem 0.45rem 0.5625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.375rem;
  margin: 0 0.25rem;
  min-height: 2rem;
  transition: background-color 150ms ease, color 150ms ease;
}
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus {
  background-color: rgba(4, 43, 29, 0.06);
}
.navbar-vertical .nav-link.active {
  background-color: rgba(4, 43, 29, 0.08);
  border-left: 3px solid var(--varial-nav, #042B1D);
  padding-left: calc(0.5625rem - 3px);
  font-weight: 600;
}
.navbar-vertical .nav-link-icon {
  width: 1.5rem;
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  margin-right: 0.25rem;
  color: var(--varial-gray-700, #38352F);
}
.navbar-vertical .nav-link-text {
  color: var(--varial-gray-600, #4D4A46);
  white-space: nowrap;
  overflow: hidden;
}
.navbar-vertical .nav-link:hover .nav-link-text,
.navbar-vertical .nav-link.active .nav-link-text {
  color: var(--varial-gray-900, #131210);
}
.navbar-vertical .navbar-brand {
  color: var(--varial-gray-900, #131210);
  padding-left: 0.8125rem;
}
/* Sidebar logo is inlined SVG — no filter needed */
.navbar-vertical .navbar-vertical-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1.75rem 0.75rem 0.25rem 0.5625rem;
  margin: 0 0.25rem;
}
.navbar-vertical hr {
  margin: 0.25rem 0.25rem;
  opacity: 0.15;
}

/* Sidebar expand/collapse toggle: strip Bootstrap btn chrome, then re-add a
   light rounded surface + hover/focus state so it clearly reads as a button.
   Target the button directly so color overrides var(--bs-btn-color). */
.navbar-vertical .navbar-vertical-toggle {
  color: var(--varial-gray-600, #4D4A46);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: color 0.15s ease, background 0.15s ease;
}
.navbar-vertical .navbar-vertical-toggle:hover,
.navbar-vertical .navbar-vertical-toggle:focus-visible {
  color: var(--varial-gray-900, #131210);
  background: rgba(4, 43, 29, 0.06);
  outline: none;
}
.navbar-vertical .toggle-icon-wrapper {
  display: flex;
  color: var(--varial-gray-600, #4D4A46);
  margin-left: auto;
  margin-right: 0.5625rem;
}
.vrl-sidebar-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Toggle icons are hidden by default; the per-breakpoint rules below reveal
   exactly one — directional chevrons on desktop, the burger on mobile. */
.vrl-toggle--collapse,
.vrl-toggle--expand,
.vrl-toggle--burger {
  display: none;
}

/* Vertical breathing room between the header (toggle + brand) and the first nav item */
.navbar-vertical .navbar-vertical-content {
  padding-top: 0.75rem;
}

/* --- Collapsed state visual adjustments -------------------------------- */
@media (min-width: 1200px) {
  /* The icon-rail is now the permanent desktop resting state (layout.js adds
     .navbar-vertical-collapsed unconditionally) and hovering the rail is the
     sole expand affordance — there's no more manual toggle button at this
     breakpoint, so hide it outright rather than carrying its now-pointless
     positioning/hover states. It still renders normally at tablet/mobile
     (<1200px), where it's the burger that opens the sidebar. */
  .navbar-vertical .navbar-vertical-toggle {
    display: none;
  }
  /* .toggle-icon-wrapper carries margin-left:auto (it pins the toggle button
     to the header's right edge in the expanded/tablet layout). With the
     button itself hidden above, that auto margin was still consuming the
     header's free space and pinning .navbar-brand to the left edge instead
     of centering it — justify-content:center on navbar-vertical-header
     never had any effect. Hide the whole wrapper so .navbar-brand is the
     only flex child left to center. */
  .navbar-vertical .toggle-icon-wrapper {
    display: none;
  }

  /* Collapsed icon-rail: swap the logo for the square teal icon and
     centre it in the 50px rail. */
  .navbar-vertical-collapsed .navbar-vertical .vrl-sidebar-brand-logo {
    display: none;
  }
  .navbar-vertical-collapsed .navbar-vertical .vrl-sidebar-brand-icon {
    display: block;
  }
  .navbar-vertical-collapsed .navbar-vertical .navbar-vertical-header {
    justify-content: center;
  }
  .navbar-vertical-collapsed .navbar-vertical .navbar-brand {
    margin: 0;
    padding: 0;
  }

  /* Hover-expand: swap back to the wordmark and left-align the header. */
  .navbar-vertical-collapsed .navbar-vertical:hover .vrl-sidebar-brand-logo {
    display: block;
  }
  .navbar-vertical-collapsed .navbar-vertical:hover .vrl-sidebar-brand-icon {
    display: none;
  }
  .navbar-vertical-collapsed .navbar-vertical:hover .navbar-vertical-header {
    justify-content: flex-start;
  }
  .navbar-vertical-collapsed .navbar-vertical:hover .navbar-brand {
    margin: 0;
    padding-left: 0.8125rem;
  }
}

/* Narrow screens (<1200px): give the burger toggle a visible border + padding
   so it's an obvious, easy-to-hit tap target rather than a bare icon. */
@media (max-width: 1199.98px) {
  .navbar-vertical .navbar-vertical-toggle {
    border: 1px solid rgba(4, 43, 29, 0.35);
    padding: 0.3125rem 0.5rem;
  }
}

/* ----------------------------------------
   5. Utility Classes
   ---------------------------------------- */
.text-mono { font-family: var(--varial-font-mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vrl-sidebar-brand-logo {
  display: block;
  max-height: 1.375rem;
  width: auto;
}

/* Square teal icon, only shown in the collapsed desktop icon-rail (the
   per-breakpoint rules in section 5 swap it in for the wordmark). */
.vrl-sidebar-brand-icon {
  display: none;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

/* ----------------------------------------
   6. App Chrome Details
   ---------------------------------------- */
/* Sidebar header padding (extracted from inline style) */
.navbar-vertical > .d-flex:first-child {
  padding: 0.65rem 0.5rem;
}

/* ----------------------------------------
   7. Pricing Page Components
   ---------------------------------------- */
.pricing-accent-bar {
  width: 60px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--varial-secondary-dark), var(--varial-secondary));
}
.pricing-card-free  { border-top: 4px solid var(--varial-green, #16A34A); }
.pricing-card-pro   { border-top: 4px solid var(--varial-primary-light, #2748C8); }
.pricing-card-view  { border-top: 4px solid var(--varial-purple, #7C3AED); }
.pricing-icon {
  width: 70px; height: 70px;
}
.pricing-icon-free  { background: linear-gradient(135deg, var(--varial-green-bg-light, #dcfce7), var(--varial-green-bg, #bbf7d0)); color: var(--varial-green, #16A34A); }
.pricing-icon-pro   { background: linear-gradient(135deg, var(--varial-primary-bg-light, #dbeafe), var(--varial-primary-bg, #bfdbfe)); color: var(--varial-primary-light, #2748C8); }
.pricing-icon-view  { background: linear-gradient(135deg, var(--varial-purple-bg-light, #ede9fe), var(--varial-purple-bg, #ddd6fe)); color: var(--varial-purple, #7C3AED); }
.pricing-cta {
  background: linear-gradient(135deg, var(--varial-primary-dark, #122880), var(--varial-primary-light, #2748C8));
}

/* Chart containers */
.chart-container     { width: 100%; height: 350px; }
.chart-container-sm  { width: 100%; height: 300px; }
.chart-container-md  { width: 100%; height: 400px; }

/* Form select auto-width */
.form-select-auto { width: auto; }

/* ----------------------------------------
   8. Style Guide Swatches
   ---------------------------------------- */
.swatch { min-width: 80px; }
.swatch-primary      { background: var(--varial-primary); }
.swatch-primary-light{ background: var(--varial-primary-light); }
.swatch-primary-dark { background: var(--varial-primary-dark); }
.swatch-accent       { background: var(--varial-accent); }
.swatch-accent-light { background: var(--varial-accent-light); }
.swatch-accent-dark  { background: var(--varial-accent-dark); }
.swatch-secondary    { background: var(--varial-secondary); }
.swatch-secondary-light { background: var(--varial-secondary-light); }
.swatch-secondary-dark  { background: var(--varial-secondary-dark); }
.swatch-success      { background: var(--varial-success); }
.swatch-info         { background: var(--varial-info); }
.swatch-warning      { background: #FFC107; }
.swatch-danger       { background: var(--varial-danger); }
.swatch-purple       { background: #7C3AED; }

/* ----------------------------------------
   9. HTMX Loading Indicators
   ---------------------------------------- */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}
.htmx-indicator-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--varial-primary);
  border-right-color: transparent;
  border-radius: 50%;
  animation: htmx-spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes htmx-spin {
  to { transform: rotate(360deg); }
}

/* Table loading spinner — centered in table container while API data loads */
.table-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: var(--varial-gray-500, #6B6763);
  gap: 0.5rem;
}
.table-loading-spinner::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--varial-primary, #1B3AA0);
  border-right-color: transparent;
  border-radius: 50%;
  animation: htmx-spin 0.6s linear infinite;
  flex-shrink: 0;
}

/* ── Brand text-color utilities ── */
.text-varial-primary { color: var(--varial-primary, #1B3AA0); }
.text-varial-purple  { color: var(--varial-purple,  #7C3AED); }
.text-varial-amber   { color: var(--varial-amber,   #F59E0B); }
.text-varial-green   { color: var(--varial-green,   #22C55E); }