/*
 * Base dei controlli di forma.
 *
 * Tailwind arriva dalla CDN, che NON include il plugin forms. Il suo preflight azzera
 * bordi e padding con la regola `button, input, optgroup, select, textarea { padding: 0 }`
 * e `*, ::before, ::after { border-width: 0 }`: una classe come `border-slate-300` finisce
 * per colorare un bordo che non esiste.
 *
 * SPECIFICITA, il punto delicato. La regola del preflight vale 0,0,1 e la CDN la inietta
 * a runtime, quindi dopo questo foglio: a parita di specificita vince lei. Un selettore
 * tipizzato come `input[type="text"]` vale 0,1,1 e passa, ma `select` e `textarea` nudi
 * pareggerebbero e perderebbero, restando alti la meta degli input accanto. Per questo
 * ogni selettore qui sotto e prefissato con `html`: alza la specificita quel tanto che
 * basta a superare il preflight in modo prevedibile, senza ricorrere a !important.
 *
 * Si definisce la base sull'elemento, non con le utility, cosi ogni campo aggiunto in
 * futuro nasce coerente senza doversi ricordare di scrivere `border`. Le utility Tailwind
 * esplicite restano piu specifiche e continuano a vincere dove servono larghezze,
 * spaziature o stati particolari.
 *
 * Esclusi di proposito checkbox e radio: hanno un aspetto nativo che questa base
 * rovinerebbe.
 */
html input[type="text"],
html input[type="email"],
html input[type="url"],
html input[type="tel"],
html input[type="number"],
html input[type="password"],
html input[type="search"],
html input[type="date"],
html input[type="time"],
html input[type="datetime-local"],
html input:not([type]),
html select,
html textarea {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(203 213 225); /* slate-300 */
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    /* Altezza comune: 20px di riga + 16px di padding + 2px di bordo. Senza questo un
       select e un input affiancati non tornano allineati, perche il select calcola
       un'altezza intrinseca propria. */
    min-height: 2.375rem;
    color: rgb(15 23 42); /* slate-900 */
    background-color: #fff;
}

html select {
    padding-right: 2rem;
    /* Il select calcola una riga interna leggermente piu alta dell'input, e un pixel di
       scarto si vede quando i due stanno affiancati: si fissa l'altezza sulla stessa
       misura. box-sizing e border-box, quindi il valore comprende padding e bordo. */
    height: 2.375rem;
}

html textarea {
    line-height: 1.5rem;
    min-height: 4rem;
}

html input[type="text"]:focus,
html input[type="email"]:focus,
html input[type="url"]:focus,
html input[type="tel"]:focus,
html input[type="number"]:focus,
html input[type="password"]:focus,
html input[type="search"]:focus,
html input[type="date"]:focus,
html input[type="time"]:focus,
html input[type="datetime-local"]:focus,
html input:not([type]):focus,
html select:focus,
html textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: rgb(16 185 129); /* emerald-500 */
    box-shadow: 0 0 0 1px rgb(16 185 129);
}

html input:disabled,
html select:disabled,
html textarea:disabled {
    background-color: rgb(248 250 252); /* slate-50 */
    color: rgb(100 116 139); /* slate-500 */
    cursor: not-allowed;
}

/*
 * Overlay a schermo intero: nessun margine ereditato dal flusso.
 *
 * Le regioni contenuto sono spaziate con `space-y-*`, che Tailwind rende come
 * `margin-top` su ogni figlio dopo il primo. La regola non distingue i fuori-flusso:
 * un overlay `fixed inset-0` figlio della regione si ritrova 1.25rem di margine e
 * scende di 20px, lasciando scoperta la striscia in cima allo schermo (la barra
 * superiore resta illuminata sopra il velo) e sbilanciando la modale al centro.
 *
 * SPECIFICITA: `.space-y-5 > :not([hidden]) ~ :not([hidden])` vale 0,3,0. Il selettore
 * qui sotto vale 0,3,1 e passa senza !important, come il resto del foglio. Serve la
 * classe `.fixed` per arrivare a pari conteggio: un dialog in flusso non ce l'ha e
 * conserva le sue spaziature.
 */
html .fixed[role="dialog"][aria-modal="true"] {
    margin: 0;
}