/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #F1F5F9; color: #1E293B; font-size: 14px; }
a { text-decoration: none; color: inherit; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ── Layout ───────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar { width: 240px; background: #0F172A; color: #CBD5E1; display: flex; flex-direction: column; position: fixed; top:0; left:0; height:100vh; z-index:100; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:20px 16px; border-bottom:1px solid #1E293B; }
.brand-icon { font-size:28px; }
.brand-name { font-size:16px; font-weight:700; color:#F8FAFC; }
.brand-sub { font-size:11px; color:#64748B; text-transform:uppercase; letter-spacing:1px; }
.sidebar-nav { flex:1; padding:12px 8px; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:#94A3B8; transition:all .15s; margin-bottom:2px; }
.nav-item:hover { background:#1E293B; color:#E2E8F0; }
.nav-item.active { background:#1D4ED8; color:#fff; font-weight:600; }
.nav-icon { font-size:16px; width:20px; text-align:center; }
.sidebar-user { padding:12px; border-top:1px solid #1E293B; display:flex; align-items:center; gap:8px; }
.user-avatar { width:34px; height:34px; border-radius:50%; background:#1D4ED8; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.user-name { font-size:13px; font-weight:600; color:#E2E8F0; }
.user-role { font-size:10px; padding:2px 6px; border-radius:4px; display:inline-block; margin-top:2px; }
.btn-logout { margin-left:auto; font-size:18px; cursor:pointer; color:#64748B; transition:color .15s; }
.btn-logout:hover { color:#EF4444; }

/* ── Main ─────────────────────────────────────────────────── */
.main-content { margin-left:240px; flex:1; padding:24px; min-height:100vh; }

/* ── Page Header ──────────────────────────────────────────── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; }
.page-title { font-size:22px; font-weight:700; color:#0F172A; }
.page-sub { color:#64748B; font-size:13px; margin-top:2px; }

/* ── Stat Cards ───────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:#fff; border-radius:12px; padding:20px; display:flex; align-items:center; gap:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); border-left:4px solid; }
.stat-blue   { border-color:#3B82F6; } .stat-blue .stat-icon { background:#EFF6FF; color:#2563EB; }
.stat-green  { border-color:#22C55E; } .stat-green .stat-icon { background:#F0FDF4; color:#16A34A; }
.stat-orange { border-color:#F97316; } .stat-orange .stat-icon { background:#FFF7ED; color:#EA580C; }
.stat-red    { border-color:#EF4444; } .stat-red .stat-icon { background:#FEF2F2; color:#DC2626; }
.stat-purple { border-color:#A855F7; } .stat-purple .stat-icon { background:#FAF5FF; color:#9333EA; }
.stat-cyan   { border-color:#06B6D4; } .stat-cyan .stat-icon { background:#ECFEFF; color:#0891B2; }
.stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.stat-value { font-size:24px; font-weight:700; color:#0F172A; }
.stat-label { font-size:12px; color:#64748B; margin-top:1px; }
.stat-sub   { font-size:11px; color:#94A3B8; margin-top:2px; }

/* ── Cards ────────────────────────────────────────────────── */
.card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:20px; overflow:hidden; }
.card-header { padding:16px 20px; border-bottom:1px solid #F1F5F9; display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:15px; font-weight:600; color:#0F172A; }
.card-body { padding:20px; }

/* ── Grid ─────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
@media(max-width:900px) { .grid-2,.grid-3 { grid-template-columns:1fr; } }

/* ── Table ────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead tr { background:#F8FAFC; }
th { padding:10px 14px; text-align:left; font-size:12px; font-weight:600; color:#64748B; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
td { padding:12px 14px; border-top:1px solid #F1F5F9; vertical-align:middle; }
tr:hover td { background:#FAFAFA; }
.table-empty { text-align:center; color:#94A3B8; padding:32px; }

/* ── Badges ───────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge-blue   { background:#DBEAFE; color:#1D4ED8; }
.badge-green  { background:#DCFCE7; color:#16A34A; }
.badge-red    { background:#FEE2E2; color:#DC2626; }
.badge-orange { background:#FED7AA; color:#C2410C; }
.badge-purple { background:#EDE9FE; color:#7C3AED; }
.badge-gray   { background:#F1F5F9; color:#475569; }
.badge-yellow { background:#FEF9C3; color:#A16207; }
.badge-cyan   { background:#CFFAFE; color:#0E7490; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-weight:600; font-size:13px; cursor:pointer; border:none; transition:all .15s; }
.btn-primary { background:#1D4ED8; color:#fff; } .btn-primary:hover { background:#1E40AF; }
.btn-success { background:#16A34A; color:#fff; } .btn-success:hover { background:#15803D; }
.btn-danger  { background:#DC2626; color:#fff; } .btn-danger:hover  { background:#B91C1C; }
.btn-warning { background:#D97706; color:#fff; } .btn-warning:hover { background:#B45309; }
.btn-outline { background:transparent; border:1.5px solid #CBD5E1; color:#475569; } .btn-outline:hover { background:#F8FAFC; }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-xs { padding:3px 8px; font-size:11px; border-radius:6px; }

/* ── Forms ────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group.full { grid-column:1/-1; }
label { font-size:12px; font-weight:600; color:#374151; }
.form-control { padding:8px 12px; border:1.5px solid #E2E8F0; border-radius:8px; width:100%; color:#1E293B; transition:border-color .15s; background:#fff; }
.form-control:focus { outline:none; border-color:#3B82F6; }
select.form-control { cursor:pointer; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:#fff; border-radius:14px; width:90%; max-width:560px; max-height:90vh; overflow-y:auto; }
.modal-header { padding:18px 22px; border-bottom:1px solid #F1F5F9; display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:16px; font-weight:700; }
.modal-close { font-size:22px; cursor:pointer; color:#94A3B8; background:none; border:none; line-height:1; }
.modal-close:hover { color:#374151; }
.modal-body { padding:22px; }
.modal-footer { padding:14px 22px; border-top:1px solid #F1F5F9; display:flex; justify-content:flex-end; gap:10px; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:13px; }
.alert-success { background:#DCFCE7; color:#166534; border:1px solid #BBF7D0; }
.alert-error   { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
.alert-info    { background:#DBEAFE; color:#1E40AF; border:1px solid #BFDBFE; }
.alert-warning { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A; }

/* ── Search/Filter bar ────────────────────────────────────── */
.filter-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.filter-bar input, .filter-bar select { padding:7px 12px; border:1.5px solid #E2E8F0; border-radius:8px; font-size:13px; }

/* ── Login page ───────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 100%); }
.login-card { background:#fff; border-radius:16px; padding:40px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo-icon { font-size:48px; }
.login-logo-title { font-size:24px; font-weight:800; color:#0F172A; margin-top:8px; }
.login-logo-sub { color:#64748B; font-size:13px; }

/* ── Chart container ──────────────────────────────────────── */
.chart-wrap { position:relative; height:240px; }

/* ── Misc ─────────────────────────────────────────────────── */
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-muted { color:#94A3B8; }
.text-sm { font-size:12px; }
.mt-4 { margin-top:16px; }
.mb-4 { margin-bottom:16px; }
.gap-2 { gap:8px; }
.flex { display:flex; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.fw-bold { font-weight:700; }
.photo-thumb { width:48px; height:48px; object-fit:cover; border-radius:6px; cursor:pointer; }
.divider { border:none; border-top:1px solid #F1F5F9; margin:16px 0; }
.priority-high   { color:#DC2626; font-weight:700; }
.priority-medium { color:#D97706; font-weight:600; }
.priority-low    { color:#22C55E; }