/* ═══════════════════════════════════════════════════════════════════════
   Paradigm OFS Financial Intelligence — Theme
   Brutalist / VSCO + Palantir  •  Paradigm branding
   Typography: Vilonti (display/UI) + Monospace (data/code)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── @font-face: Vilonti ─────────────────────────────────────────────── */

@font-face {
  font-family: "Vilonti";
  src: url("/assets/fonts/Vilonti-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vilonti";
  src: url("/assets/fonts/Vilonti-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Vilonti";
  src: url("/assets/fonts/Vilonti-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vilonti";
  src: url("/assets/fonts/Vilonti-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vilonti";
  src: url("/assets/fonts/Vilonti-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Vilonti";
  src: url("/assets/fonts/Vilonti-ExtraBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Variables ────────────────────────────────────────────────────────── */

:root {
  /* ── Brand palette (constant across themes) ── */
  --p-red: #ed1c24;
  --p-red-dim: rgba(237, 28, 36, 0.08);
  --p-red-glow: rgba(237, 28, 36, 0.22);
  --p-black: #2A292A;
  --p-grey: #898989;
  --p-blue: #2271b3;
  --p-green: #009741;
  --p-iron: #716f6f;
  --p-gold: #ccaf7b;
  --p-teal: #00b4aa;
  --p-orange: #ff7f00;
  --p-lavender: #b4a0dc;
  --p-slate: #465569;

  /* ── Semantic tokens (theme-dependent) ── */
  --bg: #F5F5F4;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --text: #2A292A;
  --muted: #74726d;
  --ink: #D1D0CD;
  --ink-medium: #8A8985;
  --ink-subtle: rgba(42, 41, 42, 0.09);
  --ink-faint: rgba(42, 41, 42, 0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --radius: 4px;
  --bw: 1px;
  --hover: rgba(42, 41, 42, 0.06);
  --focus: rgba(237, 28, 36, 0.18);
  --transition: 110ms ease;
  --border-thick: 1.5px solid var(--ink-medium);
  --border-thin: 1px solid var(--ink-subtle);
  --surface-main: #ffffff;
  --surface-chrome: #F8F8F7;

  /* Typography: Vilonti for display/UI, Monospace for data */
  --sans: "Vilonti", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-left-w: 460px;
  --sidebar-right-w: 400px;

  /* ── Dash 4.0 component tokens (light defaults) ── */
  --Dash-Fill-Inverse-Strong: #ffffff;
  --Dash-Fill-Inverse-strong: #ffffff;
  --Dash-Stroke-Strong: var(--ink-medium);
  --Dash-Stroke-Weak: var(--ink-subtle);
  --Dash-Text-Strong: var(--text);
  --Dash-Text-Weak: var(--muted);
  --Dash-Text-Primary: var(--text);
  --Dash-Text-Disabled: #898989;
  --Dash-Fill-Interactive-Strong: var(--p-red);
  --Dash-Fill-Interactive-Weak: var(--p-red-dim);
  --Dash-Fill-Primary-Active: var(--p-red);
  --Dash-Fill-Primary-Hover: #c91820;
  --Dash-Fill-Disabled: #F0F0EE;
  --Dash-Shading-Strong: rgba(0, 0, 0, 0.12);
  --Dash-Shading-Weak: rgba(0, 0, 0, 0.06);
  --Dash-Spacing: 4px;
  --Dash-Tooltip-Background-Color: var(--card);
  --Dash-Tooltip-Border-Color: var(--ink);
}

/* ── Dark Theme ──────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --bg: #18181B;
  --bg-elevated: #1E1E22;
  --card: #27272A;
  --text: #ECECEE;
  --muted: #9E9EA3;
  --ink: #3F3F46;
  --ink-subtle: rgba(255, 255, 255, 0.08);
  --ink-faint: rgba(255, 255, 255, 0.03);
  --focus: rgba(237, 28, 36, 0.30);
  --p-red-dim: rgba(237, 28, 36, 0.18);
  --p-black: #18181B;
  --ink-medium: #52525B;
  --radius: 0px;
  --bw: 2px;
  --shadow: none;
  --hover: rgba(255, 255, 255, 0.06);
  --surface-main: #18181B;
  --surface-chrome: #1E1E22;
  --border-thick: 2px solid #3F3F46;

  /* ── Dash 4.0 component tokens (dark overrides) ── */
  --Dash-Fill-Inverse-Strong: #27272A;
  --Dash-Fill-Inverse-strong: #27272A;
  --Dash-Stroke-Strong: #3F3F46;
  --Dash-Stroke-Weak: rgba(255, 255, 255, 0.08);
  --Dash-Text-Strong: #ECECEE;
  --Dash-Text-Weak: #A1A1AA;
  --Dash-Text-Primary: #ECECEE;
  --Dash-Text-Disabled: #71717A;
  --Dash-Fill-Interactive-Strong: #ED1C24;
  --Dash-Fill-Interactive-Weak: rgba(237, 28, 36, 0.18);
  --Dash-Fill-Primary-Active: #ED1C24;
  --Dash-Fill-Primary-Hover: #c91820;
  --Dash-Fill-Disabled: #3F3F46;
  --Dash-Shading-Strong: rgba(0, 0, 0, 0.50);
  --Dash-Shading-Weak: rgba(0, 0, 0, 0.30);
  --Dash-Tooltip-Background-Color: #27272A;
  --Dash-Tooltip-Border-Color: #3F3F46;
}

/* ── Reset: kill all border-radius globally ──────────────────────────── */

*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Selective radius: 4px in light, 0px in dark via var(--radius) */
.glass-card,
.compact-chart-card,
.btn,
.form-control,
.dash-dropdown,
.dash-dropdown-content,
.Select-control,
.Select-menu-outer,
#metric-grid-wrap,
.company-segmented-actions,
.company-preset-name,
.console-view,
.badge,
.chart-fs-btn,
.kpi-card,
.rc-slider-handle {
  border-radius: var(--radius) !important;
}

/* Dots: always circular regardless of theme */
.soundbite-feed-dot,
.stock-board-dot {
  border-radius: 50% !important;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* ── App Shell ────────────────────────────────────────────────────────── */

.app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header Bar ──────────────────────────────────────────────────────── */

.app-header {
  background: var(--p-black);
  border-bottom: 4px solid var(--p-red);
  position: sticky;
  top: 0;
  z-index: 1100;
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 32px;
  height: 56px;
  max-width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-right: 36px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  height: 100%;
}

.brand-logo {
  height: 20px;
  width: auto;
  flex-shrink: 0;
}

.header-nav {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  margin-left: 0;
}

.header-right {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-app-title {
  color: rgba(255, 255, 255, 0.22);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}

.header-timestamp {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-family: var(--mono);
}

/* ── Global Progress Strip ───────────────────────────────────────────── */

.gp-strip {
  background: var(--p-black);
  border-bottom: 1px solid rgba(237, 28, 36, 0.3);
  padding: 0 32px;
  height: 32px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 60px;            /* below header (56px + 4px red border) */
  z-index: 1099;
  overflow: hidden;
  transition: height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
}

.gp-strip.gp-hidden {
  height: 0;
  padding: 0 32px;
  opacity: 0;
  border-bottom: none;
  pointer-events: none;
}

.gp-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.gp-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.gp-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p-red);
  flex-shrink: 0;
  animation: gp-pulse-anim 1.4s ease-in-out infinite;
}

@keyframes gp-pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.gp-status-text {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-bar-track {
  flex: 1;
  min-width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.gp-bar-fill {
  height: 100%;
  background: var(--p-red);
  border-radius: 2px;
  transition: width 0.6s ease;
  min-width: 0;
}

.gp-time-text {
  color: rgba(255, 255, 255, 0.50);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Navigation (header underline tabs) ──────────────────────────────── */

.nav-pills {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  margin: 0;
}

.nav-pills .nav-link {
  cursor: pointer;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.40);
  padding: 0 20px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: none;
  transition: color var(--transition), border-color var(--transition);
  line-height: 1;
  height: 56px;
  display: flex;
  align-items: center;
  font-family: var(--sans);
}

.nav-pills .nav-link:hover {
  color: rgba(255, 255, 255, 0.8);
  box-shadow: none;
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.nav-pills .nav-link:active {
  transform: none;
}

.nav-pills .nav-link.active {
  color: var(--p-red);
  border-bottom-color: var(--p-red);
  background: transparent;
  box-shadow: none;
}

/* ── Content Area ─────────────────────────────────────────────────────── */

.app-content {
  flex: 1;
  padding: 32px 48px;
  width: 100%;
  max-width: 100%;
  background: var(--surface-main);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-content--dashboard {
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   3-COLUMN DASHBOARD GRID
   ═══════════════════════════════════════════════════════════════════════ */

.dashboard-grid {
  display: grid;
  grid-template-columns: var(--sidebar-left-w) 1fr var(--sidebar-right-w);
  gap: 0;
  min-height: calc(100vh - 64px);
}

/* ── Left Sidebar ────────────────────────────────────────────────────── */

.sidebar-left {
  border-right: var(--bw) solid var(--ink);
  background: var(--surface-chrome);
  padding: 28px 28px;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-subtle) transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* ── Right Sidebar ───────────────────────────────────────────────────── */

.sidebar-right {
  border-left: var(--bw) solid var(--ink);
  background: var(--surface-chrome);
  padding: 32px 28px;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-subtle) transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* ── Center Panel ────────────────────────────────────────────────────── */

.center-panel {
  padding: 28px 36px;
  min-width: 0;
  overflow-x: hidden;
  background: var(--surface-main);
}

/* ── Sidebar Section Dividers ────────────────────────────────────────── */

.sidebar-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: var(--border-thin);
}

.sidebar-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Greyed-out state for controls that don't apply to the current mode */
.sidebar-section.ctrl-disabled {
  opacity: 0.30;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s ease;
}

.sidebar-section-title {
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 12px;
  font-family: var(--sans);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-faint);
}

/* ── Subtab pills (center panel chart tabs) ──────────────────────────── */

.nav-tabs {
  border-bottom: var(--bw) solid var(--ink-medium);
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: var(--bw) solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 14px 28px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: none;
  transition: color var(--transition), border-color var(--transition);
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: calc(-1 * var(--bw));
}

.nav-tabs .nav-link:hover {
  color: var(--text);
  border-bottom-color: var(--ink-subtle);
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--p-red);
  background: transparent;
  color: var(--p-red);
  box-shadow: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
  transition: all var(--transition);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--sans);
  border: var(--bw) solid var(--ink-medium);
  box-shadow: none !important;
}

.btn-outline-secondary,
.btn-outline-primary {
  background: var(--bg-elevated);
  color: var(--text);
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover {
  background: var(--hover);
  color: var(--text);
}

.btn-primary {
  background: var(--p-red);
  border-color: var(--p-red);
  color: #ffffff;
}

.btn-primary:hover {
  background: #c91820;
  border-color: #c91820;
  color: #ffffff;
}

.btn-secondary {
  background: var(--bg-elevated);
  border: var(--bw) solid var(--ink-medium);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--hover);
  border-color: var(--ink-medium);
  color: var(--text);
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.glass-card {
  background: var(--card);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Center panel dropdown (e.g. per-employee metric selector) */
.center-panel .dash-dropdown .Select-control {
  border: var(--bw) solid var(--ink);
  font-size: 14px;
  font-family: var(--sans);
  min-height: 38px;
  background: var(--bg-elevated) !important;
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
}

.center-panel .dash-dropdown .Select-menu-outer {
  border: var(--bw) solid var(--ink) !important;
  border-top: none !important;
  font-size: 14px;
  font-family: var(--sans);
  background: var(--card) !important;
  background-color: var(--card) !important;
}

.center-panel .Select-option {
  font-size: 14px;
  padding: 8px 14px;
}

.center-panel .Select-option.is-focused {
  background: var(--p-red-dim);
}

.center-panel .Select-option.is-selected {
  background: var(--p-black);
  color: #ffffff;
}

.center-panel .Select-value-label {
  color: var(--text) !important;
}

/* Legacy filter-card — inert container kept for callback compat */
.filter-card {
  padding: 0;
  border: none;
}

/* ── Compact Grid (multi-card financial board) ───────────────────────── */

.compact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
}

.compact-chart-card {
  background: var(--bg-elevated);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 6px 6px 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  min-height: 380px;
  overflow: hidden;        /* prevent chart bleedthrough */
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.compact-chart-card .dash-graph {
  width: 100% !important;
  min-height: 360px;
}

.compact-chart-card .js-plotly-plot {
  width: 100% !important;
  min-height: 360px;
}

.compact-chart-card .plot-container {
  width: 100% !important;
}

/* ── Standard-view graph containers (prevent 0-height collapse) ──────── */
#fin-standard-wrap .dash-graph,
#metric-grid-wrap .dash-graph,
.glass-card .dash-graph {
  min-height: 420px;
  background: var(--card);
  transition: background-color 0.15s ease;
}

#fin-standard-wrap .js-plotly-plot,
#metric-grid-wrap .js-plotly-plot,
.glass-card .js-plotly-plot {
  min-height: 420px;
}

.compact-empty {
  color: var(--muted);
  font-size: 1rem;
  padding: 12px 4px;
  font-family: var(--sans);
}

/* ── Section Titles ───────────────────────────────────────────────────── */

.section-title {
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  color: var(--text);
  font-family: var(--sans);
}

.mini-title {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-family: var(--sans);
}

/* ═══════════════════════════════════════════════════════════════════════
   KPI CARDS — RIGHT SIDEBAR (STACKED, DRAMATIC)
   ═══════════════════════════════════════════════════════════════════════ */

.kpi-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kpi-card {
  background: var(--card);
  border: none;
  border-bottom: var(--border-thin);
  box-shadow: none;
  transition: background var(--transition);
}

.kpi-card:last-child {
  border-bottom: none;
}

.kpi-card:hover {
  background: var(--bg);
  box-shadow: var(--shadow);
}

.kpi-card .card-body {
  padding: 14px 18px;
}

.kpi-title {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-family: var(--sans);
}

.kpi-value {
  font-weight: 900;
  font-size: 1.85rem;
  margin-top: 4px;
  line-height: 1.0;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  color: var(--text);
}

.kpi-subtitle {
  color: var(--muted);
  margin-top: 4px;
  font-size: 0.75rem;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── KPI Hover Tooltip Panel ─────────────────────────────────────────── */

.kpi-has-tooltip {
  position: relative;
  cursor: default;
}

.kpi-tooltip-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--ink);
  border-top: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  padding: 8px 14px;
  max-height: 320px;
  overflow-y: auto;
}

.kpi-has-tooltip:hover .kpi-tooltip-panel {
  display: block;
}

.kpi-tt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--ink);
  font-size: 0.75rem;
  font-family: var(--mono);
  line-height: 1.4;
}

.kpi-tt-row:last-child {
  border-bottom: none;
}

.kpi-tt-co {
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.kpi-tt-val {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi-disclaimer {
  padding: 6px 14px;
}

.kpi-disclaimer-text {
  color: var(--muted);
  font-size: 0.72rem;
  font-family: var(--mono);
  font-style: italic;
  line-height: 1.4;
}

/* ── Filter Controls (Sidebar) ───────────────────────────────────────── */

.filter-label {
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
  font-family: var(--sans);
}

/* Global Dash dropdown overrides for sidebar */
.sidebar-left .dash-dropdown .Select-control,
.sidebar-left .Select-control,
.filter-dropdown .Select-control,
.filter-dropdown .dash-dropdown .Select-control {
  border: var(--bw) solid var(--ink) !important;
  font-size: 13px;
  font-family: var(--mono);
  min-height: 36px;
  background: var(--bg-elevated) !important;
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
}

.sidebar-left .dash-dropdown .Select-value-label,
.sidebar-left .Select-value-label {
  font-size: 13px;
  font-family: var(--mono);
}

.sidebar-left .Select-menu-outer,
.sidebar-left .dash-dropdown .Select-menu-outer {
  border: var(--bw) solid var(--ink) !important;
  border-top: none !important;
  font-size: 13px;
  font-family: var(--mono);
  background: var(--card) !important;
  background-color: var(--card) !important;
}

.sidebar-left .Select-option {
  font-size: 13px;
  padding: 8px 12px;
}

.sidebar-left .Select-option.is-focused {
  background: var(--p-red-dim);
}

.sidebar-left .Select-option.is-selected {
  background: var(--p-black);
  color: #ffffff;
}

.sidebar-left .Select-value-label {
  color: var(--text) !important;
}

/* Multi-value tags in sidebar dropdowns */
.sidebar-left .Select--multi .Select-value {
  border: 1px solid var(--ink);
  background: var(--bg);
  font-size: 12px;
  font-family: var(--mono);
  margin: 2px 3px;
  padding: 2px 0;
}

.sidebar-left .Select--multi .Select-value-icon {
  border-right: 1px solid var(--ink);
  padding: 2px 6px;
}

.sidebar-left .Select--multi .Select-value-icon:hover {
  background: var(--p-red);
  color: #ffffff;
}

/* ── Pill-style checkboxes/radios ────────────────────────────────────── */

.pill-checklist label,
.pill-radio label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--bg-elevated);
  border: var(--bw) solid var(--ink-medium);
  color: var(--text);
  padding: 6px 14px;
  margin: 0;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  transition: background var(--transition), color var(--transition);
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Hide the actual checkbox/radio input */
.pill-checklist input[type="checkbox"],
.pill-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Checked / selected state */
.pill-checklist input[type="checkbox"]:checked + label,
.pill-checklist label:has(input:checked),
.pill-radio input[type="radio"]:checked + label,
.pill-radio label:has(input:checked) {
  background: var(--p-black);
  color: #ffffff;
}

.pill-checklist label:hover,
.pill-radio label:hover {
  background: var(--hover);
  color: var(--text);
  box-shadow: none;
}

/* Inline pills should wrap with minimal gap */
.pill-checklist,
.pill-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Company segmented actions ───────────────────────────────────────── */

.company-actions-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.company-quick-actions {
  display: flex;
  gap: 0;
  width: 100%;
}

.company-segmented-actions {
  overflow: hidden;
  border: var(--bw) solid var(--ink-medium);
  box-shadow: none;
  display: flex;
  width: 100%;
}

.company-segmented-actions .btn {
  border: 0 !important;
  border-right: 1px solid var(--ink-subtle) !important;
  background: var(--bg-elevated);
  color: var(--text);
  padding: 7px 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  flex: 1;
  text-align: center;
}

.company-segmented-actions .btn:last-child {
  border-right: 0 !important;
}

.company-segmented-actions .btn.active {
  background: var(--p-red) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.company-segmented-actions .btn:hover:not(.active) {
  background: var(--hover);
  color: var(--text);
}

/* ── Company presets ─────────────────────────────────────────────────── */

.company-preset-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
}

.company-preset-select {
  width: 100%;
}

.company-preset-name {
  width: 100%;
  height: 32px;
  font-size: 12px;
  border: var(--bw) solid var(--ink);
  font-family: var(--mono);
  padding: 4px 8px;
  background: var(--bg-elevated);
  color: var(--text);
}

.company-selection-summary {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  background: none;
  padding: 5px 0 2px;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* ── Period quick actions ────────────────────────────────────────────── */

.period-quick-actions {
  display: flex;
  gap: 0;
  width: 100%;
}

.period-quick-actions .btn {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  flex: 1;
  border-right-width: 0;
}

.period-quick-actions .btn:last-child {
  border-right-width: 2px;
}

/* ── Density toggle (now in sidebar) ─────────────────────────────────── */

.density-inline-radio label {
  padding: 4px 10px;
  font-size: 11px;
  margin-bottom: 0;
}

/* ── Empty state card ────────────────────────────────────────────────── */

.company-empty-card {
  border: 2px solid var(--p-red) !important;
}

.company-empty-card .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 24px;
}

.company-empty-subtitle {
  color: var(--muted);
  font-size: 1rem;
  font-family: var(--sans);
}

.company-empty-actions {
  display: inline-flex;
  gap: 8px;
}

/* ── Sidebar Action Buttons ──────────────────────────────────────────── */

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-actions .btn {
  width: 100%;
  text-align: center;
  padding: 10px 18px;
  font-size: 13px;
}

/* ── Form Controls (global) ──────────────────────────────────────────── */

.form-control,
.Select-control,
.dash-dropdown .Select-control {
  border: var(--bw) solid var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-elevated) !important;
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
}

.Select-menu-outer,
.dash-dropdown .Select-menu-outer {
  border: var(--bw) solid var(--ink) !important;
  border-top: none !important;
  background: var(--card) !important;
  background-color: var(--card) !important;
}

/* ── Dash 4.0 Dropdown overrides (new component, new class names) ──── */

.dash-dropdown {
  border: var(--bw) solid var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  background: var(--Dash-Fill-Inverse-Strong) !important;
  background-color: var(--Dash-Fill-Inverse-Strong) !important;
  color: var(--text) !important;
}

.dash-dropdown-content {
  border: var(--bw) solid var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  background: var(--Dash-Fill-Inverse-Strong) !important;
  background-color: var(--Dash-Fill-Inverse-Strong) !important;
}

.dash-dropdown-option {
  color: var(--text) !important;
}

.dash-dropdown-option[data-highlighted],
.dash-dropdown-option:hover {
  background: var(--p-red-dim) !important;
}

.dash-dropdown-option[data-state="checked"] {
  background: var(--p-red) !important;
  color: #ffffff !important;
}

.dash-dropdown-placeholder {
  color: var(--muted) !important;
}

.dash-dropdown-value {
  color: var(--text) !important;
}

.dash-dropdown-search {
  color: var(--text) !important;
  font-family: var(--mono) !important;
}

.dash-dropdown-search-container {
  border-color: var(--ink) !important;
  background: var(--Dash-Fill-Inverse-Strong) !important;
}

.dash-dropdown-value-count {
  color: var(--muted) !important;
  background: var(--ink-subtle) !important;
}

.dash-dropdown-clear,
.dash-dropdown-trigger-icon {
  color: var(--muted) !important;
}

*:focus {
  outline: none;
}

.btn:focus,
.form-control:focus,
.Select-control:focus,
.dash-dropdown .Select-control:focus {
  box-shadow: 0 0 0 2px var(--focus) !important;
  border-color: var(--p-red) !important;
}

/* ── Range Slider ────────────────────────────────────────────────────── */

.rc-slider {
  margin: 10px 0 4px;
}

.rc-slider-track {
  background: var(--p-red) !important;
  height: 4px !important;
}

.rc-slider-rail {
  background: var(--ink-subtle) !important;
  height: 4px !important;
}

.rc-slider-handle {
  border: var(--bw) solid var(--ink) !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--bg-elevated) !important;
  box-shadow: none !important;
  margin-top: -6px !important;
}

.rc-slider-handle:hover,
.rc-slider-handle:active {
  border-color: var(--p-red) !important;
  box-shadow: none !important;
}

.rc-slider-mark-text {
  font-size: 11px !important;
  font-family: var(--mono);
  color: var(--muted) !important;
}

/* ── Table Note ───────────────────────────────────────────────────────── */

.table-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 14px;
  font-style: normal;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Console View (Launcher / Runs) ───────────────────────────────────── */

.console-view {
  background: #0d0f12;
  border: var(--bw) solid var(--ink);
  padding: 20px;
  max-height: 520px;
  overflow: auto;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.55;
  scroll-behavior: smooth;
}

/* ── Soundbite Search Clear Button ─────────────────────────────────── */

.sb-search-wrap {
  position: relative;
}

.sb-search-wrap .form-control {
  padding-right: 32px;
}

.sb-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
  font-family: var(--sans);
}

.sb-search-clear:hover {
  opacity: 1;
  color: var(--p-red);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.app-footer {
  margin-top: auto;
  border-top: var(--bw) solid var(--ink);
  padding: 16px 48px;
  color: var(--muted);
  background: var(--bg-elevated);
}

/* Hide footer when dashboard grid is active (it's below the fold) */
.app-content--dashboard ~ .app-footer {
  display: none;
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  height: 18px;
  width: auto;
  opacity: 0.45;
}

.footer-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-sub {
  color: var(--muted);
  font-size: 13px;
  opacity: 0.6;
  font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mobile (< 768px) ────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .header-bar {
    padding: 0 16px;
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand-logo {
    height: 20px;
  }

  .header-right {
    display: none;
  }

  .dashboard-grid {
    display: flex;
    flex-direction: column;
  }

  .sidebar-left {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: var(--bw) solid var(--ink);
    padding: 16px;
    overflow: visible;
  }

  .sidebar-right {
    position: static;
    height: auto;
    border-left: none;
    border-top: var(--bw) solid var(--ink);
    padding: 16px;
    overflow: visible;
  }

  .center-panel {
    padding: 16px;
  }

  .app-content:not(.app-content--dashboard) {
    padding: 16px;
  }

  .app-footer {
    padding: 14px 16px;
    display: block;
  }

  .app-content--dashboard ~ .app-footer {
    display: block;
  }

  .kpi-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .kpi-stack .kpi-card {
    border-bottom: var(--border-thin);
    border-right: var(--border-thin);
  }

  .kpi-stack .kpi-card:nth-child(2n) {
    border-right: none;
  }

  .kpi-value {
    font-size: 1.6rem;
  }

  .compact-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .company-segmented-actions .btn {
    font-size: 10px;
    padding: 5px 0;
  }

  .nav-pills .nav-link {
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* ── Tablet (769px – 1400px) ─────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1400px) {
  .dashboard-grid {
    display: flex;
    flex-direction: column;
  }

  .sidebar-left {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: var(--bw) solid var(--ink);
    padding: 20px 32px;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
  }

  .sidebar-right {
    position: static;
    height: auto;
    border-left: none;
    border-top: var(--bw) solid var(--ink);
    padding: 20px 32px;
    overflow: visible;
  }

  .kpi-stack {
    flex-direction: row;
    gap: 0;
  }

  .kpi-stack .kpi-card {
    flex: 1;
    border-bottom: none;
    border-right: var(--border-thin);
  }

  .kpi-stack .kpi-card:last-child {
    border-right: none;
  }

  .kpi-value {
    font-size: 1.6rem;
  }

  .center-panel {
    padding: 24px 32px;
  }

  .app-content:not(.app-content--dashboard) {
    padding: 24px 32px;
  }

  .header-bar {
    padding: 0 32px;
  }

  .app-footer {
    padding: 16px 32px;
    display: block;
  }

  .app-content--dashboard ~ .app-footer {
    display: block;
  }
}

/* ── Wide desktop (> 1400px) — full 3-column ─────────────────────────── */

@media (min-width: 1401px) {
  .sidebar-left::-webkit-scrollbar,
  .sidebar-right::-webkit-scrollbar {
    width: 4px;
  }

  .sidebar-left::-webkit-scrollbar-track,
  .sidebar-right::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar-left::-webkit-scrollbar-thumb,
  .sidebar-right::-webkit-scrollbar-thumb {
    background: var(--ink-subtle);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SOUNDBITE FEED — Vertical scrolling news tape (right sidebar)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Soundbite roller: compact LED-style vertical drum ──────────────── */

.soundbite-feed {
  background: var(--card);
  border: var(--bw) solid var(--ink);
  border-top: 3px solid var(--p-red);
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  height: 210px;         /* fixed — roughly matches stock board */
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.soundbite-feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 5px;
  border-bottom: 1px solid rgba(237, 28, 36, 0.20);
  position: relative;
  z-index: 3;
  background: var(--card);
}

.soundbite-feed-label {
  color: var(--p-red);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.soundbite-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-red);
  animation: feed-pulse 2s ease-in-out infinite;
}

/* Viewport window with strong top/bottom vignette */
.soundbite-feed-track {
  overflow: hidden;
  position: relative;
  height: calc(100% - 32px);  /* below header */
}

.soundbite-feed-track::before,
.soundbite-feed-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  z-index: 2;
  pointer-events: none;
}

.soundbite-feed-track::before {
  top: 0;
  background: linear-gradient(to bottom, var(--card) 10%, transparent);
}

.soundbite-feed-track::after {
  bottom: 0;
  background: linear-gradient(to top, var(--card) 15%, transparent);
}

/* The rolling drum — smooth continuous upward scroll */
.soundbite-feed-content {
  display: flex;
  flex-direction: column;
  animation: feed-roll 60s linear infinite;
  will-change: transform;
}

.soundbite-feed-content:hover {
  animation-play-state: paused;
}

.soundbite-feed-item {
  padding: 7px 12px 6px;
  border-bottom: 1px solid var(--ink-faint);
  flex-shrink: 0;
}

.soundbite-feed-company {
  color: var(--p-red);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
  opacity: 0.85;
}

.soundbite-feed-quote {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  font-style: italic;
  line-height: 1.40;
  letter-spacing: 0.01em;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Clickable soundbite links */
.soundbite-feed-link {
  text-decoration: none;
  display: block;
  cursor: pointer;
  flex-shrink: 0;
}

.soundbite-feed-link:hover .soundbite-feed-item {
  background: rgba(237, 28, 36, 0.10);
}

.soundbite-feed-link:hover .soundbite-feed-quote {
  color: var(--text);
}

/* ── Source type badges ──────────────────────────────────────── */

.source-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.4;
  opacity: 0.92;
}

.source-badge--transcript {
  background: var(--p-lavender);
  color: #1a1a2e;
}

.source-badge--presentation {
  background: var(--p-teal);
  color: #0a2520;
}

.source-badge--sec {
  background: var(--p-blue);
  color: #fff;
}

.source-badge--press-release {
  background: var(--p-orange);
  color: #1a1208;
}

.source-badge--other {
  background: var(--p-grey);
  color: #fff;
}

/* Comparison period preview in launcher */
.comparison-preview {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  padding-left: 22px;
  opacity: 0.75;
}

/* ── Launcher layout ────────────────────────────────────────────────── */

.lx-config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.lx-col-company,
.lx-col-period {
  min-width: 0;
}

.lx-explicit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  margin-top: 6px;
}

.lx-explicit-years {
  min-width: 0;
}

.lx-explicit-quarters {
  padding-top: 0;
}

.lx-explicit-quarters .form-label {
  white-space: nowrap;
}

/* ── Launcher inline controls (options in left col, actions in right col) ── */

.lx-options-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--ink-faint);
}

.lx-actions-row {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  padding-top: 6px;
  border-top: 1px solid var(--ink-faint);
}

.lx-estimate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.lx-estimate-icon {
  flex-shrink: 0;
  opacity: 0.5;
}

.lx-estimate-value {
  color: var(--text);
  font-weight: 600;
}

.lx-estimate-detail {
  color: var(--muted);
  font-size: 10px;
}

.lx-year-warn {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--p-gold, #CCAF7B);
  background: rgba(204, 175, 123, 0.08);
  border-radius: var(--radius);
  border-left: 2px solid var(--p-gold, #CCAF7B);
}
.lx-notion-warn {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--p-red, #C1444B);
  background: rgba(193, 68, 75, 0.08);
  border-radius: var(--radius);
  border-left: 2px solid var(--p-red, #C1444B);
}

@media (max-width: 768px) {
  .lx-config-row {
    grid-template-columns: 1fr;
  }

  .lx-explicit-row {
    grid-template-columns: 1fr;
  }

}

@keyframes feed-roll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes feed-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STOCK BOARD — Live market prices (right sidebar)
   ═══════════════════════════════════════════════════════════════════════ */

.stock-board {
  background: var(--card);
  border: var(--bw) solid var(--ink);
  border-top: 3px solid var(--p-green);
  margin-top: 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.stock-board-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(0, 151, 65, 0.25);
}

.stock-board-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-green);
  animation: feed-pulse 2.5s ease-in-out infinite;
}

.stock-board-label {
  color: var(--p-green);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stock-board-time {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  margin-left: auto;
}

.stock-board-rows {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-subtle) transparent;
}

.stock-board-rows::-webkit-scrollbar {
  width: 4px;
}

.stock-board-rows::-webkit-scrollbar-thumb {
  background: var(--ink-subtle);
}

.stock-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--ink-faint);
  transition: background 0.15s;
}

.stock-row:hover {
  background: var(--hover);
}

a.stock-id,
a.stock-id:hover,
a.stock-id:visited {
  text-decoration: none;
  color: inherit;
}

.stock-id {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

a.stock-id:hover .stock-ticker {
  color: var(--text);
}

a.stock-id:hover .stock-name {
  color: var(--text);
}

.stock-ticker {
  color: var(--text);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.stock-name {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-price {
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
}

.stock-change {
  font-family: var(--mono);
  font-size: 9px;
  text-align: right;
  white-space: nowrap;
  min-width: 52px;
}

.stock-up {
  color: #00c853;
}

.stock-down {
  color: #ff1744;
}

.stock-board-loading {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  padding: 12px;
  text-align: center;
}

/* ── Metric Grid Visual Separation ──────────────────────────────────── */

#fin-standard-wrap {
  min-height: 440px;
}

#metric-grid-wrap {
  background: var(--card);
  border: var(--bw) solid var(--ink);
  padding: 18px 16px 12px;
  margin-top: 24px;
  min-height: 440px;
}

#metric-grid-wrap .section-title {
  margin-bottom: 8px;
}

/* ── Stock Sparkline ────────────────────────────────────────────────── */

.stock-spark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  opacity: 0.85;
}

.stock-spark svg {
  display: block;
}

/* ── Plotly Chart Overrides ────────────────────────────────────────────── */

.js-plotly-plot .plotly .modebar {
  opacity: 0;
  transition: opacity 200ms;
}

.js-plotly-plot:hover .plotly .modebar {
  opacity: 0.5;
}

/* ── Tab pane clipping (prevent AG Grid bleed-through) ──────────────── */

.tab-pane {
  position: relative;
  overflow: hidden;
}
.tab-pane:not(.active) {
  display: none !important;
}

/* ── ag-Grid ─────────────────────────────────────────────────────────── */

.ag-theme-quartz {
  --ag-border-radius: var(--radius);
  --ag-font-size: 13px;
  --ag-font-family: var(--mono);
  --ag-row-height: 38px;
  --ag-header-height: 42px;
  --ag-header-font-family: var(--sans);
  --ag-header-font-weight: 700;
  --ag-borders: solid var(--bw);
  --ag-border-color: var(--ink);
  --ag-selected-row-background-color: rgba(237, 28, 36, 0.10);
  --ag-range-selection-highlight-color: rgba(237, 28, 36, 0.15);
}

/* Flash highlight for deep-linked soundbite rows */
.ag-theme-quartz .ag-cell-data-changed {
  background-color: rgba(237, 28, 36, 0.22) !important;
  transition: background-color 1.5s ease-out;
}

.ag-theme-quartz .ag-row-selected {
  background-color: rgba(237, 28, 36, 0.08) !important;
  border-left: 3px solid var(--p-red);
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════════ */

.theme-toggle-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.50);
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--mono);
  transition: color 0.15s, border-color 0.15s;
  line-height: 1.4;
}

.theme-toggle-btn:hover {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK THEME — Component-level overrides
   All values hardcoded (no var()) + !important to beat Bootstrap/inline.
   Palette: bg=#18181B  elevated=#1E1E22  card=#27272A  border=#3F3F46
            text=#ECECEE  muted=#A1A1AA  red=#ED1C24
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Dropdowns (Dash React-Select) ────────────────────────────────── */

[data-theme="dark"] .Select-control,
[data-theme="dark"] .dash-dropdown .Select-control,
[data-theme="dark"] .Select.is-open > .Select-control,
[data-theme="dark"] .Select.has-value > .Select-control,
[data-theme="dark"] .Select.is-focused > .Select-control,
[data-theme="dark"] .Select.is-focused:not(.is-open) > .Select-control {
  background: #27272A !important;
  background-color: #27272A !important;
  color: #ECECEE !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .Select-menu-outer,
[data-theme="dark"] .dash-dropdown .Select-menu-outer {
  background: #27272A !important;
  background-color: #27272A !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .Select-option,
[data-theme="dark"] .VirtualizedSelectOption {
  background: #27272A !important;
  background-color: #27272A !important;
  color: #ECECEE !important;
}

[data-theme="dark"] .Select-option.is-focused,
[data-theme="dark"] .VirtualizedSelectFocusedOption {
  background: rgba(237, 28, 36, 0.15) !important;
  color: #ECECEE !important;
}

[data-theme="dark"] .Select-option.is-selected,
[data-theme="dark"] .VirtualizedSelectSelectedOption {
  background: #ED1C24 !important;
  color: #ffffff !important;
}

/* Single-value display — the critical fix for invisible dropdown text */
[data-theme="dark"] .Select-value {
  color: #ECECEE !important;
}

[data-theme="dark"] .Select-value-label,
[data-theme="dark"] .Select--single .Select-value-label,
[data-theme="dark"] .dash-dropdown .Select-value-label {
  color: #ECECEE !important;
}

[data-theme="dark"] .Select-placeholder,
[data-theme="dark"] .dash-dropdown .Select-placeholder {
  color: #A1A1AA !important;
}

[data-theme="dark"] .Select-input > input,
[data-theme="dark"] .Select-input input {
  color: #ECECEE !important;
}

[data-theme="dark"] .Select-arrow {
  border-color: #A1A1AA transparent transparent !important;
}

[data-theme="dark"] .Select-clear-zone {
  color: #A1A1AA !important;
}

[data-theme="dark"] .Select-noresults {
  color: #A1A1AA !important;
  background: #27272A !important;
}

/* Multi-value tags */
[data-theme="dark"] .Select--multi .Select-value {
  background: #3F3F46 !important;
  border-color: #52525B !important;
  color: #ECECEE !important;
}

[data-theme="dark"] .Select--multi .Select-value-label {
  color: #ECECEE !important;
}

[data-theme="dark"] .Select--multi .Select-value-icon {
  border-right-color: #52525B !important;
  color: #ECECEE !important;
}

[data-theme="dark"] .Select--multi .Select-value-icon:hover {
  background: #ED1C24 !important;
  color: #ffffff !important;
}

/* ── Buttons — all variants need !important to beat Bootstrap ──── */

[data-theme="dark"] .btn {
  border-color: #3F3F46 !important;
  color: #ECECEE !important;
}

[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-primary {
  background: #27272A !important;
  background-color: #27272A !important;
  color: #ECECEE !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-primary:hover {
  background: #52525B !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary {
  background: #27272A !important;
  color: #ECECEE !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .btn-secondary:hover {
  background: #52525B !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-primary {
  background: #ED1C24 !important;
  border-color: #ED1C24 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover {
  background: #52525B !important;
  border-color: #52525B !important;
  color: #ffffff !important;
}

/* ── Pills (checkbox/radio) ───────────────────────────────────── */

[data-theme="dark"] .pill-checklist label,
[data-theme="dark"] .pill-radio label {
  background: #27272A !important;
  color: #ECECEE !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .pill-checklist input[type="checkbox"]:checked + label,
[data-theme="dark"] .pill-checklist label:has(input:checked),
[data-theme="dark"] .pill-radio input[type="radio"]:checked + label,
[data-theme="dark"] .pill-radio label:has(input:checked) {
  background: #ED1C24 !important;
  color: #ffffff !important;
  border-color: #ED1C24 !important;
}

[data-theme="dark"] .pill-checklist label:hover,
[data-theme="dark"] .pill-radio label:hover {
  background: #3F3F46 !important;
  color: #ffffff !important;
}

/* ── Company segmented actions ────────────────────────────────── */

[data-theme="dark"] .company-segmented-actions {
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .company-segmented-actions .btn {
  background: #27272A !important;
  color: #ECECEE !important;
  border-right-color: #3F3F46 !important;
}

[data-theme="dark"] .company-segmented-actions .btn:hover:not(.active) {
  background: #3F3F46 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .company-segmented-actions .btn.active {
  background: #ED1C24 !important;
  color: #ffffff !important;
}

/* ── Cards ────────────────────────────────────────────────────── */

[data-theme="dark"] .glass-card {
  background: #27272A !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .compact-chart-card {
  background: #27272A !important;
  border-color: #3F3F46 !important;
}

/* ── ag-Grid ──────────────────────────────────────────────────── */

[data-theme="dark"] .ag-theme-quartz {
  --ag-background-color: #27272A;
  --ag-foreground-color: #ECECEE;
  --ag-header-background-color: #1E1E22;
  --ag-header-foreground-color: #ECECEE;
  --ag-odd-row-background-color: #1E1E22;
  --ag-row-hover-color: rgba(255, 255, 255, 0.05);
  --ag-border-color: #3F3F46;
}

/* ── Slider ───────────────────────────────────────────────────── */

[data-theme="dark"] .rc-slider-rail {
  background: #3F3F46 !important;
}

[data-theme="dark"] .rc-slider-handle {
  background: #27272A !important;
  background-color: #27272A !important;
  border-color: #52525B !important;
}

[data-theme="dark"] .rc-slider-mark-text,
[data-theme="dark"] .rc-slider-mark-text-active {
  color: #A1A1AA !important;
}

[data-theme="dark"] .rc-slider-dot {
  background: #3F3F46 !important;
  border-color: #52525B !important;
}

/* ── KPI cards ────────────────────────────────────────────────── */

[data-theme="dark"] .kpi-card {
  background: #27272A !important;
  border-bottom-color: #3F3F46 !important;
}

[data-theme="dark"] .kpi-card:hover {
  background: #2E2E32 !important;
}

[data-theme="dark"] .kpi-tooltip-panel {
  background: #27272A !important;
  border-color: #3F3F46 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.30) !important;
}

[data-theme="dark"] .kpi-tt-row {
  border-bottom-color: #3F3F46 !important;
}

/* ── Metric grid wrap ─────────────────────────────────────────── */

[data-theme="dark"] #metric-grid-wrap {
  background: #27272A !important;
  border-color: #3F3F46 !important;
}

/* ── Footer ───────────────────────────────────────────────────── */

[data-theme="dark"] .app-footer {
  background: #1E1E22 !important;
  border-top-color: #3F3F46 !important;
}

/* ── Nav tabs (center panel) ──────────────────────────────────── */

[data-theme="dark"] .nav-tabs {
  border-bottom-color: #3F3F46 !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: #A1A1AA !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: #ECECEE !important;
  border-bottom-color: #3F3F46 !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  color: #ED1C24 !important;
  border-bottom-color: #ED1C24 !important;
}

/* ── Sidebar section ──────────────────────────────────────────── */

[data-theme="dark"] .sidebar-section {
  border-bottom-color: #3F3F46 !important;
}

[data-theme="dark"] .sidebar-section-title {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: #ECECEE !important;
}

/* ── Preset input ─────────────────────────────────────────────── */

[data-theme="dark"] .company-preset-name {
  background: #27272A !important;
  background-color: #27272A !important;
  color: #ECECEE !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .company-preset-name::placeholder {
  color: #71717A !important;
}

/* ── Form controls (global dark) ──────────────────────────────── */

[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] .form-select {
  background: #27272A !important;
  background-color: #27272A !important;
  color: #ECECEE !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: #71717A !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea {
  color: #ECECEE !important;
  background-color: #27272A !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #71717A !important;
}

/* ── Scrollbar dark overrides ─────────────────────────────────── */

[data-theme="dark"] .sidebar-left,
[data-theme="dark"] .sidebar-right {
  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}

[data-theme="dark"] .sidebar-left::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-right::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
}

/* ── Header — blend with dark page bg ─────────────────────────── */

[data-theme="dark"] .app-header {
  background: #18181B !important;
  border-bottom-color: #ED1C24 !important;
}

[data-theme="dark"] .gp-strip {
  background: #18181B !important;
  border-bottom-color: rgba(237, 28, 36, 0.25) !important;
}

[data-theme="dark"] .gp-bar-track {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ── Stock board + soundbite feed ─────────────────────────────── */

[data-theme="dark"] .stock-board {
  background: #1E1E22 !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .stock-board-rows {
  scrollbar-color: rgba(255,255,255,0.08) transparent !important;
}

[data-theme="dark"] .stock-board-rows::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10) !important;
}

[data-theme="dark"] .soundbite-feed {
  background: #1E1E22 !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .soundbite-feed-header {
  background: #1E1E22 !important;
}

[data-theme="dark"] .soundbite-feed-track::before {
  background: linear-gradient(to bottom, #1E1E22 10%, transparent) !important;
}

[data-theme="dark"] .soundbite-feed-track::after {
  background: linear-gradient(to top, #1E1E22 15%, transparent) !important;
}

[data-theme="dark"] .soundbite-feed-item {
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .soundbite-feed-quote {
  color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="dark"] .soundbite-feed-link:hover .soundbite-feed-quote {
  color: rgba(255, 255, 255, 0.72) !important;
}

[data-theme="dark"] .stock-row {
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .stock-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .source-badge--transcript {
  background: rgba(180, 160, 220, 0.25) !important;
  color: #d4c4f0 !important;
}

[data-theme="dark"] .source-badge--presentation {
  background: rgba(0, 180, 170, 0.22) !important;
  color: #7edcd6 !important;
}

[data-theme="dark"] .source-badge--sec {
  background: rgba(34, 113, 179, 0.28) !important;
  color: #7fb8e0 !important;
}

[data-theme="dark"] .source-badge--press-release {
  background: rgba(255, 127, 0, 0.22) !important;
  color: #f0b060 !important;
}

[data-theme="dark"] .source-badge--other {
  background: rgba(137, 137, 137, 0.22) !important;
  color: #A1A1AA !important;
}

[data-theme="dark"] .comparison-preview {
  color: #A1A1AA !important;
}

/* ── Empty state card ─────────────────────────────────────────── */

[data-theme="dark"] .company-empty-card {
  border-color: #ED1C24 !important;
  background: #27272A !important;
}

/* ── Period quick actions ─────────────────────────────────────── */

[data-theme="dark"] .period-quick-actions .btn {
  background: #27272A !important;
  color: #ECECEE !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .period-quick-actions .btn:hover {
  background: #52525B !important;
  color: #ffffff !important;
}

/* ── Selection summary + filter label ─────────────────────────── */

[data-theme="dark"] .company-selection-summary {
  color: #A1A1AA !important;
}

[data-theme="dark"] .filter-label {
  color: #A1A1AA !important;
}

/* ── Sidebar selected option (dark needs red, not p-black) ────── */

[data-theme="dark"] .sidebar-left .Select-option.is-selected {
  background: #ED1C24 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .center-panel .Select-option.is-selected {
  background: #ED1C24 !important;
  color: #ffffff !important;
}

/* ── Catch-all: Select wrapper + menu + misc form elements ────── */

[data-theme="dark"] .Select,
[data-theme="dark"] .Select--single,
[data-theme="dark"] .Select--multi {
  background: transparent !important;
  background-color: transparent !important;
}

[data-theme="dark"] .Select-menu {
  background: #27272A !important;
  background-color: #27272A !important;
}

[data-theme="dark"] .Select-input {
  background: transparent !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-body {
  background: #27272A !important;
  background-color: #27272A !important;
  color: #ECECEE !important;
}

[data-theme="dark"] .modal-content {
  background: #27272A !important;
  background-color: #27272A !important;
  color: #ECECEE !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .list-group-item {
  background: #27272A !important;
  background-color: #27272A !important;
  color: #ECECEE !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .table {
  color: #ECECEE !important;
  --bs-table-bg: #27272A;
  --bs-table-striped-bg: #1E1E22;
}

/* Body / page background for dark */
[data-theme="dark"] body,
[data-theme="dark"] .app-root,
[data-theme="dark"] .app-content {
  background: #18181B !important;
  background-color: #18181B !important;
  color: #ECECEE !important;
}

[data-theme="dark"] .container-fluid {
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════
   CHART FULLSCREEN OVERLAY
   ═══════════════════════════════════════════════════════════════ */

/* Expand button — floats in top-right corner of each chart wrapper */
.chart-fs-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated, #fff);
  border: 1.5px solid var(--ink-subtle, rgba(42,41,42,0.18));
  border-radius: 6px;
  color: var(--muted, #74726D);
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s, color 0.12s;
  line-height: 1;
  padding: 0;
  font-family: var(--mono);
}

/* Show on hover over the chart container */
*:hover > .chart-fs-btn,
.chart-fs-btn:hover,
.chart-fs-btn:focus-visible {
  opacity: 1;
}
.chart-fs-btn:hover {
  background: var(--ink, #2A292A);
  color: #fff;
  border-color: var(--ink, #2A292A);
}

/* Backdrop (semi-transparent overlay behind the expanded chart) */
#chart-fs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

/* The active (fullscreen) chart wrapper */
.chart-fs-active {
  position: fixed !important;
  inset: 24px !important;
  z-index: 9999 !important;
  background: var(--bg-elevated, #fff) !important;
  border-radius: 12px !important;
  border: var(--bw) solid var(--ink, #2A292A) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35) !important;
  overflow: auto !important;
  padding: 16px !important;
  contain: unset !important;
  display: block !important;
  min-height: unset !important;
  max-height: unset !important;
  height: auto !important;
}

/* Ensure Plotly chart fills the fullscreen container */
.chart-fs-active .js-plotly-plot,
.chart-fs-active .plot-container,
.chart-fs-active .dash-graph {
  width: 100% !important;
  height: calc(100vh - 80px) !important;
  min-height: 500px !important;
}

/* Keep the expand button visible and change to a collapse icon */
.chart-fs-active > .chart-fs-btn {
  opacity: 1;
  position: fixed;
  top: 32px;
  right: 32px;
  z-index: 10001;
  font-size: 18px;
  width: 34px;
  height: 34px;
}

/* Close × button (injected by JS) */
.chart-fs-close {
  position: fixed;
  top: 32px;
  right: 74px;
  z-index: 10001;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--p-red, #ED1C24);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background 0.12s;
}
.chart-fs-close:hover {
  background: #c9101a;
}

/* Hide close button when NOT fullscreen */
.chart-fs-close {
  display: none;
}
.chart-fs-active .chart-fs-close {
  display: flex;
}

/* ── Dark mode overrides ─────────────────────────────────────── */

[data-theme="dark"] .chart-fs-btn {
  background: #27272A;
  border-color: #3F3F46;
  color: #A1A1AA;
}
[data-theme="dark"] .chart-fs-btn:hover {
  background: #ECECEE;
  color: #18181B;
  border-color: #ECECEE;
}
[data-theme="dark"] #chart-fs-backdrop {
  background: rgba(0, 0, 0, 0.70);
}
[data-theme="dark"] .chart-fs-active {
  background: #1E1E22 !important;
  border-color: #3F3F46 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.60) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.about-page {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 8px;
}

.about-body {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 0.5rem;
}

/* ── Nav link muted style ──────────────────────────────────────────────── */

.nav-link-muted {
  opacity: 0.55;
  font-size: 0.85em;
}
.nav-link-muted:hover,
.nav-link-muted.active {
  opacity: 1;
}

/* ── Flow Diagram ──────────────────────────────────────────────────────── */

.about-flow {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 18px 0 8px;
  overflow-x: auto;
}

.about-flow-step {
  flex: 1 1 0;
  min-width: 120px;
  background: var(--bg-elevated);
  border: var(--bw) solid var(--ink);
  padding: 12px 14px 10px;
  text-align: center;
  border-radius: var(--radius);
}

.about-flow-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.about-flow-sub {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 3px;
}

.about-flow-arrow {
  flex: 0 0 28px;
  height: 2px;
  background: var(--muted);
  position: relative;
}

.about-flow-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  border: 5px solid transparent;
  border-left: 6px solid var(--muted);
}

/* ── Formula Table ─────────────────────────────────────────────────────── */

.about-formula-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.about-formula-table th {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 12px;
  border-bottom: 2px solid var(--ink);
  text-align: left;
}

.about-formula-table td {
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ink);
  color: var(--text);
  vertical-align: top;
}

.about-formula-table code {
  font-family: var(--mono);
  font-size: 0.82rem;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text);
  white-space: nowrap;
}

.about-formula-name {
  font-weight: 600;
  white-space: nowrap;
}

.about-formula-note {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ── Validation Steps ──────────────────────────────────────────────────── */

.about-val-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-val-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--p-red);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.about-val-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}

.about-val-body {
  margin-left: 36px;
  margin-top: 4px;
}

/* ── Mobile: stack flow diagram vertically ─────────────────────────────── */

@media (max-width: 700px) {
  .about-flow {
    flex-direction: column;
    align-items: stretch;
  }
  .about-flow-arrow {
    width: 2px;
    height: 20px;
    flex: 0 0 20px;
    align-self: center;
  }
  .about-flow-arrow::after {
    right: auto;
    left: -4px;
    top: auto;
    bottom: 0;
    border: 5px solid transparent;
    border-top: 6px solid var(--muted);
    border-left: 5px solid transparent;
  }
}

/* ── Dark mode overrides for About page ────────────────────────────────── */

[data-theme="dark"] .about-flow-step {
  background: #27272A !important;
  border-color: #3F3F46 !important;
}

[data-theme="dark"] .about-formula-table code {
  background: #27272A !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   QC / DATA QUALITY TAB
   ═══════════════════════════════════════════════════════════════════════ */

/* ── QC Summary Strip (pill badges above heatmap) ─────────────────────── */

.qc-summary-strip {
  display: flex;
  gap: 12px;
  padding: 12px 0 16px;
  flex-wrap: wrap;
}

.qc-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.qc-summary-pill--fresh { background: #dcfce7; color: #166534; }
.qc-summary-pill--aging { background: #fef9c3; color: #854d0e; }
.qc-summary-pill--old   { background: #fed7aa; color: #9a3412; }
.qc-summary-pill--stale { background: #fee2e2; color: #991b1b; }

/* ── QC Heatmap / Freshness containers ────────────────────────────────── */

.qc-heatmap-wrap {
  margin-bottom: 24px;
}

.qc-freshness-wrap {
  margin-bottom: 16px;
}

/* ── QC Sidebar Badges (right sidebar — always visible) ───────────────── */

.qc-sidebar-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qc-freshness-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.82rem;
}

.qc-badge-company {
  flex: 1;
  font-family: var(--sans);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.qc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.qc-badge--fresh    { background: #dcfce7; color: #166534; }
.qc-badge--aging    { background: #fef9c3; color: #854d0e; }
.qc-badge--warn     { background: #fed7aa; color: #9a3412; }
.qc-badge--critical { background: #fee2e2; color: #991b1b; }

.qc-badge-time {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
}

/* ── QC Dark Mode Overrides ───────────────────────────────────────────── */

[data-theme="dark"] .qc-summary-pill--fresh { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .qc-summary-pill--aging { background: #713f12; color: #fde68a; }
[data-theme="dark"] .qc-summary-pill--old   { background: #7c2d12; color: #fed7aa; }
[data-theme="dark"] .qc-summary-pill--stale { background: #7f1d1d; color: #fca5a5; }

[data-theme="dark"] .qc-badge--fresh    { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .qc-badge--aging    { background: #713f12; color: #fde68a; }
[data-theme="dark"] .qc-badge--warn     { background: #7c2d12; color: #fed7aa; }
[data-theme="dark"] .qc-badge--critical { background: #7f1d1d; color: #fca5a5; }