﻿.sidebar .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 1.2vw 1.5vw;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.sidebar .logo img {
    max-height: 5vw;
    margin-bottom: 10px;
}

.logo h6 {
    font-size: var(--font-size-14);
    font-family: var(--font-semibold);
}

.mc-btn {
    display: none;
}

.tgl-side-menu-cont {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 15px;
    overflow-y: auto;
}


.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;

    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {

}

.nav-link.active {
   
}

.nav-link img {
    width: 20px;
    height: 20px;
    margin-left: 12px;
}

.nav-link span {

}

/* Font Awesome Arrow Icon - positioned at the end */
.arrow-icon {
    margin-right: 0;
    margin-right: auto;
    font-size: 14px;
    transition: transform 0.3s ease;
    color: white;
}

.nav-link:hover .arrow-icon {
    color: #333;
}

.nav-link.active .arrow-icon {
  
}


/* Alternative: Use chevron-up when open */
.has-submenu.open .arrow-icon:before {
    content: "\f077"; /* fa-chevron-up */
}

.has-submenu .arrow-icon:before {
    content: "\f078"; /* fa-chevron-down */
}



/* Submenu inherits parent nav-link styling */
.submenu-item {
    /* Inherits all nav-link styles but with modifications */
    padding-right: 20px; /* Extra indentation for submenu items */
    font-size: 14px;

}

.submenu-item:hover {

}

.submenu-item.active {
 
}

/* Arrow icon styles */
.has-submenu .arrow-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
    margin-left: 2px;
}


/* Submenu container */
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;

}

.submenu.show {
    max-height: 300px;
}



.tgl-side-menu {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
}

.sidebar-nav {
    margin: 0;
    list-style: none;
    padding: 0 1.2vw;
}

.sidebar-nav .nav-item {
    margin-bottom: 5px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-14);
    color: var(--color-white);
    font-family: var(--font-medium);
    transition: 0.3s;
    padding: 10px;
    border-radius: 1vw;
}

.sidebar-nav .nav-link img {
    width: 1.4vw;
}

.sidebar-nav .nav-link .count {
    background-color: #EB5757;
    width: 1.2vw;
    height: 1.2vw;
    border-radius: 50%;
    text-align: center;
    margin-right: auto;
    font-size: var(--font-size-14);
    color: var(--color-white);
}

.sidebar-nav .nav-link.active {
    color: var(--color-1c);
    background-color: var(--color-white);
    text-decoration: none;
}

.sidebar-nav .nav-link.active img {
    filter: brightness(0) saturate(100%) invert(21%) sepia(7%) saturate(3779%) hue-rotate(207deg) brightness(97%) contrast(93%);
}

.sidebar-userinfo {
    background-color: #B0D6FF;
    padding: 1.5vw;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-black);
}

.sidebar-userinfo img {
    width: 2.2vw;
    height: 2.2vw;
    border-radius: 50%;
}

.sidebar-userinfo p {
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
    margin: 0;
}

.sidebar-userinfo p span {
    display: block;
    font-family: 'MadaniArabic';
    font-size: var(--font-size-12);
}
