/* =============================================================================
   Refactor grafico BackOffice — mockup "Portale Bandi — Nuova Navigazione BackOffice".
   Questo foglio è caricato DOPO MudBlazor.min.css, quindi non serve abusare di !important:
   basta una specificità pari o superiore. I colori arrivano tutti dal tema MudBlazor
   (var(--mud-palette-*)), così chiaro e scuro seguono l'interruttore in topbar senza duplicare valori.
   ============================================================================= */

/* ---------- Topbar ---------- */

.pb-crumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pb-crumb b {
    font-weight: 650;
    color: var(--mud-palette-text-primary);
}

.pb-crumb-sep {
    color: var(--mud-palette-text-disabled);
}

/* Il percorso è ora nella topbar: i breadcrumb ripetuti in cima alle pagine sarebbero un doppione.
   Resta una singola regola per poterli riattivare (o rimuovere dalle pagine) in un secondo momento. */
.mud-main-content .mud-breadcrumbs {
    display: none;
}

/* Respiro tra la riga arancione della topbar e l'inizio di ogni pagina. Il bordo di 5px della topbar
   sta FUORI dall'altezza che MudMainContent compensa col suo padding, quindi mangia altrettanto spazio
   al margine superiore delle pagine: qui si recupera quello e si aggiunge il distacco vero. */
.pb-page-content {
    padding-top: 2.5rem;
}

/* Le pagine partono quasi tutte con un MudContainer "mt-3"/"mt-5": sommato al padding qui sopra il
   distacco raddoppierebbe. Il respiro lo decide il guscio, uniforme su tutte le pagine. */
.pb-page-content > .mud-container {
    margin-top: 0 !important;
}

/* ---------- Rail di navigazione ---------- */

/* Il rail non deve MAI scorrere lateralmente: MudDrawer nasce con overflow-x auto e qualsiasi elemento
   più largo della corsia (52-64px secondo il font di radice) gli farebbe comparire uno scorrimento
   orizzontale, con le icone che slittano di lato. Verticale resta libero. */
.pb-rail-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow-x: hidden;
}

.pb-rail {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem 0 0.75rem;
    gap: 0.125rem;
}

.pb-rail-spacer {
    flex: 1 1 auto;
}

/* I MudTooltip che portano l'etichetta delle voci non devono allargare la corsia. */
.pb-rail .mud-tooltip-root {
    display: block;
    width: 100%;
}

/* Nessun margine laterale: la voce occupa esattamente la larghezza del rail. Con un margine (52px di
   voce + 14px) il contenuto sforava la corsia ed era proprio ciò che la faceva scorrere di lato. */
.pb-rail .mud-nav-link {
    position: relative;
    margin: 0;
    min-height: 2.75rem;
}

.pb-rail .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.pb-rail .mud-nav-link.active {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

/* Indicatore verticale della voce attiva (nel mockup è la barretta a sinistra del rail). */
.pb-rail .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: 3px;
    height: 1.25rem;
    border-radius: 0 3px 3px 0;
    background-color: var(--mud-palette-primary);
}

/* Le voci dentro un gruppo: MudBlazor le rientra di 20px per mostrare la gerarchia. Nel rail il rientro
   non serve — il gruppo è uno solo, sta in fondo e si apre a fisarmonica, quindi la sua appartenenza è
   già evidente — e disallinea la colonna delle icone, che è la cosa che si segue con l'occhio a rail
   chiuso. Stesso padding delle voci di primo livello.

   Il selettore è lungo perché deve battere quello di MudBlazor
   (`.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link`, quattro classi): venire dopo nel foglio
   non basta a parità di specificità inferiore. Va riscritta anche la proprietà logica
   `padding-inline-start`, che MudBlazor imposta accanto a quella fisica e altrimenti vincerebbe. */
.pb-rail .mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link,
.pb-rail .mud-nav-group .mud-nav-link {
    padding-left: 16px;
    padding-inline-start: 16px;
}

/* Il gruppo Amministrazione sta in fondo (lo spinge giù .pb-rail-spacer): nessun margine residuo che lo
   stacchi dal bordo, e le sue voci si aprono VERSO L'ALTO. Un MudNavGroup espande sempre verso il basso,
   ma in fondo alla corsia lì non c'è spazio: le voci finirebbero oltre il bordo, da raggiungere scorrendo.
   Si invertono i due figli del gruppo (intestazione e contenitore delle voci) con column-reverse, così il
   pannello aperto occupa lo spazio vuoto sopra; l'ordine delle voci al suo interno resta quello del markup. */
.pb-rail .pb-rail-admin {
    margin-bottom: 0;
    display: flex;
    flex-direction: column-reverse;
}

/* ---------- Section nav delle schede (ex MudTabs riquadrati) ----------
   Nata sulla scheda Bando, è ora lo stile di TUTTE le pagine a tab (iscrizione, utente, commissione,
   gruppo, profilo): i tab sono una barra con la sola riga di base e il contenuto scorre sotto, non dentro
   un riquadro che racchiude l'intera pagina. Il riquadro grande, oltre a incorniciare i riquadri già
   presenti nei pannelli, obbligava a un padding su tutti i lati e stringeva il contenuto. */

/* La barra dei tab in MudBlazor 7 è .mud-tabs-tabbar (non .mud-tabs-toolbar, che non esiste): con il
   selettore sbagliato queste regole non hanno mai agito e la barra restava una fascia di colore senza la
   riga di base che separa i tab dal contenuto. */
.pb-section-nav > .mud-tabs-tabbar {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
    border-radius: 0;
}

.pb-section-nav .mud-tab {
    min-width: 0;
    padding: 0 0.25rem;
    margin-right: 1.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
}

.pb-section-nav .mud-tab:hover {
    background-color: transparent;
    color: var(--mud-palette-text-primary);
}

.pb-section-nav .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
}

.pb-section-nav .mud-tabs-panels {
    background-color: transparent;
}

/* Contatori accanto al nome della sezione (Iscrizioni 58, …). */
.pb-section-nav .mud-badge.mud-badge-dot,
.pb-section-nav .mud-badge {
    font-variant-numeric: tabular-nums;
}

/* ---------- Schede view/edit: linguaggio visuale sperimentale ----------
   Il wrapper pb-record-page limita il test alle pagine di dettaglio e modifica. Liste, dashboard
   e dialog non vengono coinvolti. Le regole traducono sulle schede lo stesso paradigma dello storico:
   superfici morbide, navigazione compatta, gerarchia netta e contenuto separato dalle azioni. */
.pb-record-page {
    --pb-record-radius: 11px;
    padding-bottom: 1.75rem;
}

.pb-record-page .pb-record-header {
    background: linear-gradient(110deg, var(--mud-palette-primary-hover), var(--mud-palette-surface) 62%);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: var(--pb-record-radius);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--mud-palette-black) 5%, transparent);
    flex-basis: calc(100% - 1.5rem);
    margin-left: .75rem;
    margin-right: .75rem;
    margin-bottom: .2rem;
    max-width: calc(100% - 1.5rem);
    padding: .3rem .75rem !important;
}

.pb-record-page .pb-record-header > .mud-paper {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pb-record-page .pb-record-header > .mud-typography-h5 {
    font-weight: 700;
    letter-spacing: -.015em;
}

.pb-record-page .pb-record-header .mud-toolbar {
    background: transparent;
    min-height: 3rem;
    padding: 0 .25rem;
}

.pb-record-page .mud-paper-outlined {
    border-color: var(--mud-palette-lines-default);
    border-radius: var(--pb-record-radius);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--mud-palette-black) 4%, transparent);
}

.pb-record-page .mud-paper-outlined > .mud-toolbar {
    background: linear-gradient(110deg, var(--mud-palette-background-grey), var(--mud-palette-surface) 75%);
    border-radius: var(--pb-record-radius) var(--pb-record-radius) 0 0;
    min-height: 3.15rem;
    padding-left: .75rem;
    padding-right: .55rem;
}

.pb-record-page .mud-paper-outlined > .mud-toolbar .mud-typography-h6 {
    font-weight: 700;
}

/* Nelle schede la barra diventa un selettore a segmenti: con molte sezioni resta scorrevole grazie
   al comportamento nativo di MudTabs, ma l'elemento attivo si riconosce senza dipendere dalla riga. */
.pb-record-page .pb-section-nav > .mud-tabs-tabbar {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.pb-record-page .pb-section-nav > .mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: 2.35rem;
}

.pb-record-page .pb-section-nav > .mud-tabs-tabbar .mud-tabs-tabbar-content,
.pb-record-page .pb-section-nav > .mud-tabs-tabbar .mud-tabs-tabbar-wrapper {
    min-height: 2.2rem;
}

.pb-record-page .pb-section-nav .mud-tab {
    border-radius: 0;
    margin: 0 3px 0 0;
    min-height: 2.2rem;
    padding: 0 .7rem;
    transition: background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.pb-record-page .pb-section-nav .mud-tab:hover {
    background-color: transparent;
}

.pb-record-page .pb-section-nav .mud-tab.mud-tab-active {
    background-color: transparent;
    box-shadow: none;
    color: var(--mud-palette-primary);
}

.pb-record-page .pb-section-nav .mud-tabs-slider {
    display: block;
}

.pb-record-page .pb-section-nav .mud-tabs-panels {
    padding-top: .45rem;
}

.pb-record-page .mud-paper.pa-5 {
    padding: 1rem !important;
}

.pb-record-page .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
    border-radius: 10px;
}

.pb-record-page .mud-input-control:focus-within .mud-input-outlined-border {
    box-shadow: 0 0 0 3px var(--mud-palette-primary-hover);
}

.pb-record-page .readonly-field .mud-input {
    background-color: var(--mud-palette-surface);
    border-radius: 10px;
}

.pb-record-page .readonly-field .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
}

.pb-record-page .mud-button-root {
    border-radius: 9px;
    text-transform: none;
}

.pb-record-page .mud-button-filled-primary {
    box-shadow: 0 4px 12px var(--mud-palette-primary-hover);
}

.pb-record-page .mud-paper.pa-5 > .mud-form > .mud-grid > .mud-grid-item > .mud-typography-h6,
.pb-record-page .mud-paper.pa-5 > .mud-grid > .mud-grid-item > .mud-typography-h6 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.pb-record-page .mud-divider {
    border-color: var(--mud-palette-lines-default);
}

/* Modalità edit: il form non è più una sequenza piatta di campi e separatori. Le intestazioni creano
   blocchi leggibili e gli switch diventano impostazioni autonome, tutte con la stessa area cliccabile. */
.pb-record-page .pb-edit-actions {
    background: var(--mud-palette-surface) !important;
    border-left: 4px solid var(--mud-palette-primary);
    gap: .35rem;
}

.pb-record-page .pb-edit-surface {
    background: color-mix(in srgb, var(--mud-palette-background-grey) 62%, var(--mud-palette-surface));
    padding: .8rem !important;
}

.pb-record-page .pb-edit-form-grid {
    row-gap: .2rem;
}

.pb-record-page .pb-edit-section-title {
    align-items: center;
    background: linear-gradient(105deg, var(--mud-palette-primary-hover), var(--mud-palette-surface) 72%);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 11px;
    display: flex;
    flex-basis: calc(100% - .75rem);
    gap: .6rem;
    margin-left: .75rem;
    margin-bottom: .15rem;
    margin-top: .45rem;
    max-width: calc(100% - .75rem);
    padding: .5rem .7rem !important;
}

.pb-record-page .pb-edit-section-title:first-child {
    margin-top: 0;
}

.pb-record-page .pb-edit-section-title .mud-typography-subtitle1 {
    font-weight: 700;
    line-height: 1.25;
}

.pb-record-page .pb-edit-section-icon {
    align-items: center;
    background-color: var(--mud-palette-primary);
    border-radius: 8px;
    color: var(--mud-palette-primary-text);
    display: inline-flex;
    flex: 0 0 auto;
    height: 29px;
    justify-content: center;
    width: 29px;
}

.pb-record-page .pb-setting-card {
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    min-height: 50px;
    padding-left: .15rem !important;
    padding-right: .5rem !important;
}

.pb-record-page .pb-setting-card > .mud-switch {
    margin-left: 0;
}

.pb-record-page .pb-setting-card-wide {
    min-height: 54px;
}

.pb-record-page .pb-helpdesk-setting {
    padding-right: .5rem !important;
}

.pb-record-page .pb-helpdesk-field {
    align-items: center;
    display: grid;
    gap: .2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
}

.pb-record-page .pb-helpdesk-field > .mud-input-control {
    min-width: 0;
    width: 100%;
}

.pb-record-page .pb-readonly-flag {
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    gap: .65rem;
    min-height: 50px;
    padding: .25rem .15rem;
}

.pb-record-page .pb-readonly-flag > .mud-icon-root {
    flex: 0 0 auto;
    font-size: 2rem;
}

.pb-record-page .pb-edit-subsection {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    margin-top: .25rem;
    padding: .7rem !important;
}

/* La scheda utente conserva i separatori nel markup storico, ma la nuova gerarchia è affidata alle
   intestazioni di sezione come nella scheda bando. Nascondere le righe evita due sistemi visivi sovrapposti. */
.pb-record-page .pb-user-form > .mud-grid-item:has(> .mud-divider) {
    display: none;
}

/* Densità laptop: la modalità compatta parte già dai 1600px, che comprendono sia i portatili
   Full HD con scaling del sistema sia i classici 1366/1440. Il ridimensionamento avviene tramite rem,
   non con zoom o transform: i componenti MudBlazor continuano quindi a calcolare correttamente
   popover, menu, dialog e breakpoint. */
@media (max-width: 1600px) {
    :root {
        font-size: 14px;
    }

    .pb-page-content {
        min-width: 0;
        padding-top: 1rem;
    }

    .pb-page-content > .mud-container {
        max-width: none;
        width: 100%;
        padding-left: .6rem;
        padding-right: .6rem;
    }

    /* I filtri delle liste usano storicamente pa-5: su un portatile quei 20px per lato tolgono
       spazio proprio alle colonne. La stessa griglia resta ariosa su desktop e si compatta qui. */
    .pb-page-content .mud-collapse-container .mud-grid.pa-5,
    .pb-page-content .mud-collapse-container .mud-grid.p-5 {
        padding: .65rem !important;
    }

    .pb-page-content .mud-grid.mud-grid-spacing-xs-6 {
        margin: -.5rem 0 0 -.5rem;
        width: calc(100% + .5rem);
    }

    .pb-page-content .mud-grid.mud-grid-spacing-xs-6 > .mud-grid-item {
        padding: .5rem 0 0 .5rem;
    }

    .pb-page-content .mud-toolbar {
        min-height: 2.6rem;
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .pb-page-content .mud-toolbar .mud-button-root {
        min-width: auto;
        padding-left: .55rem;
        padding-right: .55rem;
    }

    .pb-record-page {
        margin-top: .55rem !important;
        padding-bottom: 1rem;
    }

    .pb-record-page .pb-record-header {
        padding-bottom: .2rem !important;
        padding-top: .2rem !important;
    }

    .pb-record-page .pb-edit-section-title {
        margin-top: .3rem;
    }

    .pb-record-page .pb-setting-card {
        min-height: 52px;
    }

    .pb-record-page .mud-toolbar {
        flex-wrap: wrap;
        gap: .2rem;
        height: auto;
        padding-bottom: .25rem;
        padding-top: .25rem;
    }

    /* Le liste lunghe devono usare tutta la larghezza prima di ricorrere allo scroll. Celle, comandi
       e pager vengono stretti in modo uniforme; il contenitore conserva lo scroll come rete di
       sicurezza per le tabelle che hanno davvero troppe colonne per il viewport. */
    .pb-page-content .mud-table-container {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-color: var(--mud-palette-lines-default) var(--mud-palette-surface);
        scrollbar-width: thin;
    }

    .pb-page-content .mud-table-container::-webkit-scrollbar {
        height: .45rem;
    }

    .pb-page-content .mud-table-container::-webkit-scrollbar-track {
        background-color: var(--mud-palette-surface);
    }

    .pb-page-content .mud-table-container::-webkit-scrollbar-thumb {
        background-color: var(--mud-palette-lines-default);
        border: 1px solid var(--mud-palette-surface);
        border-radius: var(--pb-radius-pill);
    }

    .pb-page-content .mud-table-dense * .mud-table-row .mud-table-cell {
        line-height: 1.2;
        padding: .2rem .5rem;
    }

    .pb-page-content .mud-table-head .mud-table-cell {
        white-space: nowrap;
    }

    .pb-page-content .mud-table-cell .mud-icon-button {
        padding: .2rem;
    }

    .pb-page-content .mud-table-pagination {
        min-height: 2.4rem;
        height: 2.4rem;
        padding-inline: .4rem;
    }

    .pb-page-content .mud-table-pagination .mud-select,
    .pb-page-content .mud-table-pagination .mud-typography {
        margin-left: .35rem;
        margin-right: .35rem;
    }

    .mud-dialog {
        max-height: calc(100vh - 1.5rem);
        max-width: calc(100vw - 1.5rem);
    }
}

@media (max-width: 1366px) {
    :root {
        font-size: 13px;
    }

    .pb-page-content {
        padding-top: .75rem;
    }

    .pb-page-content > .mud-container {
        padding-left: .4rem;
        padding-right: .4rem;
    }

    .pb-page-content .mud-table-dense * .mud-table-row .mud-table-cell {
        padding-left: .4rem;
        padding-right: .4rem;
    }
}

.pb-record-page .pb-edit-subsection .mud-chip {
    border-radius: 8px;
}

@media (max-width: 959px) {
    .pb-record-page .pb-record-header {
        padding: .35rem .65rem !important;
    }

    .pb-record-page .pb-section-nav .mud-tab {
        padding-left: .65rem;
        padding-right: .65rem;
    }

    .pb-record-page .mud-paper.pa-5 {
        padding: 1rem !important;
    }

    .pb-record-page .pb-edit-surface {
        padding: .75rem !important;
    }

    .pb-record-page .pb-setting-card-wide {
        align-items: flex-start;
        flex-direction: column;
        padding-bottom: .75rem !important;
        padding-top: .75rem !important;
    }
}

/* ---------- Dashboard: card attività ---------- */

.pb-dashboard-card {
    min-height: 8rem;
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-black) 5%, transparent);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.pb-dashboard-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-black) 8%, transparent);
}

.pb-dashboard-card > .mud-card-content {
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

.pb-dashboard-card > .mud-card-content > .mud-stack {
    width: 100%;
}

.pb-dashboard-card__count {
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.pb-dashboard-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    background-color: transparent;
}

.pb-dashboard-card__title {
    font-weight: 500;
}

.pb-dashboard-card__actions {
    flex: none;
    color: var(--mud-palette-text-disabled);
}

@media (max-width: 600px) {
    .pb-dashboard-card {
        min-height: 6.75rem;
    }
}

/* ---------- Sub-navigazione verticale del Workflow (Fasi / Azioni / Designer) ---------- */

.pb-wf-layout {
    display: flex;
    gap: 1.625rem;
    align-items: flex-start;
}

.pb-wf-sidenav {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
    border-radius: 999px;
    background-color: var(--mud-palette-background-gray);
    position: sticky;
    top: 5.5rem;
}

.pb-wf-sidenav .mud-icon-button {
    border-radius: 999px;
}

.pb-wf-sidenav .pb-wf-active {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-2);
}

.pb-wf-content {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 880px) {
    .pb-wf-layout {
        flex-direction: column;
    }

    .pb-wf-sidenav {
        flex-direction: row;
        position: static;
    }
}

/* ---------- Pannello laterale destro (fasi e azioni del workflow) ----------
   Apre a filo del bordo destro, ad altezza piena, come il drawer del mockup. MudBlazor mette
   .mud-dialog-centerright sul container quando DialogOptions.Position è CenterRight
   (vedi WorkflowDialogOptions.SidePanel); di suo lo centra verticalmente con un padding a destra. */

.mud-dialog-container.mud-dialog-centerright {
    align-items: stretch;
    justify-content: flex-end;
    padding-right: 0;
}

.mud-dialog-container.mud-dialog-centerright > .mud-dialog {
    display: flex;
    flex-direction: column;
    position: relative;
    /* Di suo il pannello prende il 45% dello schermo: i form stanno a campo per riga e con meno di così
       diventano una colonna di caselle strette. La variabile la scrive SidePanelResizeHandle solo quando
       l'utente trascina il bordo, così finché non lo fa la larghezza resta proporzionata allo schermo.
       Il tetto in vw vale per le preferenze in rem salvate su monitor più grandi. */
    width: min(var(--pb-side-panel-width, 45vw), 92vw);
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    animation: pb-side-panel-in 0.18s ease-out;
}

/* Il MaxWidth delle DialogOptions imporrebbe il suo tetto: qui comanda la larghezza del pannello. */
.mud-dialog-container.mud-dialog-centerright > .mud-dialog.mud-dialog-width-sm {
    max-width: 100vw;
}

/* Maniglia di ridimensionamento sul bordo sinistro. */
.pb-side-panel-resize {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    touch-action: none;
    z-index: 2;
}

.pb-side-panel-resize:hover,
.pb-side-panel-resize:active {
    background-color: var(--mud-palette-primary);
    opacity: 0.35;
}

/* Lo scorrimento sta dentro al pannello: intestazione e pulsanti restano fermi. */
.mud-dialog-container.mud-dialog-centerright > .mud-dialog > .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Il tetto di altezza pensato per la modale centrata qui è di troppo (lo dà il pannello). */
.mud-dialog-container.mud-dialog-centerright .wf-phase-dialog-content {
    max-height: none;
}

@keyframes pb-side-panel-in {
    from {
        translate: 100% 0;
    }

    to {
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mud-dialog-container.mud-dialog-centerright > .mud-dialog {
        animation: none;
    }
}

/* ---------- Tabelle: intestazione arrotondata ----------
   MudBlazor arrotonda gli angoli superiori delle celle di intestazione solo per le tabelle a
   intestazione fissa (.mud-table-sticky-header), che qui non si usano: la fascia colorata dell'header
   restava quindi a spigolo vivo dentro un contenitore già arrotondato.
   Si ritaglia il contenitore (tecnica consueta) invece di arrotondare la prima e l'ultima cella: con lo
   scorrimento orizzontale quelle celle si spostano e i loro angoli tondi finirebbero in mezzo alla
   tabella. Così l'angolo è sempre quello del riquadro, sopra e sotto (anche il pager segue il raggio). */
.mud-table {
    overflow: hidden;
}

/* =============================================================================
   COMPATTEZZA
   Il portale è fatto di pagine che impilano riquadro-del-titolo, filtri e tabella dentro una MudGrid: con
   le spaziature di default di MudBlazor ogni giunzione costa 24px e il contenuto finisce spinto in basso,
   con più aria che dati. Qui si stringono le spaziature strutturali (non i font, che hanno la loro scala
   in App.razor). I valori sono in rem, quindi seguono la scalatura della radice sugli schermi piccoli.
   ============================================================================= */

/* Distanza fra gli elementi di una MudGrid quando non è specificata: MudBlazor usa spacing 6 = 24px. Le
   altre spaziature (quelle scelte a mano nelle pagine con Spacing="…") restano come sono.
   La larghezza compensa il margine negativo: cambiando l'uno va cambiata l'altra, o la griglia sborda. */
.mud-grid.mud-grid-spacing-xs-6 {
    margin: -0.75rem 0 0 -0.75rem;
    width: calc(100% + 0.75rem);
}

.mud-grid.mud-grid-spacing-xs-6 > .mud-grid-item {
    padding: 0.75rem 0 0 0.75rem;
}

/* Barra del titolo delle liste: la variante Dense di MudBlazor resta comunque alta 48px. */
.mud-toolbar.mud-toolbar-dense {
    height: 2.75rem;
}

/* Celle delle tabelle dense. I 24px di padding a destra di MudBlazor sono il motivo per cui i testi
   lunghi (titoli di bando, tipi) si spezzano su due o tre righe: la riga passa da ~34px a 66-84px e la
   tabella sembra non essere più "dense" solo perché la pagina successiva ha titoli più lunghi. Con meno
   padding il testo sta su una riga più a lungo, senza tagliare nulla. */
.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 0.25rem 0.75rem;
}

/* Fascia della paginazione in fondo alla tabella. */
.mud-table-pagination {
    min-height: 2.75rem;
    height: 2.75rem;
}

/* =============================================================================
   ANGOLI TONDI
   Il raggio di base è quello del tema (LayoutProperties.DefaultBorderRadius in App.razor): riquadri,
   card, dialoghi, bottoni e campi lo prendono già da lì. Qui si arrotonda ciò che MudBlazor lascia a
   spigolo perché non legato a quella variabile, e si porta a pastiglia quello che è naturalmente tale
   (indicatori, chip, avatar). Si usa sempre var(--mud-default-borderradius): cambiando il tema cambia
   tutto insieme, senza numeri sparsi nel foglio.
   ============================================================================= */

:root {
    /* Pastiglia: raggio molto più grande dell'altezza dell'elemento. */
    --pb-radius-pill: 999px;

    /* Raggio dei CAMPI, più stretto di quello del tema. Non è una scelta estetica: in MudBlazor lo
       "stacco" dell'etichetta sul bordo dei campi outlined non è un taglio nel bordo, è l'etichetta che
       copre la linea col proprio sfondo, un rettangolo che parte a ~14px dal bordo sinistro. Con il raggio
       pieno (16px) la curva dell'angolo finisce sotto quel rettangolo e ne sbuca sopra: si vede uno
       spezzone di bordo di troppo e l'etichetta sembra appoggiata sulla linea. Mezzo raggio sta sempre
       dentro lo stacco, a qualsiasi scalatura della radice. */
    --pb-radius-field: 0.5rem;
}

/* Chip "Label" (quadrati per scelta di MudBlazor, 4px): sono etichette di fase e contatori sparsi in
   tutte le liste, restavano l'unica cosa spigolosa dentro riquadri tondi. */
.mud-chip.mud-chip-label {
    border-radius: var(--mud-default-borderradius);
}

/* Barre di caricamento e di avanzamento: estremi tondi. */
.mud-progress-linear,
.mud-progress-linear .mud-progress-linear-bar {
    border-radius: var(--pb-radius-pill);
    overflow: hidden;
}

/* Tooltip, popover di select/autocomplete/date picker e menu: hanno un raggio proprio più stretto. */
.mud-tooltip,
.mud-popover,
.mud-picker-paper,
.mud-list.mud-list-padding {
    border-radius: var(--mud-default-borderradius);
}

/* Voci del rail: l'evidenza della voce attiva e l'hover seguono il raggio del tema. Nessun margine
   laterale, per la ragione spiegata sopra (il rail non deve poter scorrere di lato). */
.pb-rail .mud-nav-link,
.pb-rail .mud-nav-group .mud-nav-link {
    border-radius: var(--mud-default-borderradius);
}

/* Barra dei tab riquadrati (MudTabs Rounded/ApplyEffectsToContainer) e loro contenitore. */
.mud-tabs-rounded > .mud-tabs-toolbar,
.mud-tabs-rounded .mud-tabs-panels {
    border-radius: var(--mud-default-borderradius);
}

/* Celle di intestazione e pager delle tabelle: il ritaglio del contenitore (sopra) dà l'angolo, ma la
   fascia dell'header ha un fondo pieno e senza questo il colore resterebbe visibile negli angoli. */
.mud-table-container,
.mud-table-toolbar {
    border-radius: inherit;
}

/* Pannello laterale destro: gli angoli tondi sono i due a sinistra, gli altri sono a filo del bordo. */
.mud-dialog-container.mud-dialog-centerright > .mud-dialog {
    border-radius: var(--mud-default-borderradius) 0 0 var(--mud-default-borderradius);
}

/* Avatar delle card di attività: cerchio pieno, non quadrato stondato. */
.mud-avatar {
    border-radius: var(--pb-radius-pill);
}

/* Campi di input: bordo del variante "outlined" al raggio dei campi (vedi --pb-radius-field). */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--pb-radius-field);
}

/* Lo stesso raggio va sull'elemento input, non solo sul bordo che gli sta sopra: lo sfondo che il browser
   dipinge sui campi compilati automaticamente (autofill) è quello dell'input, e senza raggio restava un
   rettangolo a spigoli vivi dentro un bordo tondo. Vale anche per lo sfondo della selezione. */
.mud-input.mud-input-outlined .mud-input-root-outlined,
.mud-input.mud-input-outlined .mud-input-root-outlined:-webkit-autofill {
    border-radius: var(--pb-radius-field);
}

/* Il variante "filled" (le MudSelect di alcune schede) arrotonda i soli angoli superiori: qui li si
   arrotonda tutti, perché sotto non c'è alcuna riga da chiudere. Nessuna etichetta sul bordo, quindi qui
   il raggio pieno del tema non dà problemi. */
.mud-input.mud-input-filled,
.mud-input.mud-input-filled:hover:not(.mud-disabled) {
    border-radius: var(--mud-default-borderradius);
}

/* =============================================================================
   TEMA SCURO
   Il tema chiaro resta quello storico del portale: qui si correggono solo i punti in cui il CSS
   preesistente ha colori fissi pensati per il chiaro (canvas del designer, intestazioni tabella,
   legenda del workflow), che sul fondo scuro darebbero testo illeggibile.
   Il marcatore data-theme sulla radice è scritto da ThemeService.SyncRootMarkerAsync (MudBlazor 7 si
   limita a scambiare le variabili --mud-palette-*, senza esporre una classe per il tema attivo).
   ============================================================================= */

/* ---------- Topbar e tabelle ---------- */

/* Con il primario chiaro del tema scuro, testo bianco su fascia primaria non sarebbe leggibile:
   l'intestazione diventa testo tenue su superficie, come nel mockup. */
:root[data-theme="dark"] .mud-table-root .mud-table-head .mud-table-row .mud-table-cell {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

:root[data-theme="dark"] .mud-table-root .mud-table-head .mud-table-row .mud-table-cell .mud-table-sort-label {
    color: var(--mud-palette-text-secondary);
}

:root[data-theme="dark"] .mud-table-root .mud-table-sort-label:hover {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700 !important;
}

/* ---------- Designer del workflow (workflow-designer.css è tarato sul tema chiaro) ---------- */

:root[data-theme="dark"] .wf-designer-container {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    background-image: radial-gradient(circle, var(--mud-palette-lines-default) 1px, transparent 1px);
    background-size: 24px 24px;
}

:root[data-theme="dark"] .wf-node {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
}

/* L'intestazione del nodo ha il colore della fase come sfondo (tinta chiara scelta in configurazione):
   il testo scuro resta la scelta leggibile anche in tema scuro. */
:root[data-theme="dark"] .wf-node-body {
    color: var(--mud-palette-text-secondary);
}

:root[data-theme="dark"] .wf-node-commission {
    color: var(--mud-palette-success);
}

:root[data-theme="dark"] .wf-node .diagram-port {
    background: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-surface) !important;
    box-shadow: 0 0 0 1px var(--mud-palette-primary) !important;
}

:root[data-theme="dark"] .diagram-link-label {
    fill: var(--mud-palette-text-primary);
    stroke: var(--mud-palette-surface);
}

/* Etichette della legenda: i colori delle azioni sono validi come tratto della freccia, ma come
   colore del testo su fondo scuro alcuni (viola, rosso cupo) restano sotto soglia di leggibilità. */
:root[data-theme="dark"] .pb-wf-legend-label {
    color: var(--mud-palette-text-primary) !important;
}

/* ---------- Helper storici con neutri fissi ---------- */

:root[data-theme="dark"] .text-grey {
    color: var(--mud-palette-text-secondary) !important;
}

:root[data-theme="dark"] .bg-grey,
:root[data-theme="dark"] .bg-light {
    background-color: var(--mud-palette-background-gray) !important;
}

:root[data-theme="dark"] .bg-white {
    background-color: var(--mud-palette-surface) !important;
}

:root[data-theme="dark"] .border {
    border-color: var(--mud-palette-lines-default) !important;
}

/* ---------- Selettore tema nel profilo ---------- */

.pb-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 15rem));
    gap: 1rem;
}

.pb-theme-option {
    cursor: pointer;
    border: 2px solid var(--mud-palette-lines-default);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.pb-theme-option:hover,
.pb-theme-option:focus-visible {
    border-color: var(--mud-palette-primary);
    outline: none;
}

.pb-theme-option-selected {
    border-color: var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-action-default-hover);
}

.pb-theme-preview {
    position: relative;
    height: 7rem;
    overflow: hidden;
    border: 1px solid;
    border-radius: calc(var(--mud-default-borderradius) * 0.65);
}

.pb-theme-preview-light {
    background: #f0efef;
    border-color: #d7d7d7;
}

.pb-theme-preview-dark {
    background: #171717;
    border-color: #363636;
}

.pb-theme-preview-rail,
.pb-theme-preview-surface,
.pb-theme-preview-line {
    position: absolute;
    display: block;
}

.pb-theme-preview-rail {
    inset: 0 auto 0 0;
    width: 22%;
}

.pb-theme-preview-surface {
    inset: 14% 8% 14% 30%;
    border-radius: 0.45rem;
}

.pb-theme-preview-line {
    left: 37%;
    right: 16%;
    top: 35%;
    height: 0.45rem;
    border-radius: 99px;
    box-shadow: 0 1.15rem 0 currentColor, 0 2.3rem 0 currentColor;
}

.pb-theme-preview-light .pb-theme-preview-rail {
    background: #ffffff;
}

.pb-theme-preview-light .pb-theme-preview-surface {
    background: #ffffff;
}

.pb-theme-preview-light .pb-theme-preview-line {
    color: #c3c3c3;
    background: #c3c3c3;
}

.pb-theme-preview-dark .pb-theme-preview-rail {
    background: #1b1b1b;
}

.pb-theme-preview-dark .pb-theme-preview-surface {
    background: #212121;
}

.pb-theme-preview-dark .pb-theme-preview-line {
    color: #4a4a4a;
    background: #4a4a4a;
}

@media (max-width: 600px) {
    .pb-theme-options {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------
   Linea temporale delle fasi (lista iscrizioni del bando)
   ------------------------------------------------------------------ */

/* MudBlazor limita il contenuto di ogni item a "calc(100% - 96px)": una misura pensata per la
   timeline verticale, dove i 96px sono la banda del pallino di fianco al testo. In orizzontale
   quella banda non esiste e la regola diventa dannosa — su una colonna da 130px il nome della fase
   avrebbe 34px di spazio, resterebbe ancorato a sinistra e apparirebbe spostato rispetto al pallino,
   che invece è centrato. Qui il testo sta SOPRA il pallino, quindi deve poter usare tutta la colonna. */
.pb-phases-timeline .mud-timeline-item-content {
    max-width: 100%;
}