/* ⚠️ COPIA di AVISNext.Core/AVISNext.Core.UI/wwwroot/css/DefaultTheme.css: la demo deve avere
   le stesse rifiniture del gestionale. Se l'originale cambia, ricopiarlo. */

/* ===========================================================
   Rifiniture condivise della "proposta 06" (SketchGUI/themes/06.css).
   Qui vive SOLO ciò che il MudTheme (DefaultTheme) non può esprimere via
   palette: i separatori a 1px che, in assenza di ombre (--vr-shadow:none),
   staccano appbar e drawer dalle superfici bianche. Niente JS, niente colori
   cablati: si usano le CSS variable generate dal tema MudBlazor.
   =========================================================== */

.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-drawer.mud-drawer-pos-left {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ===========================================================
   Contrasto dentro la barra in alto.

   ⚠️ I campi (la ricerca) prendono testo, segnaposto, icone e bordi dai colori della PAGINA, tarati
   per il fondo bianco: su una barra colorata (Goccia, Notte) diventavano blu scuro su blu, cioè
   illeggibili. Qui, solo dentro la barra, quei colori si ricavano dal testo della barra, che il tema
   garantisce leggibile sul suo fondo. Il popover dei risultati non ne risente: vive fuori dalla barra.
   =========================================================== */
.mud-appbar {
    --mud-palette-text-primary: var(--mud-palette-appbar-text);
    --mud-palette-text-secondary: color-mix(in srgb, var(--mud-palette-appbar-text) 80%, transparent);
    --mud-palette-action-default: color-mix(in srgb, var(--mud-palette-appbar-text) 80%, transparent);
    --mud-palette-lines-inputs: color-mix(in srgb, var(--mud-palette-appbar-text) 45%, transparent);
}

.mud-appbar .mud-input > input::placeholder {
    color: var(--mud-palette-appbar-text);
    opacity: .75;
}

/* ===========================================================
   Schede chiare posate nel menu laterale (il selettore del contesto).

   Sul menu scuro il layout ridefinisce primario, info e secondario (DefaultTheme.StileMenu) perché
   si leggano sul blu notte; dentro una scheda bianca quei colori chiari sparirebbero di nuovo, quindi
   lì si torna a quelli della pagina. Le variabili --vr-pagina-* sono risolte su :root, prima di ogni
   ridefinizione.
   =========================================================== */
:root {
    --vr-pagina-primario: var(--mud-palette-primary);
    --vr-pagina-info: var(--mud-palette-info);
    --vr-pagina-secondario: var(--mud-palette-secondary);
}

.mud-drawer .mud-paper {
    --mud-palette-primary: var(--vr-pagina-primario);
    --mud-palette-info: var(--vr-pagina-info);
    --mud-palette-secondary: var(--vr-pagina-secondario);
}

/* Numero dei passi non ancora raggiunti di uno stepper: MudBlazor lo scrive in bianco su un grigio
   semitrasparente (1.9:1). Un passo futuro non è un comando disabilitato, il suo numero va letto:
   fondo pieno col grigio secondario e cifra del colore della superficie, leggibile anche nello scuro.
   Il selettore esclude i passi colorati (attivo, completato), che hanno una classe mud-<colore>, ed è
   lungo quanto quello di MudBlazor per vincerlo. I passi disabilitati restano a MudBlazor (!important). */
.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon:not([class*=" mud-"]) {
    background-color: var(--mud-palette-text-secondary);
    color: var(--mud-palette-surface);
}

/* Passi colorati (attivo, completato): MudBlazor scrive la cifra sempre in bianco, che nello scuro
   finisce su un azzurro chiaro (2.3:1). Si usa il colore di contrasto della tinta, come i pulsanti. */
.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon.mud-primary { color: var(--mud-palette-primary-text); }
.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon.mud-secondary { color: var(--mud-palette-secondary-text); }
.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon.mud-success { color: var(--mud-palette-success-text); }
.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon.mud-error { color: var(--mud-palette-error-text); }

/* Segnaposto dell'editor di testo ricco (Jodit): il suo grigio fisso si ferma a 2.5:1. */
.jodit-placeholder {
    color: var(--mud-palette-text-secondary) !important;
}

/* Tipografia protagonista: titoli più marcati, come nel tema 06. */
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3 {
    letter-spacing: -.5px;
}

/* ===========================================================
   Gestione documenti (GestioneDocumenti.razor)

   MudFileUpload renderizza un blocco a larghezza piena: dentro una toolbar o
   una riga di azioni il pulsante si allargherebbe a tutta la riga, quindi lo
   si riporta a dimensione naturale. La regola sta qui e non in un CSS isolato
   perche' deve raggiungere il markup di un componente figlio (MudFileUpload),
   che lo scope del CSS isolation non copre.
   =========================================================== */

.vr-documenti__upload,
.vr-documenti__upload .mud-fileupload,
.vr-documenti__upload .mud-file-upload {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}

/* Ancore usate come pulsanti icona (scarica): stesso ingombro e stesso feedback
   al passaggio del mouse dei MudIconButton che le affiancano. */
.vr-documenti__azione {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--mud-palette-action-default);
    text-decoration: none;
    transition: background-color .2s cubic-bezier(.4, 0, .2, 1);
}

.vr-documenti__azione:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.vr-documenti__azioni {
    flex-wrap: nowrap;
}

/* Riquadro di anteprima (DocumentoAnteprimaDialog): altezza legata alla finestra, cosi' PDF e
   video restano leggibili senza far scorrere il dialog. */
.vr-documenti__anteprima {
    width: 100%;
    height: 75vh;
    border: 0;
    background-color: var(--mud-palette-background-gray);
}

.vr-documenti__anteprima--centrata {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.vr-documenti__anteprima--centrata img,
.vr-documenti__anteprima--centrata video {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

/* Nome del documento: apre l'anteprima al click, quindi ha il cursore a mano anche se
   MudLink senza Href non lo imposta da solo. */
.vr-documenti__nome {
    cursor: pointer;
    text-align: left;
}

/* ===========================================================
   Pannello «Aspetto» (PannelloAspetto.razor): pulsante tondo nell'ultima
   riga del menu laterale, accanto al contesto, che apre modalità e palette.

   Il pannello si apre verso l'alto a partire dall'angolo in basso a
   sinistra, sopra il menu. Sta sopra cassetto e barra (1100-1300) ma sotto
   i dialog (1400) e il blocco schermo: un dialog aperto deve coprirlo.
   =========================================================== */

/* Ultima riga del menu: i pulsanti tondi del contesto (ContextSwitcher) e dell'aspetto, affiancati. */
.vr-menu-fondo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 12px;
}

/* Pulsante tondo del fondo menu, senza testo. È una tessera chiara con i colori della PAGINA: dentro
   un menu scuro il primario è ridefinito per quel fondo e sul bianco non si leggerebbe. */
.vr-tondo-menu {
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--mud-palette-surface);
    color: var(--vr-pagina-primario);
    transition: transform .15s ease;
}

.vr-tondo-menu:hover:not(:disabled) {
    transform: scale(1.06);
}

.vr-tondo-menu:focus-visible {
    outline: 2px solid var(--vr-pagina-primario);
    outline-offset: 2px;
}

/* Prima che il circuito sia pronto il pulsante non risponde: lo dice invece di ignorare il clic. */
.vr-tondo-menu:disabled {
    cursor: default;
    opacity: .6;
}

/* Àncora della finestra dei contesti: il popover si posiziona rispetto a questo contenitore. */
.vr-contesto {
    position: relative;
    display: inline-flex;
}

/* Il form dell'uscita (SessioneMenu) non fa scatola: il suo pulsante sta in riga con gli altri. */
.vr-form-in-riga {
    display: contents;
}

/* Finestra dei contesti (ContextSwitcher): niente troncamenti, i nomi vanno a capo.

   ⚠️ Bordi e ombra espliciti: il tema spegne le ombre, e senza un contorno la finestra si confondeva
   con la pagina sotto e i contesti l'uno con l'altro. Qui ogni contesto è una scheda a sé. */
.vr-contesti {
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}

.vr-contesti__testata {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.vr-contesti__elenco {
    max-height: min(480px, calc(100dvh - 200px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 12px 12px;
}

.vr-contesti__cliente {
    display: block;
    padding: 8px 4px 0;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.vr-contesti__voce {
    display: flex;
    align-items: flex-start;
    /* Esplicito: gli stili di base dei pulsanti centrano il contenuto. */
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

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

.vr-contesti__voce:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.vr-contesti__voce--attivo,
.vr-contesti__voce--attivo:hover {
    border: 2px solid var(--mud-palette-primary);
    padding: 9px 11px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    cursor: default;
}

.vr-contesti__dati {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vr-contesti__nome {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: .9rem;
}

/* Etichetta (Ruolo, Sede, …) in colonna fissa e valore accanto: si scorre l'elenco leggendo una
   colonna sola. */
.vr-contesti__riga {
    display: grid;
    grid-template-columns: 76px 1fr;
    font-size: .8125rem;
}

.vr-contesti__riga > span {
    color: var(--mud-palette-text-secondary);
}

.vr-aspetto__velo {
    position: fixed;
    inset: 0;
    z-index: 1351;
}

.vr-aspetto__pannello {
    position: fixed;
    left: 12px;
    bottom: 64px;
    z-index: 1352;
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}

.vr-aspetto__testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.vr-aspetto__griglia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.vr-aspetto__voce {
    display: flex;
    flex-direction: column;
    /* Esplicito: gli stili di base dei pulsanti centrano il contenuto, e la miniatura si stringeva. */
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    text-align: left;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    cursor: pointer;
}

.vr-aspetto__voce:hover {
    border-color: var(--mud-palette-primary);
}

.vr-aspetto__voce:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.vr-aspetto__voce--scelta {
    border: 2px solid var(--mud-palette-primary);
    padding: 7px;
}

.vr-aspetto__nome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: .875rem;
}

.vr-aspetto__descrizione {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

/* Miniatura della palette: i colori arrivano in linea dal componente, qui solo le proporzioni. */
.vr-aspetto__mini {
    display: flex;
    flex-direction: column;
    height: 64px;
    border: 1px solid;
    border-radius: 6px;
    overflow: hidden;
}

.vr-aspetto__mini-barra {
    flex: 0 0 14px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    border-bottom: 1px solid;
}

.vr-aspetto__mini-barra > span {
    width: 26px;
    height: 4px;
    border-radius: 2px;
}

.vr-aspetto__mini-corpo {
    flex: 1;
    display: flex;
    min-height: 0;
}

.vr-aspetto__mini-menu {
    flex: 0 0 34%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 5px;
    border-right: 1px solid;
}

.vr-aspetto__mini-menu > span {
    height: 3px;
    border-radius: 2px;
    opacity: .85;
}

.vr-aspetto__mini-pagina {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
}

.vr-aspetto__mini-pagina > span {
    height: 4px;
    border-radius: 2px;
}

.vr-aspetto__mini-pagina > .vr-aspetto__mini-azione {
    width: 40%;
    height: 9px;
    margin-top: auto;
    border-radius: 3px;
}

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

@media print {
    .vr-tondo-menu {
        display: none;
    }
}

/* ===========================================================
   Logo AVISNext (LogoAvisNext.razor)
   =========================================================== */

.vr-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.vr-logo--esteso {
    width: auto;
}

.vr-logo--compatto {
    gap: 10px;
}

.vr-logo__simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vr-logo__simbolo img {
    height: 100%;
    width: auto;
}

/* Su barra blu: tessera bianca, con il simbolo un po' rientrato. */
.vr-logo__simbolo--tessera {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
}

.vr-logo__nome {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: inherit;
}

/* Nella barra il logo viene subito dopo il pulsante del menu. */
.mud-appbar .vr-logo {
    margin-left: 8px;
}