/* Light theme – pagina Portfolio Optimizer
   Non tocca i pulsanti Plotly e non cambia i template dei grafici (restano plotly_dark)
*/
#theme-root.light { 
  background: #EBF0F6;          /* sfondo pagina chiaro, non bianco piatto */
  color: #0b1727;
}

/* wrapper della pagina */
#theme-root.light #portfolio-root{
  background: transparent;
  color: #0b1727;
}

/* --- SIDEBAR SINISTRA (forza bianco) --- */
#theme-root.light #portfolio-root > div:first-child{
  background: #ffffff !important;             /* bianco pieno */
  color: #0b1727 !important;
  border-right: 1px solid #d0d7e2 !important;
}

/* titoli e testi nella sidebar */
#theme-root.light #portfolio-root > div:first-child h1,
#theme-root.light #portfolio-root > div:first-child h2,
#theme-root.light #portfolio-root > div:first-child h3,
#theme-root.light #portfolio-root > div:first-child h4,
#theme-root.light #portfolio-root > div:first-child label,
#theme-root.light #portfolio-root > div:first-child .dash-checkbox label,
#theme-root.light #portfolio-root > div:first-child .dash-radio label,
#theme-root.light #portfolio-root > div:first-child .Select-control,
#theme-root.light #portfolio-root > div:first-child .Select-value-label,
#theme-root.light #portfolio-root > div:first-child .Select--multi .Select-value{
  color: #0b1727 !important;
}

/* input, select, textarea nella sidebar */
#theme-root.light #portfolio-root > div:first-child input[type="text"],
#theme-root.light #portfolio-root > div:first-child input[type="number"],
#theme-root.light #portfolio-root > div:first-child .dash-input,
#theme-root.light #portfolio-root > div:first-child textarea,
#theme-root.light #portfolio-root > div:first-child .Select-control{
  background: #ffffff !important;
  color: #0b1727 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

/* pulsanti nella sidebar (lascia i colori originali ma corregge testo/scorci) */
#theme-root.light #portfolio-root > div:first-child button{
  color: #0b1727;
  border-color: #cbd5e1;
}
#theme-root.light #portfolio-root > div:first-child button[style*="background-color"]{
  /* non forzo i bottoni già colorati (cyan, rosso) */
  color: #0b1727;
}

/* upload box tratteggiato */
#theme-root.light #portfolio-root > div:first-child [id^="po-upload"]{
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

/* linee orizzontali */
#theme-root.light #portfolio-root > div:first-child hr{
  border: none;
  border-top: 1px solid #e2e8f0;
}

/* testo “status” giallo */
#theme-root.light #po-status { color:#7a5d00; }

/* --- COLONNA DESTRA (contenuto) --- */
#theme-root.light #portfolio-root > div:nth-child(2){
  background: #F5F8FC;           /* leggermente diverso dal body per staccare */
  color: #0b1727;
}

/* tabelle statistiche a destra: testo scuro su fondo chiaro */
#theme-root.light #portfolio-root table{
  color: #0b1727 !important;
  background: transparent;
}
#theme-root.light #portfolio-root table th{
  border-bottom: 1px solid #e2e8f0;
  color: #0b1727;
}
#theme-root.light #portfolio-root table td{
  border-bottom: 1px solid #eef2f7;
}

/* --- GRAFICI ---
   Non cambiamo i template (restano plotly_dark).
   Solo i testi di contesto del DOM esterno restano scuri;
   le aree dei grafici e le griglie continuano nere come da template.
*/
#theme-root.light .js-plotly-plot .plotly .bg,
#theme-root.light .js-plotly-plot .plotly .subplot{
  /* nessuna forzatura qui: lasciamo il dark del template */
}

/* legenda/etichette del grafico: non toccare (restano scure perché gestite dal template plotly_dark) */