/* =========================================================
   UNCHAINED - FOGLIO DI STILE PRINCIPALE

   Contratto: questo unico foglio serve autenticazione, dashboard, liste,
   dettagli, modali, mappe relazionali e Centro SLA. Le variabili :root sono
   i token cromatici condivisi; le sezioni successive sono raggruppate per
   componente/pagina. Le classi di stato SLA sono applicate anche da
   static/js/sla_live.js, quindi i relativi nomi sono un contratto JS/CSS.
   ========================================================= */

/* RESET BASE */
* {
    box-sizing: border-box;
}

 :root {
    /* Palette aziendale Adaxi applicata al prodotto Unchained */
    --unchained-blu-notte: #1D326A;
    --unchained-blu-profondo: #352B61;
    --unchained-blu-acceso: #405184;
    --unchained-ciano: #625079;
    --unchained-ciano-chiaro: #C56F9D;

    --unchained-sfondo: #F0EFF4;
    --unchained-superficie: #E5E3EB;
    --unchained-bianco: #FFFFFF;
    --unchained-testo: #2E2940;
    --unchained-testo-soft: #716B7C;
    --unchained-bordo: #D8D4E1;

    /* Colori semantici */
    --unchained-successo: #4F7D61;
    --unchained-warning: #B96A1F;
    --unchained-danger: #A94442;
    --unchained-info: #405184;

    /* Alias compatibile con il CSS già esistente */
    --unchained-blu: var(--unchained-blu-notte);
    --unchained-blu-soft: var(--unchained-blu-profondo);

    /*
     * Sistema globale delle ombre.
     *
     * Le superfici usano una sola direzione (verso il basso) e blur brevi:
     * questo evita il vecchio alone radiale del neumorfismo e rende più
     * leggibile la gerarchia fra pagina, pannelli e controlli. Gli anelli non
     * hanno blur e sono riservati a focus, selezione e indicatori di stato.
     */
    --unchained-ombra-piccola: 0 3px 5px rgba(45, 60, 134, 0.16);
    --unchained-ombra-media: 0 5px 9px rgba(45, 60, 134, 0.18);
    --unchained-ombra-grande: 0 8px 14px rgba(45, 60, 134, 0.22);
    --unchained-ombra-scura: 0 7px 12px rgba(0, 0, 0, 0.30);
    --unchained-ombra-interna: inset 0 2px 3px rgba(45, 60, 134, 0.18);
    --unchained-ombra-premuta: inset 0 3px 4px rgba(45, 60, 134, 0.26);
    --unchained-anello-focus: 0 0 0 3px rgba(200, 63, 136, 0.24);
    --unchained-anello-accento: 0 0 0 3px rgba(200, 63, 136, 0.18);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--unchained-sfondo);
    color: var(--unchained-testo);
    font-family: Georgia, "Times New Roman", serif;
}

/* CONTENITORE GENERALE */
.pagina {
    min-height: 100vh;
    padding: 20px;
}

/* =========================================================
   BARRA SUPERIORE
   ========================================================= */

.barra-superiore {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 110px;
    padding: 24px 28px;

    background: linear-gradient(135deg, var(--unchained-blu-notte) 0%, #303236 100%);
    color: var(--unchained-bianco);

    border-radius: 24px;

    box-shadow:
        0 12px 28px rgba(35, 36, 39, 0.32),
        0 0 0 1px rgba(200, 63, 136, 0.06);
}

.barra-superiore-link {
    display: inline-flex;
    align-items: center;

    text-decoration: none;
}

.barra-superiore-logo {
    display: block;

    width: auto;
    height: 130px;
    max-width: min(48vw, 470px);

    object-fit: contain;
}

.barra-superiore-sottotitolo {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.95rem;
    font-family: Arial, Helvetica, sans-serif;
}

/* =========================================================
   LAYOUT PRINCIPALE
   ========================================================= */

.sezione-menu-laterale {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;

    min-height: calc(100vh - 190px);
    margin-top: 42px;

    align-items: start;
}

/* =========================================================
   SIDEBAR / MENU
   ========================================================= */

.neon-sidebar {
    position: sticky;
    top: 20px;

    width: 100%;
    padding: 20px;

    background: #F6F6F7;

    border: 1px solid #D2D3D6;
    border-radius: 10px;

    font-family: Arial, Helvetica, sans-serif;

    box-shadow: 0 5px 12px rgba(35, 36, 39, 0.12);
}

.neon-sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 16px;
    padding: 2px 2px 14px;

    color: var(--unchained-blu);

    border-bottom: 1px solid #DCDDDF;

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: left;
}

.neon-sidebar-title::before {
    width: 4px;
    height: 18px;

    border-radius: 2px;

    background: var(--unchained-ciano);

    content: "";
}

.neon-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Navigazione primaria: geometria netta, bordi sottili e accento laterale. */
.neon-menu-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;
    min-height: 46px;
    padding: 11px 14px 11px 12px;

    border: 1px solid transparent;
    border-left: 4px solid transparent;
    border-radius: 6px;

    background: transparent;
    color: #45474B;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    text-align: left;

    cursor: pointer;

    box-shadow: none;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.2s ease,
        box-shadow 0.16s ease;
}

.neon-menu-button:hover {
    border-color: #D7D8DA;
    border-left-color: #D7D8DA;

    background: var(--unchained-bianco);
    color: var(--unchained-blu-notte);
}

.neon-menu-button:focus-visible,
.neon-sottomenu-link:focus-visible {
    outline: 3px solid rgba(200, 63, 136, 0.24);
    outline-offset: 2px;
}

/* Pagina corrente: superficie chiara e linea arancione sul lato sinistro. */
.neon-menu-button.attivo {
    background: var(--unchained-bianco);
    color: var(--unchained-blu-notte);

    border-color: #D6D7D9;
    border-left-color: var(--unchained-ciano);

    box-shadow: 0 2px 5px rgba(35, 36, 39, 0.10);
}

/* =========================================================
   CONTENUTO CENTRALE
   ========================================================= */

.contenuto-centrale {
    min-width: 0;
    padding: 10px 0 40px;
}

.intestazione-pagina {
    margin-bottom: 28px;
}

.intestazione-pagina h2 {
    margin: 0 0 8px;

    color: var(--unchained-blu);

    font-size: clamp(2rem, 3vw, 3rem);
}

.intestazione-pagina p {
    margin: 0;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

/* =========================================================
   CARD E SUPERFICI
   ========================================================= */

.griglia-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 22px;

    margin-bottom: 26px;
}

.card-neumorfica {
    padding: 24px;

    background: var(--unchained-superficie);

    border-radius: 24px;

    box-shadow:
        10px 10px 20px rgba(0, 0, 0, 0.12),
        -8px -8px 16px rgba(255, 255, 255, 0.92);
}

.card-kpi {
    min-height: 150px;
}

.card-kpi-etichetta {
    margin: 0 0 12px;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
}

.card-kpi-valore {
    margin: 0;

    color: var(--unchained-blu-acceso);

    font-size: 3rem;
    font-weight: 800;
}

.griglia-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

/*
 * I riepiloghi possono contenere molti gruppi o stati. La card conserva una
 * misura prevedibile e delega lo scorrimento al solo elenco interno.
 */
.griglia-dashboard > .card-neumorfica {
    display: flex;
    flex-direction: column;
    height: 330px;
    min-height: 330px;
}

.card-dashboard-titolo {
    margin: 0 0 20px;

    color: var(--unchained-blu);

    font-size: 1.35rem;
}

.grafico-vuoto {
    display: grid;
    place-items: center;

    min-height: 280px;

    border-radius: 20px;

    background: #ECECEC;

    box-shadow:
        inset 6px 6px 12px rgba(0, 0, 0, 0.08),
        inset -6px -6px 12px rgba(255, 255, 255, 0.85);
}

.griglia-dashboard .grafico-vuoto {
    flex: 1;
    min-height: 0;
}

.grafico-vuoto-contenuto {
    text-align: center;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
}

.grafico-vuoto-cerchio {
    width: 120px;
    height: 120px;
    margin: 0 auto 18px;

    border: 16px solid #D4D4D4;
    border-radius: 50%;
}

/* =========================================================
   FORM NUOVO TICKET
   ========================================================= */

/*
    La pagina Nuovo Ticket utilizza tutta la larghezza disponibile
    dell'area centrale. Non è prevista alcuna sidebar contestuale
    sulla destra.
*/
.nuovo-ticket-layout {
    display: block;
    width: 100%;
    max-width: none;
}

/*
    Il form occupa l'intera larghezza del contenuto centrale.
*/
.form-ticket {
    width: 100%;
    max-width: none;
}

/*
    I campi principali sono disposti su due colonne.

    In questo modo il form sfrutta completamente lo spazio disponibile
    senza lasciare una colonna vuota sulla destra.
*/
.form-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
    width: 100%;
}

.form-gruppo {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

/*
    Titolo e descrizione occupano l'intera larghezza del form.
*/
.form-gruppo.form-largo {
    grid-column: 1 / -1;
}

.form-gruppo label {
    color: var(--unchained-blu);

    font-size: 0.98rem;
    font-weight: 700;
}

.form-controllo {
    width: 100%;

    padding: 14px 16px;

    border: 0;
    border-radius: 16px;

    background: var(--unchained-bianco);
    color: var(--unchained-testo);

    font: inherit;

    outline: none;

    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.12),
        inset -4px -4px 8px rgba(255, 255, 255, 0.94);
}

.form-controllo:focus {
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.14),
        inset -4px -4px 8px rgba(255, 255, 255, 0.94),
        0 0 0 3px rgba(200, 63, 136, 0.18);
}

textarea.form-controllo {
    min-height: 190px;
    resize: vertical;
}

.area-allegati {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;

    padding: 18px;

    border-radius: 18px;

    background: #ECECEC;

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.08),
        inset -5px -5px 10px rgba(255, 255, 255, 0.9);
}

.form-azioni {
    display: flex;
    justify-content: flex-end;
    gap: 14px;

    width: 100%;
    margin-top: 26px;
}

/* Messaggi di validazione prodotti dai form Django. */
.form-errore {
    margin: 0;

    color: var(--unchained-danger);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
}

.form-errori-generali {
    margin-top: 22px;
    padding: 14px 16px;

    border-radius: 16px;

    background: rgba(180, 67, 67, 0.08);
}



/* =========================================================
   FORM TICKET - CLASSIFICAZIONE E TITOLO RIORGANIZZATI
   ========================================================= */

/*
 * Le tre categorie sono impilate nella colonna sinistra.
 * Impatto, Urgenza e Priorità sono impilati nella colonna destra.
 */
.form-sezione-classificazione.form-largo,
.form-riga-titolo-canale.form-largo {
    grid-column: 1 / -1;
}

.form-sezione-classificazione {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;

    width: 100%;
}

.form-colonna-classificazione {
    display: grid;
    align-content: start;
    gap: 22px;

    min-width: 0;
}


/*
 * Titolo e Canale di contatto condividono la riga successiva.
 * Il titolo utilizza la porzione maggiore dello spazio disponibile.
 */
.form-riga-titolo-canale {
    display: grid;
    grid-template-columns:
        minmax(0, 2.15fr)
        minmax(250px, 0.85fr);
    align-items: end;
    gap: 28px;

    width: 100%;
}

.form-titolo-principale,
.form-canale-contatto {
    min-width: 0;
}


/*
 * Su schermi medi e piccoli tutte le sezioni tornano
 * naturalmente a una sola colonna.
 */
@media (max-width: 900px) {
    .form-sezione-classificazione,
    .form-riga-titolo-canale {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   BOTTONI
   ========================================================= */

.neon-button {
    display: inline-block;

    padding: 14px 28px;

    border: 0;
    border-radius: 999px;

    background: var(--unchained-bianco);
    color: var(--unchained-blu);

    font: inherit;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;

    box-shadow:
        8px 8px 16px rgba(0, 0, 0, 0.16),
        -8px -8px 16px rgba(255, 255, 255, 0.1); 
        


    transition:
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.neon-button:hover {
    transform: translateY(-1px);
    color: var(--unchained-blu-acceso);
}

.neon-button:active {
    transform: translateY(1px);

    box-shadow:
        inset 6px 6px 12px rgba(0, 0, 0, 0.30),
        inset -6px -6px 12px rgba(255, 255, 255, 0.90);
}

/* =========================================================
   FILTRI E TABELLE
   ========================================================= */

.pannello-filtri {
    margin-bottom: 24px;
}

.filtri-griglia {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 16px;
}

.tabella-wrapper {
    overflow-x: auto;

    border-radius: 20px;

    background: var(--unchained-bianco);

    box-shadow:
        10px 10px 20px rgba(0, 0, 0, 0.10),
        -8px -8px 16px rgba(255, 255, 255, 0.90);
}

.tabella-ticket {
    width: 100%;
    min-width: 1080px;

    border-collapse: collapse;

    font-family: Arial, Helvetica, sans-serif;
}

.tabella-ticket th,
.tabella-ticket td {
    padding: 14px 16px;

    border-bottom: 1px solid var(--unchained-bordo);

    text-align: left;
    vertical-align: top;
}

.tabella-ticket th {
    color: var(--unchained-blu);

    background: #ECECEC;

    font-size: 0.9rem;
    white-space: nowrap;
}

.tabella-ticket tbody tr:last-child td {
    border-bottom: 0;
}

.tabella-vuota {
    padding: 48px !important;

    color: var(--unchained-testo-soft);

    text-align: center !important;
}

.badge {
    display: inline-block;

    padding: 7px 12px;

    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 700;
}

.badge-neutro {
    background: #E3E3E3;
    color: #55575B;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .griglia-kpi {
        grid-template-columns: repeat(2, minmax(170px, 1fr));
    }

    .filtri-griglia {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 900px) {
    .pagina {
        padding: 12px;
    }

    .barra-superiore {
        min-height: 90px;
    }

    .sezione-menu-laterale {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 28px;
    }

    .neon-sidebar {
        position: static;
        padding: 22px;
    }

    .neon-sidebar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .griglia-dashboard,
    .form-griglia {
        grid-template-columns: 1fr;
    }

    .form-gruppo.form-largo {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .barra-superiore {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .neon-sidebar-nav,
    .griglia-kpi,
    .filtri-griglia {
        grid-template-columns: 1fr;
    }

    .form-azioni {
        flex-direction: column;
    }

    .neon-button {
        width: 100%;
        text-align: center;
    }
}


/* Logo responsive */
@media (max-width: 620px) {
    .barra-superiore-logo {
        height: 56px;
        max-width: 78vw;
    }
}


/* =========================================================
   PAGINA LOGIN
   ========================================================= */

.pagina-login {
    min-height: 100vh;
    overflow-x: hidden;

    background:
        linear-gradient(
            135deg,
            #17181A 0%,
            var(--unchained-blu-notte) 48%,
            #303236 100%
        );
}

.login-layout {
    display: grid;
    place-items: center;

    min-height: 100vh;
}


/* AREA ACCESSO */
.login-accesso {
    display: grid;
    place-items: center;

    width: 100%;
    min-height: 100vh;
    padding: 40px 20px;
}

.pagina-login .login-card {
    width: min(100%, 460px);
    overflow: hidden;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;

    background: #F7F7F8;

    font-family: Arial, Helvetica, sans-serif;

    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
}

.login-card-intestazione {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    padding: 28px 36px 25px;

    text-align: center;

    background: var(--unchained-blu-notte);
    border-bottom: 4px solid var(--unchained-ciano);
}

.login-card-logo {
    width: 82px;
    height: 82px;

    object-fit: contain;

    margin-bottom: 4px;

    border: 1px solid rgba(200, 63, 136, 0.48);
    border-radius: 10px;

    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.26);
}

.login-card h1 {
    margin: 0;

    color: var(--unchained-bianco);

    font-size: 1.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;

    text-transform: uppercase;
}

.login-card-intestazione p {
    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.35;

    text-transform: uppercase;
}

.login-card-corpo {
    padding: 32px 38px 38px;
}

.login-form {
    display: grid;
    gap: 22px;
}

.login-form-gruppo {
    display: grid;
    gap: 9px;
}

.login-form-gruppo label,
.login-label-riga label {
    color: var(--unchained-blu-notte);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.login-label-riga {
    display: flex;
    justify-content: space-between;
    gap: 16px;

    align-items: center;
}

.pagina-login .login-input {
    width: 100%;
    min-height: 50px;

    padding: 13px 15px;

    border: 1px solid #C8C9CC;
    border-radius: 6px;

    background: var(--unchained-bianco);
    color: var(--unchained-testo);

    font: inherit;

    outline: none;

    box-shadow: 0 2px 3px rgba(35, 36, 39, 0.10);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.pagina-login .login-input:focus {
    border-color: var(--unchained-ciano);

    box-shadow: var(--unchained-anello-focus);
}

.login-input::placeholder {
    color: #929398;
}

.pagina-login .login-button {
    width: 100%;
    min-height: 50px;

    margin-top: 6px;
    padding: 14px 24px;

    border: 0;
    border-radius: 6px;

    background:
        linear-gradient(
            180deg,
            var(--unchained-ciano) 0%,
            var(--unchained-blu-acceso) 100%
        );

    color: var(--unchained-bianco);

    font: inherit;
    font-weight: 800;
    letter-spacing: 0.035em;

    cursor: pointer;

    box-shadow: 0 3px 6px rgba(123, 52, 5, 0.25);

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease;
}

.pagina-login .login-button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

.login-messaggi {
    display: grid;
    gap: 8px;

    margin: 0 0 24px;
}

.login-messaggio {
    margin: 0;
    padding: 11px 13px;

    border: 1px solid rgba(169, 68, 66, 0.36);
    border-radius: 7px;

    background: rgba(169, 68, 66, 0.07);
    color: var(--unchained-danger);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;
}

.login-messaggio.info,
.login-messaggio.warning {
    border-color: rgba(200, 63, 136, 0.42);
    background: rgba(200, 63, 136, 0.10);
    color: #8A3F0B;
}

.pagina-login .login-button:hover {
    color: var(--unchained-bianco);

    transform: translateY(-1px);

    box-shadow: 0 5px 8px rgba(123, 52, 5, 0.30);
}

.login-password-controllo {
    position: relative;
}

.login-password-controllo .login-input {
    padding-right: 52px;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;
    padding: 0;

    transform: translateY(-50%);

    border: 0;
    border-radius: 5px;

    background: transparent;
    color: #6F7074;

    cursor: pointer;
    z-index: 1;

    transition: background-color 0.16s ease, color 0.16s ease;
}

.login-password-toggle:hover {
    background: rgba(200, 63, 136, 0.09);
    color: var(--unchained-ciano);
}

.login-password-toggle:focus-visible {
    outline: 2px solid var(--unchained-ciano);
    outline-offset: 1px;
}

.login-password-toggle svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.login-password-icona-nascosta,
.login-password-toggle.password-visibile .login-password-icona-visibile {
    display: none;
}

.login-password-toggle.password-visibile .login-password-icona-nascosta {
    display: block;
}

.pagina-login .login-button:active {
    transform: translateY(1px);

    box-shadow: var(--unchained-ombra-premuta);
}

.pagina-login .login-button:focus-visible {
    outline: 3px solid rgba(200, 63, 136, 0.30);
    outline-offset: 3px;
}

/* Mantiene coerenti i colori anche con il riempimento automatico del browser. */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--unchained-testo);
    box-shadow: 0 0 0 1000px var(--unchained-bianco) inset;
    transition: background-color 9999s ease-out 0s;
}


/* RESPONSIVE LOGIN */
@media (max-width: 980px) {
    .login-layout {
        min-height: 100vh;
    }

    .login-accesso {
        min-height: 100vh;
        padding: 28px 20px;
    }
}

@media (max-width: 700px) {
    .pagina-login .login-card {
        border-radius: 8px;
    }

    .login-card-intestazione {
        padding: 24px 24px 21px;
    }

    .login-card-logo {
        width: 72px;
        height: 72px;
    }

    .login-card-corpo {
        padding: 28px 24px 30px;
    }
}


/* =========================================================
   MENU ACCOUNT NELLA BARRA SUPERIORE
   ========================================================= */

.account-menu {
    position: relative;

    flex: 0 0 auto;
}

.account-menu summary {
    list-style: none;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-menu-button {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 14px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.08);
    color: var(--unchained-bianco);

    cursor: pointer;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.account-menu-button:hover,
.account-menu[open] .account-menu-button {
    background: rgba(255, 255, 255, 0.12);

    box-shadow:
        inset 0 0 0 1px rgba(200, 63, 136, 0.30),
        0 0 18px rgba(200, 63, 136, 0.08);
}

.account-avatar {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--unchained-blu-acceso),
            var(--unchained-ciano)
        );

    color: var(--unchained-bianco);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;

    box-shadow:
        0 0 0 4px rgba(200, 63, 136, 0.08);
}

.account-identita {
    display: grid;
    gap: 2px;

    min-width: 0;

    font-family: Arial, Helvetica, sans-serif;
}

.account-identita strong {
    max-width: 180px;

    overflow: hidden;

    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-identita small {
    color: rgba(255, 255, 255, 0.62);

    font-size: 0.76rem;
}

.account-chevron {
    color: var(--unchained-ciano-chiaro);

    font-size: 0.78rem;

    transition: transform 0.2s ease;
}

.account-menu[open] .account-chevron {
    transform: rotate(180deg);
}

.account-menu-dropdown {
    position: absolute;
    z-index: 20;

    top: calc(100% + 12px);
    right: 0;

    display: grid;
    gap: 8px;

    width: 240px;
    padding: 12px;

    border-radius: 20px;

    background: var(--unchained-superficie);

    box-shadow:
        14px 14px 28px rgba(0, 0, 0, 0.18),
        -8px -8px 20px rgba(255, 255, 255, 0.88);
}

.account-menu-dropdown a {
    display: block;

    padding: 12px 14px;

    border-radius: 14px;

    color: var(--unchained-testo);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.account-menu-dropdown a:hover {
    background: var(--unchained-bianco);
    color: var(--unchained-ciano);

    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.10),
        inset -4px -4px 8px rgba(255, 255, 255, 0.92);
}

.account-menu-dropdown .account-logout {
    color: #A94442;
}




/* =========================================================
   AREA PERSONALE NELLA BARRA SUPERIORE
   ========================================================= */

/*
 * Raggruppa verticalmente il pulsante dell'account e il
 * pulsante Notifiche nella parte destra della barra superiore.
 */
.barra-superiore-area-personale {
    position: relative;
    z-index: 30;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;

    width: 270px;

    flex: 0 0 270px;
}


/*
 * Il pulsante account occupa tutta la larghezza della colonna.
 */
.barra-superiore-area-personale .account-menu {
    width: 100%;
}

.barra-superiore-area-personale .account-menu-button {
    width: 100%;
}


/*
 * Il menu Profilo / Impostazioni / Logout si apre verso sinistra,
 * alla stessa altezza del pulsante account. In questo modo non
 * copre mai il pulsante Notifiche collocato sotto.
 */
.barra-superiore-area-personale .account-menu-dropdown {
    top: 0;
    right: calc(100% + 16px);
    left: auto;

    width: 260px;
}


/* =========================================================
   PULSANTE NOTIFICHE NELLA BARRA SUPERIORE
   ========================================================= */

.barra-superiore-notifiche {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;

    width: 100%;
    min-height: 48px;
    padding: 10px 14px;

    border: 1px solid rgba(200, 63, 136, 0.22);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.08);
    color: var(--unchained-bianco);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.barra-superiore-notifiche:hover,
.barra-superiore-notifiche:focus-visible,
.barra-superiore-notifiche.attivo {
    border-color: rgba(200, 63, 136, 0.48);

    background: rgba(255, 255, 255, 0.13);
    color: var(--unchained-ciano-chiaro);

    outline: none;
    transform: translateY(-1px);

    box-shadow:
        inset 0 0 0 1px rgba(200, 63, 136, 0.14),
        0 0 18px rgba(200, 63, 136, 0.10);
}

.barra-superiore-notifiche.attivo {
    box-shadow:
        inset 4px 4px 9px rgba(0, 0, 0, 0.22),
        inset -3px -3px 8px rgba(255, 255, 255, 0.06);
}

.barra-superiore-notifiche-icona {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 10px;

    background: rgba(200, 63, 136, 0.14);
    color: var(--unchained-ciano-chiaro);

    font-size: 1rem;
}

.barra-superiore-notifiche-testo {
    min-width: 0;
}

.barra-superiore-notifiche-contatore {
    flex: 0 0 auto;

    min-width: 28px;
    height: 28px;
    padding: 0 8px;

    line-height: 28px;
}


/* =========================================================
   PAGINE PROFILO E IMPOSTAZIONI ACCOUNT
   ========================================================= */

.account-page-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 26px;
}

.account-profile-card {
    display: flex;
    align-items: center;
    gap: 22px;
}

.account-profile-avatar {
    display: grid;
    place-items: center;

    width: 92px;
    height: 92px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--unchained-blu-acceso),
            var(--unchained-ciano)
        );

    color: var(--unchained-bianco);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;

    box-shadow:
        0 0 0 8px rgba(200, 63, 136, 0.08),
        10px 10px 20px rgba(0, 0, 0, 0.12);
}

.account-profile-kicker {
    margin: 0 0 6px;

    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-profile-card h3 {
    margin: 0 0 6px;

    color: var(--unchained-blu-notte);

    font-size: 1.6rem;
}

.account-profile-card p:last-child {
    margin: 0;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
}

.account-section-title {
    margin: 0 0 20px;

    color: var(--unchained-blu-notte);
}

.account-data-list {
    display: grid;
    gap: 14px;

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
}

.account-data-list div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;

    padding: 14px 0;

    border-bottom: 1px solid rgba(35, 36, 39, 0.08);
}

.account-data-list div:last-child {
    border-bottom: 0;
}

.account-data-list dt {
    color: var(--unchained-testo-soft);

    font-size: 0.9rem;
    font-weight: 700;
}

.account-data-list dd {
    margin: 0;

    color: var(--unchained-blu-notte);

    font-weight: 700;
}

.account-settings-form {
    max-width: 900px;
}

.form-aiuto-password {
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.80rem;
    line-height: 1.45;
}

.form-aiuto-password ul {
    margin: 0;
    padding-left: 20px;
}

.form-aiuto-password li + li {
    margin-top: 4px;
}


/* RESPONSIVE ACCOUNT */
@media (max-width: 900px) {
    .account-identita {
        display: none;
    }

    .account-page-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .account-menu-dropdown {
        width: min(240px, calc(100vw - 32px));
    }

    .account-data-list div {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}


/* =========================================================
   DETTAGLIO TICKET
   ========================================================= */

.ticket-dettaglio-kicker {
    margin: 0 0 8px;

    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ticket-dettaglio-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;

    margin-bottom: 26px;
}

.ticket-dettaglio-card {
    min-width: 0;
}

.ticket-dettaglio-sezione {
    margin-bottom: 26px;
}

.ticket-descrizione {
    color: var(--unchained-testo);

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.7;
}

.ticket-descrizione p:first-child {
    margin-top: 0;
}

.ticket-descrizione p:last-child {
    margin-bottom: 0;
}




/* =========================================================
   TESTATA OPERATIVA DEL TICKET
   ========================================================= */

/*
 * La testata riunisce l'identità del ticket e il comando
 * principale delle azioni operative in un'unica fascia.
 */
.ticket-testata-operativa {
    position: relative;

    margin-bottom: 26px;
    padding: clamp(22px, 2.4vw, 32px);

    overflow: visible;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.36),
            rgba(229, 229, 229, 0.88)
        ),
        var(--unchained-superficie);
}


/*
 * Riga principale della fascia:
 * dati del ticket a sinistra e pulsante a destra.
 */
.ticket-testata-principale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    min-width: 0;
}


/* Blocco identificativo del ticket. */
.ticket-testata-identita {
    min-width: 0;
}

.ticket-testata-identita .ticket-dettaglio-kicker {
    margin-bottom: 5px;
}

.ticket-testata-identita h2 {
    margin: 0 0 8px;

    color: var(--unchained-blu-notte);

    font-size: clamp(2.2rem, 4vw, 4.25rem);
    line-height: 0.98;

    overflow-wrap: anywhere;
}

.ticket-testata-data {
    margin: 0;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.96rem;
}


/*
 * Il pulsante resta compatto e non viene schiacciato
 * dalla lunghezza del titolo.
 */
.ticket-testata-principale .azioni-operative-toggle {
    flex: 0 0 auto;
}


/*
 * L'elenco delle azioni si apre all'interno della stessa fascia,
 * immediatamente sotto la riga principale.
 */
.ticket-testata-operativa .azioni-operative-elenco {
    width: 100%;
    margin-top: 26px;
    padding-top: 22px;
}


/*
 * I pannelli dinamici sono collocati immediatamente dopo la
 * testata, prima dei dettagli ordinari del ticket.
 */
.ticket-testata-operativa + .pannello-operativo {
    margin-top: 0;
}


@media (max-width: 760px) {
    .ticket-testata-principale {
        align-items: stretch;
        flex-direction: column;
        gap: 22px;
    }

    .ticket-testata-identita h2 {
        font-size: clamp(2rem, 11vw, 3.25rem);
    }

    .ticket-testata-comandi {
        width: 100%;
    }
}


/* =========================================================
   DETTAGLIO 31/07 - DESCRIZIONE E WORK INFO SEMPRE VISIBILI
   ========================================================= */

.ticket-dettaglio-card {
    display: flex;
    flex-direction: column;
}

.ticket-descrizione-incorporata {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--unchained-bordo);
}

.ticket-descrizione-incorporata h4 {
    margin: 0;
    color: var(--unchained-blu-notte);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
}

.ticket-descrizione-scroll {
    width: 100%;
    max-height: 190px;
    min-height: 118px;
    padding: 14px 16px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    border: 1px solid rgba(35, 36, 39, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.48);
    white-space: normal;
    box-shadow:
        inset 4px 4px 9px rgba(0, 0, 0, 0.05),
        inset -4px -4px 9px rgba(255, 255, 255, 0.75);
}

.ticket-descrizione-scroll p {
    min-width: max-content;
    max-width: none;
    margin: 0;
    white-space: pre-wrap;
}

.work-info-card-visibile {
    display: grid;
    gap: 18px;
    margin-top: 0;
    margin-bottom: 0;
}

.work-info-card-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.work-info-card-intestazione p:last-child {
    margin: 6px 0 0;
    color: var(--unchained-testo-soft);
}

.work-info-elenco-visibile {
    max-height: 390px;
    padding: 4px 8px 4px 4px;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.work-info-elenco-visibile .work-info-elemento {
    min-width: 520px;
}

.work-info-riga-tipo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.work-info-riga-tipo .work-info-badge-visibilita {
    margin-left: 0;
}

.work-info-card-azioni {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

body.work-info-modale-aperta {
    overflow: hidden;
}

.work-info-modale {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.work-info-modale[hidden] {
    display: none !important;
}

.work-info-modale-sfondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(9, 21, 35, 0.67);
    cursor: default;
    backdrop-filter: blur(4px);
}

.work-info-modale-contenuto {
    position: relative;
    z-index: 1;
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: clamp(22px, 3vw, 34px);
    overflow-y: auto;
}

.work-info-modale-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.work-info-modale-chiudi {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 50%;
    background: var(--unchained-bianco);
    color: var(--unchained-blu-notte);
    font: inherit;
    font-size: 1.45rem;
    cursor: pointer;
    box-shadow:
        5px 5px 10px rgba(0, 0, 0, 0.12),
        -4px -4px 9px rgba(255, 255, 255, 0.78);
}

.work-info-form-modale {
    margin: 0;
    padding: 0;
    border: 0;
}

.work-info-modale-azioni {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.work-info-elenco-gruppi-esclusi > div,
.work-info-elenco-gruppi-esclusi > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

@media (max-width: 760px) {
    .ticket-dettaglio-griglia {
        grid-template-columns: 1fr;
    }

    .work-info-modale {
        padding: 10px;
    }

    .work-info-modale-contenuto {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .work-info-modale-azioni {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .work-info-modale-azioni .neon-button {
        width: 100%;
    }
}




/* =========================================================
   COMANDI DELLA TESTATA E PANNELLO DETTAGLIO TICKET
   ========================================================= */

/*
 * Raggruppa Dettaglio Ticket e Azioni operative
 * nella parte destra della fascia.
 */
.ticket-testata-comandi {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}


/*
 * Il dettaglio è una vista dinamica composta dalle tre
 * sezioni già esistenti: Dettagli, Contesto e Descrizione.
 */
.ticket-pannello-dettaglio {
    width: 100%;

    scroll-margin-top: 24px;

    animation: pannello-dettaglio-apertura 0.24s ease;
}

.ticket-pannello-dettaglio[hidden] {
    display: none;
}

@keyframes pannello-dettaglio-apertura {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


/*
 * Entrambi i pulsanti della testata mantengono dimensioni
 * coerenti e leggibili.
 */
.ticket-testata-comandi .azioni-operative-toggle {
    min-width: 210px;
}


/*
 * Lo stato aperto del pulsante Dettaglio Ticket usa
 * lo stesso linguaggio visivo del menu operativo.
 */
.dettaglio-ticket-toggle[aria-expanded="true"] {
    color: var(--unchained-ciano);

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.15),
        inset -5px -5px 10px rgba(255, 255, 255, 0.92);
}


@media (max-width: 900px) {
    .ticket-testata-comandi {
        width: 100%;
        justify-content: flex-start;
    }
}


@media (max-width: 620px) {
    .ticket-testata-comandi {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .ticket-testata-comandi .azioni-operative-toggle {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   MENU ORIZZONTALE AZIONI OPERATIVE
   ========================================================= */

.ticket-azioni-menu-sezione {
    position: relative;
    overflow: visible;
}

.azioni-operative-intestazione {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.pannello-operativo-kicker {
    margin: 0 0 6px;

    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pannello-operativo-intestazione p {
    margin: 0;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

.azioni-operative-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    flex: 0 0 auto;

    min-width: 230px;
    padding: 15px 24px;

    border: 1px solid rgba(200, 63, 136, 0.14);
    border-radius: 999px;

    background: var(--unchained-bianco);
    color: var(--unchained-blu-notte);

    font: inherit;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        8px 8px 16px rgba(0, 0, 0, 0.15),
        -7px -7px 15px rgba(255, 255, 255, 0.90);

    transition:
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.azioni-operative-toggle:hover {
    color: var(--unchained-ciano);
    transform: translateY(-1px);
}

.azioni-operative-toggle:focus-visible {
    outline: 3px solid rgba(200, 63, 136, 0.20);
    outline-offset: 3px;
}

.azioni-operative-toggle[aria-expanded="true"] {
    color: var(--unchained-ciano);

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.15),
        inset -5px -5px 10px rgba(255, 255, 255, 0.92);
}

.azioni-operative-chevron {
    display: inline-block;

    color: var(--unchained-ciano);

    transition: transform 0.22s ease;
}

.azioni-operative-toggle[aria-expanded="true"]
.azioni-operative-chevron {
    transform: rotate(180deg);
}

.azioni-operative-elenco {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;

    margin-top: 22px;
    padding-top: 22px;

    border-top: 1px solid rgba(35, 36, 39, 0.09);

    animation: azioni-operative-apertura 0.22s ease;
}

.azioni-operative-elenco[hidden] {
    display: none;
}

@keyframes azioni-operative-apertura {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.azione-operativa-form {
    display: flex;
    margin: 0;
}

.azione-operativa-elemento {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 11px 17px;

    border: 1px solid transparent;
    border-radius: 15px;

    background: var(--unchained-bianco);
    color: var(--unchained-testo);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    box-shadow:
        5px 5px 11px rgba(0, 0, 0, 0.10),
        -5px -5px 11px rgba(255, 255, 255, 0.84);

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.azione-operativa-elemento:hover,
.azione-operativa-elemento:focus-visible,
.azione-operativa-elemento.attiva {
    border-color: rgba(200, 63, 136, 0.24);
    color: var(--unchained-ciano);

    outline: none;
    transform: translateY(-2px);

    box-shadow:
        7px 7px 14px rgba(0, 0, 0, 0.13),
        -6px -6px 13px rgba(255, 255, 255, 0.90);
}

.azione-operativa-elemento.attiva {
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.11),
        inset -4px -4px 8px rgba(255, 255, 255, 0.91);
}

.azione-operativa-pericolosa {
    color: var(--unchained-danger);
}

.azione-operativa-pericolosa
.azione-operativa-icona {
    background: rgba(169, 68, 66, 0.10);
    color: var(--unchained-danger);
}

.azione-operativa-pericolosa:hover,
.azione-operativa-pericolosa:focus-visible {
    border-color: rgba(169, 68, 66, 0.24);
    color: #8d3230;
}


.azione-operativa-icona {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 10px;

    background: rgba(200, 63, 136, 0.10);
    color: var(--unchained-ciano);

    font-size: 1rem;
    font-weight: 800;
}


/* =========================================================
   PANNELLI OPERATIVI DINAMICI
   ========================================================= */

.pannello-operativo {
    scroll-margin-top: 24px;
    animation: pannello-operativo-apertura 0.24s ease;
}

.pannello-operativo[hidden] {
    display: none;
}

@keyframes pannello-operativo-apertura {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.pannello-operativo-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 28px;
    padding-bottom: 20px;

    border-bottom: 1px solid rgba(35, 36, 39, 0.09);
}

.pannello-operativo-intestazione h3 {
    margin: 0 0 8px;
}

.pannello-operativo-intestazione > div {
    min-width: 0;
}

.pannello-operativo-chiudi {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border: 0;
    border-radius: 50%;

    background: var(--unchained-bianco);
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        5px 5px 10px rgba(0, 0, 0, 0.11),
        -5px -5px 10px rgba(255, 255, 255, 0.88);

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.pannello-operativo-chiudi:hover,
.pannello-operativo-chiudi:focus-visible {
    color: var(--unchained-ciano);
    outline: none;
    transform: rotate(90deg);
}

/* =========================================================
   STORICO DI PROCESSO PER FUTURI SLA
   ========================================================= */

.ticket-eventi-elenco {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;

    width: 100%;
}

.storico-processo-record {
    width: 100%;
    min-width: 0;
    padding: 20px;

    border: 1px solid rgba(35, 36, 39, 0.07);
    border-radius: 18px;

    background: var(--unchained-bianco);

    box-shadow:
        7px 7px 15px rgba(0, 0, 0, 0.10),
        -6px -6px 14px rgba(255, 255, 255, 0.88);
}

.storico-processo-riepilogo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.storico-processo-identita {
    display: grid;
    gap: 5px;

    min-width: 0;
}

.storico-processo-tipo {
    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
}

.storico-processo-codice,
.storico-processo-data {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
}

.storico-processo-data {
    flex: 0 0 auto;
    white-space: nowrap;
}

.storico-processo-dettagli {
    margin-top: 16px;
}

.storico-processo-dettagli summary {
    list-style: none;
}

.storico-processo-dettagli summary::-webkit-details-marker {
    display: none;
}

.storico-processo-pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 10px 16px;

    border: 1px solid rgba(200, 63, 136, 0.16);
    border-radius: 999px;

    background: var(--unchained-superficie);
    color: var(--unchained-blu-notte);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.84rem;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        4px 4px 9px rgba(0, 0, 0, 0.10),
        -4px -4px 9px rgba(255, 255, 255, 0.88);

    transition:
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.storico-processo-pulsante:hover,
.storico-processo-pulsante:focus-visible {
    color: var(--unchained-ciano);

    outline: none;
    transform: translateY(-1px);
}

.storico-processo-dettagli[open]
.storico-processo-pulsante {
    color: var(--unchained-ciano);

    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.11),
        inset -4px -4px 8px rgba(255, 255, 255, 0.90);
}

.storico-processo-chevron {
    display: inline-block;

    color: var(--unchained-ciano);

    transition: transform 0.20s ease;
}

.storico-processo-dettagli[open]
.storico-processo-chevron {
    transform: rotate(180deg);
}

.storico-processo-dati {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;

    margin: 18px 0 0;
    padding: 4px 18px;

    border-radius: 16px;

    background: var(--unchained-superficie);

    box-shadow:
        inset 4px 4px 9px rgba(0, 0, 0, 0.08),
        inset -4px -4px 9px rgba(255, 255, 255, 0.88);
}

.storico-processo-riga {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;

    padding: 15px 0;

    border-bottom: 1px solid rgba(35, 36, 39, 0.08);
}

.storico-processo-riga:last-child {
    border-bottom: 0;
}

.storico-processo-riga dt {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.86rem;
    font-weight: 800;
}

.storico-processo-riga dd {
    min-width: 0;
    margin: 0;

    color: var(--unchained-testo);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.6;

    overflow-wrap: anywhere;
}

.storico-processo-cosa {
    white-space: normal;
}


@media (max-width: 760px) {
    .storico-processo-riepilogo {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .storico-processo-data {
        white-space: normal;
    }

    .storico-processo-pulsante {
        width: 100%;
    }

    .storico-processo-riga {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .azioni-operative-intestazione,
    .pannello-operativo-intestazione {
        align-items: stretch;
        flex-direction: column;
    }

    .azioni-operative-toggle {
        width: 100%;
    }

    .azioni-operative-elenco {
        display: grid;
        grid-template-columns: 1fr;
    }

    .azione-operativa-form,
    .azione-operativa-elemento {
        width: 100%;
    }
}


.ticket-sezione-vuota {
    margin: 0;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}

@media (max-width: 1000px) {

    .ticket-dettaglio-griglia {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   DASHBOARD - RIEPILOGHI DINAMICI
   ========================================================= */

.dashboard-riepilogo {
    display: grid;
    flex: 1;
    min-height: 0;
    align-content: start;
    gap: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
}

.dashboard-riepilogo-elemento {
    display: grid;
    gap: 9px;
}

.dashboard-riepilogo-testa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;

    font-family: Arial, Helvetica, sans-serif;
}

.dashboard-riepilogo-testa strong {
    color: var(--unchained-testo);

    font-size: 0.95rem;
}

.dashboard-riepilogo-testa span {
    color: var(--unchained-testo-soft);

    font-size: 0.84rem;
    font-weight: 700;
}

.dashboard-barra {
    width: 100%;
    height: 14px;

    overflow: hidden;

    border-radius: 999px;

    background: var(--unchained-bianco);

    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.10),
        inset -4px -4px 8px rgba(255, 255, 255, 0.92);
}

.dashboard-barra-valore {
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--unchained-blu-acceso),
            var(--unchained-ciano)
        );

    box-shadow:
        0 0 12px rgba(200, 63, 136, 0.20);
}

.dashboard-riepilogo-elemento small {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    text-align: right;
}


/* =========================================================
   WORK INFO
   ========================================================= */

.work-info-form {
    margin-bottom: 30px;
    padding-bottom: 28px;

    border-bottom: 1px solid var(--unchained-bordo);
}

.work-info-elenco {
    display: grid;
    gap: 18px;
}

.work-info-elemento {
    padding: 20px;

    border-radius: 18px;

    background: var(--unchained-bianco);

    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.08),
        inset -4px -4px 8px rgba(255, 255, 255, 0.92);
}

.work-info-intestazione {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 14px;

    font-family: Arial, Helvetica, sans-serif;
}

.work-info-intestazione > div {
    display: grid;
    gap: 4px;
}

.work-info-intestazione strong {
    color: var(--unchained-ciano);

    font-size: 0.92rem;
}

.work-info-intestazione span {
    color: var(--unchained-testo-soft);

    font-size: 0.82rem;
}

.work-info-intestazione time {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;

    white-space: nowrap;
}

.work-info-contenuto {
    color: var(--unchained-testo);

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65;
}

.work-info-contenuto p:first-child {
    margin-top: 0;
}

.work-info-contenuto p:last-child {
    margin-bottom: 0;
}

@media (max-width: 620px) {

    .work-info-intestazione {
        flex-direction: column;
        gap: 8px;
    }

}

/* =========================================================
   RAGGRUPPAMENTI TICKET - VERSIONE 2.4
   ========================================================= */

.ticket-raggruppamento {
    display: grid;
    gap: 18px;
    margin-top: 34px;
}

.ticket-raggruppamento-intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-left: 4px solid var(--unchained-ciano);
    border-radius: 16px;
    background: var(--unchained-bianco);
    box-shadow:
        8px 8px 16px rgba(0, 0, 0, 0.12),
        -8px -8px 16px rgba(255, 255, 255, 0.88);
}

.ticket-raggruppamento-intestazione h3 {
    margin: 0 0 6px;
    color: var(--unchained-blu);
}

.ticket-raggruppamento-intestazione p {
    margin: 0;
    color: var(--unchained-testo-soft);
}

.ticket-raggruppamento-azioni {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

/* =========================================================
   ESPORTAZIONI EXCEL - LISTE IN LAVORAZIONE
   ========================================================= */

.esportazione-selezione-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--unchained-bordo);
    border-left: 4px solid var(--unchained-ciano);
    border-radius: 12px;
    background: var(--unchained-bianco);
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: var(--unchained-ombra-piccola);
}

.esportazione-selezione-barra[hidden] {
    display: none !important;
}

.esportazione-selezione-barra > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.esportazione-selezione-barra button:not(.neon-button) {
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--unchained-blu-acceso);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.esportazione-selezione-barra button:not(.neon-button):hover,
.esportazione-selezione-barra button:not(.neon-button):focus-visible {
    color: var(--unchained-blu-notte);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tabella-ticket .colonna-esportazione-selezione {
    display: none;
    width: 56px;
    min-width: 56px;
    text-align: center;
    vertical-align: middle;
}

.modalita-selezione-export .tabella-ticket .colonna-esportazione-selezione {
    display: table-cell;
}

.colonna-esportazione-selezione input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: var(--unchained-ciano);
    cursor: pointer;
}

.esportazione-modale-contenuto {
    width: min(760px, calc(100vw - 32px));
}

.esportazione-modale-blocco {
    margin: 5px 0 0;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
}

.esportazione-form {
    display: grid;
    gap: 20px;
}

.esportazione-modalita {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.esportazione-modalita legend {
    margin-bottom: 12px;
    color: var(--unchained-blu-notte);
    font-weight: 700;
}

.esportazione-opzione {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 12px;
    background: var(--unchained-bianco);
    cursor: pointer;
}

.esportazione-opzione:has(input:checked) {
    border-color: var(--unchained-ciano);
    box-shadow: var(--unchained-anello-accento);
}

.esportazione-opzione input {
    margin-top: 4px;
    accent-color: var(--unchained-ciano);
}

.esportazione-opzione span {
    display: grid;
    gap: 3px;
}

.esportazione-opzione small {
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
}

.esportazione-intervallo {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 14px;
    padding: 18px;
    border-radius: 12px;
    background: var(--unchained-superficie);
    box-shadow: var(--unchained-ombra-interna);
}

.esportazione-intervallo[hidden] {
    display: none !important;
}

.esportazione-intervallo p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
}

.esportazione-riepilogo {
    margin: 0;
    padding: 12px 14px;
    border-left: 4px solid var(--unchained-ciano);
    background: rgba(200, 63, 136, 0.10);
    font-family: Arial, Helvetica, sans-serif;
}

.esportazione-errore {
    margin: 0;
    padding: 12px 14px;
    border-left: 4px solid var(--unchained-danger);
    background: rgba(169, 68, 66, 0.10);
    color: var(--unchained-danger);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.esportazione-errore[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .ticket-raggruppamento-intestazione,
    .esportazione-selezione-barra {
        align-items: stretch;
        flex-direction: column;
    }

    .ticket-raggruppamento-azioni,
    .esportazione-selezione-barra > div {
        justify-content: flex-start;
    }

    .esportazione-intervallo {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ALLEGATI TICKET PROTETTI - VERSIONE 2.6
   ========================================================= */

.allegato-form {
    display: grid;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--unchained-bordo);
}

.allegato-limiti {
    display: block;
    margin-top: 8px;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
}

.allegati-elenco {
    display: grid;
    gap: 16px;
}

.allegato-elemento {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--unchained-bianco);
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.08),
        inset -4px -4px 8px rgba(255, 255, 255, 0.92);
}

.allegato-dati {
    min-width: 0;
    display: grid;
    gap: 5px;
    font-family: Arial, Helvetica, sans-serif;
}

.allegato-dati strong {
    color: var(--unchained-testo);
    overflow-wrap: anywhere;
}

.allegato-dati span,
.allegato-dati small {
    color: var(--unchained-testo-soft);
}

.allegato-dati span {
    font-size: 0.80rem;
}

.allegato-dati small {
    font-size: 0.76rem;
}

.allegato-download {
    flex: 0 0 auto;
}

@media (max-width: 620px) {
    .allegato-elemento {
        align-items: stretch;
        flex-direction: column;
    }

    .allegato-download {
        text-align: center;
    }
}

/* =========================================================
   NOTIFICHE AGGREGATE CON CRONOLOGIA
   ========================================================= */

.neon-menu-notifiche {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contatore-notifiche {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;

    border-radius: 999px;

    background: var(--unchained-ciano);
    color: var(--unchained-bianco);

    font-size: 14px;
    line-height: 28px;
    text-align: center;

    box-shadow: 0 0 14px rgba(200, 63, 136, 0.34);
}

.layout-notifiche {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    gap: 28px;
    align-items: start;
}

.elenco-notifiche {
    height: 560px;
    min-width: 0;
    padding: 0;

    overflow-x: auto;
    overflow-y: auto;

    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.riga-notifica {
    display: flex;
    gap: 16px;

    min-width: 700px;
    padding: 20px 22px;

    border-bottom: 1px solid rgba(35, 36, 39, 0.10);

    color: inherit;
    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.riga-notifica:last-child {
    border-bottom: 0;
}

.riga-notifica:hover {
    background: rgba(255, 255, 255, 0.55);
}

.riga-notifica.selezionata {
    background: rgba(200, 63, 136, 0.09);
}

.riga-notifica.non-letta {
    background: rgba(116, 59, 133, 0.06);
}

.indicatore-notifica {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    flex: 0 0 10px;

    border-radius: 50%;

    background: transparent;
}

.riga-notifica.non-letta .indicatore-notifica {
    background: var(--unchained-ciano);

    box-shadow: 0 0 10px rgba(200, 63, 136, 0.50);
}

.corpo-riga-notifica {
    min-width: 0;
    flex: 1;
}

.testa-riga-notifica {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.testa-riga-notifica strong {
    color: var(--unchained-blu-acceso);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
}

.testa-riga-notifica time,
.dettaglio-notifica time {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;

    white-space: nowrap;
}

.notifica-riga-metadati {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-top: 10px;
}

.badge-notifica-totale,
.badge-notifica-nuove {
    display: inline-flex;
    align-items: center;

    min-height: 28px;
    padding: 5px 10px;

    border-radius: 999px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
}

.badge-notifica-totale {
    background: rgba(35, 36, 39, 0.08);
    color: var(--unchained-blu-notte);
}

.badge-notifica-nuove {
    background: rgba(200, 63, 136, 0.14);
    color: var(--unchained-blu-acceso);
}

.notifica-tipo-ultimo {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}

.anteprima-notifica {
    display: block;

    margin-top: 10px;

    color: #55575B;

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
}

.dettaglio-notifica {
    position: sticky;
    top: 24px;

    min-width: 0;
    padding: 28px;
}

.dettaglio-notifica-intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dettaglio-notifica h3 {
    margin: 22px 0 8px;

    color: var(--unchained-blu-acceso);

    font-size: 1.55rem;
}

.dettaglio-notifica-introduzione {
    margin: 0 0 22px;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
}

.cronologia-notifiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;

    width: 100%;
    max-height: 500px;
    padding: 3px 8px 3px 3px;

    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.evento-notifica-card {
    width: 100%;
    min-width: 0;
    padding: 18px;

    border: 1px solid rgba(35, 36, 39, 0.07);
    border-radius: 17px;

    background: var(--unchained-bianco);

    box-shadow:
        5px 5px 11px rgba(0, 0, 0, 0.10),
        -4px -4px 10px rgba(255, 255, 255, 0.88);
}

.evento-notifica-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.evento-notifica-intestazione > div {
    display: grid;
    gap: 4px;

    min-width: 0;
}

.evento-notifica-progressivo {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.evento-notifica-intestazione strong {
    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.92rem;
}

.evento-notifica-card h4 {
    margin: 15px 0 8px;

    color: var(--unchained-blu-notte);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

.evento-notifica-card p {
    margin: 0;

    color: var(--unchained-testo);

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;

    overflow-wrap: anywhere;
}

.evento-notifica-autore {
    margin-top: 15px;
    padding-top: 12px;

    border-top: 1px solid rgba(35, 36, 39, 0.08);

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.80rem;
}

.azione-notifica-ticket {
    display: inline-block;

    margin-top: 24px;
    padding: 13px 20px;

    border-radius: 999px;

    background: var(--unchained-blu);
    color: var(--unchained-bianco);

    font-weight: 700;
    text-decoration: none;
}

.azione-notifica-ticket:hover {
    transform: translateY(-1px);
}

.notifica-ticket-fuori-perimetro {
    margin-top: 24px;
    padding: 16px 18px;

    border-radius: 16px;

    background: rgba(185, 106, 31, 0.09);
    color: var(--unchained-warning);

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

.notifica-ticket-fuori-perimetro p {
    margin: 8px 0 0;
}

.seleziona-notifica,
.stato-vuoto-notifiche {
    padding: 34px;

    color: #666666;

    text-align: center;
}

.seleziona-notifica > span {
    font-size: 40px;
}

.seleziona-notifica h3,
.stato-vuoto-notifiche h3 {
    color: var(--unchained-blu);
}

@media (max-width: 1100px) {
    .layout-notifiche {
        grid-template-columns: minmax(0, 1fr);
    }

    .dettaglio-notifica {
        position: static;
    }

    .cronologia-notifiche {
        max-height: 560px;
    }
}

@media (max-width: 700px) {
    .elenco-notifiche {
        height: 430px;
    }

    .riga-notifica {
        min-width: 620px;
    }

    .testa-riga-notifica,
    .evento-notifica-intestazione {
        flex-direction: column;
        gap: 7px;
    }

    .testa-riga-notifica time,
    .dettaglio-notifica time {
        white-space: normal;
    }
}


/* =========================================================
   TABELLE TICKET A SCORRIMENTO INTERNO - VERSIONE 2.7
   ========================================================= */

/*
 * Contenitore utilizzato negli elenchi delle pagine
 * "In lavorazione" e "Storico ticket".
 *
 * L'altezza rimane costante anche quando sono presenti molti
 * ticket. Il contenuto eccedente viene consultato tramite le
 * barre di scorrimento interne sui due assi.
 */
.tabella-wrapper-ticket-scroll {
    width: 100%;
    height: 390px;
    max-width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: auto;

    /* Mantiene lo scorrimento confinato nel singolo blocco. */
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/*
 * La tabella conserva una larghezza minima sufficiente per
 * mostrare correttamente tutte le colonne. Su schermi più
 * stretti viene quindi attivato lo scorrimento orizzontale,
 * invece di comprimere eccessivamente i dati.
 */
.tabella-wrapper-ticket-scroll .tabella-ticket {
    min-width: 1750px;
}

/*
 * L'intestazione resta visibile mentre si scorre verticalmente
 * l'elenco dei ticket.
 */
.tabella-wrapper-ticket-scroll .tabella-ticket thead th {
    position: sticky;
    top: 0;
    z-index: 3;

    background: #ECECEC;
    box-shadow: 0 1px 0 var(--unchained-bordo);
}

/* Migliora la leggibilità delle righe durante la consultazione. */
.tabella-wrapper-ticket-scroll .tabella-ticket tbody tr:hover td {
    background: rgba(15, 84, 133, 0.045);
}
  
/*
 * Le due linee SLA appartengono visivamente alla riga precedente. Occupano
 * complessivamente 6 px: 2 px per metrica e 2 px di separazione.
 */
.tabella-ticket .sla-riga-elemento td {
    border-bottom: 0;
}

.tabella-ticket .sla-riga-barre td {
    height: 6px;
    padding: 0 !important;
    border-bottom: 1px solid var(--unchained-bordo);
    background: rgba(255, 255, 255, 0.58);
}

.tabella-wrapper-ticket-scroll .tabella-ticket .sla-riga-barre:hover td {
    background: rgba(255, 255, 255, 0.58);
}

/*
 * Su dispositivi piccoli il blocco viene leggermente ridotto
 * per lasciare più spazio al resto dell'interfaccia.
 */
@media (max-width: 760px) {
    .tabella-wrapper-ticket-scroll {
        height: 340px;
    }
}

.campo-sola-lettura { opacity: .78; cursor: not-allowed; }
.form-controllo:disabled { opacity: .62; cursor: not-allowed; }


/* =========================================================
   WORK INFO - VISIBILITÀ PUBBLICA / PRIVATA
   ========================================================= */
.work-info-visibilita-blocco {
    align-items: flex-start;
}

.work-info-visibilita-etichetta {
    display: block;
    margin-bottom: 10px;
    color: var(--unchained-blu);
    font-weight: 700;
}

.switch-visibilita {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

.switch-visibilita-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.switch-visibilita-track {
    position: relative;
    display: block;
    width: 240px;
    height: 58px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e5e5;
    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.16),
        inset -5px -5px 10px rgba(255, 255, 255, 0.92);
}

.switch-visibilita-button {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 110px;
    height: 44px;
    border-radius: 999px;
    background: #eeeeee;
    box-shadow:
        4px 4px 9px rgba(0, 0, 0, 0.20),
        -4px -4px 9px rgba(255, 255, 255, 0.92);
    transition: transform 0.28s ease;
}

.switch-visibilita-testo {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 800;
    transition: color 0.28s ease;
}

.switch-pubblica {
    left: 27px;
    color: #16803c;
}

.switch-privata {
    right: 31px;
    color: #777;
}

.switch-visibilita-input:checked + .switch-visibilita-track .switch-visibilita-button {
    transform: translateX(116px);
}

.switch-visibilita-input:checked + .switch-visibilita-track .switch-pubblica {
    color: #777;
}

.switch-visibilita-input:checked + .switch-visibilita-track .switch-privata {
    color: #c62828;
}

.switch-visibilita-input:focus-visible + .switch-visibilita-track {
    outline: 3px solid rgba(15, 84, 133, 0.25);
    outline-offset: 3px;
}

.work-info-visibilita-aiuto {
    display: block;
    max-width: 720px;
    margin-top: 10px;
    color: #666;
    line-height: 1.45;
}

.work-info-gruppi-esclusi {
    padding: 20px;
    border: 1px solid rgba(200, 63, 136, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.46);
    box-shadow:
        inset 4px 4px 9px rgba(0, 0, 0, 0.06),
        inset -4px -4px 9px rgba(255, 255, 255, 0.82);
}

.work-info-gruppi-esclusi[hidden] {
    display: none !important;
}

.work-info-gruppi-esclusi-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.work-info-gruppi-esclusi-intestazione label {
    display: block;
    margin-bottom: 5px;
}

.work-info-gruppi-esclusi-intestazione small {
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
}

.work-info-contatore-esclusioni {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(169, 68, 66, 0.10);
    color: var(--unchained-danger);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
}

.work-info-strumenti-esclusione {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    margin-top: 18px;
}

.work-info-ricerca-gruppi {
    min-height: 46px;
}

.work-info-deseleziona-gruppi {
    padding: 11px 16px;
    border: 0;
    border-radius: 14px;
    background: var(--unchained-bianco);
    color: var(--unchained-blu-notte);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        5px 5px 10px rgba(0, 0, 0, 0.10),
        -5px -5px 10px rgba(255, 255, 255, 0.86);
}

.work-info-deseleziona-gruppi:hover,
.work-info-deseleziona-gruppi:focus-visible {
    color: var(--unchained-ciano);
    outline: none;
}

.work-info-elenco-gruppi-esclusi {
    max-height: 280px;
    margin-top: 16px;
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-radius: 15px;
    background: var(--unchained-bianco);
}

.work-info-elenco-gruppi-esclusi ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-info-elenco-gruppi-esclusi [hidden],
.work-info-elenco-gruppi-esclusi .work-info-gruppo-nascosto {
    display: none !important;
}

.work-info-elenco-gruppi-esclusi label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(229, 229, 229, 0.55);
    color: var(--unchained-testo);
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.work-info-elenco-gruppi-esclusi input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    accent-color: var(--unchained-ciano);
}

.work-info-ricerca-vuota {
    margin: 14px 0 0;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}

.work-info-badge-visibilita {
    display: inline-flex;
    margin-left: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.work-info-badge-visibilita.pubblica {
    color: #146c35;
    background: rgba(34, 197, 94, .12);
}

.work-info-badge-visibilita.privata {
    color: #a31d1d;
    background: rgba(229, 57, 53, .12);
}

.work-info-esclusioni-lettura {
    display: block;
    margin-top: 6px;
    color: #6a6a6a;
}

@media (max-width: 700px) {
    .work-info-gruppi-esclusi-intestazione {
        flex-direction: column;
    }

    .work-info-strumenti-esclusione {
        grid-template-columns: 1fr;
    }

    .work-info-deseleziona-gruppi {
        width: 100%;
    }
}


/* =========================================================
   RIASSEGNAZIONE TICKET
   ========================================================= */
.riassegnazione-card {
    max-width: 920px;
}

.riassegnazione-gruppo-attuale {
    display: grid;
    gap: 8px;
    margin-bottom: 26px;
    padding: 18px 20px;
    border-left: 4px solid var(--unchained-ciano);
    border-radius: 16px;
    background: var(--unchained-bianco);
    font-family: Arial, Helvetica, sans-serif;
}

.riassegnazione-gruppo-attuale span {
    color: var(--unchained-testo-soft);
    font-size: 0.85rem;
    font-weight: 700;
}

.riassegnazione-gruppo-attuale strong {
    color: var(--unchained-blu-notte);
    font-size: 1.15rem;
}

.riassegnazione-avviso {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(185, 106, 31, 0.08);
    color: var(--unchained-warning);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.5;
}

/* =========================================================
   MESSAGGI APPLICATIVI
   ========================================================= */

.messaggi-applicazione {
    display: grid;
    gap: 10px;

    margin: 0 0 24px;
}

.messaggio-applicazione {
    margin: 0;
    padding: 14px 18px;

    border: 1px solid rgba(200, 63, 136, 0.20);
    border-radius: 15px;

    background: var(--unchained-bianco);
    color: var(--unchained-testo);

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;

    box-shadow:
        5px 5px 11px rgba(0, 0, 0, 0.09),
        -5px -5px 11px rgba(255, 255, 255, 0.82);
}

.messaggio-applicazione.success {
    border-color: rgba(79, 125, 97, 0.35);
    color: var(--unchained-successo);
}

.messaggio-applicazione.error {
    border-color: rgba(169, 68, 66, 0.35);
    color: var(--unchained-danger);
}


/* =========================================================
   RELAZIONI GERARCHICHE NEL DETTAGLIO TICKET
   ========================================================= */

.relazioni-ticket-toggle[aria-expanded="true"] {
    color: var(--unchained-ciano);

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.15),
        inset -5px -5px 10px rgba(255, 255, 255, 0.92);
}

.relazioni-ticket-contatore {
    display: grid;
    place-items: center;

    min-width: 27px;
    height: 27px;
    padding: 0 7px;

    border-radius: 999px;

    background: rgba(200, 63, 136, 0.14);
    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
}

.pannello-relazioni-ticket {
    margin-bottom: 26px;

    scroll-margin-top: 24px;
    animation: pannello-operativo-apertura 0.24s ease;
}

.pannello-relazioni-ticket[hidden] {
    display: none;
}

.relazione-mappa-link {
    flex: 0 0 auto;
    text-decoration: none;
}

.relazioni-ticket-kpi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;

    margin-bottom: 28px;
}

.relazioni-ticket-kpi article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-width: 0;
    padding: 16px 18px;

    border: 1px solid rgba(35, 36, 39, 0.08);
    border-radius: 17px;

    background: rgba(255, 255, 255, 0.56);
}

.relazioni-ticket-kpi span {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
}

.relazioni-ticket-kpi strong {
    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.55rem;
}

.relazioni-ticket-blocco + .relazioni-ticket-blocco {
    margin-top: 30px;
    padding-top: 28px;

    border-top: 1px solid rgba(35, 36, 39, 0.09);
}

.relazioni-ticket-blocco-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
}

.relazioni-ticket-blocco-intestazione h4 {
    margin: 0;

    color: var(--unchained-blu-notte);

    font-size: 1.32rem;
}

.relazioni-ticket-blocco-intestazione p:last-child {
    margin: 8px 0 0;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

.relazioni-ticket-elenco {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.relazione-ticket-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.44fr);
    gap: 18px;

    min-width: 0;
    padding: 19px;

    border: 1px solid rgba(200, 63, 136, 0.14);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.58);

    box-shadow:
        5px 5px 12px rgba(0, 0, 0, 0.08),
        -4px -4px 10px rgba(255, 255, 255, 0.76);
}

.relazione-ticket-card-padre {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.36fr);
}

.relazione-ticket-identita {
    display: grid;
    align-content: start;
    gap: 6px;

    min-width: 0;
}

.relazione-ticket-direzione {
    width: max-content;
    padding: 5px 9px;

    border-radius: 999px;

    background: rgba(200, 63, 136, 0.10);
    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.relazione-ticket-identita a {
    width: max-content;

    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    text-decoration: none;
}

.relazione-ticket-identita a:hover,
.relazione-ticket-identita a:focus-visible {
    text-decoration: underline;
}

.relazione-ticket-identita strong {
    overflow-wrap: anywhere;
}

.relazione-ticket-identita small {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
}

.relazione-ticket-attributo {
    display: grid;
    align-content: center;
    gap: 5px;

    min-width: 0;
    padding: 13px 15px;

    border-left: 3px solid var(--unchained-ciano);
    border-radius: 0 12px 12px 0;

    background: rgba(200, 63, 136, 0.07);
}

.relazione-ticket-attributo span {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.relazione-ticket-attributo strong {
    overflow-wrap: anywhere;
}

.relazione-ticket-azioni {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;

    padding-top: 16px;

    border-top: 1px solid rgba(35, 36, 39, 0.08);
}

.relazione-ticket-azioni form {
    margin: 0;
}

.relazione-ticket-azioni label {
    display: block;
    margin-bottom: 7px;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
}

.relazione-ticket-azione-riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.neon-button-danger {
    border-color: rgba(169, 68, 66, 0.22);
    color: var(--unchained-danger);
}

.neon-button-danger:hover,
.neon-button-danger:focus-visible {
    color: #7f2e2c;
}

.relazioni-ticket-creazione {
    padding: 22px;

    border: 1px dashed rgba(200, 63, 136, 0.32);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.30);
}

.relazioni-formset-elenco {
    display: grid;
    gap: 16px;
}

.relazione-form-riga {
    position: relative;

    display: grid;
    grid-template-columns: minmax(320px, 1.35fr) minmax(240px, 0.85fr) 42px;
    align-items: end;
    gap: 14px;

    padding: 17px;

    border: 1px solid rgba(35, 36, 39, 0.09);
    border-radius: 17px;

    background: rgba(255, 255, 255, 0.62);
}

/*
 * La regola esplicita è necessaria perché display:grid sul contenitore
 * prevale sul comportamento predefinito dell'attributo HTML hidden.
 */
.relazione-form-riga[hidden],
.relazione-form-riga-rimossa {
    display: none !important;
}

.relazione-form-ricerca {
    position: relative;

    min-width: 0;
}

.relazione-form-ricerca > label {
    display: block;
    margin-bottom: 8px;

    font-weight: 700;
}

.relazione-risultati-ricerca {
    position: absolute;
    z-index: 45;
    top: calc(100% + 8px);
    right: 0;
    left: 0;

    display: grid;
    gap: 7px;

    max-height: 300px;
    padding: 10px;

    overflow-y: auto;

    border: 1px solid rgba(200, 63, 136, 0.24);
    border-radius: 15px;

    background: var(--unchained-bianco);
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;

    box-shadow: 0 18px 38px rgba(35, 36, 39, 0.22);
}

.relazione-risultati-ricerca[hidden] {
    display: none;
}

.relazione-risultato-elemento {
    display: grid;
    gap: 4px;

    width: 100%;
    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 11px;

    background: var(--unchained-superficie);
    color: var(--unchained-testo);

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.relazione-risultato-elemento:hover,
.relazione-risultato-elemento:focus-visible {
    border-color: rgba(200, 63, 136, 0.30);
    outline: none;
}

.relazione-risultato-elemento small {
    color: var(--unchained-testo-soft);
}

.relazione-form-rimuovi {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(169, 68, 66, 0.20);
    border-radius: 13px;

    background: var(--unchained-bianco);
    color: var(--unchained-danger);

    font-size: 1.25rem;
    font-weight: 900;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.relazione-form-rimuovi:hover,
.relazione-form-rimuovi:focus-visible {
    border-color: rgba(169, 68, 66, 0.46);
    background: rgba(169, 68, 66, 0.08);
    color: #7f2e2c;
    outline: none;
    transform: translateY(-1px);
}

.relazioni-formset-azioni {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-top: 18px;
}

.neon-button-secondary {
    background: rgba(255, 255, 255, 0.66);
    color: var(--unchained-blu-notte);
}


/* =========================================================
   PAGINA MAPPA RELAZIONI
   ========================================================= */

.mappa-relazioni-intestazione {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.mappa-relazioni-intestazione > div {
    min-width: 0;
}

.mappa-relazioni-riepilogo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.3fr);
    align-items: stretch;
    gap: 15px;

    margin-bottom: 24px;
}

.mappa-relazioni-riepilogo > article {
    display: grid;
    align-content: center;
    gap: 6px;

    padding: 15px 17px;

    border: 1px solid rgba(35, 36, 39, 0.08);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.52);
}

.mappa-relazioni-riepilogo article span {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mappa-relazioni-riepilogo article strong {
    color: var(--unchained-blu-notte);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.12rem;
}

.mappa-relazioni-legenda {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 12px 17px;

    padding: 15px 17px;

    border: 1px solid rgba(35, 36, 39, 0.08);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.52);
}

.mappa-relazioni-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
}

.mappa-relazioni-legenda i {
    width: 13px;
    height: 13px;

    border: 2px solid var(--unchained-blu-notte);
    border-radius: 4px;

    background: var(--unchained-bianco);
}

.mappa-relazioni-legenda .mappa-legenda-corrente {
    border-color: var(--unchained-ciano);
    background: rgba(200, 63, 136, 0.14);
}

.mappa-relazioni-legenda .mappa-legenda-chiuso {
    border-color: var(--unchained-testo-soft);
    background: var(--unchained-bordo);
}

.mappa-relazioni-sezione {
    min-height: 520px;
}

.mappa-relazioni-canvas {
    width: 100%;
    padding: 26px 18px 42px;

    overflow-x: auto;
    overflow-y: visible;
}

.mappa-relazioni-albero,
.mappa-relazioni-albero ul {
    position: relative;

    display: flex;
    justify-content: center;
    gap: 0;

    margin: 0;
    padding: 34px 0 0;

    list-style: none;
}

.mappa-relazioni-albero {
    min-width: max-content;
    padding-top: 0;
}

.mappa-relazioni-nodo-wrapper {
    position: relative;

    padding: 54px 16px 0;

    text-align: center;
}

.mappa-relazioni-albero > .mappa-relazioni-nodo-wrapper {
    padding-top: 0;
}

.mappa-relazioni-nodo-wrapper::before,
.mappa-relazioni-nodo-wrapper::after {
    content: "";

    position: absolute;
    top: 0;

    width: 50%;
    height: 54px;

    border-top: 2px solid rgba(35, 36, 39, 0.26);
}

.mappa-relazioni-nodo-wrapper::before {
    right: 50%;
}

.mappa-relazioni-nodo-wrapper::after {
    left: 50%;

    border-left: 2px solid rgba(35, 36, 39, 0.26);
}

.mappa-relazioni-nodo-wrapper:only-child::before,
.mappa-relazioni-nodo-wrapper:only-child::after,
.mappa-relazioni-albero > .mappa-relazioni-nodo-wrapper::before,
.mappa-relazioni-albero > .mappa-relazioni-nodo-wrapper::after {
    display: none;
}

.mappa-relazioni-nodo-wrapper:first-child::before,
.mappa-relazioni-nodo-wrapper:last-child::after {
    border: 0;
}

.mappa-relazioni-nodo-wrapper:last-child::before {
    border-right: 2px solid rgba(35, 36, 39, 0.26);
    border-radius: 0 10px 0 0;
}

.mappa-relazioni-nodo-wrapper:first-child::after {
    border-radius: 10px 0 0 0;
}

.mappa-relazioni-figli::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 0;
    height: 54px;

    border-left: 2px solid rgba(35, 36, 39, 0.26);
}


.mappa-relazioni-editor {
    position: absolute;
    z-index: 40;
    top: 48px;
    left: 50%;

    display: grid;
    gap: 10px;

    width: 320px;
    padding: 15px;

    border: 1px solid rgba(200, 63, 136, 0.28);
    border-radius: 16px;

    background: var(--unchained-superficie);
    text-align: left;

    box-shadow: 10px 12px 26px rgba(0, 0, 0, 0.20);
    transform: translateX(-50%);
}

.mappa-relazioni-editor[hidden] {
    display: none !important;
}

.mappa-relazioni-editor > strong {
    color: var(--unchained-blu-notte);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
}

.mappa-relazioni-editor-form {
    display: grid;
    gap: 10px;
}

.mappa-relazioni-editor-azioni {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.mappa-relazioni-editor-azioni .neon-button {
    min-width: 94px;
    padding: 9px 13px;
}

.mappa-relazioni-editor-rimozione {
    padding-top: 9px;

    border-top: 1px solid rgba(35, 36, 39, 0.10);
}

.mappa-relazioni-editor-rimuovi {
    border: 0;
    background: transparent;
    color: #a94442;

    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;

    cursor: pointer;
}

.mappa-relazioni-editor-rimuovi:hover,
.mappa-relazioni-editor-rimuovi:focus-visible {
    text-decoration: underline;
}

.mappa-relazioni-nodo {
    position: relative;
    z-index: 3;

    display: grid;
    gap: 10px;

    width: 292px;
    min-height: 178px;
    margin-inline: auto;
    padding: 18px 19px;

    border: 2px solid rgba(35, 36, 39, 0.18);
    border-radius: 18px;

    background: var(--unchained-bianco);
    color: var(--unchained-testo);

    text-align: left;

    cursor: pointer;

    box-shadow:
        7px 7px 16px rgba(0, 0, 0, 0.12),
        -6px -6px 14px rgba(255, 255, 255, 0.82);
}

.mappa-relazioni-nodo:hover,
.mappa-relazioni-nodo:focus-visible {
    border-color: rgba(200, 63, 136, 0.62);
    outline: none;
    transform: translateY(-2px);

    box-shadow:
        9px 11px 20px rgba(0, 0, 0, 0.15),
        -6px -6px 14px rgba(255, 255, 255, 0.86);
}

.mappa-relazioni-nodo.corrente {
    border-color: var(--unchained-ciano);
    background: rgba(200, 63, 136, 0.07);
}

.mappa-relazioni-nodo.chiuso {
    border-color: rgba(111, 112, 116, 0.45);
    background: #dddddd;
}

.mappa-relazioni-nodo-intestazione {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;

    min-width: 0;
}

.mappa-relazioni-codice {
    min-width: 0;

    overflow-wrap: anywhere;

    color: var(--unchained-ciano);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.2;
}

.mappa-relazioni-stato {
    align-self: start;

    max-width: 94px;
    padding: 5px 8px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(35, 36, 39, 0.07);
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.67rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.mappa-relazioni-identificazione {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.mappa-relazioni-tipo {
    width: fit-content;
    padding: 4px 7px;

    border: 1px solid rgba(35, 36, 39, 0.12);
    border-radius: 999px;

    background: rgba(35, 36, 39, 0.05);
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mappa-relazioni-nodo.relazione-ibrida {
    border-style: dashed;
    border-color: rgba(200, 63, 136, 0.55);
    background: rgba(255, 255, 255, 0.82);
}

.mappa-relazioni-nodo.relazione-ibrida .mappa-relazioni-tipo {
    border-color: rgba(200, 63, 136, 0.24);
    background: rgba(200, 63, 136, 0.08);
    color: var(--unchained-ciano);
}

.mappa-relazioni-legenda .mappa-legenda-ibrida {
    border-style: dashed;
    border-color: var(--unchained-ciano);
    background: rgba(200, 63, 136, 0.08);
}

.mappa-relazioni-nodo > strong {
    min-height: 46px;
    margin-top: 2px;

    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    line-height: 1.25;
}

.mappa-relazioni-contesto {
    display: grid;
    align-self: end;
    gap: 7px;

    margin: 4px 0 0;
}

.mappa-relazioni-contesto div {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 7px;
}

.mappa-relazioni-contesto dt,
.mappa-relazioni-contesto dd {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
}

.mappa-relazioni-contesto dt {
    color: var(--unchained-testo-soft);
    font-weight: 800;
}

.mappa-relazioni-contesto dd {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}



/* =========================================================
   RELAZIONI TICKET - METADATI E CRONOLOGIA
   ========================================================= */

.relazione-ticket-metadati {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.58);
}

.relazioni-ticket-cronologia {
    display: grid;
    gap: 12px;
}

.relazioni-ticket-evento {
    display: grid;
    gap: 7px;

    padding: 14px 16px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.035);
}

.relazioni-ticket-evento-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.relazioni-ticket-evento-testa strong {
    color: var(--unchained-ciano-chiaro);
}

.relazioni-ticket-evento-testa time,
.relazioni-ticket-evento small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
}

.relazioni-ticket-evento p {
    margin: 0;
}



.mappa-relazioni-feedback {
    min-height: 24px;
    margin-top: 14px;

    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
}

.mappa-relazioni-feedback.successo {
    color: #2f7b50;
}

.mappa-relazioni-feedback.errore {
    color: #a94442;
}

.mappa-relazioni-feedback.attesa {
    color: var(--unchained-ciano);
}

.mappa-relazioni-configurazione {
    display: none;
}


/* =========================================================
   RELAZIONI TICKET - MAPPA SEMPRE COMPLETA
   ========================================================= */

/*
 * Ogni elemento LI assume la larghezza del proprio sottoalbero.
 * La card viene centrata rispetto a tutti i discendenti, evitando
 * che il nodo padre rimanga allineato soltanto al primo figlio.
 */
.mappa-relazioni-nodo-wrapper {
    display: grid;
    grid-template-columns: max-content;
    justify-items: center;
    align-content: start;
}

.mappa-relazioni-nodo-wrapper > .mappa-relazioni-figli {
    justify-self: center;
}

.mappa-relazioni-nodo {
    min-height: 208px;
}

.mappa-relazioni-nodo.editor-aperto {
    z-index: 70;
}

/*
 * L'attributo non è più sospeso sul collegamento: è una riga esplicita
 * dentro la card del figlio. Il valore è un pulsante solo per chi può
 * gestire la relazione.
 */
.mappa-relazioni-attributo-riga {
    position: relative;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 9px 10px;

    border: 1px solid rgba(200, 63, 136, 0.18);
    border-radius: 12px;

    background: rgba(200, 63, 136, 0.06);
}

.mappa-relazioni-attributo-etichetta {
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mappa-relazioni-attributo-card {
    min-width: 0;
    padding: 0;

    overflow: hidden;

    border: 0;
    background: transparent;
    color: var(--unchained-ciano);

    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.mappa-relazioni-attributo-card {
    cursor: pointer;
}

button.mappa-relazioni-attributo-card:hover,
button.mappa-relazioni-attributo-card:focus-visible {
    color: var(--unchained-blu-notte);
    outline: none;
    text-decoration: underline;
}

.mappa-relazioni-attributo-riga .mappa-relazioni-editor {
    top: calc(100% + 9px);
    right: 0;
    left: auto;

    width: 320px;

    transform: none;
}

/* =========================================================
   RELAZIONI TICKET - TRACCIABILITÀ CON SCROLL INTERNO
   ========================================================= */

.relazioni-ticket-cronologia-box {
    max-height: 360px;
    padding: 14px;

    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    border: 1px solid rgba(35, 36, 39, 0.10);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.38);

    box-shadow:
        inset 4px 4px 10px rgba(0, 0, 0, 0.05),
        inset -4px -4px 10px rgba(255, 255, 255, 0.72);
}

.relazioni-ticket-evento {
    border-color: rgba(35, 36, 39, 0.09);
    background: rgba(255, 255, 255, 0.62);
}

.relazioni-ticket-evento-testa strong {
    color: var(--unchained-ciano);
}

.relazioni-ticket-evento-testa time,
.relazioni-ticket-evento small {
    color: var(--unchained-testo-soft);
}


/* =========================================================
   MENU LATERALE MODULARE ITSM
   ========================================================= */

.neon-sidebar-nav-modulare {
    gap: 7px;
}

.neon-menu-modulo {
    width: 100%;
}

.neon-menu-modulo > summary {
    list-style: none;
}

.neon-menu-modulo > summary::-webkit-details-marker {
    display: none;
}

.neon-menu-modulo-pulsante,
.neon-menu-modulo-disabilitato {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px solid transparent;
    border-left-width: 4px;
    font-family: inherit;
    text-align: left;
}

.neon-menu-modulo-pulsante.attivo-modulo {
    border-color: #D6D7D9;
    border-left-color: var(--unchained-ciano);

    background: var(--unchained-bianco);
    color: var(--unchained-blu-notte);

    box-shadow: 0 2px 5px rgba(35, 36, 39, 0.10);
}

.neon-menu-modulo-etichetta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.indicatore-menu-modulo {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border: 0;
    border-radius: 50%;

    background: var(--unchained-ciano);

    box-shadow: 0 0 0 3px rgba(200, 63, 136, 0.13);
}

.neon-menu-freccia {
    font-family: Arial, Helvetica, sans-serif;
    color: #77797E;

    font-size: 0.92rem;
    transition: transform 0.2s ease;
}

.neon-menu-modulo[open] .neon-menu-freccia {
    transform: rotate(180deg);
}

.neon-sottomenu {
    display: grid;
    gap: 3px;
    margin: 5px 0 4px 17px;
    padding: 3px 0 3px 12px;
    border-left: 1px solid #CCCDD0;
}

.neon-sottomenu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #5A5C60;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.neon-sottomenu-link:hover {
    border-color: #DFE0E2;
    background: var(--unchained-bianco);
    color: var(--unchained-blu-notte);
}

.neon-sottomenu-link.attivo {
    border-color: rgba(200, 63, 136, 0.22);
    background: rgba(200, 63, 136, 0.08);
    color: var(--unchained-blu-notte);
    box-shadow: inset 3px 0 0 var(--unchained-ciano);
}

.neon-menu-modulo-disabilitato {
    color: #96989C;
    opacity: 0.72;
    cursor: not-allowed;
}

.neon-menu-modulo-disabilitato:hover {
    border-color: transparent;
    border-left-color: transparent;
    background: transparent;
    color: #96989C;
}


/* =========================================================
   MODULO PROBLEM MANAGEMENT
   ========================================================= */

.problem-testata {
    margin-bottom: 24px;
}

.problem-testata-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.problem-known-error {
    background: rgba(200, 63, 136, 0.14);
    color: var(--unchained-ciano);
}

.problem-griglia-dettaglio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 24px;
    margin-bottom: 24px;
}

.problem-card-principale,
.problem-azioni-card,
.problem-relazioni-sezione,
.problem-griglia-operativa > article,
.problem-griglia-analisi > article {
    padding: 24px;
}

.problem-sezione-titolo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.problem-sezione-titolo h2,
.problem-azioni-card h2,
.problem-griglia-operativa h2,
.problem-relazioni-sezione h2,
.problem-testo-blocco h2,
.problem-testo-blocco h3 {
    margin-top: 0;
}

.problem-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--unchained-ciano);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.problem-dati-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}

.problem-dati-griglia > div {
    padding: 12px 0;
    border-bottom: 1px solid rgba(35, 36, 39, 0.10);
}

.problem-testo-blocco p {
    color: #55575b;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

.problem-azioni-elenco {
    display: grid;
    gap: 12px;
}

.problem-azioni-elenco form {
    display: grid;
    gap: 8px;
    margin: 0;
}

.problem-azioni-elenco .neon-button {
    width: 100%;
    text-align: center;
}

.problem-griglia-analisi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 24px;
}

.problem-relazioni-sezione {
    margin-bottom: 24px;
}

.problem-relazioni-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.problem-elenco-scroll {
    max-height: 310px;
    overflow-y: auto;
    padding: 4px 10px 4px 4px;
}

.problem-scroll-alto {
    max-height: 430px;
}

.problem-relazione-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(200, 63, 136, 0.20);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
}

.problem-relazione-riga a {
    display: grid;
    flex: 1;
    gap: 4px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.problem-relazione-riga a strong {
    color: var(--unchained-ciano);
}

.problem-relazione-riga a span,
.problem-relazione-riga a small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.problem-azione-testo {
    border: 0;
    background: transparent;
    color: #a94442;
    font-weight: 800;
    cursor: pointer;
}

.problem-form-relazione {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(35, 36, 39, 0.10);
}

.problem-select-multipla {
    min-height: 190px;
}

.problem-griglia-operativa {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.problem-gruppi-esclusi ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 160px;
    overflow-y: auto;
    padding: 10px;
    list-style: none;
}

/* Mappa Problem sempre completamente aperta */
.problem-mappa-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    margin-bottom: 24px;
}

.problem-mappa-intestazione h1 {
    margin: 0 0 6px;
}

.problem-mappa-canvas {
    padding: 42px 28px;
    overflow-x: auto;
}

.problem-mappa-radice,
.problem-mappa-livello {
    display: flex;
    justify-content: center;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.problem-mappa-livello {
    position: relative;
    margin-top: 58px;
}

.problem-mappa-livello::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    width: calc(100% - 290px);
    border-top: 2px solid rgba(35, 36, 39, 0.20);
    transform: translateX(-50%);
}

.problem-mappa-elemento {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 292px;
}

.problem-mappa-elemento > .problem-mappa-livello::after,
.problem-mappa-elemento > .problem-mappa-nodo::after {
    content: "";
    position: absolute;
    left: 50%;
    border-left: 2px solid rgba(35, 36, 39, 0.20);
}

.problem-mappa-elemento > .problem-mappa-livello::after {
    top: -30px;
    height: 30px;
}

.problem-mappa-nodo {
    position: relative;
    display: grid;
    gap: 13px;
    width: 292px;
    min-height: 170px;
    padding: 18px;
    border: 1px solid rgba(35, 36, 39, 0.14);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.78);
    color: inherit;
    text-decoration: none;
    box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.14);
}

.problem-mappa-nodo.corrente {
    border: 2px solid var(--unchained-ciano);
    background: rgba(200, 63, 136, 0.06);
}

.problem-mappa-nodo-testa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.problem-mappa-nodo-testa strong {
    color: var(--unchained-ciano);
    overflow-wrap: anywhere;
}

.problem-mappa-nodo-testa span {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(35, 36, 39, 0.08);
    font-size: 0.68rem;
    font-weight: 900;
}

.problem-mappa-nodo h3 {
    margin: 0;
    font-size: 1rem;
}

.problem-mappa-nodo dl {
    display: grid;
    gap: 6px;
    margin: auto 0 0;
}

.problem-mappa-nodo dl div {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
}

.problem-mappa-nodo dt {
    font-weight: 800;
}

.problem-mappa-nodo dd {
    margin: 0;
}

.problem-mappa-attributo-form {
    display: grid;
    gap: 5px;
    width: 292px;
    margin-bottom: 10px;
}

.problem-mappa-attributo-form label {
    color: var(--unchained-ciano);
    font-size: 0.70rem;
    font-weight: 900;
    text-transform: uppercase;
}

.problem-mappa-attributo-form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.problem-mappa-attributo-form input,
.problem-mappa-attributo-form button,
.problem-mappa-rimuovi button {
    min-height: 36px;
    border: 1px solid rgba(200, 63, 136, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.90);
    padding: 8px 10px;
}

.problem-mappa-attributo-form button,
.problem-mappa-rimuovi button {
    color: var(--unchained-ciano);
    font-weight: 800;
    cursor: pointer;
}

.problem-mappa-rimuovi {
    margin-top: 8px;
}

.problem-mappa-rimuovi button {
    color: #a94442;
}


/* =========================================================
   ESPANSIONE ITSM: DASHBOARD E CENTRO NOTIFICHE UNIFICATO
   ========================================================= */

.intestazione-notifiche-unificate,
.dashboard-modulo-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.filtri-notifiche {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 3px 3px 8px rgba(0, 0, 0, 0.08),
        inset -3px -3px 8px rgba(255, 255, 255, 0.75);
}

.filtri-notifiche a {
    padding: 9px 14px;
    border-radius: 13px;
    color: var(--unchained-nero);
    font-weight: 800;
    text-decoration: none;
}

.filtri-notifiche a:hover,
.filtri-notifiche a.attivo {
    background: rgba(200, 63, 136, 0.12);
    color: var(--unchained-ciano);
}

.notifica-modulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    margin-right: 7px;
    padding: 4px 7px;
    border-radius: 999px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.notifica-modulo-ticket {
    background: rgba(35, 36, 39, 0.10);
    color: var(--unchained-nero);
}

.notifica-modulo-problem {
    background: rgba(200, 63, 136, 0.14);
    color: var(--unchained-ciano);
}

.notifica-titolo-elemento,
.dettaglio-notifica-titolo-elemento {
    display: block;
    margin-top: 4px;
    color: rgba(35, 36, 39, 0.78);
    font-weight: 700;
}

.dettaglio-notifica-titolo-elemento {
    margin: -6px 0 14px;
    font-size: 1.04rem;
}

.dashboard-modulo {
    display: grid;
    gap: 24px;
    margin-bottom: 34px;
    padding: 26px;
    border: 1px solid rgba(35, 36, 39, 0.08);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.28);
}

.dashboard-modulo-intestazione > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-modulo-intestazione h3 {
    margin: 0;
}

.dashboard-modulo-codice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid rgba(200, 63, 136, 0.24);
    border-radius: 12px;
    color: var(--unchained-ciano);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.dashboard-modulo-problem {
    border-color: rgba(200, 63, 136, 0.14);
}

.griglia-kpi-problem {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Contenitore operativo dei Ticket collegati nel dettaglio Problem. */
.problem-ticket-collegamento-card {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.problem-ticket-collegamento-card form {
    margin: 0;
    text-align: right;
}

/* Problem collegati visualizzati dal dettaglio Ticket. */
.problem-collegati-ticket-elenco {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.problem-collegato-ticket-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(200, 63, 136, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.problem-collegato-ticket-card:hover,
.problem-collegato-ticket-card:focus-visible {
    border-color: rgba(200, 63, 136, 0.42);
    background: rgba(255, 255, 255, 0.78);
    outline: none;
    transform: translateY(-1px);
}

.problem-collegato-ticket-card > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.problem-collegato-ticket-card strong {
    color: var(--unchained-ciano);
}

.problem-collegato-ticket-card small {
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(35, 36, 39, 0.08);
    font-weight: 800;
}

.problem-collegato-ticket-card b,
.problem-collegato-ticket-card p {
    overflow-wrap: anywhere;
}

.problem-collegato-ticket-card p,
.problem-collegato-ticket-card time {
    margin: 0;
    color: rgba(35, 36, 39, 0.70);
    font-size: 0.82rem;
}


/*
 * Un riferimento indica che l'elemento è già stato espanso in un altro
 * punto della stessa mappa. La card resta navigabile ma non genera un nuovo
 * sottoalbero, evitando cicli infiniti nel grafo misto Ticket–Problem.
 */
.mappa-relazioni-nodo.riferimento {
    opacity: 0.78;
    border-style: dotted;
}

.mappa-relazioni-nodo.riferimento .mappa-relazioni-tipo::after {
    content: "";
}

/* =========================================================
   MAPPA RELAZIONI - GRAFO UNICO BIDIREZIONALE
   ========================================================= */

/*
 * La nuova mappa non replica le entità raggiunte da più relazioni. Ogni card
 * viene disegnata una sola volta e i collegamenti aggiuntivi sono tracciati
 * tramite un livello SVG posto dietro le card.
 */
.mappa-relazioni-canvas {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
}

.mappa-relazioni-grafo-area {
    --mappa-larghezza-card: 292px;
    --mappa-spazio-orizzontale: 74px;

    position: relative;

    min-width: max(
        100%,
        calc(
            var(--mappa-colonne-massime, 1)
            * (var(--mappa-larghezza-card) + var(--mappa-spazio-orizzontale))
            + 90px
        )
    );
    padding: 20px 42px 44px;
}

.mappa-relazioni-connettori {
    position: absolute;
    z-index: 1;
    inset: 0;

    display: block;

    overflow: visible;
    pointer-events: none;
}

.mappa-relazioni-connettore {
    fill: none;
    stroke: rgba(35, 36, 39, 0.34);
    stroke-width: 2.2;
    stroke-linecap: square;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}

.mappa-relazioni-connettore.tipo-ibrida {
    stroke: rgba(200, 63, 136, 0.68);
    stroke-dasharray: 8 6;
}

.mappa-relazioni-connettore.tipo-problem {
    stroke: rgba(35, 36, 39, 0.44);
}

.mappa-relazioni-freccia {
    fill: rgba(35, 36, 39, 0.48);
}

.mappa-relazioni-livelli {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 118px;

    min-width: max-content;
}

.mappa-relazioni-livello {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--mappa-spazio-orizzontale);

    min-width: max-content;
}

.mappa-relazioni-card-grafo {
    flex: 0 0 var(--mappa-larghezza-card);
    width: var(--mappa-larghezza-card);
    min-height: 208px;
}

.mappa-relazioni-nodo-riepilogo {
    display: grid;
    justify-items: end;
    gap: 7px;

    min-width: 88px;
}

.mappa-relazioni-controlli-livello {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;

    min-height: 30px;
}

.mappa-relazioni-controllo-livello {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    min-width: 38px;
    height: 28px;
    padding: 0 8px;

    border: 1px solid rgba(35, 36, 39, 0.18);
    border-radius: 999px;

    background: rgba(35, 36, 39, 0.055);
    color: var(--unchained-testo-soft);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 900;

    cursor: pointer;
}

.mappa-relazioni-controllo-livello strong {
    color: inherit;
    font-size: 0.72rem;
}

.mappa-relazioni-controllo-livello:hover,
.mappa-relazioni-controllo-livello:focus-visible,
.mappa-relazioni-controllo-livello.aperto {
    border-color: rgba(200, 63, 136, 0.52);
    outline: none;
    background: rgba(200, 63, 136, 0.10);
    color: var(--unchained-ciano);
}

.mappa-relazioni-controllo-livello:not(.aperto) {
    opacity: 0.66;
}

.mappa-relazioni-ingressi {
    display: grid;
    gap: 7px;

    max-height: 126px;
    padding-right: 3px;

    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.mappa-relazioni-ingressi .mappa-relazioni-attributo-riga {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 8px 9px;
}

.mappa-relazioni-ingressi .mappa-relazioni-attributo-etichetta,
.mappa-relazioni-ingressi .mappa-relazioni-attributo-card {
    width: 100%;
    text-align: left;
}

.mappa-relazioni-attributo-riga.relazione-ibrida {
    border-style: dashed;
    border-color: rgba(200, 63, 136, 0.30);
    background: rgba(200, 63, 136, 0.055);
}

.mappa-relazioni-attributo-riga.relazione-omogenea {
    border-color: rgba(35, 36, 39, 0.14);
    background: rgba(35, 36, 39, 0.035);
}

.mappa-relazioni-card-grafo.editor-aperto {
    z-index: 80;
}

@media (max-width: 1280px) {
    .mappa-relazioni-grafo-area {
        --mappa-spazio-orizzontale: 56px;
    }
}


/* =========================================================
   LETTURA GLOBALE NOTIFICHE
   ========================================================= */

.azioni-intestazione-notifiche {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.form-segna-tutte-lette {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selettore-tutte-lette {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 13px;
    border: 1px solid rgba(200, 63, 136, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--unchained-nero);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        4px 4px 9px rgba(0, 0, 0, 0.08),
        -4px -4px 9px rgba(255, 255, 255, 0.78);
}

.selettore-tutte-lette input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.selettore-tutte-lette-check {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid rgba(35, 36, 39, 0.34);
    border-radius: 6px;
    background: var(--unchained-bianco);
}

.selettore-tutte-lette input:focus-visible +
.selettore-tutte-lette-check {
    outline: 3px solid rgba(200, 63, 136, 0.25);
    outline-offset: 2px;
}

.selettore-tutte-lette input:checked +
.selettore-tutte-lette-check {
    border-color: var(--unchained-ciano);
    background: var(--unchained-ciano);
}

.selettore-tutte-lette input:checked +
.selettore-tutte-lette-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--unchained-bianco);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.selettore-tutte-lette:hover {
    color: var(--unchained-ciano);
}

.selettore-tutte-lette.completato {
    cursor: default;
    opacity: 0.72;
}

.pulsante-segna-tutte-lette {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--unchained-ciano);
    color: var(--unchained-bianco);
    font-weight: 800;
}

/* Lo storico operativo è sempre aperto: la data resta nella riga Quando. */
.storico-processo-record > .storico-processo-dati {
    margin-top: 16px;
}

/* =========================================================
   COPIA TICKET / PROBLEM - COLLEGAMENTO DUPLICATO BMC
   ========================================================= */
.copia-duplicato-opzione {
    margin-top: 0.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(200, 63, 136, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.34);
}

.copia-duplicato-label {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    cursor: pointer;
}

.copia-duplicato-checkbox {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.18rem;
    flex: 0 0 auto;
    accent-color: #625079;
}

.copia-duplicato-label span {
    display: grid;
    gap: 0.25rem;
}

.copia-duplicato-label strong {
    line-height: 1.3;
}

.copia-duplicato-label small {
    color: var(--testo-secondario, #5f6670);
    line-height: 1.45;
}

/* =========================================================
   MODULO SLA
   ========================================================= */
.sla-intestazione {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.sla-kicker {
    margin: 0 0 6px;
    color: var(--unchained-ciano);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.sla-kpi {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.sla-kpi .sla-kpi-card {
    min-height: 112px;
    padding: 16px 18px;
    border: 1px solid transparent;
    border-radius: 18px;
}

.sla-kpi .card-kpi-etichetta {
    margin-bottom: 8px;
    font-size: 0.82rem;
}

.sla-kpi .card-kpi-valore {
    font-size: 2.3rem;
}

.sla-kpi-card-attenzione {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sla-kpi-card-attenzione.sla-kpi-card-attiva {
    border-color: rgba(212, 160, 23, 0.55);
    background: linear-gradient(145deg, #fff9df, #fff0b7);
    box-shadow:
        8px 8px 18px rgba(135, 98, 8, 0.16),
        -7px -7px 15px rgba(255, 255, 255, 0.94);
}

.sla-testo-attenzione {
    color: var(--unchained-warning);
}

.sla-testo-violato {
    color: var(--unchained-danger);
}

.sla-monitor,
.sla-politiche,
.sla-configurazione {
    margin-top: 28px;
}

.sla-sezione-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 22px;
}

.sla-sezione-header h3,
.sla-sezione-header h4 {
    margin: 0 0 5px;
    color: var(--unchained-blu);
    font-size: 1.35rem;
}

.sla-sezione-header p {
    margin: 0;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
}

.sla-filtro {
    display: grid;
    gap: 5px;
    min-width: 190px;
}

.sla-filtro label,
.sla-campo label,
.sla-giorni-check > label {
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sla-filtro select,
.sla-campo input:not([type="checkbox"]),
.sla-campo select,
.sla-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 11px;
    background: var(--unchained-bianco);
    color: var(--unchained-testo);
    font: inherit;
}

.sla-tabella-contenitore {
    width: 100%;
    overflow: auto;
    border: 1px solid rgba(35, 36, 39, 0.1);
    border-radius: 16px;
}

/*
 * I Monitor SLA restano confinati in un blocco di altezza stabile. Le tabelle
 * con molte righe non allungano l'intera pagina e le colonne non vengono
 * compresse: l'eccedenza si consulta sui due assi all'interno del monitor.
 */
.sla-monitor-tabella {
    width: 100%;
    height: 430px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.sla-monitor-tabella .sla-tabella {
    min-width: 1100px;
}

.sla-monitor-tabella .sla-tabella thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.sla-tabella {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.44);
}

.sla-tabella th,
.sla-tabella td {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(35, 36, 39, 0.08);
    text-align: left;
    vertical-align: middle;
}

.sla-tabella th {
    background: rgba(35, 36, 39, 0.94);
    color: var(--unchained-bianco);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.77rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sla-tabella tbody tr:last-child td {
    border-bottom: 0;
}

.sla-tabella tbody tr:hover {
    background: rgba(200, 63, 136, 0.06);
}

.sla-tabella tbody tr.sla-riga-attenzione > td {
    background: #fff7cf;
    transition: background-color 0.2s ease;
}

.sla-tabella tbody tr.sla-riga-attenzione > td:first-child {
    box-shadow: inset 4px 0 0 #d4a017;
}

/* =========================================================
   CMDB - ELENCO TABELLE E GRIGLIA DATI
   ========================================================= */
.cmdb-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.cmdb-kicker,
.cmdb-breadcrumb {
    margin: 0 0 8px;
    color: var(--unchained-ciano);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.cmdb-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.cmdb-breadcrumb span { padding: 0 6px; color: var(--unchained-testo-soft); }

.cmdb-profilo-accesso {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(116, 59, 133, .35);
    border-radius: 8px;
    background: rgba(200, 63, 136, .08);
    color: #5a326d;
    font-size: .8rem;
    font-weight: 800;
}

.cmdb-elenco-tabelle {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 18px;
}

.cmdb-tabella-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    min-height: 125px;
    padding: 20px;
    color: var(--unchained-testo);
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.cmdb-tabella-card:hover,
.cmdb-tabella-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--unchained-ombra-grande), var(--unchained-anello-accento);
}

.cmdb-tabella-icona {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 10px;
    background: var(--unchained-blu-notte);
    color: var(--unchained-ciano-chiaro);
    font-size: 1.45rem;
}

.cmdb-tabella-corpo { display: grid; gap: 6px; min-width: 0; }
.cmdb-tabella-corpo strong { font-size: 1.05rem; }
.cmdb-tabella-corpo code { width: fit-content; padding: 3px 6px; border-radius: 4px; background: #f1eef6; color: #4d2a63; font-size: .74rem; font-weight: 800; }
.cmdb-tabella-corpo small { color: var(--unchained-testo-soft); line-height: 1.4; }
.cmdb-tabella-corpo em { color: #5a326d; font-size: .76rem; font-style: normal; font-weight: 700; }
.cmdb-tabella-apri { color: var(--unchained-ciano); font-size: 2rem; }

.cmdb-stato-vuoto {
    display: grid;
    min-height: 300px;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 36px;
    text-align: center;
}
.cmdb-stato-vuoto > span { color: var(--unchained-ciano); font-size: 2.5rem; }
.cmdb-stato-vuoto h3,
.cmdb-stato-vuoto p { margin: 0; }
.cmdb-stato-vuoto p { color: var(--unchained-testo-soft); }

.cmdb-catena {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}
.cmdb-catena span {
    padding: 5px 8px;
    border-radius: 5px;
    background: #dedede;
    color: #55575b;
    font-size: .76rem;
    font-weight: 700;
}
.cmdb-catena b { color: var(--unchained-ciano); }

.cmdb-table-key {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 9px;
    border: 1px solid rgba(116, 59, 133, .28);
    border-radius: 5px;
    background: rgba(200, 63, 136, .07);
}
.cmdb-table-key span { color: var(--unchained-testo-soft); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.cmdb-table-key code { color: #4d2a63; font-weight: 800; }

.cmdb-messaggi { display: grid; gap: 8px; margin-bottom: 16px; }
.cmdb-messaggio {
    margin: 0;
    padding: 11px 14px;
    border-left: 4px solid var(--unchained-info);
    border-radius: 4px;
    background: #fff;
    box-shadow: var(--unchained-ombra-piccola);
}
.cmdb-messaggio.success { border-left-color: var(--unchained-successo); }
.cmdb-messaggio.error { border-left-color: var(--unchained-danger); }

.cmdb-contenuto-tabella { min-width: 0; }
.cmdb-griglia-card { overflow: hidden; padding: 0; }
.cmdb-griglia-toolbar,
.cmdb-griglia-salvataggio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
}
.cmdb-griglia-toolbar > div { display: grid; gap: 4px; }
.cmdb-griglia-toolbar small,
.cmdb-griglia-salvataggio p { margin: 0; color: var(--unchained-testo-soft); font-size: .78rem; }

.cmdb-griglia-scroll {
    max-height: 63vh;
    overflow: auto;
    border-block: 1px solid var(--unchained-bordo);
    background: #fafafa;
}

.cmdb-griglia {
    min-width: 980px;
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .82rem;
}

.cmdb-griglia th,
.cmdb-griglia td {
    min-width: 190px;
    height: 46px;
    padding: 7px 9px;
    border-right: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    background: #fff;
    text-align: left;
    vertical-align: middle;
}

.cmdb-griglia thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #303236;
    color: #fff;
}
.cmdb-griglia thead th span,
.cmdb-griglia thead th small { display: block; }
.cmdb-griglia thead th small { margin-top: 3px; color: rgba(255,255,255,.64); font-size: .67rem; font-weight: 400; }
.cmdb-griglia .cmdb-colonna-menu,
.cmdb-griglia .cmdb-cella-menu {
    position: sticky;
    left: 0;
    min-width: 44px;
    width: 44px;
    padding: 5px;
    text-align: center;
}
.cmdb-griglia .cmdb-colonna-menu { z-index: 7; background: #25272a; }
.cmdb-griglia .cmdb-cella-menu { z-index: 3; overflow: visible; background: #f5f5f5; }
.cmdb-griglia .cmdb-colonna-numero,
.cmdb-griglia .cmdb-cella-numero { min-width: 52px; width: 52px; text-align: center; }
.cmdb-griglia .cmdb-cella-numero { background: #f0f0f0; color: var(--unchained-testo-soft); font-size: .72rem; }
.cmdb-griglia .cmdb-colonna-chiave,
.cmdb-griglia .cmdb-cella-chiave {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 145px;
    background: #ececec;
    color: #4d2a63;
    font-weight: 800;
}
.cmdb-griglia thead .cmdb-colonna-chiave { z-index: 6; background: #232427; color: #C56F9D; }
.cmdb-griglia .cmdb-colonna-classe,
.cmdb-griglia .cmdb-cella-classe { min-width: 150px; }

.cmdb-griglia input[type="text"],
.cmdb-griglia input[type="number"],
.cmdb-griglia input[type="date"],
.cmdb-griglia input[type="datetime-local"],
.cmdb-griglia textarea {
    width: 100%;
    min-width: 165px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font: inherit;
}
.cmdb-griglia textarea { min-height: 42px; resize: vertical; }
.cmdb-griglia input:focus,
.cmdb-griglia textarea:focus {
    outline: none;
    border-color: var(--unchained-ciano);
    background: #fbf6fc;
    box-shadow: var(--unchained-anello-focus);
}
.cmdb-griglia input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--unchained-ciano); }
.cmdb-valore-lettura { white-space: pre-wrap; overflow-wrap: anywhere; }
.cmdb-menu-riga { position: relative; display: inline-flex; }
.cmdb-menu-riga-trigger {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid #c9c9c9;
    border-radius: 50%;
    background: #fff;
    color: #4a4a4a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .14);
    cursor: pointer;
}
.cmdb-menu-riga-icona {
    display: grid;
    gap: 3px;
    place-items: center;
}
.cmdb-menu-riga-icona > span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}
.cmdb-menu-riga-trigger:hover,
.cmdb-menu-riga-trigger:focus-visible,
.cmdb-menu-riga-trigger[aria-expanded="true"] {
    border-color: #d46d19;
    background: #f8f1f8;
    color: #5a326d;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
    outline: none;
}
.cmdb-menu-riga-pannello {
    position: absolute;
    top: 50%;
    left: calc(100% + 7px);
    z-index: 20;
    display: grid;
    min-width: 170px;
    padding: 5px;
    transform: translateY(-50%);
    border: 1px solid #d3d3d3;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}
.cmdb-menu-riga-pannello[hidden] { display: none; }
.cmdb-menu-riga-pannello::before {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 8px;
    height: 8px;
    transform: translate(50%, -50%) rotate(45deg);
    border-bottom: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    background: #fff;
    content: "";
}
.cmdb-menu-riga-pannello button {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 7px;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #303236;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.cmdb-menu-riga-pannello button:hover { background: #f0f0f0; }
.cmdb-menu-riga-pannello button.pericolo { color: var(--unchained-danger); font-weight: 800; }
.cmdb-menu-riga-pannello button.pericolo:hover { background: #fff0f0; }
.cmdb-griglia-vuota { width: 100%; padding: 38px !important; color: var(--unchained-testo-soft); text-align: center !important; }
.cmdb-paginazione {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 14px;
    font-size: .82rem;
}
.cmdb-paginazione a { color: #5a326d; font-weight: 800; text-decoration: none; }

@media (max-width: 760px) {
    .cmdb-intestazione,
    .cmdb-griglia-toolbar,
    .cmdb-griglia-salvataggio { align-items: stretch; flex-direction: column; }
    .cmdb-elenco-tabelle { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* ATTESA GLOBALE PER OPERAZIONI LENTE                                        */
/* ========================================================================== */

body.global-loading-open {
    overflow: hidden;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 15, 22, 0.68);
    backdrop-filter: blur(2px);
}

.loading-overlay[hidden] {
    display: none;
}

.loading-dialog {
    width: min(100%, 440px);
    padding: 30px;
    border: 1px solid rgba(200, 63, 136, 0.48);
    border-radius: 10px;
    background: #20262f;
    color: #f4f6f8;
    text-align: center;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.48);
}

.loading-spinner {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border: 5px solid rgba(255, 255, 255, 0.20);
    border-top-color: var(--unchained-ciano);
    border-radius: 50%;
    animation: loading-rotation 0.9s linear infinite;
}

.loading-dialog h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 1.4rem;
}

.loading-dialog p {
    margin: 0;
    color: #cbd2da;
    line-height: 1.55;
}

.loading-dialog .loading-slow-message {
    margin-top: 14px;
    color: #f1c19b;
}

.loading-hide-button {
    min-height: 42px;
    margin-top: 22px;
    padding: 10px 18px;
    border: 1px solid #697381;
    border-radius: 6px;
    background: transparent;
    color: #e8ebef;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.loading-hide-button:hover,
.loading-hide-button:focus-visible {
    border-color: #aeb6c0;
    outline: 3px solid rgba(174, 182, 192, 0.22);
    outline-offset: 2px;
}

@keyframes loading-rotation {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-spinner {
        animation-duration: 1.8s;
    }
}

/* ========================================================================== */
/* PREAVVISO DI SCADENZA SESSIONE                                             */
/* ========================================================================== */

body.session-warning-open {
    overflow: hidden;
}

.session-warning-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 15, 22, 0.76);
    backdrop-filter: blur(3px);
}

.session-warning-overlay[hidden] {
    display: none;
}

.session-warning-dialog {
    width: min(100%, 470px);
    padding: 30px;
    border: 1px solid rgba(200, 63, 136, 0.50);
    border-radius: 10px;
    background: #20262f;
    color: #f4f6f8;
    text-align: center;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.48);
}

.session-warning-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    place-items: center;
    border: 1px solid rgba(200, 63, 136, 0.45);
    border-radius: 50%;
    background: rgba(200, 63, 136, 0.12);
    font-size: 25px;
}

.session-warning-dialog h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 1.45rem;
}

.session-warning-dialog > p {
    margin: 0;
    color: #cbd2da;
    line-height: 1.55;
}

.session-warning-dialog .session-warning-countdown {
    margin-top: 18px;
    color: #f1c19b;
}

.session-warning-countdown strong {
    color: #ff963f;
    font-size: 1.25rem;
}

.session-warning-dialog .session-warning-status {
    margin-top: 14px;
    color: #b9d8c2;
    font-size: 0.9rem;
}

.session-warning-dialog .session-warning-status.errore {
    color: #ffb0a8;
}

.session-warning-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.session-warning-actions button {
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 6px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.session-warning-actions button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.session-warning-primary {
    border: 1px solid #405184;
    background: #405184;
    color: #15191f;
}

.session-warning-primary:hover,
.session-warning-primary:focus-visible {
    background: #8d4a98;
    outline: 3px solid rgba(200, 63, 136, 0.28);
    outline-offset: 2px;
}

.session-warning-secondary {
    border: 1px solid #697381;
    background: transparent;
    color: #e8ebef;
}

.session-warning-secondary:hover,
.session-warning-secondary:focus-visible {
    border-color: #aeb6c0;
    outline: 3px solid rgba(174, 182, 192, 0.22);
    outline-offset: 2px;
}

@media (max-width: 540px) {
    .session-warning-overlay {
        padding: 14px;
    }

    .session-warning-dialog {
        padding: 24px 18px;
    }

    .session-warning-actions,
    .session-warning-actions button {
        width: 100%;
    }
}

/* =========================================================
   DASHBOARD OPERATIVA

   Le analisi qui presenti riguardano carico, flusso e priorità generali.
   Le analisi SLA restano nella sezione SLA dedicata.
   ========================================================= */

.intestazione-pagina:has(.dashboard-periodo) {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-kicker,
.dashboard-pannello-kicker {
    margin: 0 0 7px !important;
    color: var(--unchained-blu-acceso) !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.dashboard-periodo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    max-width: min(100%, 820px);
    padding: 8px 10px 8px 14px;
    background: var(--unchained-bianco);
    border: 1px solid var(--unchained-bordo);
    border-radius: 12px;
    box-shadow: var(--unchained-ombra-piccola);
    font-family: Arial, Helvetica, sans-serif;
}

.dashboard-periodo label {
    color: var(--unchained-testo-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.dashboard-periodo select {
    min-width: 110px;
    padding: 8px 30px 8px 10px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 8px;
    background: var(--unchained-sfondo);
    color: var(--unchained-testo);
    font: inherit;
    font-weight: 700;
}

.dashboard-periodo-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-periodo-date[hidden] {
    display: none;
}

.dashboard-periodo-date label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dashboard-periodo-date input {
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 8px;
    background: var(--unchained-sfondo);
    color: var(--unchained-testo);
    font: inherit;
    font-weight: 700;
}

.dashboard-periodo-applica {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--unchained-blu-notte);
    border-radius: 8px;
    background: var(--unchained-blu-notte);
    color: var(--unchained-bianco);
    cursor: pointer;
    font: 800 0.76rem Arial, Helvetica, sans-serif;
}

.dashboard-periodo-applica:hover,
.dashboard-periodo-applica:focus-visible {
    border-color: var(--unchained-ciano);
    background: var(--unchained-ciano);
    outline: none;
}

.dashboard-periodo-errore {
    flex: 0 0 100%;
    margin: 0 !important;
    color: var(--unchained-danger) !important;
    font-size: 0.74rem !important;
    text-align: right;
}

.dashboard-operativa {
    margin-bottom: 26px;
}

.dashboard-sezione-testa,
.dashboard-pannello-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.dashboard-sezione-testa {
    margin-bottom: 14px;
}

.dashboard-sezione-testa h3,
.dashboard-pannello-testa h3 {
    margin: 0 0 5px;
    color: var(--unchained-blu);
}

.dashboard-sezione-testa p,
.dashboard-pannello-testa p,
.dashboard-sezione-testa small {
    margin: 0;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
}

.dashboard-operativa-kpi {
    display: grid;
    grid-template-columns: repeat(6, minmax(112px, 1fr));
    gap: 12px;
}

.dashboard-kpi {
    position: relative;
    min-width: 0;
}

.dashboard-kpi-trigger {
    position: relative;
    display: flex;
    min-height: 112px;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid var(--unchained-bordo);
    border-top: 3px solid var(--dashboard-kpi-colore, #718096);
    border-radius: 14px;
    background: var(--unchained-bianco);
    color: var(--unchained-testo);
    box-shadow: var(--unchained-ombra-piccola);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.dashboard-kpi-trigger:hover,
.dashboard-kpi-trigger:focus-visible,
.dashboard-kpi-trigger[aria-expanded="true"] {
    transform: translateY(-2px);
    box-shadow: var(--unchained-ombra-media);
    outline: none;
}

.dashboard-kpi-blu { --dashboard-kpi-colore: #1D326A; }
.dashboard-kpi-viola { --dashboard-kpi-colore: #405184; }
.dashboard-kpi-ambra { --dashboard-kpi-colore: #d69b26; }
.dashboard-kpi-rosso { --dashboard-kpi-colore: #d85662; }
.dashboard-kpi-verde { --dashboard-kpi-colore: #2e9f76; }
.dashboard-kpi-neutro { --dashboard-kpi-colore: #718096; }

.dashboard-kpi-etichetta {
    max-width: calc(100% - 24px);
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
}

.dashboard-kpi-trigger strong {
    color: var(--dashboard-kpi-colore);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(1.8rem, 2.4vw, 2.45rem);
    line-height: 1;
}

.dashboard-kpi-aiuto {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid var(--unchained-bordo);
    border-radius: 50%;
    color: var(--unchained-testo-soft);
    font: 700 0.7rem Arial, Helvetica, sans-serif;
}

.dashboard-kpi-popover {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    width: min(290px, 80vw);
    padding: 16px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 12px;
    background: var(--unchained-bianco);
    box-shadow: var(--unchained-ombra-grande);
    font-family: Arial, Helvetica, sans-serif;
}

.dashboard-kpi-popover p {
    margin: 7px 0 12px;
    color: var(--unchained-testo-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.dashboard-kpi-link {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-kpi-link a {
    padding: 6px 9px;
    border-radius: 7px;
    background: var(--unchained-sfondo);
    color: var(--unchained-blu-acceso);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-analisi-griglia {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.85fr);
    gap: 20px;
    margin-bottom: 34px;
}

.dashboard-pannello {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 16px;
    background: var(--unchained-bianco);
}

/* Un pannello senza controparte usa l'intera riga, evitando colonne vuote. */
.dashboard-pannello-esteso {
    grid-column: 1 / -1;
}

.dashboard-pannello-testa {
    margin-bottom: 15px;
}

.dashboard-pannello-testa > div > p:last-child {
    font-size: 0.78rem;
}

.dashboard-legenda {
    display: flex;
    max-width: 430px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7rem;
}

.dashboard-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--unchained-testo-soft);
}

.dashboard-legenda i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--colore-serie);
}

.dashboard-grafico-linee {
    min-height: 280px;
    width: 100%;
}

.dashboard-grafico-linee svg {
    display: block;
    width: 100%;
    height: 280px;
    overflow: visible;
}

.dashboard-chart-grid {
    stroke: rgba(111, 112, 116, 0.18);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.dashboard-chart-asse {
    fill: var(--unchained-testo-soft);
    font: 11px Arial, Helvetica, sans-serif;
}

.dashboard-chart-linea {
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
}

.dashboard-chart-punto {
    stroke: var(--unchained-bianco);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition: r 0.15s ease;
}

.dashboard-chart-punto:hover,
.dashboard-chart-punto:focus {
    r: 7;
    outline: none;
}

.dashboard-grafico-nota {
    margin: 6px 0 0;
    color: var(--unchained-testo-soft);
    font: 0.72rem Arial, Helvetica, sans-serif;
}

.dashboard-donut-layout {
    display: grid;
    grid-template-columns: minmax(150px, 0.75fr) minmax(170px, 1fr);
    align-items: center;
    gap: 14px;
}

.dashboard-grafico-anello {
    min-height: 210px;
}

.dashboard-grafico-anello svg {
    display: block;
    width: 100%;
    max-height: 230px;
    transform: rotate(-90deg);
}

.dashboard-donut-base,
.dashboard-donut-segmento {
    fill: none;
    stroke-width: 22;
    vector-effect: non-scaling-stroke;
}

.dashboard-donut-base {
    stroke: #e5e7eb;
}

.dashboard-donut-segmento {
    cursor: pointer;
    transition: stroke-width 0.15s ease, opacity 0.15s ease;
}

.dashboard-donut-segmento:hover,
.dashboard-donut-segmento:focus {
    stroke-width: 27;
    opacity: 0.9;
    outline: none;
}

.dashboard-donut-totale,
.dashboard-donut-etichetta {
    transform: rotate(90deg);
    transform-origin: 90px 90px;
    fill: var(--unchained-blu);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
}

.dashboard-donut-totale { font-size: 28px; }
.dashboard-donut-etichetta { font-size: 11px; fill: var(--unchained-testo-soft); }

.dashboard-priorita-legenda {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dashboard-priorita-legenda button {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 8px 10px 8px 13px;
    border: 1px solid var(--unchained-bordo);
    border-left: 4px solid var(--colore-priorita, #718096);
    border-radius: 9px;
    background: var(--unchained-sfondo);
    color: var(--unchained-testo);
    cursor: help;
    font: 0.78rem Arial, Helvetica, sans-serif;
    text-align: left;
}

.dashboard-priorita-legenda small {
    grid-column: 1 / -1;
    color: var(--unchained-testo-soft);
}

.dashboard-gruppi-lista,
.dashboard-elementi-operativi {
    display: flex;
    flex: 1;
    min-height: 0;
    max-height: none;
    padding-right: 5px;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dashboard-pannello-gruppi,
.dashboard-pannello-operativo {
    display: flex;
    flex-direction: column;
    height: 390px;
    min-height: 390px;
}

.dashboard-pannello-gruppi .dashboard-pannello-testa,
.dashboard-pannello-operativo .dashboard-pannello-testa {
    flex: 0 0 auto;
}

.dashboard-gruppo-riga {
    display: block;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 10px;
    background: var(--unchained-sfondo);
    color: var(--unchained-testo);
    cursor: help;
    font: 0.76rem Arial, Helvetica, sans-serif;
    text-align: left;
}

.dashboard-gruppo-testa {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-gruppo-testa b {
    color: var(--unchained-blu-acceso);
}

.dashboard-gruppo-barra {
    display: block;
    height: 6px;
    margin: 7px 0 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #dedede;
}

.dashboard-gruppo-barra i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1D326A, #405184);
}

.dashboard-gruppo-riga small {
    color: var(--unchained-testo-soft);
}

.dashboard-elemento-operativo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 10px;
    background: var(--unchained-sfondo);
    color: inherit;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.dashboard-elemento-operativo:hover,
.dashboard-elemento-operativo:focus-visible {
    transform: translateX(2px);
    border-color: var(--unchained-blu-acceso);
    outline: none;
}

.dashboard-elemento-tipo {
    padding: 5px 6px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
}

.dashboard-elemento-tipo-ticket { background: #1D326A; }
.dashboard-elemento-tipo-problem { background: #405184; }

.dashboard-elemento-corpo {
    min-width: 0;
}

.dashboard-elemento-corpo strong,
.dashboard-elemento-corpo small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-elemento-corpo strong {
    font-size: 0.76rem;
}

.dashboard-elemento-corpo small {
    margin-top: 3px;
    color: var(--unchained-testo-soft);
    font-size: 0.68rem;
}

.dashboard-elemento-eta {
    color: var(--unchained-warning);
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-vuoto,
.dashboard-grafico-senza-dati {
    display: grid;
    min-height: 130px;
    margin: 0;
    place-items: center;
    color: var(--unchained-testo-soft);
    font: 0.82rem Arial, Helvetica, sans-serif;
    text-align: center;
}

.dashboard-stato-vuoto {
    display: grid;
    min-height: 150px;
    padding: 22px;
    place-items: center;
    align-content: center;
    gap: 5px;
    border: 1px dashed var(--unchained-bordo);
    border-radius: 12px;
    background: var(--unchained-sfondo);
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.dashboard-stato-vuoto > span {
    display: grid;
    width: 30px;
    height: 30px;
    margin-bottom: 3px;
    place-items: center;
    border-radius: 50%;
    background: rgba(46, 159, 118, 0.12);
    color: #2e9f76;
    font-weight: 900;
}

.dashboard-stato-vuoto strong {
    color: var(--unchained-testo);
    font-size: 0.86rem;
}

.dashboard-stato-vuoto small {
    font-size: 0.75rem;
}

.dashboard-stato-vuoto-compatto {
    min-height: 118px;
}

.dashboard-sezione-moduli {
    margin-top: 8px;
}

/* Dashboard analitiche dei singoli moduli TKT e PBM. */
.dashboard-modulo-intestazione > div > div {
    min-width: 0;
}

.dashboard-modulo-intestazione p {
    margin: 4px 0 0;
    color: var(--unchained-testo-soft);
    font: 0.78rem Arial, Helvetica, sans-serif;
}

.dashboard-modulo-kpi {
    margin-bottom: 0;
}

.dashboard-modulo-kpi .card-kpi {
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 16px;
}

.dashboard-modulo-kpi .card-kpi-etichetta {
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.dashboard-modulo-kpi .card-kpi-valore {
    font-size: 2.25rem;
}

.dashboard-modulo-principale {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
    gap: 18px;
}

.dashboard-modulo-widget {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 16px;
    background: var(--unchained-bianco);
}

.dashboard-modulo-widget-flusso,
.dashboard-modulo-widget-anzianita {
    display: flex;
    height: 365px;
    min-height: 365px;
    flex-direction: column;
}

.dashboard-modulo-legenda i {
    background: var(--colore-serie);
}

.dashboard-modulo-ticket .dashboard-modulo-legenda-creati {
    --colore-serie: #1D326A;
}

.dashboard-modulo-ticket .dashboard-modulo-legenda-chiusi {
    --colore-serie: #2e9f76;
}

.dashboard-modulo-problem .dashboard-modulo-legenda-creati {
    --colore-serie: #405184;
}

.dashboard-modulo-problem .dashboard-modulo-legenda-chiusi {
    --colore-serie: #625079;
}

.dashboard-modulo-grafico-linee {
    display: grid;
    flex: 1;
    min-height: 0;
    place-items: stretch;
}

.dashboard-modulo-grafico-linee svg {
    display: block;
    width: 100%;
    height: 248px;
    overflow: visible;
}

.dashboard-anzianita-lista {
    display: flex;
    flex: 1;
    min-height: 0;
    padding-right: 5px;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dashboard-anzianita-riga {
    display: grid;
    gap: 5px;
    font-family: Arial, Helvetica, sans-serif;
}

.dashboard-anzianita-riga > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--unchained-testo);
    font-size: 0.76rem;
}

.dashboard-anzianita-riga > span b {
    color: var(--unchained-blu-acceso);
}

.dashboard-modulo-problem .dashboard-anzianita-riga > span b {
    color: #405184;
}

.dashboard-anzianita-riga > i {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #dedede;
}

.dashboard-anzianita-riga > i em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1D326A, #2e9f76);
}

.dashboard-modulo-problem .dashboard-anzianita-riga > i em {
    background: linear-gradient(90deg, #405184, #625079);
}

.dashboard-anzianita-riga small {
    color: var(--unchained-testo-soft);
    font-size: 0.67rem;
    text-align: right;
}

.dashboard-modulo-compatta-griglia {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-modulo-widget-compatto {
    display: flex;
    height: 310px;
    min-height: 310px;
    flex-direction: column;
}

.dashboard-modulo-widget-compatto .grafico-vuoto {
    flex: 1;
    min-height: 0;
}

.dashboard-modulo-widget-compatto .grafico-vuoto-cerchio {
    width: 54px;
    height: 54px;
    margin-bottom: 10px;
    border-width: 8px;
}

.dashboard-modulo-heatmap-pannello {
    display: flex;
    height: 390px;
    min-height: 390px;
    flex-direction: column;
}

.dashboard-modulo-heatmap-contenitore {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--unchained-bordo);
    border-radius: 11px;
}

.dashboard-modulo-heatmap {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 5px;
    font: 0.74rem Arial, Helvetica, sans-serif;
}

.dashboard-modulo-heatmap th {
    padding: 9px;
    background: var(--unchained-sfondo);
    color: var(--unchained-testo);
    text-align: left;
    white-space: nowrap;
}

.dashboard-modulo-heatmap thead th {
    position: sticky;
    z-index: 3;
    top: 0;
    text-align: center;
}

.dashboard-modulo-heatmap thead th:first-child {
    z-index: 5;
    left: 0;
    text-align: left;
}

.dashboard-modulo-heatmap tbody th {
    position: sticky;
    z-index: 2;
    left: 0;
    min-width: 180px;
}

.dashboard-modulo-heatmap td {
    min-width: 92px;
    padding: 0;
}

.dashboard-modulo-heatmap button {
    display: grid;
    width: 100%;
    min-height: 57px;
    padding: 7px;
    place-items: center;
    border: 1px solid var(--dashboard-heatmap-bordo, var(--unchained-bordo));
    border-radius: 8px;
    background: var(--dashboard-heatmap-colore, var(--unchained-sfondo));
    color: var(--unchained-testo);
    cursor: help;
    font: inherit;
}

.dashboard-modulo-heatmap button:hover,
.dashboard-modulo-heatmap button:focus-visible {
    box-shadow: inset 0 0 0 2px var(--unchained-blu-notte);
    outline: none;
}

.dashboard-modulo-heatmap button strong {
    color: var(--unchained-blu-notte);
    font-size: 1rem;
}

.dashboard-modulo-heatmap button small {
    color: var(--unchained-testo-soft);
    font-size: 0.64rem;
}

.dashboard-modulo-heatmap-totale {
    padding: 9px !important;
    background: var(--unchained-sfondo);
    color: var(--unchained-blu-notte);
    text-align: center;
}

.dashboard-tooltip {
    position: fixed;
    z-index: 200;
    display: flex;
    max-width: min(310px, calc(100vw - 24px));
    padding: 10px 12px;
    flex-direction: column;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 9px;
    background: #25272b;
    color: #fff;
    box-shadow: var(--unchained-ombra-scura);
    pointer-events: none;
    font: 0.74rem Arial, Helvetica, sans-serif;
}

.dashboard-tooltip[hidden] {
    display: none;
}

.dashboard-tooltip strong {
    margin-bottom: 3px;
    color: var(--unchained-ciano-chiaro);
}

.dashboard-tooltip-fissato {
    border-color: var(--unchained-ciano);
}

@media (max-width: 1450px) {
    .dashboard-operativa-kpi {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
    }
}

@media (max-width: 1150px) {
    .dashboard-analisi-griglia {
        grid-template-columns: 1fr;
    }

    .dashboard-modulo-principale {
        grid-template-columns: 1fr;
    }

    .dashboard-modulo-compatta-griglia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-operativa-kpi {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 760px) {
    .intestazione-pagina:has(.dashboard-periodo),
    .dashboard-sezione-testa,
    .dashboard-pannello-testa {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-periodo {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-periodo-date {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-periodo-date label {
        justify-content: space-between;
    }

    .dashboard-periodo-applica {
        width: 100%;
    }

    .dashboard-operativa-kpi {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .dashboard-donut-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-legenda {
        justify-content: flex-start;
    }

    .dashboard-modulo-compatta-griglia {
        grid-template-columns: 1fr;
    }

    .dashboard-modulo-intestazione {
        align-items: stretch;
        flex-direction: column;
    }
}

/* =========================================================
   SLA / ANALISI
   ========================================================= */

.sla-analisi-intestazione {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.sla-analisi-blocco {
    margin-bottom: 24px;
}

.sla-analisi-kpi,
.sla-performance-kpi {
    display: grid;
    gap: 12px;
}

.sla-analisi-kpi {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.sla-performance-kpi {
    grid-template-columns: repeat(6, minmax(125px, 1fr));
}

.sla-analisi-card,
.sla-performance-kpi article {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--unchained-bordo);
    border-top: 3px solid var(--sla-card-colore, #718096);
    border-radius: 13px;
    background: var(--unchained-bianco);
    box-shadow: var(--unchained-ombra-piccola);
    font-family: Arial, Helvetica, sans-serif;
}

.sla-analisi-card span,
.sla-performance-kpi span {
    display: block;
    min-height: 2.2em;
    color: var(--unchained-testo-soft);
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.15;
}

.sla-analisi-card strong,
.sla-performance-kpi strong {
    display: block;
    margin-top: 8px;
    color: var(--sla-card-colore, var(--unchained-blu));
    font-size: clamp(1.5rem, 2vw, 2.15rem);
    line-height: 1;
}

.sla-performance-kpi article > small {
    display: block;
    margin-top: 7px;
    color: var(--unchained-testo-soft);
    font-size: 0.66rem;
    line-height: 1.2;
}

.sla-analisi-card-regolare { --sla-card-colore: #2e9f76; }
.sla-analisi-card-attenzione { --sla-card-colore: #d69b26; }
.sla-analisi-card-violato { --sla-card-colore: #d85662; }
.sla-analisi-card-eccezione { --sla-card-colore: #405184; }
.sla-analisi-card-configurare { --sla-card-colore: #718096; }

.sla-performance-conformita {
    --sla-card-colore: var(--unchained-blu-acceso);
}

.sla-analisi-griglia {
    display: grid;
    grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.45fr);
    align-items: start;
    gap: 20px;
    margin-bottom: 20px;
}

.sla-distribuzione-aperti {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sla-distribuzione-sintesi {
    padding: 13px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 11px;
    background: var(--unchained-sfondo);
}

.sla-distribuzione-totale {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
}

.sla-distribuzione-totale strong {
    color: var(--unchained-blu);
    font-size: 1.7rem;
    line-height: 1;
}

.sla-distribuzione-totale span {
    color: var(--unchained-testo-soft);
    font-size: 0.76rem;
    font-weight: 700;
}

.sla-distribuzione-barra {
    display: flex;
    height: 12px;
    margin-top: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: #dedede;
}

.sla-distribuzione-barra button {
    flex: var(--sla-peso) 1 0;
    min-width: 4px;
    padding: 0;
    border: 0;
    border-right: 2px solid var(--unchained-bianco);
    background: var(--sla-colore);
    cursor: help;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.sla-distribuzione-barra button:last-child {
    border-right: 0;
}

.sla-distribuzione-barra button:hover,
.sla-distribuzione-barra button:focus-visible {
    z-index: 1;
    filter: brightness(0.9);
    outline: 2px solid var(--unchained-blu-notte);
    outline-offset: -2px;
}

.sla-analisi-legenda-stati {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sla-analisi-legenda-stati button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 3px 8px;
    padding: 8px 9px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 9px;
    background: var(--unchained-sfondo);
    color: var(--unchained-testo);
    cursor: help;
    font: 0.76rem Arial, Helvetica, sans-serif;
    text-align: left;
}

.sla-distribuzione-riga-barra {
    grid-column: 2 / -1;
    display: block;
    height: 4px;
    margin-top: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: #dedede;
}

.sla-distribuzione-riga-barra i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--sla-colore);
}

.sla-analisi-legenda-stati i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--sla-colore);
}

.sla-analisi-legenda-stati strong {
    color: var(--sla-colore);
}

.sla-analisi-legenda-stati small {
    grid-column: 2 / -1;
    color: var(--unchained-testo-soft);
}

.sla-analisi-tabella-pannello {
    display: flex;
    flex-direction: column;
    height: 360px;
    min-height: 360px;
    margin-bottom: 0;
    padding: 18px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 16px;
    background: var(--unchained-bianco);
}

.sla-analisi-tabella-contenitore {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--unchained-bordo);
    border-radius: 11px;
}

.sla-analisi-tabella {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
}

.sla-analisi-tabella th,
.sla-analisi-tabella td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--unchained-bordo);
    text-align: right;
    white-space: nowrap;
}

.sla-analisi-tabella th:first-child,
.sla-analisi-tabella td:first-child {
    text-align: left;
}

.sla-analisi-tabella thead th {
    position: sticky;
    top: 0;
    z-index: 2;

    background: var(--unchained-blu-notte);
    color: #fff;
    font-size: 0.69rem;
    letter-spacing: 0.02em;
}

.sla-analisi-tabella tbody tr:last-child > * {
    border-bottom: 0;
}

.sla-analisi-tabella tbody tr:hover {
    background: rgba(200, 63, 136, 0.07);
}

.sla-analisi-tabella td strong {
    color: var(--unchained-blu-acceso);
}

.sla-conformita-grafica {
    position: relative;
    display: inline-flex;
    min-width: 92px;
    height: 23px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: #e1e1e1;
}

.sla-conformita-grafica i {
    position: absolute;
    inset: 0 auto 0 0;
    background: rgba(46, 159, 118, 0.24);
}

.sla-conformita-grafica strong {
    position: relative;
    z-index: 1;
    color: #246f56 !important;
}

.sla-analisi-priorita {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1;
    min-height: 0;
    align-content: start;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 7px;
}

.sla-widget-tempi-griglia,
.sla-analisi-compatta-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.sla-analisi-compatta-griglia {
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
}

.sla-widget-tempi {
    display: flex;
    height: 410px;
    min-height: 410px;
    flex-direction: column;
}

.sla-widget-selettore {
    display: grid;
    gap: 5px;
    color: var(--unchained-testo-soft);
    font: 800 0.68rem Arial, Helvetica, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sla-widget-selettore select {
    min-height: 36px;
    padding: 7px 28px 7px 9px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 8px;
    background: var(--unchained-sfondo);
    color: var(--unchained-testo);
    font: 700 0.76rem Arial, Helvetica, sans-serif;
}

.sla-istogramma,
.sla-scatter {
    flex: 1;
    min-height: 0;
}

.sla-istogramma svg,
.sla-scatter svg {
    display: block;
    width: 100%;
    height: 270px;
    overflow: visible;
}

.sla-istogramma-barra {
    fill: var(--unchained-blu-acceso);
    cursor: help;
    transition: fill 0.15s ease, opacity 0.15s ease;
}

.sla-istogramma-barra:hover,
.sla-istogramma-barra:focus {
    fill: var(--unchained-ciano);
    opacity: 0.9;
    outline: none;
}

.sla-istogramma-valore {
    fill: var(--unchained-blu);
    font: 800 11px Arial, Helvetica, sans-serif;
}

.sla-scatter-punto {
    stroke: var(--unchained-bianco);
    stroke-width: 1.7;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    opacity: 0.8;
    transition: r 0.15s ease, opacity 0.15s ease;
}

.sla-scatter-punto:hover,
.sla-scatter-punto:focus {
    r: 7;
    opacity: 1;
    outline: none;
}

.sla-scatter-fuori-scala {
    stroke: var(--unchained-blu-notte);
    stroke-width: 2.4;
}

.sla-scatter-asse-titolo {
    fill: var(--unchained-testo-soft);
    font: 800 10px Arial, Helvetica, sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sla-heatmap-pannello {
    display: flex;
    height: 430px;
    min-height: 430px;
    margin-bottom: 20px;
    padding: 20px;
    flex-direction: column;
    border: 1px solid var(--unchained-bordo);
    border-radius: 16px;
    background: var(--unchained-bianco);
}

.sla-heatmap-contenitore {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--unchained-bordo);
    border-radius: 11px;
}

.sla-heatmap-tabella {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 5px;
    background: var(--unchained-sfondo);
    font-family: Arial, Helvetica, sans-serif;
}

.sla-heatmap-tabella th {
    min-width: 116px;
    padding: 9px 10px;
    color: var(--unchained-testo-soft);
    font-size: 0.7rem;
    text-align: center;
}

.sla-heatmap-tabella thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--unchained-blu-notte);
    color: var(--unchained-bianco);
}

.sla-heatmap-tabella thead th:first-child {
    left: 0;
    z-index: 5;
}

.sla-heatmap-tabella tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    max-width: 190px;
    overflow: hidden;
    background: var(--unchained-bianco);
    color: var(--unchained-testo);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sla-heatmap-tabella td {
    min-width: 116px;
    padding: 0;
}

.sla-heatmap-tabella button {
    display: grid;
    width: 100%;
    min-height: 62px;
    padding: 8px;
    place-items: center;
    gap: 3px;
    border: 1px solid var(--sla-heatmap-bordo, var(--unchained-bordo));
    border-radius: 8px;
    background: var(--sla-heatmap-colore, #e5e7eb);
    color: var(--unchained-testo);
    cursor: help;
    font: inherit;
}

.sla-heatmap-tabella button:hover,
.sla-heatmap-tabella button:focus-visible {
    box-shadow: inset 0 0 0 2px var(--unchained-blu-notte);
    outline: none;
}

.sla-heatmap-tabella button strong {
    color: var(--unchained-blu-notte);
    font-size: 1rem;
}

.sla-heatmap-tabella button small {
    color: var(--unchained-testo-soft);
    font-size: 0.65rem;
}

/* Scrollbar compatte e coerenti per tutti gli elenchi analitici. */
.dashboard-riepilogo,
.dashboard-gruppi-lista,
.dashboard-elementi-operativi,
.dashboard-anzianita-lista,
.dashboard-modulo-heatmap-contenitore,
.sla-analisi-tabella-contenitore,
.sla-analisi-priorita,
.sla-heatmap-contenitore {
    scrollbar-width: thin;
    scrollbar-color: var(--unchained-ciano) #DEDEDE;
}

.dashboard-riepilogo::-webkit-scrollbar,
.dashboard-gruppi-lista::-webkit-scrollbar,
.dashboard-elementi-operativi::-webkit-scrollbar,
.dashboard-anzianita-lista::-webkit-scrollbar,
.dashboard-modulo-heatmap-contenitore::-webkit-scrollbar,
.sla-analisi-tabella-contenitore::-webkit-scrollbar,
.sla-analisi-priorita::-webkit-scrollbar,
.sla-heatmap-contenitore::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.dashboard-riepilogo::-webkit-scrollbar-track,
.dashboard-gruppi-lista::-webkit-scrollbar-track,
.dashboard-elementi-operativi::-webkit-scrollbar-track,
.dashboard-anzianita-lista::-webkit-scrollbar-track,
.dashboard-modulo-heatmap-contenitore::-webkit-scrollbar-track,
.sla-analisi-tabella-contenitore::-webkit-scrollbar-track,
.sla-analisi-priorita::-webkit-scrollbar-track,
.sla-heatmap-contenitore::-webkit-scrollbar-track {
    background: #DEDEDE;
    border-radius: 999px;
}

.dashboard-riepilogo::-webkit-scrollbar-thumb,
.dashboard-gruppi-lista::-webkit-scrollbar-thumb,
.dashboard-elementi-operativi::-webkit-scrollbar-thumb,
.dashboard-anzianita-lista::-webkit-scrollbar-thumb,
.dashboard-modulo-heatmap-contenitore::-webkit-scrollbar-thumb,
.sla-analisi-tabella-contenitore::-webkit-scrollbar-thumb,
.sla-analisi-priorita::-webkit-scrollbar-thumb,
.sla-heatmap-contenitore::-webkit-scrollbar-thumb {
    background: var(--unchained-ciano);
    border: 2px solid #DEDEDE;
    border-radius: 999px;
}

.sla-analisi-priorita article {
    padding: 13px;
    border: 1px solid var(--unchained-bordo);
    border-radius: 11px;
    background: var(--unchained-sfondo);
    font-family: Arial, Helvetica, sans-serif;
}

.sla-analisi-priorita header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.sla-analisi-priorita header span,
.sla-analisi-priorita footer,
.sla-analisi-priorita small {
    color: var(--unchained-testo-soft);
    font-size: 0.7rem;
}

.sla-analisi-priorita-barre span {
    display: block;
    height: 7px;
    margin: 11px 0 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #dcdcdc;
}

.sla-analisi-priorita-barre i {
    display: block;
    min-width: 2px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--unchained-ciano), #d85662);
}

.sla-analisi-priorita footer {
    margin-top: 8px;
}

@media (max-width: 1400px) {
    .sla-performance-kpi {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 1150px) {
    .sla-analisi-griglia {
        grid-template-columns: 1fr;
    }

    .sla-analisi-kpi {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .sla-widget-tempi-griglia,
    .sla-analisi-compatta-griglia {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .sla-analisi-intestazione {
        align-items: stretch;
        flex-direction: column;
    }

    .sla-analisi-kpi,
    .sla-performance-kpi,
    .sla-analisi-priorita {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .sla-widget-tempi {
        height: 390px;
        min-height: 390px;
    }

}

.sla-tabella tbody tr.sla-riga-attenzione:hover > td {
    background: #ffefad;
}

.sla-ticket-link {
    display: block;
    color: var(--unchained-ciano);
    font-weight: 900;
    text-decoration: none;
}

.sla-ticket-titolo {
    display: block;
    max-width: 280px;
    margin-top: 4px;
    overflow: hidden;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sla-stato {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(111, 112, 116, 0.12);
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
}

.sla-stato-rispettato,
.sla-stato-in_corso {
    background: rgba(79, 125, 97, 0.14);
    color: var(--unchained-successo);
}

.sla-stato-attenzione {
    background: rgba(185, 106, 31, 0.14);
    color: var(--unchained-warning);
}

.sla-stato-violato {
    background: rgba(169, 68, 66, 0.14);
    color: var(--unchained-danger);
}

.sla-stato-incompleto,
.sla-stato-non_configurato,
.sla-stato-non_soggetto,
.sla-stato-non_iniziato,
.sla-stato-sospeso {
    background: rgba(111, 112, 116, 0.13);
    color: var(--unchained-testo-soft);
}

.sla-nota-stato {
    display: block;
    max-width: 210px;
    margin-top: 5px;
    color: var(--unchained-testo-soft);
}

.sla-tabella-vuota {
    padding: 32px !important;
    color: var(--unchained-testo-soft);
    text-align: center !important;
}

.sla-paginazione {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
    color: var(--unchained-testo-soft);
}

.sla-paginazione a {
    color: var(--unchained-ciano);
    font-weight: 800;
    text-decoration: none;
}

.sla-griglia-gruppi {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 18px;
}

.sla-card-gruppo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.sla-card-gruppo h4,
.sla-form h4 {
    margin: 0 0 5px;
    color: var(--unchained-blu);
    font-size: 1.08rem;
}

.sla-card-gruppo p,
.sla-card-gruppo small {
    margin: 0;
    color: var(--unchained-testo-soft);
}

.sla-configurazione-mancante,
.sla-errore {
    color: var(--unchained-danger) !important;
}

.sla-politiche-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(360px, 1.25fr);
    gap: 28px;
}

.sla-form {
    display: grid;
    align-content: start;
    gap: 14px;
}

.sla-campo {
    display: grid;
    gap: 6px;
}

.sla-campo small {
    color: var(--unchained-testo-soft);
    line-height: 1.35;
}

.sla-campo-check {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.sla-campo-check input {
    width: 18px;
    height: 18px;
    grid-column: 1;
    grid-row: 1;
    accent-color: var(--unchained-ciano);
}

.sla-campo-check label {
    grid-column: 2;
    grid-row: 1;
}

.sla-campo-check small {
    grid-column: 1 / -1;
}

.sla-elenco-politiche {
    display: grid;
    align-content: start;
    gap: 10px;
}

.sla-elenco-politiche article {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) repeat(3, auto);
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(35, 36, 39, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.48);
}

.sla-elenco-politiche span {
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
}

.sla-calendario-layout {
    display: grid;
    grid-template-columns: minmax(270px, 0.7fr) minmax(0, 1.5fr);
    gap: 24px;
    align-items: start;
}

.sla-calendario-contenuto {
    display: grid;
    gap: 24px;
}

.sla-elenco-versioni {
    display: grid;
    gap: 9px;
}

.sla-elenco-versioni a {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid rgba(35, 36, 39, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.43);
    color: var(--unchained-testo);
    text-decoration: none;
}

.sla-elenco-versioni a.attiva {
    border-color: rgba(200, 63, 136, 0.55);
    box-shadow: inset 0 0 0 1px rgba(200, 63, 136, 0.13);
}

.sla-elenco-versioni span,
.sla-elenco-versioni small {
    color: var(--unchained-testo-soft);
}

.sla-form-separato {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(35, 36, 39, 0.1);
}

.sla-form-nota {
    margin: 0;
    color: var(--unchained-testo-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.sla-form-riga {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 12px;
}

.sla-giorni-check {
    display: grid;
    gap: 9px;
}

.sla-giorni-check ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sla-giorni-check label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.56);
    cursor: pointer;
}

.sla-giorni-check input {
    accent-color: var(--unchained-ciano);
}

.sla-fasce-elenco,
.sla-chiusure-elenco {
    display: grid;
    gap: 8px;
}

.sla-fasce-elenco article,
.sla-chiusure-elenco article {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(35, 36, 39, 0.08);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.48);
}

.sla-chiusure-elenco article {
    grid-template-columns: auto auto minmax(120px, 1fr) auto;
}

.sla-pulsante-rimuovi {
    padding: 6px 9px;
    border: 0;
    border-radius: 8px;
    background: rgba(169, 68, 66, 0.11);
    color: var(--unchained-danger);
    font-weight: 800;
    cursor: pointer;
}

.sla-ticket-riepilogo {
    margin-top: 24px;
}

.sla-ticket-metriche {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
}

.sla-ticket-metriche article {
    display: grid;
    gap: 5px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.46);
}

.sla-ticket-metriche span,
.sla-ticket-metriche small {
    color: var(--unchained-testo-soft);
}

.sla-ticket-metriche strong {
    color: var(--unchained-blu);
    font-size: 1.24rem;
}

.sla-ticket-periodi {
    display: grid;
    gap: 7px;
    margin-top: 16px;
}

.sla-ticket-periodi article {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(250px, 1.5fr) auto;
    gap: 14px;
    padding: 10px 12px;
    border-top: 1px solid rgba(35, 36, 39, 0.08);
}

.sla-ticket-periodi span {
    color: var(--unchained-testo-soft);
}

.sla-live-config[hidden] {
    display: none !important;
}

.sla-metrica-live > strong,
.sla-metrica-live > small {
    display: block;
}

.sla-metrica-live > strong,
.sla-ticket-metriche strong[data-sla-tempo] {
    color: var(--unchained-blu);
    font-family: "Courier New", Courier, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sla-metrica-live > small {
    margin: 4px 0 7px;
    color: var(--unchained-testo-soft);
    font-size: 0.75rem;
    white-space: nowrap;
}

.sla-barre-compatte {
    display: grid;
    width: 100%;
    height: 6px;
    gap: 2px;
}

.sla-barra-traccia {
    display: block;
    width: 100%;
    height: 2px;
    overflow: hidden;
    background: rgba(111, 112, 116, 0.18);
    cursor: help;
}

.sla-barra-valore {
    display: block;
    width: 0;
    height: 2px;
    background: var(--unchained-successo);
    transition:
        width 0.35s linear,
        background-color 0.2s ease;
}

.sla-barra-valore[data-sla-livello="regolare"] {
    background: var(--unchained-successo);
}

.sla-barra-valore[data-sla-livello="attenzione"] {
    background: #D4A017;
}

.sla-barra-valore[data-sla-livello="critico"] {
    background: var(--unchained-danger);
}

.sla-barra-valore[data-sla-livello="violato"] {
    background: #74439A;
}

.sla-barra-valore[data-sla-livello="neutro"] {
    background: var(--unchained-testo-soft);
}

@media (max-width: 1100px) {
    .sla-griglia-gruppi,
    .sla-politiche-layout,
    .sla-calendario-layout {
        grid-template-columns: 1fr;
    }

    .sla-ticket-metriche {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .sla-intestazione,
    .sla-sezione-header {
        align-items: stretch;
        flex-direction: column;
    }

    .sla-kpi {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

    .sla-form-riga {
        grid-template-columns: 1fr;
    }

    .sla-monitor-tabella {
        height: 360px;
    }

    .sla-card-gruppo,
    .sla-fasce-elenco article,
    .sla-chiusure-elenco article,
    .sla-ticket-periodi article {
        grid-template-columns: 1fr;
    }
}

/* Specificità finale per neutralizzare lo stile del vecchio form inline. */
.work-info-form.work-info-form-modale {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

/* =========================================================
   SISTEMA OMBRE NETTE

   Questa sezione centralizza la resa delle ombre senza rinominare le classi
   storiche (alcune mantengono "neon" nel nome per compatibilità). Le regole
   sono poste in fondo al foglio per sostituire in modo uniforme i precedenti
   doppi aloni neumorfici, senza alterare dimensioni, layout o comportamento.
   ========================================================= */

/* Superfici principali e pannelli flottanti. */
.barra-superiore {
    box-shadow: var(--unchained-ombra-scura);
}

.card-neumorfica,
.tabella-wrapper,
.login-card,
.account-menu-dropdown,
.ticket-raggruppamento-intestazione,
.relazione-risultati-ricerca,
.mappa-relazioni-editor {
    box-shadow: var(--unchained-ombra-grande);
}

/* Card secondarie, record e nodi delle mappe. */
.account-profile-avatar,
.storico-processo-record,
.relazione-ticket-card,
.mappa-relazioni-nodo,
.problem-mappa-nodo,
.evento-notifica-card,
.messaggio-applicazione,
.sla-kpi-card-attenzione.sla-kpi-card-attiva {
    box-shadow: var(--unchained-ombra-media);
}

/* Controlli azionabili in posizione di riposo. */
.neon-button,
.login-button,
.work-info-modale-chiudi,
.azioni-operative-toggle,
.azione-operativa-elemento,
.pannello-operativo-chiudi,
.storico-processo-pulsante,
.switch-visibilita-button,
.work-info-deseleziona-gruppi,
.selettore-tutte-lette {
    box-shadow: var(--unchained-ombra-piccola);
}

/* Hover e focus sollevano appena il controllo, senza produrre un alone. */
.azione-operativa-elemento:hover,
.azione-operativa-elemento:focus-visible,
.azione-operativa-elemento.attiva,
.mappa-relazioni-nodo:focus-visible {
    box-shadow:
        var(--unchained-ombra-media),
        var(--unchained-anello-accento);
}

/* Campi e aree incassate: ombra corta, solo sul bordo superiore interno. */
.grafico-vuoto,
.form-controllo,
.area-allegati,
.login-input,
.ticket-descrizione-scroll,
.work-info-elemento,
.allegato-elemento,
.switch-visibilita-track,
.work-info-gruppi-esclusi,
.relazioni-ticket-cronologia-box,
.filtri-notifiche,
.dashboard-barra,
.storico-processo-dati {
    box-shadow: var(--unchained-ombra-interna);
}

/* Focus dei campi: incavo breve più anello esterno privo di blur. */
.form-controllo:focus,
.login-input:focus {
    box-shadow:
        var(--unchained-ombra-interna),
        var(--unchained-anello-focus);
}

/* Stati premuti o espansi. */
.neon-button:active,
.login-button:active,
.account-menu-dropdown a:hover,
.barra-superiore-notifiche.attivo,
.dettaglio-ticket-toggle[aria-expanded="true"],
.azioni-operative-toggle[aria-expanded="true"],
.azione-operativa-elemento.attiva,
.storico-processo-dettagli[open] .storico-processo-pulsante,
.relazioni-ticket-toggle[aria-expanded="true"] {
    box-shadow: var(--unchained-ombra-premuta);
}

/* Selezioni e indicatori: contorni netti al posto dei glow circolari. */
.account-menu-button,
.barra-superiore-notifiche {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.account-menu[open] .account-menu-button,
.barra-superiore-notifiche.attivo {
    box-shadow:
        inset 0 0 0 1px rgba(200, 63, 136, 0.34),
        0 3px 5px rgba(0, 0, 0, 0.20);
}

.account-avatar,
.contatore-notifiche,
.riga-notifica.non-letta .indicatore-notifica,
.sla-elenco-versioni a.attiva {
    box-shadow: var(--unchained-anello-accento);
}

/* Elementi puramente decorativi: niente alone diffuso. */
.dashboard-barra-valore {
    box-shadow: none;
}

.neon-menu-button.attivo {
    text-shadow: none;
}

/* Mantiene netti i due marcatori lineari già presenti nelle tabelle. */
.tabella-wrapper-ticket-scroll .tabella-ticket thead th {
    box-shadow: 0 1px 0 var(--unchained-bordo);
}

.sla-tabella tbody tr.sla-riga-attenzione > td:first-child {
    box-shadow: inset 4px 0 0 #d4a017;
}

/* =========================================================
   IDENTITÀ VISIVA ADAXI / UNCHAINED
   ========================================================= */
.barra-superiore {
    min-height: 140px;
    padding: 18px 26px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 82% 10%, rgba(200, 63, 136, 0.34), transparent 32%),
        linear-gradient(118deg, #22285f 0%, #1D326A 48%, #405184 100%);
    box-shadow: 0 12px 24px rgba(35, 37, 88, 0.30);
}

.barra-superiore-link,
.barra-superiore-logo-link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(340px, 35vw, 520px);
    min-height: 104px;
    padding: 8px 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.19);
    background: linear-gradient(145deg, #111217 0%, #282b32 55%, #17181d 100%);
    text-decoration: none;
    transform: skewX(-10deg);
    filter: drop-shadow(0 9px 8px rgba(12, 13, 26, 0.36));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.62);
}

.barra-superiore-link::after,
.barra-superiore-logo-link::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.08) 48%, transparent 58%);
    content: "";
    pointer-events: none;
}

.barra-superiore-logo {
    width: min(100%, 470px);
    height: 92px;
    max-width: 100%;
    object-fit: contain;
    transform: skewX(10deg);
}

.barra-superiore-sottotitolo {
    padding: 7px 12px;
    border-left: 3px solid rgba(227, 139, 185, 0.78);
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
    letter-spacing: 0.025em;
}

.neon-sidebar-title::before { background: linear-gradient(180deg, #1D326A, #625079); }
.neon-menu-button.attivo { border-left-color: var(--unchained-ciano); }

.neon-button {
    border: 1px solid rgba(45, 60, 134, 0.20);
    background: linear-gradient(135deg, #1D326A 0%, #405184 100%);
    color: #fff;
    box-shadow: 0 4px 8px rgba(45, 60, 134, 0.22);
}
.neon-button:hover,
.neon-button:focus-visible {
    color: #fff;
    outline: none;
    box-shadow: 0 6px 12px rgba(45, 60, 134, 0.28), var(--unchained-anello-focus);
}
.neon-button-secondary {
    border-color: #c9c5d5;
    background: #fff;
    color: var(--unchained-blu-notte);
}
.neon-button-secondary:hover,
.neon-button-secondary:focus-visible {
    background: #f1eef6;
    color: var(--unchained-blu-profondo);
}
.neon-button-danger {
    border-color: rgba(169, 68, 66, 0.32);
    background: #fff5f4;
    color: #8d302e;
}

.login-card-intestazione {
    background: linear-gradient(135deg, #1D2452 0%, #405184 100%);
    border-bottom-color: var(--unchained-ciano);
}
.login-card-logo {
    border-color: rgba(227, 139, 185, 0.56);
    background: #15161b;
}

.barra-superiore-notifiche {
    border-color: rgba(227, 139, 185, 0.30);
}
.barra-superiore-notifiche:hover,
.barra-superiore-notifiche:focus-visible,
.barra-superiore-notifiche.attivo {
    border-color: rgba(227, 139, 185, 0.68);
    color: #f2c3dc;
    box-shadow: inset 0 0 0 1px rgba(200, 63, 136, 0.16), 0 4px 8px rgba(20, 18, 54, 0.20);
}
.barra-superiore-notifiche-icona {
    background: rgba(200, 63, 136, 0.20);
    color: #f2c3dc;
}

/* Footer applicativo condiviso. */
.footer-prodotto {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    margin: 24px 4px 0;
    padding: 7px 10px;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.76rem;
    letter-spacing: 0.025em;
    text-align: right;
}
.footer-prodotto strong { color: var(--unchained-blu-notte); }

/* =========================================================
   ESPORTAZIONE AVANZATA DELLO STORICO
   ========================================================= */
.intestazione-pagina-con-azioni {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}
.intestazione-pagina-con-azioni > div { min-width: 0; }

.storico-export-modale { z-index: 1250; }
.storico-export-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1220px, calc(100vw - 40px));
    max-height: calc(100vh - 34px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #d8d4e1;
    border-radius: 16px;
    background: #f7f6fa;
}
.storico-export-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    background: linear-gradient(120deg, #1D2452 0%, #1D326A 50%, #405184 100%);
    color: #fff;
}
.storico-export-header h3 { margin: 3px 0 5px; color: #fff; font-size: 1.45rem; }
.storico-export-header p { margin: 0; color: rgba(255,255,255,.76); }
.storico-export-header .pannello-operativo-kicker { color: #f0bdd9; }
.storico-export-header .work-info-modale-chiudi {
    background: rgba(255,255,255,.12);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.storico-export-form { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.storico-export-scroll {
    display: grid;
    gap: 16px;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.storico-export-step {
    overflow: hidden;
    border: 1px solid #dad6e2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 7px rgba(45, 60, 134, .09);
}
.storico-export-step > header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e0dce6;
    background: #f5f3f8;
}
.storico-export-step > header > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1D326A, #405184);
    color: #fff;
    font: 800 .72rem/1 Arial, Helvetica, sans-serif;
}
.storico-export-step h4 { margin: 0; color: var(--unchained-blu-notte); }
.storico-export-step header p { margin: 3px 0 0; color: var(--unchained-testo-soft); }
.storico-export-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}
.storico-export-scope label {
    display: flex;
    gap: 10px;
    padding: 14px;
    border: 1px solid #d8d4e1;
    border-radius: 8px;
    background: #faf9fc;
    cursor: pointer;
}
.storico-export-scope label:has(input:checked) {
    border-color: #8f75a0;
    background: #f2eaf6;
    box-shadow: inset 0 0 0 1px rgba(116, 59, 133, .16);
}
.storico-export-scope span { display: grid; gap: 3px; }
.storico-export-scope small { color: var(--unchained-testo-soft); }
.storico-export-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 13px;
    padding: 16px;
}
.storico-export-wide { grid-column: span 2; }
.storico-export-date-details { margin: 0 16px 16px; border: 1px solid #ddd9e5; border-radius: 7px; }
.storico-export-date-details summary { padding: 11px 13px; background: #f6f4f8; color: var(--unchained-blu-notte); font-weight: 800; cursor: pointer; }
.storico-export-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; padding: 14px; }
.storico-export-dates fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; padding: 12px; border: 1px solid #ddd9e5; }
.storico-export-dates legend { padding: 0 5px; color: var(--unchained-blu-notte); font-weight: 800; }
.storico-export-dates label { display: grid; gap: 5px; color: var(--unchained-testo-soft); font-size: .82rem; font-weight: 700; }
.storico-export-column-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 13px 16px;
    border-bottom: 1px solid #e3dfe8;
    background: #fbfafc;
}
.storico-export-column-toolbar button {
    padding: 7px 10px;
    border: 1px solid #cbc6d4;
    border-radius: 5px;
    background: #fff;
    color: var(--unchained-blu-notte);
    font: 700 .79rem Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.storico-export-column-toolbar button:hover { border-color: var(--unchained-blu-profondo); background: #f1eef6; }
.storico-export-column-toolbar strong { margin-left: auto; color: var(--unchained-testo-soft); font-size: .82rem; }
.storico-export-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    max-height: 245px;
    padding: 14px 16px;
    overflow-y: auto;
}
.storico-export-columns label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #dedbe4;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}
.storico-export-columns label:has(input:checked) { border-color: #9b7dab; background: #f3ebf6; color: #4c2b5b; font-weight: 700; }
.storico-export-order-preview {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    padding: 16px;
}
.storico-export-order-preview .form-gruppo { width: min(100%, 430px); }
.storico-export-preview-placeholder {
    display: grid;
    gap: 4px;
    margin: 0 16px 16px;
    padding: 26px;
    border: 1px dashed #bbb5c5;
    border-radius: 6px;
    color: var(--unchained-testo-soft);
    text-align: center;
}
.storico-export-preview { display: grid; gap: 14px; padding: 0 16px 16px; }
.storico-export-preview-total { display: flex; align-items: baseline; gap: 8px; padding: 12px; background: #f1eef6; }
.storico-export-preview-total strong { color: var(--unchained-blu-notte); font-size: 1.5rem; }
.storico-export-preview-total span { color: var(--unchained-testo-soft); }
.storico-export-preview-section { border: 1px solid #ddd9e5; border-radius: 6px; overflow: hidden; }
.storico-export-preview-section > header { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; background: #f6f4f8; }
.storico-export-preview-section > header span { color: var(--unchained-testo-soft); }
.storico-export-preview-scroll { overflow: auto; max-height: 250px; }
.storico-export-preview table { min-width: 860px; width: 100%; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: .78rem; }
.storico-export-preview th,
.storico-export-preview td { padding: 8px 9px; border-right: 1px solid #e1dde7; border-bottom: 1px solid #e1dde7; text-align: left; white-space: nowrap; }
.storico-export-preview th { position: sticky; top: 0; background: var(--unchained-blu-notte); color: #fff; }
.storico-export-preview-empty { margin: 0; padding: 18px; color: var(--unchained-testo-soft); text-align: center; }
.storico-export-error { margin: 0 18px 12px; }
.storico-export-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid #dcd8e3;
    background: #f1eff5;
}

@media (max-width: 1050px) {
    .barra-superiore { flex-wrap: wrap; }
    .barra-superiore-sottotitolo { order: 3; width: 100%; }
    .storico-export-filters { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .storico-export-dates { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .barra-superiore-link,
    .barra-superiore-logo-link {
        min-width: min(100%, 330px);
        min-height: 72px;
        padding: 6px 20px;
        transform: none;
    }
    .barra-superiore-logo { height: 58px; transform: none; }
    .intestazione-pagina-con-azioni,
    .storico-export-header,
    .storico-export-order-preview,
    .storico-export-actions { align-items: stretch; flex-direction: column; }
    .storico-export-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
    .storico-export-scope,
    .storico-export-filters { grid-template-columns: 1fr; }
    .storico-export-wide { grid-column: auto; }
    .storico-export-dates fieldset { grid-template-columns: 1fr; }
    .storico-export-order-preview .form-gruppo { width: 100%; }
    .storico-export-actions .neon-button { width: 100%; }
    .footer-prodotto { justify-content: center; text-align: center; }
}


/* Il footer resta realmente in fondo alla pagina senza creare una seconda
   schermata vuota; sui contenuti lunghi segue naturalmente il documento. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > .pagina {
    min-height: 0;
    flex: 1 0 auto;
}
.pagina-login .login-layout {
    min-height: 0;
    flex: 1 0 auto;
}
.pagina-login .login-accesso { min-height: 0; }
.footer-prodotto { flex: 0 0 auto; }

/* =========================================================
   REVISIONE 29 — HEADER E LOGIN SOBRI
   ========================================================= */

/* Barra superiore: superficie più istituzionale, meno decorativa. */
.barra-superiore {
    min-height: 116px;
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    background:
        linear-gradient(112deg, #171C42 0%, #1D326A 61%, #4A2E5B 100%);
    box-shadow:
        0 10px 24px rgba(31, 37, 75, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Il link non è più un pannello nero: funge soltanto da supporto 3D del logo. */
.barra-superiore-link,
.barra-superiore-logo-link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(300px, 31vw, 460px);
    min-height: 82px;
    padding: 4px 22px 7px;
    overflow: visible;
    border: 0;
    background: transparent;
    text-decoration: none;
    transform: skewX(-8deg) translateY(-2px);
    filter: none;
    box-shadow: none;
}

/* Sottile base a parallelogramma: dà profondità senza creare un riquadro. */
.barra-superiore-link::before,
.barra-superiore-logo-link::before {
    position: absolute;
    z-index: -2;
    inset: 16px 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
    box-shadow:
        0 8px 0 rgba(17, 21, 48, 0.48),
        0 12px 18px rgba(14, 17, 39, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(8,11,29,0.34);
    content: "";
    pointer-events: none;
}

.barra-superiore-link::after,
.barra-superiore-logo-link::after {
    position: absolute;
    z-index: -1;
    inset: 17px 10px 11px;
    border-radius: 4px;
    background: linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,0.11) 49%, transparent 57%);
    content: "";
    pointer-events: none;
}

.barra-superiore-logo {
    width: min(100%, 430px);
    height: 78px;
    max-width: 100%;
    object-fit: contain;
    transform: skewX(8deg) translateY(-1px);
    filter:
        drop-shadow(0 2px 0 rgba(255,255,255,0.13))
        drop-shadow(0 6px 5px rgba(11,14,35,0.48));
}

.barra-superiore-sottotitolo {
    padding: 5px 11px;
    border-left: 2px solid rgba(227, 139, 185, 0.72);
    color: rgba(255,255,255,0.84);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

/* Login professionale: fondo neutro, accento cromatico solo dove serve. */
.pagina-login {
    background:
        radial-gradient(circle at 50% 22%, rgba(67, 79, 135, 0.13), transparent 34%),
        linear-gradient(145deg, #171a24 0%, #22283a 52%, #1c2030 100%);
}

.pagina-login::before {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 48px 48px;
    content: "";
    pointer-events: none;
}

.pagina-login .login-card {
    width: min(100%, 430px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: #f7f7f8;
    box-shadow:
        0 20px 46px rgba(5, 8, 20, 0.38),
        0 0 0 1px rgba(255,255,255,0.03);
}

.login-card-intestazione {
    gap: 7px;
    padding: 25px 34px 22px;
    border-bottom: 2px solid rgba(200, 63, 136, 0.72);
    background: linear-gradient(145deg, #252b56 0%, #303b72 68%, #43315f 100%);
}

.login-card-logo {
    width: 66px;
    height: 66px;
    margin-bottom: 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 6px 8px rgba(6,8,20,0.42));
}

.login-card h1 {
    font-size: 1.48rem;
    letter-spacing: 0.10em;
}

.login-card-intestazione p {
    color: rgba(255,255,255,0.72);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.login-card-corpo {
    padding: 29px 34px 34px;
}

.login-form {
    gap: 18px;
}

.pagina-login .login-input {
    min-height: 48px;
    border-color: #cfd2da;
    border-radius: 7px;
    box-shadow: inset 0 1px 2px rgba(20,25,44,0.06);
}

.pagina-login .login-input:focus {
    border-color: #405184;
    box-shadow:
        inset 0 1px 2px rgba(20,25,44,0.05),
        0 0 0 3px rgba(116,59,133,0.13);
}

.pagina-login .login-button {
    min-height: 48px;
    border-radius: 7px;
    background: linear-gradient(180deg, #2F3D7D 0%, #1D326A 100%);
    box-shadow: 0 5px 10px rgba(32,44,105,0.24);
}

.pagina-login .login-button:hover {
    background: linear-gradient(180deg, #364786 0%, #2B3A78 100%);
    box-shadow: 0 7px 14px rgba(32,44,105,0.29);
}

@media (max-width: 700px) {
    .barra-superiore-link,
    .barra-superiore-logo-link {
        min-width: min(72vw, 330px);
        min-height: 68px;
        padding-inline: 12px;
        transform: skewX(-6deg);
    }

    .barra-superiore-logo {
        height: 60px;
        transform: skewX(6deg);
    }

    .pagina-login .login-card {
        width: min(100%, 390px);
    }
}

/* =========================================================
   REVISIONE 30 — HEADER PIÙ PULITO E STORICO PIÙ ARIOSO
   ========================================================= */

/* Header: il protagonista è solo il logo, con una basetta discreta in rilievo. */
.barra-superiore {
    min-height: 104px;
    padding: 14px 22px;
    gap: 16px 22px;
    background: linear-gradient(108deg, #191F49 0%, #1D326A 57%, #59336B 100%);
}

.barra-superiore-link,
.barra-superiore-logo-link {
    min-width: 0;
    min-height: 68px;
    padding: 2px 18px 7px;
    transform: none;
}

.barra-superiore-link::before,
.barra-superiore-logo-link::before {
    inset: 22px 10px 8px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    box-shadow:
        0 7px 0 rgba(15, 18, 42, 0.44),
        0 12px 20px rgba(10, 13, 33, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(8,11,29,0.34);
    transform: skewX(-16deg);
}

.barra-superiore-link::after,
.barra-superiore-logo-link::after {
    inset: 23px 22px 13px;
    border-radius: 3px;
    background: linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,0.10) 47%, transparent 56%);
    transform: skewX(-16deg);
}

.barra-superiore-logo {
    width: auto;
    height: 64px;
    max-width: min(100%, 500px);
    object-fit: contain;
    transform: none;
    filter:
        drop-shadow(0 1px 0 rgba(255,255,255,0.10))
        drop-shadow(0 8px 8px rgba(10, 12, 29, 0.34));
}

.barra-superiore-sottotitolo {
    margin-left: auto;
}

/* Modale storico: più ampia, più alta e con corpo comodamente scorrevole. */
.storico-export-dialog {
    width: min(1320px, calc(100vw - 26px));
    max-height: calc(100vh - 20px);
}

.storico-export-scroll {
    gap: 18px;
    padding: 20px;
}

.storico-export-step > header {
    padding: 15px 18px;
}

.storico-export-step > header > div {
    min-width: 0;
}

.storico-export-step > header h4 {
    font-size: 1.05rem;
}

.storico-export-filters {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 16px;
    padding: 18px;
}

.storico-export-wide {
    grid-column: span 2;
}

.storico-export-date-details {
    margin: 0 18px 18px;
}

.storico-export-dates {
    gap: 15px;
    padding: 16px;
}

.storico-export-column-toolbar,
.storico-export-columns,
.storico-export-order-preview,
.storico-export-preview,
.storico-export-preview-placeholder {
    margin-left: 0;
    margin-right: 0;
}

.storico-export-order-preview {
    align-items: center;
    justify-content: space-between;
    padding: 18px;
}

.storico-export-order-preview .form-gruppo {
    width: min(100%, 460px);
}

.storico-export-auto-preview-note {
    display: grid;
    gap: 3px;
    padding: 11px 14px;
    border: 1px solid #ddd7e6;
    border-radius: 10px;
    background: #f7f4fa;
    color: var(--unchained-testo-soft);
    text-align: left;
}

.storico-export-auto-preview-note strong {
    color: var(--unchained-blu-notte);
    font-size: 0.86rem;
}

.storico-export-auto-preview-note span {
    font-size: 0.8rem;
}

.storico-export-preview-placeholder {
    margin: 0 18px 18px;
}

.storico-export-preview {
    padding: 0 18px 18px;
}

@media (max-width: 1180px) {
    .storico-export-filters {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 760px) {
    .barra-superiore {
        min-height: auto;
    }

    .barra-superiore-link,
    .barra-superiore-logo-link {
        min-height: 64px;
        padding: 2px 12px 6px;
    }

    .barra-superiore-link::before,
    .barra-superiore-logo-link::before {
        inset: 20px 8px 7px;
    }

    .barra-superiore-link::after,
    .barra-superiore-logo-link::after {
        inset: 21px 16px 11px;
    }

    .barra-superiore-logo {
        height: 54px;
        max-width: 100%;
    }

    .storico-export-dialog {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
    }

    .storico-export-scroll {
        padding: 14px;
    }

    .storico-export-filters {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }

    .storico-export-wide {
        grid-column: auto;
    }

    .storico-export-date-details {
        margin: 0 14px 14px;
    }

    .storico-export-order-preview {
        gap: 10px;
        padding: 14px;
    }

    .storico-export-auto-preview-note {
        width: 100%;
    }

    .storico-export-preview-placeholder {
        margin: 0 14px 14px;
    }

    .storico-export-preview {
        padding: 0 14px 14px;
    }
}

/* =========================================================
   REVISIONE 31 — FIX VERI SU HEADER E FILTRI STORICO
   ========================================================= */

/* Header superiore: logo esteso leggibile, basetta corta e pulita. */
.barra-superiore {
    min-height: 108px;
    gap: 18px 26px;
}

.barra-superiore-link,
.barra-superiore-logo-link {
    flex: 0 0 auto;
    width: clamp(260px, 21vw, 360px);
    min-width: clamp(260px, 21vw, 360px);
    min-height: 74px;
    padding: 4px 12px 10px;
}

.barra-superiore-link::before,
.barra-superiore-logo-link::before {
    inset: 18px 8px 10px;
    transform: skewX(-16deg);
}

.barra-superiore-link::after,
.barra-superiore-logo-link::after {
    inset: 19px 22px 15px;
    transform: skewX(-16deg);
}

.barra-superiore-logo {
    display: block;
    width: clamp(240px, 19vw, 330px);
    max-width: none;
    height: auto;
    margin: 0 auto;
    filter:
        drop-shadow(0 1px 0 rgba(255,255,255,0.12))
        drop-shadow(0 6px 10px rgba(10, 12, 29, 0.40));
}

/* Filtri storico: blocco davvero scorrevole, non schiacciato nella modale. */
.storico-export-filters-scroll {
    max-height: 340px;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.storico-export-filters {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 16px 18px;
    padding: 0;
}

.storico-export-wide {
    grid-column: span 1;
}

.storico-export-date-details {
    margin: 18px 0 0;
}

.storico-export-order-preview {
    justify-content: flex-start;
    padding: 18px;
}

.storico-export-order-preview .form-gruppo {
    width: min(100%, 520px);
}

@media (max-width: 1180px) {
    .storico-export-filters {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .barra-superiore-link,
    .barra-superiore-logo-link {
        width: clamp(220px, 70vw, 300px);
        min-width: clamp(220px, 70vw, 300px);
        min-height: 70px;
    }

    .barra-superiore-logo {
        width: clamp(205px, 64vw, 280px);
    }

    .storico-export-filters-scroll {
        max-height: 290px;
        padding: 14px;
    }

    .storico-export-filters {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =========================================================
   REVISIONE 32 — TONO CROMATICO PIÙ ISTITUZIONALE
   ========================================================= */
:root {
    --unchained-blu-notte: #1D326A;
    --unchained-blu-profondo: #352B61;
    --unchained-blu-acceso: #405184;
    --unchained-ciano: #625079;
    --unchained-ciano-chiaro: #C56F9D;
    --unchained-sfondo: #F0EFF4;
    --unchained-superficie: #E5E3EB;
    --unchained-testo: #242233;
    --unchained-testo-soft: #625D6D;
    --unchained-bordo: #D2CEDA;
    --unchained-ombra-piccola: 0 3px 5px rgba(36, 48, 107, 0.16);
    --unchained-ombra-media: 0 5px 9px rgba(36, 48, 107, 0.18);
    --unchained-ombra-grande: 0 8px 14px rgba(36, 48, 107, 0.22);
    --unchained-anello-focus: 0 0 0 3px rgba(167, 52, 112, 0.22);
    --unchained-anello-accento: 0 0 0 3px rgba(167, 52, 112, 0.16);
}

.barra-superiore {
    background: linear-gradient(108deg, #171D43 0%, #1D326A 58%, #503060 100%);
    box-shadow: 0 11px 25px rgba(18, 23, 57, 0.30), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Conferma post-chiusura mostrata direttamente nel centro notifiche. */
.conferma-chiusura-card {
    display: grid;
    gap: 14px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #CFC9D8;
    border-left: 4px solid var(--unchained-ciano);
    border-radius: 10px;
    background: linear-gradient(135deg, #F7F5F9 0%, #F0ECF4 100%);
    box-shadow: 0 4px 10px rgba(36, 48, 107, 0.10);
}

.conferma-chiusura-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.conferma-chiusura-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--unchained-ciano);
    font: 800 .68rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .11em;
}

.conferma-chiusura-card h4 {
    margin: 0;
    color: var(--unchained-blu-notte);
    font: 800 1rem/1.2 Arial, Helvetica, sans-serif;
}

.conferma-chiusura-card p {
    margin: 0;
    color: var(--unchained-testo-soft);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
}

.conferma-chiusura-scadenza {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid #D4CBDC;
    border-radius: 999px;
    background: #FFF;
    color: #4C3A59;
    font: 700 .76rem/1 Arial, Helvetica, sans-serif;
}

.conferma-chiusura-azioni {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.conferma-chiusura-azioni form { margin: 0; }

.conferma-chiusura-rifiuta {
    background: #FFF !important;
    color: #8D343A !important;
    border: 1px solid #C98D91 !important;
    box-shadow: none !important;
}

.conferma-chiusura-rifiuta:hover,
.conferma-chiusura-rifiuta:focus-visible {
    background: #F8EEEE !important;
}

.conferma-chiusura-accetta {
    background: linear-gradient(180deg, #2E3B78 0%, #1D326A 100%) !important;
}

@media (max-width: 700px) {
    .conferma-chiusura-testa,
    .conferma-chiusura-azioni {
        align-items: stretch;
        flex-direction: column;
    }
    .conferma-chiusura-scadenza { width: fit-content; }
    .conferma-chiusura-azioni .neon-button { width: 100%; }
}

/* =========================================================
   REVISIONE 36 — PALETTE BLU SCURO E DASHBOARD STABILE
   ========================================================= */
:root {
    /* Il blu torna ad essere il colore dominante; il viola resta un accento. */
    --unchained-blu-notte: #172554;
    --unchained-blu-profondo: #21386F;
    --unchained-blu-acceso: #355590;
    --unchained-ciano: #5B4A78;
    --unchained-ciano-chiaro: #83749D;

    --unchained-sfondo: #EEF1F6;
    --unchained-superficie: #E4E8EF;
    --unchained-bianco: #FFFFFF;
    --unchained-testo: #202A3D;
    --unchained-testo-soft: #5F6879;
    --unchained-bordo: #CCD3DF;

    --unchained-info: #355590;
    --unchained-ombra-piccola: 0 3px 5px rgba(23, 37, 84, 0.15);
    --unchained-ombra-media: 0 5px 9px rgba(23, 37, 84, 0.17);
    --unchained-ombra-grande: 0 8px 14px rgba(23, 37, 84, 0.20);
    --unchained-ombra-interna: inset 0 2px 3px rgba(23, 37, 84, 0.15);
    --unchained-ombra-premuta: inset 0 3px 4px rgba(23, 37, 84, 0.22);
    --unchained-anello-focus: 0 0 0 3px rgba(70, 91, 151, 0.22);
    --unchained-anello-accento: 0 0 0 3px rgba(91, 74, 120, 0.16);
}

.barra-superiore {
    background:
        radial-gradient(circle at 90% 4%, rgba(91, 74, 120, 0.14), transparent 27%),
        linear-gradient(108deg, #101A3B 0%, #172554 46%, #223A70 79%, #493D65 100%);
    box-shadow: 0 11px 25px rgba(13, 24, 58, 0.31), inset 0 1px 0 rgba(255,255,255,0.06);
}

.barra-superiore-sottotitolo {
    border-left-color: rgba(131, 116, 157, 0.72);
}

.neon-button,
.login-button {
    border-color: rgba(33, 56, 111, 0.26);
    background: linear-gradient(135deg, #172554 0%, #29477F 76%, #51436F 100%);
    color: #fff;
    box-shadow: 0 4px 8px rgba(23, 37, 84, 0.22);
}

.neon-button:hover,
.neon-button:focus-visible,
.login-button:hover,
.login-button:focus-visible {
    color: #fff;
    box-shadow: 0 6px 12px rgba(23, 37, 84, 0.27), var(--unchained-anello-focus);
}

.neon-button-secondary {
    border-color: #C8CFDB;
    background: #FFFFFF;
    color: var(--unchained-blu-notte);
}

.neon-button-secondary:hover,
.neon-button-secondary:focus-visible {
    background: #F1F3F7;
    color: var(--unchained-blu-profondo);
}

.login-card-intestazione {
    background: linear-gradient(135deg, #172554 0%, #263E76 78%, #51436F 100%);
    border-bottom-color: #63527F;
}

.account-menu-button:hover,
.account-menu[open] .account-menu-button {
    box-shadow: inset 0 0 0 1px rgba(111, 101, 151, 0.28), 0 3px 6px rgba(10, 20, 48, 0.18);
}

.account-avatar {
    background: linear-gradient(135deg, #29477F 0%, #554675 100%);
    box-shadow: 0 0 0 4px rgba(91, 74, 120, 0.08);
}

.barra-superiore-notifiche {
    border-color: rgba(131, 116, 157, 0.28);
}

.barra-superiore-notifiche:hover,
.barra-superiore-notifiche:focus-visible,
.barra-superiore-notifiche.attivo {
    border-color: rgba(131, 116, 157, 0.56);
    color: #D8D2E5;
    box-shadow: inset 0 0 0 1px rgba(91, 74, 120, 0.16), 0 4px 8px rgba(11, 22, 52, 0.20);
}

.barra-superiore-notifiche-icona {
    background: rgba(91, 74, 120, 0.20);
    color: #D8D2E5;
}

.storico-export-header {
    background: linear-gradient(120deg, #172554 0%, #243D76 78%, #51436F 100%);
}

/* Nella dashboard generale il pannello destro resta sempre presente. */
.dashboard-pannello-priorita {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.dashboard-stato-vuoto-priorita {
    min-height: 260px;
    flex: 1;
}

/* Conferma chiusura: accento meno magenta e più coerente con la nuova palette. */
.conferma-chiusura-card {
    border-color: #C9D0DC;
    border-left-color: #5B4A78;
    background: linear-gradient(135deg, #F7F8FA 0%, #EEF1F6 100%);
    box-shadow: 0 4px 10px rgba(23, 37, 84, 0.10);
}

.conferma-chiusura-kicker { color: #5B4A78; }
.conferma-chiusura-scadenza { border-color: #CCD2DE; color: #43506B; }
.conferma-chiusura-accetta {
    background: linear-gradient(180deg, #29477F 0%, #172554 100%) !important;
}