/* ================================================================
   FORMATTING OVERRIDES — 2026-05-08
   Tightens the dashboard toward a dense analytical aesthetic
   (FT / Bloomberg / S&P) without rewriting the base sheet.
   Loaded AFTER style.css to win specificity by source order.
   ================================================================ */

/* ---- 1. Token retune: desaturate accent, kill semantic color mass ---- */
:root, [data-theme="light"] {
  --color-accent:        #3a4a5c;  /* was #5ba3d9 saturated marketing blue */
  --color-accent-light:  #4a5d72;
  --color-accent-subtle: #eef0f3;
  --color-accent-border: #c9d0d9;
  /* keep --color-success / --color-danger for badges only;
     YoY numeric color is overridden below */
}
[data-theme="dark"] {
  --color-accent:        #b3c2d4;
  --color-accent-light:  #c8d4e2;
  --color-accent-subtle: #1e242c;
  --color-accent-border: #2c3540;
}

/* ---- 2. Hero: drop editorial eyebrow flourish ---- */
.page-hero .part-label { display: none; }
.page-hero { padding-top: 28px; padding-bottom: 14px; }
.page-hero h1 { font-size: 32px; letter-spacing: -0.5px; }
.page-hero .subtitle { font-size: 15px; color: var(--color-text-muted); }

/* ---- 3. Filter chips → quiet segmented control ---- */
.filter-chips { gap: 0; border-bottom: 1px solid var(--color-border-light); }
.chip {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  min-height: auto !important;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text-muted) !important;
}
.chip:hover {
  color: var(--color-text) !important;
  border-bottom-color: var(--color-border) !important;
}
.chip.active {
  color: var(--color-text) !important;
  background: transparent !important;
  border-bottom-color: var(--color-text) !important;
}

/* ---- 4. Data table: tighter rows, right-align numerics ---- */
.data-table { font-size: 13px; line-height: 1.4; }
.data-table th {
  font-size: 10.5px;
  letter-spacing: 0.6px;
  padding: 10px 12px !important;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border) !important;
  background: transparent;
}
.data-table thead { background: transparent; }
.data-table td {
  padding: 9px 12px !important;
  border-top: 1px solid var(--color-border-light) !important;
}
.data-table tbody tr:nth-child(even) { background: transparent; }
.data-table tbody tr:hover { background: var(--color-surface-2); }

/* Tabular figures everywhere in the table */
.data-table td, .data-table th { font-variant-numeric: tabular-nums; }

/* ---- 5. YoY: kill green for positive; black on neutral, muted red on neg ---- */
.yoy-positive { color: var(--color-text) !important; font-weight: 500 !important; }
.yoy-negative { color: #8b2525 !important; font-weight: 500 !important; }
[data-theme="dark"] .yoy-negative { color: #e08585 !important; }

/* Mover arrows in summary tables: same treatment */
.mover-up   { color: var(--color-text) !important; }
.mover-down { color: #8b2525 !important; }
[data-theme="dark"] .mover-down { color: #e08585 !important; }

/* ---- 6. Badges: collapse 4 colors to 2 muted tints, drop dots ---- */
.badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  letter-spacing: 0.5px;
  gap: 0 !important;
}
.badge-dot { display: none !important; }

.badge-active,
.badge-reviewed {
  color: var(--color-text-secondary) !important;
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
}
.badge-exited,
.badge-profiled,
.badge-barebones {
  color: var(--color-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
}

/* ---- 7. Carrier name links + profile links: desaturated ---- */
.carrier-name a,
.profile-link {
  color: var(--color-text) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.carrier-name a:hover,
.profile-link:hover {
  border-bottom-color: var(--color-text);
  text-decoration: none;
}
.profile-link { font-size: 12px; color: var(--color-text-muted) !important; }

/* ---- 8. Stat cards: shorter, left-aligned, semantic-color discipline ---- */
.stat-card {
  padding: 14px 16px !important;
  text-align: left !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  position: relative;
}
.stat-value {
  font-family: var(--font-body) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px;
  margin-bottom: 4px !important;
  color: var(--color-text) !important;
}
.stat-label {
  font-size: 11px !important;
  letter-spacing: 0.6px !important;
  color: var(--color-text-muted) !important;
}
/* Drop semantic-free color on stat values — only ± deltas should be colored */
.stat-active, .stat-bcbs, .stat-exited { color: var(--color-text) !important; }
/* Source attribution inside stat card: footnote-tier, doesn't push card height */
.stat-source {
  font-size: 9.5px !important;
  letter-spacing: 0.4px !important;
  color: var(--color-text-faint) !important;
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 500;
}

/* ---- 9. Chart cards: lower visual weight, square corners ---- */
.chart-card {
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
}

/* ---- 10. Tighten container rhythm on dashboard ---- */
#tab-dashboard .stats-row { gap: 10px !important; margin-bottom: 18px !important; }

/* ---- 11. Theme-toggle button: lighter chrome ---- */
.theme-toggle { border: none !important; }

/* ---- 12. Mobile: keep filter-control clean ---- */
@media (max-width: 720px) {
  .filter-chips { overflow-x: auto; flex-wrap: nowrap; }
  .chip { white-space: nowrap; }
  .page-hero h1 { font-size: 26px; }
}