.sidebar{

position:fixed;
top:0;
left:0;
bottom:0;

width:260px;

background:
linear-gradient(
180deg,
#1e1b4b,
#312e81,
#4338ca
);

overflow-y:auto;

z-index:1000;

box-shadow:
0 10px 25px rgba(0,0,0,.15);

}

.logo{

height:72px;

display:flex;
align-items:center;
justify-content:center;

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

color:#fff;

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

}

.logo i{
margin-right:10px;
}

.menu{
padding:15px;
}

.menu-link{

display:flex;
align-items:center;
gap:12px;

height:50px;

padding:0 16px;

margin-bottom:8px;

border-radius:14px;

text-decoration:none;

color:#e2e8f0;

font-weight:700;

transition:.25s;

}

.menu-link i{

width:20px;

text-align:center;

}

.menu-link:hover{

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

color:#fff;

transform:translateX(4px);

}

.menu-link.active{

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

color:#fff;

box-shadow:
0 8px 20px rgba(255,255,255,.08);

}

.logout-link{

margin-top:20px;

color:#fecaca;

}

.logout-link:hover{

background:
rgba(239,68,68,.15);

color:#fff;

}

@media(max-width:992px){

.sidebar{

transform:
translateX(-100%);

transition:.3s;

}

.sidebar.show{

transform:
translateX(0);

}

}