/* ============================================
   FIX POUR LE TOGGLE DU SIDEBAR AVEC ALIGNEMENT À GAUCHE
   ============================================ */

/* État par défaut - Sidebar ouvert (200px) */
nav.side-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background: #393836;
    color: #fff;
    transition: all 0.3s linear;
    z-index: 999;
    overflow-y: auto;
}

/* Page ajustée quand sidebar est ouvert */
.page {
    position: absolute;
    top: 0;
    right: 0;
    transition: width 0.3s linear;
    width: calc(100% - 200px);
    background-color: #F4F7FA;
    min-height: 100vh;
    padding-bottom: 50px;
}

/* État fermé - Sidebar réduit (70px) */
body.sidebar-collapsed nav.side-navbar,
nav.side-navbar.shrinked {
    width: 70px !important;
}

/* Page élargie quand sidebar est fermé */
body.sidebar-collapsed .page,
.page.active {
    width: calc(100% - 70px) !important;
}

/* ALIGNEMENT À GAUCHE DES ÉLÉMENTS DU MENU */
nav.side-navbar .side-menu li a {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    padding: 12px 20px !important;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

nav.side-navbar .side-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 25px !important;
}

nav.side-navbar .side-menu li.active a {
    background-color: rgba(66, 139, 202, 0.3);
    border-left: 3px solid #428bca;
}

/* Icônes alignées à gauche avec espace */
nav.side-navbar .side-menu li a i {
    width: 25px !important;
    margin-right: 10px !important;
    text-align: center !important;
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Texte aligné à gauche */
nav.side-navbar .side-menu li a span {
    display: inline-block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* État réduit - Centrer les icônes */
body.sidebar-collapsed nav.side-navbar .side-menu li a,
nav.side-navbar.shrinked .side-menu li a {
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 5px !important;
}

/* Masquer le texte quand sidebar est réduit */
body.sidebar-collapsed nav.side-navbar span:not(.arrow),
nav.side-navbar.shrinked span:not(.arrow) {
    display: none !important;
}

/* Centrer les icônes quand sidebar est réduit */
body.sidebar-collapsed nav.side-navbar i,
nav.side-navbar.shrinked i {
    margin-right: 0 !important;
    font-size: 1.2em;
}

/* Masquer le header du sidebar quand réduit */
body.sidebar-collapsed nav.side-navbar .sidenav-header-inner,
nav.side-navbar.shrinked .sidenav-header-inner {
    display: none !important;
}

/* Afficher le logo petit quand réduit */
body.sidebar-collapsed nav.side-navbar .brand-small,
nav.side-navbar.shrinked .brand-small {
    display: block !important;
}

/* Par défaut, masquer le logo petit */
nav.side-navbar .brand-small {
    display: none;
}

/* Masquer les flèches de dropdown quand réduit */
body.sidebar-collapsed nav.side-navbar .arrow,
nav.side-navbar.shrinked .arrow {
    display: none !important;
}

/* Masquer les badges quand réduit */
body.sidebar-collapsed nav.side-navbar .badge,
nav.side-navbar.shrinked .badge {
    display: none !important;
}

/* Header du sidebar */
.sidenav-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Pour les écrans moyens et petits */
@media (max-width: 1199px) {
    /* Sidebar caché par défaut sur mobile */
    nav.side-navbar {
        left: -200px;
    }
    
    /* Page pleine largeur sur mobile */
    .page {
        width: 100% !important;
    }
    
    /* Afficher sidebar quand show-sm est actif */
    nav.side-navbar.show-sm {
        left: 0 !important;
    }
    
    /* Page ajustée quand sidebar mobile est visible */
    .page.active-sm {
        width: calc(100% - 70px) !important;
    }
}

/* Animation fluide */
nav.side-navbar,
.page,
nav.side-navbar a,
nav.side-navbar i,
nav.side-navbar span {
    transition: all 0.3s ease-in-out;
}

/* Fix pour le z-index du bouton toggle */
#toggle-btn {
    z-index: 1000;
    position: relative;
}

/* Scroll personnalisé pour le sidebar */
nav.side-navbar::-webkit-scrollbar {
    width: 5px;
}

nav.side-navbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

nav.side-navbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

nav.side-navbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}