/* _content/Menestrello.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-qxkzt7xnhy] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-qxkzt7xnhy] {
    flex: 1;
}

.sidebar[b-qxkzt7xnhy] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-qxkzt7xnhy] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: center;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
}

/* Rimasti i soli interruttori di aspetto e lingua, la riga li tiene a destra
   (prima i link legali stavano a sinistra e "space-between" li separava). */
.top-row-shell[b-qxkzt7xnhy] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.top-row-actions[b-qxkzt7xnhy] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Per Ti Canto la barra segue la veste (chiara o bruno caldo) invece del grigio
   fisso: la regola sta in app.css, non qui. Scritta qui aveva bisogno di
   :global(...) per uscire dall'isolamento del componente — sintassi di webpack,
   che Blazor non traduce: finiva tale e quale nel foglio generato, il browser
   non la capiva e buttava via la regola intera. La barra restava bianca anche
   col tema scuro. */

.top-row-shell[b-qxkzt7xnhy]  .lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.top-row-shell[b-qxkzt7xnhy]  .lang-switcher .btn {
    margin-left: 0;
}

    .top-row[b-qxkzt7xnhy]  a, .top-row[b-qxkzt7xnhy]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-qxkzt7xnhy]  a:hover, .top-row[b-qxkzt7xnhy]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-qxkzt7xnhy]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    /* Su telefono la riga di servizio sparisce: i suoi link e gli interruttori
       di aspetto e lingua sono passati nel menu a tendina (NavMenu), così niente
       pulsante esce dalla barra. Sul desktop resta comoda in alto a destra. */
    .top-row[b-qxkzt7xnhy] {
        display: none;
    }
}

@media (min-width: 641px) {
    .page[b-qxkzt7xnhy] {
        flex-direction: row;
    }

    .sidebar[b-qxkzt7xnhy] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-qxkzt7xnhy] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-qxkzt7xnhy]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-qxkzt7xnhy], article[b-qxkzt7xnhy] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-qxkzt7xnhy] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-qxkzt7xnhy] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Menestrello.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-v66k1yoicb] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-v66k1yoicb] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-v66k1yoicb] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-v66k1yoicb] {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/* Lo stemma accanto al nome: stessa misura della riga, così non alza la barra. */
.navbar-stemma[b-v66k1yoicb] {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
}

/* Le icone delle voci disegnate per il sito: il PNG nero fa da maschera e il
   colore lo mette il testo della voce, così seguono il tema e si accendono in
   bianco quando la voce è quella aperta. Le classi di Bootstrap Icons che
   c'erano prima (bi-stars, bi-disc…) non erano mai state definite: accanto a
   quelle quattro voci non compariva niente. */
.bi.ic-menu[b-v66k1yoicb] {
    background-image: none;
    background-color: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat;
    mask: var(--ic) center / contain no-repeat;
}

/* Le icone erano 1.25rem: leggibili ma anonime, e i disegni fatti apposta per
   il menu (crea, studio, brani, piani) non si apprezzavano. La colonna e' larga
   250px e la riga alta 3rem: c'era spazio per farle respirare. I PNG sono 60x60,
   il doppio di quanto serve a questa misura, quindi restano nitidi. */
.bi[b-v66k1yoicb] {
    display: inline-block;
    position: relative;
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.85rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-v66k1yoicb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-v66k1yoicb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-v66k1yoicb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-v66k1yoicb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-v66k1yoicb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-v66k1yoicb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-v66k1yoicb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-v66k1yoicb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-v66k1yoicb] {
    /* Un filo piu' grande di prima (0.9rem), per stare in proporzione con le
       icone cresciute. */
    font-size: 0.95rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-v66k1yoicb] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-v66k1yoicb] {
        padding-bottom: 1rem;
    }

    .nav-item[b-v66k1yoicb]  .nav-link {
        color: var(--f-laterale-testo, #d7d7d7);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-v66k1yoicb]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-v66k1yoicb]  .nav-link:hover {
    background-color: color-mix(in srgb, var(--f-laterale-testo, #fff) 10%, transparent);
    color: white;
}

/* L'indirizzo di posta nella colonna: troncato coi puntini, e al passaggio del
   cursore scorre per farsi leggere tutto.

   Il contenitore e' un «container» di query proprio per questo: cosi' il CSS sa
   quanto e' largo (100cqw) e puo' calcolare di quanto spostare il testo —
   larghezza del testo meno larghezza della colonna. Senza quel dato non si puo'
   sapere di quanto scorrere, perche' dipende da quanto e' lungo l'indirizzo.
   Il min(0px, ...) serve agli indirizzi corti: li' il conto verrebbe positivo, e
   il testo scivolerebbe a destra invece di stare fermo. */
.nav-email[b-v66k1yoicb] {
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
}

.nav-email-testo[b-v66k1yoicb] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item[b-v66k1yoicb]  .nav-link:hover .nav-email-testo,
.nav-item[b-v66k1yoicb]  .nav-link:focus-visible .nav-email-testo {
    /* Via il troncamento: il testo torna lungo quanto e', e a nasconderne i
       pezzi ci pensa il contenitore. */
    max-width: none;
    width: max-content;
    text-overflow: clip;
    animation: scorri-email-b-v66k1yoicb 9s linear infinite alternate;
}

@keyframes scorri-email-b-v66k1yoicb {
    /* Una pausa in cima e una in fondo: senza, riparte di scatto e si fa fatica
       a leggere l'inizio. */
    0%, 12% { transform: translateX(0); }
    88%, 100% { transform: translateX(min(0px, calc(100cqw - 100%))); }
}

/* Chi ha chiesto meno animazioni non se la ritrova: resta il troncamento, e
   l'indirizzo per intero sta nel titolo. */
@media (prefers-reduced-motion: reduce) {
    .nav-item[b-v66k1yoicb]  .nav-link:hover .nav-email-testo,
    .nav-item[b-v66k1yoicb]  .nav-link:focus-visible .nav-email-testo {
        max-width: 100%;
        width: auto;
        text-overflow: ellipsis;
        animation: none;
    }
}

.nav-scrollable[b-v66k1yoicb] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-v66k1yoicb] {
    display: block;
}

/* Aspetto, lingua e link di servizio nel menu a tendina: solo su telefono.
   Sul desktop stanno nella riga in alto, quindi qui spariscono (regola sotto). */
.nav-sep[b-v66k1yoicb] {
    border: 0;
    height: 1px;
    margin: 0.5rem 1rem;
    background: color-mix(in srgb, var(--f-laterale-testo, #fff) 16%, transparent);
}

/* Aspetto e lingua affiancati, a meta' ciascuno: adesso mostrano un solo stato
   e ci stanno comodi su una riga. */
.nav-toggles[b-v66k1yoicb] {
    display: flex;
    gap: 0.6rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.nav-toggles[b-v66k1yoicb]  .stato-switch {
    flex: 1;
    min-height: 2.75rem;
}

.nav-extra .nav-link[b-v66k1yoicb] {
    color: var(--f-laterale-testo, #d7d7d7);
    text-decoration: none;
}

.nav-extra .nav-link:hover[b-v66k1yoicb] {
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-v66k1yoicb] {
        display: none;
    }

    /* Sul desktop il menu laterale mostra solo le voci di navigazione: aspetto,
       lingua e link di servizio vivono nella riga in alto. */
    .nav-extra[b-v66k1yoicb] {
        display: none;
    }

    .nav-scrollable[b-v66k1yoicb] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}