/* =============================================
   its-sidenav.css
   Overlay mobile, sidenav, voci menu,
   sottomenù, separatori, footer, responsive
   ============================================= */

/* Overlay mobile */
.its-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--its-overlay);
    z-index: -1;
    opacity: 0;
    transition: opacity .25s ease;
}

.its-nav-overlay--visible {
    opacity: 1;
    z-index: 140 !important;
}

/* Sidenav */
.its-sidenav {
    width: var(--its-nav-w);
    min-width: var(--its-nav-w);
    background: var(--its-surface);
    border-right: 1px solid var(--its-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform .25s ease, box-shadow .25s ease;
    z-index: 150;
    height: 100%;
}

.its-sidenav__scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

    .its-sidenav__scroll::-webkit-scrollbar {
        width: 3px;
    }

    .its-sidenav__scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .its-sidenav__scroll::-webkit-scrollbar-thumb {
        background: var(--its-border);
        border-radius: 3px;
    }

/* Sezione */
.its-sidenav__section {
    padding: 14px 8px 4px;
}

.its-sidenav__section-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--its-text-muted);
    padding: 0 8px;
    margin-bottom: 4px;
    font-family: var(--its-font-mono);
}

/* Voce base */
.its-sidenav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
    color: var(--its-text-dim);
    user-select: none;
    text-decoration: none;
    width: 100%;
}

    .its-sidenav__item:hover {
        background: var(--its-surface2);
        color: var(--its-text);
        text-decoration: none;
    }

    .its-sidenav__item--active, .its-sidenav__item.active {
        background: var(--its-accent-light) !important;
        color: var(--its-accent) !important;
        text-decoration: none;
    }

        .its-sidenav__item--active .its-sidenav__icon,
        .its-sidenav__item.active .its-sidenav__icon {
            color: var(--its-accent);
        }

        .its-sidenav__item--active::before,
        .its-sidenav__item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 20%;
            bottom: 20%;
            width: 3px;
            background: var(--its-accent);
            border-radius: 0 3px 3px 0;
        }

/* Icona e label */
.its-sidenav__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}

.its-sidenav__label {
    font-size: 12.5px;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
}

/* Gruppo apribile: voce padre con chevron, figli indentati sotto.
   Il padre riusa lo stile di .its-sidenav__item; il chevron ruota da solo. */
.its-sidenav__group-toggle {
    font-weight: 600;
}

.its-sidenav__chevron {
    flex-shrink: 0;
    color: var(--its-text-muted);
    transition: transform .15s ease;
}

.its-sidenav__chevron--aperto {
    transform: rotate(90deg);
}

/* Gruppo chiuso che contiene la pagina corrente: si evidenzia il padre,
   o la voce attiva sparirebbe alla vista. */
.its-sidenav__group-toggle--attivo {
    color: var(--its-accent);
}

    .its-sidenav__group-toggle--attivo .its-sidenav__icon {
        color: var(--its-accent);
    }

.its-sidenav__submenu {
    margin-top: 2px;
}

    .its-sidenav__submenu .its-sidenav__item {
        padding-left: 30px;
    }

    .its-sidenav__submenu .its-sidenav__icon {
        width: 16px;
        height: 16px;
    }

/* Separatore */
.its-sidenav__sep {
    height: 1px;
    background: var(--its-border);
    margin: 6px 8px;
}

/* Footer */
.its-sidenav__footer {
    border-top: 1px solid var(--its-border);
    padding: 8px;
    flex-shrink: 0;
}

.its-sidenav__footer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s;
    color: var(--its-text-dim);
    text-decoration: none;
    width: 100%;
}

    .its-sidenav__footer-item:hover {
        background: var(--its-surface2);
        color: var(--its-text);
        text-decoration: none;
    }

.its-sidenav__footer-item--danger:hover {
    background: rgba(239,68,68,.08);
    color: #dc2626;
}

/* Responsive
   Tre modi, uno per fascia di larghezza:
     > 1280     menu fisso con le etichette;
     961-1280   colonna di sole icone da 64px (tablet in orizzontale): il ☰ la
                allarga a 220px SOPRA il contenuto, senza farlo scorrere;
     <= 960     menu nascosto, il ☰ lo apre come pannello sovrapposto.
   ⚠️ Le soglie le legge anche js/its-responsive.js (its.eMenuSovrapposto):
   cambiandole qui vanno cambiate là, o il menu non si richiude dopo un clic. */
@media (min-width: 961px) and (max-width: 1280px) {
    .its-sidenav:not(.its-sidenav--open) {
        width: 64px;
        min-width: 64px;
    }

    .its-sidenav:not(.its-sidenav--open) .its-sidenav__label,
    .its-sidenav:not(.its-sidenav--open) .its-sidenav__section-label,
    .its-sidenav:not(.its-sidenav--open) .its-sidenav__chevron {
        display: none;
    }

    .its-sidenav:not(.its-sidenav--open) .its-sidenav__section {
        padding: 8px 8px 2px;
    }

    .its-sidenav:not(.its-sidenav--open) .its-sidenav__item,
    .its-sidenav:not(.its-sidenav--open) .its-sidenav__footer-item {
        justify-content: center;
        padding: 9px 0;
    }

    /* I figli di un gruppo aperto restano icone, raccolte in un riquadro
       sotto il padre: senza, non si distinguerebbero dalle voci principali. */
    .its-sidenav:not(.its-sidenav--open) .its-sidenav__submenu {
        background: var(--its-surface2);
        border-radius: 8px;
        padding: 2px 0;
    }

    .its-sidenav:not(.its-sidenav--open) .its-sidenav__submenu .its-sidenav__item {
        padding-left: 0;
    }

    /* Allargato: 220px sopra il contenuto. Il margine negativo lascia al
       contenuto i 64px della colonna, così la pagina non si ridisegna. */
    .its-sidenav--open {
        margin-right: calc(64px - var(--its-nav-w));
        box-shadow: 4px 0 24px var(--its-shadow-md);
    }

    .its-nav-overlay {
        display: block;
    }
}

@media (max-width: 960px) {
    .its-nav-overlay {
        display: block;
    }

    .its-sidenav {
        position: fixed;
        top: var(--its-appbar-h);
        left: 0;
        height: var(--its-shell-h);
        transform: translateX(-100%);
        box-shadow: none;
    }

    .its-sidenav--open {
        transform: translateX(0);
        box-shadow: 4px 0 24px var(--its-shadow-md);
    }
}

/* Dita al posto del mouse: voci alte almeno 40px, come le sezioni delle schede. */
@media (pointer: coarse) {
    .its-sidenav__item {
        min-height: 40px;
    }
}