:root {
    --sb-width: 280px;
    --sb-mini: 68px;
    /* ── Palette Parametrizzata basata sul Brand Dinamico ── */
    --sb-bg-main: var(--sidebar-background-color, #1e293b); /* Sfondo principale pulito */
    --sb-bg-gradient: var(--sidebar-background-gradient, #1e293b); /* Gradiente principale */
    --sb-bg-soft: rgba(var(--sidebar-background-color), 0.04); /* Sfondo soft per hover generali */

    --sb-text: var(--sidebar-text-color, #1e293b); /* Testo principale ad alto contrasto */
    --sb-muted: var(--text-muted, #94a3b8); /* Testo disattivato/secondario */
    --sb-accent: var(--sidebar-text-color, #0056b3); /* Colore Primario del Brand (Greco/Aegean) */
    --sb-accent2: var(--sidebar-text-color, #00a8e8); /* Colore Secondario del Brand (Azzurro Isole) */

    --sb-hover: rgba(var(--sidebar-text-color), 0.05); /* Hover link parametrizzato */
    --sb-active: rgba(var(--sidebar-text-color), 0.10); /* Stato attivo parametrizzato */
    --sb-sub-bg: rgba(var(--sidebar-text-color), 0.01); /* Sfondo leggerissimo per i sottomenu */
    --sb-border: rgba(var(--sidebar-text-color), 0.12); /* Bordi definiti dal colore brand trasparente */
    --sb-dur: .22s;
    /* ── Modern Font Stack ── */
    --sb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Page layout ──────────────────────────────────────────────────── */
body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--sb-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
#sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sb-width);
    background: linear-gradient(180deg, var(--sb-bg-main) 0%, var(--sb-bg-gradient) 100%);
    border-right: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    transition: width var(--sb-dur) ease;
    z-index: 1040;
    overflow: hidden;
    box-shadow: 4px 0 24px rgba(var(--primary-rgb), 0.04);
    font-family: var(--sb-font-sans);
}

    #sidebar.sb-collapsed {
        width: var(--sb-mini);
    }

/* ── Main wrapper ─────────────────────────────────────────────────── */
#mainWrapper {
    margin-left: var(--sb-width);
    flex: 1;
    min-width: 0;
    transition: margin-left var(--sb-dur) ease;
    display: flex;
    flex-direction: column;
}

    #mainWrapper.sb-collapsed {
        margin-left: var(--sb-mini);
    }

/* ── Header ───────────────────────────────────────────────────────── */
.sb-header {
    height: 64px;
    background: var(--sidebar-header-background-color);
    border-bottom: 1px solid var(--sb-border);
    display: flex;
    align-items: center;
    padding: 0 12px 0 16px;
    gap: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.03);
}

.sb-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 140px;
    flex-shrink: 0;
}

.sb-logo {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

.sb-brand {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    overflow: hidden;
    min-width: 0;
}

.sb-brand-icon {
    color: var(--sb-accent);
    font-size: 1.35rem;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(var(--primary-rgb), 0.15));
}

.sb-brand-text {
    color: var(--sidebar-header-text-color);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .5px;
    white-space: nowrap;
    transition: opacity var(--sb-dur) ease;
}

#sidebar.sb-collapsed .sb-brand-text {
    opacity: 0;
    pointer-events: none;
}

.sb-toggle {
    background: none;
    border: none;
    color: var(--sidebar-header-text-color);
    opacity: 0.7;
    font-size: 1.15rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .15s, background .15s, color .15s;
}

    .sb-toggle:hover {
        opacity: 1;
        color: var(--sb-accent);
        background: var(--sb-hover);
    }

/* ── Nav ──────────────────────────────────────────────────────────── */
.sb-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-border) transparent;
}

    .sb-nav::-webkit-scrollbar {
        width: 4px;
    }

    .sb-nav::-webkit-scrollbar-thumb {
        background: var(--sb-border);
        border-radius: 2px;
    }

    .sb-nav ul,
    .sb-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

/* ── Links ────────────────────────────────────────────────────────── */
.sb-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--sb-text);
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s, padding var(--sb-dur) ease, justify-content var(--sb-dur) ease;
    cursor: pointer;
    position: relative;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    width: 100%;
    text-align: left;
    overflow: hidden;
}

#sidebar.sb-collapsed .sb-link {
    padding: 12px 0;
    justify-content: center;
    gap: 0;
}

.sb-link:hover,
.sb-link[aria-expanded="true"] {
    background: var(--sb-hover);
    color: var(--sb-accent);
    text-decoration: none;
    border-left-color: var(--sb-accent2);
}

.sb-link.sb-active {
    background: var(--sb-accent);
    color: var(--sb-bg-main);
    border-left: 4px solid var(--sb-accent2);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(var(--sb-accent), 0.25), inset 0 0 8px rgba(255, 255, 255, 0.1);
    position: relative;
    letter-spacing: 0.3px;
}

.sb-icon {
    font-size: 1.1rem;
    width: 32px;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
    color: var(--sidebar-icon-color); /* Sostituisci con la variabile primaria del tuo tema, es. var(--accent-color) */
    transition: color .15s, filter .15s;
}

.sb-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity var(--sb-dur) ease, max-width var(--sb-dur) ease;
    max-width: 210px;
}

#sidebar.sb-collapsed .sb-label {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

.sb-arrow {
    font-size: .75rem;
    color: var(--sb-muted);
    transition: transform var(--sb-dur) ease, opacity var(--sb-dur) ease, max-width var(--sb-dur) ease;
    flex-shrink: 0;
    overflow: hidden;
    max-width: 20px;
}

#sidebar.sb-collapsed .sb-arrow {
    opacity: 0;
    max-width: 0;
}

/* Quando il menu è aperto, ruota la freccia verso il basso. */
.sb-link[aria-expanded="true"] .sb-arrow {
    transform: rotate(90deg);
}

/* Indicatore visivo sul link attivo quando sidebar collassata */
#sidebar.sb-collapsed .sb-link.sb-active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--sb-accent2);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(var(--secondary-rgb), 0.6);
    animation: activeIndicatorPulse 2s ease-in-out infinite;
}

@keyframes activeIndicatorPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-50%) scale(1.3);
        opacity: 0.6;
    }
}

/* ── Submenus ─────────────────────────────────────────────────────── */
.sb-sub {
    background: var(--sb-sub-bg);
    border-left: 2px solid var(--sb-border);
    margin-left: 14px;
}

    .sb-sub ul {
        padding: 4px 0;
    }

    .sb-sub .sb-link {
        padding-left: 42px;
        font-size: 0.9rem;
    }

    .sb-sub .sb-icon {
        width: 24px;
        font-size: .95rem;
    }

#sidebar.sb-collapsed .sb-sub {
    display: none !important;
}

/* ── Divider ──────────────────────────────────────────────────────── */
.sb-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--sb-border) 30%, var(--sb-border) 70%, transparent 100%);
    margin: 6px 14px;
}

/* ── Footer (user) ────────────────────────────────────────────────── */
.sb-footer {
    border-top: 1px solid var(--sb-border);
    background: var(--sb-bg-main);
    flex-shrink: 0;
}

.sb-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background .15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    color: var(--sb-text);
}

    .sb-user-card:hover {
        background: var(--sb-hover);
    }

.sb-user-info {
    flex: 1;
    min-width: 0;
    transition: opacity var(--sb-dur) ease;
}

#sidebar.sb-collapsed .sb-user-info {
    opacity: 0;
    pointer-events: none;
}

#sidebar.sb-collapsed .sb-user-card {
    justify-content: center;
}

.sb-user-name {
    color: var(--sb-text);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.sb-user-email {
    color: var(--sb-muted);
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Dropup menu in footer */
.sb-footer .dropup .dropdown-menu {
    min-width: 230px;
    background: var(--sb-bg-main);
    border: 1px solid var(--sb-border);
    box-shadow: 0 -6px 24px rgba(var(--primary-rgb), 0.08);
    backdrop-filter: blur(8px);
    border-radius: 8px;
}

.sb-footer .dropdown-item {
    color: var(--sb-text);
    font-size: 0.9rem;
    padding: 8px 16px;
}

    .sb-footer .dropdown-item:hover {
        background: var(--sb-hover);
        color: var(--sb-accent);
    }

.sb-footer .dropdown-divider {
    border-color: var(--sb-border);
}

.sb-footer .dropdown-header {
    color: var(--sb-muted);
    font-size: .8rem;
}

/* ── Collapsed tooltips ───────────────────────────────────────────── */
@media (min-width: 768px) {
    #sidebar.sb-collapsed .sb-link[title]:hover::after {
        content: attr(title);
        position: absolute;
        left: calc(var(--sb-mini) + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--sb-bg-main);
        color: var(--sb-text);
        font-size: .85rem;
        padding: 6px 14px;
        border-radius: 6px;
        white-space: nowrap;
        pointer-events: none;
        z-index: 1060;
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.12);
        border: 1px solid var(--sb-border);
        font-weight: 500;
    }
}

/* ── Mobile overlay ───────────────────────────────────────────────── */
#sbOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(var(--primary-rgb), 0.4); /* Ombra scura parametrizzata dal brand */
    z-index: 1039;
    backdrop-filter: blur(2px);
}

    #sbOverlay.visible {
        display: block;
    }

/* ── Mobile topbar ────────────────────────────────────────────────── */
.sb-topbar {
    display: none;
    height: 56px;
    background: var(--sb-bg-main);
    border-bottom: 1px solid var(--sb-border);
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 14px rgba(var(--primary-rgb), 0.04);
    flex-shrink: 0;
}

.sb-topbar-brand {
    color: var(--sb-text);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
}

.sb-topbar-toggle {
    background: none;
    border: none;
    color: var(--sb-text);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color .15s;
}

    .sb-topbar-toggle:hover {
        color: var(--sb-accent);
    }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    #sidebar {
        left: calc(-1 * var(--sb-width));
        width: var(--sb-width) !important;
        transition: left var(--sb-dur) ease;
    }

        #sidebar.sb-mobile-open {
            left: 0;
            box-shadow: 4px 0 28px rgba(var(--primary-rgb), 0.15);
        }

            /* Su mobile i componenti tornano espansi e visibili ad apertura avvenuta */
            #sidebar.sb-mobile-open .sb-label,
            #sidebar.sb-mobile-open .sb-brand-text {
                opacity: 1;
                pointer-events: auto;
            }

            #sidebar.sb-mobile-open .sb-arrow {
                opacity: 1;
            }

/*            #sidebar.sb-mobile-open .sb-sub {
                display: block !important;
            }
*/
            #sidebar.sb-mobile-open .sb-user-info {
                opacity: 1;
                pointer-events: auto;
            }

            #sidebar.sb-mobile-open .sb-user-card {
                justify-content: flex-start;
            }

    #mainWrapper {
        margin-left: 0 !important;
    }

    .sb-topbar {
        display: flex;
    }
}