/* ============================================================
   Bloomberg-terminal-style theme — v2 (cleaner separation)
   ============================================================ */

:root {
  /* Core surfaces — pure-black terminal canvas */
  --bb-bg:        #000000;   /* pure black canvas */
  --bb-bg-2:      #070707;   /* recessed (run-output, table header, inputs) */
  --bb-panel:     #0c0c0c;   /* card surface */
  --bb-panel-2:   #151515;   /* card header, kv-block */
  --bb-row-alt:   #0a0a0a;   /* zebra-stripe alternate */
  --bb-row-hover: #241a06;   /* warm amber hover */
  --bb-border:    #242424;
  --bb-border-2:  #383838;
  /* Bloomberg command-bar maroon (the iconic red function bar) */
  --bb-maroon:    #6c1414;
  --bb-maroon-2:  #8a1c1c;
  --bb-maroon-dim:#430c0c;
  /* Signal palette — saturated terminal tones */
  --bb-amber:     #ff8e1c;
  --bb-amber-2:   #ffb454;
  --bb-amber-dim: #b9700f;
  --bb-green:     #33d152;
  --bb-green-dim: #1c8a32;
  --bb-red:       #ff3b30;
  --bb-red-dim:   #9e2b22;
  --bb-yellow:    #ffcf2e;
  --bb-blue:      #3fb9ff;
  --bb-text:      #ececec;   /* brighter primary text */
  --bb-text-dim:  #c4c4c4;   /* was #9a9a9a — lifted toward white */
  --bb-muted:     #9c9c9c;   /* was #6e6e6e — secondary text now clearly legible */
  --bb-muted-2:   #6a6a6a;   /* was #454545 */
}

/* Version tag beside the TRADER wordmark (navbar). Source of truth is
   pipeline.__version__, injected as {{ app_version }} by the UI. */
.app-version {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--bb-amber);
  vertical-align: super;
  margin-left: 0.3rem;
  letter-spacing: 0.03em;
}

html, body {
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  letter-spacing: 0;
}

* { border-radius: 0 !important; }
::selection { background: var(--bb-amber); color: #000; }

/* Unify every dark surface on the pure-black canvas (login body, etc.).
   Placed BEFORE .navbar so the navbar's own !important maroon still wins. */
.bg-dark { background: var(--bb-bg) !important; }

/* Generic links read as Bloomberg cyan, warm to amber on hover. Themed link
   classes (.navbar links, .ticker-link, .alert a) override this below. */
a { color: var(--bb-blue); text-decoration: none; }
a:hover { color: var(--bb-amber-2); }

code, kbd, samp { color: var(--bb-amber-2); background: var(--bb-bg-2); padding: 0 0.25rem; }

/* Sortable tables: clickable headers with a sort-direction indicator. */
table.sortable thead th { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable thead th:hover { color: var(--bb-amber-2); }
table.sortable thead th::after { content: " ↕"; opacity: 0.3; font-size: 0.85em; }
table.sortable thead th[data-sort-dir="asc"]::after  { content: " ▲"; opacity: 1; color: var(--bb-amber); }
table.sortable thead th[data-sort-dir="desc"]::after { content: " ▼"; opacity: 1; color: var(--bb-amber); }

/* ----------------------------------------------------------------
   Top nav
---------------------------------------------------------------- */
.navbar {
  background: linear-gradient(180deg, var(--bb-maroon-2), var(--bb-maroon)) !important;
  border-bottom: 2px solid var(--bb-amber);
  padding: 0.32rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 0 rgba(0,0,0,0.6);
}
.navbar-brand {
  color: var(--bb-amber-2) !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.95rem;
  text-shadow: 0 1px 1px rgba(0,0,0,0.55);
}
.navbar .text-light {
  color: #f1ddcb !important;
  font-size: 0.78rem;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.navbar .text-light:hover { color: var(--bb-amber-2) !important; }
.navbar .text-light strong { color: #fff; }

/* Header overrides (UI request): pure-black bar (replaces the maroon command-bar
   gradient) + a demarcated logout. Specificity beats .navbar / .navbar .text-light,
   so these win the !important rules above regardless of source order. */
.navbar.trader-nav {
  background: var(--bb-bg) !important;            /* #000 */
  border-bottom: 1px solid var(--bb-border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.navbar .text-light.nav-logout {
  margin-left: 0.5rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--bb-border-2);
  color: var(--bb-muted) !important;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
.navbar .text-light.nav-logout:hover { color: var(--bb-red) !important; }

/* ----------------------------------------------------------------
   Cards
---------------------------------------------------------------- */
.card, .step-card {
  background: var(--bb-panel);
  border: 1px solid var(--bb-border);
  margin-bottom: 0.75rem;
}
.card-header {
  background: var(--bb-panel-2);
  border-bottom: 1px solid var(--bb-amber-dim);
  color: var(--bb-amber);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  padding: 0.45rem 0.8rem;
}
.card-header strong { color: var(--bb-amber); }
.card-body { padding: 0.75rem 0.85rem; color: var(--bb-text); }

/* Per-step description line + collapsible cards (click the header to toggle) */
.step-toggle { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.step-desc {
  color: var(--bb-text-dim);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.7rem;
  margin-top: 0.15rem;
}
.collapse-chevron { color: var(--bb-muted); font-size: 0.7rem; line-height: 1.4; transition: transform 0.15s ease; }
.step-card.collapsed .collapse-chevron { transform: rotate(-90deg); }
.step-card.collapsed .card-body,
.step-card.collapsed .run-output { display: none !important; }

/* ----------------------------------------------------------------
   Tables — strong header rule, zebra striping, dense rows
---------------------------------------------------------------- */
.table {
  color: var(--bb-text);
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.table > :not(caption) > * > * {
  background: transparent;
  color: inherit;
  border: 0;
  border-bottom: 1px solid var(--bb-border);
  padding: 0.32rem 0.55rem;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;   /* aligned digit columns (terminal feel) */
}
.table thead th {
  color: var(--bb-amber);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--bb-amber) !important;
  background: var(--bb-bg-2);
  padding: 0.4rem 0.55rem !important;
  white-space: nowrap;
}
.table tbody tr:nth-child(even) > * { background: var(--bb-row-alt); }
.table-hover > tbody > tr:hover > * {
  background: var(--bb-row-hover) !important;
  color: var(--bb-amber-2) !important;
}

/* numeric / right-aligned columns in amber for scanability */
.table td.text-end,
.table th.text-end {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.table td.text-end { color: var(--bb-amber-2); }
.table td.text-end .text-muted { color: var(--bb-muted) !important; }

/* in-table mini-rows (e.g. "sec X.XX" subline) */
.table td > div.text-muted { font-size: 0.68rem; opacity: 0.85; }

/* ----------------------------------------------------------------
   Inputs / form controls
---------------------------------------------------------------- */
.form-select, .form-control {
  background: var(--bb-bg-2);
  color: var(--bb-amber-2);
  border: 1px solid var(--bb-border-2);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.18rem 0.4rem;
}
.form-select:focus, .form-control:focus {
  background: var(--bb-bg-2);
  color: var(--bb-amber-2);
  border-color: var(--bb-amber);
  box-shadow: 0 0 0 1px var(--bb-amber);
  outline: none;
}
.form-check-input {
  background: var(--bb-bg-2);
  border: 1px solid var(--bb-muted);
}
.form-check-input:checked {
  background: var(--bb-amber);
  border-color: var(--bb-amber);
}
.form-check-label {
  color: var(--bb-text-dim);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.input-group-text {
  background: var(--bb-panel-2);
  color: var(--bb-muted);
  border: 1px solid var(--bb-border-2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.5rem;
}

/* ----------------------------------------------------------------
   Buttons
---------------------------------------------------------------- */
.btn-primary {
  background: var(--bb-amber);
  border: 1px solid var(--bb-amber);
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
  padding: 0.25rem 0.95rem;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--bb-amber-2);
  border-color: var(--bb-amber-2);
  color: #000;
}
.btn-close { filter: invert(1) brightness(1.5); }

/* ----------------------------------------------------------------
   Semantic text
---------------------------------------------------------------- */
.text-muted   { color: var(--bb-muted) !important; }
.text-success { color: var(--bb-green) !important; }
.text-danger  { color: var(--bb-red)   !important; }
.text-warning { color: var(--bb-yellow) !important; }
.text-info    { color: var(--bb-blue)  !important; }

/* ----------------------------------------------------------------
   KV blocks (Step 1 summary cards)
---------------------------------------------------------------- */
.kv-block {
  background: var(--bb-panel-2);
  border: 1px solid var(--bb-border);
  border-left: 3px solid var(--bb-amber);
  padding: 0.45rem 0.7rem;
}
.kv-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--bb-muted);
  letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
}
.kv-value { font-size: 1.1rem; font-weight: 700; color: var(--bb-amber-2); line-height: 1.2; font-variant-numeric: tabular-nums; }
.kv-sub   { font-size: 0.7rem; color: var(--bb-text-dim); margin-top: 0.15rem; }

/* ----------------------------------------------------------------
   Pillar cells
---------------------------------------------------------------- */
.pillar-cell {
  background: var(--bb-panel-2);
  border: 1px solid var(--bb-border);
  border-top: 2px solid var(--bb-muted);
  padding: 0.4rem 0.5rem;
  text-align: center;
}
.pillar-cell.pos { border-top-color: var(--bb-green); }
.pillar-cell.neg { border-top-color: var(--bb-red); }
.pillar-cell.neu { border-top-color: var(--bb-muted); }
.pillar-name { font-size: 0.62rem; text-transform: uppercase; color: var(--bb-text-dim); letter-spacing: 0.08em; }
.pillar-score { font-weight: 700; font-size: 0.95rem; margin-top: 0.15rem; }
.pillar-cell.pos .pillar-score { color: var(--bb-green); }
.pillar-cell.neg .pillar-score { color: var(--bb-red); }
.pillar-cell.neu .pillar-score { color: var(--bb-amber-2); }

/* ----------------------------------------------------------------
   Badges
---------------------------------------------------------------- */
.badge {
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.45rem;
}

/* Bias */
.bias-strong-long  { background: var(--bb-green); color: #000; }
.bias-long         { background: transparent; color: var(--bb-green); border: 1px solid var(--bb-green); }
.bias-neutral      { background: transparent; color: var(--bb-muted); border: 1px solid var(--bb-muted); }
.bias-short        { background: transparent; color: var(--bb-red);   border: 1px solid var(--bb-red); }
.bias-strong-short { background: var(--bb-red); color: #000; }

/* Generic */
.bg-success   { background: var(--bb-green) !important; color: #000 !important; }
.bg-danger    { background: var(--bb-red)   !important; color: #000 !important; }
.bg-warning   { background: var(--bb-yellow) !important; color: #000 !important; }
.bg-info      { background: var(--bb-blue)  !important; color: #000 !important; }
.bg-secondary { background: var(--bb-panel-2) !important; color: var(--bb-muted) !important; border: 1px solid var(--bb-border-2); }
.bg-light     { background: var(--bb-panel-2) !important; color: var(--bb-amber-2) !important; }

/* Traffic-light badges */
.light-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.light-green { background: var(--bb-green); color: #000; }
.light-amber { background: var(--bb-yellow); color: #000; }
.light-red   { background: var(--bb-red); color: #000; }

/* Trends */
.trend-up   { color: var(--bb-green); }
.trend-down { color: var(--bb-red); }

/* Setup buckets */
.bucket-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bb-panel-2);
  color: var(--bb-amber-2);
  border: 1px solid var(--bb-border-2);
}
.bucket-1 { background: var(--bb-green); color: #000; border-color: var(--bb-green); }
.bucket-2 { background: transparent; color: var(--bb-green); border-color: var(--bb-green); }
.bucket-3 { color: var(--bb-green); border-color: var(--bb-green-dim); }
.bucket-4, .bucket-5, .bucket-6, .bucket-7 { color: var(--bb-muted); }
.bucket-8 { background: var(--bb-yellow); color: #000; border-color: var(--bb-yellow); }
.bucket-9 { color: var(--bb-yellow); border-color: var(--bb-yellow); }
.bucket-10, .bucket-avoid { background: var(--bb-red); color: #000; border-color: var(--bb-red); }
.bucket-short { background: var(--bb-red); color: #000; border-color: var(--bb-red); }

/* ----------------------------------------------------------------
   Run output — terminal panel
---------------------------------------------------------------- */
.run-output {
  display: none;
  font-family: inherit;
  font-size: 0.74rem;
  background: var(--bb-bg-2);
  color: var(--bb-text);
  padding: 0.6rem 0.85rem;
  white-space: pre-wrap;
  max-height: 28rem;
  overflow-y: auto;
  border-top: 1px solid var(--bb-border-2);
  line-height: 1.45;
}
.run-output.show { display: block; }
.run-output .run-status { color: var(--bb-blue); }
.run-output .run-log    { color: var(--bb-text-dim); }
.run-output .run-stderr { color: var(--bb-red); }
.run-output .run-fail   { color: var(--bb-red); font-weight: 700; }
.run-output .run-ok     { color: var(--bb-green); font-weight: 700; }

/* Spinner */
.run-btn.running { pointer-events: none; opacity: 0.85; }
.run-btn.running::after {
  content: "";
  display: inline-block;
  margin-left: 0.4rem;
  width: 0.85em; height: 0.85em;
  border: 2px solid #000;
  border-top-color: transparent;
  border-radius: 50% !important;
  animation: spin 0.7s linear infinite;
  vertical-align: -0.15em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------
   Drill-down sidebar
---------------------------------------------------------------- */
.sticky-sidebar {
  position: sticky;
  top: 0.5rem;
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
}
.dd-section { padding: 0.45rem 0 0.4rem; border-top: 1px solid var(--bb-border-2); }
.dd-section:first-of-type { border-top: none; padding-top: 0; }
/* Section label — a tight small-caps amber bar (Bloomberg sub-header). */
.dd-section h6 {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--bb-amber);
  margin: 0 0 0.35rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* step-number chip on the right of a drilldown section header */
.dd-section h6 .dd-step {
  background: var(--bb-bg-2);
  color: var(--bb-muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 0.3rem;
  border: 1px solid var(--bb-border);
}

/* Drilldown header — compact security header (ticker · profile · price). */
.dd-head { margin-bottom: 0.5rem; }
.dd-head .tkr { font-size: 1.35rem; font-weight: 700; color: var(--bb-amber); line-height: 1; letter-spacing: 0.02em; }
.dd-head .co { color: var(--bb-text-dim); margin-top: 0.2rem; }
.dd-head-meta { display: flex; align-items: baseline; gap: 0.55rem; margin-top: 0.3rem; font-size: 0.72rem; color: var(--bb-muted); }
.dd-head-meta .px { color: var(--bb-amber-2); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* Scannable metric chips — for dense numeric grids (ratios, scores). */
.dd-stats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.15rem 0 0.2rem; }
.dd-stat {
  display: flex; flex-direction: column; line-height: 1.15;
  background: var(--bb-bg-2); border: 1px solid var(--bb-border);
  padding: 0.18rem 0.45rem; min-width: 3.2rem;
}
.dd-stat .k { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--bb-muted); white-space: nowrap; }
.dd-stat .v { font-size: 0.82rem; font-weight: 600; color: var(--bb-text); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.dd-stat .v.pos { color: var(--bb-green); }
.dd-stat .v.neg { color: var(--bb-red); }
.dd-stat .v.hot { color: var(--bb-amber-2); }
/* balance-sheet heat: good (green) / middling (dim) / bad (red) */
.dd-stat .v.bs-good { color: var(--bb-green); }
.dd-stat .v.bs-mid  { color: var(--bb-text-dim); }
.dd-stat .v.bs-bad  { color: var(--bb-red); }

/* Aligned label : value grid — the workhorse that replaces run-on prose.
   One shared grid per section so every value column lines up (Bloomberg DES). */
.dd-fields { display: grid; grid-template-columns: max-content 1fr; margin: 0.1rem 0 0.15rem; }
.dd-fields > .k, .dd-fields > .v {
  padding: 0.14rem 0; line-height: 1.3;
  border-bottom: 1px dotted var(--bb-border);
}
.dd-fields > .k {
  color: var(--bb-muted); text-transform: uppercase;
  font-size: 0.57rem; letter-spacing: 0.05em; white-space: nowrap;
  padding-right: 0.8rem; align-self: baseline;
}
.dd-fields > .v {
  color: var(--bb-text); text-align: right;
  font-size: 0.74rem; font-variant-numeric: tabular-nums;
}
.dd-fields > .v.pos { color: var(--bb-green); }
.dd-fields > .v.neg { color: var(--bb-red); }
.dd-fields > .v.hot { color: var(--bb-amber-2); font-weight: 600; }
.dd-fields > .v .text-muted { font-size: 0.64rem; }
/* drop the final row's hairline so the grid closes cleanly */
.dd-fields > .k:nth-last-child(2), .dd-fields > .v:last-child { border-bottom: 0; }

/* Inline badge row (timing lights, signal flags). */
.dd-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }

/* Mini sub-heading inside a drilldown section (e.g. "Key reasons"). */
.dd-sub-label {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--bb-muted); margin-top: 0.45rem; margin-bottom: 0.1rem;
}
.dd-sub-label.red { color: var(--bb-red); }

/* Muted footnote / rationale prose. */
.dd-note { color: var(--bb-text-dim); font-size: 0.66rem; line-height: 1.42; margin-top: 0.35rem; }
.dd-note.muted { color: var(--bb-muted); }
.dd-note .badge { vertical-align: 1px; }

/* Tight list (KPIs, catalysts, narrative). */
.dd-list { margin: 0; padding-left: 1rem; font-size: 0.7rem; line-height: 1.45; }
.dd-list.none { list-style: none; padding-left: 0; }
.dd-list li { margin-bottom: 0.1rem; }

/* Tighter, quieter tables inside the drilldown */
#drilldown-body table { margin-bottom: 0.3rem; }
#drilldown-body table thead th {
  color: var(--bb-muted); font-weight: 600; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.03em; border-bottom-color: var(--bb-border);
}
#drilldown-body .dd-section .small + .dd-stats { margin-top: 0.35rem; }

/* ----------------------------------------------------------------
   Ticker links — visually distinct so scanning is fast
---------------------------------------------------------------- */
.ticker-link {
  text-decoration: none;
  color: var(--bb-amber);
  font-weight: 700;
  border-bottom: 1px dotted transparent;
}
.ticker-link:hover {
  color: var(--bb-amber-2);
  border-bottom-color: var(--bb-amber-2);
}

/* ----------------------------------------------------------------
   Alerts
---------------------------------------------------------------- */
.alert {
  background: var(--bb-panel);
  border: 1px solid var(--bb-amber);
  border-left: 4px solid var(--bb-amber);
  color: var(--bb-amber-2);
  padding: 0.6rem 0.85rem;
}
.alert-warning {
  border-color: var(--bb-yellow);
  border-left-color: var(--bb-yellow);
  color: var(--bb-yellow);
}
.alert-danger {
  border-color: var(--bb-red);
  border-left-color: var(--bb-red);
  color: var(--bb-red);
}
.alert-success {
  border-color: var(--bb-green);
  border-left-color: var(--bb-green);
  color: var(--bb-green);
}
.alert a { color: inherit; font-weight: 600; }

/* Intraday alert list (positions page). Bootstrap's list-group defaults to a
   white surface; force the dark canvas so the alert rows read black. */
.list-group { background: transparent; border-radius: 0; }
.list-group-item {
  background: var(--bb-bg);
  color: var(--bb-text);
  border-color: var(--bb-border);
}

/* ----------------------------------------------------------------
   Scrollbar
---------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--bb-bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; }
::-webkit-scrollbar-thumb:hover { background: var(--bb-amber); }

/* ----------------------------------------------------------------
   Details / summary
---------------------------------------------------------------- */
details > summary {
  cursor: pointer;
  color: var(--bb-amber);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  user-select: none;
  margin: 0.4rem 0;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--bb-border);
}
details > summary:hover { color: var(--bb-amber-2); }
details[open] > summary { color: var(--bb-amber-2); }

/* ----------------------------------------------------------------
   Severity row tinting
---------------------------------------------------------------- */
.table-danger,
.table-danger > th,
.table-danger > td {
  background: rgba(255, 77, 77, 0.08) !important;
  color: var(--bb-red) !important;
  border-left: 2px solid var(--bb-red);
}

/* Subject / highlight row (peer-comp subject, etc.). Bootstrap's .table-info
   sets color:#000, which the dark theme's `color: inherit` cells pulled down →
   black-on-near-black. Theme it like .table-danger so the row stays readable. */
.table-info,
.table-info > th,
.table-info > td {
  background: rgba(93, 184, 255, 0.12) !important;
  color: var(--bb-text) !important;
  border-left: 2px solid var(--bb-blue);
}

/* ----------------------------------------------------------------
   Container spacing
---------------------------------------------------------------- */
.container-fluid { max-width: 1800px; }
.row.g-3 > * { margin-bottom: 0.5rem; }

/* Section headers inside cards */
h6.text-muted {
  color: var(--bb-amber-dim) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  border-bottom: 1px solid var(--bb-border-2);
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------
   Outline buttons — terminal palette (Bootstrap defaults are light)
---------------------------------------------------------------- */
.btn-outline-primary,
.btn-outline-info,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-secondary {
  background: transparent;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 0.72rem;
}
.btn-outline-primary   { color: var(--bb-amber);    border-color: var(--bb-amber-dim); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.active {
  background: var(--bb-amber); border-color: var(--bb-amber); color: #000; }
.btn-outline-info      { color: var(--bb-blue);     border-color: #2a6f96; }
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info.active {
  background: var(--bb-blue); border-color: var(--bb-blue); color: #000; }
.btn-outline-success   { color: var(--bb-green);    border-color: var(--bb-green-dim); }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success.active {
  background: var(--bb-green); border-color: var(--bb-green); color: #000; }
.btn-outline-warning   { color: var(--bb-yellow);   border-color: #8a7415; }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning.active {
  background: var(--bb-yellow); border-color: var(--bb-yellow); color: #000; }
.btn-outline-danger    { color: var(--bb-red);      border-color: var(--bb-red-dim); }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger.active {
  background: var(--bb-red); border-color: var(--bb-red); color: #000; }
.btn-outline-secondary { color: var(--bb-text-dim); border-color: var(--bb-border-2); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary.active {
  background: var(--bb-panel-2); border-color: var(--bb-muted); color: var(--bb-amber-2); }

/* Extra-small buttons (watchlist row actions) */
.btn-xs { padding: 0.05rem 0.4rem; font-size: 0.64rem; line-height: 1.4; }

/* ----------------------------------------------------------------
   Progress (exposure gross-exposure bar)
---------------------------------------------------------------- */
.progress { background: var(--bb-bg-2); border: 1px solid var(--bb-border); }
.progress-bar { background: var(--bb-amber); color: #000; }

/* Login card title */
.card-title {
  color: var(--bb-amber);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ----------------------------------------------------------------
   Macro bias — long/short theme chips (Step 1 summary)
---------------------------------------------------------------- */
.bias-row { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.45rem; }
.bias-side {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; min-width: 3rem; flex-shrink: 0;
}
.bias-side.long  { color: var(--bb-green); }
.bias-side.short { color: var(--bb-red); }
.bias-themes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* Filled chips — black text on the signal colour reads far better than outlines */
.bias-themes .badge {
  font-size: 0.75rem; padding: 0.26rem 0.6rem; letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.bias-themes .bias-long  { background: var(--bb-green); color: #000; }
.bias-themes .bias-short { background: var(--bb-red);   color: #000; }

/* ----------------------------------------------------------------
   Sector tilt tiles (dashboard)
---------------------------------------------------------------- */
.tilt-tile {
  background: var(--bb-panel-2);
  border: 1px solid var(--bb-border);
  border-left: 4px solid var(--bb-muted-2);
  padding: 0.5rem 0.6rem 0.58rem;
  height: 100%;
}
.tilt-tile.tilt-long  { border-left-color: var(--bb-green); }
.tilt-tile.tilt-short { border-left-color: var(--bb-red); }
.tilt-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
/* Filled direction chip on long/short; quiet outline on neutral. */
.tilt-head .badge { font-size: 0.74rem; padding: 0.26rem 0.6rem; border: 1px solid transparent; }
.tilt-tile.tilt-long    .tilt-head .badge { background: var(--bb-green); color: #000; }
.tilt-tile.tilt-short   .tilt-head .badge { background: var(--bb-red);   color: #000; }
.tilt-tile.tilt-neutral .tilt-head .badge { background: transparent; color: var(--bb-text-dim); border-color: var(--bb-muted); }
.tilt-score {
  font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--bb-text);
}
.tilt-tile.tilt-long  .tilt-score { color: var(--bb-green); }
.tilt-tile.tilt-short .tilt-score { color: var(--bb-red); }
.tilt-name {
  font-size: 0.9rem; color: var(--bb-text); margin-top: 0.35rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tilt-bar { margin-top: 0.45rem; height: 5px; background: var(--bb-bg-2); overflow: hidden; }
.tilt-bar > span { display: block; height: 100%; background: var(--bb-muted); }
.tilt-tile.tilt-long  .tilt-bar > span { background: var(--bb-green); }
.tilt-tile.tilt-short .tilt-bar > span { background: var(--bb-red); }

/* ----------------------------------------------------------------
   Top-indicators-per-pillar panels (Step 1, now always shown)
---------------------------------------------------------------- */
.ind-panel {
  background: var(--bb-bg-2);
  border: 1px solid var(--bb-border);
  border-left: 2px solid var(--bb-amber-dim);
  padding: 0.4rem 0.55rem 0.45rem;
  height: 100%;
}
.ind-pillar {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bb-amber); font-weight: 700;
  border-bottom: 1px solid var(--bb-border);
  padding-bottom: 0.22rem; margin-bottom: 0.28rem;
}
.ind-row { padding: 0.26rem 0; line-height: 1.3; border-bottom: 1px dotted var(--bb-border); }
.ind-row:last-child { border-bottom: 0; }
/* line 1 — the headline reading */
.ind-line1 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.ind-label { color: var(--bb-text); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-val { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--bb-text); white-space: nowrap; }
.ind-unit { color: var(--bb-muted); font-size: 0.64rem; }
/* line 2 — change · percentile · signal · model score */
.ind-line2 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem;
  margin-top: 0.1rem; font-size: 0.67rem; color: var(--bb-text-dim);
  font-variant-numeric: tabular-nums;
}
.ind-line2 .ind-pct, .ind-line2 .ind-sig { color: var(--bb-muted); }
.ind-dot { color: var(--bb-muted-2); }
.ind-scorelbl { color: var(--bb-muted); }
.ind-scoreval { font-weight: 600; color: var(--bb-text); }
.ind-scoreval.pos { color: var(--bb-green); }
.ind-scoreval.neg { color: var(--bb-red); }
/* tracked-only rows: in a pillar but not in the earnings-fit composite */
.ind-pillar-count { float: right; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--bb-muted); }
.ind-row-tracked .ind-label, .ind-row-tracked .ind-val { color: var(--bb-text-dim); }
.ind-tracked-tag { color: var(--bb-muted-2); font-style: italic; }
/* Percentile heat (where the indicator sits in its trailing-10y range):
   cold/low = blue → hot/high = red. Direction-neutral — just the level. */
.ind-line2 .ind-pct { font-weight: 600; }
.ind-line2 .ind-pct.pct-vhi { color: var(--bb-red); }
.ind-line2 .ind-pct.pct-hi  { color: var(--bb-amber); }
.ind-line2 .ind-pct.pct-mid { color: var(--bb-muted); font-weight: 400; }
.ind-line2 .ind-pct.pct-mlo { color: #6fb3d8; }
.ind-line2 .ind-pct.pct-lo  { color: var(--bb-blue); }

/* ----------------------------------------------------------------
   Readability — lift the smallest labels so nothing is sub-legible
   (these sit BELOW their defining rules so they win by source order)
---------------------------------------------------------------- */
.card-header { font-size: 0.82rem; }
.table thead th { font-size: 0.74rem; }
.kv-label, .pillar-name, .dd-section h6 { font-size: 0.72rem; }
.dd-stat .k, .dd-fields > .k, .dd-field > .k { font-size: 0.68rem; }
.dd-stat .v { font-size: 0.94rem; }
.dd-fields > .v, .dd-field > .v { font-size: 0.84rem; }
.dd-note { font-size: 0.74rem; }
.dd-list { font-size: 0.78rem; }

/* ----------------------------------------------------------------
   Micro-analysis — full-width, multi-column section flow
   When the panel is wide (dashboard), the ~15 sections spread into
   responsive columns so bigger fonts don't crowd a single stack. In a
   narrow sidebar (pipeline page) it collapses to a single stack.
   Fallback (no JS): CSS multi-column. balanceDrilldown() in app.js upgrades this
   to balanced, equal-width FLEX columns (.dd-balanced) after load — CSS columns
   alone leave a thin panel half-empty (Chrome's balancer minimises the columns
   it uses); flex columns always fill the width.
---------------------------------------------------------------- */
#drilldown-body { column-width: 21rem; column-gap: 1.5rem; }
#drilldown-body.dd-balanced { column-width: auto; column-count: auto; }
#drilldown-body > .dd-head { column-span: all; margin-bottom: 0.5rem; }
#drilldown-body > .dd-section { break-inside: avoid; }
#drilldown-body > .dd-section:first-of-type { border-top: none; padding-top: 0; }
/* JS-built balanced columns: equal-width, always span the full panel. */
.dd-cols { display: flex; gap: 1.5rem; align-items: flex-start; }
.dd-cols > .dd-col { flex: 1 1 0; min-width: 0; }
.dd-cols > .dd-col > .dd-section:first-child { border-top: none; padding-top: 0; }