*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Arial}
body{background:#f4f6fb}

/* LAYOUT */
.dashboard{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{
width:240px;
background:#0b3c5d;
color:white;
padding:20px;
}
.sidebar h2{margin-bottom:20px;text-align:center}
.sidebar a{
display:block;
color:white;
text-decoration:none;
padding:10px;
margin-bottom:6px;
border-radius:6px;
font-size:15px;
}
.sidebar a:hover{background:#1976d2}

/* MAIN */
.main{flex:1}
.topbar{
background:white;
padding:12px 20px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 2px 10px rgba(0,0,0,.08)
}

.content{padding:25px}

/* CARDS */
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-bottom:25px;
}
.card{
background:white;
padding:20px;
border-radius:14px;
box-shadow:0 6px 16px rgba(0,0,0,.08)
}
.card h3{font-size:16px;color:#666}
.card h1{margin-top:8px;color:#0b3c5d}

/* TABLE */
.table-box{
background:white;
padding:20px;
border-radius:14px;
box-shadow:0 6px 16px rgba(0,0,0,.08)
}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #eee;text-align:left;font-size:14px}
th{background:#f1f3f8}
.badge{
padding:4px 10px;
border-radius:20px;
font-size:12px;
color:white;
}
.green{background:#2e7d32}
.red{background:#c62828}
.blue{background:#1565c0}

/* BUTTON */
.btn{
background:#1976d2;
color:white;
border:none;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
text-decoration:none;
font-size:13px;
}
.btn:hover{opacity:.9}