:root {
    --first-color: #F8F8F8;
    --header-color: #1976d2;
    --table-color: #ffffff;
    --first-color-light: #4154F1;
    --white-color: #012970;
    --second-color: #F6F9FF;
    --back-color : #F6F9FF;
    --third-color: #09090b;
    --border-color : #666666;
    --modal-color : #ffffff;
}

body.dark-mode {
    --first-color: #18181b;
    --header-color: #121212;
    --table-color: #1e1e1e;
    --first-color-light: #717ff5;
    --white-color: #f8f4f8;
    --second-color: #09090b;
    --back-color : #0f1214;
    --third-color: #F6F9FF;
    --border-color : #F6F9FF;
    --modal-color : hsl(0deg 0% 7.06%);
}

.nav-pills>li>a {
    border-radius: 0;
}

#navbar-content {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--first-color);
    z-index: 1100;
    transition: .5s;
    box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}

#user-property {
    float: left;
}

#user {
    float: left;
}

#log-out {    
    display: flex;
    align-items: center;
    text-indent: 5px;
}

#log-out>ul{
    text-indent: 15px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center !important;
}

.logout-submenu {
    position: absolute;
    inset: 0px 0px auto auto;
    margin: 0px;
    transform: translate(-16px, 50px);
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    list-style: none;
    padding: 0;
    margin-right: 15px;
    border-radius: 4px;
    box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
  }
  
  .logout-submenu::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf1;
    border-left: 1px solid #eaedf1;
  }

  .logout-submenu li {
    padding: 10px;
  }
  
  .logout-submenu li a {
    text-decoration: none;
    color: #333;
  }
  
  .logout-submenu li a:hover {
    color: #0d5cab;
  }

#wrapper {
    padding-left: 0;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 50px;
}

#sidebar-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;
    background: var(--first-color);
    overflow-y: auto;
    overflow-x: hidden; /* Ajouté pour masquer le débordement horizontal */
    z-index: 1000;
    transition: width 0.5s ease;
    margin-top: 55px;
    padding-top: 30px;
    padding-left: 20px;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
}

#wrapper.toggled #sidebar-wrapper {
    width: 80px;
}

#page-content-wrapper {
    margin-left: 250px;
    transition: margin-left 0.5s ease;
    background-color: var(--second-color);
}

#wrapper.toggled #page-content-wrapper {
    margin-left: 80px;
}

.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li a #menu-label{
    color: var(--white-color);
}

.sidebar-nav li {
    text-indent: 25px;
    line-height: 40px;
    margin-bottom: 20px;
    font-size: 15px;
}

.sidebar-nav li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #999999;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    overflow: hidden; /* Masque le débordement */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte dépasse */
    border-radius: 3px;
}

.sidebar-nav li a .fa-stack {
    font-size: 0.5em; /* Réduit la taille de l'icône à 50% de sa taille d'origine */
}

.sidebar-nav li a:hover {
    color: var(--first-color-light);
    background: #e7e7e7b4;
}


.sidebar-nav li a:hover #menu-label{
    color: var(--first-color-light);
}

.sidebar-nav ul {
    margin-top: 10px;
    margin-bottom: 10px;
}

.sidebar-nav li a.active {
    color: var(--first-color-light);
    background: #e7e7e76c;
    border-left: 2px solid #9c27b0;
}


.sidebar-nav li a.active #menu-label { 
    color: var(--first-color-light);
}

.sidebar-nav li a.active .fa-stack {
    color: var(--first-color-light);
}

.sidebar-nav ul li a.active {
    color: var(--first-color-light);
    background: #e7e7e76c;
    border-left: 2px solid #9c27b0;
}

/* Lorsque la sidebar est réduite, conservez le même espacement */
#wrapper.toggled .sidebar-nav li {
    padding-top: 10px; /* Conservez le même padding */
    margin-bottom: 30px; /* Conservez le même espacement entre les éléments */
}

#wrapper.toggled .sidebar-nav li a span {
    display: none;
}

#wrapper.toggled .sidebar-nav li a .fa-stack {
    margin-left: 5px;
}

#page-content-wrapper {
    margin-left: 250px;
    transition: margin-left 0.5s ease;
}

#page-content-wrapper.toggled {
    margin-left: 80px;
}


@media (min-width: 768px) {
    #wrapper {
        padding-left: 250px;
    }

    .fixed-brand {
        width: 250px;
    }

    #wrapper.toggled {
        padding-left: 80px;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 80px;
    }

    #wrapper.toggled-2 #sidebar-wrapper {
        width: 80px;
    }

    #wrapper.toggled-2 #sidebar-wrapper:hover {
        width: 250px;
    }

    #page-content-wrapper {
        position: relative;
        transition: all 0.5s ease;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
        padding-left: 250px;
    }

    #wrapper.toggled-2 #page-content-wrapper {
        position: relative;
        margin-right: 0;
        margin-left: -200px;
        transition: all 0.5s ease;
        width: auto;
    }
}