* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Roboto,sans-serif; background:#f1f5f9; color:#1e293b; }

.login-page { display:flex; justify-content:center; align-items:center; min-height:100vh; background:linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); }
.login-container { width:100%; max-width:400px; padding:16px; }
.login-box { background:#fff; border-radius:24px; padding:40px 32px; box-shadow:0 8px 32px rgba(0,0,0,0.06); }
.login-brand { text-align:center; margin-bottom:28px; }
.login-brand i { font-size:48px; color:#0b2b4a; }
.login-brand h2 { color:#0b2b4a; margin:8px 0 4px; font-size:22px; }
.login-brand p { color:#6b7a8f; font-size:14px; }
.login-footer { text-align:center; margin-top:16px; font-size:13px; }
.login-footer a { color:#6b7a8f; text-decoration:none; }
.login-footer a:hover { color:#0b2b4a; }

.admin-wrapper { display:flex; min-height:100vh; }
.sidebar { width:220px; background:#0b2b4a; color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; flex-shrink:0; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:0 20px 20px; font-size:18px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.08); height:72px; }
.sidebar-brand i { font-size:24px; }
.sidebar-nav { flex:1; padding:16px 12px; }
.sidebar-nav a { display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:10px; color:rgba(255,255,255,0.7); text-decoration:none; transition:all .2s; margin-bottom:2px; }
.sidebar-nav a:hover, .sidebar-nav a.active { background:rgba(255,255,255,0.1); color:#fff; }
.sidebar-nav a i { width:20px; text-align:center; }
.sidebar-footer { padding:16px 20px; border-top:1px solid rgba(255,255,255,0.08); }
.sidebar-footer a { color:rgba(255,255,255,0.6); text-decoration:none; display:flex; align-items:center; gap:10px; }
.sidebar-footer a:hover { color:#fff; }

.main-content { flex:1; padding:24px 32px; min-width:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.topbar h1 { font-size:22px; font-weight:700; color:#0b2b4a; }
.topbar h1 i { color:#1a5a8c; margin-right:8px; }
.topbar-user { display:flex; align-items:center; gap:8px; font-weight:500; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:28px; }
.stat-card { background:#fff; border-radius:16px; padding:20px 22px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.stat-number { font-size:32px; font-weight:700; color:#0b2b4a; }
.stat-label { font-size:13px; color:#6b7a8f; margin-top:4px; }

.card { background:#fff; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,0.04); margin-bottom:20px; overflow:hidden; }
.card-header { padding:16px 22px; border-bottom:1px solid #eef2f6; font-weight:600; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.card-body { padding:20px 22px; }

.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th { background:#f8faff; padding:10px 14px; text-align:left; font-weight:600; border-bottom:2px solid #eef2f6; white-space:nowrap; }
.data-table td { padding:10px 14px; border-bottom:1px solid #eef2f6; }
.data-table tr:hover { background:#f8faff; }
.badge { display:inline-block; padding:2px 12px; border-radius:30px; font-size:12px; font-weight:500; background:#e6edf6; color:#1e293b; }
.badge-primary { background:#0b2b4a; color:#fff; }

.toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.search-box { display:flex; gap:8px; flex-wrap:wrap; }
.search-box input, .search-box select { padding:8px 14px; border:1.5px solid #dce1e9; border-radius:30px; font-size:14px; background:#fff; min-width:120px; }
.search-box input:focus, .search-box select:focus { outline:none; border-color:#1a5a8c; }

.btn { padding:8px 18px; border-radius:30px; border:none; font-weight:600; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .2s; text-decoration:none; }
.btn-primary { background:#0b2b4a; color:#fff; }
.btn-primary:hover { background:#123a60; }
.btn-success { background:#16a34a; color:#fff; }
.btn-success:hover { background:#15803d; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-outline { background:transparent; border:1.5px solid #dce1e9; color:#1e293b; }
.btn-outline:hover { background:#f0f4fe; }
.btn-block { width:100%; justify-content:center; }
.btn-sm { padding:4px 14px; font-size:12px; }

.bar-chart { display:flex; flex-direction:column; gap:8px; }
.bar-item { display:flex; align-items:center; gap:12px; }
.bar-label { width:100px; font-size:13px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { flex:1; height:20px; background:#eef2f6; border-radius:10px; overflow:hidden; }
.bar-fill { height:100%; background:#0b2b4a; border-radius:10px; transition:width .5s; }
.bar-value { width:40px; font-size:13px; font-weight:600; text-align:right; }

.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:600; font-size:14px; margin-bottom:4px; }
.form-group .required { color:#dc2626; margin-left:2px; }
.form-control { width:100%; padding:10px 14px; border:1.5px solid #dce1e9; border-radius:10px; font-size:14px; background:#fafbfc; transition:border .2s; font-family:inherit; }
.form-control:focus { outline:none; border-color:#1a5a8c; box-shadow:0 0 0 3px rgba(26,90,140,0.08); background:#fff; }

@media (max-width:768px) {
    .sidebar { width:60px; padding:12px 0; }
    .sidebar-brand span, .sidebar-nav a span, .sidebar-footer a span { display:none; }
    .sidebar-nav a { justify-content:center; padding:12px; }
    .sidebar-nav a i { font-size:18px; }
    .sidebar-brand { justify-content:center; padding:0 0 16px; height:60px; }
    .main-content { padding:16px; }
    .stats-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
    .stats-grid { grid-template-columns:1fr; }
    .bar-label { width:70px; font-size:12px; }
    .toolbar { flex-direction:column; align-items:stretch; }
    .search-box { flex-direction:column; }
    .search-box input, .search-box select { min-width:auto; }
    .sidebar { width:50px; }
    .main-content { padding:12px; }
}