/* ============================================================
   SideBar.css — Menu latéral gauche
   ============================================================ */

#sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--blue-dark);
    display: flex;
    flex-direction: column;
    transition: width var(--transition), min-width var(--transition);
    overflow: visible;
    position: relative;
    z-index: 50;
    flex-shrink: 0;
}
#sidebar.collapsed { width: var(--sidebar-collapsed); min-width: var(--sidebar-collapsed); }

/* ── Bouton toggle ─────────────────────────────────────────── */
.sidebar-toggle {
    position: absolute;
    top: 12px; right: -13px;
    width: 26px; height: 26px;
    background: var(--blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition), background var(--transition);
    z-index: 10;
}
.sidebar-toggle:hover              { background: var(--blue-light); }
#sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); }

/* ── Zone de scroll ────────────────────────────────────────── */
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sidebar-scroll::-webkit-scrollbar       { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

/* ── Labels de section ─────────────────────────────────────── */
.nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    padding: 14px 20px 6px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--transition), height var(--transition), padding var(--transition);
}
#sidebar.collapsed .nav-label { opacity: 0; height: 0; padding: 0; overflow: hidden; }

/* ── Item principal ────────────────────────────────────────── */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-weight: 500;
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
    user-select: none;
}
.nav-item:hover  { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: rgba(46,134,193,.25);  color: #fff; }
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    background: var(--blue-light);
    border-radius: 0 2px 2px 0;
}

.nav-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.nav-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--transition), max-width var(--transition);
    max-width: 180px;
}
#sidebar.collapsed .nav-text { opacity: 0; max-width: 0; }

.nav-chevron {
    font-size: 10px;
    opacity: .5;
    flex-shrink: 0;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-item.open .nav-chevron     { transform: rotate(90deg); }
#sidebar.collapsed .nav-chevron { opacity: 0; max-width: 0; overflow: hidden; }

.nav-badge {
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    flex-shrink: 0;
}
#sidebar.collapsed .nav-badge { display: none; }

/* ── Sous-menus ────────────────────────────────────────────── */
.nav-sub {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}
.nav-sub.open          { max-height: 500px; }
#sidebar.collapsed .nav-sub { display: none; }

.nav-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 54px;
    cursor: pointer;
    color: rgba(255,255,255,.55);
    font-size: 12.5px;
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
}
.nav-sub-item:hover  { color: #fff; background: rgba(255,255,255,.06); }
.nav-sub-item.active { color: var(--blue-light); font-weight: 500; }

/* ── Flyout (mode rétracté) ────────────────────────────────── */
.nav-flyout { display: none !important; }

#flyout-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    min-width: 190px;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.12);
    pointer-events: auto;
}
#flyout-popup.visible { display: flex; }
#flyout-popup::before {
    content: '';
    position: absolute;
    left: -5px; top: 18px;
    border-right:  5px solid var(--navy);
    border-top:    5px solid transparent;
    border-bottom: 5px solid transparent;
}

.nav-flyout-title {
    padding: 4px 14px 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .7px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    margin-bottom: 4px;
}
.nav-flyout-item {
    padding: 7px 14px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255,255,255,.8);
    transition: background var(--transition);
}
.nav-flyout-item:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        top: var(--topbar-h);
        left: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform var(--transition);
        z-index: 50;
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
    }
    .mobile-menu-open #sidebar { transform: translateX(0); }
    .sidebar-toggle { display: none; }
    #sidebar.collapsed .nav-text    { opacity: 1 !important; max-width: 180px !important; }
    #sidebar.collapsed .nav-label   { opacity: 1 !important; height: auto !important; padding: 14px 20px 6px !important; }
    #sidebar.collapsed .nav-chevron { opacity: .5 !important; max-width: none !important; overflow: visible !important; }
    #sidebar.collapsed .nav-sub     { display: block !important; }
    #sidebar.collapsed .nav-badge   { display: inline !important; }
}