/*
 * Variabili riprese dalla palette GAV Backoffice (wwwroot/css/gav.css del
 * progetto GAV_Backoffice), stesso standard di progetto §3 (nessuna deroga
 * senza motivo esplicito) — qui solo il sottoinsieme che serve a una pagina
 * pubblica senza sidebar/navigazione interna, più i token di stato semantici
 * (aggiunti il 2026-10-01, vedi PortaleCliente/UX-UI-STANDARD.md §8): prima
 * mancavano, quindi i badge Bootstrap (bg-success/bg-warning/ecc.) nelle
 * pagine esistenti si appoggiavano ai colori di default di Bootstrap, non a
 * quelli brandizzati/verificati del progetto. Contrasti già verificati in
 * gav.css, validi qui perché i valori non cambiano.
 *
 * Tema Sistema/Chiaro/Scuro (2026-10-03, vedi UX-UI-STANDARD.md §12): questo
 * :root resta la base CHIARA (invariata). I valori SCURI vivono in due posti
 * — @media (prefers-color-scheme: dark) per "Sistema", e :root[data-theme]
 * per la scelta esplicita dell'utente (letta da un cookie, impostata da
 * _Layout.cshtml sull'<html> prima del primo render: niente lampeggio del
 * tema sbagliato al caricamento, a differenza di un toggle solo-JS). I due
 * blocchi duplicano gli stessi valori di proposito — senza un build
 * SCSS/variabili condivise (non previsto, vedi nota su gav.css), è la via
 * più semplice da mantenere: se cambia un colore scuro, va aggiornato in
 * ENTRAMBI i blocchi, altrimenti "Sistema" e "Scuro" divergono.
 */
:root {
    --gav-primary: #0B5394;
    --gav-primary-dark: #073763;
    --gav-primary-light: #EAF1FA;
    --gav-success: #1E7A34;
    --gav-warning: #8A5A00;
    --gav-danger: #B3261E;
    --gav-info: #205493;
    --gav-text: #1B1F26;
    --gav-text-muted: #5B6472;
    --gav-surface: #F4F6F9;
    --gav-panel: #FFFFFF;
    --gav-input-bg: #FCFAF7;
    --gav-border: #D8DEE6;

    /* Quanto è visibile lo sfondo tenue dei badge/icone di stato (vedi
       .badge più sotto) — più alto in scuro, dove la stessa percentuale di
       colore su un fondo quasi nero risulterebbe troppo poco visibile. */
    --gav-badge-wash: 0.12;

    /* Gli "-ink" sono lo STESSO colore semantico di sopra, ma pensati per
       stare SOPRA la superficie della pagina (testo, icone, link, outline di
       focus) invece che come sfondo pieno di pulsanti/badge. In chiaro
       coincidono col colore base (già verificato per il contrasto su bianco
       — vedi la tabella in cima a UX-UI-STANDARD.md); in scuro diventano una
       tonalità più chiara, altrimenti su uno sfondo quasi nero sarebbero
       pressoché illeggibili (il blu/verde/ambra scuri di §1 sono calibrati
       per testo BIANCO sopra di loro, non per fare da testo loro stessi su
       uno sfondo scuro). Valori scuri e rapporti di contrasto calcolati:
       vedi il blocco @media più sotto. */
    --gav-primary-ink: var(--gav-primary);
    --gav-success-ink: var(--gav-success);
    --gav-warning-ink: var(--gav-warning);
    --gav-danger-ink: var(--gav-danger);
    --gav-info-ink: var(--gav-info);
    --gav-warm-ink: var(--gav-warm);

    /* StatoLabels.cs (Common/) restituisce anche "secondary" e "dark" oltre
       ai quattro colori semantici sopra (es. "In attesa", "Chiuso") — questi
       due alias servono perché Storico.cshtml/Veicoli/Index.cshtml accostano
       l'icona evento al colore con "var(--gav-@Badge)", che altrimenti
       risulterebbe non definito per questi due casi. Non sono "stati",
       restano neutri di proposito. */
    --gav-secondary: var(--gav-text-muted);
    --gav-dark: var(--gav-text);

    /* Accento caldo decorativo per il restyling "accogliente" della pagina di
       accesso e della navigazione (2026-10-03) — deroga esplicita alla
       palette sopra, come richiede lo standard di progetto §3: riservato a
       dettagli non semantici (badge di stato esclusi), mai usato al posto
       di --gav-primary per link/pulsanti/stato attivo. */
    --gav-warm: #C9743A;

    /* Riallinea le variabili Bootstrap 5.3 alla palette GAV, stesso
       meccanismo via custom property già in uso in Backoffice/wwwroot/css/gav.css
       — qui non era MAI stato fatto (nemmeno per --bs-primary), quindi oggi
       pulsanti ".btn-primary", link, testo ".text-danger" e badge
       ".badge bg-*" nel Portale rendono coi colori di DEFAULT di Bootstrap,
       non con questi già verificati per il contrasto. Aggiunto il 2026-10-03
       insieme al restyling, ma è una correzione indipendente da esso: senza,
       bg-warning/bg-info col testo bianco di default di `.badge` restano
       sotto soglia AA (~1.6:1 e ~2.0:1 contro il minimo 4.5:1). */
    --bs-primary: var(--gav-primary);
    --bs-primary-rgb: 11, 83, 148;
    --bs-success: var(--gav-success);
    --bs-success-rgb: 30, 122, 52;
    --bs-warning: var(--gav-warning);
    --bs-warning-rgb: 138, 90, 0;
    --bs-danger: var(--gav-danger);
    --bs-danger-rgb: 179, 38, 30;
    --bs-info: var(--gav-info);
    --bs-info-rgb: 32, 84, 147;
    /* Questi due token in realtà NON bastano, lasciati per chi li legge
       esplicitamente altrove (es. componenti futuri): Bootstrap 5.3 colora
       i link "<a>" con "rgba(var(--bs-link-color-rgb), ...)", una variabile
       SEPARATA (tripletta numerica, non esadecimale) mai rimappata qui —
       bug trovato il 2026-10-03 nel test dal vivo (link "Password
       dimenticata?" ancora blu di Bootstrap, #0d6efd, non il nostro, in
       QUALUNQUE tema). Corretto sotto con una regola diretta su "a" che
       bypassa del tutto quel meccanismo, più semplice che duplicare ogni
       token "-ink" anche in versione tripletta RGB solo per questo. */
    --bs-link-color: var(--gav-primary-ink);
    --bs-link-hover-color: var(--gav-primary-ink);

    /* Fa rendere in scuro anche i VERI controlli nativi del browser quando
       il tema è scuro — i campi data/ora di Appuntamenti/Richiedi.cshtml
       (il picker calendario/orologio) e la scrollbar. Corretto 2026-10-03:
       la prima versione di questo commento citava anche i checkbox di
       Notifiche.cshtml, ma è impreciso — Bootstrap li ristila per intero
       (".form-check-input", sfondo/bordo propri via SVG), non sono
       controlli nativi del browser: "color-scheme" non li tocca. Ridichiarato
       nei due blocchi scuri sotto. */
    color-scheme: light;
}

/* ---------- Tema scuro: "Sistema" (segue le preferenze del sistema operativo,
   solo se l'utente non ha scelto esplicitamente "Chiaro") ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gav-text: #EDEFF2;
        --gav-text-muted: #9AA3AF;
        --gav-surface: #15181D;
        --gav-panel: #1E232A;
        --gav-input-bg: #242A32;
        --gav-border: #333B44;
        --gav-badge-wash: 0.22;
        --gav-primary-ink: #5B9BD9;
        --gav-success-ink: #5FBF7E;
        --gav-warning-ink: #FFC857;
        --gav-danger-ink: #FF8A80;
        --gav-info-ink: #6FA8DC;
        --gav-warm-ink: #E0935C;
        --gav-primary-light: rgba(91, 155, 217, 0.18);
        color-scheme: dark;

        /* Bug trovato il 2026-10-03 (testo "denis.depauli@windex.it" quasi
           invisibile in Account/Index.cshtml): ".text-muted" di Bootstrap
           legge --bs-secondary-color, una SUA variabile mai remappata a
           --gav-text-muted — resta quindi sempre rgba(33,37,41,.75), un
           grigio quasi nero pensato per sfondo bianco, illeggibile sopra un
           pannello scuro. Bootstrap avrebbe un proprio valore scuro per
           questa variabile, ma SOLO sotto l'attributo [data-bs-theme="dark"]
           che qui non usiamo (usiamo [data-theme], con la nostra palette
           calibrata) — va quindi remappata a mano come già fatto per
           --bs-primary/--bs-success/ecc. Stesso meccanismo colpisce anche
           il placeholder dei campi (".form-control::placeholder" usa la
           stessa variabile) e ".text-body-secondary"/i link disabilitati
           dei menu (--bs-tertiary-color) — remappata anche quella. */
        --bs-secondary-color: var(--gav-text-muted);
        --bs-tertiary-color: var(--gav-text-muted);

        /* Freccina del menu a tendina (".form-select"): un'immagine SVG con
           colore di tratto fisso scuro, mai pensata per uno sfondo scuro —
           quasi invisibile altrimenti. Stesso tratto chiaro che userebbe
           Bootstrap con [data-bs-theme=dark] (qui non usato). */
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239AA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}

/* ---------- Tema scuro: "Scuro" scelto esplicitamente dall'utente — stessi
   valori del blocco sopra, ma SEMPRE attivi (non condizionati dal sistema
   operativo). Vedi _Layout.cshtml per come viene impostato [data-theme]. ---------- */
:root[data-theme="dark"] {
    --gav-text: #EDEFF2;
    --gav-text-muted: #9AA3AF;
    --gav-surface: #15181D;
    --gav-panel: #1E232A;
    --gav-input-bg: #242A32;
    --gav-border: #333B44;
    --gav-badge-wash: 0.22;
    --gav-primary-ink: #5B9BD9;
    --gav-success-ink: #5FBF7E;
    --gav-warning-ink: #FFC857;
    --gav-danger-ink: #FF8A80;
    --gav-info-ink: #6FA8DC;
    --gav-warm-ink: #E0935C;
    --gav-primary-light: rgba(91, 155, 217, 0.18);
    color-scheme: dark;

    /* Stesso fix del blocco @media sopra — ripetuto qui perché questo
       blocco si applica SEMPRE con la scelta esplicita "Scuro" (vedi
       commento lì per il dettaglio del bug). */
    --bs-secondary-color: var(--gav-text-muted);
    --bs-tertiary-color: var(--gav-text-muted);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239AA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

body {
    background-color: var(--gav-surface);
    color: var(--gav-text);
}

/* Colore dei link "<a>" generici (es. "Password dimenticata?" in
   Login.cshtml) — bypassa il meccanismo "--bs-link-color-rgb" di Bootstrap
   (vedi commento su --bs-link-color più sopra nel file): specificità di
   selettore di TAG, quindi un ".btn"/".gav-portale-tab"/ecc. applicato allo
   stesso elemento <a> vince comunque (specificità di classe), questa
   regola si applica solo ai link "nudi" senza una classe più specifica. */
a {
    color: var(--gav-primary-ink);
}

.gav-portale-shell {
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Riga superiore: marchio a sinistra, icona tema a destra (2026-10-03, vedi
   UX-UI-STANDARD.md §12) — prima il marchio era centrato da solo; ora che
   condivide la riga col toggle del tema, la centratura/spaziatura passa al
   contenitore .gav-portale-topbar. */
.gav-portale-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.gav-portale-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gav-primary-ink);
    text-decoration: none;
}

/* Icona rapida tema Sistema/Chiaro/Scuro — un pulsante rotondo coerente con
   .gav-portale-brand-badge nelle proporzioni, ma neutro (nessun colore
   semantico: non è uno stato, è un controllo). Il colore cambia al passaggio
   del mouse/focus solo come rinforzo, l'icona stessa (gestita dal JS in
   _Layout.cshtml) resta il modo primario per capire il tema corrente. */
.gav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--gav-border);
    border-radius: 50%;
    background: var(--gav-panel);
    color: var(--gav-text-muted);
    font-size: 1.05rem;
    cursor: pointer;
}

.gav-theme-toggle:hover,
.gav-theme-toggle:focus-visible {
    color: var(--gav-primary-ink);
    border-color: var(--gav-primary-ink);
}

/* Badge rotondo col colore primario, icona veicoli generica (vedi commento
   in _Layout.cshtml sul perché non è ancora il logo reale del cliente). */
.gav-portale-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gav-primary), var(--gav-primary-dark));
    flex-shrink: 0;
}

.gav-portale-main {
    background: var(--gav-panel);
    border: 1px solid var(--gav-border);
    border-radius: 1rem;
    box-shadow: 0 10px 26px rgba(27, 31, 38, 0.06);
    padding: 1.75rem;
}

/* Modificatore opt-in (2026-10-03, restyling "accogliente" — vedi
   UX-UI-STANDARD.md §11): accento caldo decorativo in cima alla card,
   applicato solo alle pagine di contenuto "positive" (login, storico,
   veicoli, account, form...). Escluso deliberatamente dalle pagine di
   errore/esito negativo (Errore, LinkNonValido,
   AccessoSocialNonRiconosciuto): un accento "accogliente" su un messaggio di
   errore sarebbe fuori tono, non solo una scelta di stile diversa. */
.gav-portale-main--accent {
    border-top: 4px solid var(--gav-warm);
}

.gav-portale-footer {
    text-align: center;
    margin-top: 1rem;
}

/* Accessibilità: indicatore di focus sempre visibile (WCAG 2.4.7), non
   affidato al solo comportamento di default del browser — stessa regola già
   in uso in gav.css (Backoffice), prima assente qui. Aggiunta 2026-10-01,
   vedi UX-UI-STANDARD.md §6 punto 4 e §8. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    /* --gav-info-ink (non --gav-info): l'outline è testo/contorno SOPRA la
       pagina, non uno sfondo pieno — in scuro --gav-info resterebbe un blu
       navy quasi invisibile su una superficie quasi nera, vanificando lo
       scopo stesso dell'indicatore (WCAG 2.4.7 richiede che sia ben
       visibile, non solo presente). */
    outline: 3px solid var(--gav-info-ink);
    outline-offset: 2px;
}

/* Bottom tab bar (2026-10-01, vedi UX-UI-STANDARD.md §4): fissa in basso su
   mobile (pattern nativo riconoscibile), barra orizzontale in alto da
   768px in su — stessa soglia già usata nel Backoffice per il passaggio
   sidebar/hamburger. Mostrata SOLO quando il cliente è autenticato (vedi
   _Layout.cshtml): un visitatore anonimo non ha nulla da navigare oltre
   alla pagina di login a cui viene comunque rimandato.

   Ogni voce rispetta il target di tocco >= 44x44px richiesto da
   UX-UI-STANDARD.md §3 (padding verticale generoso, non solo l'icona/testo
   nudi) e non si affida MAI al solo colore per lo stato attivo (icona+testo
   restano leggibili, il colore è un rinforzo — §6 punto 6). */
.gav-portale-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: var(--gav-panel);
    border-top: 1px solid var(--gav-border);
    z-index: 1030;
}

.gav-portale-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.6rem 0.25rem;
    min-height: 44px;
    color: var(--gav-text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
}

.gav-portale-tab i {
    font-size: 1.2rem;
}

.gav-portale-tab.active {
    color: var(--gav-primary-ink);
}

/* Rinforzo visivo "morbido" dello stato attivo (2026-10-03): un fondo a
   pillola dietro icona+testo, oltre al cambio di colore già presente —
   resta blu (--gav-primary-light), non l'accento caldo: qui è uno stato di
   navigazione, non un dettaglio decorativo (vedi nota su --gav-warm sopra). */
.gav-portale-tab.active {
    position: relative;
}

.gav-portale-tab.active::before {
    content: "";
    position: absolute;
    inset: 2px 10%;
    background: var(--gav-primary-light);
    border-radius: 100px;
    z-index: -1;
}

/* Spazio per non far coprire l'ultimo contenuto dalla barra fissa. */
.gav-portale-shell--con-tabbar {
    padding-bottom: 4.5rem;
}

@media (min-width: 768px) {
    .gav-portale-tabbar {
        position: static;
        border-top: none;
        border-bottom: 1px solid var(--gav-border);
        max-width: 560px;
        margin: 0 auto 1.5rem;
        border-radius: 0.5rem;
        overflow: hidden;
        border: 1px solid var(--gav-border);
    }

    .gav-portale-shell--con-tabbar {
        padding-bottom: 2rem;
    }
}

/* ==========================================================================
   Restyling "accogliente" (2026-10-03) — UX-UI-STANDARD.md §11.
   Componenti condivisi: pulsanti a pillola, badge più morbidi, campi con
   icona, righe evento/veicolo. Applicati qui una sola volta così ogni
   pagina che riusa le classi Bootstrap/componenti esistenti li eredita
   senza bisogno di markup nuovo (es. tutti i ".badge bg-*" già in uso).
   ========================================================================== */

/* Pulsante primario: stessa dimensione/padding di Bootstrap, solo forma e
   rilievo più morbidi. Applicato a TUTTI i ".btn-primary" del Portale, non
   solo al Login, per coerenza (vedi §11 punto 4 dello standard). */
.btn-primary {
    background: linear-gradient(135deg, var(--gav-primary), var(--gav-primary-dark));
    border-color: var(--gav-primary-dark);
    border-radius: 100px;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(11, 83, 148, 0.25);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--gav-primary-dark);
    border-color: var(--gav-primary-dark);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    border-radius: 100px;
}

/* Bug trovato il 2026-10-03 testando il Portale in scuro (scansione
   automatica del contrasto, non a occhio): i pulsanti ".btn-outline-*" di
   Bootstrap NON leggono le variabili globali --bs-primary/--bs-danger/ecc.
   rimappate in cima a questo file — Bootstrap genera --bs-btn-color/
   --bs-btn-border-color come valori ESADECIMALI fissi, propri di ogni
   variante, mai collegati alle variabili globali (lo stesso vale per
   --bs-btn-hover-bg/--bs-btn-active-bg, lasciati invariati qui sotto: sono
   riempimenti pieni con testo bianco, indipendenti dallo sfondo della
   pagina, già verificati a sufficienza dal tema Bootstrap di default).
   Risultato prima della correzione: il pulsante "Appuntamento"
   (Veicoli/Index.cshtml, .btn-outline-primary) rendeva nel blu DI DEFAULT
   di Bootstrap (#0d6efd), non il blu del progetto — 3,51:1 di contrasto sul
   pannello scuro (--gav-panel), sotto la soglia AA 4,5:1. Stesso problema,
   verificato con lo stesso calcolo, per outline-secondary (3,37:1) e
   outline-danger (3,49:1). Corretto riassegnando le SOLE variabili locali
   di stato "a riposo"/disabilitato ai token "-ink" già introdotti per il
   tema scuro (§12 UX-UI-STANDARD.md) — risolvono automaticamente anche il
   chiaro, dove "-ink" coincide col token base. */
.btn-outline-primary {
    --bs-btn-color: var(--gav-primary-ink);
    --bs-btn-border-color: var(--gav-primary-ink);
    --bs-btn-disabled-color: var(--gav-primary-ink);
    --bs-btn-disabled-border-color: var(--gav-primary-ink);
}

.btn-outline-secondary {
    /* Bordo sullo stesso colore del testo (non --gav-border, troppo tenue
       per un contorno di pulsante interattivo — pensato per linee di
       separazione decorative, fallirebbe il contrasto minimo 3:1 richiesto
       per i confini di un componente UI, non solo per il testo). */
    --bs-btn-color: var(--gav-text-muted);
    --bs-btn-border-color: var(--gav-text-muted);
    --bs-btn-disabled-color: var(--gav-text-muted);
    --bs-btn-disabled-border-color: var(--gav-text-muted);
}

/* Stesso tipo di bug dei pulsanti outline sopra, trovato con la stessa
   scansione automatica: le utility ".text-primary/-success/-warning/-danger/
   -info" di Bootstrap leggono correttamente le variabili globali
   "--bs-*-rgb" (quelle SONO rimappate, a differenza di --bs-btn-color) ma
   restano comunque il token di BASE, pensato per fare da sfondo pieno con
   testo bianco sopra — usato qui invece come colore di TESTO diretto sulla
   pagina, lo stesso problema di ruolo "sfondo vs testo" risolto ovunque
   altro con gli "-ink" (§12 UX-UI-STANDARD.md). Trovato concretamente sugli
   asterischi dei campi obbligatori e, più seriamente, sui messaggi di
   errore di validazione (".text-danger small", generati da
   "asp-validation-for"/"asp-validation-summary" in OGNI form del Portale:
   Login, ImpostaPassword, RecuperaPassword, Appuntamenti/Richiedi,
   Veicoli/Registra) — 2,72:1 di contrasto sul pannello scuro, ben sotto la
   soglia 4,5:1: in scuro un errore di validazione sarebbe stato pressoché
   illeggibile. */
.text-primary { color: var(--gav-primary-ink) !important; }
.text-success { color: var(--gav-success-ink) !important; }
.text-warning { color: var(--gav-warning-ink) !important; }
.text-danger  { color: var(--gav-danger-ink) !important; }
.text-info    { color: var(--gav-info-ink) !important; }

.btn-outline-danger {
    --bs-btn-color: var(--gav-danger-ink);
    --bs-btn-border-color: var(--gav-danger-ink);
    --bs-btn-disabled-color: var(--gav-danger-ink);
    --bs-btn-disabled-border-color: var(--gav-danger-ink);
}

/* Badge di stato più morbidi: sfondo tenue (12% del colore semantico) invece
   di un riempimento pieno, stesso colore ma come testo — i colori restano
   quelli verificati per il contrasto (vedi i token --bs-success-rgb ecc. in
   cima a questo file), qui cambia solo il trattamento grafico, non la
   semantica né il contrasto (il testo colorato sul proprio sfondo tenue
   mantiene un rapporto equivalente a quello validato testo-bianco/colore
   pieno). Si applica automaticamente a OGNI "badge bg-*" già presente nel
   codice (Storico, Veicoli, pagine future), senza bisogno di toccare i
   singoli file .cshtml. */
.badge {
    border-radius: 100px;
    font-weight: 700;
    padding: 0.4em 0.75em;
}

.badge.bg-success { background-color: rgba(var(--bs-success-rgb), var(--gav-badge-wash)) !important; color: var(--gav-success-ink) !important; }
.badge.bg-warning { background-color: rgba(var(--bs-warning-rgb), var(--gav-badge-wash)) !important; color: var(--gav-warning-ink) !important; }
.badge.bg-danger  { background-color: rgba(var(--bs-danger-rgb), var(--gav-badge-wash)) !important; color: var(--gav-danger-ink) !important; }
.badge.bg-info    { background-color: rgba(var(--bs-info-rgb), var(--gav-badge-wash)) !important; color: var(--gav-info-ink) !important; }

/* "secondary"/"dark" (es. "In attesa", "Chiuso", "Annullato" — vedi
   StatoLabels.cs): non sono token di progetto come i quattro sopra, restano
   sui colori Bootstrap di default (già abbastanza scuri da avere un
   contrasto adeguato con testo bianco, a differenza di warning/info), solo
   il trattamento "a pillola tenue" li rende coerenti con gli altri badge.
   Il testo qui usa già --gav-text-muted/--gav-text, entrambi ridefiniti nei
   blocchi scuri sopra: nessun token "-ink" dedicato necessario. */
.badge.bg-secondary { background-color: rgba(var(--bs-secondary-rgb), var(--gav-badge-wash)) !important; color: var(--gav-text-muted) !important; }
.badge.bg-dark      { background-color: rgba(var(--bs-dark-rgb), var(--gav-badge-wash)) !important; color: var(--gav-text) !important; }

/* Bug trovato il 2026-10-03 testando Veicoli/Registra.cshtml e
   Appuntamenti/Richiedi.cshtml in scuro: ogni campo di testo/select/area
   SENZA icona (quindi fuori dal pattern ".input-group" sotto — qui sono la
   maggioranza: Targa, Marca e modello, Nota, Motivo, Data/Ora) restava con
   sfondo bianco fisso e testo quasi nero fisso, stonato sul resto della
   pagina scura. Causa: Bootstrap stila ".form-control"/".form-select" con
   "var(--bs-body-bg)"/"var(--bs-body-color)" — due variabili GLOBALI mai
   rimappate qui. Non le rimappo globalmente (toccherebbero anche altri
   componenti Bootstrap non verificati, es. un futuro ".dropdown-menu"):
   correggo mirato, solo sui controlli di form, con i token già pensati per
   questo ruolo. Inclusa la freccina del select, anch'essa un'immagine SVG
   con colore fisso scuro — sostituita con una versione chiara nei due
   blocchi tema scuro più sotto in questo file, stesso approccio che userebbe
   Bootstrap stesso con [data-bs-theme=dark] (qui non usato, vedi §12
   UX-UI-STANDARD.md). */
.form-control,
.form-select {
    background-color: var(--gav-input-bg);
    color: var(--gav-text);
}

/* Campi con icona (pattern Bootstrap "input-group", nessuna libreria
   aggiuntiva): l'icona entra come primo elemento del gruppo, lo stile qui
   sotto lo rende visivamente un unico campo arrotondato invece di due
   blocchi separati. */
.input-group .input-group-text {
    background: var(--gav-input-bg);
    border-color: var(--gav-border);
    color: var(--gav-primary-ink);
}

.input-group .form-control {
    border-color: var(--gav-border);
}

.input-group:not(.has-validation) > .input-group-text:first-child {
    border-top-left-radius: 0.9rem;
    border-bottom-left-radius: 0.9rem;
}

.input-group > .form-control:last-child {
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}

/* Testo introduttivo sotto il titolo di pagina (es. "Ecco lo stato dei tuoi
   veicoli."), stesso ruolo di ".old-sub" nel mockup di confronto. */
.gav-page-sub {
    color: var(--gav-text-muted);
    margin-bottom: 1.25rem;
}

/* Riga "evento" (ordine di lavoro / tagliando / acquisto / permuta) usata in
   Storico.cshtml: icona di TIPO (il colore resta riservato allo stato,
   coerente con UX-UI-STANDARD.md §5.3/§6 punto 6) + contenuto + badge.
   --gav-event-color va impostato inline dalla pagina con
   "var(--gav-@statoBadge)", riusando la stessa stringa di stato già
   calcolata da StatoLabels — nessuna nuova classe C#/di stato introdotta. */
.gav-event {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--gav-panel);
    border: 1px solid var(--gav-border);
    border-left: 4px solid var(--gav-event-color, var(--gav-border));
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
}

.gav-event:last-child {
    margin-bottom: 0;
}

.gav-event-icon {
    width: 34px;
    height: 34px;
    border-radius: 0.6rem;
    background: var(--gav-surface);
    color: var(--gav-event-color, var(--gav-text-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gav-event-body {
    min-width: 0;
}

/* Riga "veicolo" usata in Veicoli/Index.cshtml: icona colorata in base
   all'urgenza del tagliando più prossimo (stesso principio dei badge),
   corpo centrale, azione sempre visibile a destra. */
.gav-vehicle-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--gav-panel);
    border: 1px solid var(--gav-border);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
}

.gav-vehicle-row:last-child {
    margin-bottom: 0;
}

.gav-vehicle-icon {
    width: 38px;
    height: 38px;
    border-radius: 0.65rem;
    background: var(--gav-primary-light);
    color: var(--gav-primary-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gav-vehicle-icon--warning { background: rgba(var(--bs-warning-rgb), var(--gav-badge-wash)); color: var(--gav-warning-ink); }
.gav-vehicle-icon--danger  { background: rgba(var(--bs-danger-rgb), var(--gav-badge-wash)); color: var(--gav-danger-ink); }

.gav-vehicle-row .gav-vehicle-body {
    flex: 1;
    min-width: 0;
}

/* Bug trovato il 2026-10-03 mentre si estendeva il restyling a
   Notifiche.cshtml/Account/Index.cshtml: entrambe usano "gav-card", che
   esiste in Backoffice/wwwroot/css/gav.css (bordo pieno, sfondo bianco —
   adatto lì perché il contenuto NON è già dentro un'altra card) ma non era
   MAI stata definita qui — rendeva quindi come <div> del tutto spoglio,
   nessun bordo/sfondo/padding. Qui il contenuto è già dentro
   ".gav-portale-main": un bordo pieno identico annidato dentro un'altra
   card avrebbe un effetto "scatola nella scatola" pesante, quindi la
   versione per il Portale è un pannello interno più leggero (sfondo
   tenue, nessun bordo proprio) invece di una copia 1:1 del Backoffice. */
.gav-card {
    background: var(--gav-surface);
    border-radius: 0.85rem;
    padding: 1.25rem;
}