.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);
}

#app-theme-wrapper.theme-light .responsive-container > div {
  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; }