/* SIDEBAR */

.sidebar{
width:280px;
background:#020617;
padding:25px;
position:fixed;
left:0;
top:0;
height:100vh;
overflow-y:auto;
border-right:1px solid rgba(255,255,255,.08);
z-index:1000;
transition:.3s;
}

.sidebar-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;
}

.logo{
font-size:32px;
font-weight:800;
color:#facc15;
}

.logo span{
color:#fff;
}

.nav-links{
display:flex;
flex-direction:column;
gap:12px;
}

.nav-links a{
display:block;
padding:15px;
background:#0f172a;
border-radius:12px;
color:#cbd5e1;
text-decoration:none;
transition:.3s;
}

.nav-links a:hover,
.nav-links a.active{
background:#facc15;
color:#000;
font-weight:700;
}

/* CLOSE BUTTON */

.close-sidebar{
display:none;
width:40px;
height:40px;
border:none;
border-radius:10px;
background:#1e293b;
color:#fff;
font-size:22px;
cursor:pointer;
}

/* OVERLAY */

.sidebar-overlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
z-index:999;
}

.sidebar-overlay.active{
display:block;
}


.topbar{
display:flex;
align-items:center;
justify-content:flex-start;
height:60px;
margin-bottom:25px;
}

.menu-btn{
display:none;
font-size:28px;
cursor:pointer;
color:#fff;
}

@media(max-width:991px){

.menu-btn{
display:block;
}

}
/* MAIN CONTENT */

.main-content{
margin-left:280px;
width:calc(100% - 280px);
min-height:100vh;
padding:25px;
box-sizing:border-box;
overflow-x:hidden;
}

/* MOBILE BUTTON */

.menu-btn{
display:none;
font-size:28px;
cursor:pointer;
user-select:none;
}

/* SCROLLBAR */

.sidebar::-webkit-scrollbar{
width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
background:#334155;
border-radius:20px;
}

/* MOBILE */

@media(max-width:991px){

.sidebar{
left:-100%;
}

.sidebar.active{
left:0;
}

.main-content{
margin-left:0;
width:100%;
padding:20px;
}

.menu-btn{
display:block;
}

.close-sidebar{
display:flex;
align-items:center;
justify-content:center;
}

.sidebar-overlay.active{
display:block;
}

}

/* SMALL DEVICES */

@media(max-width:600px){

.sidebar{

width:280px;

}

.logo{

font-size:28px;

}

.nav-links a{

padding:14px;

}

}