:root{
--primary:#2563EB;
--success:#10B981;
--warning:#F59E0B;
--danger:#EF4444;
--purple:#8B5CF6;
--sidebar:#081A33;
--bg:#F8FAFC;
}

body{
background:#f4f6f9;
font-family:'Segoe UI',sans-serif;
}

.sidebar{
position:fixed;
left:0;
top:0;
width:260px;
height:100vh;
background:linear-gradient(
180deg,
#081A33,
#102A4D
);
color:white;
overflow:auto;
}

.content{
margin-left:260px;
padding:25px;
}

.card-modern{
border:none;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.kpi{
padding:25px;
border-radius:20px;
color:white;
min-height:140px;
}

.kpi-blue{
background:linear-gradient(
135deg,
#2563EB,
#3B82F6
);
}

.kpi-green{
background:linear-gradient(
135deg,
#10B981,
#34D399
);
}

.kpi-orange{
background:linear-gradient(
135deg,
#F59E0B,
#FBBF24
);
}

.kpi-purple{
background:linear-gradient(
135deg,
#8B5CF6,
#A78BFA
);
}

.health{
font-size:70px;
font-weight:bold;
color:#10B981;
text-align:center;
}

.topbar{
background:white;
padding:15px 25px;
border-radius:20px;
margin-bottom:25px;
box-shadow:0 10px 25px rgba(0,0,0,.05);
}

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

.dark-mode .card-modern{
background:#1e293b;
color:white;
}

.dark-mode .topbar{
background:#1e293b;
}

.logo{
padding:25px;
display:flex;
gap:15px;
align-items:center;
border-bottom:1px solid rgba(255,255,255,.1);
}

.menu{
padding:15px;
}

.menu a{
display:block;
padding:14px 18px;
margin-bottom:8px;
border-radius:12px;
color:white;
text-decoration:none;
transition:.3s;
}

.menu a:hover{
background:#1D4ED8;
transform:translateX(3px);
}

.logo h4{
    color:#fff;
    font-weight:700;
}

.logo small{
    color:#94a3b8;
}

.menu a.active{
    background:#1D4ED8;
}

.content{
    margin-left:260px;
    min-height:100vh;
    background:#f4f6f9;
    padding:25px;
}

.table{
    margin-bottom:0;
}

.card-modern{
    background:#fff;
    border:none;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.card-modern .card-body{
    padding:25px;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width: 991px){

.sidebar{

left:-260px;
transition:.3s;
z-index:9999;

}

.sidebar.show{

left:0;

}

.content{

margin-left:0;
padding:15px;

}

.topbar{

flex-direction:column;
gap:15px;
align-items:flex-start !important;

}

.topbar input{

width:100% !important;

}

}

/* MOBILE */

@media (max-width:768px){

.kpi{

min-height:auto;
padding:20px;

}

.kpi h2{

font-size:24px;

}

.health{

font-size:50px;

}

.card-modern{

border-radius:15px;

}

.table{

font-size:13px;

}

}

/* EXTRA SMALL */

@media (max-width:576px){

.content{

padding:10px;

}

.topbar{

padding:15px;

}

.logo h4{

font-size:18px;

}

.kpi h2{

font-size:20px;

}

.card-modern .card-body{

padding:15px;

}

}