/* Stili del guscio non gestiti da MudBlazor: pagine di Identity (rendering
   statico, niente componenti interattivi) ed errore di connessione. */

html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    margin: 0;
}

/* --- Accesso ------------------------------------------------------------ */

.accesso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: #f4f6f8;
}

.accesso-riquadro {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.accesso-riquadro h1 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
}

.campo { margin-bottom: 1rem; }

.campo label,
.campo-inline label {
    display: block;
    margin-bottom: .35rem;
    font-size: .875rem;
    color: #3c4650;
}

.campo-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.campo-inline label { margin: 0; }

.controllo {
    width: 100%;
    padding: .625rem .75rem;
    font-size: 1rem;
    border: 1px solid #ccd2d8;
    border-radius: 8px;
    box-sizing: border-box;
}

.controllo:focus {
    outline: 2px solid #1e4f7a;
    outline-offset: 1px;
    border-color: #1e4f7a;
}

/* Mostra/nascondi password. Il pulsante sta dentro il campo, a destra: il
   riempimento in piu' del campo gli lascia il posto, altrimenti il testo
   digitato gli finisce sotto. */
.campo-password { position: relative; }

.campo-password .controllo { padding-right: 2.75rem; }

.mostra-password {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0 8px 8px 0;
    color: #77808a;
    cursor: pointer;
}

.mostra-password:hover { color: #3c4650; }

.mostra-password:focus-visible {
    outline: 2px solid #1e4f7a;
    outline-offset: -2px;
}

.mostra-password svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.pulsante-principale,
.pulsante-secondario {
    display: block;
    width: 100%;
    padding: .7rem 1rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
}

.pulsante-principale {
    background: #1e4f7a;
    color: #fff;
    border: 1px solid #1e4f7a;
}

.pulsante-principale:hover { background: #17405f; }

.pulsante-secondario {
    background: #fff;
    color: #1e4f7a;
    border: 1px solid #ccd2d8;
}

.separatore {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: #8a939c;
    font-size: .8125rem;
}

.separatore::before,
.separatore::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e3e6ea;
}

.nota { margin: 1.25rem 0 0; font-size: .875rem; }
.nota-piccola { margin: .75rem 0 0; font-size: .8125rem; color: #77808a; }

.accesso a { color: #1e4f7a; }

/* FocusOnNavigate porta il fuoco sull'h1 per chi naviga da tastiera o con uno
   screen reader: corretto, ma il riquadro del browser su un titolo sembra un
   campo di input. Il fuoco resta, l'anello no. */
.accesso h1:focus,
.account h1:focus { outline: none; }

.text-danger { color: #b3261e; font-size: .875rem; }

/* --- Ricerca globale nella barra scura ---------------------------------- */
/* Il campo eredita i colori del tema chiaro: testo e segnaposto quasi grigi
   sopra il blu della barra, illeggibili. Qui si forza il bianco. */

#ricerca-globale .mud-input-root,
#ricerca-globale .mud-input-root input,
#ricerca-globale .mud-input-adornment .mud-icon-root { color: #fff; }

#ricerca-globale .mud-input-root input::placeholder {
    color: rgba(255, 255, 255, .75);
    opacity: 1;
}

#ricerca-globale .mud-input-outlined-border { border-color: rgba(255, 255, 255, .5); }
#ricerca-globale .mud-input-root:hover .mud-input-outlined-border { border-color: rgba(255, 255, 255, .8); }

/* --- Menu utente -------------------------------------------------------- */
/* L'elenco dei ruoli e' lungo quanto i ruoli che uno ha: sei ruoli sono una
   riga da novanta caratteri, e il popover si dimensiona sul contenuto. Senza
   un tetto il menu diventa largo mezza barra. Il tetto manda a capo invece di
   tagliare, perche' un ruolo troncato e' un ruolo che non si legge. */

.menu-utente-ruoli {
    max-width: 14rem;
    white-space: normal;
}

/* --- Area account (profilo, password, due fattori) ---------------------- */
/* Le pagine di Identity sono a rendering statico: qui non arrivano i
   componenti MudBlazor, quindi lo stile e' scritto a mano come per l'accesso. */

.account { max-width: 60rem; }
.account h1 { font-size: 1.5rem; margin: 0 0 1.5rem; }
.account h2 { font-size: 1.125rem; margin: 0 0 1rem; }
.account h3 { font-size: 1rem; margin: 1.5rem 0 .75rem; }

.account-griglia {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.account-menu {
    flex: 0 0 14rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-menu li { margin-bottom: .25rem; }

.account-menu a {
    display: block;
    padding: .5rem .75rem;
    border-radius: 8px;
    color: #3c4650;
    text-decoration: none;
}

.account-menu a:hover { background: #eef1f4; }
.account-menu a.active { background: #1e4f7a; color: #fff; }

.account-corpo { flex: 1 1 22rem; min-width: 0; }
.account-modulo { max-width: 26rem; }

.avviso {
    padding: .875rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    margin-bottom: 1rem;
}

.avviso p { margin: .5rem 0 0; }
.avviso p:first-child { margin-top: 0; }
.avviso-attenzione { background: #fef6e0; border-color: #f2d795; color: #6b4e00; }
.avviso-errore { background: #fdecea; border-color: #f2b8b2; color: #7d1a12; }
.avviso-ok { background: #e8f4ec; border-color: #a8d5b8; color: #14532d; }

.pulsante-pericolo {
    display: inline-block;
    padding: .7rem 1rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    background: #b3261e;
    color: #fff;
    border: 1px solid #b3261e;
}

.azioni {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.azioni form { margin: 0; }

.azione {
    display: inline-block;
    width: auto;
    padding: .55rem .9rem;
    font-size: .9375rem;
    border-radius: 8px;
    border: 1px solid #ccd2d8;
    background: #fff;
    color: #1e4f7a;
    text-decoration: none;
    cursor: pointer;
}

.azione:hover { background: #eef1f4; }

.codici-recupero {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .5rem;
    margin: 1rem 0;
}

.codici-recupero code {
    padding: .5rem;
    background: #f4f6f8;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
}

.chiave-authenticator {
    display: inline-block;
    padding: .4rem .6rem;
    background: #f4f6f8;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
}

.qr-authenticator {
    display: block;
    width: 200px;
    height: 200px;
    padding: .5rem;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    margin-bottom: .75rem;
}

.passi { padding-left: 1.25rem; }
.passi li { margin-bottom: 1rem; }

/* --- Errori di connessione del circuito --------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: .75rem 1.25rem;
    background: #fde68a;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, .12);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: .5rem;
    right: .75rem;
    cursor: pointer;
}

.cursor-pointer { cursor: pointer; }

/* --- Il selettore "vai alla settimana" ---------------------------------- */
/* Un campo di MudBlazor nasce largo quanto il suo contenitore, e in una barra
   flex questo vuol dire largo quanto tutto lo spazio che avanza: il calendario
   si prendeva mezza riga per mostrare dieci caratteri di data. E' un salto
   raro — le frecce e "Oggi" coprono il caso normale — quindi non merita quello
   spazio.

   Una larghezza massima e non fissa: l'etichetta e la data devono starci
   dentro in ogni lingua, e un campo che cresce di qualche pixel e' meglio di
   un'etichetta tagliata.

   Il selettore e' scritto due volte perche' il Class di un wrapper Ui* non
   atterra per forza dove ci si aspetta (vedi .ore-registro qui sotto): se
   finisce sulla radice del picker vale la prima riga, se finisce piu' dentro
   vale la seconda, e fra le due non si sceglie a memoria. */

.scelta-settimana,
.scelta-settimana .mud-input-control {
    max-width: 11rem;
}

/* --- Riga rapida del registro ore --------------------------------------- */
/* Nella riga di inserimento di /ore convivono campi di testo, un gruppo di
   pulsanti e un contatore. Gli ultimi due stanno dentro un UiField per avere
   cornice ed etichetta uguali agli altri campi, ma il loro contenuto è più
   alto di una riga di testo: senza queste regole il loro bordo scenderebbe di
   qualche pixel sotto quello dei campi accanto. L'altezza si fissa una volta
   per tutti i controlli della riga invece di sperare che i riempimenti
   predefiniti coincidano.

   I selettori ripetono le classi di MudBlazor perché devono pesare almeno
   quanto le sue, che sono lunghe: app.css è caricato dopo MudBlazor.min.css,
   quindi a parità di peso vince questo file. */

.ore-riga .mud-input > input.mud-input-root.mud-input-root-outlined.mud-input-root-margin-dense {
    box-sizing: border-box;
    height: 2.75rem;
    padding-top: 0;
    padding-bottom: 0;
}

/* Altezza minima e non fissa: su schermo stretto i pulsanti del tipo vanno a
   capo dentro la cornice, e un'altezza fissa li taglierebbe. Meglio un campo
   che cresce di una riga che un campo che nasconde una scelta. */
.ore-riga div.mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-margin-dense {
    box-sizing: border-box;
    min-height: 2.75rem;
    padding-top: 0;
    padding-bottom: 0;
}

.ore-riga div.mud-input-slot.mud-input-root {
    display: flex;
    align-items: center;
}

/* Le cornici degli UiField si stringono sul contenuto. Un campo di testo
   occupa tutta la colonna perché ci si scrive dentro; una cornice che tiene
   quattro pulsanti o due frecce e tre cifre, no: lo spazio vuoto in più la fa
   leggere come un campo di testo in cui si può cliccare, che è esattamente il
   contrario di quello che è. */
.ore-riga .mud-field {
    width: fit-content;
    max-width: 100%;
}

/* Il campo delle ore non ha bordo proprio: il bordo è quello dell'UiField che
   lo contiene, e il fuoco lo accende MudBlazor con :focus-within sulla
   cornice. Un secondo riquadro dentro il primo sarebbe solo rumore. */
.ore-riga .ore-quantita {
    width: 3.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.1rem;
    text-align: right;
}

.ore-riga .ore-quantita:focus { outline: none; }

/* Il segnaposto dice dove si scrive senza scrivere uno zero finto: il valore
   vero di una riga a zero ore è la stringa vuota (OreScritte.Formatta), e
   quella regola non si tocca per ragioni di grafica. */
.ore-riga .ore-quantita::placeholder {
    color: currentColor;
    opacity: .38;
}

/* --- Il registro ore: colonne allineate fra un giorno e l'altro ---------- */
/* Compilando per giorno, `/ore` disegna una tabella per ogni giorno, dentro un
   riquadro suo. Ogni tabella dimensiona le colonne sul proprio contenuto,
   quindi il giorno con il nome di progetto piu' lungo sposta «Tipo» piu' in la'
   di tutti gli altri: l'occhio che scorre la settimana perde la colonna a ogni
   riquadro. `table-layout: fixed` toglie la decisione al contenuto e la porta
   qui, che e' l'unico posto da cui puo' valere per tutte e sette le tabelle.

   Le larghezze stanno qui e non negli attributi `style` della componente per la
   stessa ragione: erano due su cinque, e le altre tre le decideva il testo.

   Il doppio selettore copre i due modi in cui un wrapper Ui* puo' consegnare il
   `Class` — sull'elemento `table` o sul contenitore che lo avvolge — invece di
   scommettere su quale dei due: su un `div` la regola non fa niente, quindi
   scriverla due volte costa una riga e non sbaglia in nessuno dei due casi. */
.ore-registro,
.ore-registro table {
    table-layout: fixed;
}

.ore-registro th:nth-child(1),
.ore-registro td:nth-child(1) { width: 34%; }

.ore-registro th:nth-child(2),
.ore-registro td:nth-child(2) { width: 8rem; }

/* La terza non ha larghezza, ed e' voluto: prende quello che resta. Una
   colonna elastica serve, o su schermo stretto le cinque fisse uscirebbero dal
   riquadro tutte insieme invece di stringersi dove si puo'. */

.ore-registro th:nth-child(4),
.ore-registro td:nth-child(4) {
    width: 7rem;
    text-align: right;
}

.ore-registro th:nth-child(5),
.ore-registro td:nth-child(5) { width: 5rem; }

/* Con le colonne fisse il testo non puo' piu' allargare la cella: un nome di
   progetto lungo va a capo invece di uscire dal bordo. */
.ore-registro td { overflow-wrap: break-word; }

/* La cella della feature tiene su una riga il nome, la spunta di «terminata» e
   il cartellino dello stato. In una colonna che non si allarga piu' quei tre
   devono poter andare a capo, o l'ultimo esce dal bordo. */
.ore-registro td .mud-stack { flex-wrap: wrap; }

/* --- Interruttori ------------------------------------------------------- */
/* MudBlazor disegna l'interruttore come un <label> che si allarga fino al
   bordo del contenitore: dentro una colonna di griglia diventa largo quanto la
   colonna, e il clic accende l'interruttore anche cliccando nello spazio vuoto
   a destra dell'etichetta, anche molto lontano da essa. Un bersaglio invisibile
   che cambia un dato è peggio di un bersaglio piccolo, quindi il label si
   stringe su quello che contiene.

   La regola è volutamente globale e non limitata alla riga rapida di /ore, dove
   il difetto si è visto per primo: gli interruttori del programma stanno quasi
   tutti dentro una colonna di griglia o dentro un dialogo, e avevano tutti lo
   stesso bersaglio invisibile. Il max-width serve alle etichette lunghe, che
   devono poter andare a capo dentro la colonna invece di sfondarla. */
.mud-switch {
    width: fit-content;
    max-width: 100%;
}