:root{
--primary:#6366f1;
--sidebar:#1e293b;
--bg:#f8fafc;
--card:#ffffff;
}

body{
margin:0;
font-family:Inter,sans-serif;
background:var(--bg);
}

.sidebar{
position:fixed;
width:270px;
height:100vh;
background:var(--sidebar);
color:white;
overflow:auto;
}

.brand{
padding:25px;
display:flex;
gap:12px;
align-items:center;
font-size:24px;
font-weight:700;
}

.logo{
width:50px;
height:50px;
border-radius:12px;
background:var(--primary);
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
}

.sidebar ul{
list-style:none;
padding:0;
}

.sidebar li a{
display:block;
padding:15px 25px;
color:#cbd5e1;
text-decoration:none;
}

.sidebar li a:hover{
background:#334155;
color:white;
}

.main{
margin-left:270px;
}

.topbar{
height:80px;
background:white;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 25px;
box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.search-box{
display:flex;
gap:10px;
}

.search-box input{
width:350px;
padding:12px;
}

.search-box button{
padding:12px 25px;
background:#6366f1;
border:none;
color:white;
}

.top-icons{
display:flex;
gap:20px;
align-items:center;
}

.avatar{
width:45px;
height:45px;
border-radius:50%;
background:#6366f1;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-weight:bold;
}

.profile{
display:flex;
gap:12px;
align-items:center;
}

.stat-card{
background:white;
padding:25px;
border-radius:15px;
box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.card-box{
background:white;
padding:25px;
border-radius:15px;
box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.success{
color:#22c55e;
}

.danger{
color:#ef4444;
}

.dark{
background:#0f172a;
color:white;
}
.dark-mode{
background:#0f172a !important;
color:white !important;
}

.dark-mode .card,
.dark-mode .card-box,
.dark-mode .stat-card{
background:#1e293b;
color:white;
}

.dark-mode .topbar{
background:#111827;
color:white;
}
.sidebar.hide{
margin-left:-260px;
transition:.3s;
}
.sidebar.hide + .main{
margin-left:0;
}
.table{
margin-top:15px;
}

.badge{
font-size:12px;
padding:6px 10px;
}

.card-box h4{
margin-bottom:15px;
}
#toggleSidebar{
border:none;
background:none;
font-size:24px;
cursor:pointer;
}

@media(max-width:768px){

.sidebar{
transform:translateX(-270px);
z-index:999;
}

.sidebar.show{
transform:translateX(0);
}

.main{
margin-left:0;
}

.search-box input{
width:180px;
}

}
.sidebar li a{
transition:.3s;
}

.sidebar li a:hover{
padding-left:35px;
}
.stat-card,
.card-box{
transition:.3s;
}

.stat-card:hover,
.card-box:hover{
transform:translateY(-5px);
}
::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:#6366f1;
border-radius:20px;
}