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