/* ===================================
   SIDEBAR
=================================== */
.sidebar{

position:fixed;

top:0;

left:0;

width:260px;

height:100vh;

background:#0F172A;

transition:all .3s ease;

z-index:1000;

overflow-y:auto;

}



.sidebar-header{

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-bottom:
    1px solid rgba(255,255,255,.15);

}


.sidebar-header h2{

    font-size:22px;
    font-weight:700;

}



/* MENU */

.sidebar-menu{

    flex:1;

    padding:20px 12px;

    overflow-y:auto;

    list-style:none;

}


.sidebar-menu li{

    margin-bottom:8px;

}


.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:13px 16px;

    color:#DBEAFE;

    border-radius:12px;

    transition:.2s;

}


.sidebar-menu a:hover{

    background:
    rgba(255,255,255,.12);

    color:white;

}


.sidebar-menu a.active{

    background:white;

    color:#1E3A8A;

}


/* FOOTER */

.sidebar-footer{

    padding:18px;

    text-align:center;

    font-size:12px;

    color:#DBEAFE;

}

/* Desktop collapsed sidebar */

.sidebar.collapsed{

width:80px;

}

.sidebar.collapsed span{

display:none;

}

.sidebar.collapsed .sidebar-footer{

display:none;

}

.sidebar.collapsed a{

justify-content:center;

}

.sidebar-overlay{

position:fixed;

top:70px;

left:0;

right:0;

bottom:0;

background:rgba(0,0,0,.45);

display:none;

z-index:999;

}

.sidebar-overlay.active{

display:block;

}
/* ===================================
 MOBILE
=================================== */


/* Mobile */
@media(max-width:768px){

.sidebar{

top:70px;

height:calc(100vh - 70px);

}

}

@media(max-width:768px){

.sidebar{

transform:translateX(-100%);

width:260px;

}

.sidebar.active{

transform:translateX(0);

}

/* Ignore collapsed state on mobile */

.sidebar.collapsed{

width:260px;

}

}