/*
    Stili del toggle tema chiaro/scuro.
    NB: i colori del tema (chiaro E scuro) vivono ESCLUSIVAMENTE in
    AppLayout.Theme (PaletteLight / PaletteDark). Il MudThemeProvider applica
    la palette giusta in base a IsDarkMode, risolto dal cookie lato server.
    Qui non c'è alcuna definizione di colore: solo layout/transizioni.
*/

/* Transizione morbida al cambio tema */
body,
.mud-appbar,
.mud-drawer,
.mud-paper,
.mud-card {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.vivo-theme-toggle {
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
}

.vivo-theme-toggle .vivo-icon {
    display: inline-flex;
    align-items: center;
}

/* Variante nav (dentro al drawer): allinea come un MudNavLink */
.vivo-theme-toggle--nav {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
}

/* ============================================================
   Pagine di autenticazione (login, reset, 2FA, recovery)
   ============================================================ */

/* Contenitore centrato verticalmente, card con larghezza contenuta */
.vr-auth-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 64px);
    padding: clamp(1.5rem, 6vh, 5rem) 1rem 2rem;
}

.vr-auth-stack {
    width: 100%;
    max-width: 460px;
}

.vr-auth-brand .mud-typography {
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
}

.vr-auth-card {
    width: 100%;
    padding: 2rem;
    border-radius: 16px;
}

/* Titolo + sottotitolo coerenti in tutte le pagine auth */
.vr-auth-title {
    margin-bottom: .25rem;
}

.vr-auth-subtitle {
    margin-bottom: 1.25rem;
}

/* Icona "hero" tonda sopra ai form 2FA / recovery */
.vr-auth-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary-hover, rgba(226, 0, 26, .08));
    margin: 0 auto .75rem;
}

/* Separatore "oppure" con linee ai lati (le pseudo-linee usano flex-basis 0: non sforano mai) */
.vr-or-separator {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin: 1rem 0;
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    white-space: nowrap;
}

    .vr-or-separator::before,
    .vr-or-separator::after {
        content: "";
        flex: 1 1 0;
        height: 1px;
        background: var(--mud-palette-divider, rgba(0, 0, 0, .12));
    }

/* Campo codice 2FA / recovery: grande, centrato, spaziato, monospace */
.vr-code-input input {
    text-align: center;
    letter-spacing: .45em;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    padding-right: 0;
}

/* Chiave segreta dell'authenticator: leggibile, selezionabile */
.vr-key-box {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
    font-weight: 600;
    word-break: break-all;
    user-select: all;
}

/* Cornice del QR code */
.vr-qr {
    display: inline-flex;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: #fff;
}

.vr-qr svg {
    width: 200px;
    height: 200px;
    display: block;
}

/* Numeri di passo dello "stepper" verticale del setup authenticator */
.vr-step-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}

/* Griglia dei codici di recupero */
.vr-recovery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

.vr-recovery-code {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: center;
    padding: .5rem .25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

@media (max-width: 480px) {
    .vr-recovery-grid {
        grid-template-columns: 1fr;
    }
}

/* Scelta del metodo di verifica al login (radio a tutta larghezza) */
.vr-radio-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vr-radio-option {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .vr-radio-option:hover {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .04));
    }

    .vr-radio-option:has(input:checked) {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-primary-hover, rgba(226, 0, 26, .08));
    }

    .vr-radio-option input {
        accent-color: var(--mud-palette-primary);
    }


.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
}

    .login-divider::before,
    .login-divider::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid var(--mud-palette-divider);
        margin: 0 15px;
    }
/* ===== Ricerca avanzata (app bar): risultati piu' grandi e leggibili ===== */
.vivo-search-pop .mud-list-item {
    padding-top: 10px;
    padding-bottom: 10px;
}

.vivo-search-pop .mud-list-item-text .mud-typography,
.vivo-search-pop .mud-typography-body1,
.vivo-search-pop .mud-typography-body2 {
    font-size: 1.05rem;
    line-height: 1.35;
}

.vivo-search-pop .mud-typography-caption,
.vivo-search-pop .mud-typography-subtitle2 {
    font-size: 0.9rem;
}

.vivo-search-pop .mud-list-subheader,
.vivo-search-pop .mud-typography-overline {
    font-size: 0.85rem;
    font-weight: 600;
}

.vivo-search-pop .mud-icon-root {
    font-size: 1.6rem;
}

/* ============================================================
   Schede di dettaglio a tab verticali (anagrafica, accesso, calendario):
   header e rail delle tab fissi, solo i contenuti scrollano
   ============================================================ */

/* Il container occupa l'altezza visibile (viewport meno app bar 64px e i padding
   verticali del main): è una colonna flex con testata fissa e area contenuti che si estende. */
.vr-anag-detail,
.vr-accesso-detail,
.vr-calendario-detail {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 96px);
}

/* Testata (titolo + back) e alert richiesta trasferimento: sempre visibili, non si comprimono. */
.vr-anag-detail__bar,
.vr-accesso-detail__bar,
.vr-calendario-detail__bar {
    flex: 0 0 auto;
}

/* Ramo creazione (form senza tab): scrolla se il contenuto eccede. */
.vr-anag-detail__scroll,
.vr-accesso-detail__scroll,
.vr-calendario-detail__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Tabs in modifica (verticali, rail a sinistra): la rail e l'area pannelli scrollano in modo
   indipendente, così le molte voci non allungano la pagina. Riempie l'altezza del container flex. */
.vr-anag-detail__tabs,
.vr-accesso-detail__tabs,
.vr-calendario-detail__tabs {
    flex: 1 1 auto;
    min-height: 0;
}

.vr-anag-detail__tabs.mud-tabs,
.vr-accesso-detail__tabs.mud-tabs,
.vr-calendario-detail__tabs.mud-tabs {
    /* lo scroll è delegato ai figli (rail e pannelli), non al contenitore */
    overflow: hidden;
}

/* Rail delle intestazioni: colonna a larghezza fissa a sinistra, scrolla da sé se troppo alta. */
.vr-anag-detail__tabs .mud-tabs-tabbar,
.vr-accesso-detail__tabs .mud-tabs-tabbar,
.vr-calendario-detail__tabs .mud-tabs-tabbar {
    flex: 0 0 264px;
    overflow-y: auto;
    border-right: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

/* Etichette allineate a sinistra, non troncate e senza maiuscolo forzato (più leggibili in verticale). */
.vr-anag-detail__tabs .mud-tab,
.vr-accesso-detail__tabs .mud-tab,
.vr-calendario-detail__tabs .mud-tab {
    justify-content: flex-start;
    max-width: none;
    min-height: 44px;
    text-transform: none;
    text-align: left;
    white-space: normal;
    /* Spazio a destra per il contatore delle voci che ne hanno uno (Appuntamenti, Chat): il badge
       è posizionato in assoluto oltre il bordo del testo, e la rail scorre in verticale — quindi
       ciò che sborda in orizzontale viene tagliato invece di allargare la colonna. */
    padding-right: 24px;
}

/* Area contenuti del pannello attivo: scrolla in modo indipendente dalla rail. */
.vr-anag-detail__tabs .mud-tabs-panels,
.vr-accesso-detail__tabs .mud-tabs-panels,
.vr-calendario-detail__tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Contenuto in flusso verticale normale: senza questo, in layout verticale il pannello eredita un
   display:flex orizzontale che affianca form e barra pulsanti e stira i bottoni a tutta altezza. */
.vr-anag-detail__tabs .mud-tabs-panels,
.vr-anag-detail__tabs .mud-tab-panel,
.vr-accesso-detail__tabs .mud-tabs-panels,
.vr-accesso-detail__tabs .mud-tab-panel,
.vr-calendario-detail__tabs .mud-tabs-panels,
.vr-calendario-detail__tabs .mud-tab-panel {
    display: block;
}

/* Pannello che deve RIEMPIRE l'altezza invece di essere alto quanto il suo contenuto. È il caso
   della chat: lo storico scorre per conto suo e la barra di scrittura resta in fondo, dove la si
   cerca. Va chiesto pannello per pannello (PanelClass) e non messo su tutti: una scheda normale
   forzata a tutta altezza si ritroverebbe con due scorrimenti annidati dove ne basta uno.

   ⚠️ Il selettore è lungo per FORZA, non per abitudine. MudBlazor dà al pannello attivo
   `display: contents` con
   `.mud-tabs-panels .mud-tab-panel:not(.mud-tab).mud-tab-panel-active:not(.mud-tab-panel-hidden)`,
   che pesa cinque classi: un selettore più corto perde e il pannello resta senza box, quindi senza
   altezza da riempire. È anche il motivo per cui il `display: block` qui sopra sul pannello non ha
   mai avuto effetto sulle tab verticali. */
.vr-anag-detail__tabs.mud-tabs .mud-tabs-panels .mud-tab-panel.vr-tab-piena.mud-tab-panel-active,
.vr-accesso-detail__tabs.mud-tabs .mud-tabs-panels .mud-tab-panel.vr-tab-piena.mud-tab-panel-active,
.vr-calendario-detail__tabs.mud-tabs .mud-tabs-panels .mud-tab-panel.vr-tab-piena.mud-tab-panel-active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Barra delle azioni in fondo a una tab (elimina / annulla / salva): un blocco a sé, staccato dal
   form, così non si legge come l'ultima riga dei campi. Prima i pulsanti finivano in mezzo alla
   pagina e non si capiva a cosa si riferissero. */
.vr-azioni-scheda {
    border-top: 2px solid var(--mud-palette-lines-default);
    border-radius: 0;
    background-color: transparent;
}

/* Sezioni della tab "Dati anagrafici" (MudPaper): angoli squadrati, senza bordo. */
.vr-anag-section {
    border-radius: 0;
}

/* NavLink con badge contatore (es. Richieste trasferimento): vincola il contenitore del testo alla
   larghezza disponibile del drawer, così l'etichetta lunga si tronca e il badge resta sempre visibile
   (senza questo, il testo non-vincolato sfora oltre il bordo e taglia il contatore). */
.vr-nav-badge .mud-nav-link-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* Diario del donatore: timeline verticale (evento più recente in alto). */
.vr-diario-timeline {
    position: relative;
}

.vr-diario-item {
    position: relative;
    padding-left: 48px;
    padding-bottom: 20px;
}

/* Linea verticale che collega i marker; nascosta sull'ultimo elemento. */
.vr-diario-item::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 4px;
    bottom: -4px;
    width: 2px;
    background-color: var(--mud-palette-lines-default);
}

.vr-diario-item:last-child::before {
    display: none;
}

.vr-diario-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* alone del colore di sfondo così il marker "stacca" dalla linea */
    box-shadow: 0 0 0 4px var(--mud-palette-surface);
}

.vr-diario-marker .mud-icon-root {
    font-size: 1.15rem;
}

.vr-diario-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 12px;
    background-color: var(--mud-palette-surface);
}

.vr-diario-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Link "apri accesso" spinto a destra nell'intestazione della card. */
.vr-diario-head .vr-diario-link {
    margin-left: auto;
}

.vr-diario-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Codice OTP mostrato a schermo dalla sola build di Debug (LoginVerify): monospace e
   selezionabile, per poterlo copiare quando serve reinserirlo a mano. */
.vr-code-debug {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .15em;
    user-select: all;
}

/* Stacco tra due sezioni distinte della stessa pagina (es. dati accesso / donazione ed esami):
   linea marcata con respiro ampio, per non far leggere i due blocchi come uno solo. */
.vr-sezione-separatore {
    height: 0;
    margin: 2rem 0;
    border-top: 2px solid var(--mud-palette-lines-default);
}

/* ── Blocco schermo per inattività ────────────────────────────────────────────
   L'overlay copre l'intera finestra SENZA smontare la pagina sotto, che resta viva
   con il lavoro non salvato. Lo z-index sta sopra i dialog di MudBlazor (1400) e i
   popover, altrimenti un dialog aperto resterebbe visibile davanti al blocco. */
.vr-idle-lock {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* Sfondo pieno: fa da superficie per la scheda di sblocco. Non serve sfocare, perché il
       contenuto sotto non viene proprio dipinto (vedi .vr-idle-nascosto): la sfocatura
       lavorerebbe sul nulla, costando GPU senza aggiungere protezione. */
    background: var(--mud-palette-background);
}

/* Contenuto occultato durante il blocco: NON viene dipinto, invece di essere soltanto coperto.
   `visibility` e non `display`, di proposito: mantiene il layout, quindi allo sblocco non c'è
   ricalcolo, non si perdono le posizioni di scorrimento e i grafici non si ritrovano misurati a
   dimensione zero. Gli elementi restano nel DOM perché i componenti Blazor devono restare vivi:
   smontarli farebbe perdere il lavoro non salvato, cioè proprio ciò che il blocco protegge. */
.vr-idle-nascosto {
    visibility: hidden !important;
}

.vr-idle-lock__card {
    width: min(420px, 100%);
    max-height: 90vh;
    overflow-y: auto;
}

/* Preavviso: ha l'aspetto di una finestra di dialogo — centrato, con velo scuro dietro — ma è
   volutamente TRASPARENTE AI CLIC. Qualunque attività lo fa sparire, quindi intercettare i clic
   significherebbe mangiarsi il primo clic dell'utente proprio mentre torna a lavorare. */
.vr-idle-warning {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* La sola scheda torna cliccabile, per il pulsante "Sono qui". Larghezza fissa (non solo massima)
   così il pulsante a tutta larghezza sotto al testo ha sempre la stessa misura, invece di allargarsi
   o stringersi al variare del numero di secondi rimasti. */
.vr-idle-warning__card {
    pointer-events: auto;
    width: min(440px, 100%);
}

/* Schede della scelta del secondo fattore: l'intera scheda è cliccabile, quindi deve dirlo
   con il cursore e reagire al passaggio del mouse. */
.vr-2fa-scelta {
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.vr-2fa-scelta:hover {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

/* Contenuto di una scheda che non guadagna nulla dallo schermo largo: due colonne di campi, o una
   tabella di posti, tirate a 2000px si leggono peggio, non meglio. Il contenitore della scheda
   calendario sta largo perché alla griglia del mese la larghezza serve tutta; chi non ne ha
   bisogno si autolimita mettendosi questa classe. */
.vr-scheda-stretta {
    max-width: 1150px;
}

/* Blocco che sta lavorando: smorzato e sordo ai clic. Serve quando fra il clic e il risultato c'è
   una lettura del database — in quel mezzo secondo la schermata è ancora lì, ancora cliccabile, e
   i clic che si accumulano non fanno niente. Meglio dire "sto lavorando" che raccoglierli e
   ignorarli. La barra di avanzamento va tenuta FUORI da questo blocco, o si smorza con lui. */
.vr-inerte {
    pointer-events: none;
    opacity: .55;
    transition: opacity .15s ease;
}

/* Contenitore di una scheda che può velarsi mentre lavora: serve solo a dare un riferimento al
   MudOverlay in modalità Absolute, che altrimenti si ancorerebbe alla finestra e coprirebbe anche
   quello che sta legittimamente fuori dalla scheda. */
.vr-pannello-scheda {
    position: relative;
}

/* Barra di attesa in cima a una scheda che sta lavorando: appiccicata al bordo alto dell'area che
   scorre, e sopra il velo. Il velo è ancorato al contenuto, quindi su una scheda molto alta la sua
   rotella finisce centrata a metà di tutta l'altezza — fuori schermo proprio per chi ha appena
   cliccato qualcosa in alto. Questa si vede a qualunque scorrimento. */
.vr-attesa-scheda {
    position: sticky;
    top: 0;
    z-index: 1301;
}