.gold-radio-group input[type="radio"] {
  accent-color: #E2B04A !important;
}

.gold-radio-group .form-check-input {
  border-color: #E2B04A !important;
}

.gold-radio-group .form-check-input:checked {
  background-color: #E2B04A !important;
  border-color: #E2B04A !important;
}

.gold-radio-group .form-check-input:focus {
  border-color: #E2B04A !important;
  box-shadow: 0 0 0 0.2rem rgba(226, 176, 74, 0.25) !important;
}

.theme-dark {
  --ost-bg-main: #020617;
  --ost-bg-panel: linear-gradient(180deg, rgba(30,41,59,0.78) 0%, rgba(15,23,42,0.88) 100%);
  --ost-bg-card: #0f172a;
  --ost-bg-soft: rgba(255,255,255,0.03);
  --ost-text-main: #f8fafc;
  --ost-text-muted: rgba(255,255,255,0.72);
  --ost-border: rgba(148,163,184,0.24);
  --ost-gold: #E2B04A;
  --ost-panel-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 30px rgba(0,0,0,0.30);
}

.theme-light {
  --ost-bg-main: #f8fafc;
  --ost-bg-panel: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --ost-bg-card: #ffffff;
  --ost-bg-soft: #f1f5f9;
  --ost-text-main: #0f172a;
  --ost-text-muted: #64748b;
  --ost-border: #cbd5e1;
  --ost-gold: #c69214;
  --ost-panel-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 24px rgba(15,23,42,0.08);
}

#app-theme-wrapper.theme-dark {
  background: var(--ost-bg-main);
  color: var(--ost-text-main);
}

#app-theme-wrapper.theme-light {
  background: var(--ost-bg-main);
  color: var(--ost-text-main);
}

/* [2026-11-12] header a immagine (hero): nessuna card intorno, anche nel tema chiaro */
#app-theme-wrapper .responsive-container > div.ost-hero-wrap,
#app-theme-wrapper.theme-light .responsive-container > div.ost-hero-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#app-theme-wrapper.theme-light .responsive-container > div:not(.ost-hero-wrap) {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

#app-theme-wrapper.theme-light h2 {
  color: #0f172a !important;
}

#app-theme-wrapper.theme-light span,
#app-theme-wrapper.theme-light div {
  color: inherit;
}

/* ==========================================================================
   FILTER PRESETS - dropdown
   --------------------------------------------------------------------------
   PERCHE' IL NOME NON SI LEGGEVA (diagnosi corretta al terzo tentativo):
   Dash 4 disegna il CONTROLLO CHIUSO con sfondo CHIARO in entrambi i temi.
   L'app pero' imposta globalmente "color: var(--ost-text-main)" sul wrapper,
   che in tema DARK e' bianco: il valore del dropdown lo eredita e diventa
   bianco su bianco. Gli altri filtri non ne soffrono perche' sono
   multi-select e mostrano "chip" con colori propri.
   => il testo va forzato SCURO, non chiaro. Colori fissi e non variabili di
   tema, proprio perche' lo sfondo del controllo NON cambia col tema.

   ALTRA REGOLA: mai regole globali sul menu (.dash-dropdown-content). Dash lo
   monta in un portal fuori da #app-theme-wrapper, dove le --ost-* non
   esistono: si otterrebbe un menu trasparente su TUTTI i filtri.
   ========================================================================== */
.presets-dropdown {
  font-size: 11px;
}

/* IL FIX: testo scuro sul controllo chiaro, in entrambi i temi.
   Il selettore discendente '*' copre anche gli elementi annidati che Dash
   genera dentro il contenitore del valore. */
.presets-dropdown .dash-dropdown-value,
.presets-dropdown .dash-dropdown-value *,
.presets-dropdown .dash-dropdown-value-item,
.presets-dropdown .dash-dropdown-value-item * {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.presets-dropdown .dash-dropdown-placeholder,
.presets-dropdown .dash-dropdown-placeholder * {
  color: #64748b !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px;
}

.presets-dropdown .dash-dropdown-wrapper {
  min-height: 32px;
}

/* Barra dei tab principali: al passaggio del mouse i tab NON attivi si schiariscono (testo
   bianco in tema scuro), come i mini tab del tab FILTERS. Il tab attivo (fondo oro) non cambia.
   Gli stili dei tab sono inline (App.py, MAIN_TAB_BTN_*_STYLE): da qui serve !important.
   La classe ost-main-tab-active la imposta apply_main_tab sul tab selezionato. */
.ost-main-tab:not(.ost-main-tab-active):hover,
.ost-main-tab:not(.ost-main-tab-active):hover i,
.ost-main-tab:not(.ost-main-tab-active):hover span {
  color: var(--ost-text) !important;
  text-decoration: none !important;
}

/* Barra dei tab principali sempre visibile durante lo scroll verticale (computer e telefono).
   Su computer lo scroll avviene dentro la colonna dell'app (altezza fissa, overflow auto):
   "sticky" la aggancia in cima a quella colonna. Il fondo pieno copre il contenuto che scorre
   sotto; z-index sopra grafici e tabelle (ma sotto modali e tooltip). */
#main-tabs-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ost-bg, #050a16);
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: -6px;
}
/* I contenuti dei tab (grafici Plotly, menu a tendina) usano z-index alti: li si chiude ognuno nel
   proprio contesto, cosi' scorrendo passano SOTTO la barra dei tab senza bisogno di alzarla sopra
   modali e tooltip dell'app. */
[id^="tab-pane-"] {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Day Tracker: pallino rosso LIVE con un leggero battito */
@keyframes ost-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.ost-live-dot { animation: ost-live-pulse 1.6s ease-in-out infinite; }

/* Preset combinati (2+ preset scelti): banner sotto il dropdown e filtri bloccati.
   La classe ost-presets-combined la mette _presets_combined_ui su #tab-pane-filters. */
.ost-presets-banner {
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(226, 176, 74, 0.45);
  border-radius: 8px;
  background: rgba(226, 176, 74, 0.06);
  font-size: 10.5px;
  color: var(--ost-text);
  line-height: 1.5;
}
.ost-preset-chip {
  display: inline-block;
  min-width: 15px;
  padding: 0 4px;
  margin-right: 4px;
  border: 1px solid #E2B04A;
  border-radius: 8px;
  color: #E2B04A;
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}
#tab-pane-filters.ost-presets-combined #filters-group-profile,
#tab-pane-filters.ost-presets-combined #filters-group-technical {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

/* Day Tracker, LEADERBOARD: nessuna evidenziazione al passaggio del mouse (tabella solo da leggere) */
#dt-lb-table .dash-spreadsheet-inner { --hover: transparent !important; }
#dt-lb-table .dash-spreadsheet-inner tr:hover { background-color: transparent !important; }

/* =========================================================================================
   [2026-11-12] HEADER
   Riga 1: fascia bassa a tutta larghezza (immagine ost_header_band.webp a sinistra, sfondo scuro con griglia),
           "Signed in as" in alto a destra.
   Riga 2: stato dei dati, tema, vista e pulsanti.
   ========================================================================================= */
.ost-hero-top {
  height: clamp(104px, 9vw, 140px) !important;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(rgba(30, 58, 74, 0.16) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(30, 58, 74, 0.16) 1px, transparent 1px) 0 0 / 34px 34px,
    #080d18 !important;
}
.ost-hero-img { display: block; height: 100%; width: auto; max-width: none; }
.ost-hero-profile {
  /* [2026-11-12] senza riquadro: avatar e nome direttamente sullo sfondo scuro della fascia */
  position: absolute; top: 12px; right: 16px; z-index: 2;
}
/* sopra lo sfondo scuro "Signed in as" resta chiaro anche nel tema chiaro (il nome resta oro) */
.ost-hero-profile > div > div:last-child > div:first-child { color: #94a3b8 !important; }
@media (max-width: 767.98px) {
  .ost-hero-top { height: 84px !important; }
  .ost-hero-profile { top: 6px; right: 8px; transform: scale(0.8); transform-origin: top right; }
}

/* =========================================================================================
   [2026-11-12] DESIGN SYSTEM · FONT E MENU (mock assets/Header_Menu/Menu.png)
   - Questrial  = font "display": menu, tab, sotto-tab, titoli delle sezioni, intestazioni di tabella,
                  etichette. Geometrico, lo stesso carattere dell'header; maiuscolo spaziato.
   - Inter      = font dei testi e dei numeri (cifre tabellari: le colonne restano allineate).
   ========================================================================================= */
body {
  --ost-font-display: 'Questrial', 'Inter', system-ui, sans-serif;
  --ost-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* i colori dei menu (--ost-menu-*) arrivano dal tema attivo: App.py, THEMES -> get_app_root_style (#app-root) */

/* testi e numeri */
body, #app-theme-wrapper {
  font-family: var(--ost-font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* --- menu (tab principali e barra in alto): hover come nel mock ------------------------- */
.ost-main-tab:not(.ost-main-tab-active):hover,
.ost-main-tab:not(.ost-main-tab-active):hover i,
.ost-main-tab:not(.ost-main-tab-active):hover span {
  color: var(--ost-menu-text-hover) !important;
}
.ost-main-tab:not(.ost-main-tab-active):hover { background: rgba(148, 163, 184, 0.06) !important; }
.ost-main-tab i, .topbar-action-btn i { font-size: 13px; opacity: 0.9; }
.ost-topbar-sep { background: var(--ost-menu-border) !important; height: 22px !important; margin: 0 6px !important; }

/* stato dei dati */
.ost-freshness { font-family: var(--ost-font-ui); }
.ost-freshness .ost-fresh-time { color: var(--ost-menu-text-hover); font-weight: 600; }
.ost-freshness #data-freshness-dot { box-shadow: 0 0 8px currentColor; }

/* DARK / LIGHT con interruttore turchese */
.ost-theme-lbl {
  font-family: var(--ost-font-display); font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--ost-menu-text);
}
.ost-topbar-menu:not(:has(#theme-toggle:checked)) .ost-theme-lbl-dark,
.ost-topbar-menu:has(#theme-toggle:checked) .ost-theme-lbl-light { color: var(--ost-menu-text-hover); }
#theme-toggle.form-check-input, #theme-toggle .form-check-input, .form-switch #theme-toggle {
  width: 2.2em; height: 1.15em; cursor: pointer;
  background-color: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.45);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2322d3ee'/%3e%3c/svg%3e");
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.15);
}
#theme-toggle:checked, #theme-toggle .form-check-input:checked {
  background-color: rgba(226, 176, 74, 0.15);
  border-color: rgba(226, 176, 74, 0.6);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23E2B04A'/%3e%3c/svg%3e");
}

/* --- titoli delle sezioni (card richiudibili, MARKET CONTEXT, SECTOR BIAS, ...) ----------- */
.card details > summary,
.card details > summary span:not(.fa):not(.fas):not(.far) {
  font-family: var(--ost-font-display) !important;
}
.card details > summary span:not(.fa):not(.fas):not(.far) {
  font-weight: 400 !important;
  letter-spacing: 1.8px !important;
}

/* --- intestazioni delle tabelle -------------------------------------------------------------- */
.dash-spreadsheet-container th,
.dash-spreadsheet-container .column-header-name,
table thead th {
  font-family: var(--ost-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
}

/* --- sotto-tab (ORDERS · LIVE TRACKER · CHALLENGE SIM, filtri, track record, ...) ------------ */
.ost-fgrp-btn {
  font-family: var(--ost-font-display) !important;
  font-weight: 400 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
}