:root {
    --sidebar-width: 102px;
    --sidebar-expended-width: 232px;
    --sidebar-color: #0A0A0A;
    --link-border-color: #707070;
    --active-link-color: #141414;
    --box-border-color: #BDBDBD;
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.sidebar {
    background-color: var(--sidebar-color);
    min-width: var(--sidebar-width);
    width: var(--sidebar-width);
    max-width: var(--sidebar-expended-width);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transition: all 0.25s ease-out;
    overflow: hidden;
}

.sidebar--expended {
    width: var(--sidebar-expended-width);
}

.sidebar > ul {
    position: relative;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100%;
    margin: 0;
    padding: 0;
    transition: all 0.25s ease-out;
    overflow-y: auto;
}

.sidebar--expended > ul {
    width: var(--sidebar-expended-width);
}

.sidebar__group {
    border-top: 1px solid transparent;
    border-bottom: 1px solid #fff;
    overflow-y: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.sidebar__group::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sidebar__group {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.sidebar__group__box {
    padding: 0;
}

.sidebar__group__box .sidebar__item {
    min-width: 3rem;
    height: fit-content;
    min-height: 3rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0.6rem;
    text-align: center;
    margin: 1rem 0;

    transition: all 0.25s ease-out;
}



.sidebar--expended .sidebar__item:not(.sidebar > ul > .sidebar__item:first-child) {
    width: 11rem;
    justify-content: center;
    flex-direction: column;
    align-items: start;
}
.sidebar--expended .sidebar__item img {
    margin: 0 0.125rem;
}

.sidebar .sidebar__item__text {
    display: none;
    width: 100%;
    text-align: center;
    font-size: 0.8125rem;
}

.sidebar--expended .sidebar__item__text {
    display: inline;
    color: #fff;
}

.sidebar > ul > .sidebar__item:last-child {
    margin: 0;
}

.sidebar__group__subgroup__box {
    padding: 0.75rem 0 0 0;
    display: none;
}

.sidebar__item__expendable {
    position: relative;
}

.sidebar__item__expendable span{
    text-align-last: left;
    justify-content: center;
    width: fit-content;
}
.sidebar__item__expendable > span{
    width: inherit;
}
.sidebar__item__expendable span span{
    margin-left: 1em;
    align-self: center;
}

.sidebar__item__expendable span, .sidebar__item__expendable::after {
    cursor: pointer;
}

.sidebar .sidebar__item__expendable::after {
    content: '\2b9f';
    height: fit-content;
    width: fit-content;
    display: inline-block;
    font-size: 0.5rem;
    position: absolute;
    right: 0.25rem;
    color: #fff;
    top: 1.25rem;
    opacity: 0;
}

.sidebar__item__expendable--expended {
    padding-top: 0.75rem;
    padding-right: 1rem;
}

.sidebar__group__box > .sidebar__item:hover {
    border-color: var(--box-border-color);
}

.sidebar--expended .sidebar__item__expendable--expended::after {
    top: 1.45rem;
}

.sidebar--expended .sidebar__item__expendable::after {
    opacity: 1;
}

.sidebar__item__expendable .sidebar__group__subgroup {
    display: none;
}

.sidebar__item__expendable--expended .sidebar__group__subgroup {
    display: inline;
}

.sidebar .sidebar__item__expendable--expended::after {
    content: '\2b9d';
}

.sidebar--expended .sidebar__group__subgroup__box {
    display: inline;
}

.sidebar__group__subgroup__box .sidebar__item {
    height: fit-content;
    min-height: 2rem;
    margin: 0.5rem 0;
    font-size: 0.75rem;
}

.sidebar__group__subgroup__box .sidebar__item a {
    text-align: left;
    margin-left: 0.125rem;
}

.sidebar li {
    list-style: none;
}

.sidebar__item--light {
    margin: 0.25rem 0;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.sidebar__item--bottom {
    margin-top: auto;
    margin-bottom: 2rem;
}
.sidebar__item--light .sidebar__item__text {
    font-weight: 300;
    font-size: 1rem;
}


.sidebar__item--active {
    background-color: var(--active-link-color);
}

.sidebar > ul li.sidebar__sidebar-link {
    list-style: none;
    position: relative;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.sidebar > ul .sidebar__sidebar-link:first-child {
    position: absolute;
    top: 0;
}

a + .sidebar__group__box .sidebar__item {
    display: flex;
}

a + .sidebar__group__box .sidebar__item a {
    align-self: center;
    width: 100%;
}

.sidebar__toggler {
    top: 2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1C1C1C;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    z-index: 200;
    border-color: transparent;
    cursor: pointer;
    left: calc(var(--sidebar-width) - 1rem);
    position: fixed;
    transition: all 0.25s ease-out;
    outline: none !important;
}

.menu-swticher-track ~ div.row #sidebar .sidebar__toggler {
    top: 5rem;
}

.sidebar--expended ul  ~ .sidebar__toggler {
    left: calc(var(--sidebar-expended-width) - 1rem);
}

.sidebar__toggler i {
    color: #fff;
}

.sidebar i.la, .sidebar i.las {
    color: #fff;
}

.sidebar__group__subgroup__box .sidebar__item:hover {
    background-color: #fff;
}

.sidebar__group__subgroup__box .sidebar__item:hover * {
    color: var(--active-link-color);
}

.badge.bg-white {
    color: var(--sidebar-color);
}

#content {
    width: 100%;
    display: block;
}

@media (min-width: 1024px) {
    /* Style de base pour sidebar-adjustments - spécificité élevée pour surcharger Bootstrap */
    #content.sidebar-adjustments.mx-md-1,
    #content.sidebar-adjustments {
        width:calc(100% - var(--sidebar-width) - 2rem) !important;
        margin-left: var(--sidebar-width) !important;
        margin-right: 1rem !important;
        display: inline-block;
        transition: all 0.25s ease-out;
    }

    /* Quand la sidebar est étendue */
    .sidebar--expended ~ #content.sidebar-adjustments.mx-md-1,
    .sidebar--expended ~ #content.sidebar-adjustments,
    .row:has(.sidebar--expended) #content.sidebar-adjustments {
        width:calc(100% - var(--sidebar-expended-width) - 2rem) !important;
        margin-left: var(--sidebar-expended-width) !important;
    }
    
    /* Fallback pour le sélecteur de frère si la classe n'est pas utilisée */
    .sidebar ~ #content {
        width:calc(100% - var(--sidebar-width) - 2rem);
        margin-left: var(--sidebar-width);
        display: inline-block;
        transition: all 0.25s ease-out;
    }

    .sidebar--expended ~ #content {
        width:calc(100% - var(--sidebar-expended-width) - 2rem);
        margin-left: var(--sidebar-expended-width);
        display: inline-block;
    }
}

#nav-sm .nav-item, #nav-sm .nav-link {
    color: var(--color-black);
}

#nav-sm .dropdown-item {
    text-align: center;
}


#nav-sm button.navbar-toggler {
    height: fit-content;
    margin: auto;
}

#nav-sm .nav-item.dropdown.active .dropdown-toggle {
    color: #fff;
    background-color: var(--color-black);
}

#nav-sm .dropdown-item.active {
    color: #fff;
    background-color: var(--color-black);
}

#nav-sm {
    border-bottom: 0.5rem solid var(--color-black);
}

#nav-sm .dropdown-menu.show {
    padding: 0;
    overflow: clip;
}