/* --- General --- */
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin:0; background:#f0f2f5;}
header {background:#0d6efd; color:white; padding:15px 20px; display:flex; justify-content:space-between; align-items:center;}
header a {color:white; text-decoration:none;}
.container {padding:20px; max-width:1200px; margin:auto;}
h1,h2 {margin-bottom:20px; color:#333;}
button {padding:8px 15px; background:#0d6efd; color:white; border:none; border-radius:5px; cursor:pointer;}
button:hover {background:#0b5ed7;}

/* --- Dashboard Cards --- */
.card {background:white; border-radius:10px; padding:20px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.card h3 {margin-top:0;}

/* --- Table --- */
table {width:100%; border-collapse:collapse; margin-bottom:20px; box-shadow:0 2px 5px rgba(0,0,0,0.05);}
th,td {padding:12px; text-align:left; border-bottom:1px solid #eee;}
th {background:#f8f9fa; color:#555;}

/* --- Progress bars --- */
.progress-bar {background:#e9ecef; border-radius:10px; overflow:hidden; width:100%; height:15px;}
.fill {height:100%; border-radius:10px; transition:width 0.5s;}

/* --- Responsive --- */
@media(max-width:768px){
    table,thead,tbody,th,td,tr {display:block;}
    th {position:absolute; left:-9999px;}
    td {position:relative; padding-left:50%; border:none; border-bottom:1px solid #eee;}
    td:before {position:absolute; left:15px; width:45%; white-space:nowrap; font-weight:bold; content:attr(data-label);}
}
