/* ============================================================
   DCF Valuation Studio — modern fintech UI
   Premium light theme: deep navy structure, teal/cyan accent,
   gold hero highlight, glassmorphism + subtle glows.
   All original element IDs / Bootstrap hooks preserved.
   ============================================================ */

:root {
  /* Structure */
  --ink:        #0b1524;   /* near-black navy text */
  --ink-soft:   #334155;   /* body text */
  --muted:      #64748b;   /* secondary text */
  --line:       #e6ebf2;   /* hairline borders */
  --surface:    #ffffff;
  --surface-2:  #f8fafc;
  /* aliases used by a legacy .card rule — keep them mapped so borders/bg
     follow the theme instead of falling back to currentColor */
  --border-subtle: var(--line);
  --bg-card:       var(--surface);

  /* Brand */
  --navy:       #0b1e39;
  --navy-2:     #12294b;
  --primary:    #0ea5a4;   /* teal */
  --primary-dk: #0b8281;
  --cyan:       #22d3ee;
  --gold:       #e0a418;
  --pos:        #10b981;   /* emerald (gains) */
  --neg:        #e0475a;   /* red (outflows)  */

  /* Extended accent palette (colorful section/tile accents) */
  --blue:       #3b82f6;
  --indigo:     #6366f1;
  --violet:     #8b5cf6;
  --rose:       #f43f5e;
  --emerald:    #10b981;
  --amber:      #f59e0b;
  --sky:        #0ea5e9;

  /* Effects */
  --shadow-sm:  0 1px 2px rgba(11,21,36,.04), 0 1px 3px rgba(11,21,36,.06);
  --shadow-md:  0 4px 12px rgba(11,21,36,.06), 0 10px 30px rgba(11,21,36,.06);
  --shadow-lg:  0 12px 34px rgba(11,30,57,.14);
  --glow-teal:  0 0 0 1px rgba(14,165,164,.18), 0 8px 26px rgba(14,165,164,.18);
  --radius:     16px;

  /* Bootstrap overrides */
  --bs-primary: #0ea5a4;
  --bs-body-color: var(--ink-soft);
  --bs-border-color: var(--line);
}

/* Theme toggle button in the navbar (the dark palette lives at the very end
   of this file so it overrides the institutional "Slate & Signal" theme). */
.theme-toggle i { transition: transform .2s ease; }
.theme-toggle:hover i { transform: rotate(-12deg) scale(1.08); }

/* ---- Base ---- */
.app-body {
  min-height: 100vh;
  color: var(--ink-soft);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #eef2f8;
  background-image:
    radial-gradient(1100px 600px at 12% -8%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(1000px 620px at 108% 4%, rgba(99,102,241,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(14,165,164,.08), transparent 60%);
  background-attachment: fixed;
}

.tabular, .kpi-value, table td, table th,
#fcf-table td, #sensitivity-table td, #sensitivity-table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

/* ---- Navbar (glassy) ---- */
.app-navbar {
  background: linear-gradient(100deg, rgba(11,30,57,.96) 0%, rgba(18,41,75,.94) 55%, rgba(12,60,68,.92) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(34,211,238,.18);
  box-shadow: 0 6px 24px rgba(6,15,30,.28);
}
.app-navbar .navbar-brand {
  letter-spacing: -0.02em;
  font-weight: 800;
  background: linear-gradient(90deg, #ffffff 0%, #a7f3ef 60%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.app-navbar .navbar-brand i { -webkit-text-fill-color: var(--cyan); }
.app-navbar .btn { border-radius: 10px; transition: all .18s ease; }
.app-navbar .btn-outline-info {
  color: #a5f3f0; border-color: rgba(34,211,238,.35);
}
.app-navbar .btn-outline-info:hover {
  background: rgba(34,211,238,.16); color: #e6fdff; border-color: rgba(34,211,238,.6);
}
.app-navbar .btn-outline-light:hover { background: rgba(255,255,255,.12); }

/* ---- Cards ---- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card.shadow-sm { box-shadow: var(--shadow-md) !important; }
.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-header i.text-primary { color: var(--primary) !important; }

/* section subheads inside the form */
h6.text-secondary {
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .68rem !important;
}

.sticky-panel { position: sticky; top: 1rem; }

/* ---- Buttons ---- */
.btn { border-radius: 11px; font-weight: 600; letter-spacing: -0.01em; }
.btn-primary {
  background: linear-gradient(120deg, var(--primary) 0%, #0f766e 100%);
  border: none;
  box-shadow: 0 6px 16px rgba(14,165,164,.30);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(14,165,164,.38);
}
.btn-outline-success {
  color: var(--pos); border-color: rgba(16,185,129,.5);
}
.btn-outline-success:hover { background: var(--pos); border-color: var(--pos); }
.btn-outline-danger { color: var(--neg); border-color: rgba(224,71,90,.45); }
.btn-outline-danger:hover { background: var(--neg); border-color: var(--neg); }
.btn-outline-primary { color: var(--primary-dk); border-color: rgba(14,165,164,.5); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }

/* ---- Form controls ---- */
.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--line);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,165,164,.16);
}
.form-control[readonly] {
  background: var(--surface-2);
  color: var(--muted);
  border-style: dashed;
}
.form-label { color: var(--muted); }
.form-range::-webkit-slider-thumb { background: var(--primary); }
.form-range::-moz-range-thumb { background: var(--primary); }

/* ---- KPI cards ---- */
.kpi-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kpi-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--cyan));
  opacity: .9;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) !important; }
.kpi-card .card-body { padding: 0.95rem 1.05rem; }

/* Colorful KPI variants — distinct accent + tinted icon + value hue */
.kpi-card.kpi-blue::before   { background: linear-gradient(90deg, var(--blue), var(--sky)); }
.kpi-card.kpi-blue          { background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%); }
.kpi-card.kpi-blue .kpi-label i,   .kpi-card.kpi-blue .kpi-value   { color: var(--blue); }
.kpi-card.kpi-teal::before   { background: linear-gradient(90deg, var(--primary), var(--cyan)); }
.kpi-card.kpi-teal          { background: linear-gradient(180deg, #ffffff 0%, #f1fbfa 100%); }
.kpi-card.kpi-teal .kpi-label i,   .kpi-card.kpi-teal .kpi-value   { color: var(--primary-dk); }
.kpi-card.kpi-violet::before { background: linear-gradient(90deg, var(--violet), var(--indigo)); }
.kpi-card.kpi-violet        { background: linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%); }
.kpi-card.kpi-violet .kpi-label i, .kpi-card.kpi-violet .kpi-value { color: var(--violet); }

.kpi-card.highlight {
  background: linear-gradient(160deg, #0b1e39 0%, #10314f 100%);
  border-color: rgba(224,164,24,.4);
  box-shadow: 0 10px 30px rgba(11,30,57,.28) !important;
}
.kpi-card.highlight::before { background: linear-gradient(90deg, var(--gold), #f4c145); }
.kpi-card.highlight .kpi-label { color: #f4c988 !important; }
.kpi-card.highlight .kpi-value {
  background: linear-gradient(90deg, #ffe6a3, #f6c453);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kpi-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 3px; font-weight: 600;
}
.kpi-value {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", monospace;
  font-size: 1.45rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
}

/* ---- Charts ---- */
.chart-card .card-header { font-size: .85rem; padding-top: .65rem; padding-bottom: .65rem; }
.chart-wrap { position: relative; height: 190px; }
.chart-wrap-sm { height: 110px; }

/* ---- Tables (shared) ---- */
.table { color: var(--ink-soft); }
.table > :not(caption) > * > * { border-color: var(--line); }
thead.table-light th, .table-light th, .table-light td {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .04em;
  font-weight: 700;
  border-bottom: 1px solid var(--line) !important;
}
.table-hover > tbody > tr:hover > * {
  background: rgba(14,165,164,.05);
}

#fcf-table thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  white-space: nowrap;
}
#fcf-table td { font-size: .86rem; white-space: nowrap; }
#fcf-table tbody tr td:first-child { color: var(--ink); font-weight: 600; }

/* ---- Sensitivity grid ---- */
#sensitivity-table td, #sensitivity-table th { font-size: .82rem; }
#sensitivity-table thead th, #sensitivity-table tbody th {
  background: var(--surface-2); color: var(--muted);
}
#sensitivity-table .center-cell {
  outline: 2px solid var(--gold); outline-offset: -2px;
  background: rgba(224,164,24,.12); color: var(--ink); font-weight: 800;
}

/* ---- DCF Valuation Build-up waterfall ---- */
.ev-buildup { font-variant-numeric: tabular-nums; }
.ev-buildup thead th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.ev-buildup .bu-section td {
  background: linear-gradient(90deg, rgba(14,165,164,.08), rgba(34,211,238,.03));
  font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--navy); padding-top: .55rem; padding-bottom: .55rem;
  border-top: 1px solid var(--line);
}
.ev-buildup .bu-detail td { color: var(--muted); font-size: .84rem; padding-left: 1.5rem; }
.ev-buildup .bu-detail td:first-child { padding-left: 1.75rem; }
.ev-buildup .bu-subtotal td {
  font-weight: 700; color: var(--ink); border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.ev-buildup .bu-total td {
  font-weight: 800; font-size: 1.05rem; color: #ffffff;
  background: linear-gradient(120deg, var(--navy) 0%, #0e3b45 100%);
  border-top: 2px solid var(--primary);
}
.ev-buildup .bu-total td:first-child { border-radius: 0 0 0 10px; }
.ev-buildup .bu-total td:last-child { border-radius: 0 0 10px 0; }

/* ---- Badges & misc ---- */
.badge.text-bg-secondary { background: #eef2f7 !important; color: var(--muted) !important; font-weight: 600; }
.badge.text-bg-success { background: rgba(16,185,129,.15) !important; color: #0a7d55 !important; font-weight: 700; }
.alert-success {
  background: rgba(16,185,129,.09); border-color: rgba(16,185,129,.25); color: #0a7d55;
}
.alert-danger { background: rgba(224,71,90,.08); border-color: rgba(224,71,90,.25); color: #b23246; }

/* ---- WACC chip ---- */
.wacc-chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; border-radius: 12px;
  background: linear-gradient(120deg, #0b1e39 0%, #0e3b45 100%);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.18), 0 6px 18px rgba(11,30,57,.22);
}
.wacc-chip-label { color: #9fb3c8; font-size: .74rem; font-weight: 600; letter-spacing: .02em; }
.wacc-chip-value {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: 700; font-size: 1.05rem;
  background: linear-gradient(90deg, #a7f3ef, #67e8f9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* estimate table (upload screen) */
.hist-col { color: var(--ink-soft); }
.est-col { border-left: 2px solid var(--primary); }
.estimate-input { min-width: 90px; }

footer { border-top: 1px solid var(--line); }

/* subtle entrance for result cards */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.col-lg-9 .card { animation: rise .35s ease both; }

@media (max-width: 991px) {
  .sticky-panel { position: static; }
}

/* ---- Investment View (verdict) card ---- */
#verdict-card .card-header .badge { font-size: 0.8rem; padding: 0.4rem 0.7rem; letter-spacing: 0.03em; }
.verdict-tile {
  height: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.verdict-num {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
  margin-top: 2px;
}
.target-bar {
  position: relative;
  height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #e0475a 0%, #e0a418 50%, #10b981 100%);
  box-shadow: inset 0 0 0 1px rgba(11,21,36,.08);
}
.target-cur {
  position: absolute; top: -4px; width: 3px; height: 18px;
  background: var(--ink); border-radius: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* ---- Sensitivity heat-map ---- */
.sensitivity-heat { font-variant-numeric: tabular-nums; }
.sensitivity-heat th { background: var(--surface-2); color: var(--muted); font-weight: 700; }
.sensitivity-heat td { font-weight: 600; color: var(--ink); border: 1px solid rgba(255,255,255,.5); }
.sensitivity-heat .sens-na { background: #f1f5f9; color: #b6c0cc; font-weight: 400; }
.sensitivity-heat .sens-band { box-shadow: inset 0 0 0 1px rgba(224,164,24,.5); }
.sensitivity-heat .sens-base {
  outline: 2px solid var(--gold); outline-offset: -2px; font-weight: 800; color: var(--navy);
}
.sensitivity-heat .sens-above { box-shadow: inset 3px 0 0 var(--navy); }
.sens-legend-above { color: var(--navy); font-weight: 700; }

/* ============================================================
   Colorful + cleaner polish (Roboto)
   ============================================================ */
.app-body {
  background-color: #eef3fb;
  background-image:
    radial-gradient(1100px 620px at 10% -10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(1000px 640px at 110% 0%, rgba(139,92,246,.10), transparent 55%),
    radial-gradient(1000px 720px at 50% 120%, rgba(14,165,164,.09), transparent 60%);
}

/* Gradient icon chips on every card header — colorful yet uniform/clean */
.card-header i:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--cyan));
  color: #fff !important;
  font-size: .82rem;
  box-shadow: 0 3px 8px rgba(14,165,164,.28);
}
/* rotate chip hues across the results column for variety */
.col-lg-9 .card:nth-of-type(3n+1) .card-header i:first-child { background: linear-gradient(135deg, var(--blue), var(--sky)); box-shadow: 0 3px 8px rgba(59,130,246,.28); }
.col-lg-9 .card:nth-of-type(3n+2) .card-header i:first-child { background: linear-gradient(135deg, var(--violet), var(--indigo)); box-shadow: 0 3px 8px rgba(139,92,246,.28); }
.col-lg-9 .card:nth-of-type(3n+3) .card-header i:first-child { background: linear-gradient(135deg, var(--primary), var(--cyan)); box-shadow: 0 3px 8px rgba(14,165,164,.28); }

/* thin colored top accent on each result card */
.tab-pane > .card { position: relative; }
.tab-pane > .card::after {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), transparent 70%); opacity: .5;
}

/* Colorful verdict tiles */
#verdict-card { border-top: 3px solid var(--primary); }
.verdict-tile { background: linear-gradient(180deg, #ffffff, #f6f9ff); border-left: 3px solid var(--blue); }
.col-lg-3 .card, .sticky-panel { border-top: 3px solid var(--primary); }

/* Left-panel section subheads get a colored tick */
.card-body h6.text-secondary {
  padding-left: 10px; border-left: 3px solid var(--violet); border-radius: 2px;
}

/* Buttons & primary text a touch more vivid */
.btn-primary { background: linear-gradient(120deg, #0ea5a4, #0d9488 55%, #14b8a6); }

/* ---- Fundamental Analysis card ---- */
#fundamentals-card { border-top: 3px solid var(--violet); }
#fund-quality { font-size: 0.78rem; padding: 0.4rem 0.7rem; }
.fund-tile {
  height: 100%; text-align: center; padding: 0.55rem 0.4rem;
  border: 1px solid var(--line); border-radius: 11px;
  background: linear-gradient(180deg, #ffffff, #f7f9ff);
}
.fund-tile-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.fund-tile-val { font-family: "Roboto Mono", ui-monospace, monospace; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.fund-block {
  padding: 0.7rem 0.85rem; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.fund-block-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--violet); font-weight: 700; margin-bottom: 0.4rem; }

/* ---- Dashboard tabs (nav-pills) ---- */
.app-tabs { gap: 0.4rem; flex-wrap: wrap; }
.app-tabs .nav-link {
  color: var(--muted); font-weight: 600; font-size: 0.86rem;
  border-radius: 11px; padding: 0.5rem 1.05rem;
  border: 1px solid var(--line); background: #fff;
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.app-tabs .nav-link:hover { color: var(--primary-dk); border-color: rgba(14,165,164,.45); }
.app-tabs .nav-link.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, var(--navy), #0e3b45);
  box-shadow: 0 6px 16px rgba(11,30,57,.22);
}
.app-tabs .nav-link.active i { color: var(--cyan); }

/* ============================================================
   Fixed-height two-pane layout with independent scrollbars (lg+)
   ============================================================ */
@media (min-width: 992px) {
  .app-navbar { position: sticky; top: 0; z-index: 1040; }

  /* Left sidebar stays visible (sticky) while the PAGE scrolls normally. It
     scrolls internally only if it is taller than the viewport, and the wheel
     is never trapped — no `overscroll-behavior: contain` — so reaching the end
     of the sidebar simply continues scrolling the page. */
  .sticky-panel {
    position: sticky;
    top: 3.5rem;
    max-height: calc(100vh - 4.75rem);
    display: flex;
    flex-direction: column;
  }
  .sticky-panel > .card-header { flex: 0 0 auto; }
  .sticky-panel > .card-body { overflow-y: auto; }

  /* Right results pane flows with the page — no fixed height, no internal
     scroll trap. The tab bar stays pinned as you scroll the results. */
  .app-tabs { position: sticky; top: 3.25rem; z-index: 3; background: var(--app-bg, #f8fafc); }
  .tab-content {
    padding-right: 6px;
  }

  /* Slim, themed scrollbars */
  .sticky-panel > .card-body::-webkit-scrollbar,
  .tab-content::-webkit-scrollbar { width: 9px; }
  .sticky-panel > .card-body::-webkit-scrollbar-track,
  .tab-content::-webkit-scrollbar-track { background: transparent; }
  .sticky-panel > .card-body::-webkit-scrollbar-thumb,
  .tab-content::-webkit-scrollbar-thumb {
    background: #cbd5e1; border-radius: 10px;
    border: 2px solid transparent; background-clip: content-box;
  }
  .sticky-panel > .card-body::-webkit-scrollbar-thumb:hover,
  .tab-content::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
  .sticky-panel > .card-body, .tab-content { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
}

/* ---- Hub / home page ---- */
.hub-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #eef6f6 100%);
  border-bottom: 1px solid rgba(15,23,42,.07);
}
.hub-card { transition: transform .12s ease, box-shadow .12s ease; }
.hub-card:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.4rem rgba(15,23,42,.11) !important; }
.hub-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,165,164,.11); color: var(--teal, #0ea5a4); font-size: 1.3rem;
}
.hub-chip { transition: background .12s ease; background: #fff; }
.hub-chip:hover { background: rgba(14,165,164,.06); }

/* ---- Rendered markdown (Methodology docs) ---- */
.md-body { font-size: .9rem; line-height: 1.65; }
.md-body h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; }
.md-body h2 { font-size: 1.15rem; font-weight: 700; margin: 1.75rem 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid rgba(14,165,164,.25); }
.md-body h3 { font-size: 1rem; font-weight: 600; margin: 1.15rem 0 .4rem; }
.md-body table { width: 100%; margin: .75rem 0 1rem; font-size: .84rem; border-collapse: collapse; }
.md-body th, .md-body td { border: 1px solid rgba(15,23,42,.1); padding: .4rem .6rem; vertical-align: top; }
.md-body thead th { background: #f1f5f9; font-weight: 600; }
.md-body code { background: rgba(15,23,42,.05); padding: .1rem .3rem; border-radius: 4px; font-size: .82rem; color: #0f766e; }
.md-body pre { background: #0b1e39; color: #e2e8f0; padding: .85rem 1rem; border-radius: 8px; overflow-x: auto; }
.md-body pre code { background: none; color: inherit; padding: 0; }
.md-body blockquote { border-left: 4px solid #cbd5e1; margin: .75rem 0; padding: .35rem 0 .35rem .9rem; color: var(--muted, #64748b); background: rgba(15,23,42,.02); }
.md-body hr { margin: 1.5rem 0; }
.md-body ul, .md-body ol { padding-left: 1.3rem; }

/* ============ Research-report typography (comps) ============
   Muted institutional palette: deep navy, charcoal text, off-white grounds,
   forest-green / crimson only as the +/- accent. No neon. */
:root {
  --rv-navy: #14243d;
  --rv-charcoal: #2b3440;
  --rv-rule: #dfe4ea;
  --rv-pos: #1b7a4b;   /* forest green */
  --rv-neg: #b3243c;   /* crimson */
}
.rv-pos { color: var(--rv-pos) !important; }
.rv-neg { color: var(--rv-neg) !important; }

.rv-stat-label {
  text-transform: uppercase; letter-spacing: .09em;
  font-size: .62rem; font-weight: 700; color: #7c8794;
}
.rv-stats { border-top: 1px solid var(--rv-rule); border-bottom: 1px solid var(--rv-rule); }
.rv-stats > div + div { border-left: 1px solid var(--rv-rule); }
.rv-bbb { color: var(--rv-charcoal); font-size: .82rem; }
.rv-thesis { font-size: .84rem; color: var(--rv-charcoal); }
.rv-thesis li { margin-bottom: .3rem; }

/* Compact, rule-driven data tables — hairlines, not boxes */
.rv-table { font-size: .84rem; color: var(--rv-charcoal); }
.rv-table thead th {
  text-transform: uppercase; letter-spacing: .05em; font-size: .64rem;
  color: #7c8794; font-weight: 700; border-bottom: 1.5px solid var(--rv-charcoal);
  white-space: nowrap;
}
.rv-table td, .rv-table th { padding: .4rem .5rem; border-color: var(--rv-rule); }
.rv-table tbody tr:hover > * { background: rgba(20,36,61,.03); }

/* Scenario & risk matrix inside the tear sheet */
.rv-matrix { font-size: .8rem; }
.rv-matrix thead th { border-bottom: 1px solid var(--rv-rule); font-size: .6rem; }
.rv-matrix td { padding: .3rem .5rem; }
.rv-matrix .rv-case-active > * {
  background: rgba(20,36,61,.055);
  box-shadow: inset 3px 0 0 var(--rv-navy);
}

.rv-footnotes {
  border-top: 2px solid var(--rv-charcoal);
  padding-top: .85rem; font-size: .74rem; color: #6b7683; line-height: 1.6;
}
.rv-footnotes ol { padding-left: 1.1rem; margin-bottom: 0; }
.rv-footnotes li { margin-bottom: .35rem; }
.rv-footnotes code { font-size: .72rem; color: var(--rv-navy); background: rgba(20,36,61,.05); padding: 0 .25rem; border-radius: 3px; }

/* ---- Comps: the headline recommendation banner ----
   A single, unmissable call (rating + 12-month target price) so the page has
   one obvious number to act on and everything else reads as supporting. */
.rec-hero {
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfd 60%, #f4f6f9 100%);
  border-top: 3px solid var(--rv-navy, #14243d) !important;
}
.rec-hero .border-end, .rec-hero .border-start { border-color: rgba(15,23,42,.08) !important; }
@media (max-width: 767.98px) {
  .rec-hero .border-end { border-right: 0 !important; border-bottom: 1px solid rgba(15,23,42,.08); padding-bottom: .75rem; }
}

/* Opt-out of the fixed-height tab pane above (DCF dashboard only). Pages that
   want tabs to flow with the page — e.g. the comps per-company detail — add
   .tab-content-auto so the wheel scrolls the page instead of being trapped by
   `overscroll-behavior: contain`. Two classes => beats the .tab-content rule. */
.tab-content.tab-content-auto {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  padding-right: 0;
}

/* ---- Stage-2 Screener table ---- */
.screener-table { font-size: 0.85rem; }
.screener-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.screener-table td, .screener-table th { vertical-align: middle; }
.screener-table tbody tr:hover > * { background: rgba(14,165,164,.05); }

/* ==========================================================================
   INSTITUTIONAL THEME — "Slate & Signal"
   Loaded last so it overrides everything above. The goal is maximum
   information with zero visual friction: muted structure, signal colour only
   where it carries meaning, monospace numerals, sharp edges, dense tables.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg-main:        #f8f9fa;   /* very light grey, never pure white */
  --bg-card:        #ffffff;
  --border-subtle:  #e5e7eb;

  /* Typography */
  --text-primary:   #111827;   /* near black */
  --text-secondary: #6b7280;   /* slate — labels, table headers */

  /* Signal colours — desaturated, meaning-bearing only */
  --buy-green:      #059669;
  --sell-red:       #dc2626;
  --hold-amber:     #d97706;
  --brand-navy:     #0f172a;

  /* Remap the legacy palette so existing rules inherit the new theme */
  --ink:       var(--text-primary);
  --ink-soft:  var(--text-primary);
  --muted:     var(--text-secondary);
  --line:      var(--border-subtle);
  --surface:   var(--bg-card);
  --surface-2: var(--bg-main);
  --navy:      var(--brand-navy);
  --navy-2:    #1e293b;
  --primary:   var(--brand-navy);
  --pos:       var(--buy-green);
  --neg:       var(--sell-red);
  --rv-navy:   var(--brand-navy);
  --rv-charcoal: var(--text-primary);
  --rv-rule:   var(--border-subtle);
  --rv-pos:    var(--buy-green);
  --rv-neg:    var(--sell-red);
}

/* ---- 1. Ground: flat, no decorative gradients ---- */
.app-body {
  background-color: var(--bg-main);
  background-image: none;
  color: var(--text-primary);
}

/* ---- 2. Monospace data rule ----
   Every number in the engine aligns on the decimal. Inline font-size on
   headline figures still wins, so the tear sheet keeps its scale. */
.tabular, .data-cell, .kpi-value, .rv-table td, .rv-matrix td {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}
.data-cell { font-size: .85rem; text-align: right; }

/* ---- 3. Table headers: uppercase, spaced, navy rule ---- */
.table thead th, table thead th {
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--text-secondary);
  background: transparent !important;
  border-bottom: 2px solid var(--brand-navy) !important;
  white-space: nowrap;
}
.table > :not(caption) > * > * { border-color: var(--border-subtle); }

/* ---- 4. Sharp edges, hairlines instead of drop shadows ---- */
.card, .btn, .form-control, .form-select, .input-group-text,
.alert, .list-group-item, .progress, .badge, .nav-tabs .nav-link, .dropdown-menu {
  border-radius: 0 !important;
}
.rounded-pill { border-radius: 50rem !important; }   /* keep deliberate pills */
.card, .shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.card { border: 1px solid var(--border-subtle); background: var(--bg-card); }
.card-header { background: var(--bg-card) !important; border-bottom: 1px solid var(--border-subtle); }

/* ---- 5. Density: financial users hate scrolling ---- */
.table > :not(caption) > * > * { padding: .38rem .55rem; }
.card-body { padding: .9rem 1rem; }
.card-header { padding: .55rem 1rem; }

/* ---- 6. Navbar: flat institutional navy ---- */
.app-navbar {
  background: var(--brand-navy);
  background-image: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}

/* ---- 7. Signal colour only where it means something ---- */
.text-success, .rv-pos { color: var(--buy-green) !important; }
.text-danger,  .rv-neg { color: var(--sell-red) !important; }
.text-warning          { color: var(--hold-amber) !important; }
.text-bg-success { background-color: var(--buy-green) !important; color: #fff !important; }
.text-bg-danger  { background-color: var(--sell-red)  !important; color: #fff !important; }
.text-bg-warning { background-color: var(--hold-amber) !important; color: #fff !important; }
.text-bg-primary, .text-bg-dark { background-color: var(--brand-navy) !important; color: #fff !important; }
.btn-primary, .btn-dark {
  background-color: var(--brand-navy); border-color: var(--brand-navy);
}
.btn-primary:hover, .btn-dark:hover { background-color: #1e293b; border-color: #1e293b; }
.btn-success { background-color: var(--buy-green); border-color: var(--buy-green); }
.btn-danger  { background-color: var(--sell-red);  border-color: var(--sell-red); }
.btn-outline-primary { color: var(--brand-navy); border-color: var(--brand-navy); }
.btn-outline-primary:hover { background-color: var(--brand-navy); border-color: var(--brand-navy); }

/* ---- 8. Flatten the decorative heroes/cards ---- */
.rec-hero, .hub-hero {
  background: var(--bg-card) !important;
  background-image: none !important;
  border-top: 3px solid var(--brand-navy) !important;
}
.hub-hero { border-bottom: 1px solid var(--border-subtle); }
.hub-card { transition: border-color .12s ease; }
.hub-card:hover { transform: none; border-color: var(--brand-navy) !important; }
.hub-icon { background: rgba(15,23,42,.06); color: var(--brand-navy); border-radius: 0; }

/* Section headings inside cards, research-report style */
.card-header .fw-semibold, .card-header span { color: var(--text-primary); }

/* Brand wordmark: plain white, not a teal gradient */
.app-navbar .navbar-brand {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #ffffff;
  color: #fff;
}
.app-navbar .navbar-brand i { -webkit-text-fill-color: #94a3b8; color: #94a3b8; }
.app-navbar .btn { border-radius: 0 !important; }
.app-navbar .btn-outline-info { color: #cbd5e1; border-color: rgba(255,255,255,.22); }
.app-navbar .btn-outline-info:hover,
.app-navbar .btn-outline-light:hover { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.4); }

/* KPI tiles: hairline + navy rule, no gradients or lift */
.kpi-card {
  border-radius: 0; background: var(--bg-card); border: 1px solid var(--border-subtle);
  transition: none;
}
.kpi-card::before { background: var(--brand-navy) !important; height: 2px; opacity: 1; }
.kpi-card:hover { transform: none; box-shadow: none !important; }
.kpi-card.kpi-blue, .kpi-card.kpi-teal, .kpi-card.kpi-violet { background: var(--bg-card); }
.kpi-card.kpi-blue .kpi-value, .kpi-card.kpi-teal .kpi-value, .kpi-card.kpi-violet .kpi-value { color: var(--text-primary); }
.kpi-card.kpi-blue .kpi-label i, .kpi-card.kpi-teal .kpi-label i, .kpi-card.kpi-violet .kpi-label i { color: var(--text-secondary); }
.kpi-card.highlight { background: var(--brand-navy); border-color: var(--brand-navy); }
.kpi-card.highlight::before { background: var(--hold-amber) !important; }

/* Inputs: square, navy focus ring */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 2px rgba(15,23,42,.12);
}
.card-header i.text-primary, .text-primary { color: var(--brand-navy) !important; }

/* ============================================================
   INSTITUTIONAL DCF — margin of safety, assumptions, sanity
   ============================================================ */

/* The three levers that drove the number, sat under the headline. */
.assump-strip {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--border, #d8dee9); border-left: 3px solid var(--brand-navy, #0f172a);
  background: #fbfcfd;
}
.assump {
  flex: 1 1 0; min-width: 8rem; padding: .5rem .75rem;
  border-left: 1px solid var(--border, #d8dee9);
}
.assump:first-child { border-left: 0; }
.assump-label {
  display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted, #64748b); font-weight: 600;
}
.assump-value { display: block; font-size: 1.02rem; font-weight: 700; color: var(--brand-navy, #0f172a); }

/* Sanity check banner — tone reflects how hard the terminal value is working. */
.sanity-banner {
  border: 1px solid var(--border, #d8dee9); border-left-width: 3px;
  padding: .6rem .8rem; font-size: .8rem; line-height: 1.5;
}
.sanity-banner.sanity-ok   { border-left-color: var(--pos, #10b981); background: #f2fbf7; }
.sanity-banner.sanity-warn { border-left-color: #b45309;            background: #fffbeb; }
.sanity-banner.sanity-bad  { border-left-color: var(--neg, #e0475a); background: #fef4f5; }
.sanity-title {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--brand-navy, #0f172a); margin-bottom: .2rem;
}
.sanity-foot { font-size: .68rem; color: var(--muted, #64748b); margin-top: .35rem; }

/* Value bridge: colour the arithmetic, and close it with the classic
   accounting double underline. */
.ev-buildup tr.addition-row td:nth-child(2)    { color: var(--pos, #10b981); }
.ev-buildup tr.subtraction-row td:nth-child(2) { color: var(--neg, #e0475a); }
.ev-buildup .bu-total td {
  border-top: 2px solid var(--brand-navy, #0f172a);
  border-bottom: 4px double var(--brand-navy, #0f172a);
  font-weight: 700;
}

/* Sensitivity: the base cell and the BUY-zone boundary must survive both
   screen and print, so they are drawn with borders rather than fill alone. */
.sensitivity-heat .sens-base {
  outline: 2px solid var(--brand-navy, #0f172a); outline-offset: -2px; font-weight: 700;
}
.sensitivity-heat .sens-above { box-shadow: inset 3px 0 0 var(--pos, #10b981); }

/* ============================================================
   NAV LAYOUT (three groups) + WATCHLIST HEART
   ============================================================ */
/* All three groups flow inline in a single row; Watchlist is pushed to the
   far right by its ms-auto. Absolute centering was dropped — with six items in
   the left group it collided with the centre group between ~1400–1600px. A
   plain flowing row never overlaps at any width. */
.app-navbar .nav-center {
  position: static;
  left: auto;
  transform: none;
}

/* Heart button: no chrome, just the icon; a gentle grow on hover. */
.wl-heart { background: transparent; line-height: 1; }
.wl-heart i { font-size: 1.02rem; transition: transform .12s ease; }
.wl-heart:hover i { transform: scale(1.25); }
.wl-heart:hover i.bi-heart { color: var(--neg, #e0475a) !important; }
.wl-heart:focus { box-shadow: none; outline: none; }

/* ============================================================
   COMPS HOME — the long cards (Loaded companies grouped by sector,
   Comp sets, Build a comp set) scroll INTERNALLY so the page stays
   compact instead of stretching to hundreds of rows. The wheel is
   never trapped: overscroll-behavior stays default (auto), so when
   you hit the top/bottom of a card the page keeps scrolling.
   The analysis / comp-set DATA page is deliberately NOT bounded —
   it scrolls as one normal page.
   ============================================================ */
.comps-scroll { max-height: 68vh; overflow-y: auto; }
/* Keep the table header visible while scrolling the loaded-companies list. */
.comps-scroll thead th { position: sticky; top: 0; z-index: 2; background: #f1f3f5; }
.comps-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.comps-scroll::-webkit-scrollbar-track { background: transparent; }
.comps-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: content-box;
}
.comps-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
.comps-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */
/* Nav becomes a single horizontally-scrollable strip on smaller screens, so
   every link stays reachable without a hamburger, and nothing overflows. */
@media (max-width: 991.98px) {
  .app-navbar .container-fluid {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .4rem;
  }
  .app-navbar .container-fluid::-webkit-scrollbar { height: 0; }   /* hide the strip's own bar */
  .app-navbar .nav-center { position: static; transform: none; }
  .app-navbar .container-fluid > div { flex: 0 0 auto; }
  .app-navbar .ms-auto { margin-left: .4rem !important; }
  .app-navbar .navbar-brand { font-size: 1rem; white-space: nowrap; }
  .app-navbar .btn-sm { padding: .25rem .5rem; font-size: .78rem; white-space: nowrap; }
}

/* Tighter gutters + denser tables on phones. */
@media (max-width: 767.98px) {
  .container-fluid.px-4 { padding-left: .75rem !important; padding-right: .75rem !important; }
  .screener-table { font-size: .78rem; }
  .screener-table td, .screener-table th { padding-left: .45rem; padding-right: .45rem; }
  h3 { font-size: 1.35rem; }
  .hub-hero h2, .hub-hero .h2 { font-size: 1.4rem; }
  /* On phones a bounded card would be tiny — let the comps-home cards flow and
     rely on the page scroll instead. */
  .comps-scroll { max-height: none; }
}

/* Every data table scrolls horizontally rather than squishing. Table-responsive
   already does this; this guarantees momentum scrolling on touch. */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ---- Kill horizontal PAGE overflow on small screens ----
   Wide tables/code must scroll inside their own container, not push the body
   sideways. Fixes the two pages the mobile audit flagged (comps detail, docs). */
@media (max-width: 991.98px) {
  /* Comps analysis: cards + their tables scroll horizontally in-place instead of
     stretching the page. display:block makes an unwrapped <table> its own scroll
     container (many comps tables aren't wrapped in .table-responsive). */
  .comps-detail .card-body { overflow-x: auto; }
  .comps-detail table { display: block; overflow-x: auto; max-width: 100%; white-space: nowrap; }
  /* Belt-and-suspenders: never let the PAGE scroll sideways on phones/tablets.
     Wide content (tables, code) has its own inner scroll above; this only clips
     stray overflow. Safe here — sticky layouts are gated to ≥992px, so no
     position:sticky is broken by an overflow ancestor at these widths. */
  html, body { overflow-x: hidden; }
}
/* Methodology docs: long code lines and wide tables scroll/wrap instead of
   stretching the page. */
.md-body table { display: block; overflow-x: auto; max-width: 100%; }
.md-body pre { overflow-x: auto; max-width: 100%; }
.md-body code { overflow-wrap: anywhere; word-break: break-word; }

/* ============================================================
   Command palette (⌘K) + top navigation progress bar
   ============================================================ */
#nav-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--cyan, #22d3ee), #0d6efd);
  z-index: 3000; opacity: 0; pointer-events: none;
}
#nav-progress.active { opacity: 1; }

.cmdk-overlay {
  position: fixed; inset: 0; z-index: 3100;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
}
.cmdk-box {
  width: 100%; max-width: 560px; margin: 12vh 1rem 0;
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .08);
}
.cmdk-input-wrap { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid #eef2f7; }
.cmdk-input-wrap input { border: 0; outline: 0; flex: 1; font-size: 1rem; background: transparent; }
.cmdk-esc { font-size: .62rem; color: #94a3b8; border: 1px solid #e2e8f0; border-radius: 6px; padding: .05rem .35rem; }
.cmdk-list { list-style: none; margin: 0; padding: .35rem; max-height: 52vh; overflow-y: auto; }
.cmdk-item {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem;
  border-radius: 9px; cursor: pointer; font-size: .9rem; color: #0f172a;
}
.cmdk-item i { color: #64748b; width: 1.1rem; text-align: center; }
.cmdk-item.active { background: #eff6ff; }
.cmdk-item.active i { color: #0d6efd; }
.cmdk-empty { padding: 1rem; text-align: center; font-size: .85rem; }
.cmdk-foot { padding: .5rem .85rem; border-top: 1px solid #eef2f7; font-size: .68rem; }
.cmdk-foot kbd, .cmdk-item kbd {
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 5px;
  padding: .02rem .3rem; font-size: .66rem; color: #475569; margin: 0 .1rem;
}
/* Subtle ⌘K affordance button in the nav */
.cmdk-open { opacity: .9; }

/* ============================================================================
   DARK MODE — "Terminal" palette (TradingView / Bloomberg / Kite / Linear).
   The app is fully variable-driven via the institutional "Slate & Signal"
   theme above; this block loads LAST, so remapping that theme's SOURCE
   variables to a dark palette re-themes the whole app. Below the var remap we
   patch the few hardcoded light surfaces. Flip with data-bs-theme="dark".
   ============================================================================ */
[data-bs-theme="dark"] {
  /* Requested palette */
  --bg-primary:   #0F172A;   /* page (never pure black) */
  --bg-secondary: #1E293B;   /* cards */
  --surface-el:   #273449;   /* elevated: inputs, sticky heads, kbd */
  --border:       #334155;
  --text-1:       #F8FAFC;
  --text-2:       #CBD5E1;
  --text-3:       #94A3B8;
  --accent:       #3B82F6;
  --accent-hover: #2563EB;
  --success:      #22C55E;
  --warning:      #F59E0B;
  --danger:       #EF4444;
  --info:         #06B6D4;

  /* Remap the institutional theme's source vars → dark palette */
  --bg-main:        var(--bg-primary);
  --bg-card:        var(--bg-secondary);
  --border-subtle:  var(--border);
  --text-primary:   var(--text-1);
  --text-secondary: var(--text-2);
  --brand-navy:     var(--accent);
  --buy-green:      var(--success);
  --sell-red:       var(--danger);
  --hold-amber:     var(--warning);

  /* Legacy vars the institutional block doesn't derive from the above */
  --ink:       var(--text-1);
  --ink-soft:  var(--text-2);       /* comfortable body text, not pure white */
  --muted:     var(--text-3);
  --line:      var(--border);
  --surface:   var(--bg-secondary);
  --surface-2: var(--surface-el);
  --primary:   var(--accent);
  --primary-dk: var(--accent-hover);
  --pos: var(--success); --neg: var(--danger);
  --rv-navy: var(--accent); --rv-charcoal: var(--text-1); --rv-rule: var(--border);
  --rv-pos: var(--success); --rv-neg: var(--danger);

  /* Bootstrap dark surfaces (modals, dropdowns, offcanvas, tooltips…) */
  --bs-body-bg:        var(--bg-primary);
  --bs-body-color:     var(--text-2);
  --bs-emphasis-color: var(--text-1);
  --bs-secondary-bg:   var(--bg-secondary);
  --bs-tertiary-bg:    var(--surface-el);
  --bs-border-color:   var(--border);
  --bs-heading-color:  var(--text-1);
  color-scheme: dark;
}

/* Navbar stays dark (brand-navy is now the accent blue) */
[data-bs-theme="dark"] .app-navbar { background: #0b1220; border-bottom-color: var(--border); }

/* Fixed-light Bootstrap utilities used across the templates */
[data-bs-theme="dark"] .bg-white { background-color: var(--bg-secondary) !important; color: var(--text-1); }
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light-subtle { background-color: var(--surface-el) !important; }
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td { --bs-table-bg: var(--surface-el); --bs-table-color: var(--text-2); }
[data-bs-theme="dark"] .text-bg-light { background-color: var(--surface-el) !important; color: var(--text-2) !important; }
[data-bs-theme="dark"] .badge.text-bg-light,
[data-bs-theme="dark"] .badge.border { border-color: var(--border) !important; }

/* Inputs / selects readable on dark */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text { background-color: var(--surface-el); color: var(--text-1); border-color: var(--border); }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--text-3); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,.25); }

/* Primary/dark buttons → accent; hover → accent-hover */
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-dark:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }

/* Hardcoded light surfaces in the institutional theme */
[data-bs-theme="dark"] .assump-strip { background: var(--bg-secondary); }
[data-bs-theme="dark"] .sanity-banner.sanity-ok   { background: rgba(34,197,94,.10); }
[data-bs-theme="dark"] .sanity-banner.sanity-warn  { background: rgba(245,158,11,.10); }
[data-bs-theme="dark"] .sanity-banner.sanity-bad   { background: rgba(239,68,68,.10); }
[data-bs-theme="dark"] .comps-scroll thead th { background: var(--bg-card); }
[data-bs-theme="dark"] .comps-scroll::-webkit-scrollbar-thumb { background: #3d4a5f; }
[data-bs-theme="dark"] .comps-scroll { scrollbar-color: #3d4a5f transparent; }

/* Command palette (⌘K) modal */
[data-bs-theme="dark"] .cmdk-overlay { background: rgba(2,6,15,.6); }
[data-bs-theme="dark"] .cmdk-box { background: var(--bg-secondary); border-color: var(--border); color: var(--text-1); }
[data-bs-theme="dark"] .cmdk-input-wrap,
[data-bs-theme="dark"] .cmdk-foot { border-color: var(--border); }
[data-bs-theme="dark"] #cmdk-input { color: var(--text-1); background: transparent; }
[data-bs-theme="dark"] .cmdk-item.active { background: rgba(59,130,246,.16); }
[data-bs-theme="dark"] .cmdk-item.active i { color: var(--accent); }
[data-bs-theme="dark"] .cmdk-foot kbd,
[data-bs-theme="dark"] .cmdk-item kbd { background: var(--surface-el); border-color: var(--border); color: var(--text-2); }

/* Smooth 200–300ms theme transition */
body, .app-body, .card, .card-header, .card-body, .table, table, .btn,
.form-control, .form-select, .input-group-text, .app-navbar, .list-group-item,
.dropdown-menu, .alert, .badge, .cmdk-box {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* ============================================================
   SIDE NAVIGATION
   ------------------------------------------------------------
   Destinations live here; the top bar holds actions only. One copy
   of the markup serves both layouts — Bootstrap's `offcanvas-lg` is
   a static column at lg+ and a drawer below it, so a phone and a
   desktop cannot drift apart the way two separate lists would.
   ============================================================ */
:root {
  --sidenav-w: 232px;
  --topbar-h: 52px;
}

.app-shell { display: flex; align-items: flex-start; }

/* The content column. min-width:0 is load-bearing: without it a flex item
   will not shrink below its content's intrinsic width, so one wide table
   would push the whole page into a horizontal scroll. */
#main-content { flex: 1 1 auto; min-width: 0; padding-top: 1.25rem; }

.app-sidenav {
  background: var(--surface);
  border-right: 1px solid var(--line);
}

@media (min-width: 992px) {
  .app-sidenav {
    flex: 0 0 var(--sidenav-w);
    width: var(--sidenav-w);
    /* Sticky, not fixed: it participates in the flex row, so the content
       column's width is computed rather than assumed from a margin. */
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    /* No overscroll-behavior: contain — reaching the end of the sidebar
       should keep scrolling the page, not trap the wheel. */
  }
}

.sn-body { padding: .85rem .6rem 1.5rem; }

/* Section headings. A flat list of fifteen links is scanned, not read. */
.sn-group {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .3rem .65rem;
  margin-top: .85rem;
}
.sn-group:first-child { margin-top: 0; }

.sn-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .48rem .65rem;
  margin-bottom: 1px;
  border-radius: 8px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  /* Only colour/background transition — never width or padding, which would
     make the whole list reflow on hover. */
  transition: background-color .13s ease, color .13s ease;
}
.sn-link i {
  font-size: 1rem;
  width: 1.15rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--muted);
}
.sn-link span { flex: 1 1 auto; }

.sn-link:hover { background: var(--surface-2); color: var(--ink); }
.sn-link:hover i { color: var(--ink); }

.sn-link.active {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
}
.sn-link.active i { color: var(--cyan); }
/* The heart keeps its own colour when active — it is a status, not a theme. */
.sn-link.active i.text-danger { color: #f87171 !important; }

.sn-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.sn-count {
  font-size: .68rem;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .05rem .4rem;
  flex: 0 0 auto;
}
.sn-link.active .sn-count {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

.sn-foot {
  margin-top: 1rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
}
.sn-quiet { font-weight: 500; color: var(--muted); }

/* --- top bar, now that it only carries actions --- */
.app-navbar { min-height: var(--topbar-h); }
.app-navbar .navbar-brand { font-size: 1rem; }
.sn-toggle { line-height: 1; padding: .25rem .5rem; }
.sn-toggle i { font-size: 1.15rem; }

/* Below lg the drawer is an overlay, so it needs its own surface + width. */
@media (max-width: 991.98px) {
  .app-sidenav { width: 270px; max-width: 84vw; }
  .app-sidenav .offcanvas-header {
    border-bottom: 1px solid var(--line);
    padding: .7rem 1rem;
  }
  #main-content { padding-top: 1rem; }
  /* The brand is the first thing squeezed on a narrow phone; the icon and the
     hamburger carry the identity there. */
  .brand-text { display: none; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .brand-text { display: inline; }
}

/* --- dark mode --- */
[data-bs-theme="dark"] .app-sidenav {
  background: #0f172a;
  border-right-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .sn-link { color: #cbd5e1; }
[data-bs-theme="dark"] .sn-link i { color: #94a3b8; }
[data-bs-theme="dark"] .sn-link:hover { background: rgba(255,255,255,.06); color: #fff; }
[data-bs-theme="dark"] .sn-link:hover i { color: #fff; }
[data-bs-theme="dark"] .sn-link.active { background: rgba(34,211,238,.14); color: #fff; }
[data-bs-theme="dark"] .sn-link.active i { color: var(--cyan); }
[data-bs-theme="dark"] .sn-group { color: #64748b; }
[data-bs-theme="dark"] .sn-count {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #cbd5e1;
}
[data-bs-theme="dark"] .sn-foot { border-top-color: rgba(255,255,255,.08); }

/* The old nav's horizontal-scroll strip no longer applies — there are no
   destination tabs left in the bar to overflow. Neutralised rather than
   deleted from the rule above, so the bar lays out normally on phones. */
@media (max-width: 991.98px) {
  .app-navbar .container-fluid { flex-wrap: nowrap; overflow-x: visible; }
}

/* ------------------------------------------------------------
   Overrides for Bootstrap's `offcanvas-lg` above the breakpoint.
   Bootstrap assumes an offcanvas that "unfolds" into a horizontal
   navbar, so above lg it sets the body to `display:flex` (row) and
   forces `background-color: transparent !important` with a zero
   border. All three are wrong for a vertical sidebar, and the row
   direction in particular laid every link out in one line.
   Specificity is raised deliberately — `!important` has to be met
   with `!important`, and the class chain beats Bootstrap's own.
   ------------------------------------------------------------ */
.app-sidenav.offcanvas-lg {
  background-color: var(--surface) !important;
  border-right: 1px solid var(--line) !important;
}
.app-sidenav.offcanvas-lg .sn-body {
  display: flex;
  flex-direction: column;      /* the actual fix: column, not row */
  flex-grow: 1;
  padding: .85rem .6rem 1.5rem;
  overflow-y: visible;
  background-color: transparent !important;
}
/* Bootstrap sets the drawer to 400px; narrower leaves more of the page
   visible behind the scrim, which is what tells you it is a drawer. */
@media (max-width: 991.98px) {
  .app-sidenav.offcanvas-lg { width: 272px; max-width: 84vw; }
}
[data-bs-theme="dark"] .app-sidenav.offcanvas-lg {
  background-color: #0f172a !important;
  border-right-color: rgba(255,255,255,.08) !important;
}

/* ============================================================
   PUBLIC MARKETING & LEGAL PAGES
   ------------------------------------------------------------
   Self-contained block for the logged-out site (home, about,
   services, contact, legal). Uses the existing theme tokens so
   it matches the app in both light and dark, and keeps every
   style here rather than inline in the templates.
   ============================================================ */
.public-page { min-height: 60vh; }

/* --- public navbar: a real collapsing navbar over the app's navy bar --- */
.public-nav .navbar-brand { color: #fff; }
.public-nav .nav-link {
  color: rgba(255,255,255,.82);
  font-weight: 500;
  padding: .4rem .75rem;
  border-radius: 8px;
}
.public-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.public-nav .nav-link.active { color: #fff; background: rgba(255,255,255,.14); }
.public-nav .navbar-toggler {
  border-color: rgba(255,255,255,.3);
}
.public-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.15); }
.public-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
  .public-nav .navbar-nav { gap: .15rem; padding-top: .5rem; }
  .public-nav .nav-item .btn { margin-top: .1rem; }
}

/* --- hero --- */
.public-hero {
  background: linear-gradient(180deg, var(--surface-2, #f8fafc), var(--surface, #fff));
  border-bottom: 1px solid var(--line, #e6ebf2);
  padding: 3.25rem 0 2.75rem;
}
.public-hero--compact { padding: 2.5rem 0 2rem; }
.public-hero--legal { padding: 2.25rem 0 1.5rem; }
.public-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--primary, #0ea5a4);
  margin-bottom: .4rem;
}
.public-hero__title {
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink, #0b1524);
  margin-bottom: .75rem;
}
.public-hero__lead {
  font-size: 1.05rem;
  color: var(--ink-soft, #334155);
  max-width: 60ch;
  margin-bottom: 0;
}

/* --- sections + typography --- */
.public-section { padding: 2.75rem 0; }
.public-h2 {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink, #0b1524);
  margin-bottom: .75rem;
}
.public-h3 {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink, #0b1524);
  margin-bottom: .5rem;
}
.public-page p { color: var(--ink-soft, #334155); line-height: 1.7; }
.public-small { font-size: .85rem; }
.public-note { font-size: .82rem; color: var(--muted, #64748b); }
.public-link {
  color: var(--primary, #0ea5a4);
  font-weight: 600;
  text-decoration: none;
}
.public-link:hover { text-decoration: underline; }

.public-list { color: var(--ink-soft, #334155); line-height: 1.7; padding-left: 1.15rem; }
.public-list li { margin-bottom: .35rem; }
.public-list--spaced li { margin-bottom: .9rem; }

/* --- cards --- */
.public-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6ebf2);
  border-radius: 14px;
  padding: 1.35rem 1.4rem;
}
.public-card--muted { background: var(--surface-2, #f8fafc); }

.public-dl { margin: 0; }
.public-dl dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #64748b);
  font-weight: 700;
  margin-top: .8rem;
}
.public-dl dt:first-child { margin-top: 0; }
.public-dl dd { margin: .1rem 0 0; color: var(--ink, #0b1524); }
.public-dl a { color: var(--primary, #0ea5a4); text-decoration: none; }

/* --- service grid --- */
.public-service {
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6ebf2);
  border-radius: 14px;
  padding: 1.4rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.public-service:hover {
  transform: translateY(-3px);
  border-color: var(--primary, #0ea5a4);
}
.public-service__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--surface-2, #f1f5f9);
  color: var(--primary, #0ea5a4);
  font-size: 1.35rem;
  margin-bottom: .85rem;
}
.public-service__summary { flex: 1 1 auto; font-size: .9rem; }
.public-service__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: 1rem; padding-top: .85rem;
  border-top: 1px solid var(--line, #e6ebf2);
}
.public-service__price { font-size: .8rem; font-weight: 600; color: var(--muted, #64748b); }

/* --- CTA band --- */
.public-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--line, #e6ebf2);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
}
.public-cta__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* --- contact + map --- */
.public-field-error { color: var(--sell-red, #e0475a); font-size: .8rem; margin-top: .25rem; }
.public-map { padding: 0; overflow: hidden; }
.public-map__placeholder {
  display: grid; place-items: center; text-align: center;
  min-height: 220px; padding: 1.5rem;
  color: var(--muted, #64748b);
  background: repeating-linear-gradient(45deg,
     var(--surface-2, #f8fafc), var(--surface-2, #f8fafc) 12px,
     var(--surface, #fff) 12px, var(--surface, #fff) 24px);
}
.public-map__placeholder i { font-size: 2rem; margin-bottom: .5rem; color: var(--primary, #0ea5a4); }

/* --- legal documents --- */
.public-legal { max-width: 80ch; }
.public-legal h2 { margin-top: 2rem; }
.public-legal h2:first-child { margin-top: 0; }
.public-legal__rule { margin: 2rem 0 1rem; border-color: var(--line, #e6ebf2); }
.public-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* --- public footer --- */
.public-footer {
  background: var(--navy, #0b1e39);
  color: rgba(255,255,255,.75);
  padding: 2.75rem 0 1.5rem;
  margin-top: 3rem;
}
.public-footer__brand { color: #fff; font-weight: 800; font-size: 1.15rem; }
.public-footer__legal { font-size: .78rem; color: rgba(255,255,255,.6); margin-top: .3rem; }
.public-footer__legal a { color: rgba(255,255,255,.8); text-decoration: none; }
.public-footer__head {
  color: #fff; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem;
}
.public-footer__links { list-style: none; padding: 0; margin: 0; }
.public-footer__links li { margin-bottom: .45rem; }
.public-footer__links a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .88rem;
}
.public-footer__links a:hover { color: #fff; text-decoration: underline; }
.public-footer__disclaimer {
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2rem; padding-top: 1.25rem;
}
.public-footer__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: .74rem; color: rgba(255,255,255,.55);
  margin-top: .85rem;
}
.public-footer__base a { color: rgba(255,255,255,.75); text-decoration: none; }

/* --- dark theme: surfaces already flip via tokens; lift the hero + cards --- */
[data-bs-theme="dark"] .public-hero {
  background: linear-gradient(180deg, #0f172a, var(--surface, #0b1220));
  border-bottom-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .public-card,
[data-bs-theme="dark"] .public-service { background: #0f172a; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .public-service__icon { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .public-cta { background: #0f172a; border-color: rgba(255,255,255,.08); }