/* Stili per il Calcolatore di Fatica (Compatibile con Tailwind Dark Mode) */

/*
   Queste classi definiscono i colori di sfondo della legenda.
   Sono usate anche da fatigue-calculator.js per colorare le barre.
*/
.legend-low {
    background-color: #22c55e; /* Tailwind bg-green-500 */
    color: white; /* Testo bianco per contrasto */
}
.legend-medium {
    background-color: #f59e0b; /* Tailwind bg-amber-500 (o bg-yellow-500) */
    color: white; /* Testo bianco per contrasto */
}
.legend-high {
    background-color: #ef4444; /* Tailwind bg-red-500 */
    color: white; /* Testo bianco per contrasto */
}
.legend-critical {
    background-color: #8b5cf6; /* Tailwind bg-violet-500 */
    color: white; /* Testo bianco per contrasto */
}

/* Assicura che il testo del punteggio dentro le barre sia leggibile.
   Se la barra è chiara (es. gialla), il testo diventa scuro.
*/
.legend-medium .bar-score {
    color: #1f2937; /* gray-800 */
}

/*
   Migliora la leggibilità della legenda in entrambe le modalità.
   Il file app.js aggiunge 'legend-item'
*/
.legend-item {
    font-weight: 600;
    font-size: 0.75rem; /* text-xs */
    padding: 0.25rem; /* p-1 */
    border-radius: 0.25rem; /* rounded */
}

/*
   Stili per il box del punteggio totale (es. "RISCHIO BASSO")
*/
.risk-indicator {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    color: white;
    transition: all 0.3s ease;
}

/* Colori per il box del punteggio totale */
.risk-low {
    background-color: #22c55e; /* bg-green-500 */
}
.risk-medium {
    background-color: #f59e0b; /* bg-amber-500 */
}
.risk-high {
    background-color: #ef4444; /* bg-red-500 */
}
.risk-critical {
    background-color: #8b5cf6; /* bg-violet-500 */
}

.score-display {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
}

.risk-text {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    text-transform: uppercase;
}

/*
   Stili per le barre dei fattori (il testo interno è gestito da JS ora)
*/
.factor-bar .bar-container {
    background-color: #e5e7eb; /* bg-gray-200 */
}
.dark .factor-bar .bar-container {
    background-color: #374151; /* dark:bg-gray-700 */
}

.bar-fill {
    height: 100%;
    transition: width 0.5s ease-out;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.25rem; /* pr-1 */
}

.bar-score {
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
}
/*
  ==========================================================================
  Fix: Contrasto Input in Dark Mode
  ==========================================================================
  Forza il testo degli input, select e textarea ad essere chiaro in modalità
  notturna per migliorare la leggibilità e il contrasto.
*/

.dark .input-field,
.dark input[type="text"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark select,
.dark textarea {
    color: #f3f4f6; /* Tailwind gray-100 */
    background-color: #374151; /* Tailwind gray-700 */
    border-color: #4b5563; /* Tailwind gray-600 */
}

/* Colore del placeholder in dark mode */
.dark .input-field::placeholder,
.dark input[type="text"]::placeholder,
.dark input[type="number"]::placeholder,
.dark textarea::placeholder {
    color: #9ca3af; /* Tailwind gray-400 */
}