/**
 * skylark-theme-final.css — Final cascade authority.
 * Owns: forcing ALL legacy CSS variables to canonical --sk-* tokens, plus
 *       direct element overrides that beat inline styles.
 * Does NOT own: canonical token definitions (those live in skylark-theme.css).
 *
 * Load order: skylark-theme.css → page inline <style> → [this file] (LAST)
 * This file MUST be the last <link> in <head> on every page.
 *
 * Root cause this solves: previous versions only aliased 23 of ~85 CSS
 * variables actually used across the 37 HTML pages. The other 62+ variables
 * (--yellow, --orange, admin's --bg/--text namespace, --bg-surface, --error,
 * --font-*, etc.) were invisible to the theme system. Additionally, 610+
 * hardcoded hex colors in inline style="" attributes were never overridden.
 * This file fixes both: complete variable aliasing + direct element selectors.
 */

/* ══════════════════════════════════════════════════════════════════════════════
 * STANDARD THEME — Complete legacy variable aliasing
 * ══════════════════════════════════════════════════════════════════════════════ */

:root,
html[data-theme="standard"] {
  /* ── Backgrounds ── */
  --bg-deep:          var(--sk-bg-primary) !important;
  --bg-card:          var(--sk-bg-card) !important;
  --bg-elevated:      var(--sk-bg-elevated) !important;
  --bg-hover:         var(--sk-bg-hover) !important;
  --bg-surface:       var(--sk-bg-surface) !important;
  --bg-card-hover:    var(--sk-bg-hover) !important;
  --bg-input:         var(--sk-bg-surface) !important;
  --bg2:              var(--sk-bg-card) !important;
  --bg3:              var(--sk-bg-elevated) !important;
  --bg:               var(--sk-bg-primary) !important;

  /* ── Accent / Gold ── */
  --accent:           var(--sk-accent) !important;
  --accent-dim:       var(--sk-accent-dim) !important;
  --accent-glow:      var(--sk-accent-glow) !important;
  --gold:             var(--sk-gold) !important;
  --gold-dim:         var(--sk-gold-dim) !important;
  --gold-glow:        var(--sk-gold-glow) !important;
  --gold-light:       rgba(245, 184, 46, 0.18) !important;
  --gold2:            var(--sk-gold) !important;
  --yellow:           var(--sk-gold) !important;
  --amber:            var(--sk-amber) !important;
  --orange:           #f97316 !important;

  /* ── Text ── */
  --text-primary:     var(--sk-text-primary) !important;
  --text-secondary:   var(--sk-text-secondary) !important;
  --text-muted:       var(--sk-text-muted) !important;
  --text:             var(--sk-text-primary) !important;
  --text2:            var(--sk-text-secondary) !important;
  --text3:            var(--sk-text-muted) !important;

  /* ── Borders ── */
  --border:           var(--sk-border) !important;
  --border-gold:      var(--sk-border-gold) !important;
  --border-accent:    var(--sk-border-gold) !important;
  --grid-line:        var(--sk-grid-line) !important;

  /* ── Semantic colors ── */
  --blue:             var(--sk-blue-soft) !important;
  --purple:           var(--sk-purple-soft) !important;
  --red:              var(--sk-stop) !important;
  --green:            #30d158 !important;
  --go:               var(--sk-go) !important;
  --caution:          var(--sk-caution) !important;
  --stop:             var(--sk-stop) !important;
  --error:            var(--sk-stop) !important;
  --teal:             #14b8a6 !important;
  --copper:           #d97706 !important;
  --pink:             #ec4899 !important;
  --neon:             #39ff14 !important;
  --accent2:          var(--sk-blue-soft) !important;

  /* ── Typography ── */
  --font-display:     'Space Grotesk', -apple-system, sans-serif !important;
  --font-body:        'Space Grotesk', -apple-system, sans-serif !important;
  --font-mono:        'DM Mono', 'Courier New', monospace !important;
  --sans:             'Space Grotesk', -apple-system, sans-serif !important;
  --mono:             'DM Mono', 'Courier New', monospace !important;

  /* ── Chart-specific semantic colors (untouched by theme for data integrity) ── */
  --overlay-color:    rgba(14, 165, 255, 0.08) !important;
  --spread-color:     var(--sk-gold) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
 * INSTITUTIONAL THEME — Complete legacy variable aliasing (deep navy + gold)
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="institutional"] {
  /* ── Backgrounds (deep navy) ── */
  --bg-deep:          var(--sk-bg-primary) !important;
  --bg-card:          var(--sk-bg-card) !important;
  --bg-elevated:      var(--sk-bg-elevated) !important;
  --bg-hover:         var(--sk-bg-hover) !important;
  --bg-surface:       var(--sk-bg-surface) !important;
  --bg-card-hover:    var(--sk-bg-hover) !important;
  --bg-input:         var(--sk-bg-surface) !important;
  --bg2:              var(--sk-bg-card) !important;
  --bg3:              var(--sk-bg-elevated) !important;
  --bg:               var(--sk-bg-primary) !important;

  /* ── Accent / Gold ── */
  --accent:           var(--sk-accent) !important;
  --accent-dim:       var(--sk-accent-dim) !important;
  --accent-glow:      var(--sk-accent-glow) !important;
  --gold:             var(--sk-gold) !important;
  --gold-dim:         var(--sk-gold-dim) !important;
  --gold-glow:        var(--sk-gold-glow) !important;
  --gold-light:       rgba(245, 184, 46, 0.22) !important;
  --gold2:            var(--sk-gold) !important;
  --yellow:           var(--sk-gold) !important;
  --amber:            var(--sk-amber) !important;
  --orange:           #d89b22 !important;

  /* ── Text ── */
  --text-primary:     var(--sk-text-primary) !important;
  --text-secondary:   var(--sk-text-secondary) !important;
  --text-muted:       var(--sk-text-muted) !important;
  --text:             var(--sk-text-primary) !important;
  --text2:            var(--sk-text-secondary) !important;
  --text3:            var(--sk-text-muted) !important;

  /* ── Borders ── */
  --border:           var(--sk-border) !important;
  --border-gold:      var(--sk-border-gold) !important;
  --border-accent:    var(--sk-border-gold) !important;
  --grid-line:        var(--sk-grid-line) !important;

  /* ── Semantic colors ── */
  --blue:             var(--sk-blue-soft) !important;
  --red:              var(--sk-stop) !important;
  --green:            #30d158 !important;
  --go:               var(--sk-go) !important;
  --caution:          var(--sk-caution) !important;
  --stop:             var(--sk-stop) !important;
  --error:            var(--sk-stop) !important;
  --teal:             #0ea5ff !important;
  --accent2:          var(--sk-blue) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
 * ADMIN THEME — Complete legacy variable aliasing
 * Bridges the admin --bg/--text namespace into --sk-* tokens
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="admin"] {
  /* ── Backgrounds ── */
  --bg-deep:          var(--sk-bg-primary) !important;
  --bg-card:          var(--sk-bg-card) !important;
  --bg-elevated:      var(--sk-bg-elevated) !important;
  --bg-hover:         var(--sk-bg-hover) !important;
  --bg:               var(--sk-bg-primary) !important;
  --bg2:              var(--sk-bg-card) !important;
  --bg3:              var(--sk-bg-elevated) !important;
  --bg-surface:       var(--sk-bg-surface) !important;
  --bg-input:         var(--sk-bg-surface) !important;

  /* ── Accent (admin purple) ── */
  --accent:           var(--sk-accent) !important;
  --accent-dim:       var(--sk-accent-dim) !important;
  --accent-glow:      var(--sk-accent-glow) !important;
  --accent2:          #6366f1 !important;
  --gold:             var(--sk-gold) !important;
  --gold-dim:         var(--sk-gold-dim) !important;
  --gold-glow:        var(--sk-gold-glow) !important;
  --yellow:           #f59e0b !important;

  /* ── Text ── */
  --text-primary:     var(--sk-text-primary) !important;
  --text-secondary:   var(--sk-text-secondary) !important;
  --text-muted:       var(--sk-text-muted) !important;
  --text:             var(--sk-text-primary) !important;
  --text2:            var(--sk-text-secondary) !important;
  --text3:            var(--sk-text-muted) !important;

  /* ── Borders ── */
  --border:           var(--sk-border) !important;
  --grid-line:        var(--sk-grid-line) !important;

  /* ── Semantic colors ── */
  --red:              #ef4444 !important;
  --green:            #22c55e !important;
  --blue:             var(--sk-blue-soft) !important;
  --orange:           #f97316 !important;
  --error:            #ef4444 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * GLOBAL ELEMENT OVERRIDES — Force theme on all elements
 * These use !important to beat inline <style> blocks and style="" attributes
 * ══════════════════════════════════════════════════════════════════════════════ */

/* ── Body / HTML — the base canvas ── */
html, body {
  background: var(--sk-bg-primary) !important;
  color: var(--sk-text-primary) !important;
}

/* ── Standard body gets subtle depth ── */
html[data-theme="standard"] body {
  background: #05070c !important;
}

/* ── Institutional body gets deep navy ── */
html[data-theme="institutional"],
html[data-theme="institutional"] body {
  background: #030914 !important;
  color: #f0f4fc !important;
}

/* ── Admin body ── */
html[data-theme="admin"] body {
  background: #06060e !important;
}

/* ── Navigation (all themes) ── */
nav,
#sky-nav,
.navbar,
.nav-bar {
  background: rgba(5, 7, 12, 0.92) !important;
  border-bottom: 1px solid var(--sk-border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

html[data-theme="institutional"] nav,
html[data-theme="institutional"] #sky-nav {
  background: rgba(3, 9, 20, 0.95) !important;
  border-bottom-color: rgba(245, 184, 46, 0.12) !important;
}

/* ── Logo ── */
.logo,
.sky-nav-logo {
  color: var(--sk-text-primary) !important;
}
html[data-theme="institutional"] .logo,
html[data-theme="institutional"] .sky-nav-logo {
  color: var(--sk-gold) !important;
}

/* ── Nav links ── */
.nav-link {
  color: var(--sk-text-muted) !important;
  border-color: var(--sk-border) !important;
}
.nav-link:hover {
  color: var(--sk-text-primary) !important;
  border-color: var(--sk-text-muted) !important;
}
.nav-link.accent {
  color: var(--sk-gold) !important;
  border-color: var(--sk-accent-dim) !important;
}
.nav-link.accent:hover {
  background: var(--sk-accent-dim) !important;
  border-color: var(--sk-gold) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * HOMEPAGE HERO — Cyan highlights per mockup
 * The mockup shows "liquidity cycles" highlighted in cyan, not gold.
 * This is the most visible change and makes the theme transformation obvious.
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="standard"] .hero-eyebrow {
  color: #00e5ff !important;
}
html[data-theme="standard"] .hero-eyebrow::before {
  background: linear-gradient(90deg, #00e5ff, var(--sk-gold)) !important;
}
html[data-theme="standard"] .hero h1 .highlight {
  color: #00e5ff !important;
}

/* Hero glow orbs — blue/cyan cool tone */
html[data-theme="standard"] .glow-orb {
  background: radial-gradient(circle, rgba(14, 165, 255, 0.12) 0%, transparent 70%) !important;
}
html[data-theme="standard"] .glow-orb-1 {
  background: radial-gradient(circle, rgba(0, 229, 255, 0.10) 0%, transparent 70%) !important;
}

/* ── Stat values ── */
.stat-value,
.nowcast-stat-value {
  color: var(--sk-gold) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * ALL CARDS — Force theme backgrounds globally
 * These selectors cover every card variant found across all 37 pages.
 * Uses !important to beat inline <style> block definitions.
 * ══════════════════════════════════════════════════════════════════════════════ */

.nowcast-card,
.chart-wrapper,
.value-card,
.timeline-item,
.trust-item,
.indicator-card,
.plan-card,
.chart-card,
.info-card,
.data-card,
.module-card,
.analysis-card,
.access-card,
.scatter-card,
.gbc-card,
.gfc-card,
.flp-card,
.bmi-card,
.report-section,
.metric-box,
.intel-card,
.sk-card {
  background: var(--sk-bg-card) !important;
  border-color: var(--sk-border) !important;
}

/* Card hover states */
.nowcast-card:hover,
.indicator-card:hover,
.plan-card:hover,
.timeline-item:hover,
.trust-item:hover,
.chart-card:hover,
.info-card:hover,
.data-card:hover,
.intel-card:hover {
  border-color: rgba(245, 184, 46, 0.20) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Card accent top lines — gold gradient */
.nowcast-card::before,
.indicator-card::before,
.chart-card::before {
  background: linear-gradient(90deg, var(--sk-gold) 0%, rgba(14, 165, 255, 0.3) 50%, transparent 100%) !important;
}

/* Featured cards */
.value-card.featured,
.plan-card.featured {
  border-color: rgba(245, 184, 46, 0.25) !important;
}
.value-card.featured::before,
.plan-card.featured::before {
  background: linear-gradient(90deg, var(--sk-gold) 0%, var(--sk-blue-soft) 50%, var(--sk-purple-soft) 100%) !important;
}

/* ── Admin card overrides ── */
html[data-theme="admin"] .card,
html[data-theme="admin"] .stat-card,
html[data-theme="admin"] .modal {
  background: var(--sk-bg-card) !important;
  border-color: var(--sk-border) !important;
}
html[data-theme="admin"] .card:hover {
  border-color: rgba(167, 139, 250, 0.22) !important;
}
html[data-theme="admin"] .snippet-block {
  background: var(--sk-bg-elevated) !important;
  border-color: var(--sk-border) !important;
}
html[data-theme="admin"] header h1,
html[data-theme="admin"] .stat-value,
html[data-theme="admin"] .modal h2 {
  color: var(--sk-text-primary) !important;
}
html[data-theme="admin"] .stat-label,
html[data-theme="admin"] .form-label,
html[data-theme="admin"] .section-title {
  color: var(--sk-text-muted) !important;
}
html[data-theme="admin"] .form-input,
html[data-theme="admin"] .form-textarea,
html[data-theme="admin"] .form-select {
  background: var(--sk-bg-elevated) !important;
  border-color: var(--sk-border) !important;
  color: var(--sk-text-primary) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * BUTTONS — Force theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.btn-primary,
.plan-btn.primary,
.sk-btn,
.sk-btn-primary {
  background: var(--sk-gold) !important;
  color: #030914 !important;
}
.btn-primary:hover,
.plan-btn.primary:hover,
.sk-btn:hover,
.sk-btn-primary:hover {
  background: #ffc940 !important;
  color: #030914 !important;
}

/* Outline / secondary buttons */
.btn-outline,
.sk-btn-outline,
.plan-btn.secondary {
  border-color: var(--sk-border) !important;
  color: var(--sk-text-secondary) !important;
}

/* Export / action buttons */
.btn-export,
.access-btn {
  background: var(--sk-gold-dim) !important;
  color: var(--sk-gold) !important;
  border-color: rgba(245, 184, 46, 0.28) !important;
}
.btn-export:hover,
.access-btn:hover {
  background: rgba(245, 184, 46, 0.18) !important;
  border-color: rgba(245, 184, 46, 0.45) !important;
}

/* Admin btn-primary uses purple gradient */
html[data-theme="admin"] .btn-primary {
  background: linear-gradient(135deg, var(--sk-accent), #6366f1) !important;
  color: #fff !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * FORM INPUTS — Force theme on all input elements
 * ══════════════════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  background: var(--sk-bg-surface) !important;
  border-color: var(--sk-border) !important;
  color: var(--sk-text-primary) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(245, 184, 46, 0.40) !important;
  box-shadow: 0 0 0 2px rgba(245, 184, 46, 0.10) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * EYEBROW / SECTION LABELS — Force theme colors
 * These are used on almost every page and are highly visible.
 * ══════════════════════════════════════════════════════════════════════════════ */

.value-eyebrow,
.trust-eyebrow,
.pricing-eyebrow,
.sk-eyebrow {
  color: var(--sk-gold) !important;
}
.value-eyebrow::before,
.trust-eyebrow::before,
.pricing-eyebrow::before,
.sk-eyebrow::before {
  background: var(--sk-gold) !important;
}

/* Section labels get gold treatment */
.section-label,
.sk-section-label {
  color: var(--sk-text-muted) !important;
}
.section-label::after,
.sk-section-label::after {
  background: var(--sk-border) !important;
}

/* Tier labels */
.value-tier-label.premium,
.plan-label.premium,
.indicator-card-label {
  color: var(--sk-gold) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * TEXT COLOR OVERRIDES — Force theme on common text elements
 * ══════════════════════════════════════════════════════════════════════════════ */

.nowcast-label,
.stat-label,
.timeline-date,
.timeline-signal,
.trust-label,
.value-tier-label,
.plan-label,
.hero-inst-note,
.timestamp-meta,
.nowcast-stat-label {
  color: var(--sk-text-muted) !important;
}

.nowcast-note,
.value-item,
.timeline-note,
.hero-sub,
.plan-features li,
.indicator-card-description,
.btn-secondary-link,
.page-subtitle {
  color: var(--sk-text-secondary) !important;
}

.trust-value,
.plan-price {
  color: var(--sk-text-primary) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * TAB NAVIGATION — Force theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.tab-nav {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: var(--sk-border) !important;
}
.tab-btn {
  color: var(--sk-text-secondary) !important;
}
.tab-btn:hover {
  color: var(--sk-text-primary) !important;
}
.tab-btn.active {
  background: var(--sk-accent-dim) !important;
  color: var(--sk-gold) !important;
  border-color: rgba(245, 184, 46, 0.22) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * LOADING STATES / SPINNERS — Force theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.loading-spinner,
.spinner {
  border-color: var(--sk-border) !important;
  border-top-color: var(--sk-gold) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * BADGES — Force theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.inst-badge {
  color: var(--sk-gold) !important;
  background: var(--sk-gold-dim) !important;
  border-color: rgba(245, 184, 46, 0.22) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * TABLE OVERRIDES
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="admin"] .sub-table th {
  color: var(--sk-text-muted) !important;
  border-bottom-color: var(--sk-border) !important;
}
html[data-theme="admin"] .sub-table td {
  color: var(--sk-text-secondary) !important;
  border-bottom-color: var(--sk-border-soft, rgba(255,255,255,0.04)) !important;
}
html[data-theme="admin"] .tabs {
  border-bottom-color: var(--sk-border) !important;
}
html[data-theme="admin"] .tab {
  color: var(--sk-text-muted) !important;
}
html[data-theme="admin"] .tab.active {
  color: var(--sk-accent) !important;
  border-bottom-color: var(--sk-accent) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * PLAN DEAL BADGE
 * ══════════════════════════════════════════════════════════════════════════════ */

.plan-deal {
  color: var(--sk-blue-soft) !important;
  background: rgba(124, 147, 238, 0.1) !important;
  border-color: rgba(124, 147, 238, 0.2) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * BORDER OVERRIDES — Force all visible borders to theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.stats-bar {
  border-color: var(--sk-border) !important;
}

/* Chart header bar */
.chart-header-bar {
  border-bottom-color: var(--sk-border) !important;
}
.chart-header-bar a {
  color: var(--sk-gold) !important;
  border-color: var(--sk-accent-dim) !important;
}
.chart-header-bar a:hover {
  background: var(--sk-accent-dim) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * INSTITUTIONAL DASHBOARD — Deep navy + gold card treatment
 * ══════════════════════════════════════════════════════════════════════════════ */

/* Page shell */
html[data-theme="institutional"] .page {
  background: transparent !important;
}

/* Page header elements */
html[data-theme="institutional"] .page-eyebrow {
  color: var(--sk-gold) !important;
}
html[data-theme="institutional"] .page-eyebrow::before {
  background: var(--sk-gold) !important;
}

html[data-theme="institutional"] .page-title {
  background: linear-gradient(135deg, #f0f4fc 0%, var(--sk-gold) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html[data-theme="institutional"] .page-subtitle {
  color: var(--sk-text-secondary) !important;
}

/* Institutional badge */
html[data-theme="institutional"] .inst-badge {
  color: var(--sk-gold) !important;
  background: var(--sk-gold-dim) !important;
  border-color: rgba(245, 184, 46, 0.28) !important;
}

/* Section labels — gold on institutional */
html[data-theme="institutional"] .section-label {
  color: var(--sk-gold) !important;
}
html[data-theme="institutional"] .section-label::after {
  background: rgba(245, 184, 46, 0.15) !important;
}

/* ── Dash cards grid ───────────────────────────── */
html[data-theme="institutional"] .dash-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(14, 165, 255, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(7, 24, 45, 0.96), rgba(3, 9, 20, 0.98)) !important;
  border: 1px solid rgba(245, 184, 46, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 36px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="institutional"] .dash-card:hover {
  border-color: rgba(245, 184, 46, 0.50) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 48px rgba(14, 165, 255, 0.12), 0 0 0 1px rgba(245, 184, 46, 0.15) !important;
  transform: translateY(-2px) !important;
}

html[data-theme="institutional"] .dash-card::before {
  opacity: 1 !important;
  background: linear-gradient(90deg, rgba(245, 184, 46, 0.9), rgba(14, 165, 255, 0.35), transparent) !important;
}

html[data-theme="institutional"] .dash-card-icon {
  color: var(--sk-blue) !important;
  filter: drop-shadow(0 0 8px rgba(14, 165, 255, 0.3)) !important;
}

html[data-theme="institutional"] .dash-card-title {
  color: var(--sk-text-primary) !important;
}

html[data-theme="institutional"] .dash-card-desc {
  color: var(--sk-text-secondary) !important;
}

/* ── Highlight cards (top 3) ── */
html[data-theme="institutional"] .highlight-card {
  background:
    radial-gradient(circle at 30% 0%, rgba(14, 165, 255, 0.08), transparent 40%),
    linear-gradient(180deg, var(--sk-bg-card), var(--sk-bg-primary)) !important;
  border-color: rgba(245, 184, 46, 0.24) !important;
}

html[data-theme="institutional"] .highlight-card::before {
  background: linear-gradient(90deg, var(--sk-gold), rgba(14, 165, 255, 0.4), transparent) !important;
}

html[data-theme="institutional"] .highlight-card:hover {
  border-color: rgba(245, 184, 46, 0.45) !important;
  box-shadow: 0 8px 32px rgba(14, 165, 255, 0.10) !important;
}

/* ── Access card ── */
html[data-theme="institutional"] .access-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(14, 165, 255, 0.08), transparent 50%),
    var(--sk-bg-card) !important;
  border-color: rgba(14, 165, 255, 0.12) !important;
}

html[data-theme="institutional"] .access-card::before {
  background: linear-gradient(90deg, var(--sk-gold), rgba(14, 165, 255, 0.4), transparent) !important;
}

/* ── Intel card ── */
html[data-theme="institutional"] .intel-card {
  background: var(--sk-bg-card) !important;
  border-color: rgba(14, 165, 255, 0.12) !important;
}

html[data-theme="institutional"] .intel-card:hover {
  border-color: rgba(245, 184, 46, 0.25) !important;
}

/* ── Tab navigation (institutional) ── */
html[data-theme="institutional"] .tab-nav {
  background: rgba(14, 165, 255, 0.04) !important;
  border-color: rgba(14, 165, 255, 0.10) !important;
}

html[data-theme="institutional"] .tab-btn.active {
  background: var(--sk-gold-dim) !important;
  color: var(--sk-gold) !important;
  border-color: rgba(245, 184, 46, 0.28) !important;
}

/* ── Ranking table (institutional) ── */
html[data-theme="institutional"] .rank-table th {
  background: rgba(14, 165, 255, 0.04) !important;
  border-bottom-color: rgba(14, 165, 255, 0.10) !important;
}

html[data-theme="institutional"] .rank-table th.sort-active {
  color: var(--sk-gold) !important;
}

html[data-theme="institutional"] .rank-table tbody tr:hover td {
  background: rgba(14, 165, 255, 0.06) !important;
}

html[data-theme="institutional"] .rank-table tbody tr.expanded td {
  background: rgba(245, 184, 46, 0.04) !important;
}

/* ── Control buttons (institutional) ── */
html[data-theme="institutional"] .ctrl-btn.active {
  background: var(--sk-gold-dim) !important;
  color: var(--sk-gold) !important;
  border-color: rgba(245, 184, 46, 0.28) !important;
}

/* ── Header meta ── */
html[data-theme="institutional"] .header-meta {
  color: var(--sk-text-muted) !important;
}

/* ── ALL institutional card types — deep navy + blue radial gradient ── */
html[data-theme="institutional"] .nowcast-card,
html[data-theme="institutional"] .chart-card,
html[data-theme="institutional"] .chart-wrapper,
html[data-theme="institutional"] .info-card,
html[data-theme="institutional"] .data-card,
html[data-theme="institutional"] .module-card,
html[data-theme="institutional"] .analysis-card,
html[data-theme="institutional"] .indicator-card,
html[data-theme="institutional"] .inst-module,
html[data-theme="institutional"] .scatter-card,
html[data-theme="institutional"] .gbc-card,
html[data-theme="institutional"] .gfc-card,
html[data-theme="institutional"] .flp-card,
html[data-theme="institutional"] .bmi-card,
html[data-theme="institutional"] .report-section,
html[data-theme="institutional"] .timeline-item,
html[data-theme="institutional"] .metric-box,
html[data-theme="institutional"] .value-card,
html[data-theme="institutional"] .plan-card,
html[data-theme="institutional"] .trust-item,
html[data-theme="institutional"] .sk-card {
  background:
    radial-gradient(circle at 15% 0%, rgba(14, 165, 255, 0.06), transparent 35%),
    var(--sk-bg-card) !important;
  border-color: rgba(14, 165, 255, 0.09) !important;
}

html[data-theme="institutional"] .nowcast-card:hover,
html[data-theme="institutional"] .chart-card:hover,
html[data-theme="institutional"] .info-card:hover,
html[data-theme="institutional"] .data-card:hover,
html[data-theme="institutional"] .indicator-card:hover,
html[data-theme="institutional"] .timeline-item:hover,
html[data-theme="institutional"] .trust-item:hover,
html[data-theme="institutional"] .value-card:hover,
html[data-theme="institutional"] .plan-card:hover {
  border-color: rgba(245, 184, 46, 0.28) !important;
  box-shadow: 0 6px 28px rgba(14, 165, 255, 0.10) !important;
}

/* Accent top lines on institutional cards */
html[data-theme="institutional"] .nowcast-card::before,
html[data-theme="institutional"] .chart-card::before,
html[data-theme="institutional"] .indicator-card::before,
html[data-theme="institutional"] .highlight-card::before {
  background: linear-gradient(90deg, var(--sk-gold), rgba(14, 165, 255, 0.4), transparent) !important;
}

/* Institutional glow orbs — blue tint */
html[data-theme="institutional"] .glow-orb {
  background: radial-gradient(circle, rgba(14, 165, 255, 0.08) 0%, transparent 70%) !important;
}

/* Institutional grid-bg — blue tint */
html[data-theme="institutional"] .grid-bg {
  background-image:
    linear-gradient(rgba(14, 165, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 255, 0.03) 1px, transparent 1px) !important;
}

/* ── Institutional nav/status/ticker ── */
html[data-theme="institutional"] #sky-system-status {
  background: rgba(6, 20, 38, 0.96) !important;
  border-bottom-color: rgba(14, 165, 255, 0.15) !important;
}

html[data-theme="institutional"] #sky-market-ticker {
  background: #030914 !important;
  border-bottom-color: rgba(14, 165, 255, 0.12) !important;
}

html[data-theme="institutional"] #sky-intel-rail,
html[data-theme="institutional"] #sky-intel-rail-panel {
  background: rgba(3, 9, 20, 0.97) !important;
  border-left-color: rgba(245, 184, 46, 0.15) !important;
}

/* Institutional form inputs — deeper navy */
html[data-theme="institutional"] input[type="text"],
html[data-theme="institutional"] input[type="email"],
html[data-theme="institutional"] input[type="password"],
html[data-theme="institutional"] input[type="number"],
html[data-theme="institutional"] input[type="search"],
html[data-theme="institutional"] select,
html[data-theme="institutional"] textarea {
  background: var(--sk-bg-surface) !important;
  border-color: rgba(14, 165, 255, 0.10) !important;
}

html[data-theme="institutional"] input:focus,
html[data-theme="institutional"] select:focus,
html[data-theme="institutional"] textarea:focus {
  border-color: rgba(245, 184, 46, 0.40) !important;
  box-shadow: 0 0 0 2px rgba(245, 184, 46, 0.10) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * GLOBAL LINK COLOR
 * ══════════════════════════════════════════════════════════════════════════════ */

a {
  color: inherit;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * FOOTER — Force theme
 * ══════════════════════════════════════════════════════════════════════════════ */

footer,
.footer,
.site-footer {
  background: var(--sk-bg-primary) !important;
  border-top-color: var(--sk-border) !important;
  color: var(--sk-text-muted) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * MODAL / OVERLAY OVERRIDES
 * ══════════════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
}
.modal {
  background: var(--sk-bg-card) !important;
  border-color: var(--sk-border) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * ADMIN NOTICES — Force theme semantic colors
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="admin"] .notice-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
}
html[data-theme="admin"] .notice-warn {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  color: #fcd34d !important;
}
html[data-theme="admin"] .notice-err {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}
html[data-theme="admin"] .notice-ok {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
  color: #86efac !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * SEMANTIC REGIME COLOR PRESERVATION
 * Chart colors for financial data must remain correct regardless of theme.
 * ══════════════════════════════════════════════════════════════════════════════ */

.nowcast-indicator.go {
  background: rgba(0, 229, 160, 0.15) !important;
  border-color: rgba(0, 229, 160, 0.3) !important;
}
.nowcast-indicator.caution {
  background: rgba(245, 184, 46, 0.15) !important;
  border-color: rgba(245, 184, 46, 0.3) !important;
}
.nowcast-indicator.stop {
  background: rgba(255, 95, 87, 0.15) !important;
  border-color: rgba(255, 95, 87, 0.3) !important;
}

.timeline-dot.go { background: #00e5a0 !important; }
.timeline-dot.caution { background: var(--sk-gold) !important; }
.timeline-dot.stop { background: #ff5f57 !important; }


/* ══════════════════════════════════════════════════════════════════════════════
 * CHATBOT OVERRIDE — Ensure chatbot widget respects theme
 * ══════════════════════════════════════════════════════════════════════════════ */

#chatbot-container,
#chatbot-toggle {
  /* Chatbot bubble uses gold accent */
  border-color: var(--sk-gold) !important;
}
