/* ===========================================================
   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);
}

/* 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;
}

/* ===========================================================
   Scelta della palette (PaletteSelector.razor): riga del menu laterale
   allineata alle voci MudNavLink, con un campione per palette. Il campione
   mostra la barra (metà alta) e il colore delle azioni (metà bassa).
   =========================================================== */

.vr-palette {
    display: flex;
    align-items: center;
    cursor: default;
}

.vr-palette__campioni {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}

.vr-palette__campione {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background: linear-gradient(to bottom, var(--vr-palette-barra) 50%, var(--vr-palette-primario) 50%);
    cursor: pointer;
}

.vr-palette__campione--attivo {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

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

/* ===========================================================
   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;
}