/*
    File: project/static/css/components.css
    Descrizione: Contiene gli stili per componenti riutilizzabili in tutto il sito.
*/

/* Messaggi flash */
.flashes {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
}

.flashes li {
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 4px;
}

.flashes .success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flashes .danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.flashes .info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* --- Stili per i FORM (generali) --- */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    /* --- CORREZIONE: Le etichette usano il colore 'body' (Rosso), non 'secondary' (Blu) --- */
    color: var(--text-color-body);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group textarea,
.form-group select,
.form-group input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color); /* MODIFICA: Usa variabile */
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: var(--query-box-bg-color); /* MODIFICA: Usa la variabile dei filtri per coerenza */
    
    /* --- CORREZIONE: Il testo nei campi usa la variabile 'body' (Rosso) --- */
    color: var(--text-color); /* MODIFICA: Usa il colore Testo Base (Nero) */
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.form-row .form-group {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    min-width: 150px;
    margin-bottom: 0;
}

.form-actions-center {
    text-align: center;
    margin-top: 30px;
}
.form-actions-center .button {
    width: 100%;
}

/* --- INIZIO AGGIUNTA: Stili per l'Interruttore On/Off (Toggle Switch) --- */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3; /* Blu */
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(22px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* --- FINE AGGIUNTA --- */

/* =============================================== */
/* == Stile per Campi Password con Icona Interna == */
/* =============================================== */

/* 1. Il Contenitore */
.password-wrapper {
    /* Rende questo contenitore il punto di riferimento per l'icona */
    position: relative;
}

/* 2. L'Icona (l'occhio) */
.toggle-password {
    /* Posiziona l'icona in modo "assoluto" rispetto al contenitore */
    position: absolute;

    /* La sposta a 10px dal bordo destro */
    right: 10px;

    /* La centra perfettamente in verticale */
    top: 50%;
    transform: translateY(-50%);

    /* Rende il cursore una manina per indicare che è cliccabile */
    cursor: pointer;
    color: var(--text-color-secondary);
}

/* 3. Il Campo di Testo (fondamentale) */
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    /* Aggiunge spazio a destra nel campo di testo per non far scrivere
       l'utente sotto l'icona dell'occhio. */
    padding-right: 40px;
}
/* =============================================== */
/* === AUTOCOMPLETE UNIFICATO (Shared Component) === */
/* =============================================== */

/* 1. Contenitore Esterno */
.autocomplete-suggestions, 
.autocomplete-items { /* Supporto per vecchia nomenclatura (Asset/History) */
    position: absolute;
    min-width: 100%; /* Larghezza MINIMA pari all'input */
    width: max-content; /* Si allarga automaticamente se il testo è lungo */
    white-space: nowrap; /* Impedisce al testo di andare a capo */
    z-index: 9999;
    top: 100%; /* FIX: Posiziona esattamente SOTTO l'input */
    left: 0;   /* FIX: Allinea a sinistra */
}



/* 3. Singola Voce */
.autocomplete-item-entry,
.autocomplete-items div { /* Fallback per Asset/History */
    padding: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    border-bottom: 1px solid #f0f0f0;
    color: var(--text-color, #333);
    background-color: #fff;
    transition: background-color 0.2s;
}

.autocomplete-item-entry:last-child {
    border-bottom: none;
}

/* 4. Stato Hover e Active */
.autocomplete-item-entry:hover,
.autocomplete-active,
.autocomplete-items div:hover {
    background-color: #eef2ff !important; /* Colore evidenziazione (Celeste Chiaro) */
    color: #1e40af;
}

/* Evidenziazione del testo trovato */
.autocomplete-item-entry strong {
    color: var(--primary-color, #2563eb);
    font-weight: 700;
}