/* css/chart.css */

/* -------------------------------------------- */

/* Chart COLORS werden hier spezifiziert   ---- */

/* -------------------------------------------- */
:root {
    --color_green: #16ff6a;
    --color_red: #ff4455;
    --color_blue: #1e90ff;
    --color_darkgreen: #16ff6b91;
    --color_darkred: #ff4454ad;
    --color_darkred_solid: #b33038;
    --color_yellow: #ffd166;
    --color_white: #ffffff;
    --color_benchmark: #bbbbbb;
    --color_impulse_bullish: #16ff6a;
    --color_impulse_bearish: #ff4455;
    --color_accumulation: #97ffc4;
    --color_distribution: #ff8c00;
    --color_bull_trend: #00a651;
    --color_bear_trend: #cc2936;
    --color_green_dim: rgba(22, 255, 106, 0.5);
    --color_red_dim: rgba(255, 68, 85, 0.5);
    --color_cyan: #00d3f8;
    --color_gray: #7a7a7a;
    /* NOTE: the COT participant colours deliberately do NOT live here. The
       series builder honours `colorCssVar` on only a couple of code paths, and
       the COT pane lines are not among them — an unresolved var falls through
       to `|| "#ffffff"`, which turned every participant line white. They are
       literals in chart_config_cot_merged.js, with the theme-dependent one
       (Non-Rep) taken from MIV_THEME.whiteReplace(). */
    /* LEI Phase Colors */
    --color_lei_expansion: #16ff6a;
    --color_lei_slowdown: #ff8c00;
    --color_lei_contraction: #ff4455;
    --color_lei_recovery: #66ffb2;
    --color_rotation_technology: #1858ff;                                      /* Blau */
    --color_rotation_communication: #00d3f8;                                      /* Hellblau / Cyan */
    --color_rotation_discretionary: #02e79b;                                      /* Helles GrünBlau */
    --color_rotation_financials: #ff4455;                                      /* Rot */
    --color_rotation_financials_funds: #ff6677;                                /* Hellrot (Asset Mgmt + ETF + CEF + Mutual Funds) */
    --color_rotation_industrials: #8a3b00;                                      /* Braun */
    --color_rotation_real_estate: #7a7a7a;                                      /* Grau */
    --color_rotation_materials: #ffd500;                                      /* Gelb */
    --color_rotation_energy: #ffffff;                                      /* Dunkelgrau */
    --color_rotation_healthcare: #f7abce;                                      /* Rosa/Pink */
    --color_rotation_staples: #1f8b2d;                                      /* Dunkelgrün */
    --color_rotation_utilities: #9900cc;                                      /* Violett */
    --color_rotation_growth: var(--color_rotation_technology);
    --color_rotation_value: var(--color_rotation_financials);
    --color_rotation_defensives: var(--color_rotation_healthcare);
    --color_rotation_cyclicals: var(--color_rotation_materials);

    /* Commodity Rotation Colors */
    --color_rotation_industrial_metals: #e07020;                               /* Orange */
    --color_rotation_comm_energy: #20a0e0;                                     /* Light Blue */
    --color_rotation_agriculture: #60c040;                                     /* Green */
    --color_rotation_precious: #ffd700;                                        /* Gold */
}

/* Zone table colors */
.zone-accumulation {
    color: var(--color_accumulation) !important;
}

/* ============================================================
   THEME ETF TICKER COLORS (single source of truth)
   ============================================================ */
:root {
    /* Technology */
    --color_tk_XLK: #1858ff; 
    --color_tk_SMH: #1a5cff; 
    --color_tk_XSD: #1d65ff70; 
    --color_tk_ARKK: #ff971f; 
    --color_tk_ARKQ: #26dbff; 
    --color_tk_BOTZ: #2bd9b3; 
    --color_tk_AIQ: #33bfff; 
    --color_tk_PSCT: #ff8f4e; 
    --color_tk_BATT: #49c2e7; 
    --color_tk_TMFC: #ecff6f; 
    --color_tk_CLOU: #55a7ff; 
    --color_tk_CIBR: #ed5c96;
    --color_tk_CQQQ: #fe2104;
    --color_tk_IYW: #2e77ff;
    --color_tk_WCLD: #6f9bff;                                      /* <— falls du WCLD willst, setz hier deinen Wunschwert */
    --color_tk_IGV:  #9b59b6;
    --color_tk_SOXX: #2ecc71;
    --color_tk_EWT:  #1abc9c;
    --color_tk_EWY:  #3498db;
    --color_tk_INDA: #e67e22;
    --color_tk_FXI:  #e74c3c;
    --color_tk_BUG:  #16a085;
    --color_tk_ARKX: #8e44ad;

    /* Communication */
    --color_tk_XLC: #00d3f8; 
    --color_tk_XTL: #1bbfe8; 
    --color_tk_SOCL: #12b5dc; 
    --color_tk_PSCU: #49d7f3; 
    --color_tk_RCI:  #0fa7cc;
    --color_tk_KWEB: #c0392b;
    --color_tk_IYZ:  #2980b9;                                     /* Discretionary */
    --color_tk_XLY: #02e79b; 
    --color_tk_PEJ: #2bd46b; 
    --color_tk_AWAY: #33c96a; 
    --color_tk_EXV5: #3edb7c; 
    --color_tk_DRIV: #3acb5e; 
    --color_tk_EBIZ: #25b86a; 
    --color_tk_XHB: #2fbf6e; 
    --color_tk_ITB:  #2aa85b;
    --color_tk_XRT:  #f39c12;                                     /* Financials */
    --color_tk_XLF: #ff4455; 
    --color_tk_KBE: #d94a52; 
    --color_tk_KRE: #b93a3f; 
    --color_tk_KCE: #7a2a2d; 
    --color_tk_KIE: #9a3136; 
    --color_tk_IYG: #e05b63; 
    --color_tk_REM:  #6f2a2e;
    --color_tk_EWH:  #d4a017;
    --color_tk_EUFN: #7f8c8d;                                     /* Real Estate */
    --color_tk_XLRE: #7a7a7a; 
    --color_tk_VNQ: #6d6d6d; 
    --color_tk_VNQI: #888888; 
    --color_tk_IYR: #707070; 
    --color_tk_REZ: #9a9a9a; 
    --color_tk_HAUZ: #5f5f5f;                                      /* Industrials */
    --color_tk_XLI: #8a3b00; 
    --color_tk_XTN: #ff9a00; 
    --color_tk_XAR: #d27b00; 
    --color_tk_JETS: #b65c00; 
    --color_tk_IYT:  #c88b5a;
    --color_tk_EWJ:  #c23616;
    --color_tk_EWG:  #fbc531;                                     /* Materials */
    --color_tk_XLB: #ffd500; 
    --color_tk_XME: #f0c400; 
    --color_tk_REMX: #c79a00; 
    --color_tk_GDX: #b88600; 
    --color_tk_GDXJ: #9d7a00; 
    --color_tk_LIT: #e6c200; 
    --color_tk_WOOD: #d0a800;
    --color_tk_COPX: #e67e22;
    --color_tk_EWZ:  #27ae60;
    --color_tk_EWA:  #d35400;
    --color_tk_SIL:  #bdc3c7;
    --color_tk_ECH:  #2c3e50;                                     /* Energy */
    --color_tk_XLE: #ffffff; 
    --color_tk_TAN: #2d6cff; 
    --color_tk_URA: #5bc56a; 
    --color_tk_XES: #a5a5ac; 
    --color_tk_OIH: #c85a18; 
    --color_tk_AMLP: #7a1010; 
    --color_tk_ICLN: #6aa6ff; 
    --color_tk_FTXN: #c67d22; 
    --color_tk_USO: #5a5a5a; 
    --color_tk_XOP:  #a10000;
    --color_tk_URNM: #2ecc71;
    --color_tk_FCG:  #f1c40f;
    --color_tk_NLR:  #1abc9c;                                     /* Healthcare */
    --color_tk_XLV: #f7abce; 
    --color_tk_IBB: #f3a3c6; 
    --color_tk_XBI: #d86ba4; 
    --color_tk_IHI: #f0a0b6; 
    --color_tk_XHE: #c75f9a; 
    --color_tk_XHS: #bf4f91; 
    --color_tk_BBP: #b14f8a; 
    --color_tk_PPH: #8e2fb0; 
    --color_tk_IHE:  #a84fbb;
    --color_tk_ARKG: #795548;
    --color_tk_MSOS: #1b5e20;                                     /* Utilities */
    --color_tk_XLU: #9900cc; 
    --color_tk_PAVE: #a978d9; 
    --color_tk_GRID: #7b56c9; 
    --color_tk_IDU: #b99ae7; 
    --color_tk_PHO: #4aa7ff; 
    --color_tk_PIO: #3f8cff; 
    --color_tk_AQWA: #5bb6ff;                                      /* Staples */
    --color_tk_XLP: #1f8b2d; 
    --color_tk_IYK: #2f9b3d; 
    --color_tk_PBJ: #3fa94d; 
    --color_tk_PSCC: #2a7f33;
}

/* ============================
   Theme ETF Table
   ============================ */
.spn-theme-select {
    background: rgba(255,255,255,0.06) !important; 
    border-color: rgba(255,255,255,0.12) !important; 
    color: var(--color_white) !important;
}

.spn-theme-table {
    width: auto !important; 
    max-width: 100%;
}

.spn-theme-table th,

.spn-theme-table td {
    border-color: rgba(255,255,255,0.08) !important; 
    white-space: nowrap;
}

.spn-theme-table th:nth-child(2),

.spn-theme-table td:nth-child(2) {
    white-space: normal;                                      /* Theme darf umbrechen */
}

.spn-theme-table td.spn-ticker-cell {
    font-weight: 800;
}

.spn-theme-table td.spn-strength {
    font-variant-numeric: tabular-nums;
}

/* Regime colors (reuse same classes as sector overview) */
.spn-theme-table .spn-signal-bottom {
    color: var(--color_accumulation) !important; 
    font-weight: 800;
}

.spn-theme-table .spn-signal-bull {
    color: var(--color_impulse_bullish) !important; 
    font-weight: 800;
}

.spn-theme-table .spn-signal-top {
    color: var(--color_distribution) !important; 
    font-weight: 800;
}

.spn-theme-table .spn-signal-bear {
    color: var(--color_impulse_bearish) !important; 
    font-weight: 800;
}

.spn-theme-table .spn-signal-na {
    color: rgba(255,255,255,0.55) !important; 
    font-weight: 600;
}

/* Ticker color backgrounds — auto-generated from --color_tk_* variables */
/* Default text: white. Light-colored tickers use dark text via override below. */

/* Technology */
.spn-tk-XLK  { background: var(--color_tk_XLK)  !important; color: #fff !important; }
.spn-tk-SMH  { background: var(--color_tk_SMH)  !important; color: #fff !important; }
.spn-tk-XSD  { background: var(--color_tk_XSD)  !important; color: #fff !important; }
.spn-tk-ARKK { background: var(--color_tk_ARKK) !important; color: #fff !important; }
.spn-tk-ARKQ { background: var(--color_tk_ARKQ) !important; color: #111 !important; }
.spn-tk-BOTZ { background: var(--color_tk_BOTZ) !important; color: #111 !important; }
.spn-tk-AIQ  { background: var(--color_tk_AIQ)  !important; color: #111 !important; }
.spn-tk-PSCT { background: var(--color_tk_PSCT) !important; color: #111 !important; }
.spn-tk-BATT { background: var(--color_tk_BATT) !important; color: #111 !important; }
.spn-tk-TMFC { background: var(--color_tk_TMFC) !important; color: #111 !important; }
.spn-tk-CLOU { background: var(--color_tk_CLOU) !important; color: #fff !important; }
.spn-tk-CIBR { background: var(--color_tk_CIBR) !important; color: #fff !important; }
.spn-tk-CQQQ { background: var(--color_tk_CQQQ) !important; color: #fff !important; }
.spn-tk-IYW  { background: var(--color_tk_IYW)  !important; color: #fff !important; }
.spn-tk-WCLD { background: var(--color_tk_WCLD) !important; color: #fff !important; }
.spn-tk-IGV  { background: var(--color_tk_IGV)  !important; color: #fff !important; }
.spn-tk-SOXX { background: var(--color_tk_SOXX) !important; color: #111 !important; }
.spn-tk-EWT  { background: var(--color_tk_EWT)  !important; color: #111 !important; }
.spn-tk-EWY  { background: var(--color_tk_EWY)  !important; color: #fff !important; }
.spn-tk-INDA { background: var(--color_tk_INDA) !important; color: #fff !important; }
.spn-tk-FXI  { background: var(--color_tk_FXI)  !important; color: #fff !important; }
.spn-tk-BUG  { background: var(--color_tk_BUG)  !important; color: #fff !important; }
.spn-tk-ARKX { background: var(--color_tk_ARKX) !important; color: #fff !important; }
/* Communication */
.spn-tk-XLC  { background: var(--color_tk_XLC)  !important; color: #111 !important; }
.spn-tk-XTL  { background: var(--color_tk_XTL)  !important; color: #111 !important; }
.spn-tk-SOCL { background: var(--color_tk_SOCL) !important; color: #fff !important; }
.spn-tk-PSCU { background: var(--color_tk_PSCU) !important; color: #111 !important; }
.spn-tk-RCI  { background: var(--color_tk_RCI)  !important; color: #fff !important; }
.spn-tk-KWEB { background: var(--color_tk_KWEB) !important; color: #fff !important; }
.spn-tk-IYZ  { background: var(--color_tk_IYZ)  !important; color: #fff !important; }
/* Discretionary */
.spn-tk-XLY  { background: var(--color_tk_XLY)  !important; color: #111 !important; }
.spn-tk-PEJ  { background: var(--color_tk_PEJ)  !important; color: #111 !important; }
.spn-tk-AWAY { background: var(--color_tk_AWAY) !important; color: #111 !important; }
.spn-tk-EXV5 { background: var(--color_tk_EXV5) !important; color: #111 !important; }
.spn-tk-DRIV { background: var(--color_tk_DRIV) !important; color: #111 !important; }
.spn-tk-EBIZ { background: var(--color_tk_EBIZ) !important; color: #fff !important; }
.spn-tk-XHB  { background: var(--color_tk_XHB)  !important; color: #111 !important; }
.spn-tk-ITB  { background: var(--color_tk_ITB)  !important; color: #fff !important; }
.spn-tk-XRT  { background: var(--color_tk_XRT)  !important; color: #111 !important; }
/* Financials */
.spn-tk-XLF  { background: var(--color_tk_XLF)  !important; color: #fff !important; }
.spn-tk-KBE  { background: var(--color_tk_KBE)  !important; color: #fff !important; }
.spn-tk-KRE  { background: var(--color_tk_KRE)  !important; color: #fff !important; }
.spn-tk-KCE  { background: var(--color_tk_KCE)  !important; color: #fff !important; }
.spn-tk-KIE  { background: var(--color_tk_KIE)  !important; color: #fff !important; }
.spn-tk-IYG  { background: var(--color_tk_IYG)  !important; color: #fff !important; }
.spn-tk-REM  { background: var(--color_tk_REM)  !important; color: #fff !important; }
.spn-tk-EWH  { background: var(--color_tk_EWH)  !important; color: #111 !important; }
.spn-tk-EUFN { background: var(--color_tk_EUFN) !important; color: #fff !important; }
/* Real Estate */
.spn-tk-XLRE { background: var(--color_tk_XLRE) !important; color: #fff !important; }
.spn-tk-VNQ  { background: var(--color_tk_VNQ)  !important; color: #fff !important; }
.spn-tk-VNQI { background: var(--color_tk_VNQI) !important; color: #fff !important; }
.spn-tk-IYR  { background: var(--color_tk_IYR)  !important; color: #fff !important; }
.spn-tk-REZ  { background: var(--color_tk_REZ)  !important; color: #fff !important; }
.spn-tk-HAUZ { background: var(--color_tk_HAUZ) !important; color: #fff !important; }
/* Industrials */
.spn-tk-XLI  { background: var(--color_tk_XLI)  !important; color: #fff !important; }
.spn-tk-XTN  { background: var(--color_tk_XTN)  !important; color: #111 !important; }
.spn-tk-XAR  { background: var(--color_tk_XAR)  !important; color: #fff !important; }
.spn-tk-JETS { background: var(--color_tk_JETS) !important; color: #fff !important; }
.spn-tk-IYT  { background: var(--color_tk_IYT)  !important; color: #111 !important; }
.spn-tk-EWJ  { background: var(--color_tk_EWJ)  !important; color: #fff !important; }
.spn-tk-EWG  { background: var(--color_tk_EWG)  !important; color: #111 !important; }
/* Materials */
.spn-tk-XLB  { background: var(--color_tk_XLB)  !important; color: #111 !important; }
.spn-tk-XME  { background: var(--color_tk_XME)  !important; color: #111 !important; }
.spn-tk-REMX { background: var(--color_tk_REMX) !important; color: #fff !important; }
.spn-tk-GDX  { background: var(--color_tk_GDX)  !important; color: #111 !important; }
.spn-tk-GDXJ { background: var(--color_tk_GDXJ) !important; color: #fff !important; }
.spn-tk-LIT  { background: var(--color_tk_LIT)  !important; color: #111 !important; }
.spn-tk-WOOD { background: var(--color_tk_WOOD) !important; color: #111 !important; }
.spn-tk-COPX { background: var(--color_tk_COPX) !important; color: #fff !important; }
.spn-tk-EWZ  { background: var(--color_tk_EWZ)  !important; color: #fff !important; }
.spn-tk-EWA  { background: var(--color_tk_EWA)  !important; color: #fff !important; }
.spn-tk-SIL  { background: var(--color_tk_SIL)  !important; color: #111 !important; }
.spn-tk-ECH  { background: var(--color_tk_ECH)  !important; color: #fff !important; }
/* Energy */
.spn-tk-XLE  { background: var(--color_tk_XLE)  !important; color: #111 !important; }
.spn-tk-TAN  { background: var(--color_tk_TAN)  !important; color: #fff !important; }
.spn-tk-URA  { background: var(--color_tk_URA)  !important; color: #111 !important; }
.spn-tk-XES  { background: var(--color_tk_XES)  !important; color: #111 !important; }
.spn-tk-OIH  { background: var(--color_tk_OIH)  !important; color: #fff !important; }
.spn-tk-AMLP { background: var(--color_tk_AMLP) !important; color: #fff !important; }
.spn-tk-ICLN { background: var(--color_tk_ICLN) !important; color: #fff !important; }
.spn-tk-FTXN { background: var(--color_tk_FTXN) !important; color: #fff !important; }
.spn-tk-USO  { background: var(--color_tk_USO)  !important; color: #fff !important; }
.spn-tk-XOP  { background: var(--color_tk_XOP)  !important; color: #fff !important; }
.spn-tk-URNM { background: var(--color_tk_URNM) !important; color: #111 !important; }
.spn-tk-FCG  { background: var(--color_tk_FCG)  !important; color: #111 !important; }
.spn-tk-NLR  { background: var(--color_tk_NLR)  !important; color: #111 !important; }
/* Healthcare */
.spn-tk-XLV  { background: var(--color_tk_XLV)  !important; color: #111 !important; }
.spn-tk-IBB  { background: var(--color_tk_IBB)  !important; color: #111 !important; }
.spn-tk-XBI  { background: var(--color_tk_XBI)  !important; color: #fff !important; }
.spn-tk-IHI  { background: var(--color_tk_IHI)  !important; color: #111 !important; }
.spn-tk-XHE  { background: var(--color_tk_XHE)  !important; color: #fff !important; }
.spn-tk-XHS  { background: var(--color_tk_XHS)  !important; color: #fff !important; }
.spn-tk-BBP  { background: var(--color_tk_BBP)  !important; color: #fff !important; }
.spn-tk-PPH  { background: var(--color_tk_PPH)  !important; color: #fff !important; }
.spn-tk-IHE  { background: var(--color_tk_IHE)  !important; color: #fff !important; }
.spn-tk-ARKG { background: var(--color_tk_ARKG) !important; color: #fff !important; }
.spn-tk-MSOS { background: var(--color_tk_MSOS) !important; color: #fff !important; }
/* Utilities */
.spn-tk-XLU  { background: var(--color_tk_XLU)  !important; color: #fff !important; }
.spn-tk-PAVE { background: var(--color_tk_PAVE) !important; color: #fff !important; }
.spn-tk-GRID { background: var(--color_tk_GRID) !important; color: #fff !important; }
.spn-tk-IDU  { background: var(--color_tk_IDU)  !important; color: #fff !important; }
.spn-tk-PHO  { background: var(--color_tk_PHO)  !important; color: #fff !important; }
.spn-tk-PIO  { background: var(--color_tk_PIO)  !important; color: #fff !important; }
.spn-tk-AQWA { background: var(--color_tk_AQWA) !important; color: #fff !important; }
/* Staples */
.spn-tk-XLP  { background: var(--color_tk_XLP)  !important; color: #fff !important; }
.spn-tk-IYK  { background: var(--color_tk_IYK)  !important; color: #fff !important; }
.spn-tk-PBJ  { background: var(--color_tk_PBJ)  !important; color: #111 !important; }
.spn-tk-PSCC { background: var(--color_tk_PSCC) !important; color: #fff !important; }

/* Light mode: force black text on ticker badges for readability */
html[data-bs-theme="light"] .spn-theme-table td.spn-ticker-cell {
    color: #000 !important;
}

/* ------------------------------------------------------------- */

/* SPN CHART: GRUNDLAYOUT */

/* ------------------------------------------------------------- */

/* Äußerer Chart-Block (umfasst Titel, Buttons, Wrapper, Follow-us) */
.spn-chart {
    width: 100%;
}

/* Wrapper: enthält Chart + Legende + Error-Box */
.spn-chart-wrapper {
    width: 100%; 
    max-width: 100%; 
    overflow-x: hidden; 
    position: relative;                                      /* für das Logo, das absolut positioniert ist */
}

/* Chart + Legende nebeneinander (Desktop) */
.spn-chart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;                                      /* Chart | Legend */
    column-gap: 0.25rem;
}

/* Canvas: eigentlicher Chartbereich mit Gradient-Hintergrund */
.spn-chart-canvas {
    width: 100%;
    height: 100%;
    /* COLLAPSE FLOOR ONLY (2026-08-19). This used to be 570px and it OVERRULED
       the height chart_builder computed -- on a 386x840 phone the box measured
       544px, which is the 65vh below, not either JS formula. The height is now
       decided in exactly one place, resolveChartHeight() in chart_builder.js;
       this value only keeps the box from collapsing before the chart mounts. */
    min-height: 300px;
    min-width: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    background: linear-gradient(
        to bottom,
        #00081A 0%,
        #00081A 40%,
        #0333aee1 100%
    );
}

/* Fehlerausgabe unterhalb des Charts */
.spn-chart-error {
    margin-top: 0.5rem; 
    font-size: 0.85rem; 
    color: #ff6b6b;
}

/* ------------------------------------------------------------- */

/* LEGENDE & LEGEND-TOGGLE */

/* ------------------------------------------------------------- */

/* Sidebar-Legende */
.spn-chart-legend {
    min-width: 160px;
    max-width: 220px;
    background-color: #000;
    color: #fff;
    border-radius: 0.5rem;
    overflow-y: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Zustand: Legend via Button ausgeblendet */
.spn-chart-wrapper.legend-hidden .spn-chart-layout {
    grid-template-columns: minmax(0, 1fr);                                      /* nur Chart */
}

.spn-chart-wrapper.legend-hidden .spn-chart-legend {
    display: none;
}

/* ------------------------------------------------------------- */

/* LOGO IM CHART */

/* ------------------------------------------------------------- */
.spn-chart-logo {
    position: absolute;
    top: 8px;
    left: 16px;
    width: 80px;
    height: auto;
    opacity: 0.8;
    z-index: 10;
    pointer-events: none;
}

/* Licensing note under futures charts. Injected by chart_builder.js
   (renderProprietaryNote) rather than written into each page, so every
   futures surface carries identical wording. */
.spn-proprietary-note,
.spn-roll-note {
    margin: 6px 16px 0;
    font-size: 0.78rem;
    line-height: 1.45;
    opacity: 0.62;
    font-style: italic;
}

.spn-roll-note {
    margin-top: 3px;
}

/* Same note inside the FRED viewer card (fred_viewer.js) — no chart-wrapper
   padding to clear there, so it aligns with the data-info block above it. */
.spn-proprietary-note.spn-fred-note {
    margin: 10px 0 0;
}

/* ------------------------------------------------------------------
   Collapsible explainers (2026-09-12)

   Long "what this shows" paragraphs stay in the DOM — they are the page's
   actual prose, and a reader who wants them is one click away — but they no
   longer cost a screen of scrolling each before the reader reaches the chart
   they describe. Two shapes share the styling:

     .spn-explain-toggle   a small link above a collapsed <p>
     .spn-explain-h        a heading that toggles its own card body

   The chevron flips via Bootstrap's own `.collapsed` class, so the arrow can
   never disagree with the panel: Bootstrap owns both.
   ------------------------------------------------------------------ */
.spn-explain-toggle {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--bs-primary, #0dcaf0);
    opacity: 0.85;
    cursor: pointer;
}
.spn-explain-toggle:hover {
    opacity: 1;
    text-decoration: underline;
}
.spn-explain-h {
    display: block;
}
.spn-explain-chev {
    /* inline-block is load-bearing: `transform` has no effect on a
       non-replaced INLINE element, and <i> is inline by default -- the
       rotation below silently did nothing without this. */
    display: inline-block;
    transition: transform 0.18s ease;
    margin-left: 0.25rem;
}
/* Bootstrap adds `.collapsed` to a toggle whose target is CLOSED, so the
   rotation is expressed on the OPEN state — the reverse of the obvious rule,
   and the reason a hand-rolled `.open` class drifts out of sync here. */
.spn-explain-toggle:not(.collapsed) .spn-explain-chev,
.spn-explain-h:not(.collapsed) .spn-explain-chev {
    transform: rotate(180deg);
}

/* Dark-pool chart info block (#dpChartInfo). Behind one toggle already;
   this is the other half of the same request — when it IS open on a phone it
   should not read like a page of legal text. Tighter type, tighter legend. */
@media (max-width: 767.98px) {
    #dpChartInfo { font-size: 10px; }
    #dpChartInfo .small { font-size: 10px !important; }
    #dpChartInfo > div { margin-top: 0.35rem !important; }
    /* Eight legend entries in a 4rem-gap flex row wrap to eight lines on a
       phone. Two columns at half the gap keeps it to four. */
    #dpChartInfo .d-flex.flex-wrap.gap-4 { gap: 0.4rem 0.9rem !important; }
    #dpChartInfo .d-flex.flex-wrap.gap-4 > span { flex: 0 0 calc(50% - 0.5rem); }
    #dpChartInfo .d-flex.flex-wrap.gap-4 > span span[style*="width:16px"],
    #dpChartInfo .d-flex.flex-wrap.gap-4 > span span[style*="width:18px"] {
        flex: 0 0 auto;
    }
}
.dp-info-toggle { display: inline-block; }

/* ------------------------------------------------------------------
   Most Active Today dashboard (most_active.html)
   ------------------------------------------------------------------ */
.ma-table-scroll {
    max-height: 62vh;
    overflow-y: auto;
    border-radius: 0.4rem;
}
.ma-table { font-size: 0.82rem; }
.ma-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-dark, #1a1a2e);
    white-space: nowrap;
}
html[data-bs-theme="light"] .ma-table thead th { background: #e9eef5; color: #212529; }
.ma-th-win {
    font-weight: 400;
    opacity: 0.65;
    font-size: 0.72rem;
    display: block;
}
.ma-th.ma-sort-asc::after  { content: " \2191"; }
.ma-th.ma-sort-desc::after { content: " \2193"; }
.ma-row { cursor: pointer; }
.ma-row.selected {
    outline: 2px solid var(--bs-primary, #0dcaf0);
    outline-offset: -2px;
}
/* Long text columns must not push the numeric ones off screen; the full value
   is in the title attribute. */
.ma-name {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.ma-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}
.ma-cboe {
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    background: #6f42c1;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    vertical-align: middle;
}
/* Live CBOE list (js/most_active_dashboard.js startLive). */
.ma-live {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(22, 255, 106, 0.16);
    color: #16ff6a;
    font-size: 0.7rem;
    font-weight: 700;
}
html[data-bs-theme="light"] .ma-live { color: #0a8a3a; background: rgba(10, 138, 58, 0.12); }
.ma-live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #16ff6a;
    vertical-align: middle;
    animation: ma-live-pulse 2s ease-in-out infinite;
}
@keyframes ma-live-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ma-live-dot { animation: none; } }

/* Filters (js/most_active_filters.js). The hint is green by request; the
   same two greens the rest of the page uses for "up", named explicitly. */
.ma-qf-hint { color: #16ff6a; font-size: 0.8rem; font-weight: 600; }
html[data-bs-theme="light"] .ma-qf-hint { color: #0a8a3a; }
@media (hover: hover) and (pointer: fine) { .ma-qf-hint-touch { display: none; } }
/* A long-press must reach our handler, not the platform's callout menu. */
.ma-table td, .ma-table th { -webkit-touch-callout: none; }
.maqf-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 4px 1px 8px;
    border-radius: 12px;
    border: 1px solid #ffd166;
    color: var(--bs-body-color);
    font-size: 0.75rem;
    white-space: nowrap;
}
.maqf-chip button {
    border: 0; background: transparent; color: inherit;
    font-size: 0.95rem; line-height: 1; padding: 0 4px; cursor: pointer;
}
.maqf-chip-adv { border-style: dashed; }
.maqf-menu {
    position: absolute; z-index: 1080;
    min-width: 200px; max-width: min(460px, calc(100vw - 16px));
    padding: 4px 0;
    border-radius: 6px;
    background: #1f2433;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
html[data-bs-theme="light"] .maqf-menu { background: #fff; border-color: rgba(0, 0, 0, 0.18); }
.maqf-head { padding: 4px 12px 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.maqf-menu button {
    display: block; width: 100%;
    padding: 6px 12px;
    border: 0; background: transparent; color: var(--bs-body-color);
    text-align: left; font-size: 0.85rem;
}
.maqf-menu button:hover, .maqf-menu button:focus { background: rgba(26, 153, 166, 0.25); outline: none; }
.maqf-sub { padding: 6px 12px 2px; font-size: 0.68rem; border-top: 1px solid rgba(128, 128, 128, 0.3); }
/* Band grids (2026-09-16). The old 5-column grid was sized for "0-10%"; the
   trader bands carry words ("Small $300M - 2B"), so the columns size to the
   content and the menu is allowed to be wider. */
.maqf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 3px; padding: 2px 8px 6px; }
/* Sector and Industry list every value present -- 109 industries on a normal
   session -- so that grid scrolls instead of running off the screen. */
.maqf-grid-wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 260px; overflow-y: auto; }
.maqf-menu .maqf-grid button { padding: 4px 6px; text-align: center; font-size: 0.72rem; border-radius: 3px; background: rgba(26, 153, 166, 0.12); }
/* A ticked band. Multi-select is only legible if "on" is visible at a glance,
   so it is a filled chip rather than a checkmark glyph. */
.maqf-menu button.maqf-on { background: #1a99a6; color: #fff; font-weight: 600; }
.maqf-menu button.maqf-on::before { content: "\2713\00a0"; }
html[data-bs-theme="light"] .maqf-menu button.maqf-on { background: #0f7f8a; color: #fff; }
.maqf-menu .maqf-clear { border-top: 1px solid rgba(128, 128, 128, 0.3); color: #ffd166; }
html[data-bs-theme="light"] .maqf-menu .maqf-clear { color: #a66b00; }
/* "All Filters" carries a yellow ring while any of its criteria is set. */
.ma-filter-btn.ma-filter-on { border-color: #ffd166 !important; box-shadow: 0 0 0 2px #ffd166; }
.ma-filter-count:empty { display: none; }
.ma-filter-count { display: inline-block; min-width: 1.2em; padding: 0 4px; border-radius: 8px; background: #ffd166; color: #000; font-size: 0.7rem; font-weight: 700; }
.maf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; }
.maf-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; }
.maf-tab-count { color: #ffd166; font-weight: 700; }
@media (max-width: 767.98px) {
    .ma-table { font-size: 0.75rem; }
    .ma-name { max-width: 110px; }
    .ma-table-scroll { max-height: 70vh; }
}

/* ------------------------------------------------------------------
   Ticker News & Filings panel (js/ticker_news.js)
   ------------------------------------------------------------------ */
.tnews-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tnews-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 3px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.85rem;
}
.tnews-item:first-child { border-top: 0; }
html[data-bs-theme="light"] .tnews-item { border-top-color: rgba(0, 0, 0, 0.08); }
/* The timestamp is the reason to look at this panel, so it leads and it is
   fixed-width — a ragged left edge makes a list of times unscannable. */
.tnews-when {
    flex: 0 0 5.6rem;
    color: #16ff6a;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}
html[data-bs-theme="light"] .tnews-when { color: #0a8a3a; }
.tnews-kind {
    flex: 0 0 4.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: #6f42c1;
    border-radius: 3px;
    padding: 0 4px;
    text-align: center;
    white-space: nowrap;
}
.tnews-title { flex: 1 1 auto; min-width: 0; }
.tnews-title a { color: inherit; text-decoration: none; }
.tnews-title a:hover { text-decoration: underline; }
.tnews-empty,
.tnews-foot {
    font-size: 0.78rem;
    opacity: 0.7;
    padding: 0.4rem 0 0;
}
.tnews-empty { padding: 0.8rem 0; }
.tnews-hint { opacity: 0.75; }
@media (max-width: 575.98px) {
    .tnews-item { flex-wrap: wrap; gap: 0.35rem; font-size: 0.8rem; }
    .tnews-when { flex-basis: 4.8rem; }
    .tnews-kind { flex-basis: 4rem; }
    .tnews-title { flex-basis: 100%; }
}

/* ------------------------------------------------------------------
   Today/tomorrow event tables (js/most_active_events_tables.js).
   Shares .omev-day / .omev-empty / .omev-meta / .omev-dot with the
   Overview tile, which is why those live in that block and not here.
   ------------------------------------------------------------------ */
.mae-table { font-size: 0.8rem; margin-bottom: 0; }
.mae-table thead th {
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.72rem;
    opacity: 0.75;
}
.mae-table td { vertical-align: middle; }
.mae-row { cursor: pointer; }
.mae-name {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mae-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mae-src, .mae-n { font-size: 0.7rem; }
.mae-count {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0 6px;
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.85;
}
html[data-bs-theme="light"] .mae-count { background: rgba(0, 0, 0, 0.1); }
/* "h" marks an expected move taken from past reports rather than from the
   options market. The two are different claims and must look different. */
.mae-hist {
    font-size: 0.62rem;
    font-weight: 700;
    opacity: 0.6;
    vertical-align: super;
}
@media (max-width: 767.98px) {
    .mae-table { font-size: 0.75rem; }
    .mae-name { max-width: 96px; }
}

/* ------------------------------------------------------------------
   Event timeline (js/event_timeline.js)

   Every colour is stated, none inherited from a Bootstrap utility: this
   surface already uses green/red/amber for event IMPACT, so the cone and
   the path must not borrow the same channel.
   ------------------------------------------------------------------ */
.evt-svg {
    width: 100%;
    height: auto;
    display: block;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.4rem;
}
html[data-bs-theme="light"] .evt-svg { background: rgba(0, 0, 0, 0.02); }

/* Session shading: the reader has to be able to tell a closed market from a
   quiet one, or a flat cone across a weekend looks like a forecast. */
.evt-pre  { fill: rgba(120, 140, 200, 0.07); }
.evt-rth  { fill: rgba(120, 140, 200, 0.16); }
.evt-post { fill: rgba(120, 140, 200, 0.07); }

.evt-grid { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.evt-grid-zero { stroke: rgba(255, 255, 255, 0.32); }
html[data-bs-theme="light"] .evt-grid { stroke: rgba(0, 0, 0, 0.1); }
html[data-bs-theme="light"] .evt-grid-zero { stroke: rgba(0, 0, 0, 0.35); }
.evt-xtick { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
html[data-bs-theme="light"] .evt-xtick { stroke: rgba(0, 0, 0, 0.3); }

.evt-ylab, .evt-xlab, .evt-daylab, .evt-elab, .evt-edge {
    font-size: 10px;
    font-family: inherit;
    fill: rgba(255, 255, 255, 0.62);
}
html[data-bs-theme="light"] .evt-ylab,
html[data-bs-theme="light"] .evt-xlab,
html[data-bs-theme="light"] .evt-daylab,
html[data-bs-theme="light"] .evt-edge { fill: rgba(0, 0, 0, 0.62); }
.evt-daylab { font-size: 11px; font-weight: 700; }
.evt-elab { font-size: 10px; font-weight: 600; }
.evt-edge { font-size: 10px; font-weight: 600; }
.evt-edge-mid { font-weight: 700; }

/* Violet for the cone, which means neither up nor down — the point is that
   the direction is unknown. Green or red here would assert a side. */
/* Dark yellow (requested 2026-09-14, was violet). Deliberately darker and
   less saturated than the #ffd166 of a "medium impact" marker, so the band
   reads as a field behind the events and not as one of them. */
.evt-cone-outer { fill: rgba(184, 134, 11, 0.16); stroke: none; }
.evt-cone-inner { fill: rgba(184, 134, 11, 0.32); stroke: none; }
html[data-bs-theme="light"] .evt-cone-outer { fill: rgba(160, 110, 0, 0.14); }
html[data-bs-theme="light"] .evt-cone-inner { fill: rgba(160, 110, 0, 0.28); }
.evt-hit { cursor: pointer; }
.evt-hit:hover .evt-mark { stroke: #fff; stroke-width: 1.6; }
.evt-row-click { cursor: pointer; }
.evt-row-click:hover > td { background: rgba(26, 153, 166, 0.14) !important; }
/* Thin and dashed on purpose: the measured drift is near zero and a bold
   sloping line would claim a direction the data does not support. */
.evt-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 1.4;
    stroke-dasharray: 5 4;
}
html[data-bs-theme="light"] .evt-path { stroke: rgba(0, 0, 0, 0.7); }
.evt-rail { stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.75; }
.evt-rail-earn { stroke-dasharray: 1 4; opacity: 0.5; }
.evt-mark { stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.8; }

/* Daily candles for the sessions that have printed. Green and red are stated
   explicitly, never taken from a Bootstrap utility: these have to mean "up" and
   "down" in both themes, and .text-success resolves differently per theme. They
   are also DIMMER than the site's signal green/red -- the candles are context
   here, not the finding, and the cone and the event rails are what the reader
   is meant to look at. */
.evt-candle-up { fill: rgba(22, 255, 106, 0.55); stroke: none; }
.evt-candle-dn { fill: rgba(255, 68, 85, 0.55); stroke: none; }
.evt-candle-wick { stroke-width: 1.2; fill: none; }
.evt-candle-wick.evt-candle-up { stroke: rgba(22, 255, 106, 0.55); }
.evt-candle-wick.evt-candle-dn { stroke: rgba(255, 68, 85, 0.55); }
html[data-theme="light"] .evt-candle-up,
html[data-bs-theme="light"] .evt-candle-up { fill: rgba(10, 138, 58, 0.65); }
html[data-theme="light"] .evt-candle-dn,
html[data-bs-theme="light"] .evt-candle-dn { fill: rgba(200, 30, 45, 0.65); }
html[data-bs-theme="light"] .evt-candle-wick.evt-candle-up { stroke: rgba(10, 138, 58, 0.65); }
html[data-bs-theme="light"] .evt-candle-wick.evt-candle-dn { stroke: rgba(200, 30, 45, 0.65); }

/* The boundary between what is known and what is projected. The single most
   important line on the chart, so it is solid where the cone edges are not. */
.evt-nowline { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.2; }
html[data-bs-theme="light"] .evt-nowline { stroke: rgba(0, 0, 0, 0.45); }
.evt-dim-svg { font-size: 10px; fill: var(--bs-body-color); }
html[data-bs-theme="light"] .evt-dim-svg { fill: rgba(0, 0, 0, 0.5); }

.evt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    font-size: 0.76rem;
    opacity: 0.8;
    margin-top: 0.5rem;
}
.evt-legend > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.evt-key { display: inline-block; width: 15px; height: 9px; border-radius: 2px; }
.evt-key-inner { background: rgba(184, 134, 11, 0.6); }
.evt-key-outer { background: rgba(184, 134, 11, 0.28); }
.evt-key-path { height: 0; border-top: 1.6px dashed rgba(255, 255, 255, 0.8); border-radius: 0; }
html[data-bs-theme="light"] .evt-key-path { border-top-color: rgba(0, 0, 0, 0.7); }
.evt-key-rth { background: rgba(120, 140, 200, 0.45); }
.evt-candle-key { background: rgba(22, 255, 106, 0.55); width: 7px; height: 13px; }

.evt-method {
    font-size: 0.76rem;
    opacity: 0.72;
    line-height: 1.55;
    margin: 0.5rem 0 0;
}
/* Smaller earnings reports: present in the DOM, hidden until asked for.
   Rendered rather than dropped so the browser's own find still reaches them,
   and so the count in the toggle is the truth. */
/* Zoom / pan affordances. `touch-action: none` is required, or a drag on a
   phone scrolls the page instead of panning the chart -- the browser claims
   the gesture first. */
.evt-zoomable { cursor: grab; touch-action: none; }
.evt-zoomable:active { cursor: grabbing; }
.evt-zoom-reset, .evt-fs-btn { font-size: 0.76rem; white-space: nowrap; }

/* Fullscreen. The wrapper is what goes fullscreen, so it has to paint its own
   background -- the browser's fullscreen backdrop is black and an unpainted
   wrapper shows through as a transparent hole. */
#maTimeline:fullscreen,
#maTimeline:-webkit-full-screen {
    background: #0b0e13;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
html[data-bs-theme="light"] #maTimeline:fullscreen { background: #f6f7f9; }
#maTimeline:fullscreen .evt-svg { flex: 0 0 auto; }
/* The table is still reachable in fullscreen -- scrolled to, not hidden: the
   chart names an event and the table is where its numbers are. */
#maTimeline:fullscreen .evt-table { font-size: 0.8rem; }

@media (max-width: 767.98px) {
    /* The controls row is four groups wide on desktop; on a phone it must wrap
       rather than push the chart off the side. */
    .evt-svg { border-radius: 0.3rem; }
    .evt-minor-bar { font-size: 0.72rem; }
}

.evt-minor { display: none; }
.evt-show-minor .evt-minor { display: table-row; }
.evt-minor-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.6rem;
}
.evt-minor-toggle { font-size: 0.76rem; }
/* Turquoise, both themes (2026-09-15). Its own rule rather than a Bootstrap
   variant: the site theme paints btn-outline-secondary as a dark-blue fill. */
.evt-minor-bar .evt-minor-toggle { background: #20c9c9; border: 1px solid #20c9c9; color: #06201f; font-weight: 600; }
.evt-minor-bar .evt-minor-toggle:hover,
.evt-minor-bar .evt-minor-toggle:focus-visible { background: #3ee0e0; border-color: #3ee0e0; color: #06201f; }
[data-bs-theme="light"] .evt-minor-bar .evt-minor-toggle { background: #0e9a9a; border-color: #0e9a9a; color: #ffffff; }
[data-bs-theme="light"] .evt-minor-bar .evt-minor-toggle:hover { background: #0b8080; border-color: #0b8080; color: #ffffff; }

.evt-table { font-size: 0.78rem; margin-top: 0.75rem; }
.evt-table thead th { font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.evt-t, .evt-d { white-space: nowrap; font-variant-numeric: tabular-nums; }
.evt-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-dim { font-size: 0.72rem; }
.evt-note { font-size: 0.72rem; font-style: italic; }
/* The two verdicts must not look alike: "wider than usual" is the finding,
   "no wider than usual" is the more common one and is equally load-bearing. */
.evt-wide { color: #ffd166; font-weight: 600; }
.evt-flat { }
.evt-empty { font-size: 0.85rem; padding: 1.5rem 0; text-align: center; }
@media (max-width: 767.98px) {
    .evt-table { font-size: 0.72rem; }
    .evt-name { max-width: 120px; }
    .evt-method { font-size: 0.72rem; }
}

/* ------------------------------------------------------------------
   Section divider — marks the start of a new block on a long page.
   ------------------------------------------------------------------ */
.spn-section-divider {
    margin: 3rem 0 2rem;
    border: 0;
    border-top: 2px solid var(--bs-primary, #0dcaf0);
    opacity: 0.55;
}
.spn-section-divider-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0 1.5rem;
    color: var(--bs-primary, #0dcaf0);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.spn-section-divider-label::before,
.spn-section-divider-label::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    background: currentColor;
    opacity: 0.45;
}

/* ------------------------------------------------------------------
   Left-edge series name tags (chart_builder attachSeriesNameTags).
   Lightweight-Charts draws its own `title` pill over the NEWEST bars at
   the right edge; these sit at the left edge instead, so the name and the
   current value never cover each other. Purely decorative — the layer must
   not eat pan/zoom gestures aimed at the chart under it.
   ------------------------------------------------------------------ */
.spn-name-tags {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 6;            /* above the canvas, below the 80px watermark logo */
}
.spn-name-tag {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
@media (max-width: 767.98px) {
    .spn-name-tag {
        font-size: 10px;
        padding: 1px 4px;
        line-height: 14px;
    }
}

/* ------------------------------------------------------------- */

/* MOBILE-ANSICHT */

/* ------------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* Überschrift im Chart-Block etwas kompakter */
    .spn-chart h2 {
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
    }

    /* Chart-Layout: keine Sidebar mehr, alles untereinander */
    .spn-chart-layout {
        display: block;
    }

    /* Sidebar-Legende mobil nie anzeigen – nur über Modal */
    .spn-chart-legend {
        display: none !important;
    }

    /* Alle Chart-Legenden auf Mobile ausblenden (volle Breite nutzen) */
    #histRatioLegend,
    #histVolumeLegend,
    #etfChartLegend,
    #legend,
    #bo-legend,
    #futures-regime-legend,
    #riskRegimeLegend {
        display: none !important;
    }

    /* Volle Bildschirmbreite: aus dem Bootstrap-Container ausbrechen.
       -12px reichte nur bis zum Container-Padding; calc(-50vw + 50%) zieht den
       Wrapper unabhängig von der Verschachtelung exakt auf die Viewport-Kante.
       100vw statt 100% ist nötig, weil 100% die Container-Breite meint.
       Der Wrapper darf NICHT overflow-x:hidden verlieren, sonst erzeugt 100vw
       bei sichtbarer Scrollbar horizontales Scrollen der ganzen Seite. */
    .spn-chart-wrapper {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 0;
        overflow-x: hidden;
        touch-action: pan-x pan-y;
    }

    /* Canvas vollflächig. The height/min-height/max-height trio that used to
       live here (65vh / 500 / 750) is gone: it silently won against the JS and
       made the mobile height a THIRD formula. resolveChartHeight() owns it now,
       and it reproduces the 65vh portrait behaviour this replaced. */
    .spn-chart-canvas {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0.25rem;
    }

    /* Logo 60% kleiner (32px statt 80px Desktop) und in die Zeichenfläche
       gerückt statt an den Wrapper-Rand: durch die volle Viewport-Breite
       säße es sonst auf der äußersten Bildschirmkante.
       !important überschreibt die Inline-Styles in den HTML-Seiten. */
    .spn-chart-logo {
        width: 32px !important;
        left: 10px !important;
        top: 10px !important;
        bottom: auto !important;
        opacity: 0.45 !important;
    }

    /* Die Hinweise folgen der neuen Wrapper-Breite */
    .spn-proprietary-note,
    .spn-roll-note {
        margin: 6px 12px 0;
        font-size: 0.72rem;
    }

    /* Buttons auf mobile optimieren */
    .spn-chart .btn {
        touch-action: manipulation; 
        font-size: 0.9rem; 
        padding: 0.5rem 0.75rem;
    }

    /* Mobile-Legend-Button schön breit */
    .spn-btn-legend-desktop,
    .spn-btn-legend-mobile {
        width: auto !important;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        white-space: nowrap;
    }

}

/* ==========================================
   SPN Dropdown Styling – Timeframe / Show
   ========================================== */

/* Hintergrund des Dropdowns */
.spn-chart .dropdown-menu {
    background-color: #000000 !important;                                      /* tiefes Schwarz */
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Textfarbe der Einträge (Buttons + Labels) */
.spn-chart .dropdown-menu .dropdown-item,

.spn-chart .dropdown-menu .form-check-label {
    color: #ffffff !important;                                      /* WEISS */
}

/* optional: Hover-Effekt */
.spn-chart .dropdown-menu .dropdown-item:hover,

.spn-chart .dropdown-menu .form-check-label:hover {
    background-color: rgba(255, 255, 255, 0.07) !important; 
    color: #ffffff !important;
}

/* Gauge Timeframe Dropdown Styling */
#gauge-timeframe-control {
    position: relative; 
    z-index: 1050 !important; 
    pointer-events: auto !important;
}

#gauge-timeframe-control .btn-group {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 
    position: relative; 
    z-index: 1051 !important; 
    pointer-events: auto !important;
}

#gauge-timeframe-control button {
    position: relative; 
    z-index: 1052 !important; 
    pointer-events: auto !important;
}

#gauge-timeframe-control .dropdown-menu {
    background-color: #000000 !important; 
    border-color: rgba(255, 255, 255, 0.25) !important; 
    z-index: 1053 !important; 
    pointer-events: auto !important;
}

#gauge-timeframe-control .dropdown-item {
    color: #ffffff !important; 
    position: relative; 
    z-index: 1054 !important; 
    pointer-events: auto !important; 
    cursor: pointer !important;
}

#gauge-timeframe-control .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.07) !important; 
    color: #ffffff !important;
}

/* Mobile: Gauge-Konfiguration */

@media (max-width: 767.98px) {
    #weekly-gauge-block,
    
    
    
    
    
    
    
    #daily-gauge-block {
        max-width: 100%;
    }

    /* Mobile Gauge Container Styling */
    #mobile-gauge-container {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        width: 100%;
    }

}

/* Verhindere, dass stretched-links das Gauge-Dropdown überlagern */
.stretched-link::after {
    z-index: 1 !important;
}

/* Mobile Touch-Optimierungen */

@media (max-width: 767.98px) {
    .spn-chart .dropdown-toggle {
        min-height: 44px;
    }

    .spn-chart {
        -webkit-overflow-scrolling: touch;
    }

    .spn-btn-legend-mobile {
        min-height: 44px;
    }

}

/* ============================
   Sector Overview Table
   ============================ */
.spn-sector-table th,

.spn-sector-table td {
    border-color: rgba(255,255,255,0.08) !important;
}

.spn-cell-group,

.spn-cell-sector {
    font-weight: 700;
}

/* Group background colors (from chart.css vars) */
.spn-group-growth {
    background: var(--color_rotation_growth) !important; 
    color: var(--color_white) !important;
}

.spn-group-value {
    background: var(--color_rotation_value) !important; 
    color: var(--color_white) !important;
}

.spn-group-cyclicals {
    background: var(--color_rotation_cyclicals) !important; 
    color: #111 !important;
}

/* yellow => dark text */
.spn-group-defensives {
    background: var(--color_rotation_defensives) !important; 
    color: #111 !important;
}

/* pink => dark text */

/* Sector background colors */
.spn-sector-technology {
    background: var(--color_rotation_technology) !important; 
    color: var(--color_white) !important;
}

.spn-sector-communication {
    background: var(--color_rotation_communication) !important; 
    color: #111 !important;
}

.spn-sector-discretionary {
    background: var(--color_rotation_discretionary) !important; 
    color: #111 !important;
}

.spn-sector-financials {
    background: var(--color_rotation_financials) !important;
    color: var(--color_white) !important;
}

.spn-sector-financials-funds {
    background: var(--color_rotation_financials_funds) !important;
    color: var(--color_white) !important;
}

.spn-sector-real-estate {
    background: var(--color_rotation_real_estate) !important; 
    color: var(--color_white) !important;
}

.spn-sector-industrials {
    background: var(--color_rotation_industrials) !important; 
    color: var(--color_white) !important;
}

.spn-sector-materials {
    background: var(--color_rotation_materials) !important; 
    color: #111 !important;
}

.spn-sector-energy {
    background: var(--color_rotation_energy) !important; 
    color: #111 !important;
}

.spn-sector-healthcare {
    background: var(--color_rotation_healthcare) !important; 
    color: #111 !important;
}

.spn-sector-utilities {
    background: var(--color_rotation_utilities) !important; 
    color: var(--color_white) !important;
}

.spn-sector-staples {
    background: var(--color_rotation_staples) !important; 
    color: var(--color_white) !important;
}

/* Signal cells: keep background neutral, color text by regime */
.spn-cell-signal {
    font-weight: 800; 
    letter-spacing: 0.2px; 
    background: rgba(255,255,255,0.03) !important;
}

/* Signal text colors from chart.css vars */
.spn-signal-bottom {
    color: var(--color_accumulation) !important;
}

.spn-signal-bull {
    color: var(--color_impulse_bullish) !important;
}

.spn-signal-top {
    color: var(--color_distribution) !important;
}

.spn-signal-bear {
    color: var(--color_impulse_bearish) !important;
}

.spn-signal-na {
    color: rgba(255,255,255,0.55) !important; 
    font-weight: 600;
}

/* Table should NOT stretch full width */
.spn-sector-overview .table-responsive {
    max-width: 100%;
}

table.spn-sector-table {
    width: 100% !important;
    min-width: 1200px !important;
    table-layout: fixed !important;
}

table.spn-sector-table td,
table.spn-sector-table th {
    white-space: nowrap;
    padding: 4px 6px !important;
    font-size: 0.82rem;
}

/* G.Rank column */
table.spn-sector-table th:nth-child(1),
table.spn-sector-table td:nth-child(1) {
    width: 52px !important;
    text-align: center;
}

/* Group column */
table.spn-sector-table th:nth-child(2),
table.spn-sector-table td:nth-child(2) {
    width: 90px !important;
}

/* Group Signal column */
table.spn-sector-table th:nth-child(3),
table.spn-sector-table td:nth-child(3) {
    width: 110px !important;
}

/* S.Rank column */
table.spn-sector-table th:nth-child(4),
table.spn-sector-table td:nth-child(4) {
    width: 60px !important;
    text-align: center;
}

/* Sector column */
table.spn-sector-table th:nth-child(5),
table.spn-sector-table td:nth-child(5) {
    width: 120px !important;
}

/* Signal column */
table.spn-sector-table th:nth-child(6),
table.spn-sector-table td:nth-child(6) {
    width: 110px !important;
}

/* Uncertainty column */
table.spn-sector-table th:nth-child(7),
table.spn-sector-table td:nth-child(7) {
    width: 140px !important;
}

/* P/E column */
table.spn-sector-table th:nth-child(8),
table.spn-sector-table td:nth-child(8) {
    width: 50px !important;
}

/* ETF Flow column */
table.spn-sector-table th:nth-child(9),
table.spn-sector-table td:nth-child(9) {
    width: 74px !important;
}

/* Opt Flow column */
table.spn-sector-table th:nth-child(10),
table.spn-sector-table td:nth-child(10) {
    width: 74px !important;
}

/* Insider column */
table.spn-sector-table th:nth-child(11),
table.spn-sector-table td:nth-child(11) {
    width: 60px !important;
}

/* Darkpool column */
table.spn-sector-table th:nth-child(12),
table.spn-sector-table td:nth-child(12) {
    width: 76px !important;
}

/* Breadth column */
table.spn-sector-table th:nth-child(13),
table.spn-sector-table td:nth-child(13) {
    width: 64px !important;
}

/* Patterns column */
table.spn-sector-table th:nth-child(14),
table.spn-sector-table td:nth-child(14) {
    width: 70px !important;
}

/* Buybacks column — column 15.
   The block above stops at 14, which is what the JS comment means when it says
   the CSS pins widths by nth-child "for columns 1 to 14". There are SIXTEEN
   columns: Buybacks was leaning on an inline width from the renderer, and
   Anomaly had nothing at all. */
table.spn-sector-table th:nth-child(15),
table.spn-sector-table td:nth-child(15) {
    width: 76px !important;
}

/* Anomaly column — column 16, and the reason this block exists.
   With `table-layout: fixed` and `width: 100%`, a column with no width takes
   every pixel the other columns did not claim. Measured on a 1543px table:
   379px rendered against the 115px "Clearly stronger +13 % ●" actually needs,
   so the text sat marooned in the middle of a quarter-page gutter.
   The remaining slack is now shared proportionally across all sixteen columns,
   which is what the fixed-layout algorithm does once every column is sized. */
table.spn-sector-table th:nth-child(16),
table.spn-sector-table td:nth-child(16) {
    width: 124px !important;
}

/* P/E and Anomaly navigate on click like the other linked cells; say so on
   hover rather than leaving them looking inert. */
table.spn-sector-table td[data-link] {
    cursor: pointer;
}

/* Theme Sector Dropdown = Standard Türkis, Text weiß */
.spn-theme-select {
    background: var(--bs-primary) !important;                                      /* dein Standard Türkies aus Bootstrap Theme */
    color: #fff !important; 
    border: 1px solid rgba(255,255,255,0.25) !important; 
    font-weight: 700;
}

/* Fokus / Hover schöner */
.spn-theme-select:focus {
    border-color: rgba(255,255,255,0.55) !important; 
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.15) !important;
}

/* Option-Liste (auf manchen Browsern begrenzt kontrollierbar) */
.spn-theme-select option {
    background: #0b0f14;                                      /* dunkler Dropdown-Body */
    color: #fff;
}

/* ============================
   Strongest Sector Stocks table
   ============================ */
.spn-stocks-table {
    table-layout: fixed;
    width: 100%;
}

.spn-stocks-table th,

.spn-stocks-table td {
    border-color: rgba(255,255,255,0.08) !important;
}

.spn-stocks-table th {
    cursor: pointer; 
    user-select: none;
}

.spn-stocks-table td {
    white-space: nowrap;
}

.spn-stocks-table th:nth-child(1),
.spn-stocks-table td:nth-child(1) {
    /* Ticker */
    width: 55px;
}

.spn-stocks-table th:nth-child(2),
.spn-stocks-table td:nth-child(2) {
    /* Company */
    white-space: normal;
    width: 140px;
}

.spn-stocks-table th:nth-child(3),
.spn-stocks-table td:nth-child(3) {
    /* Sector */
    width: 40px;
}

.spn-stocks-table th:nth-child(4),
.spn-stocks-table td:nth-child(4) {
    /* Industry - largest column */
    white-space: normal;
    width: 300px;
    min-width: 280px;
}

.spn-stocks-table th:nth-child(5),
.spn-stocks-table td:nth-child(5) {
    /* Rank */
    width: 45px;
    text-align: center;
}

.spn-stocks-table th:nth-child(6),
.spn-stocks-table td:nth-child(6) {
    /* Regime */
    width: 90px;
}

.spn-stocks-table th:nth-child(7),
.spn-stocks-table td:nth-child(7) {
    /* Last Performance (Sparkline) */
    width: 180px;
}

.spn-stocks-table th:nth-child(8),
.spn-stocks-table td:nth-child(8) {
    /* % column */
    width: 45px;
    text-align: right;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Rank cell styling for regime view */
.spn-rank-cell {
    text-align: center;
    font-weight: 600;
}

/* Regime view (non-heatmap) — responsive on mobile */
@media (max-width: 767.98px) {
    .spn-stocks-table:not(.spn-stocks-table--heatmap) {
        table-layout: auto;
    }
    .spn-stocks-table:not(.spn-stocks-table--heatmap) td,
    .spn-stocks-table:not(.spn-stocks-table--heatmap) th {
        white-space: normal;
        font-size: 0.8rem;
        padding: 4px 6px !important;
    }
}

/* ============================================================
   Screener / Pattern-Stocks Regime view — sticky Ticker + Industry
   at ALL viewports (not just mobile). The Regime layout is 951px wide
   so horizontal scroll appears on any viewport narrower than that,
   not only under 768px. Scoped to .spn-pattern-stocks so the broader
   stocks table on other pages (table_strongest_stocks with Company
   column at position 2) is not affected.
   ============================================================ */
.spn-pattern-stocks .spn-stocks-table:not(.spn-stocks-table--heatmap) th:first-child,
.spn-pattern-stocks .spn-stocks-table:not(.spn-stocks-table--heatmap) td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    width: 55px !important;
    min-width: 55px !important;
    max-width: 55px !important;
}

/* Ticker body cell — dark background (mask scrolling cells underneath) */
.spn-pattern-stocks .spn-stocks-table:not(.spn-stocks-table--heatmap) tbody td:first-child {
    background-color: #212529 !important;
    color: #fff !important;
}

/* Ticker header cell — turquoise to match the rest of the header bar.
   z-index 9999 is well above Bootstrap modals/tooltips and any
   non-sticky thead th (z=10), so Pattern/Regime/Uncert. headers can
   never slide over it on horizontal scroll. */
.spn-pattern-stocks .spn-stocks-table:not(.spn-stocks-table--heatmap) thead th:first-child {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    background-color: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
}

/* Industry — sticky at left = ticker width (55px) */
.spn-pattern-stocks .spn-stocks-table:not(.spn-stocks-table--heatmap) th:nth-child(2),
.spn-pattern-stocks .spn-stocks-table:not(.spn-stocks-table--heatmap) td:nth-child(2) {
    position: sticky !important;
    left: 55px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    z-index: 2 !important;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.55);
}

.spn-pattern-stocks .spn-stocks-table:not(.spn-stocks-table--heatmap) thead th:nth-child(2) {
    position: sticky !important;
    top: 0 !important;
    left: 55px !important;
    z-index: 9999 !important;
    background-color: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
}

/* Performance % cell styling for regime view - BLACK text */
.spn-perf-pct-cell {
    text-align: right;
    font-weight: 700;
    font-size: 0.8rem;
    color: #000 !important;
    padding: 0.25rem 0.4rem !important;
}

.spn-perf-slider {
    width: 180px;
}

/* Autoscale button - override Bootstrap */
button#spnAutoscaleBtn.btn.btn-sm.btn-outline-secondary,
button#spnAutoscaleBtn.btn.btn-sm.btn-outline-secondary:hover,
button#spnAutoscaleBtn.btn.btn-sm.btn-outline-secondary:focus,
button#spnAutoscaleBtn.btn.btn-sm.btn-outline-secondary:active,
button#spnAutoscaleBtn.btn.btn-sm.btn-outline-secondary:focus-visible {
    color: #fff !important;
    background-color: transparent !important;
    border-color: #6c757d !important;
    box-shadow: none !important;
    outline: none !important;
}

button#spnAutoscaleBtn.btn.btn-sm.btn-primary,
button#spnAutoscaleBtn.btn.btn-sm.btn-primary:hover,
button#spnAutoscaleBtn.btn.btn-sm.btn-primary:focus,
button#spnAutoscaleBtn.btn.btn-sm.btn-primary:active,
button#spnAutoscaleBtn.btn.btn-sm.btn-primary:focus-visible {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 60D sparkline performance */

.spn-perf-strip {
    display: inline-flex; 
    gap: 2px; 
    align-items: center;
}

.spn-perf-dot {
    width: 7px; 
    height: 16px; 
    border-radius: 2px; 
    display: inline-block; 
    background: rgba(255,255,255,0.12);
}

/* (Regime classes reuse from your other tables) */
.spn-stocks-table .spn-signal-bottom {
    color: var(--color_accumulation) !important; 
    font-weight: 800;
}

.spn-stocks-table .spn-signal-bull {
    color: var(--color_impulse_bullish) !important; 
    font-weight: 800;
}

.spn-stocks-table .spn-signal-top {
    color: var(--color_distribution) !important; 
    font-weight: 800;
}

.spn-stocks-table .spn-signal-bear {
    color: var(--color_impulse_bearish) !important; 
    font-weight: 800;
}

.spn-stocks-table .spn-signal-na {
    color: rgba(255,255,255,0.55) !important; 
    font-weight: 600;
}

/* Scrollbar ab > ca. 20 Zeilen */
.spn-table-scroll-20 {
    max-height: 760px;                                      /* ~20 Zeilen; bei Bedarf fein-tunen */
    overflow-y: auto;
    overflow-x: hidden;                                     /* keine horizontale Scrollbar */
    border-radius: 10px;
}

/* sticky header */
.spn-stocks-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.spn-stocks-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-primary, #1a99a6);                  /* Türkis */
    color: #fff !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.85rem;
}

/* Sector farbige Zelle (legacy) */
.spn-sector-cell {
    font-weight: 800;
    color: #fff;
}

/* falls Text auf hellen Farben (z.B. Materials) besser schwarz sein soll */
.spn-sector-cell.spn-sector-materials {
    color: #000;
}

/* Sector color-only cell (new compact style) */
.spn-sector-color-cell {
    text-align: center;
    padding: 0.25rem !important;
}

.spn-sector-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    vertical-align: middle;
}

/* Industry column - single line with ellipsis and tooltip */
.spn-industry-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Company cell - compact */
.spn-company-cell {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spn-sparkline {
    display: block;
}

.spn-perf-cell {
    min-width: 200px;
    width: auto;
}

/* Reduced row height for compact table */
.spn-stocks-table tbody tr td {
    padding: 0.35rem 0.5rem !important;
    line-height: 1.2;
}

/* ============================
   Heat Map View Styles
   ============================ */

/* Heatmap table layout - fixed uses first row for column widths */
.spn-stocks-table--heatmap {
    table-layout: fixed;
    width: 100%;
}

/* Reset nth-child rules for heatmap mode */
.spn-stocks-table--heatmap th,
.spn-stocks-table--heatmap td {
    width: auto;
}

/* Hidden width-defining row - first row defines column widths */
.spn-heatmap-width-row {
    height: 0 !important;
    visibility: collapse;
    line-height: 0 !important;
}

.spn-heatmap-width-row th {
    padding: 0 !important;
    border: none !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* Day header cells - define EQUAL width for all 59 day columns */
.spn-heatmap-day-header {
    width: 14px !important;
}

/* Reduced row height for heatmap */
.spn-stocks-table--heatmap tbody tr td {
    padding: 0.15rem 0.1rem !important;
    line-height: 1.0;
    height: 18px;
}

/* Month header cells - dynamic width based on colspan */
.spn-heatmap-month {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.05rem !important;
    text-align: center;
    white-space: nowrap;
    background: var(--bs-primary, #1a99a6);                  /* Türkis */
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Month end border (black thick line) - on header */
.spn-heatmap-month-end {
    border-right: 3px solid #000 !important;
}

/* Heat map value cells - EQUAL fixed pixel width for all 59 days */
.spn-heatmap-cell {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 0 !important;
    text-align: center;
    white-space: nowrap;
    border: none !important;
    overflow: hidden;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
}

/* Black vertical line at month boundary */
.spn-heatmap-cell.spn-heatmap-month-end {
    border-right: 3px solid #000 !important;
}

/* Sticky ticker column - narrower */
.spn-heatmap-ticker {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bs-body-bg, #22272e);
    padding: 0.2rem 0.3rem !important;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    font-size: 0.7rem;
}

.spn-heatmap-ticker-head {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    background: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    font-size: 0.7rem;
    cursor: pointer;
}

/* Sticky industry column - single line with ellipsis.
   2026-06-01: now the RIGHTMOST sticky column in the heatmap (S.Rank and
   I.Rank were demoted to scrolling). The border + box-shadow that visually
   separates the sticky cluster from the scrolling day cells moved here
   from .spn-heatmap-irank. */
.spn-heatmap-industry {
    position: sticky;
    left: 50px;
    z-index: 2;
    background: var(--bs-body-bg, #22272e);
    padding: 0.2rem 0.3rem !important;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    font-size: 0.6rem;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2;
    max-height: 1.4em;
    border-right: 2px solid var(--bs-border-color, #000) !important;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.55);
}

.spn-heatmap-industry-head {
    position: sticky !important;
    top: 0 !important;
    left: 50px !important;
    z-index: 9999 !important;
    background: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    font-size: 0.65rem;
    cursor: pointer;
    border-right: 2px solid #000 !important;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.55);
}

/* Sticky rank column */
.spn-heatmap-rank {
    position: sticky;
    left: 170px;
    z-index: 2;
    background: var(--bs-body-bg, #22272e);
    padding: 0.2rem 0.2rem !important;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    font-size: 0.65rem;
    text-align: center;
    border-right: 2px solid var(--bs-border-color, #000) !important;
}

.spn-heatmap-rank-head {
    position: sticky !important;
    top: 0 !important;
    left: 170px !important;
    z-index: 9999 !important;
    background: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    font-size: 0.65rem;
    cursor: pointer;
    text-align: center;
    border-right: 2px solid #000 !important;
}

/* S.Rank column (col 3) — body cells get inline bg from rankToColor.
   2026-06-01: demoted from sticky to scrolling per user request — when
   horizontally scrolling the heatmap, S.Rank and I.Rank now scroll with
   the months. The visual sticky boundary (border + shadow) moved up to
   .spn-heatmap-industry. Width still 44px to match updateHeatmapColgroup. */
.spn-heatmap-srank {
    padding: 0.2rem 0.2rem !important;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    font-size: 0.65rem;
    text-align: center;
}

.spn-heatmap-srank-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    font-size: 0.65rem;
    cursor: pointer;
    text-align: center;
}

/* I.Rank column (col 4) — also demoted to scrolling (2026-06-01). */
.spn-heatmap-irank {
    padding: 0.2rem 0.2rem !important;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    font-size: 0.65rem;
    text-align: center;
}

.spn-heatmap-irank-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    font-size: 0.65rem;
    cursor: pointer;
    text-align: center;
}

/* Performance % column (rightmost) - BLACK text, larger font */
.spn-heatmap-perf {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: right;
    padding: 0.15rem 0.25rem !important;
    color: #000 !important;
    border-left: 2px solid #000 !important;
}

.spn-heatmap-perf-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    font-size: 0.7rem;
    cursor: pointer;
    text-align: center;
    border-left: 2px solid #000 !important;
}

/* =========================================================
   TradingView Widget Styles
   ========================================================= */

.spn-tradingview-widget {
    margin-top: 3rem;
}

/* Clickable table rows */
.spn-stocks-table tbody tr {
    cursor: pointer;
    transition: outline 0.15s ease;
}

.spn-stocks-table tbody tr:hover {
    outline: 1px solid rgba(255, 255, 255, 0.4);
    outline-offset: -1px;
}

/* Active row in regime view - green tint */
.spn-stocks-table tbody tr.table-active {
    background-color: rgba(22, 255, 106, 0.15) !important;
    border-left: 3px solid var(--color_green);
}

/* Active row in heatmap view - white outline ONLY, NO background/fill */
.spn-stocks-table--heatmap tbody tr.table-active {
    background: transparent !important;
    background-color: transparent !important;
    outline: 2px solid #fff !important;
    outline-offset: -1px;
    border-left: none !important;
    box-shadow: none !important;
}

.spn-stocks-table--heatmap tbody tr.table-active td {
    /* Preserve heatmap cell background colors - do not override */
    background-color: inherit;
}

.spn-stocks-table--heatmap tbody tr.table-active td.spn-heatmap-ticker,
.spn-stocks-table--heatmap tbody tr.table-active td.spn-heatmap-industry,
.spn-stocks-table--heatmap tbody tr.table-active td.spn-heatmap-rank {
    /* Transparent so selected row shows only white outline, no fill */
    background: transparent !important;
}

/* Override Bootstrap table-active background in heatmap */
.spn-stocks-table--heatmap tbody tr.table-active > td:not(.spn-heatmap-ticker):not(.spn-heatmap-industry):not(.spn-heatmap-rank) {
    --bs-table-active-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
}

.spn-stocks-table--heatmap tbody tr:hover {
    outline: 1px solid rgba(255, 255, 255, 0.6);
    outline-offset: -1px;
}

/* Clickable Sector Rotation table rows */
.spn-sector-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.spn-sector-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.spn-sector-table tbody tr.table-active {
    background-color: rgba(22, 255, 106, 0.15) !important;
    border-left: 3px solid var(--color_green);
}

/* Clickable Theme ETF table rows */
.spn-theme-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.spn-theme-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.spn-theme-table tbody tr.table-active {
    background-color: rgba(22, 255, 106, 0.15) !important;
    border-left: 3px solid var(--color_green);
}

.tradingview-widget-container {
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.tradingview-widget-copyright {
    font-size: 12px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #9db2bd;
    padding: 0 10px;
}

.tradingview-widget-copyright .blue-text {
    color: #2962FF;
    text-decoration: none;
}

.tradingview-widget-copyright .blue-text:hover {
    text-decoration: underline;
}

}

/* ============================================================
   GLOSSARY TOOLTIP STYLES
   ============================================================ */
span.glossary-term {
    /* Minimal styling - preserve original text formatting */
    text-decoration: underline dotted rgba(255, 255, 255, 0.35) !important;
    text-underline-offset: 3px !important;
    cursor: help !important;
    /* Force inherit all text properties from parent */
    color: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    letter-spacing: inherit !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

span.glossary-term:hover {
    text-decoration: underline dotted rgba(255, 255, 255, 0.55) !important;
}

/* Bootstrap tooltip customization */
.tooltip {
    font-size: 0.875rem;
}

.tooltip-inner {
    max-width: 300px;
    text-align: left;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--color_green, #16ff6a);
    border-radius: 4px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--color_green, #16ff6a);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--color_green, #16ff6a);
}

/* =========================================================
   Analysis Overview Page Styles
   ========================================================= */

.spn-overview-card {
    border: 1px solid rgba(22, 255, 106, 0.2);
    border-radius: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.spn-overview-card:hover {
    border-color: rgba(22, 255, 106, 0.5);
    box-shadow: 0 4px 20px rgba(22, 255, 106, 0.15);
}

.spn-overview-card .card-header {
    padding: 0.75rem 1rem;
}

.spn-overview-card .card-header a:hover {
    text-decoration: underline !important;
}

.spn-overview-card .card-body {
    padding: 1rem;
}

.spn-overview-card canvas {
    display: block;
    margin: 0 auto;
}

/* Symmetric gauge cards (Housing / Labour / Inflation / Funding Stress
   etc. on analysis_overview.html). Same vertical rhythm + sizes so the
   three cards line up in a row regardless of which footer rows are
   populated.
*/
.spn-gauge-score {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
.spn-gauge-subtitle {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    min-height: 1.1rem;
    margin: 4px 0 8px;
}
.spn-gauge-badge-wrap {
    margin-bottom: 14px;
    min-height: 1.85rem;
}
.spn-gauge-bar {
    position: relative;
    height: 10px;
    border-radius: 5px;
    margin-top: auto;
}
.spn-gauge-needle {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 3px;
    height: 16px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    transition: left 0.4s ease;
}
.spn-gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #aaa;
    margin-top: 4px;
}
.spn-gauge-footer {
    text-align: center;
    color: #fff;
    font-size: 0.8rem;
    min-height: 1.4rem;
    margin-top: 8px;
}

/* Mobile D/W Toggle Button Styles */
.spn-overview-card .btn-group .btn {
    padding: 0.25rem 0.6rem;
    font-weight: 600;
    font-size: 0.8rem;
    min-width: 32px;
}

/* Mobile Responsive Optimizations for Overview Page */
@media (max-width: 767.98px) {
    .spn-overview-card .card-body {
        padding: 0.75rem;
    }

    .spn-overview-card .card-header {
        padding: 0.5rem 0.75rem;
    }

    .spn-overview-card .card-header h3 {
        font-size: 1rem;
    }

    /* Larger mobile gauges */
    #mobileGaugeDaily canvas,
    #mobileGaugeWeekly canvas {
        max-width: 100%;
        height: auto;
    }

    /* Optimize gauge text size on mobile */
    .spn-overview-card .fs-5 {
        font-size: 1rem !important;
    }
}

/* ============================================================
   MOBILE: Sector Analysis Page Optimizations
   ============================================================ */
@media (max-width: 767.98px) {
    /* 1. Sector Rotation Table - reduce column widths to content, single line */
    table.spn-sector-table {
        width: auto !important;
        table-layout: auto !important;
    }
    table.spn-sector-table th,
    table.spn-sector-table td {
        width: auto !important;
        padding: 0.4rem 0.5rem !important;
        white-space: nowrap !important;
    }

    /* 1b. Sector Rotation Table - sticky G.Rank, S.Rank, Sector columns on mobile.
       Group (2) and Group Signal (3) are intentionally NOT sticky — they slide
       under the sticky Sector column when the user scrolls right.
       Body cell backgrounds come from inline rankToColor / .spn-sector-* class;
       only headers need an explicit opaque bg to mask scrolling content. */
    table.spn-sector-table th:nth-child(1),
    table.spn-sector-table td:nth-child(1) {
        position: sticky !important;
        left: 0 !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        z-index: 2 !important;
    }
    table.spn-sector-table th:nth-child(4),
    table.spn-sector-table td:nth-child(4) {
        position: sticky !important;
        left: 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        z-index: 2 !important;
    }
    table.spn-sector-table th:nth-child(5),
    table.spn-sector-table td:nth-child(5) {
        position: sticky !important;
        left: 84px !important;
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        z-index: 2 !important;
        box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.55);
    }
    table.spn-sector-table thead th:nth-child(1),
    table.spn-sector-table thead th:nth-child(4),
    table.spn-sector-table thead th:nth-child(5) {
        z-index: 3 !important;
        background-color: #212529 !important;
    }

    /* 2. TradingView Chart Widget - reduce height by 10% */
    .tradingview-widget-container {
        height: 450px !important;
    }
    .tradingview-widget-container > div:first-child {
        height: calc(100% - 32px) !important;
    }

    /* 3. Stock Table - Sticky Ticker column (first column only) */
    /* Regime view — body cell z-index:2 keeps it above the default-z body
       cells in scrolling columns. Header z-index:20 must beat the generic
       .spn-stocks-table thead th { z-index: 10 } rule (which otherwise wins
       on specificity (0,1,2)) so the non-sticky Pattern/Regime/Uncert.
       headers don't slide over the sticky Ticker on horizontal scroll. */
    .spn-stocks-table th:first-child,
    .spn-stocks-table td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 2 !important;
        background-color: #212529 !important;
    }
    .spn-stocks-table thead th:first-child {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 9999 !important;
        /* Turquoise to match the rest of the header bar (Industry, Pattern,
           Regime, etc.). The body cell below keeps its dark #212529 bg —
           that's set on the th+td selector above and not overridden here. */
        background-color: var(--bs-primary, #1a99a6) !important;
        color: #fff !important;
    }
    /* Heatmap view — Ticker (col 1) sticky.
       Industry (.spn-heatmap-industry), S.Rank (.spn-heatmap-srank) and
       I.Rank (.spn-heatmap-irank) inherit their sticky positioning from the
       class-based rules above which already apply on mobile — no overrides
       needed here. */
    .spn-stocks-table--heatmap th:first-child,
    .spn-stocks-table--heatmap td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 2 !important;
        background-color: #1a1d21 !important;
    }
    .spn-stocks-table--heatmap thead th:first-child {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 9999 !important;
        background-color: var(--bs-primary, #1a99a6) !important;
        color: #fff !important;
    }

    /* Regime view (non-heatmap) — Industry (col 2) also sticky on mobile.
       Ticker (col 1) is already sticky via .spn-stocks-table th:first-child
       above. The Industry cell has an inline sectorColor background which
       masks the scrolling content below — no extra fallback needed. */
    .spn-stocks-table:not(.spn-stocks-table--heatmap) th:first-child,
    .spn-stocks-table:not(.spn-stocks-table--heatmap) td:first-child {
        width: 55px !important;
        min-width: 55px !important;
        max-width: 55px !important;
    }
    .spn-stocks-table:not(.spn-stocks-table--heatmap) th:nth-child(2),
    .spn-stocks-table:not(.spn-stocks-table--heatmap) td:nth-child(2) {
        position: sticky !important;
        left: 55px !important;
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        z-index: 2 !important;
        box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.55);
    }
    .spn-stocks-table:not(.spn-stocks-table--heatmap) thead th:nth-child(2) {
        position: sticky !important;
        top: 0 !important;
        left: 55px !important;
        z-index: 9999 !important;
        background-color: var(--bs-primary, #1a99a6) !important;
        color: #fff !important;
    }

    /* 4. Mobile navigation arrows */
    .spn-mobile-nav-arrows {
        display: inline-flex !important;
        gap: 0.25rem;
    }
    .spn-mobile-nav-arrows .btn {
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
        line-height: 1;
    }
}

/* Hide mobile nav arrows on desktop */
.spn-mobile-nav-arrows {
    display: none;
}

/* ============================================================
   ANALYSIS INSIDER - Mobile Optimizations
   ============================================================ */
@media (max-width: 767.98px) {
    /* Hide chart legends on mobile */
    #histRatioLegend,
    #histVolumeLegend {
        display: none !important;
    }

    /* Smaller legend buttons on insider page */
    [data-page="insider"] .spn-btn-legend-mobile {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: auto !important;
    }

    /* Insider Trades Table - Sticky Ticker column */
    #tradesTable th:first-child,
    #tradesTable td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 2 !important;
        background-color: #212529 !important;
    }
    #tradesTable thead th:first-child {
        z-index: 3 !important;
    }

    /* Cluster Detector Table - Sticky Ticker column (2nd column, after expand icon) */
    #clusterTable th:nth-child(2),
    #clusterTable td:nth-child(2) {
        position: sticky !important;
        left: 0 !important;
        z-index: 2 !important;
        background-color: #212529 !important;
    }
    #clusterTable thead th:nth-child(2) {
        z-index: 3 !important;
    }
    /* Hide the expand icon column on mobile to save space */
    #clusterTable th:first-child,
    #clusterTable td:first-child {
        display: none !important;
    }
}

/* ============================================================
   ANALYSIS PATTERN - Filter Layout
   ============================================================ */
/* Desktop: Dropdowns in a row */
.spn-pattern-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.spn-pattern-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spn-pattern-dropdown {
    min-width: 150px;
}

/* Hide arrow buttons on desktop */
.spn-pattern-nav-arrows {
    display: none;
}

/* Mobile Layout */
@media (max-width: 767.98px) {
    /* Show arrow buttons on mobile */
    .spn-pattern-nav-arrows {
        display: inline-flex !important;
        gap: 0.25rem;
    }
    .spn-pattern-nav-arrows .btn {
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
        line-height: 1;
    }

    /* Stack filters vertically on mobile */
    .spn-pattern-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .spn-pattern-filter-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .spn-pattern-filter-row label {
        flex-shrink: 0;
        width: 70px;
        text-align: right;
    }

    .spn-pattern-dropdown {
        flex: 1;
        min-width: 0;
        max-width: none !important;
    }

    /* Pattern stocks table - sticky ticker column */
    .spn-pattern-stocks .spn-stocks-table th:first-child,
    .spn-pattern-stocks .spn-stocks-table td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 2 !important;
        background-color: #212529 !important;
    }
    .spn-pattern-stocks .spn-stocks-table thead th:first-child {
        z-index: 3 !important;
    }
}

/* ============================================================
   TIMEFRAME TOGGLE BUTTONS (D/W)
   ============================================================ */
.spn-timeframe-buttons {
    display: inline-flex;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
}

.spn-timeframe-buttons .spn-tf-btn {
    background-color: #2a2e39;
    border: 1px solid #3d4250;
    color: #b2b5be;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.15s ease;
    border-radius: 0;
    min-width: 36px;
}

.spn-timeframe-buttons .spn-tf-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.spn-timeframe-buttons .spn-tf-btn:last-child {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.spn-timeframe-buttons .spn-tf-btn:hover {
    background-color: #363a45;
    color: #fff;
}

.spn-timeframe-buttons .spn-tf-btn.active {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.spn-timeframe-buttons .spn-tf-btn.active:hover {
    background-color: #1e88e5;
    border-color: #1e88e5;
}

/* ============================================================
   SORTABLE TABLE STYLES
   ============================================================ */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px !important;
}

.sortable:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sortable .sort-icon::after {
    content: '⇅';
    position: absolute;
    right: 5px;
    opacity: 0.3;
    font-size: 0.8em;
}

.sortable.sort-asc .sort-icon::after {
    content: '↑';
    opacity: 1;
}

.sortable.sort-desc .sort-icon::after {
    content: '↓';
    opacity: 1;
}

/* Trades table specific styles */
#tradesTable {
    font-size: 0.85rem;
}

#tradesTable th {
    white-space: nowrap;
    border-bottom: 2px solid var(--color_white);
}

#tradesTable td {
    vertical-align: middle;
}

#tradesTable .text-end {
    text-align: right;
}

/* Scrollable table body with sticky header */
#tradesTable thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #212529;
}

/* Highlight row on hover */
#tradesTable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Selected row - white border, no fill */
#tradesTable tbody tr.table-active {
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

#tradesTable tbody tr.table-active > td {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-active-bg: transparent;
}

/* ============================================================
   DARK GREEN BUY BUTTON
   ============================================================ */
#btnTradesBuy.btn-success {
    background-color: #1f8b2d !important;
    border-color: #1f8b2d !important;
}

#btnTradesBuy.btn-success:hover {
    background-color: #176b22 !important;
    border-color: #176b22 !important;
}

#btnTradesBuy.btn-outline-success {
    color: #1f8b2d !important;
    border-color: #1f8b2d !important;
}

#btnTradesBuy.btn-outline-success:hover {
    background-color: #1f8b2d !important;
    border-color: #1f8b2d !important;
    color: #fff !important;
}

/* ============================================================
   CLUSTER DETECTOR TABLE STYLES
   ============================================================ */
#clusterTable thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #212529;
}

#clusterTable tbody tr.cluster-row:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

#clusterTable tbody tr.cluster-detail-row {
    font-size: 0.85rem;
}

#clusterTable tbody tr.cluster-detail-row:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

#clusterTable tbody tr.cluster-detail-header {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cluster BUY button styles */
#btnClusterBuy.btn-success {
    background-color: #1f8b2d !important;
    border-color: #1f8b2d !important;
}

#btnClusterBuy.btn-success:hover {
    background-color: #176b22 !important;
    border-color: #176b22 !important;
}

#btnClusterBuy.btn-outline-success {
    color: #1f8b2d !important;
    border-color: #1f8b2d !important;
}

#btnClusterBuy.btn-outline-success:hover {
    background-color: #1f8b2d !important;
    border-color: #1f8b2d !important;
    color: #fff !important;
}

/* ============================================================
   MOBILE: Sticky first column for ALL scrollable tables
   ============================================================
   On mobile, the first column (usually ticker/symbol) stays fixed
   while the rest of the table scrolls horizontally.
   Applied globally to .table-responsive tables.
   ============================================================ */
@media (max-width: 767.98px) {
    .table-responsive th:first-child,
    .table-responsive td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: inherit;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    }
    /* Ensure bg for dark-themed tables */
    .table-dark th:first-child,
    .table-dark td:first-child,
    .bg-dark .table th:first-child,
    .bg-dark .table td:first-child {
        background-color: #212529;
    }
    .table-responsive thead th:first-child {
        z-index: 3;
    }
    /* Light mode override */
    html[data-bs-theme="light"] .table-responsive th:first-child,
    html[data-bs-theme="light"] .table-responsive td:first-child {
        background-color: #f8f9fa;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    }
    html[data-bs-theme="light"] .table-responsive thead th:first-child {
        background-color: var(--bs-primary, #1a99a6);
        color: #fff;
    }
    /* Selected/active row keeps sticky bg */
    .table-responsive tr.selected td:first-child,
    .table-responsive tr.table-active td:first-child {
        background-color: rgba(0, 212, 255, 0.25) !important;
    }
    /* Insider Trades table: sticky Date (col1) + Ticker (col2) */
    #tradesTable th:nth-child(1),
    #tradesTable td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #212529;
        min-width: 85px;
    }
    #tradesTable th:nth-child(2),
    #tradesTable td:nth-child(2) {
        position: sticky;
        left: 85px;
        z-index: 2;
        background-color: #212529;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    }
    #tradesTable thead th:nth-child(1),
    #tradesTable thead th:nth-child(2) {
        z-index: 4;
    }
    /* Cluster table: sticky expand arrow (col1, 30px) + Ticker (col2) */
    #clusterTable th:nth-child(1),
    #clusterTable td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #212529;
        min-width: 30px;
        max-width: 30px;
    }
    #clusterTable th:nth-child(2),
    #clusterTable td:nth-child(2) {
        position: sticky;
        left: 30px;
        z-index: 2;
        background-color: #212529;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    }
    #clusterTable thead th:nth-child(1),
    #clusterTable thead th:nth-child(2) {
        z-index: 4;
    }
    /* Light mode for both insider tables */
    html[data-bs-theme="light"] #tradesTable th:nth-child(1),
    html[data-bs-theme="light"] #tradesTable td:nth-child(1),
    html[data-bs-theme="light"] #tradesTable th:nth-child(2),
    html[data-bs-theme="light"] #tradesTable td:nth-child(2),
    html[data-bs-theme="light"] #clusterTable th:nth-child(1),
    html[data-bs-theme="light"] #clusterTable td:nth-child(1),
    html[data-bs-theme="light"] #clusterTable th:nth-child(2),
    html[data-bs-theme="light"] #clusterTable td:nth-child(2) {
        background-color: #f8f9fa;
    }

    /* Data-table (JS-generated tables in darkpool page) */
    .data-table th:first-child,
    .data-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #212529;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    }
    .data-table thead th:first-child {
        z-index: 3;
    }
}

/* ============================================================
   COMMODITY ROTATION PANEL + RANKING TABLE (redesign 2026-07-20)
   ============================================================ */

.crot-wrap { display: flex; flex-direction: column; gap: 14px; }

.crot-headline { display: flex; gap: 12px; flex-wrap: wrap; }

.crot-phase,
.crot-composite {
    flex: 1 1 200px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left-width: 3px;
    border-radius: 4px;
    padding: 10px 14px;
}
.crot-phase-k {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .55;
}
.crot-phase-v { font-size: 20px; font-weight: 700; margin-top: 2px; }
.crot-phase-note { font-size: 12px; opacity: .6; margin-top: 3px; }

.crot-degraded {
    font-size: 12px;
    color: #ffd166;
    border-left: 3px solid #ffd166;
    padding: 6px 10px;
    background: rgba(255, 209, 102, 0.08);
    border-radius: 3px;
}

/* Four axes side by side on desktop, stacked on narrow screens. */
.crot-axes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 767.98px) { .crot-axes { grid-template-columns: 1fr 1fr; } }

.crot-axis-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px;
}
.crot-axis-label { font-size: 12px; opacity: .75; }
.crot-axis-value { font-size: 15px; font-weight: 700; }
.crot-bar {
    height: 6px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.crot-bar-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }

/* --- ranking table --- */
.spn-commodity-overview table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spn-commodity-overview th,
.spn-commodity-overview td { padding: 4px 8px; text-align: right; white-space: nowrap; }
.spn-commodity-overview th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
    opacity: .65; font-weight: 600; cursor: pointer; user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.spn-commodity-overview th.sortable:hover { opacity: 1; }
.spn-commodity-overview td { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.spn-commodity-overview tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.spn-commodity-overview td.crank { font-weight: 700; color: #fff; text-align: center; }
.spn-commodity-overview td.ctick { font-weight: 700; text-align: left; }
.spn-commodity-overview .crank-pos { color: var(--color_green, #16ff6a); }
.spn-commodity-overview .crank-neg { color: var(--color_red, #ff4455); }
.spn-commodity-overview .table-scroll { overflow-x: auto; }

/* Commodity Rotation table: half height, own scrollbar (2026-08-19).
   The ladder ranks EVERY contract, so at full height it ran ~50 rows and
   pushed the rest of the page a screen and a half down. A max-height plus
   overflow-y keeps the whole ranking reachable without owning the viewport.
   The header is pinned because a scrolled table whose column names have left
   the screen is unreadable -- C.Rank / G.Rank / Rank are indistinguishable
   without them. z-index so the sticky header covers the rows sliding under it
   rather than blending with them. */
.spn-commodity-overview .table-scroll {
    max-height: 44vh;
    overflow-y: auto;
}
.spn-commodity-overview .table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--miv-table-head-bg, #12161c);
}

/* --- commodity equities heatmap --- */
.cstock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 5px;
}
.cstock {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    padding: 6px 4px;
    text-align: center;
    cursor: default;
}
.cstock-t { font-weight: 700; font-size: 12px; }
.cstock-p { font-size: 11px; opacity: .85; margin-top: 1px; }

/* --- money flow (rotation section) --- */
.mflow-wrap {
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 5px; padding: 12px 14px;
    background: rgba(255,255,255,0.02);
}
.mflow-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.mflow-sub { font-weight: 400; font-size: 11px; opacity: .55; margin-left: 8px; }
.mflow-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 767.98px) { .mflow-cols { grid-template-columns: 1fr; gap: 14px; } }
.mflow-class { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mflow-class-tag { padding: 1px 8px; border-radius: 3px; font-size: 12px; font-weight: 700; min-width: 96px; text-align: center; }
.mflow-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.mflow-bar-fill { height: 100%; border-radius: 3px; }
.mflow-class-val { min-width: 54px; text-align: right; font-size: 13px; }
.mflow-chips-head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .55; margin-bottom: 4px; }
.mflow-chips-head.mt { margin-top: 10px; }
.mflow-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mflow-chip { border: 1px solid #555; border-radius: 3px; padding: 2px 7px; font-size: 12px; font-weight: 600; }
/* Chips open the contract in the Overview chart (commodity_rotation_panel.js) */
.mflow-chip-click { cursor: pointer; transition: background .12s, box-shadow .12s; }
.mflow-chip-click:hover,
.mflow-chip-click:focus-visible { background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px currentColor; outline: none; }

/* Trading guidance — bigger and highlighted (rotation phase block) */
#commCycleEquityBias {
    font-size: 1.05rem !important;
    font-weight: 700;
    line-height: 1.4;
    color: #ffe08a;
    display: block;
    margin-top: 4px;
    padding: 8px 12px;
    background: rgba(255, 209, 102, 0.10);
    border-left: 3px solid #ffd166;
    border-radius: 3px;
}

/* --- spreads --- */
/* --- Commodities screener: full-strength text (2026-07-27) -------------
   The page leaned on .text-white-50 / .text-body-secondary / .text-muted for
   section subtitles, labels and notes, which read as washed out against the
   dark cards. Lift them to full-strength body text. Scoped through the
   existing body[data-page] hook so the rest of the site keeps its hierarchy,
   and theme-aware so light mode does not end up white-on-white. Bootstrap's
   utilities carry !important, so these must too. */
body[data-page="screener-commodities"] .text-white-50,
body[data-page="screener-commodities"] .text-body-secondary,
body[data-page="screener-commodities"] .text-muted,
body[data-page="screener-commodities"] small.text-white-50,
body[data-page="screener-commodities"] .small.text-body-secondary { color: #fff !important; }

html[data-bs-theme="light"] body[data-page="screener-commodities"] .text-white-50,
html[data-bs-theme="light"] body[data-page="screener-commodities"] .text-body-secondary,
html[data-bs-theme="light"] body[data-page="screener-commodities"] .text-muted,
html[data-bs-theme="light"] body[data-page="screener-commodities"] small.text-white-50,
html[data-bs-theme="light"] body[data-page="screener-commodities"] .small.text-body-secondary { color: #212529 !important; }

/* Same washed-out effect, done with opacity instead of a utility class. */
body[data-page="screener-commodities"] .spread-legs,
body[data-page="screener-commodities"] .spread-unit,
body[data-page="screener-commodities"] .spread-note,
body[data-page="screener-commodities"] .mflow-sub,
body[data-page="screener-commodities"] .mflow-chips-head { opacity: .92; }

.spread-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.spread-card { border: 1px solid rgba(255,255,255,0.10); border-radius: 5px; padding: 10px 12px; background: rgba(255,255,255,0.02); }
.spread-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.spread-label { font-weight: 700; font-size: 13px; }
.spread-legs { font-size: 10px; opacity: .5; }
.spread-value { font-size: 22px; font-weight: 700; margin: 4px 0 2px; }
.spread-unit { font-size: 12px; opacity: .55; font-weight: 400; }
.spread-spark { width: 100%; height: 34px; display: block; }
.spread-foot { display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; }
.spread-note { font-size: 11px; opacity: .78; margin-top: 5px; line-height: 1.35; }

/* --- Spread playbook (2026-07-27) -----------------------------------
   Cards open a full-width "who profits / who suffers" panel below the
   grid. The grid cells are ~220px, far too narrow to hold the content. */
.spread-card-click { cursor: pointer; transition: border-color .15s, background .15s; }
.spread-card-click:hover { border-color: rgba(46,197,197,0.65); background: rgba(255,255,255,0.05); }
.spread-card-sel { border-color: #2ec5c5 !important; background: rgba(46,197,197,0.10) !important; }
.spread-verdict { font-size: 11px; font-weight: 700; margin-top: 6px; letter-spacing: .02em; }
.spread-more { font-weight: 500; opacity: .75; }

.sp-detail { margin-top: 14px; border: 1px solid rgba(46,197,197,0.35); border-radius: 6px;
             padding: 14px 16px; background: rgba(255,255,255,0.03); }
.sp-detail:empty { display: none; }
.sp-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.sp-detail-title { margin: 0; font-weight: 700; color: #2ec5c5; }
.sp-detail-now { font-size: 12px; font-weight: 700; }
.sp-what { font-size: 12.5px; line-height: 1.5; margin: 6px 0 12px; }
.sp-branch { border-top: 1px solid rgba(255,255,255,0.10); padding-top: 10px; margin-top: 10px; opacity: .55; }
.sp-branch-active { opacity: 1; }
.sp-branch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.sp-dir { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.sp-now { font-size: 11px; font-weight: 700; color: #2ec5c5; }
.sp-headline { font-size: 13px; font-weight: 600; margin: 4px 0 10px; line-height: 1.45; }
.sp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sp-col-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.sp-col-win { color: #16ff6a; }
.sp-col-lose { color: #ff4455; }
.sp-list { list-style: none; padding: 0; margin: 0; }
.sp-item { border-left: 2px solid transparent; padding: 0 0 0 9px; margin-bottom: 10px; }
.sp-win { border-left-color: rgba(22,255,106,0.55); }
.sp-lose { border-left-color: rgba(255,68,85,0.55); }
.sp-who { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.sp-why { font-size: 12px; line-height: 1.45; opacity: .9; margin-top: 2px; }
.sp-tickers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
/* Chips open the company in the Commodity Equities TradingView chart. */
.sp-tk { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
         border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.06);
         cursor: pointer; transition: background .12s, border-color .12s; }
.sp-tk:hover,
.sp-tk:focus-visible { background: rgba(46,197,197,0.22); border-color: #2ec5c5; outline: none; }
.sp-disclaimer { font-size: 11px; line-height: 1.45; opacity: .7; margin: 12px 0 0; font-style: italic; }
@media (max-width: 767.98px) { .sp-cols { grid-template-columns: 1fr; gap: 10px; } }
html[data-bs-theme="light"] .sp-tk { border-color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.05); }

/* --- correlations --- */
/* Contrast slider. Bootstrap's .form-range is width:100%, which would eat the
   whole control row — pin it and keep the readout from reflowing on each step. */
.spn-corr-contrast { width: 150px; flex: 0 0 auto; }
#commodityCorrContrastVal { min-width: 36px; display: inline-block; font-variant-numeric: tabular-nums; }

.corr-matrix-scroll { overflow-x: auto; }
.corr-table { border-collapse: collapse; font-size: 11px; }
.corr-table th { padding: 2px 5px; font-weight: 700; white-space: nowrap; }
.corr-table td.corr-cell { width: 26px; height: 26px; text-align: center; cursor: pointer; border: 1px solid rgba(0,0,0,0.25); color: #eee; font-size: 10px; }
.corr-table td.corr-cell:hover { outline: 2px solid #2ec5c5; outline-offset: -2px; }
.corr-table td.self { cursor: default; }
.corr-chart-tall { height: 620px; border: 1px solid #232a36; border-radius: 4px; }

/* Clickable risk components (analysis_risk.html) — open the FRED viewer. */
.risk-comp-row { cursor: pointer; border-radius: 6px; padding: 2px 6px; margin: 0 -6px; transition: background 0.15s; }
.risk-comp-row:hover { background: rgba(255,255,255,0.07); }
.risk-comp-row:focus-visible { outline: 2px solid #16ff6a; outline-offset: -2px; }

/* ── Commodity taxonomy colors (mirror data/commodity_cache.json `taxonomy`).
   The runtime source of truth is window.CommodityCache (theme-aware); these
   CSS custom properties are the CSS-side single source for any element that
   wants a group / asset-class color without going through the JS. ── */
:root {
    --color_group_energy: #ffffff;  --color_group_metals: #ffd166;
    --color_group_grains: #16ff6a;  --color_group_meats: #ff9ec4;
    --color_group_softs: #a9744f;   --color_group_crypto: #b088ff;
    --color_group_equities: #4d8bff; --color_group_bonds: #ff4455;
    --color_group_forex: #ff9f40;   --color_group_dollar: #ffc98a;
    --color_ac_commodities: #ffffff; --color_ac_equities: #4d8bff;
    --color_ac_bonds: #ff4455;      --color_ac_forex: #ff9f40;
}
:root[data-bs-theme="light"], body.bright-mode {
    --color_group_energy: #111111;  --color_group_metals: #b8860b;
    --color_group_grains: #0f9c41;  --color_group_meats: #d1548a;
    --color_group_softs: #7a4f33;   --color_group_crypto: #6a3fd1;
    --color_group_equities: #1f5fd6; --color_group_bonds: #cc2233;
    --color_group_forex: #d97a1a;   --color_group_dollar: #b5651d;
    --color_ac_commodities: #111111; --color_ac_equities: #1f5fd6;
    --color_ac_bonds: #cc2233;      --color_ac_forex: #d97a1a;
}

/* Commodity Rotation → click-to-chart selection highlight (cells carry inline
   group colors, so a teal underline marks the row without hiding them). */
.comm-rot-row { transition: filter 0.12s; }
.comm-rot-row:hover td { filter: brightness(1.08); }
.comm-rot-row.comm-rot-sel td { box-shadow: inset 0 -3px 0 0 #2ec5c5; }
.corr-chart { height: 220px; border: 1px solid #232a36; border-radius: 4px; }
.corr-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
@media (max-width: 767.98px) { .corr-legs { grid-template-columns: 1fr; } }
.corr-leg-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.corr-leg-chart { height: 170px; border: 1px solid #232a36; border-radius: 4px; }

/* --- commodity equities price heatmap (screener-style ribbon) --- */
.ceq-scroll { overflow-x: auto; }
.ceq-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.ceq-table th { position: sticky; top: 0; background: #0f1622; padding: 4px 8px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .7; white-space: nowrap; }
.ceq-table td { padding: 2px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); white-space: nowrap; }
.ceq-tick { font-weight: 700; }
.ceq-ind { opacity: .7; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.ceq-rank { text-align: center; font-weight: 600; }
.ceq-ribbon { width: 100%; padding: 0 !important; }
.ceq-ribbon-inner { display: flex; height: 16px; }
.ceq-cell { flex: 1 1 auto; min-width: 2px; height: 16px; }
.ceq-pct { text-align: right; font-weight: 700; }
.ceq-row { cursor: pointer; }
.ceq-row:hover { background: rgba(255,255,255,0.05); }
.ceq-row.sel { outline: 2px solid #2ec5c5; outline-offset: -2px; background: rgba(46,197,197,0.08); }

/* ============================================================
   INSIGHT IMAGES + FULLSCREEN LIGHTBOX (overview Market Insight)
   ============================================================ */
/* Cap every insight image to the container. Blog-mode raw <img> tags carry no
   width and overflowed the card on mobile. */
#insightText img.insight-img,
#insightText img {
    /* `min(100%, …)`, not a bare 100%: the page follows the SCREEN width now,
       so on a wide monitor a chart screenshot was rendered two thousand pixels
       across and pushed everything else off the card. The cap keeps the card a
       readable column; full detail is one click away (lightbox + Fullscreen). */
    max-width: min(100%, 820px);
    height: auto;
    object-fit: contain;
}

/* The video preview is a POINTER to the video, not the content of the card:
   a compact rectangle under the heading. `min()` takes whichever is smaller,
   so it is a share of the container on a narrow screen and a fixed width on a
   wide one — never the full bleed. */
#insightText .miv-yt-facade {
    max-width: min(46%, 480px);
    margin: .25rem 0 1.1rem 0;   /* left-aligned: it leads the text, not centres it */
}
.insight-fs-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    font-size: 11px;
    padding: 1px 8px;
    cursor: pointer;
}
.insight-fs-btn:hover { border-color: #fff; color: #fff; }

/* Zoomable lightbox (js/image_lightbox.js) */
#miv-lightbox {
    display: none; position: fixed; inset: 0; z-index: 20000;
    background: rgba(0, 0, 0, 0.94);
    align-items: center; justify-content: center;
    touch-action: none;           /* we handle pinch/pan ourselves */
    overflow: hidden;
}
#miv-lightbox.open { display: flex; }
#miv-lightbox .miv-lb-img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    transform-origin: center center;
    will-change: transform;
    user-select: none; -webkit-user-drag: none;
}
#miv-lightbox .miv-lb-close {
    position: fixed; top: 12px; right: 18px;
    background: none; border: none; color: #fff;
    font-size: 40px; line-height: 1; cursor: pointer; opacity: .8; z-index: 2;
}
#miv-lightbox .miv-lb-close:hover { opacity: 1; }
#miv-lightbox .miv-lb-hint {
    position: fixed; bottom: 14px; left: 0; right: 0; text-align: center;
    color: rgba(255, 255, 255, 0.5); font-size: 12px; pointer-events: none;
}

/* ===== Margin Debt page (2026-08-18) =====================================
   Inline colour tags for key terms in prose, a 3-step peak-warning ladder and
   the Markov stacked bars. Colours go through CSS variables with a light-mode
   override, following the pattern the commodity-group colours already use --
   a tag hard-coded for the dark theme turns unreadable the moment someone hits
   Bright Mode. */
:root {
    --md_tag_risk_bg: rgba(255, 68, 85, .18);  --md_tag_risk_fg: #ff97a0;
    --md_tag_warn_bg: rgba(255, 152, 0, .18);  --md_tag_warn_fg: #ffb964;
    --md_tag_key_bg:  rgba(255, 210, 77, .18); --md_tag_key_fg:  #ffe083;
    --md_tag_calm_bg: rgba(22, 255, 106, .16); --md_tag_calm_fg: #62ffa5;
    --md_tag_info_bg: rgba(33, 150, 243, .18); --md_tag_info_fg: #7cc4fb;
    --md_step_off:    rgba(255, 255, 255, .10);
    --md_step_border: rgba(255, 255, 255, .22);
    --md_step_fg:     rgba(255, 255, 255, .45);
}
:root[data-bs-theme="light"], body.bright-mode {
    --md_tag_risk_bg: rgba(204, 34, 51, .12);  --md_tag_risk_fg: #a81d2b;
    --md_tag_warn_bg: rgba(217, 122, 26, .14); --md_tag_warn_fg: #8f4f06;
    --md_tag_key_bg:  rgba(184, 134, 11, .14); --md_tag_key_fg:  #7a5806;
    --md_tag_calm_bg: rgba(15, 156, 65, .12);  --md_tag_calm_fg: #0b6b2c;
    --md_tag_info_bg: rgba(31, 95, 214, .12);  --md_tag_info_fg: #1a4899;
    --md_step_off:    rgba(0, 0, 0, .08);
    --md_step_border: rgba(0, 0, 0, .18);
    --md_step_fg:     rgba(0, 0, 0, .45);
}

.md-tag {
    padding: .05em .38em;
    border-radius: .28em;
    font-weight: 600;
}
/* `color` needs !important: the tags sit inside Bootstrap `.text-white`
   containers, and Bootstrap's colour UTILITIES carry !important themselves, so
   every tag rendered plain white until this was raised (caught in the browser,
   2026-08-18 - the background applied and the foreground did not, which reads as
   "the tag class is wrong" rather than "something outranks it"). */
.md-tag-risk { background: var(--md_tag_risk_bg); color: var(--md_tag_risk_fg) !important; }
.md-tag-warn { background: var(--md_tag_warn_bg); color: var(--md_tag_warn_fg) !important; }
.md-tag-key  { background: var(--md_tag_key_bg);  color: var(--md_tag_key_fg)  !important; }
.md-tag-calm { background: var(--md_tag_calm_bg); color: var(--md_tag_calm_fg) !important; }
.md-tag-info { background: var(--md_tag_info_bg); color: var(--md_tag_info_fg) !important; }

/* Peak-warning ladder: three steps, yellow -> orange -> red, filled to the
   current level. The step KEEPS its own colour when lit, so level 3 is red
   whether or not 1 and 2 are also lit -- the severity is in the colour, the
   count is in how many are filled. */
.md-steps { display: flex; gap: 6px; }
.md-step {
    flex: 1 1 0;
    height: 30px;
    border-radius: 5px;
    border: 1px solid var(--md_step_border);
    background: var(--md_step_off);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    /* Background, border and text all come from the SAME variable block, so a
       theme switch can never leave a dark number on a dark step. They used to
       sit in two rules and did exactly that. */
    color: var(--md_step_fg);
    transition: background .18s, color .18s;
}
.md-step.on { color: #000; border-color: transparent; }
.md-step-1.on { background: #ffd24d; }
.md-step-2.on { background: #ff9800; }
.md-step-3.on { background: #ff4455; }

/* Markov outlook: one 100 %-wide bar per horizon, segments = states. */
.md-mk-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.md-mk-label { flex: 0 0 3.6rem; font-size: .78rem; opacity: .75; text-align: right; }
.md-mk-bar {
    flex: 1 1 auto;
    display: flex;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--md_step_off);
}
.md-mk-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    transition: flex-basis .2s;
}
.md-mk-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .74rem; }
.md-mk-key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* CDS sovereign table: a row whose last print was not in the 5-year bucket.
   Marked rather than hidden - Italy's last trade is a 0.2-year contract at
   1.5 bp, which beside Argentina's 488 bp reads as a safety ranking and is
   nothing of the kind. */
.cds-sov-nc { display:inline-block; padding:0 5px; border-radius:3px;
              background:rgba(255,140,0,0.15); color:#ff8c00;
              font-size:0.68rem; font-weight:600; vertical-align:middle; }

/* Most Active page: no greyed-out text anywhere (2026-09-15, by request).
   Scoped to the page because the same utility classes and .tnews-hint are
   rendered by shared modules on other pages (the Analysis Chart modal, the
   Overview events tile). var(--bs-body-color) is white in the dark theme and
   black in the light one -- a literal #fff would vanish on the light page. */
body[data-page="most_active"] .text-white-50,
body[data-page="most_active"] .text-body-secondary,
body[data-page="most_active"] .text-muted,
body[data-page="most_active"] .text-secondary { color: var(--bs-body-color) !important; }
body[data-page="most_active"] .tnews-hint { opacity: 1; }
body[data-page="most_active"] .ma-hint-green { color: #16ff6a; }
[data-bs-theme="light"] body[data-page="most_active"] .ma-hint-green { color: #0a8a3a; }
.ma-sent-chart { width: 100%; min-height: 520px; }
.ma-sent-swatch { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 4px; }
.ma-sent-swatch-dash { background: none !important; border-top: 2px dashed var(--bs-body-color); height: 0; }
.ma-study-table { font-size: 0.8rem; --bs-table-bg: transparent; }
.ma-study-table td, .ma-study-table th { font-variant-numeric: tabular-nums; }
.ma-study-table .ma-study-base td { font-weight: 700; border-top: 2px solid var(--bs-border-color); }
.ma-attn-svg { width: 100%; height: auto; max-height: 260px; display: block; }

/* ============================================================
   RANGE STATUS BARS  (most_active.html, 2026-09-17)
   One card per index ETF, one row per timeframe: label, a track
   running 0..200 % of that ticker's own average range with a tick
   at 100 %, and the figure. The tick IS what "normal" means, so it
   is drawn on the track rather than explained in a caption.
   ============================================================ */
.ma-rng-card {
    background: rgba(255, 255, 255, 0.04); border-radius: 8px;
    padding: 0.6rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-bs-theme="light"] .ma-rng-card {
    background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1);
}
.ma-rng-head { font-size: 0.82rem; margin-bottom: 0.35rem; line-height: 1.2; }
.ma-rng-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; margin-bottom: 0.22rem; }
.ma-rng-lab { width: 2.9rem; flex: 0 0 auto; opacity: 0.85; }
.ma-rng-track {
    position: relative; flex: 1 1 auto; height: 0.5rem; border-radius: 3px;
    background: rgba(127, 127, 127, 0.22); overflow: hidden;
}
.ma-rng-track i { display: block; height: 100%; border-radius: 3px; }
/* the 100 % tick: half of a 0..200 track */
.ma-rng-track::after {
    content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px;
    width: 1px; background: currentColor; opacity: 0.55;
}
.ma-rng-val { width: 2.6rem; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }

/* The (i) button and its box moved to css/style.css on 2026-09-17:
   twelve pages use it now and one of them draws no charts. */