/* =============================================
   its-sidenav.css
   Sidenav editoriale: brand header, nav groups,
   voci menu, footer utente, responsive
   Aesthetic: Navy + Oro · Cormorant + Inter
   ============================================= */

/* ─── 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 shell ────────────────────────────────────────── */
.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%;
}

/* ─── Brand header ─────────────────────────────────────────── */
.its-sidenav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--its-border);
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.its-sidenav__brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--its-text);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

.its-sidenav__brand-mark img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 50%;
}

.its-sidenav__brand-text {
    font-family: var(--its-serif);
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.15;
    letter-spacing: .005em;
    color: var(--its-text);
}

.its-sidenav__brand-text small {
    display: block;
    font-family: var(--its-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--its-text-muted);
    margin-top: 3px;
}

/* ─── Scroll area ──────────────────────────────────────────── */
.its-sidenav__scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px 12px;
}

.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;
}

/* ─── Gruppo nav ───────────────────────────────────────────── */
.its-sidenav__group {
    margin-top: 4px;
    padding-bottom: 2px;
}

.its-sidenav__group + .its-sidenav__group {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--its-border);
}

/* ─── Label sezione ────────────────────────────────────────── */
.its-sidenav__section-label {
    display: block;
    font-family: var(--its-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--its-text-muted);
    padding: 10px 10px 5px;
}

/* ─── Voce nav ─────────────────────────────────────────────── */
.its-sidenav__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--its-radius-sm);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    color: var(--its-text-2);
    font-size: 13px;
    font-weight: 450;
    user-select: none;
    text-decoration: none !important;
    width: 100%;
    white-space: nowrap;
    position: relative;
}

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

/* Voce attiva: sfondo navy, testo carta, icona oro */
.its-sidenav__item--active,
.its-sidenav__item.active {
    background: var(--its-text) !important;
    color: var(--its-surface) !important;
}

.its-sidenav__item--active .its-sidenav__icon,
.its-sidenav__item.active .its-sidenav__icon {
    color: var(--its-gold) !important;
}

/* ─── Icona e label ────────────────────────────────────────── */
.its-sidenav__icon {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--its-text-dim);
    transition: color .12s;
}

.its-sidenav__item:hover .its-sidenav__icon {
    color: var(--its-text);
}

.its-sidenav__label {
    font-size: 13px;
    font-weight: 450;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Voce parent (gruppo espandibile) ─────────────────────── */
.its-sidenav__item--parent {
    background: transparent;
    border: none;
    text-align: left;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.its-sidenav__item--branch-active:not(.its-sidenav__item--active):not(.active) {
    color: var(--its-text);
    font-weight: 600;
}

.its-sidenav__item--branch-active .its-sidenav__icon {
    color: var(--its-gold-deep);
}

.its-sidenav__chevron {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--its-text-muted);
    flex-shrink: 0;
    transition: transform .18s ease, color .12s;
}

.its-sidenav__chevron--open {
    transform: rotate(90deg);
    color: var(--its-gold-deep);
}

/* ─── Sotto-menu ─────────────────────────────────────────── */
.its-sidenav__submenu {
    display: flex;
    flex-direction: column;
    margin: 2px 0 4px 14px;
    padding-left: 10px;
    border-left: 1px solid var(--its-border);
    gap: 1px;
}

.its-sidenav__item--child {
    padding: 6px 10px 6px 6px;
    font-size: 12.5px;
    color: var(--its-text-2);
    gap: 8px;
}

.its-sidenav__item--child .its-sidenav__label {
    font-size: 12.5px;
    font-weight: 450;
}

.its-sidenav__sub-marker {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--its-border-strong, var(--its-border));
    flex-shrink: 0;
    transition: background .12s, transform .12s;
}

.its-sidenav__item--child:hover .its-sidenav__sub-marker {
    background: var(--its-text-muted);
}

.its-sidenav__item--child.its-sidenav__item--active .its-sidenav__sub-marker,
.its-sidenav__item--child.active .its-sidenav__sub-marker {
    background: var(--its-gold) !important;
    transform: scale(1.15);
}

/* ─── Footer utente ────────────────────────────────────────── */
.its-sidenav__footer {
    border-top: 1px solid var(--its-border);
    padding: 12px 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.its-sidenav__user {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
}

.its-sidenav__user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--its-gold-soft);
    color: var(--its-gold-deep);
    display: grid;
    place-items: center;
    font-family: var(--its-serif);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.its-sidenav__user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.its-sidenav__user-name {
    font-size: 12px;
    font-weight: 550;
    color: var(--its-text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.its-sidenav__user-role {
    font-size: 10.5px;
    color: var(--its-text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Bottone logout ───────────────────────────────────────── */
.its-sidenav__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--its-radius-sm);
    border: none;
    background: transparent;
    color: var(--its-text-dim);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}

.its-sidenav__logout:hover {
    background: rgba(181,72,72,.10);
    color: var(--its-danger);
}

/* ─── AppBar: nascondo brand su desktop (sidenav lo ha) ─────── */
@media (min-width: 1025px) {
    .its-appbar__brand {
        display: none !important;
    }
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .its-nav-overlay {
        display: block;
    }

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

    .its-sidenav--open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(26,34,56,.15);
    }

    /* Su mobile il brand nel sidenav è nascosto (appbar lo mostra) */
    .its-sidenav__brand {
        display: none;
    }
}