/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; }
body { background:#f0f4f8; color:#1a2a3a; }
.container { max-width:1400px; margin:0 auto; padding:20px; }

/* Header */
.header { background:white; padding:20px 25px; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,0.08); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; margin-bottom:25px; }
.header h1 { color:#1a3a5c; font-size:1.8rem; }
.header-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* Buttons */
.btn { padding:10px 20px; border-radius:8px; border:none; cursor:pointer; font-weight:600; text-decoration:none; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; }
.btn-login { background:#1a3a5c; color:white; }
.btn-login:hover { background:#2a5a8c; }
.btn-admin { background:#17a2b8; color:white; }
.btn-admin:hover { background:#138496; }
.btn-logout { background:#dc3545; color:white; }
.btn-logout:hover { background:#b02a37; }
.btn-back { background:#6c757d; color:white; }
.btn-back:hover { background:#5a6268; }
.btn-view { background:#2a7a4a; color:white; padding:6px 14px; font-size:0.85rem; border:none; border-radius:6px; cursor:pointer; }
.btn-view:hover { background:#1a5a3a; }

.search-input { padding:10px 16px; border:2px solid #dce1e8; border-radius:8px; font-size:1rem; width:280px; transition:border 0.3s; }
.search-input:focus { outline:none; border-color:#1a3a5c; }

.filter-section { background:white; padding:15px 20px; border-radius:8px; margin-bottom:20px; display:flex; gap:20px; flex-wrap:wrap; align-items:center; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.filter-section label { font-weight:600; font-size:0.9rem; color:#4a5a6a; }
.filter-section select { padding:8px 14px; border-radius:6px; border:1px solid #dce1e8; background:white; font-size:0.9rem; }

.table-wrapper { background:white; border-radius:12px; padding:0; box-shadow:0 2px 10px rgba(0,0,0,0.06); overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:0.9rem; }
table thead { background:#1a3a5c; color:white; }
table th { padding:14px 16px; text-align:left; font-weight:600; letter-spacing:0.3px; white-space:nowrap; }
table td { padding:12px 16px; border-bottom:1px solid #edf2f7; vertical-align:middle; }
table tbody tr:hover { background:#f8fafc; }

@media (max-width:768px) {
    .header { flex-direction:column; align-items:stretch; }
    .search-input { width:100%; }
    .header-actions { flex-direction:column; width:100%; }
    table { font-size:0.75rem; }
    table th, table td { padding:8px 6px; }
    .filter-section { flex-direction:column; align-items:stretch; }
    .admin-stats { flex-direction:column; }
}