/* ===== SIDEBAR ===== */
.sidebar {
    background: var(--clr-white);
    box-shadow: 0 3px 13px rgba(18,43,70,.1);
    position: fixed;
    left: 0;
    width: 68px;
    height: 100%;
    z-index: 611;
    transition: width .2s;
}

.sidebar.expanded { width: 230px; }

.sidebar ul {
    list-style: none;
    padding: 10px;
    margin: 0;
    font-size: 1.2rem;
    color: var(--clr-6);
}

.sidebar ul li a,
.sidebar ul li.sidebar-drawer {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
    width: 100%;
    font-size: 1rem;
}

.sidebar ul li.sidebar-menu-item:hover { background-color: #F2F4F5; border-radius: 5px; }
.sidebar ul li.sidebar-menu-item.active { background-color: var(--clr-6); border-radius: 5px; }
.sidebar ul li i { margin-right: 5px; font-size: 1.5rem; color: var(--clr-6); }
.sidebar ul li.sidebar-menu-item.active i,
.sidebar ul li.sidebar-menu-item.active a { color: var(--clr-white); }

.sidebar ul li.sidebar-menu-item span { display: none; white-space: nowrap; }
.sidebar.expanded ul li.sidebar-menu-item span { display: inline; }

/* ===== SUBMENU ===== */
.sidebar-submenu {
    display: none;
    list-style: none;
    padding-left: 0;
    margin-top: 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.sidebar-menu-item.open > .sidebar-submenu { display: block; max-height: 500px; }

.sidebar-submenu li a {
    display: flex;
    align-items: center;
    padding: 4px 10px 4px 50px;
    font-size: 0.9rem;
    color: var(--clr-black);
    text-decoration: none;
    border-radius: 4px;
}

.sidebar-submenu li a i { margin-right: 8px; font-size: 1rem; }

/* Submenu arrow */
.submenu-arrow { margin-left: auto; font-size: 0.75rem; transition: transform .2s ease; }
.sidebar-menu-item.open .submenu-arrow { transform: rotate(180deg); }

/* Hide submenu & arrows when sidebar collapsed */
.sidebar:not(.expanded) .sidebar-submenu,
.sidebar:not(.expanded) .submenu-arrow { display: none !important; }
.sidebar.expanded .submenu-arrow { display: inline-block; }

/* ===== CONDITIONAL CHILD HOVER ===== */
/* Parent active */
.sidebar-menu-item.active.has-submenu .sidebar-submenu li a:hover {
    background-color: var(--clr-white);
    color: var(--clr-6);
}
.sidebar-menu-item.active.has-submenu .sidebar-submenu li a:hover i { color: var(--clr-6); }

/* Parent inactive */
.sidebar-menu-item:not(.active).has-submenu .sidebar-submenu li a:hover {
    background-color: var(--clr-6);
    color: var(--clr-white);
}
.sidebar-menu-item:not(.active).has-submenu .sidebar-submenu li a:hover i { color: var(--clr-white); }

/* ===== MEDIA QUERIES ===== */
@media(max-width: 991.98px) {
    .sidebar { height: 70px; box-shadow: 0 1px 1px rgb(0 0 0 / 15%); }
    .sidebar ul { top:5px; }
    .sidebar ul li.sidebar-drawer i { font-size: 2.2rem; }
    .sidebar.expanded { width: 230px; height: 100%; }
    .sidebar ul li.sidebar-menu-item { display: none; }
    .sidebar.expanded ul li.sidebar-menu-item { display: block; }
}

@media(max-width:575.98px) {
    .sidebar { height: 70px; box-shadow: 0 1px 1px rgb(0 0 0 / 15%); }
    .sidebar ul { top:10px; }
    .sidebar ul li.sidebar-drawer i { font-size: 2rem; margin-right:5px; }
    .sidebar.expanded { width: 200px; height: 100%; background-color: var(--clr-white); }
    .sidebar.expanded ~ .top-nav.show-side-bar { left: 68px; width: calc(100% - 68px); }
    .sidebar.expanded ul li.sidebar-menu-item span { font-size: 1rem; }
}