/*
 * I campi «material» di Metronic (`form-md-line-input`: una linea sotto il campo al posto del
 * riquadro, un'etichetta che sale quando si scrive) portano gli stessi contrasti dei campi
 * standard: la linea ad almeno 3:1 (WCAG 2.1 AA 1.4.11), etichette, segnaposto e testo d'aiuto ad
 * almeno 4,5:1 (1.4.3). DGWGEOWORK-10139, audit TxDOT §2.6, indice DGWGEOWORK-9114.
 *
 * PERCHE' SERVE UN FOGLIO A PARTE.
 * `fieldBorder.css` e `textContrast.css` correggono bordo e segnaposto dei campi con selettori
 * nudi, (0,1,0): Metronic li ridichiara per i campi material con (0,3,0) e vince. Sono 419 usi
 * in `App/`, 60 nella sola modale anagrafica («Project Information» -> «Create New Legal
 * Entity» sul percorso TxDOT).
 *
 * MISURATO (formula di contrasto WCAG, sugli stili calcolati della modale anagrafica vera nell'app
 * in esecuzione, campo «Company Name», 20/10/2026, in locale):
 *
 *   elemento                              prima                  dopo
 *   -----------------------------------   --------------------   ---------------------
 *   linea del campo                       #c2cad8   1,65         #767676   4,54
 *   barra del campo a fuoco/compilato     #36c6d3   2,06         #0f7c8a   4,92
 *   etichetta (a riposo, a fuoco)         #888      3,54         #595959   7,00
 *   etichetta flottante, segnaposto       #999      2,85         #6b6b6b   5,33
 *   testo d'aiuto a campo attivo          #36c6d3   2,06         #595959   7,00
 *   spunta di md-checkbox, pallino md-radio #36c6d3 2,06         #0f7c8a   4,92
 *   testo dello stato info (.has-info)    #327ad5   4,30         #0166cc   5,56
 *
 * I COLORI SONO VARIABILI CHE ESISTONO GIA'.
 * Nessun grigio nuovo: la linea e' `--gw-field-border-color` (fieldBorder.css), le etichette
 * `--text-muted-color` e il segnaposto `--input-placeholder-color` (textContrast.css), come i campi
 * standard. Il perche' dei valori e' scritto nei loro file. Il blu del testo dello stato info e'
 * `--action-button-color` di `big.css`, il blu dei pulsanti d'azione. Per l'azzurro di Metronic (barra,
 * spunta, pallino) si usa `--light-blue-for-tabs` di `big.css`, lo stesso verde acqua che la modale
 * anagrafica disegna gia' sotto le tendine compilate (`big.css`, «ui-select css patch for
 * legalEntity modal»): la barra di un campo di testo e quella di una tendina, una accanto
 * all'altra, hanno cosi' lo stesso colore. Tiene anche sui pannelli grigi (4,51:1 su #f5f5f5).
 * Ogni `var()` porta il valore di ripiego, perche' una variabile indefinita non ricade sul valore
 * precedente: rende la dichiarazione invalida e il colore viene ereditato.
 *
 * SOLO IL COLORE (trappola T3, DGWGEOWORK-9606).
 * La scatola dell'etichetta flottante e' gia' stata la trappola di DGWGEOWORK-9606: cio' che cambia
 * l'altezza di un `.form-group` fa scivolare la barra d'errore sotto il messaggio. Qui si toccano
 * solo `color`, `border-*-color` e `background-color`: mai posizione, misure, spessore o stile.
 *
 * SPECIFICITA'.
 * Le regole ripetono i selettori di `metronic/assets/global/css/components-md.css` e vincono per
 * ordine di sorgente: in `app.min.css` la cartella `Common/Styles` viene dopo Metronic. Cosi' il CSS
 * di un ente, appeso dopo il bundle, continua a vincere con lo stesso selettore (Munich, Stuttgart
 * e VTrans ridisegnano la barra cosi'). Niente `!important`.
 * Tre selettori fanno eccezione e alzano la specificita' di una classe con
 * `:not(.has-error, .has-warning, .has-success, .has-info)`: l'etichetta a riposo, l'etichetta dei
 * form orizzontali e la linea del gruppo con addon. Lo stesso selettore di Metronic pareggerebbe le
 * regole degli stati (`.form-md-line-input.has-error label`, (0,3,1), anche in `errorContrast.css`)
 * e, venendo dopo nella cartella, le batterebbe: un'etichetta in errore tornerebbe grigia.
 * Escludendo gli stati, quelle regole restano le uniche a decidere il colore di un campo in errore
 * o in uno stato: questo foglio non tocca l'errore (il suo rosso e' di DGWGEOWORK-9110 / 10135) e
 * dello stato info corregge solo il testo, in fondo al foglio.
 */

/* La linea del campo, a riposo e in sola lettura (tratteggiata, come prima). */
.form-group.form-md-line-input .form-control {
    border-bottom-color: var(--gw-field-border-color, #767676);
}

.form-group.form-md-line-input .form-control[readonly], .form-group.form-md-line-input .form-control[disabled],
fieldset[disabled] .form-group.form-md-line-input .form-control {
    border-bottom-color: var(--gw-field-border-color, #767676);
}

.form-group.form-md-line-input:not(.has-error, .has-warning, .has-success, .has-info) .input-group .input-group-addon {
    border-bottom-color: var(--gw-field-border-color, #767676);
}

/* La barra che si accende sotto il campo a fuoco o compilato. */
.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label:after,
.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .form-control-focus:after,
.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label:after,
.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .form-control-focus:after {
    background-color: var(--light-blue-for-tabs, #0f7c8a);
}

/*
 * Il segnaposto. Selettori vendor in regole SEPARATE: un browser che non ne riconosce uno scarta
 * l'intera lista (stessa ragione di textContrast.css). `opacity: 1` c'e' gia' in Metronic.
 */
.form-group.form-md-line-input .form-control::placeholder {
    color: var(--input-placeholder-color, #6b6b6b);
}

.form-group.form-md-line-input .form-control::-webkit-input-placeholder {
    color: var(--input-placeholder-color, #6b6b6b);
}

.form-group.form-md-line-input .form-control::-moz-placeholder {
    color: var(--input-placeholder-color, #6b6b6b);
}

.form-group.form-md-line-input .form-control:-ms-input-placeholder {
    color: var(--input-placeholder-color, #6b6b6b);
}

/* L'etichetta: a riposo, nei form orizzontali, e salita sopra il campo a fuoco o compilato. */
.form-group.form-md-line-input:not(.has-error, .has-warning, .has-success, .has-info) .form-control ~ label,
.form-horizontal .form-group.form-md-line-input:not(.has-error, .has-warning, .has-success, .has-info) > label {
    color: var(--text-muted-color, #595959);
}

.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label,
.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label {
    color: var(--text-muted-color, #595959);
}

/*
 * L'etichetta flottante a riposo fa da segnaposto, e ne prende il colore. Deve venire DOPO la
 * regola dell'etichetta qui sopra: hanno la stessa specificita', (0,4,1). Salita sopra il campo
 * prende il colore dell'etichetta dalla regola precedente, che ha (0,5,1).
 */
.form-group.form-md-line-input.form-md-floating-label .form-control ~ label {
    color: var(--input-placeholder-color, #6b6b6b);
}

/* Il testo d'aiuto, visibile solo a campo attivo (a riposo Metronic lo tiene a opacita' 0). */
.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .help-block,
.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .help-block {
    color: var(--text-muted-color, #595959);
}

/* Le etichette dei gruppi di caselle e di radio. */
.form-md-checkboxes > label,
.form-md-radios > label {
    color: var(--text-muted-color, #595959);
}

/*
 * Lo stato «info» di Metronic (`.has-info`, in 4 template material: eventi gestiti, impostazioni del
 * profilo, flusso delle fasi, impostazioni host) colora di blu #327ad5 anche il TESTO: etichetta,
 * testo d'aiuto, contenuto dell'addon. Sono 4,30:1, sotto il 4,5:1 del testo. Il blu diventa quello
 * dei pulsanti d'azione, `--action-button-color` #0166cc (5,56:1), che e' gia' il blu
 * dell'applicazione. Linea, barra e icone restano #327ad5: sono grafica, e a 4,30:1 passano il 3:1.
 * Stessi selettori di Metronic, vincono per ordine di sorgente.
 */
.form-group.form-md-line-input.has-info .form-control.edited:not([readonly]) ~ label, .form-group.form-md-line-input.has-info .form-control.form-control-static ~ label, .form-group.form-md-line-input.has-info .form-control:focus:not([readonly]) ~ label, .form-group.form-md-line-input.has-info .form-control.focus:not([readonly]) ~ label {
    color: var(--action-button-color, #0166cc);
}

.form-group.form-md-line-input.has-info .form-control.edited:not([readonly]) ~ .help-block, .form-group.form-md-line-input.has-info .form-control.form-control-static ~ .help-block, .form-group.form-md-line-input.has-info .form-control:focus:not([readonly]) ~ .help-block, .form-group.form-md-line-input.has-info .form-control.focus:not([readonly]) ~ .help-block {
    color: var(--action-button-color, #0166cc);
}

.form-group.form-md-line-input.has-info .input-group-addon {
    color: var(--action-button-color, #0166cc);
}

.form-group.form-md-line-input.has-info label {
    color: var(--action-button-color, #0166cc);
}

/* La spunta della casella selezionata e il pallino del radio scelto. */
.md-checkbox label > .check {
    border-color: var(--light-blue-for-tabs, #0f7c8a);
}

.md-radio label > .check {
    background-color: var(--light-blue-for-tabs, #0f7c8a);
}