/* =========================================================
   Light mode globale (vale per TUTTE le pagine)
   Requisito: il wrapper esterno ha id="theme-root" e la
   classe "light" quando l'utente seleziona il tema chiaro.
   NON modifica i grafici Plotly (restano dark se il
   template del grafico è plotly_dark).
   ========================================================= */

/* Sfondo pagina chiaro e testo scuro */
#theme-root.light {
  background: #EBF0F6;   /* chiaro soft, non bianco puro */
  color: #0b1727;
}

/* Contenitore principale di pagina (colonne, ecc.) */
#theme-root.light > * {
  color: #0b1727;
}

/* --- Pannelli/box con sfondo scuro inline -> forzali chiari ---
   Copre sidebar e card che hanno style in-line tipo #121212 o #1f1f1f
   (senza toccare i canvas Plotly) */
#theme-root.light [style*="#121212"],
#theme-root.light [style*="rgb(18, 18, 18)"],
#theme-root.light [style*="#1f1f1f"],
#theme-root.light [style*="#1F1F1F"] {
  background-color: #ffffff !important;
  color: #0b1727 !important;
  border-color: #cbd5e1 !important;
}

/* >>> NEW (A): pannelli con inline #0d1117 / rgb(13,17,23) – es. pagina Bear-Market FR */
#theme-root.light [style*="#0d1117"],
#theme-root.light [style*="#0D1117"],
#theme-root.light [style*="rgb(13, 17, 23)"] {
  background-color: #ffffff !important;
  color: #0b1727 !important;
  border-color: #cbd5e1 !important;
}
/* elementi interni ereditano il colore corretto */
#theme-root.light [style*="#0d1117"] *,
#theme-root.light [style*="#0D1117"] *,
#theme-root.light [style*="rgb(13, 17, 23)"] * {
  color: inherit;
}

/* >>> NEW (B): input/datepicker dentro box scuri forzati chiari */
#theme-root.light [style*="#0d1117"] input,
#theme-root.light [style*="#0D1117"] input,
#theme-root.light [style*="rgb(13, 17, 23)"] input,
#theme-root.light .DateInput,
#theme-root.light .SingleDatePickerInput,
#theme-root.light .DateInput_input {
  background: #ffffff !important;
  color: #0b1727 !important;
  border-color: #cbd5e1 !important;
}
#theme-root.light .DateInput_input {
  box-shadow: none !important;
}

/* >>> NEW (C): testi delle etichette DatePicker */
#theme-root.light .SingleDatePickerInput__withBorder {
  border: 1px solid #cbd5e1 !important;
}
#theme-root.light .CalendarDay__default {
  color: #0b1727 !important;
}

/* >>> NEW (D): sidebar fisse con inline style (indipendente dal colore impostato)
   Forza lo sfondo chiaro delle sidebar con position:fixed e border-right */
#theme-root.light div[style*="position: fixed"][style*="border-right"],
#theme-root.light div[style*="position:fixed"][style*="border-right"],
#theme-root.light div[style*="position: fixed"][style*="borderRight"],
#theme-root.light div[style*="position:fixed"][style*="borderRight"]{
  background-color: #ffffff !important;
  color: #0b1727 !important;
  border-right-color: #cbd5e1 !important;
}

/* E i contenuti dentro ereditano il colore corretto */
#theme-root.light div[style*="position: fixed"][style*="border-right"] * ,
#theme-root.light div[style*="position:fixed"][style*="border-right"] * ,
#theme-root.light div[style*="position: fixed"][style*="borderRight"] * ,
#theme-root.light div[style*="position:fixed"][style*="borderRight"] * {
  color: inherit;
}

/* Leggera variazione di sfondo per la colonna “contenuti” a destra
   quando c’è una sidebar fissa a sinistra */
#theme-root.light [style*="margin-left"] {
  background: #F5F8FC;
}

/* Titoli, etichette e testo generico */
#theme-root.light h1, 
#theme-root.light h2, 
#theme-root.light h3, 
#theme-root.light h4,
#theme-root.light label,
#theme-root.light p, 
#theme-root.light span,
#theme-root.light .dash-checkbox label,
#theme-root.light .dash-radio label {
  color: #0b1727 !important;
}

/* Controlli input/select/textarea */
#theme-root.light input[type="text"],
#theme-root.light input[type="number"],
#theme-root.light input[type="search"],
#theme-root.light .dash-input,
#theme-root.light textarea,
#theme-root.light .Select-control,
#theme-root.light .Select-menu-outer,
#theme-root.light .Select-value-label {
  background: #ffffff !important;
  color: #0b1727 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

/* Pulsanti (lascia i bottoni “colorati” così come sono; sistema solo i neutri) */
#theme-root.light button {
  color: #0b1727;
  border-color: #cbd5e1;
}
/* Mantieni leggibili i bottoni inline colorati (cyan/rosso ecc.) */
#theme-root.light button[style*="background"] {
  color: #0b1727;
}

/* Slider/Upload/Divider */
#theme-root.light .rc-slider,
#theme-root.light .rc-slider-rail { background-color: #e2e8f0 !important; }
#theme-root.light .rc-slider-track { background-color: #94a3b8 !important; }
#theme-root.light [class*="upload"], 
#theme-root.light [id*="upload"] {
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
#theme-root.light hr {
  border: none;
  border-top: 1px solid #e2e8f0;
}

/* Tabelle HTML (non Dash DataTable) a testo scuro */
#theme-root.light table {
  color: #0b1727 !important;
  background: transparent;
}
#theme-root.light table th {
  border-bottom: 1px solid #e2e8f0;
  color: #0b1727;
}
#theme-root.light table td {
  border-bottom: 1px solid #eef2f7;
}

/* Messaggi/status gialli */
#theme-root.light [id*="status"], 
#theme-root.light [id*="status"] * {
  color: #7a5d00 !important;
}

/* ===== Plotly: NON cambiare il canvas dei grafici =====
   Lasciare i grafici col loro template (spesso plotly_dark) */
#theme-root.light .js-plotly-plot .plotly .bg,
#theme-root.light .js-plotly-plot .plotly .subplot { 
  /* nessuna forzatura: i grafici restano dark */
}

/* (Opzionale) Se vuoi forzare legenda e tick in scuro, decommenta:
#theme-root.light .js-plotly-plot .plotly text,
#theme-root.light .js-plotly-plot .plotly .legend text,
#theme-root.light .js-plotly-plot .plotly .xtick text,
#theme-root.light .js-plotly-plot .plotly .ytick text { 
  fill: #0b1727 !important; 
}
*/

/* --- Opt-out: metti class="keep-dark" su un contenitore per NON schiarirlo --- */
#theme-root.light .keep-dark,
#theme-root.light .keep-dark * {
  background: #121212 !important;
  color: #ffffff !important;
  border-color: #333 !important;
}

/* Light: rendi leggibile il blocco di testo statistico con inline style bianco */
#theme-root.light #stats-output,
#theme-root.light [id="stats-output"] {
  color: #0b1727 !important;
  background: #ffffff !important; /* opzionale ma utile se lo vuoi su fondo bianco */
}