body{
    background:#f4f6f9;
    overflow:hidden;
    height:100vh;
}

/* SIDEBAR */

#sidebar{
    width:250px;
    height:100vh;
    background:#212529;
    transition:all .3s ease;
    display:flex;
    flex-direction:column;
    color:white;
    position:fixed;
    left:0;
    top:0;
}

#sidebar.collapsed{
    width:70px;
}

.logo{
    font-size:20px;
    font-weight:600;
    padding:20px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

#sidebar.collapsed .logo-text{
    display:none;
}

.nav-link{
    color:#adb5bd;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 20px;
}

.nav-link:hover{
    background:#343a40;
    color:white;
    border-radius:6px;
}

.menu-text{
    transition:opacity .2s;
}

#sidebar.collapsed .menu-text{
    opacity:0;
    width:0;
    overflow:hidden;
}

.submenu{
    padding-left:40px;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
}

.submenu a{
    display:block;
    padding:6px 0;
    font-size:14px;
    color:#adb5bd;
    text-decoration:none;
}

.submenu a:hover{
    color:white;
}

.menu-item.open .submenu{
    max-height:200px;
}

.user-panel{
    margin-top:auto;
    padding:15px;
    border-top:1px solid rgba(255,255,255,0.1);
}

.user-info{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.user-info img{
    width:40px;
    height:40px;
    border-radius:50%;
}

.user-details small{
    color:#adb5bd;
}

#sidebar.collapsed .user-details{
    display:none;
}

#sidebar.collapsed .logout-text{
    display:none;
}

#content{
    margin-left:250px;
    height:100vh;
    overflow-y:auto;
    transition:margin-left .3s ease;
}

#sidebar.collapsed + #content{
    margin-left:70px;
}