/* /Components/Layout/BackofficeLayout.razor.rz.scp.css */
.mainBO[b-xo7x8ky6i0]{
    display:flex;
    flex-grow:1;
}
.itemBO[b-xo7x8ky6i0] {
    display: flex;
}
.bodyItem[b-xo7x8ky6i0] {
    overflow-y: auto;
    flex-grow: 1;
    padding:10px;
}

#blazor-error-ui[b-xo7x8ky6i0] {
    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-xo7x8ky6i0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/EmptyLayout.razor.rz.scp.css */


#blazor-error-ui[b-q9dunpsspm] {
    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-q9dunpsspm] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */

.main[b-t6ih5ijwvf]{
    display:flex;
    flex-direction:column;
    flex-grow:1;
}

#blazor-error-ui[b-t6ih5ijwvf] {
    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-t6ih5ijwvf] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Backoffice/FileHandler.razor.rz.scp.css */
.filesContainer[b-owzqf42l9j] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: stretch;
    padding:5px;
    gap:2rem;
}
.filesNavbar[b-owzqf42l9j]{
    display:flex;
    width:100%;
}
.filesNavbarItems[b-owzqf42l9j] {
    display: flex;
    flex-grow: 1;
    align-items: center;
}
.filesSearchContainer[b-owzqf42l9j] {
    
}
.filesButtonsContainer[b-owzqf42l9j]{
    justify-content:flex-end;
    gap:5px;
}
.filesItemsContainer[b-owzqf42l9j]{
    display:flex;
    flex-grow:1;
    justify-content:space-between;
}
/* /Components/Pages/Backoffice/Folder.razor.rz.scp.css */
.folderContainer[b-lmb85zaeqy] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    gap: 1.5rem;
    opacity: 0;
    animation: folderFadeIn-b-lmb85zaeqy 0.5s ease-out forwards;
}

.folderHeader[b-lmb85zaeqy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.folderDeleteButton[b-lmb85zaeqy] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.folderDeleteButton:hover[b-lmb85zaeqy] {
    background: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
    transform: translateY(-2px);
}

.folderCard[b-lmb85zaeqy] {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    gap: 2rem;
    padding: 1.75rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    backdrop-filter: blur(10px);
}

.folderCoverSection[b-lmb85zaeqy] {
    position: relative;
    flex: 0 1 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 16px;
    overflow: hidden;
    min-height: 0;
}

.folderCoverImage[b-lmb85zaeqy] {
    border-radius: 16px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.folderCoverSection:hover .folderCoverImage[b-lmb85zaeqy] {
    transform: scale(1.03);
    filter: brightness(0.85);
}

.folderCoverOverlay[b-lmb85zaeqy] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: white;
    font-weight: 600;
    opacity: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.folderCoverSection:hover .folderCoverOverlay[b-lmb85zaeqy] {
    opacity: 1;
}

.folderCoverPlaceholder[b-lmb85zaeqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 16px;
    color: var(--mud-palette-text-secondary);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.folderCoverSection:hover .folderCoverPlaceholder[b-lmb85zaeqy] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.folderFormSection[b-lmb85zaeqy] {
    display: flex;
    flex-direction: column;
    flex: 1 1 60%;
    min-height: 0;
    justify-content: space-between;
    gap: 1.5rem;
}

.folderFields[b-lmb85zaeqy] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}

.folderActions[b-lmb85zaeqy] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.folderCancelButton[b-lmb85zaeqy],
.folderSaveButton[b-lmb85zaeqy] {
    border-radius: 12px !important;
    min-width: 160px;
    text-transform: none !important;
    font-weight: 600 !important;
}

.folderSaveButton[b-lmb85zaeqy] {
    box-shadow: 0 6px 16px rgba(47, 156, 244, 0.35) !important;
}

@keyframes folderFadeIn-b-lmb85zaeqy {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .folderCard[b-lmb85zaeqy] {
        flex-direction: column;
    }

    .folderCoverSection[b-lmb85zaeqy] {
        flex: 0 0 260px;
    }

    .folderActions[b-lmb85zaeqy] {
        justify-content: stretch;
    }

    .folderCancelButton[b-lmb85zaeqy],
    .folderSaveButton[b-lmb85zaeqy] {
        flex: 1 1 0;
        min-width: 0;
    }
}
/* /Components/Pages/Backoffice/Home.razor.rz.scp.css */
.homeContainer[b-hhzhgufsmt] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    opacity: 0;
    animation: fadeIn-b-hhzhgufsmt 0.6s ease-out forwards;
}

.homeHeader[b-hhzhgufsmt] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.widgets[b-hhzhgufsmt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.25rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 900px) {
    .homeContainer[b-hhzhgufsmt] {
        height: auto;
    }

    .widgets[b-hhzhgufsmt] {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(120px, 1fr));
    }
}

@keyframes fadeIn-b-hhzhgufsmt {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/Pages/Backoffice/Image.razor.rz.scp.css */
.imageContainer[b-9ayevpaa2x] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    gap: 1.5rem;
    opacity: 0;
    animation: imageFadeIn-b-9ayevpaa2x 0.5s ease-out forwards;
}

.imageHeader[b-9ayevpaa2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.imageHeader[b-9ayevpaa2x]  .imageDeleteButton {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.imageHeader[b-9ayevpaa2x]  .imageDeleteButton:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
    transform: translateY(-2px);
}

.imageCard[b-9ayevpaa2x] {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    gap: 2rem;
    padding: 1.75rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    backdrop-filter: blur(10px);
}

.imageCoverSection[b-9ayevpaa2x] {
    position: relative;
    flex: 0 1 40%;
    border-radius: 16px;
    overflow: hidden;
    min-height: 0;
}

.imageUploadZone[b-9ayevpaa2x] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
}

/* Nasconde il wrapper (e con lui l'input file nativo) tramite un div scritto direttamente in questo
   componente: il clipping funziona sull'antenato indipendentemente da quali attributi/classi
   Blazor riesca a inoltrare sull'<input> reso da InputFile. */
.imageUploadInputWrapper[b-9ayevpaa2x] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.imageCoverSection[b-9ayevpaa2x]  .imageCoverImage {
    border-radius: 16px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.imageCoverSection:hover[b-9ayevpaa2x]  .imageCoverImage {
    transform: scale(1.03);
    filter: brightness(0.85);
}

.imageCoverOverlay[b-9ayevpaa2x] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: white;
    font-weight: 600;
    opacity: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.imageCoverSection:hover .imageCoverOverlay[b-9ayevpaa2x] {
    opacity: 1;
}

.imageCoverPlaceholder[b-9ayevpaa2x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default));
    border-radius: 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--bgColorNavbar));
    color: #4e4848;
    cursor: pointer;
    transition: border-color 0.2s ease, border-style 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.imageUploadZone:hover .imageCoverPlaceholder[b-9ayevpaa2x],
.imageCoverSection:hover .imageCoverPlaceholder[b-9ayevpaa2x] {
    border-color: var(--mud-palette-primary);
    border-style: solid;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--bgColorNavbar));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
    transform: scale(1.015);
}

.imageFormSection[b-9ayevpaa2x] {
    display: flex;
    flex-direction: column;
    flex: 1 1 60%;
    min-width: 0;
    min-height: 0;
    justify-content: space-between;
    gap: 1.5rem;
}

.imageFormSection[b-9ayevpaa2x]  .imageFields {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 7px;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
}

.imageMetaSection[b-9ayevpaa2x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.imageMetaTitleRow[b-9ayevpaa2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.imageMetaTitle[b-9ayevpaa2x] {
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.imageMetaTitleRow[b-9ayevpaa2x]  .imageImportMetaButton {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

.imageMetaGrid[b-9ayevpaa2x] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.imageActions[b-9ayevpaa2x] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.imageActions[b-9ayevpaa2x]  .imageCancelButton,
.imageActions[b-9ayevpaa2x]  .imageSaveButton {
    border-radius: 12px !important;
    min-width: 160px;
    text-transform: none !important;
    font-weight: 600 !important;
}

.imageActions[b-9ayevpaa2x]  .imageSaveButton {
    box-shadow: 0 6px 16px rgba(47, 156, 244, 0.35) !important;
}

@keyframes imageFadeIn-b-9ayevpaa2x {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .imageCard[b-9ayevpaa2x] {
        flex-direction: column;
    }

    .imageCoverSection[b-9ayevpaa2x] {
        flex: 0 0 260px;
    }

    .imageMetaGrid[b-9ayevpaa2x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .imageActions[b-9ayevpaa2x] {
        justify-content: stretch;
    }

    .imageActions[b-9ayevpaa2x]  .imageCancelButton,
    .imageActions[b-9ayevpaa2x]  .imageSaveButton {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .imageMetaGrid[b-9ayevpaa2x] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Backoffice/Login.razor.rz.scp.css */
.main[b-bs059028ut] {
    display: flex;
    flex-grow: 1;
    gap:1px;
    background-color: var(--bgColorNavbar);
}
.fotocamera[b-bs059028ut] {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
    position: relative;
    transition: transform 1s ease-in-out;
}
.fotocamera-loaded[b-bs059028ut] {
    transform: translateX(-20%);
}

.item[b-bs059028ut] {
    display: flex;
    width: 700px;
    align-items: flex-end;
    background-color: var(--bgColorNavbar);
}

.leftButton[b-bs059028ut] {
    width: 150px;
    height: 35px;
    background-color: #7ea3b5;
    border: 10px solid black;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 0px;
    transition: height ease-in-out 0.2s;
}
.leftButton:hover[b-bs059028ut]{
    height:30px;
}

.rightButton[b-bs059028ut] {
    width: 97px;
    height: 34px;
    background-color: #7ea3b5;
    border: 10px solid black;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 0px;
    transition: height ease-in-out 0.2s;
}
    .rightButton:hover[b-bs059028ut] {
        height: 29px;
    }

.centerButton[b-bs059028ut] {
    border-radius: 15% 15% 0% 0% / 100% 100% 0% 0%;
    width: 209px;
    height: 75px;
    background-color: #7ea3b5;
    border: 10px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 0px;
}

.centerButtonItem[b-bs059028ut] {
    width: 60px;
    height: 10px;
    background-color: white;
    border-radius: 20px;
    border: 10px solid black;
    transition: border-color ease-in-out 0.2s;
}
    .centerButtonItem:hover[b-bs059028ut] {
        border-color: white;
    }

.camera[b-bs059028ut] {
    flex-direction: column;
    border: 10px solid black;
    border-radius: 40px;
    align-items: center;
    justify-content: center;
    height: 540px;
}

.cameraItem[b-bs059028ut] {
    display: flex;
    width: 100%;
    border: 10px solid black;
    border-right: 0px;
    border-left: 0px;
    background-color: #7ea3b5;
}

.cameraEmptyItem[b-bs059028ut] {
    display: flex;
    flex-grow: 1;
}

.cerchioEsterno[b-bs059028ut] {
    position: absolute;
    bottom: -74px;
    left: 21%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: #ffd960;
    border: 10px solid black;
}

.cerchioInterno[b-bs059028ut] {
    position: absolute;
    bottom: -24px;
    left: 28%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #333333;
    border: 10px solid black;
}

.cerchioBianco[b-bs059028ut] {
    position: absolute;
    top: 23px;
    left: 39%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: white;
}

.cerchioBiancoSmall[b-bs059028ut] {
    width: 50px;
    height: 50px;
    top: 130px;
    left: 35%;
}

.tastoLaterale[b-bs059028ut] {
    width: 60px;
    height: 27px;
    border: 10px solid black;
    background-color: white;
    border-radius: 15px;
    position: absolute;
    right: 2%;
    top: 10px;
    transition: background-color ease-in-out 0.2s;
}
.tastoLaterale:hover[b-bs059028ut]{
    background-color:black;
}

.loginFoto[b-bs059028ut] {
    display: none;
    padding: 10px;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    height: 330px;
    width: 500px;
    position: absolute;
    right: 20%;
    top: 36%;
    background-color: var(--bgColor);
    z-index: 1;
    animation: slideInRight-b-bs059028ut 1s ease-out;
}
.loginFoto-loaded[b-bs059028ut] {
    display: flex;
}

@keyframes slideInRight-b-bs059028ut {
    from {
        opacity: 0;
        transform: translateX(500px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.loginSpan[b-bs059028ut] {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 3px;
}
/* /Components/Pages/Backoffice/Notifications.razor.rz.scp.css */
.notificationsContainer[b-waq2j1gjwo] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    gap: 1.5rem;
    opacity: 0;
    animation: notificationsFadeIn-b-waq2j1gjwo 0.5s ease-out forwards;
}

.notificationsHeader[b-waq2j1gjwo] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.notificationsCounters[b-waq2j1gjwo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.notificationsCounters[b-waq2j1gjwo]  .notificationsDeleteRead {
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.notificationsCounters[b-waq2j1gjwo]  .notificationsDeleteRead:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
    transform: translateY(-2px);
}

/* MudPaper, MudText e gli altri componenti generano il proprio elemento radice fuori dallo
   scope CSS di questa pagina: senza ::deep queste regole non aggancerebbero nulla. */
.notificationsContainer[b-waq2j1gjwo]  .notificationsEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: #7a7a8c;
    background: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 20px;
}

.notificationsList[b-waq2j1gjwo] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    gap: 1rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.notificationsList[b-waq2j1gjwo]  .notificationCard {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-radius: 20px;
    border-left: 4px solid transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* Non letta: accento pieno e sfondo acceso, deve saltare all'occhio nell'elenco. */
.notificationsList[b-waq2j1gjwo]  .notificationCardNonLetta {
    border-left-color: #f4587f;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 24px rgba(244, 88, 127, 0.12);
}

/* Letta: niente accento e resa più tenue. */
.notificationsList[b-waq2j1gjwo]  .notificationCardLetta {
    border-left-color: transparent;
    background: rgba(246, 246, 249, 0.75);
    opacity: 0.7;
}

.notificationsList[b-waq2j1gjwo]  .notificationCardLetta:hover {
    opacity: 1;
}

.notificationCardHead[b-waq2j1gjwo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.notificationMittente[b-waq2j1gjwo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.notificationDot[b-waq2j1gjwo] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f4587f;
    flex-shrink: 0;
}

.notificationMittente[b-waq2j1gjwo]  .notificationNome {
    font-weight: 600;
}

.notificationMeta[b-waq2j1gjwo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    color: #7a7a8c;
}

.notificationMeta[b-waq2j1gjwo]  .notificationEmail,
.notificationMeta[b-waq2j1gjwo]  .notificationData {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #7a7a8c;
}

.notificationsList[b-waq2j1gjwo]  .notificationDivider {
    margin: 0.25rem 0;
}

.notificationsList[b-waq2j1gjwo]  .notificationMessaggio {
    /* Il testo arriva dall'esterno: va mandato a capo senza sfondare la scheda. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .notificationsContainer[b-waq2j1gjwo] {
        height: auto;
    }

    .notificationCardHead[b-waq2j1gjwo] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@keyframes notificationsFadeIn-b-waq2j1gjwo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/Pages/Backoffice/PageConfiguration/ContactConfiguration.razor.rz.scp.css */
.contactConfigContainer[b-2z20fby8y6] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    gap: 1.5rem;
    opacity: 0;
    animation: contactConfigFadeIn-b-2z20fby8y6 0.5s ease-out forwards;
}

.contactConfigHeader[b-2z20fby8y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.contactConfigCard[b-2z20fby8y6] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    backdrop-filter: blur(10px);
}

.contactConfigImageZone[b-2z20fby8y6] {
    position: relative;
    flex-grow: 1;
    min-height: 0;
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

/* MudImage renders its own root element, outside this component's CSS scope:
   ::deep is required or the rule silently never matches. */
.contactConfigImageZone[b-2z20fby8y6]  .contactConfigImage {
    border-radius: 16px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.contactConfigImageZone:hover[b-2z20fby8y6]  .contactConfigImage {
    transform: scale(1.02);
    filter: brightness(0.85);
}

.contactConfigImageOverlay[b-2z20fby8y6] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: white;
    font-weight: 600;
    opacity: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.contactConfigImageZone:hover .contactConfigImageOverlay[b-2z20fby8y6] {
    opacity: 1;
}

.contactConfigImagePlaceholder[b-2z20fby8y6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default));
    border-radius: 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--bgColorNavbar));
    color: #4e4848;
    transition: border-color 0.2s ease, border-style 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.contactConfigImageZone:hover .contactConfigImagePlaceholder[b-2z20fby8y6] {
    border-color: var(--mud-palette-primary);
    border-style: solid;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--bgColorNavbar));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
    transform: scale(1.01);
}

.contactConfigActions[b-2z20fby8y6] {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.contactConfigActions[b-2z20fby8y6]  .contactConfigSaveButton {
    border-radius: 12px !important;
    min-width: 160px;
    text-transform: none !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 16px rgba(244, 88, 127, 0.35) !important;
}

@keyframes contactConfigFadeIn-b-2z20fby8y6 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/Pages/Backoffice/PageConfiguration/HomeConfiguration.razor.rz.scp.css */
.homeConfigContainer[b-9ynflur64e] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    gap: 1.5rem;
    opacity: 0;
    animation: homeConfigFadeIn-b-9ynflur64e 0.5s ease-out forwards;
}

.homeConfigHeader[b-9ynflur64e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.homeConfigCard[b-9ynflur64e] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    backdrop-filter: blur(10px);
}

/* MudForm renders its own root <form>, outside this component's CSS scope:
   ::deep is required or the rule silently never matches. */
.homeConfigCard[b-9ynflur64e]  .homeConfigForm {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    gap: 1.5rem;
}

.homeConfigTopFields[b-9ynflur64e] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 1.25rem;
}

.homeConfigSocialsSection[b-9ynflur64e] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.homeConfigSocialsTitleRow[b-9ynflur64e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.homeConfigSocialsTitle[b-9ynflur64e] {
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.homeConfigSocialsTitleRow[b-9ynflur64e]  .homeConfigAddSocialButton {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

/* Solo questa area scrolla: i campi in alto e le azioni in basso restano fissi. */
.homeConfigSocialsScroll[b-9ynflur64e] {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
}

.homeConfigSocialsEmpty[b-9ynflur64e] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 14px;
}

.homeConfigSocialsList[b-9ynflur64e] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.homeConfigSocialRow[b-9ynflur64e] {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.homeConfigSocialIcon[b-9ynflur64e] {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--bgColorNavbar));
}

.homeConfigSocialTopFields[b-9ynflur64e] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: 1rem;
}

.homeConfigSocialTopFields[b-9ynflur64e]  .homeConfigSocialUsernameField,
.homeConfigSocialTopFields[b-9ynflur64e]  .homeConfigSocialUrlField {
    flex: 1 1 0;
}

.homeConfigSocialRow[b-9ynflur64e]  .homeConfigSocialIconUrlField {
    grid-column: 2;
    grid-row: 2;
}

.homeConfigSocialRow[b-9ynflur64e]  .homeConfigRemoveSocialTooltip {
    grid-column: 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeConfigActions[b-9ynflur64e] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.homeConfigActions[b-9ynflur64e]  .homeConfigCancelButton,
.homeConfigActions[b-9ynflur64e]  .homeConfigSaveButton {
    border-radius: 12px !important;
    min-width: 160px;
    text-transform: none !important;
    font-weight: 600 !important;
}

.homeConfigActions[b-9ynflur64e]  .homeConfigSaveButton {
    box-shadow: 0 6px 16px rgba(47, 214, 153, 0.35) !important;
}

@keyframes homeConfigFadeIn-b-9ynflur64e {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .homeConfigActions[b-9ynflur64e] {
        justify-content: stretch;
    }

    .homeConfigActions[b-9ynflur64e]  .homeConfigCancelButton,
    .homeConfigActions[b-9ynflur64e]  .homeConfigSaveButton {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .homeConfigSocialTopFields[b-9ynflur64e] {
        flex-direction: column;
    }
}
/* /Components/Pages/Backoffice/PageConfiguration/HomeFoldersOrder.razor.rz.scp.css */
.foldersOrderContainer[b-aytqs7h8xr] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    gap: 1.5rem;
    opacity: 0;
    animation: foldersOrderFadeIn-b-aytqs7h8xr 0.5s ease-out forwards;
}

@keyframes foldersOrderFadeIn-b-aytqs7h8xr {
    to {
        opacity: 1;
    }
}

.foldersOrderHeader[b-aytqs7h8xr] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.foldersOrderActions[b-aytqs7h8xr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* MudPaper, MudAlert e gli altri componenti generano la propria radice fuori dallo scope di questa pagina: serve ::deep. */
.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderSaveButton {
    border-radius: 14px;
}

.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderHint {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
}

.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    text-align: center;
}

.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderMosaic {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.2rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
}

.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderMosaicIcon {
    flex: 0 0 auto;
    color: #6c63ff;
}

.foldersOrderMosaicText[b-aytqs7h8xr] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

/* La lista scorre da sola: con molte cartelle il trascinamento resta dentro la pagina. */
.foldersOrderList[b-aytqs7h8xr] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem;
}

.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderZone {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderRow {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderRow:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20, 20, 40, 0.12);
}

.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderHandle {
    color: #9b9b9b;
}

.foldersOrderPosition[b-aytqs7h8xr] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #6c63ff1f;
    color: #4b45b5;
    font-weight: 600;
    font-size: 0.9rem;
}

.foldersOrderCover[b-aytqs7h8xr] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 84px;
    height: 56px;
    overflow: hidden;
    border-radius: 10px;
    background: #00000010;
}

.foldersOrderInfo[b-aytqs7h8xr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 1;
    min-width: 0;
    gap: 0.5rem;
}

.foldersOrderContainer[b-aytqs7h8xr]  .foldersOrderTitle {
    overflow-wrap: anywhere;
}

.foldersOrderArrows[b-aytqs7h8xr] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
/* /Components/Pages/Backoffice/PageConfiguration/InfoConfiguration.razor.rz.scp.css */
.infoConfigContainer[b-zjacjlomck] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    gap: 1.5rem;
    opacity: 0;
    animation: infoConfigFadeIn-b-zjacjlomck 0.5s ease-out forwards;
}

.infoConfigHeader[b-zjacjlomck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.infoConfigCard[b-zjacjlomck] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    gap: 1rem;
    padding: 1.75rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    backdrop-filter: blur(10px);
}

.infoConfigPagesTitleRow[b-zjacjlomck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.infoConfigPagesTitle[b-zjacjlomck] {
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.infoConfigPagesTitleRow[b-zjacjlomck]  .infoConfigAddPageButton {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

/* Solo questa area scrolla: intestazione e azioni restano fisse. */
.infoConfigPagesScroll[b-zjacjlomck] {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
}

.infoConfigPagesEmpty[b-zjacjlomck] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 14px;
}

.infoConfigPagesList[b-zjacjlomck] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.infoConfigPageCard[b-zjacjlomck] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.infoConfigPageHeader[b-zjacjlomck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.infoConfigPageLabel[b-zjacjlomck] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.infoConfigImagesRow[b-zjacjlomck] {
    display: flex;
    gap: 1rem;
}

.infoConfigImageSlot[b-zjacjlomck] {
    position: relative;
    flex: 0 0 160px;
}

.infoConfigImageZone[b-zjacjlomck] {
    position: relative;
    width: 160px;
    height: 110px;
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.infoConfigImageZone[b-zjacjlomck]  .infoConfigImage {
    border-radius: 12px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.infoConfigImageZone:hover[b-zjacjlomck]  .infoConfigImage {
    transform: scale(1.03);
    filter: brightness(0.85);
}

.infoConfigImagePlaceholder[b-zjacjlomck] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--bgColorNavbar));
    transition: border-color 0.2s ease, border-style 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.infoConfigImageZone:hover .infoConfigImagePlaceholder[b-zjacjlomck] {
    border-color: var(--mud-palette-primary);
    border-style: solid;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--bgColorNavbar));
    transform: scale(1.02);
}

.infoConfigRemoveImageButton[b-zjacjlomck] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: white !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.infoConfigActions[b-zjacjlomck] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.infoConfigActions[b-zjacjlomck]  .infoConfigSaveButton {
    border-radius: 12px !important;
    min-width: 160px;
    text-transform: none !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 16px rgba(124, 92, 255, 0.35) !important;
}

@keyframes infoConfigFadeIn-b-zjacjlomck {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .infoConfigImagesRow[b-zjacjlomck] {
        flex-wrap: wrap;
    }

    .infoConfigImageSlot[b-zjacjlomck],
    .infoConfigImageZone[b-zjacjlomck] {
        flex: 0 0 calc(50% - 0.5rem);
        width: auto;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* La fotografia di sfondo arriva dalla configurazione, quindi la scurita di quanto serve perché
   il pannello chiaro sopra ci si stacchi qualunque foto scelga il fotografo. */
.contactSfondo[b-96or9ui20q] {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: flex-start;
    min-height: 0;
    padding: clamp(1rem, 4vh, 3rem) 1rem;
    box-sizing: border-box;
    overflow-y: auto;
    background-size: cover;
    background-position: center;
}

/* Stesso pannello "vetro" delle sezioni della pagina Info, dell'intestazione delle cartelle e
   delle schede del backoffice: stesso raggio, stessa ombra, stesso bordo.
   Il pannello resta molto trasparente perché la fotografia sotto si veda: a tenere leggibile il
   modulo non è l'opacità del pannello ma la sfocatura, che spegne i dettagli dell'immagine, e il
   fondo quasi pieno dei singoli campi più sotto. */
.contactPannello[b-96or9ui20q] {
    display: flex;
    flex-direction: column;
    /* Solo centratura orizzontale. La centratura verticale con margin:auto (o align-items:center)
       su un contenitore flex, quando il pannello è più alto del viewport, su iOS/Safari fa
       traboccare il bordo superiore in un'area non raggiungibile dallo scroll: è il motivo per
       cui su tablet la card non si vedeva tutta. Qui il pannello parte dall'alto e resta sempre
       scorribile; la centratura verticale torna più sotto, solo dove c'è spazio garantito. */
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
    gap: 1.75rem;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 18px 50px rgba(20, 20, 40, 0.25);
    backdrop-filter: blur(18px);
    box-sizing: border-box;
    opacity: 0;
    animation: contactFadeIn-b-96or9ui20q 0.5s ease-out forwards;
}

.contactIntestazione[b-96or9ui20q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contactTitolo[b-96or9ui20q] {
    /* h1 per la semantica della pagina: i margini predefiniti del titolo qui non servono. */
    margin: 0;
    font-size: clamp(1.9rem, 3.5vw, 2.4rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--blackTextColor);
}

.contactSottotitolo[b-96or9ui20q] {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #4e4848;
}

.contactCampi[b-96or9ui20q] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contactCampiRiga[b-96or9ui20q] {
    display: flex;
    gap: 1.25rem;
}

/* Ogni campo è etichetta sopra + MudTextField sotto. L'etichetta è un <label> nostro,
   fisso sopra il riquadro: la variante Outlined è usata senza la sua label "flottante"
   proprio per non farla mai entrare nel bordo del campo. */
.contactCampo[b-96or9ui20q] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contactCampiRiga .contactCampo[b-96or9ui20q] {
    flex: 1 1 0;
    min-width: 0;
}

.contactCampoLabel[b-96or9ui20q] {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--blackTextColor);
}

/* I campi sono componenti figli: senza ::deep il CSS isolato non li raggiunge.
   Il fondo qui è quasi pieno: è questo a rendere il modulo leggibile sopra la fotografia, e
   permette al pannello che li contiene di restare trasparente. */
.contactCampi[b-96or9ui20q]  .mud-input.mud-input-outlined {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
}

.contactCampi[b-96or9ui20q]  .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 12px;
    border-color: rgba(25, 25, 25, 0.18);
}

/* Il primario del tema è un grigio chiarissimo (#e0e0e0): lasciato al suo valore, il bordo del
   campo attivo sarebbe invisibile. Nero pieno sui 2px di MudBlazor però risulta pesante, quindi
   si smorza il colore e si assottiglia il tratto: basta a segnalare il campo attivo. */
.contactCampi[b-96or9ui20q]  .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.contactCampi[b-96or9ui20q]  .mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
    border-width: 1.5px;
    border-color: rgba(25, 25, 25, 0.42);
}

.contactPiede[b-96or9ui20q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.contactPrivacy[b-96or9ui20q] {
    flex: 1 1 260px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4e4848;
}

.contactPrivacy a[b-96or9ui20q] {
    color: var(--blackTextColor);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Stessi valori del pulsante di salvataggio delle schede del backoffice. */
.contactPiede[b-96or9ui20q]  .contactPulsanteInvio {
    border-radius: 12px !important;
    min-width: 160px;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 16px rgba(20, 20, 40, 0.25) !important;
}

.contactAvviso[b-96or9ui20q] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: rgba(25, 25, 25, 0.06);
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4e4848;
}

/* Campo trappola: resta nel DOM (gli automatismi lo compilano) ma non è raggiungibile
   né visibile per chi usa davvero la pagina, lettori di schermo inclusi. */
.contactHoneypot[b-96or9ui20q] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@keyframes contactFadeIn-b-96or9ui20q {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    /* La richiesta su mobile è che la card stia intera a schermo, senza scroll: qui si comprime
       ogni spaziatura/dimensione così il totale entri nell'altezza disponibile sotto la navbar.
       overflow-y resta comunque visible (invece di hidden) come valvola di sicurezza: se su un
       telefono molto piccolo o con un messaggio di errore in più il contenuto non entrasse, meglio
       che scorra sull'unico contenitore scrollabile dell'app (#mainBodyScroll, in MainLayout) che
       venga tagliato. Un overflow-y:auto qui dentro, annidato in quello già scrollabile, farebbe
       "litigare" i due per il touch-scroll, che è il problema originale del bottone irraggiungibile. */
    .contactSfondo[b-96or9ui20q] {
        overflow-y: visible;
        padding: 0.6rem;
    }

    .contactPannello[b-96or9ui20q] {
        gap: 0.85rem;
        padding: 1rem;
    }

    .contactIntestazione[b-96or9ui20q] {
        gap: 0.25rem;
    }

    .contactTitolo[b-96or9ui20q] {
        font-size: 1.4rem;
    }

    .contactSottotitolo[b-96or9ui20q] {
        font-size: 0.8rem;
        line-height: 1.35;
    }

    .contactCampi[b-96or9ui20q] {
        gap: 0.6rem;
    }

    .contactCampo[b-96or9ui20q] {
        gap: 0.25rem;
    }

    .contactCampoLabel[b-96or9ui20q] {
        font-size: 0.8rem;
    }

    /* Nome e Cognome restano affiancati anche su mobile: impilarli costava una riga di campo
       intera in altezza, proprio lo spazio che manca per far entrare la card senza scroll.
       flex-wrap è solo una rete di sicurezza per telefoni strettissimi. */
    .contactCampiRiga[b-96or9ui20q] {
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .contactCampiRiga .contactCampo[b-96or9ui20q] {
        min-width: 120px;
    }

    /* Il campo Messaggio a 5 righe da solo vale quanto tutti gli altri campi insieme: si limita
       l'altezza visibile e si lascia scorrere il testo dentro il campo (comportamento normale di
       una textarea), invece che far scorrere l'intera pagina. */
    .contactCampi[b-96or9ui20q]  textarea {
        max-height: 4.2rem;
        overflow-y: auto;
    }

    .contactPiede[b-96or9ui20q] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding-top: 0.6rem;
    }

    /* flex:1 1 260px serve solo al layout a riga di desktop, dove 260px è una larghezza minima:
       in colonna lo stesso valore diventa un'altezza minima e, con flex-grow:1, il testo si
       allunga a riempire lo spazio verticale del piede, creando un vuoto enorme prima del
       bottone. */
    .contactPrivacy[b-96or9ui20q] {
        flex: none;
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .contactPiede[b-96or9ui20q]  .contactPulsanteInvio {
        width: 100%;
        min-height: 2.4rem;
    }
}

/* Su finestre alte la card ci sta comodamente: si può rimettere la centratura verticale senza
   rischiare il taglio in cima. Sotto questa soglia (tablet in orizzontale, telefoni) resta
   allineata in alto e completamente scorribile. */
@media (min-height: 900px) {
    .contactPannello[b-96or9ui20q] {
        margin-block: auto;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-5puud366v7] {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: radial-gradient(circle at 50% 20%, var(--bgColorNavbar) 0%, var(--bgColor) 70%);
}

.error-card[b-5puud366v7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 420px;
    width: 100%;
    padding: 3rem 2.5rem;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
    animation: errorFadeIn-b-5puud366v7 0.6s ease-out;
}

.error-icon-wrapper[b-5puud366v7] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: rgba(215, 26, 26, 0.08);
    margin-bottom: 0.75rem;
    animation: errorPulse-b-5puud366v7 2.4s ease-in-out infinite;
}

.error-icon[b-5puud366v7] {
    max-height: 60px;
    max-width: 60px;
    opacity: 0.8;
}

.error-title[b-5puud366v7] {
    color: var(--blackTextColor);
    font-weight: 600 !important;
}

.error-subtitle[b-5puud366v7] {
    color: #757575;
    line-height: 1.5;
}

.error-divider[b-5puud366v7] {
    width: 40px;
    height: 2px;
    background-color: var(--errorColor);
    border-radius: 2px;
    margin: 1rem 0 0.25rem;
    opacity: 0.6;
}

.error-signature[b-5puud366v7] {
    color: #9b9b9b !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.7rem !important;
}

@keyframes errorPulse-b-5puud366v7 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(215, 26, 26, 0.12);
    }

    50% {
        box-shadow: 0 0 0 14px rgba(215, 26, 26, 0);
    }
}

@keyframes errorFadeIn-b-5puud366v7 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Pages/Gallery/GalleryFolder.razor.rz.scp.css */
.galleryFolderPage[b-md0bm05sr6] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 5vh;
    padding-top: 1.25rem;
}

/* Il rientro laterale sta sulle sezioni, non sulla pagina: il footer deve arrivare a filo bordo come la navbar. */
.galleryFolderHeader[b-md0bm05sr6] {
    display: flex;
    padding: 0 1.25rem;
}

.galleryFolderBody[b-md0bm05sr6] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 1.25rem 1.25rem;
}

.galleryFolderPhotos[b-md0bm05sr6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Filo sottile con un rombo al centro tra sottocartelle e foto. */
.galleryFolderDivider[b-md0bm05sr6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 2rem;
}

.galleryFolderDivider[b-md0bm05sr6]::before,
.galleryFolderDivider[b-md0bm05sr6]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(25, 25, 25, 0.12);
}

.galleryFolderDividerMark[b-md0bm05sr6] {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: #b5b3ae;
}

.galleryFolderEmpty[b-md0bm05sr6] {
    font-size: 1.1rem;
    font-style: italic;
    color: #979696;
    text-align: center;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-separator[b-1t3seq6jb3] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 5px;
}

.home-separator[b-1t3seq6jb3]  svg {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
}

.home-gallery-section[b-1t3seq6jb3] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 28px;
    padding: 0 5px 5px;
}

/* min-height: senza risultati la griglia si svuota e, con l'altezza a contenuto, il footer
   risaliva di colpo sotto la barra di ricerca. Riservare un'area fissa tiene ferma la pagina. */
.home-gallery-grid[b-1t3seq6jb3] {
    display: flex;
    flex-grow: 1;
    min-height: 55vh;
}

.home-gallery-avviso[b-1t3seq6jb3] {
    align-self: flex-start;
    max-width: 900px;
    font-size: 0.85rem;
    font-style: italic;
    color: #6b6b6b;
}

.home-gallery-vuota[b-1t3seq6jb3] {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    font-style: italic;
    color: #6b6b6b;
}
/* /Components/Pages/Info.razor.rz.scp.css */
.mainInfo[b-o3sswv8cxm] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* min-height:0 perché il contenitore è un figlio flex: senza, non si restringe e lo scroll
       finisce sulla pagina invece che qui dentro. */
    min-height: 0;
    width: 100%;
    gap: 1.5rem;
    padding: 1.5rem;
    box-sizing: border-box;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    background-color: var(--bgColorNavbar);
}

/* Ogni sezione occupa almeno una schermata e si aggancia in cima: si scorre una sezione alla
   volta. min-height e non height, così una sezione più alta del viewport resta leggibile. */
/* stretch e non center: il pannello riempie l'altezza della sezione invece di restare una
   striscia alta quanto il suo contenuto in mezzo allo spazio vuoto. */
.containerInfoItem[b-o3sswv8cxm] {
    display: flex;
    justify-content: center;
    align-items: stretch;
    min-height: 100%;
    /* start e non center: con center, una sezione più alta di uno schermo (testo lungo) viene
       agganciata a metà, lasciando la parte alta fuori dalla vista sopra il bordo superiore e
       "mandatory" impedisce di scorrere con continuità per leggerla — sembra che il testo sparisca
       dietro le card vicine. Con start la sezione parte sempre dall'alto e scorre normalmente. */
    scroll-snap-align: start;
}

/* Su schermo stretto le sezioni diventano verticali e superano quasi sempre l'altezza della
   finestra: con lo snap obbligatorio lo scorrimento salterebbe pezzi di contenuto. */
@media (max-width: 900px) {
    /* Stesso motivo del contenitore della pagina Contatti: su mobile lo scroll deve restare solo
       su #mainBodyScroll (MainLayout). Con questo contenitore anch'esso scrollabile e annidato
       dentro quello, il touch-scroll viene catturato in modo incoerente tra i due: è quello che
       mostrava più sezioni a metà insieme e faceva scattare lo scroll all'inizio di quella
       successiva invece di scorrere con continuità. */
    .mainInfo[b-o3sswv8cxm] {
        scroll-snap-type: none;
        overflow-y: visible;
        gap: 1rem;
        padding: 0.75rem;
    }

    .containerInfoItem[b-o3sswv8cxm] {
        min-height: auto;
        scroll-snap-align: none;
    }
}

/* Stesso problema anche quando lo schermo è largo ma basso (tablet in orizzontale): una sezione
   con le foto dimensionate in vh diventa più alta del viewport, e con lo snap obbligatorio le
   sezioni si accavallano e il contenuto finisce dietro i pannelli vicini. Sotto una certa altezza
   si disattiva lo snap e si lascia scorrere la pagina, come su schermo stretto. */
@media (max-height: 820px) {
    .mainInfo[b-o3sswv8cxm] {
        scroll-snap-type: none;
        overflow-y: visible;
    }

    .containerInfoItem[b-o3sswv8cxm] {
        min-height: auto;
        scroll-snap-align: none;
    }
}
/* /Components/Pages/NotFoundPage.razor.rz.scp.css */
/* Stessa scheda "vetro" delle altre pagine pubbliche, centrata su tutta l'area disponibile. */
.notFoundPage[b-i8bkc0rdo6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.notFoundCard[b-i8bkc0rdo6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 520px;
    padding: 2.5rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    text-align: center;
}

.notFoundTitle[b-i8bkc0rdo6] {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: var(--blackTextColor);
}

.notFoundText[b-i8bkc0rdo6] {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4e4848;
}

.notFoundPage[b-i8bkc0rdo6]  .notFoundButton {
    border-radius: 12px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
/* Pagina dell'informativa privacy. Stessa lingua grafica del resto del sito:
   carattere Montserrat, sfondo grigio della navbar come la pagina Info, e un
   pannello "vetro" identico a quello delle sezioni di Info e del modulo di
   Contatti (stesso raggio, bordo, ombra, sfocatura). Tutto il testo centrato. */

.privacyPagina[b-3r498qj1t8] {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: flex-start;
    /* figlio flex di #mainBodyScroll: senza min-height:0 non si restringe e lo
       scroll finisce sulla pagina invece che qui dentro. */
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(1.5rem, 5vh, 4rem) 1rem;
    overflow-y: auto;
    background-color: var(--bgColorNavbar);
    font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
    color: var(--blackTextColor);
    line-height: 1.7;
}

/* Stesso pannello "vetro" delle sezioni di Info e del modulo di Contatti.
   margin verticale auto invece di align-items:center: centra la card quando c'è
   spazio ma, su finestre basse, la lascia scorrere invece di tagliarla in cima. */
.privacyCard[b-3r498qj1t8] {
    width: 100%;
    max-width: 820px;
    margin: auto 0;
    box-sizing: border-box;
    padding: clamp(1.75rem, 4vw, 3.5rem);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 18px 50px rgba(20, 20, 40, 0.12);
    backdrop-filter: blur(10px);
    text-align: center;
    opacity: 0;
    animation: privacyFadeIn-b-3r498qj1t8 0.5s ease-out forwards;
}

.privacyHeader[b-3r498qj1t8] {
    margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
}

    .privacyHeader h1[b-3r498qj1t8] {
        margin: 0 0 0.75rem;
        font-size: clamp(1.9rem, 4.5vw, 2.8rem);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    .privacyHeader p[b-3r498qj1t8] {
        margin: 0;
        color: #4e4848;
        font-size: 1rem;
        line-height: 1.6;
    }

        .privacyHeader p span[b-3r498qj1t8] {
            font-size: 0.95em;
        }

/* Divisore fra le due lingue: un filo sottile e corto, non il bordo nero pieno
   della versione precedente. */
.privacyDivisore[b-3r498qj1t8] {
    margin: clamp(2.5rem, 7vw, 4rem) auto;
    width: 100%;
    max-width: 240px;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.privacyLingua[b-3r498qj1t8] {
    margin-bottom: 2.5rem;
}

/* Intestazione di lingua impilata e centrata: bandiera, titolo, badge in colonna
   invece della riga con il bordo inferiore nero. */
.privacyLinguaTitolo[b-3r498qj1t8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

    .privacyLinguaTitolo .flag[b-3r498qj1t8] {
        font-size: 1.9rem;
        line-height: 1;
    }

    .privacyLinguaTitolo h2[b-3r498qj1t8] {
        margin: 0;
        font-size: clamp(1.4rem, 3vw, 1.8rem);
        font-weight: 600;
        line-height: 1.2;
    }

/* Pillola coerente con le chip dei diritti e con lo stile arrotondato del sito. */
.privacyBadge[b-3r498qj1t8] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(25, 25, 25, 0.18);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #4e4848;
}

.privacySezione[b-3r498qj1t8] {
    margin-bottom: 2.25rem;
}

    .privacySezione:last-child[b-3r498qj1t8] {
        margin-bottom: 0;
    }

    .privacySezione h3[b-3r498qj1t8] {
        margin: 0 0 0.75rem;
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1.4;
    }

    .privacySezione p[b-3r498qj1t8] {
        margin: 0 0 0.85rem;
    }

        .privacySezione p:last-child[b-3r498qj1t8] {
            margin-bottom: 0;
        }

    /* Elenchi senza pallino: con il testo centrato i bullet a sinistra
       spezzerebbero l'allineamento. */
    .privacySezione ul[b-3r498qj1t8] {
        margin: 0.5rem 0 0;
        padding: 0;
        list-style: none;
    }

    .privacySezione li[b-3r498qj1t8] {
        margin-bottom: 0.5rem;
    }

        .privacySezione li:last-child[b-3r498qj1t8] {
            margin-bottom: 0;
        }

    .privacySezione a[b-3r498qj1t8] {
        color: var(--blackTextColor);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* Recapito del titolare: riquadro arrotondato leggero, largo quanto il contenuto
   e centrato, invece della barra con il bordo nero a sinistra. */
.privacyIndirizzo[b-3r498qj1t8] {
    font-style: normal;
    display: inline-block;
    padding: 1rem 1.5rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    line-height: 1.7;
}

/* Diritti dell'utente come chip arrotondate in fila, centrate. */
.privacyDiritti[b-3r498qj1t8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

    .privacyDiritti li[b-3r498qj1t8] {
        margin: 0;
        padding: 0.4rem 0.9rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(25, 25, 25, 0.12);
        font-size: 0.9rem;
        line-height: 1.3;
    }

@keyframes privacyFadeIn-b-3r498qj1t8 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .privacyPagina[b-3r498qj1t8] {
        padding: 1rem 0.75rem;
    }

    .privacyCard[b-3r498qj1t8] {
        padding: 1.5rem 1.25rem;
    }
}
/* /Components/ReUsable/CBulkUploadDialog.razor.rz.scp.css */
.bulkTitle[b-vixz1dqnr2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bulkTitleHint[b-vixz1dqnr2] {
    color: var(--mud-palette-text-secondary);
    margin-left: auto;
}

/* Altezza fissa: il dialog non cresce con il numero di foto, è l'elenco a scorrere. */
.bulkContent[b-vixz1dqnr2] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2rem;
    height: 52vh;
    min-height: 0;
}

.bulkSettings[b-vixz1dqnr2],
.bulkFiles[b-vixz1dqnr2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
}

.bulkSettings[b-vixz1dqnr2] {
    gap: 0.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.bulkSectionTitle[b-vixz1dqnr2] {
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Il percorso FTP sotto il campo cartella: l'helper text di MudBlazor è troppo chiaro per leggerlo. */
.bulkSettings[b-vixz1dqnr2]  .bulkFolderField .mud-input-helper-text {
    color: var(--blackTextColor);
    opacity: 0.85;
    font-weight: 500;
    word-break: break-all;
}

.bulkDropZone[b-vixz1dqnr2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default));
    border-radius: 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--bgColorNavbar));
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.bulkDropZone:hover[b-vixz1dqnr2] {
    border-color: var(--mud-palette-primary);
    border-style: solid;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--bgColorNavbar));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

.bulkDropZone--disabled[b-vixz1dqnr2] {
    opacity: 0.5;
    pointer-events: none;
}

/* Stesso trucco della pagina immagine: l'input nativo resta nel DOM ma fuori vista. */
.bulkInputWrapper[b-vixz1dqnr2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.bulkProgress[b-vixz1dqnr2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bulkSettings[b-vixz1dqnr2]  .bulkSummary,
.bulkFiles[b-vixz1dqnr2]  .bulkSummary {
    border-radius: 12px;
}

.bulkFileList[b-vixz1dqnr2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.35rem;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.bulkFileRow[b-vixz1dqnr2] {
    flex: 0 0 auto;
}

.bulkEmpty[b-vixz1dqnr2] {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.bulkFileRow[b-vixz1dqnr2] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.bulkFileRow--done[b-vixz1dqnr2] {
    opacity: 0.7;
}

.bulkFileRow--failed[b-vixz1dqnr2] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, white);
}

.bulkFileInfo[b-vixz1dqnr2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.bulkFileName[b-vixz1dqnr2] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bulkFileMeta[b-vixz1dqnr2] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.bulkFileError[b-vixz1dqnr2] {
    color: var(--mud-palette-error);
    font-weight: 600;
}

@media (max-width: 900px) {
    .bulkContent[b-vixz1dqnr2] {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        height: 70vh;
    }
}
/* /Components/ReUsable/CCarousel.razor.rz.scp.css */

/* La slide è un link: occupa tutto il riquadro senza portarsi dietro lo stile predefinito dei link. */
.carouselSlideLink[b-xz962lsgec] {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
/* /Components/ReUsable/CFolderHeader.razor.rz.scp.css */
/* Pannello "vetro" con gli stessi valori usati nelle schede del backoffice: stesso raggio,
   stessa ombra, stessa trasparenza, così le due parti dell'app si assomigliano. */
.folderHero[b-dsiss87xw1] {
    display: flex;
    /* flex-start e non center: con una descrizione lunga il corpo testo diventa più alto della
       copertina e "center" faceva scendere l'immagine sotto il bordo superiore della card. Ora
       l'immagine resta allineata all'inizio della card; con testo corto il corpo (che centra
       comunque i suoi contenuti) resta gradevole. */
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    padding: 1.75rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    opacity: 0;
    animation: folderHeroFadeIn-b-dsiss87xw1 0.5s ease-out forwards;
}

/* Riquadro di dimensione fissa: né l'altezza del testo a fianco né le proporzioni della foto lo
   cambiano, così tutte le cartelle mostrano la copertina nello stesso formato. Il fondo neutro
   si vede quando la foto non riempie il riquadro, ed è lo stesso del visualizzatore. */
.folderHeroMedia[b-dsiss87xw1] {
    position: relative;
    flex: 0 0 auto;
    width: 500px;
    max-width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #1b1b1b;
}

/* ::deep perché la classe finisce su MudImage, che è un componente figlio e quindi non riceve
   l'attributo di scope del CSS isolato. */
.folderHeroMedia[b-dsiss87xw1]  .folderHeroImage {
    display: block;
    width: 100%;
    height: 100%;
    /* contain e non cover: la foto si vede intera, senza tagli e senza deformazioni. */
    object-fit: contain;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.folderHeroMedia:hover[b-dsiss87xw1]  .folderHeroImage {
    transform: scale(1.03);
    filter: brightness(0.85);
}

.folderHeroMediaOverlay[b-dsiss87xw1] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.folderHeroMedia:hover .folderHeroMediaOverlay[b-dsiss87xw1] {
    opacity: 1;
}

.folderHeroBody[b-dsiss87xw1] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 1rem;
}

.folderHeroEyebrow[b-dsiss87xw1] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b6b6b;
}

.folderHeroTitle[b-dsiss87xw1] {
    /* h1 per la semantica della pagina: i margini predefiniti del titolo qui non servono. */
    margin: 0;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--blackTextColor);
    overflow-wrap: break-word;
}

.folderHeroBreadcrumb[b-dsiss87xw1] {
    font-size: 0.8rem;
    color: #6b6b6b;
}

.folderHeroDescription[b-dsiss87xw1] {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #4e4848;
    overflow-wrap: break-word;
}

.folderHeroMeta[b-dsiss87xw1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.folderHeroChip[b-dsiss87xw1] {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(25, 25, 25, 0.06);
    font-size: 0.82rem;
    font-weight: 500;
    color: #4e4848;
}

@keyframes folderHeroFadeIn-b-dsiss87xw1 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .folderHero[b-dsiss87xw1] {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .folderHeroMedia[b-dsiss87xw1] {
        width: 100%;
    }

    .folderHeroTitle[b-dsiss87xw1] {
        font-size: 1.8rem;
    }

    .folderHeroDescription[b-dsiss87xw1] {
        font-size: 1rem;
    }
}
/* /Components/ReUsable/CFooter.razor.rz.scp.css */
.footerContainer[b-ow1y3i5wr4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width:100%;
    min-height: 123px;
    /* flex-shrink: dentro le pagine a colonna il footer veniva compresso e il testo usciva dal grigio. */
    flex-shrink: 0;
    box-sizing: border-box;
    background-color: #ccc9c9;
    justify-content:center;
    align-items:center;
    padding:1rem;
}
.footerSpan[b-ow1y3i5wr4] {
    max-width: 100%;
    color: var(--blackTextColor);
    font-size:0.8rem;
    text-align:center;
    letter-spacing:1px;
    overflow-wrap: anywhere;
}
.footerLink[b-ow1y3i5wr4] {
    text-decoration: underline;
}

/* Riga di collegamenti interni sopra la nota di licenza. */
.footerNav[b-ow1y3i5wr4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.25rem;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.footerNav .footerLink[b-ow1y3i5wr4] {
    color: var(--blackTextColor);
    text-decoration: none;
}

.footerNav .footerLink:hover[b-ow1y3i5wr4] {
    text-decoration: underline;
}
/* /Components/ReUsable/CFullscreenImage.razor.rz.scp.css */
/* Copre tutta la finestra sopra a qualsiasi cosa (navbar, drawer e dialog di MudBlazor stanno
   sotto i 1400). Fondo neutro come il visualizzatore, così le foto verticali che non riempiono
   lo schermo hanno la stessa cornice scura. */
.fsImageOverlay[b-o1c3cppz4x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* height esplicito in dvh invece di inset:0: con il posizionamento fisso inset:0 si àncora
       alla viewport "grande" e su tablet, con la barra del browser visibile, l'overlay è più
       alto dell'area visibile e la foto centrata perde sopra e sotto. Fallback in vh. */
    height: 100vh;
    height: 100dvh;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1b1b1b;
    animation: fsImageFadeIn-b-o1c3cppz4x 0.2s ease-out;
}

/* La foto intera, senza tagli: è il motivo per cui si apre a schermo intero. */
.fsImageFoto[b-o1c3cppz4x] {
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    object-fit: contain;
}

/* ::deep perché la classe finisce su MudIconButton, componente figlio senza l'attributo di
   scope del CSS isolato. */
.fsImageOverlay[b-o1c3cppz4x]  .fsImageClose {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    transition: background-color 0.2s ease;
}

.fsImageOverlay[b-o1c3cppz4x]  .fsImageClose:hover {
    background: rgba(0, 0, 0, 0.55);
}

@keyframes fsImageFadeIn-b-o1c3cppz4x {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/ReUsable/CGalleryGrid.razor.rz.scp.css */
@keyframes apparence-b-pwanpkhvsn {
    from {
        opacity: 0;
        transform: translateY(70%) scale(0.5);
    }

    to {
        transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

/* Contenitore della virtualizzazione: gli elementi non sono disposti a flex-wrap ma raggruppati
   in righe di altezza fissa, perché <Virtualize> ragiona per righe. Lo scroll è quello della
   pagina (MainLayout), qui non se ne apre un secondo. */
.galleryGrid[b-pwanpkhvsn] {
    display: block;
    width: 100%;
    min-width: 0;
}

/* Altezza della riga, larghezza dei tile e altezza delle anteprime arrivano inline da
   CGalleryGrid: sono calcolate a runtime dalla larghezza del contenitore e devono corrispondere
   esattamente a quanto viene renderizzato, altrimenti lo scroll virtualizzato calcola male le
   posizioni. Le righe sono centrate perché con il tetto alle colonne, su schermi molto larghi,
   avanza spazio. */
.galleryGridRow[b-pwanpkhvsn] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    box-sizing: border-box;
}

.galleryTile[b-pwanpkhvsn] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 10px;
    cursor: pointer;
    box-sizing: border-box;
    animation: apparence-b-pwanpkhvsn forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

/* Il tile della cartella è un <a>: niente stile da link, eredita colore e testo del resto della griglia. */
a.galleryTile[b-pwanpkhvsn] {
    text-decoration: none;
    color: inherit;
}

/* ::deep perché la classe finisce su MudPaper, che è un componente figlio e quindi non riceve
   l'attributo di scope del CSS isolato. */
.galleryTile[b-pwanpkhvsn]  .galleryTileMedia {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    border-radius: 3px;
    transition: transform 0.3s;
}

/* Contenitore trasparente: si vede solo l'immagine, con la sua ombra e le sue proporzioni. */
.galleryTile[b-pwanpkhvsn]  .galleryTileMedia {
    background-color: transparent;
}

.galleryTile:hover[b-pwanpkhvsn]  .galleryTileMedia {
    transform: scale(0.95);
}

/* Altezza imposta da CGalleryGrid: dipende dalle righe decise per l'intera griglia, non dal singolo titolo. */
.galleryTileCaption[b-pwanpkhvsn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: var(--captionHeight, 48px);
    overflow: hidden;
}

.galleryTileType[b-pwanpkhvsn] {
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 0.8rem;
    line-height: 18px;
    height: 18px;
    color: #979696;
}

/* Il titolo va a capo e resta centrato: si legge per intero fino alle righe concesse da --titleLines. */
.galleryTileTitle[b-pwanpkhvsn] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--titleLines, 1);
    line-clamp: var(--titleLines, 1);
    font-weight: 500;
    font-size: 1.03rem;
    line-height: 24px;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Griglia servita in prerendering: qui non c'è misurazione della larghezza, quindi i tile vanno a capo da soli. */
.galleryGridRowStatica[b-pwanpkhvsn] {
    flex-wrap: wrap;
    height: auto;
    row-gap: 48px;
}

/* Modalità mosaico a blocchi editoriali: misure inline calcolate da CGalleryGrid, il lato della protagonista arriva come flex-direction. */
.mosaicBlock[b-pwanpkhvsn] {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
}

/* Protagonista centrata in verticale: se è molto larga è più bassa del blocco. */
.mosaicHero[b-pwanpkhvsn] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.mosaicSide[b-pwanpkhvsn] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

/* Righe accanto alla protagonista: quelle che non arrivano a filo restano centrate. */
.mosaicRow[b-pwanpkhvsn] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

/* La tessera ha le stesse proporzioni della foto: niente sfondo, niente ritaglio. "scale" non interferisce con la transform dell'animazione. */
/* Contenitore per le container query: la didascalia si misura sulla tessera, non sullo schermo. */
.mosaicTile[b-pwanpkhvsn] {
    position: relative;
    display: block;
    container-type: size;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 3px;
    cursor: pointer;
    transition: scale 0.3s;
    animation: apparence-b-pwanpkhvsn forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

.mosaicTile:hover[b-pwanpkhvsn] {
    scale: 0.97;
}

a.mosaicTile[b-pwanpkhvsn] {
    text-decoration: none;
    color: inherit;
}

/* Foto sempre intera: contain, mai cover. */
.mosaicTile[b-pwanpkhvsn]  .mosaicImage {
    display: block;
    width: 100%;
    height: 100%;
}

.mosaicEmpty[b-pwanpkhvsn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #00000008;
}

/* Didascalia solo sulle cartelle: fascia scura in basso, misure in cqmin così scala con la tessera. */
.mosaicCaption[b-pwanpkhvsn] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: clamp(12px, 12cqmin, 28px) clamp(6px, 6cqmin, 12px) clamp(4px, 5cqmin, 10px);
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.mosaicCaptionType[b-pwanpkhvsn] {
    font-weight: 500;
    letter-spacing: clamp(1px, 1cqmin, 2px);
    font-size: clamp(0.55rem, 4.5cqmin, 0.7rem);
    line-height: 1.4;
    opacity: 0.85;
}

.mosaicCaptionTitle[b-pwanpkhvsn] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-weight: 500;
    font-size: clamp(0.72rem, 7.5cqmin, 1rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Tessere basse: il titolo resta su una riga sola. */
@container (max-height: 180px) {
    .mosaicCaptionTitle[b-pwanpkhvsn] {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
}

/* Tessere minuscole: via l'etichetta "cartella", resta solo il titolo. */
@container (max-height: 120px) or (max-width: 140px) {
    .mosaicCaptionType[b-pwanpkhvsn] {
        display: none;
    }
}

/* Mosaico servito in prerendering: tessere alle proporzioni naturali che vanno a capo da sole. */
.mosaicRowStatica[b-pwanpkhvsn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
/* /Components/ReUsable/CGallerySearchBar.razor.rz.scp.css */
.gallerySearchBar[b-o34jnu0vlk] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px 48px;
    width: 100%;
    /* Non a filo del bordo sinistro: un piccolo stacco. */
    padding-left: 14px;
}

/* Il campo testo domina, l'intervallo di date resta più stretto. Su schermi stretti vanno a capo
   (flex-wrap) e occupano tutta la larghezza disponibile. */
.gallerySearchText[b-o34jnu0vlk] {
    flex: 0 1 380px;
    max-width: 100%;
}

.gallerySearchDate[b-o34jnu0vlk] {
    position: relative;
    flex: 0 1 340px;
    min-width: 280px;
}

/* Icone di corredo (lente della ricerca e calendario del periodo): stesso nero, più scuro del
   grigio di default di MudBlazor. */
.gallerySearchText[b-o34jnu0vlk]  .mud-input-adornment .mud-icon-root,
.gallerySearchDate[b-o34jnu0vlk]  .mud-input-adornment .mud-icon-root {
    color: #191919;
}

/* Placeholder simulato del periodo (vedi commento nel .razor): allineato al testo del picker,
   trasparente ai click così aprono comunque il calendario. */
.gallerySearchDatePlaceholder[b-o34jnu0vlk] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: rgba(25, 25, 25, 0.42);
    pointer-events: none;
}
/* /Components/ReUsable/CImageDialog.razor.rz.scp.css */
/* Altezza fissa: senza, il popup si ridimensionava ad ogni foto, seguendo le proporzioni
   dell'immagine e la lunghezza dei testi. */
.viewer[b-jm4z2y4n48] {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    /* dvh e non vh: su tablet/telefono la barra del browser che compare/scompare rende vh più
       alto dell'area realmente visibile, quindi lo stage sfondava sotto e la foto perdeva sopra
       e sotto. dvh segue l'altezza visibile in quel momento. Fallback in vh per webview datati. */
    height: 78vh;
    height: 78dvh;
    min-height: 0;
    opacity: 0;
    animation: viewerFadeIn-b-jm4z2y4n48 0.35s ease-out forwards;
}

.viewerStage[b-jm4z2y4n48] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #1b1b1b;
    /* Lascia lo scroll verticale della pagina al browser e riserva a noi solo lo swipe orizzontale. */
    touch-action: pan-y;
}

/* Riempie tutto lo stage: le due foto (copertina sfocata sotto, originale sopra) si sovrappongono
   nello stesso riquadro invece di essere centrate dal flex dello stage, così comparire/sparire
   dell'originale non fa spostare nulla. */
.viewerImageWrap[b-jm4z2y4n48] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.viewerImage[b-jm4z2y4n48] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Placeholder mentre l'originale carica: sfocata e leggermente ingrandita per non mostrare il
   bordo sfocato ai margini del riquadro. */
.viewerImagePreview[b-jm4z2y4n48] {
    filter: blur(20px);
    transform: scale(1.05);
}

/* Parte trasparente e appare in dissolvenza quando l'evento onload dell'originale scatta (vedi
   ImmagineCaricata nel code-behind); se la foto è già in cache del browser (prefetch dalla
   navigazione precedente) l'evento arriva quasi subito. */
.viewerImageFull[b-jm4z2y4n48] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.viewerImageFull.viewerImageFullVisibile[b-jm4z2y4n48] {
    opacity: 1;
}

/* Fuori dallo schermo invece di display:none: il browser deve comunque scaricarla. */
.viewerPrefetch[b-jm4z2y4n48] {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.viewerStage[b-jm4z2y4n48]  .viewerStageButton {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease, background-color 0.2s ease;
}

.viewerStage:hover[b-jm4z2y4n48]  .viewerStageButton {
    opacity: 1;
}

.viewerStage[b-jm4z2y4n48]  .viewerStageButton:hover {
    background: rgba(0, 0, 0, 0.55);
}

.viewerStage[b-jm4z2y4n48]  .viewerNavButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease, background-color 0.2s ease;
}

.viewerStage:hover[b-jm4z2y4n48]  .viewerNavButton {
    opacity: 1;
}

.viewerStage[b-jm4z2y4n48]  .viewerNavButton:hover {
    background: rgba(0, 0, 0, 0.55);
}

.viewerStage[b-jm4z2y4n48]  .viewerNavButtonLeft {
    left: 12px;
}

.viewerStage[b-jm4z2y4n48]  .viewerNavButtonRight {
    right: 12px;
}

/* Schermo intero: dimensione del dialog e layout (pannello nascosto, foto espansa) sono in
   app.css, agganciati a .mud-dialog-fullscreen — l'unica classe che MudBlazor tiene aggiornata
   in modo affidabile quando si esce di nuovo dallo schermo intero (vedi commento lì). Qui restano
   solo le rifiniture sui pulsanti, guidate dalla stessa _SchermoIntero del codebehind. */

/* Il pulsante per uscire non può dipendere dall'hover: è l'unico modo per chiudere l'overlay. */
.viewerStage[b-jm4z2y4n48]  .viewerStageButtonAlwaysVisible {
    opacity: 1;
}

/* In schermo intero le frecce restano visibili invece di apparire solo al passaggio del mouse:
   è la prima volta che l'utente vede questa vista e deve capire subito che può scorrere. */
.viewerStage.viewerStageFullscreen[b-jm4z2y4n48]  .viewerNavButton {
    opacity: 1;
}

.viewerPanel[b-jm4z2y4n48] {
    display: flex;
    flex-direction: column;
    flex: 0 0 340px;
    gap: 0.9rem;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.viewerPanelFixed[b-jm4z2y4n48] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 0.9rem;
    min-width: 0;
}

.viewerPanelHead[b-jm4z2y4n48] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.viewerEyebrow[b-jm4z2y4n48] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b6b6b;
}

.viewerPanel[b-jm4z2y4n48]  .viewerCloseButton {
    color: #4e4848;
    background: rgba(25, 25, 25, 0.06);
    transition: background-color 0.2s ease;
}

.viewerPanel[b-jm4z2y4n48]  .viewerCloseButton:hover {
    background: rgba(25, 25, 25, 0.12);
}

.viewerTitle[b-jm4z2y4n48] {
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--blackTextColor);
    overflow-wrap: break-word;
    min-width: 0;
    /* Altezza fissa: sotto le 2 righe il titolo viene troncato con i puntini, invece di
       spingere la larghezza del pannello (e quindi restringere la foto a sinistra). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.viewerDescription[b-jm4z2y4n48] {
    font-size: 1rem;
    line-height: 1.65;
    color: #4e4848;
    overflow-wrap: break-word;
}

/* Unica area a scorrimento del pannello: tag e dati di scatto insieme. Tenerli in due blocchi
   separati faceva sì che, con molti tag, i dati di scatto finissero fuori dal pannello senza
   possibilità di raggiungerli — su schermi piccoli, dove il pannello è basso, sempre. */
.viewerPanelScroll[b-jm4z2y4n48] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.9rem;
    padding-right: 0.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.viewerTags[b-jm4z2y4n48] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 0.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.viewerTagsList[b-jm4z2y4n48] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.viewerTagsList[b-jm4z2y4n48]  .mud-chip {
    cursor: pointer;
}

/* Un solo separatore quando i tag precedono i dati di scatto. */
.viewerTags + .viewerMeta[b-jm4z2y4n48] {
    padding-top: 0;
    border-top: none;
}

/* Lo scorrimento è del contenitore .viewerPanelScroll: qui niente overflow né flex-grow,
   altrimenti i due blocchi si contendono l'altezza invece di impilarsi e scorrere insieme. */
.viewerMeta[b-jm4z2y4n48] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 0.85rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.viewerMetaTitle[b-jm4z2y4n48] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6b6b;
}

.viewerMetaGrid[b-jm4z2y4n48] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.viewerMetaItem[b-jm4z2y4n48] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.viewerMetaLabel[b-jm4z2y4n48] {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.viewerMetaValue[b-jm4z2y4n48] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--blackTextColor);
    overflow-wrap: break-word;
}

@keyframes viewerFadeIn-b-jm4z2y4n48 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    /* In colonna l'altezza resta comunque fissa: cambia solo come è divisa tra foto e pannello. */
    .viewer[b-jm4z2y4n48] {
        flex-direction: column;
        gap: 1rem;
        height: 80vh;
        height: 80dvh;
    }

    .viewerStage[b-jm4z2y4n48] {
        flex: 0 0 45vh;
        flex: 0 0 45dvh;
        height: 45vh;
        height: 45dvh;
    }

    /* Su schermo stretto i pulsanti non possono dipendere dall'hover. */
    .viewerStage[b-jm4z2y4n48]  .viewerStageButton,
    .viewerStage[b-jm4z2y4n48]  .viewerNavButton {
        opacity: 1;
    }

    /* Più piccole per lasciare spazio alla foto, e perché lo swipe le rende un aiuto secondario. */
    .viewerStage[b-jm4z2y4n48]  .viewerNavButton {
        transform: translateY(-50%) scale(0.7);
    }

    .viewerStage[b-jm4z2y4n48]  .viewerNavButtonLeft {
        left: 4px;
    }

    .viewerStage[b-jm4z2y4n48]  .viewerNavButtonRight {
        right: 4px;
    }

    /* Su schermo stretto l'area del pannello è troppo bassa per reggere una testata fissa più un
       corpo che scorre per conto suo: scorre tutto il pannello, titolo compreso, così tag e dati
       di scatto restano sempre raggiungibili. */
    .viewerPanel[b-jm4z2y4n48] {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .viewerPanelScroll[b-jm4z2y4n48] {
        flex: 0 0 auto;
        overflow-y: visible;
        padding-right: 0;
    }

    .viewerTitle[b-jm4z2y4n48] {
        font-size: 1.35rem;
    }
}
/* /Components/ReUsable/CImagePicker.razor.rz.scp.css */
.container[b-fr8xaf5lo0]{
    display:flex;
    flex-direction:column;
    flex-grow:1;
    padding:5px;
    gap:20px;
}

.searchContainer[b-fr8xaf5lo0] {
    display: flex;
    align-items: center;
}
.bodyContainer[b-fr8xaf5lo0]{
    display:flex; 
    height:60vh;
    overflow-y: auto;
    flex-wrap:wrap;
    gap:10px;
    justify-content:space-evenly;
}
.buttonContainer[b-fr8xaf5lo0]{
    display:flex;
    flex-grow:1;
    align-items:center;
    gap:15px;
    justify-content:space-around;
}
.selectedItem[b-fr8xaf5lo0]{
    border: 2px dashed blue;
}
.imageContainer[b-fr8xaf5lo0] {
    transition: transform 0.3s;
}
    .imageContainer:hover[b-fr8xaf5lo0] {
        cursor: pointer;
        transform: scale(0.95);
    }
/* /Components/ReUsable/CImageVisualizer.razor.rz.scp.css */
/* Pannello "vetro" con gli stessi valori dell'intestazione delle cartelle e delle schede del
   backoffice: stesso raggio, stessa ombra, stessa trasparenza. */
.imgVisSezione[b-1zkvyy5c48] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 3rem);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

/* Il markup tiene la foto prima del testo: il lato lo decide l'ordine del flex. */
.imgVisSezioneSinistra[b-1zkvyy5c48] {
    flex-direction: row;
}

.imgVisSezioneDestra[b-1zkvyy5c48] {
    flex-direction: row-reverse;
}

/* Il riquadro ha una misura sua, indipendente dalle proporzioni della foto che contiene: è
   questo che tiene coerenti tra loro sezioni con immagini molto diverse. La misura si prende
   dall'altezza della finestra e non dalla foto, quindi tutte le sezioni mostrano riquadri
   identici e nessuno sfonda la schermata: la sezione è alta quanto il viewport.
   Il fondo scuro si vede solo a tutto schermo, dove la foto torna intera. */
.imgVisRiquadro[b-1zkvyy5c48] {
    position: relative;
    flex: 0 0 auto;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #1b1b1b;
}

.imgVisRiquadroSingolo[b-1zkvyy5c48] {
    height: clamp(240px, 66vh, 720px);
    aspect-ratio: 3 / 2;
    /* Su finestre basse e larghe la larghezza derivata dal formato sfonderebbe la colonna e non
       lascerebbe spazio al testo. */
    max-width: 52vw;
}

/* Le due foto affiancate sono più strette del riquadro singolo, così tra loro resta spazio
   per il testo; il formato verticale è quello che regge meglio una colonna stretta. */
.imgVisRiquadroLaterale[b-1zkvyy5c48] {
    height: clamp(220px, 58vh, 660px);
    aspect-ratio: 3 / 4;
    max-width: 26vw;
}

/* Lo sfalsamento verticale delle due foto: una sale, l'altra scende. */
.imgVisAlta[b-1zkvyy5c48] {
    margin-bottom: clamp(1.5rem, 7vh, 5rem);
}

.imgVisBassa[b-1zkvyy5c48] {
    margin-top: clamp(1.5rem, 7vh, 5rem);
}

/* Riempire il riquadro senza bande vuote (object-fit:cover) evita di rimettere in pagina
   proprio le differenze di proporzioni che il riquadro fisso serve a nascondere; la foto
   intera si recupera con il click, che la apre a tutto schermo. */
.imgVisFoto[b-1zkvyy5c48] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.imgVisRiquadro:hover .imgVisFoto[b-1zkvyy5c48] {
    transform: scale(1.03);
    filter: brightness(0.85);
}

/* Stato di errore: l'evento "error" dell'<img> (URL non più valido, host irraggiungibile)
   sostituisce la foto con un'icona invece di lasciare vuoto solo lo sfondo scuro del riquadro. */
.imgVisErrore[b-1zkvyy5c48] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.55);
    cursor: default;
}

.imgVisOverlay[b-1zkvyy5c48] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.imgVisRiquadro:hover .imgVisOverlay[b-1zkvyy5c48] {
    opacity: 1;
}

.imgVisTesto[b-1zkvyy5c48] {
    flex: 1 1 0;
    min-width: 0;
    /* Righe corte: oltre una sessantina di caratteri il testo diventa faticoso da leggere. */
    max-width: 60ch;
    font-size: clamp(1.05rem, 1.25vw, 1.45rem);
    line-height: 1.75;
    color: var(--blackTextColor);
    overflow-wrap: break-word;
    /* .containerInfoItem stretcha .imgVisSezione a un'altezza fissa (un schermo) perché un testo
       corto riempia comunque la sezione, ma quella stessa altezza non cresce se il contenuto ne
       richiede di più: senza questo limite un testo lungo esce dal riquadro e finisce dietro la
       sezione successiva. Qui max-height chiude il testo nello spazio disponibile e overflow-y lo
       rende scorribile internamente invece di farlo traboccare.
       100% si risolve solo sul desktop, dove il genitore ha un'altezza definita (stretch); sotto i
       900px .imgVisSezione è alta quanto il contenuto (nessuno stretch), quindi la percentuale non
       si applica e qui non cambia nulla. */
    max-height: 100%;
    overflow-y: auto;
}

.imgVisTestoCentrato[b-1zkvyy5c48] {
    text-align: center;
}

.imgVisSezioneSoloTesto[b-1zkvyy5c48] {
    max-width: 900px;
}

/* Schermo largo ma basso (tablet in orizzontale): si resta a due colonne, ma le altezze prese
   in vh vanno ridotte e lo sfalsamento verticale ridimensionato, altrimenti la sezione supera
   di molto il viewport (vedi commento sullo snap in Info.razor.css). */
@media (min-width: 901px) and (max-height: 820px) {
    .imgVisRiquadroSingolo[b-1zkvyy5c48] {
        height: clamp(220px, 56vh, 480px);
    }

    .imgVisRiquadroLaterale[b-1zkvyy5c48] {
        height: clamp(200px, 50vh, 440px);
    }

    .imgVisAlta[b-1zkvyy5c48] {
        margin-bottom: clamp(1rem, 4vh, 2.5rem);
    }

    .imgVisBassa[b-1zkvyy5c48] {
        margin-top: clamp(1rem, 4vh, 2.5rem);
    }
}

/* Sotto i 900px le colonne non ci stanno più: tutto in verticale, foto a piena larghezza e
   formato orizzontale (su schermo stretto una foto verticale mangerebbe l'intera schermata). */
@media (max-width: 900px) {
    .imgVisSezione[b-1zkvyy5c48] {
        flex-direction: column;
        gap: 1.25rem;
    }

    /* In colonna la misura torna a prendersi dalla larghezza: l'altezza fissa in vh, sommata a
       quella del testo sotto, sfonderebbe la schermata. */
    .imgVisRiquadroSingolo[b-1zkvyy5c48],
    .imgVisRiquadroLaterale[b-1zkvyy5c48] {
        height: auto;
        width: 100%;
        max-width: 540px;
        aspect-ratio: 3 / 2;
    }

    .imgVisAlta[b-1zkvyy5c48],
    .imgVisBassa[b-1zkvyy5c48] {
        margin: 0;
    }

    /* flex: 1 1 auto e non 1 1 0: sotto i 900px .imgVisSezione è una colonna ad altezza
       automatica (nessun antenato le dà un'altezza fissa), e un figlio con flex-basis 0 dentro
       un contenitore-colonna ad altezza auto collassa a 0 invece di crescere secondo il
       contenuto — è quello che faceva sparire il testo lasciando solo la foto.
       Stesso motivo per cui max-height/overflow-y qui non servono più: sotto i 900px lo scroll
       è già quello di #mainBodyScroll (vedi commento in Info.razor.css), non quello interno al
       riquadro di testo. */
    .imgVisTesto[b-1zkvyy5c48] {
        flex: 1 1 auto;
        max-width: 100%;
        max-height: none;
        overflow-y: visible;
        text-align: center;
    }
}
/* /Components/ReUsable/CLoader.razor.rz.scp.css */
/* /Components/ReUsable/CMediaManager.razor.rz.scp.css */

.container[b-2wjon3beo2] {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 2rem;
    height: 100%;
    min-height: 0;
    width: 100%;
}

/* Altezza fissa quando il media manager è dentro un dialog: la lista scorre al suo interno,
   così il dialog resta della stessa dimensione qualunque sia il numero di elementi. */
.container--dialog[b-2wjon3beo2] {
    height: 70vh;
}

.container-item[b-2wjon3beo2] {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 0 0 auto;
}

/* Solo icone, il testo sta nel tooltip: i bottoni con etichetta non stavano nella barra. */
.container-actions[b-2wjon3beo2] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.container-path[b-2wjon3beo2] {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
}

.span-path[b-2wjon3beo2] {
    letter-spacing: 1px;
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
}

.file-manager-container[b-2wjon3beo2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.file-manager-toolbar[b-2wjon3beo2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
}

/* Contenitore scrollabile della virtualizzazione: gli elementi non sono più disposti qui a
   flex-wrap ma raggruppati in righe di altezza fissa, perché <Virtualize> ragiona per righe. */
.file-manager-items[b-2wjon3beo2] {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
}

/* Altezza, larghezza dei tile e altezza delle anteprime arrivano inline da CMediaManager: sono
   calcolate a runtime dalla larghezza del contenitore e devono corrispondere esattamente a quanto
   viene renderizzato, altrimenti lo scroll della virtualizzazione calcola male le posizioni.
   Le righe sono centrate perché con il tetto di 5 colonne su schermi molto larghi avanza spazio. */
.file-manager-row[b-2wjon3beo2] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
}

.file-manager-items--large .file-manager-row[b-2wjon3beo2] {
    gap: 24px;
}

.file-item[b-2wjon3beo2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    background-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.file-item--large[b-2wjon3beo2] {
    flex: 0 0 auto;
}

.file-item:hover[b-2wjon3beo2] {
    background-color: var(--mud-palette-action-default-hover);
}

.file-item-selected[b-2wjon3beo2] {
    border-color: rgb(213 205 205);
    background-color: rgb(69 68 68 / 6%);
}

/* L'altezza arriva inline da CMediaManager, insieme alla larghezza del tile. */
.file-item-thumb[b-2wjon3beo2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.file-item-image[b-2wjon3beo2] {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}
/* /Components/ReUsable/CNavbar.razor.rz.scp.css */
.navMain[b-wqb05jka64] {
    display: flex;
    background-color: var(--bgColorNavbar);
    flex-grow:1;
    padding:5px;
    min-height:105px;
}
.navLeft[b-wqb05jka64] {
    display: flex;
    gap:10px;
    flex-grow:4;
}
.logoContainer[b-wqb05jka64]{
    display:flex;
}
.navHeaderContainer[b-wqb05jka64] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.navTitle[b-wqb05jka64] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}
.navTitleText[b-wqb05jka64] {
    font-weight: 600;
    font-style: italic;
    font-size: 2rem;
    color: var(--blackTextColor);
}
.navSubtitleText[b-wqb05jka64] {
    letter-spacing: 2px;
    line-height: 3px;
    font-style: italic;
}
.navSocials[b-wqb05jka64]{
    display:flex;
    justify-content:space-between;
}
.navSocialItem[b-wqb05jka64]{
    display:flex;
    align-items:center;
    gap:3px;
}
    .navSocialItem:hover[b-wqb05jka64]{
        cursor:pointer;
    }
.navSocialItemSpan[b-wqb05jka64]{
    font-size:0.850rem;
    font-weight:500;
}
.navRight[b-wqb05jka64] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-grow:1;
}
.navItem[b-wqb05jka64] {
    transition: transform 0.1s ease, border-bottom 0.1s ease;
}
    .navItem:hover[b-wqb05jka64] {
        cursor: pointer;
        border-bottom: 1px solid var(--blackTextColor);
    }
    .navItem:active[b-wqb05jka64] {
        transform: scale(0.95);
    }

.navItemSpan[b-wqb05jka64] {
    font-size: 1rem;
    font-weight: 400;
}

/* Sotto i 900px il menu principale lascia il posto all'hamburger (CNavbarMenu) e navLeft prende
   quasi tutta la larghezza: senza un font più piccolo il titolo va a capo dentro il min-height
   fisso di navMain, schiacciando sottotitolo e social l'uno sull'altro. Il gap esplicito rimpiazza
   space-between (che su un'altezza fissa distribuisce lo spazio in modo imprevedibile appena il
   titolo occupa più o meno righe). */
@media (max-width: 900px) {
    .logoContainer img[b-wqb05jka64] {
        height: 64px;
        width: 64px;
    }

    .navHeaderContainer[b-wqb05jka64] {
        justify-content: center;
        gap: 10px;
    }

    .navTitleText[b-wqb05jka64] {
        font-size: 1.3rem;
    }

    .navSubtitleText[b-wqb05jka64] {
        font-size: 0.8rem;
    }
}
/* /Components/ReUsable/CPopup.razor.rz.scp.css */
.popupOverlay[b-s87qhl52fq] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background-color: rgba(15, 15, 20, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    animation: popupFadeIn-b-s87qhl52fq 0.2s ease-out;
}

/* MudPaper/MudText/MudButton renderizzano la loro radice fuori dallo scope CSS di questo
   componente: ::deep è necessario o la regola non fa mai match. */
.popupOverlay[b-s87qhl52fq]  .popupCard {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 2rem 1.75rem 1.75rem;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 24px 55px rgba(20, 20, 40, 0.25) !important;
    backdrop-filter: blur(18px);
    animation: popupPopIn-b-s87qhl52fq 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.popupIconBadge[b-s87qhl52fq] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    margin-bottom: 1.1rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

.popupCard[b-s87qhl52fq]  .popupHeader {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, var(--blackTextColor) 35%, color-mix(in srgb, var(--accent) 60%, var(--blackTextColor)) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.popupCard[b-s87qhl52fq]  .popupBody {
    margin-top: 0.6rem;
    color: #5c5c5c;
    line-height: 1.5;
}

.popupButtons[b-s87qhl52fq] {
    display: flex;
    width: 100%;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.popupButtonsSingle[b-s87qhl52fq] {
    justify-content: center;
}

.popupButtons[b-s87qhl52fq]  .popupBtn {
    border-radius: 12px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    flex: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.popupButtons[b-s87qhl52fq]  .popupBtn:hover {
    transform: translateY(-2px);
}

.popupButtons[b-s87qhl52fq]  .popupBtnConfirm {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

.popupButtonsSingle[b-s87qhl52fq]  .popupBtn {
    flex: 0 1 auto;
    min-width: 140px;
}

@keyframes popupFadeIn-b-s87qhl52fq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popupPopIn-b-s87qhl52fq {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* /Components/ReUsable/CRichTextEditor.razor.rz.scp.css */
.rtEditor[b-qy3e513txu] {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rtEditor:focus-within[b-qy3e513txu] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.rtToolbar[b-qy3e513txu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rtGroup[b-qy3e513txu] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding-right: 0.35rem;
    margin-right: 0.1rem;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.rtGroup:last-child[b-qy3e513txu] {
    border-right: none;
}

/* Formato attivo dove sta il cursore: la classe la mette ciambraEditor.updateToolbar. */
.rtToolbar[b-qy3e513txu]  .rtActive {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.rtLinkBar[b-qy3e513txu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rtLinkBar[b-qy3e513txu]  .rtLinkField {
    flex: 1 1 auto;
    margin: 0;
}

.rtContent[b-qy3e513txu] {
    position: relative;
    min-height: 8rem;
    max-height: 26rem;
    overflow-y: auto;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--blackTextColor);
    outline: none;
    overflow-wrap: break-word;
}

/* Segnaposto: il browser lascia un <br> nell'editor vuoto, quindi :empty non basterebbe. */
.rtContent.rtEmpty[b-qy3e513txu]::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 1rem;
    top: 0.85rem;
    color: var(--mud-palette-text-disabled);
    pointer-events: none;
}

.rtColorItem[b-qy3e513txu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rtColorSwatch[b-qy3e513txu] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
/* /Components/ReUsable/CSectionHeading.razor.rz.scp.css */
.sectionHeading[b-3lcau9m9x1] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sectionHeadingText[b-3lcau9m9x1] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Stesso occhiello dell'intestazione della cartella. */
.sectionHeadingEyebrow[b-3lcau9m9x1] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b6b6b;
}

.sectionHeadingTitleRow[b-3lcau9m9x1] {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}

.sectionHeadingTitle[b-3lcau9m9x1] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--blackTextColor);
}

.sectionHeadingCount[b-3lcau9m9x1] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #979696;
}

.sectionHeadingActions[b-3lcau9m9x1] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}
/* /Components/ReUsable/CSubFolderStrip.razor.rz.scp.css */
.subFolders[b-v3b7l2ez7g] {
    --subFolderHeight: 220px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Frecce visibili solo quando c'è altro da scorrere: gli attributi data-* li imposta ciambraStrip. */
.subFoldersArrows[b-v3b7l2ez7g] {
    display: none;
    gap: 0.5rem;
}

.subFolders[data-overflow] .subFoldersArrows[b-v3b7l2ez7g] {
    display: flex;
}

.subFoldersArrows[b-v3b7l2ez7g]  .subFoldersArrow {
    background-color: #ffffff;
    border-color: rgba(25, 25, 25, 0.15);
    transition: opacity 0.2s;
}

.subFolders[data-at-start] .subFoldersArrows[b-v3b7l2ez7g]  .subFoldersPrev,
.subFolders[data-at-end] .subFoldersArrows[b-v3b7l2ez7g]  .subFoldersNext {
    opacity: 0.35;
    pointer-events: none;
}

.subFoldersStrip[b-v3b7l2ez7g] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 2px 16px;
    scrollbar-width: thin;
}

/* Larga quanto la sua copertina: il titolo va a capo entro quella misura. */
.subFolderCard[b-v3b7l2ez7g] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 0.3rem;
    width: min-content;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}

.subFolderCover[b-v3b7l2ez7g] {
    margin-bottom: 0.45rem;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(20, 20, 40, 0.14);
}

/* Altezza fissa e larghezza dalle proporzioni della foto: la scheda ha esattamente il formato della copertina. */
.subFolderCover[b-v3b7l2ez7g]  .subFolderImage {
    display: block;
    height: var(--subFolderHeight);
    width: auto;
    max-width: min(560px, 80vw);
    object-fit: contain;
    transition: transform 0.35s ease;
}

.subFolderCard:hover[b-v3b7l2ez7g]  .subFolderImage {
    transform: scale(1.04);
}

.subFolderEmpty[b-v3b7l2ez7g] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--subFolderHeight);
    aspect-ratio: 3 / 2;
    margin-bottom: 0.45rem;
    border-radius: 14px;
    background-color: #00000008;
    color: #979696;
}

.subFolderTitle[b-v3b7l2ez7g] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 8rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.subFolderMeta[b-v3b7l2ez7g] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #7a7676;
}

/* Su mobile si scorre col dito: niente frecce e copertine più basse. */
@media (max-width: 700px) {
    .subFolders[b-v3b7l2ez7g] {
        --subFolderHeight: 170px;
    }

    .subFolders[data-overflow] .subFoldersArrows[b-v3b7l2ez7g] {
        display: none;
    }

    .subFoldersStrip[b-v3b7l2ez7g] {
        gap: 1rem;
    }
}
/* /Components/ReUsable/CTagInput.razor.rz.scp.css */
.tagInput[b-1dajqs3jgs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tagInputLabel[b-1dajqs3jgs] {
    color: #6b6b6b;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Riquadro dei tag: scorre per conto suo con un tetto in altezza, così per quanti tag ci
   siano l'input sotto resta sempre a schermo e la scheda immagine non si allunga. */
.tagInputChips[b-1dajqs3jgs] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    /* ~4 righe di chip piccoli, poi scroll. */
    max-height: 136px;
    min-height: 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
}

.tagInputEmpty[b-1dajqs3jgs] {
    color: #9a9a9a;
    font-style: italic;
}

/* Barra di scorrimento discreta: il riquadro è piccolo, quella di sistema lo mangerebbe. */
.tagInputChips[b-1dajqs3jgs]::-webkit-scrollbar {
    width: 8px;
}

.tagInputChips[b-1dajqs3jgs]::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
}

.tagInputChips[b-1dajqs3jgs]::-webkit-scrollbar-track {
    background: transparent;
}
/* /Components/ReUsable/CVerticalNavbarMenu.razor.rz.scp.css */
/* Sostituisce: d-inline-flex */
.custom-inline-flex[b-3stq9fn93d] {
    display: inline-flex;
}

/* La MudPaper riceve già l'altezza piena dal layout (itemBO/mainBO in flex stretch):
   qui la trasformiamo in un contenitore verticale così il menu può occupare tutta l'altezza. */
.navbarPaper[b-3stq9fn93d] {
    display: flex;
    height: 100%;
}

/* ::deep perché la classe finisce sull'elemento radice di MudNavMenu, che non riceve
   l'attributo di scope del CSS isolato del componente padre. */
.navbarPaper[b-3stq9fn93d]  .navbarMenu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* margin-top: auto spinge questo gruppo (e Indietro, che lo segue) in fondo al menu,
   separandolo dal resto dei link di navigazione sopra. */
.navbarBottomGroup[b-3stq9fn93d] {
    margin-top: auto;
}

.navbarPaper[b-3stq9fn93d]  .navbarBackLink {
    margin-top: 0.5rem;
}

/* Sostituisce: py-3 → padding-top: 1rem; padding-bottom: 1rem; */
.custom-padding-y-3[b-3stq9fn93d] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Sostituisce: px-4 → padding-left: 1.5rem; padding-right: 1.5rem; */
.custom-padding-x-4[b-3stq9fn93d] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Sostituisce: my-2 → margin-top: .5rem; margin-bottom: .5rem; */
.custom-margin-y-2[b-3stq9fn93d] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Sostituisce: mud-text-secondary → colore testo secondario mudblazor */
.custom-text-secondary[b-3stq9fn93d] {
    color: rgba(0, 0, 0, 0.6);
}
/* /Components/ReUsable/CWidgetCard.razor.rz.scp.css */
.statCard[b-41vgfkw8o4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 1.3rem 1.4rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.08);
    backdrop-filter: blur(10px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.statCard:hover[b-41vgfkw8o4] {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(20, 20, 40, 0.14);
}

.statIconBadge[b-41vgfkw8o4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

.statIconBadge .mud-icon-root[b-41vgfkw8o4] {
    font-size: 2.2rem;
}

.statCardBody[b-41vgfkw8o4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.statValue[b-41vgfkw8o4] {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--blackTextColor);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.statLabel[b-41vgfkw8o4] {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #6b6b6b;
}
/* /Components/ReUsable/ProgressiveLoader.razor.rz.scp.css */
.global-progress-toast[b-d3x3ehczx2] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    animation: slide-in-b-d3x3ehczx2 0.25s ease-out;
}

@keyframes slide-in-b-d3x3ehczx2 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* /Components/ReUsable/TitleBO.razor.rz.scp.css */
.titleBO[b-wy79llc56u] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.titleBOIconBadge[b-wy79llc56u] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

.titleBOIconBadge .mud-icon-root[b-wy79llc56u] {
    font-size: 1.9rem;
}

.titleBOTextGroup[b-wy79llc56u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.titleBOText[b-wy79llc56u] {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--blackTextColor) 35%, color-mix(in srgb, var(--accent) 65%, var(--blackTextColor)) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.titleBOSubtitle[b-wy79llc56u] {
    color: #6b6b6b;
}