/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        inputs.css
 * Path:        public/css/inputs.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce lo stile base di input testuali, select, textarea e checkbox,
 * usati sia dentro form (ActiveForm/ActiveField) sia fuori da un <form>
 * vero e proprio (es. i controlli generati da FilterBar).
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: controlli
 * di input, trasversali a qualunque tipo di pagina.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato dalle view;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: controlli input
 * ========================================================== */

/* Stile base per input testuali, select e textarea. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: 6px 10px;
    font: inherit;
    background-color: var(--color-on-primary);
    color: var(--color-text);
    min-height: 35px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Evidenziazione dei controlli obbligatori modificabili. */
input[type="text"]:required,
input[type="password"]:required,
input[type="email"]:required,
input[type="date"]:required,
input[type="time"]:required,
input[type="number"]:required,
textarea:required,
select:required
{
    background-color: var(--color-bg-required);
}

/* Stato obbligatorio disabilitato, riportato al colore neutro. */
input[disabled]:required,
select[disabled]:required,
textarea[disabled]:required {
    background-color: var(--color-bg-disabled) !important;
}

/* Stato focus comune dei controlli editabili. */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(51, 143, 59, 0.16);
    outline: none;
}

/* Spaziatura base dei checkbox nativi. */
input[type="checkbox"] {
    margin-bottom: 15px;
}

/* Textarea ridimensionabile verticalmente. */
textarea {
    resize: vertical;
}

/* ==========================================================
 * SEZIONE: campo password con pulsante "mostra/nascondi"
 * (aggiunto da js/password-toggle.js)
 * ========================================================== */

/* Contenitore del campo password e del suo pulsante. */
.password-field {
    position: relative;
    display: block;
    width: 100%;
}

/* Lascia spazio al pulsante a destra, dentro il campo. */
.password-field > input {
    padding-right: 40px;
    box-sizing: border-box;
}

/* Pulsante occhio, sovrapposto al bordo destro del campo. I selettori sono
 * piu' specifici di quelli globali dei pulsanti (buttons.css) in ogni stato,
 * cosi' resta un'icona senza sfondo, ombra o movimento. */
.password-field > .password-toggle,
.password-field > .password-toggle:hover,
.password-field > .password-toggle:focus {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    font-size: inherit;
    color: var(--color-text-muted);
    cursor: pointer;
}

.password-field > .password-toggle:hover {
    color: var(--color-text);
}

.password-field > .password-toggle:focus-visible {
    outline: 2px solid var(--color-success);
    outline-offset: -2px;
}

/* Edge mostra un proprio occhio nei campi password: evita il doppione. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}