.sidebar {
    /* position: fixed; */
    top: 0;
    left: 0;
    /* height: 100%; */
    min-width: 250px;
    background-color: #343a40;
    color: #fff;
    transition: width 0.3s;
    
}

.sidebar .user > a {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

.sidebar .nav-item {
    background-color: #343a40;
    color: #fff;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    /* gap: 20px; */
    /* padding: 10px 20px; */
    background-color: #343a40;
    color: #fff;
}

.sidebar .nav-link:hover {
    background-color:#c2c7d080;
    color: #fff;
    border-radius: 8px;
}

.sidebar .nav-link:active {
    background-color:#c2c7d080;
    color: #fff;
}

.nav-pills {
    background-color:#c2c7d080;
    color: #fff;
}

.nav-pills .show>.nav-link {
    background-color:#343a40     !important;
    color: #fff !important;
}

.nav-pills .nav-link.active {
    background-color:#c2c7d080 !important;
    color: #fff !important;
}

.sidebar .description {
    font-size: 14px;
}

.sidebar .sub-menu {
    background-color: black;
    padding-left: 3%;
}

.sidebar .right {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.sidebar a .active {
    background-color: #fff;
}

.brand {
    height: 50px;
} 


/* Menu styles */
.submenu-arrow {
    transition: transform 0.2s ease;
}

.submenu-toggle.active .submenu-arrow {
    transform: rotate(90deg);
}

.submenu-toggle.active,
.nav-link.active {
    background-color: #e9ecef;
    font-weight: 500;
    border-radius: 8px;
}

.nav-link.active {
    background-color: #e9ecef;
    font-weight: 500;
    border-radius: 8px;
    color: #212529 !important;
    margin: 4px 8px;
}

.nav-link .fa,
.nav-link .fas {
    transition: color 0.2s ease;
}

/* Arrow rotation with smoother ease */
.submenu-arrow {
    transition: transform 0.25s ease-in-out, color 0.2s ease;
}

.submenu-toggle.active .submenu-arrow {
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .sidebar {
        width: 60px;
    }

    .sidebar .username {
        display: none;
    }

    .sidebar .brandname {
        display: none;
    }

    .sidebar .description {
        display: none;
    }

    .sidebar .nav-link {
        justify-content: center;
    }

    .main-content {
        margin-left: 60px;
    }
}