:root {
    --navy: #102a43;
    --navy-light: #243b53;
    --teal: #0f9f8f;
    --paper: #f4f7fb;
    --muted: #8293a6;
    --line: #e7edf3;
}

* { box-sizing: border-box; }
body { margin: 0; color: #243b53; background: var(--paper); font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; display: flex; flex-direction: column; width: 250px; padding: 27px 17px 18px; color: #d9e2ec; background: var(--navy); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 35px; color: white; text-decoration: none; font-size: 18px; font-weight: 750; letter-spacing: -.4px; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: white; background: var(--teal); font-size: 19px; }
.brand-light { color: #9fb3c8; font-weight: 500; }
.nav-caption { padding: 0 12px 10px; color: #829ab1; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.side-nav { display: grid; gap: 5px; }
.side-nav a { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 9px; color: #bcccdc; font-size: 13px; font-weight: 550; text-decoration: none; transition: .18s ease; }
.side-nav a i { width: 18px; font-size: 16px; }
.side-nav a:hover, .side-nav a.active { color: #fff; background: var(--navy-light); }
.side-nav a.active { box-shadow: inset 3px 0 var(--teal); }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 15px 10px 0; border-top: 1px solid #243b53; color: #9fb3c8; font-size: 11px; }
.sidebar-foot i { color: #45c9b6; }
.main-panel { min-height: 100vh; margin-left: 250px; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; height: 70px; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.topbar-title { color: #334e68; font-size: 14px; font-weight: 650; }
.topbar-badge { color: #718096; font-size: 11px; }
.topbar-badge i { margin-right: 5px; color: #22a06b; font-size: 8px; }
.nav-toggle { display: none; }
.page-content { max-width: 1500px; margin: auto; padding: 34px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.page-heading h1 { margin: 0 0 5px; color: #102a43; font-size: clamp(23px, 3vw, 30px); font-weight: 750; letter-spacing: -.9px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.surface, .stat-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(16,42,67,.035); }
.surface { padding: 23px; }
.stat-card { display: flex; min-height: 128px; align-items: center; justify-content: space-between; padding: 20px; }
.stat-label { color: #8293a6; font-size: 12px; font-weight: 600; }
.stat-value { margin-top: 8px; color: #102a43; font-size: 26px; font-weight: 750; letter-spacing: -.7px; }
.stat-icon { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 13px; color: #0f9f8f; background: #e5f7f4; font-size: 19px; }
.table { --bs-table-hover-bg: #f7fafc; margin: 0; font-size: 13px; }
.table thead th { padding: 12px 13px; border-bottom: 1px solid var(--line); color: #8293a6; background: #f8fafc; font-size: 10px; font-weight: 750; letter-spacing: .65px; text-transform: uppercase; white-space: nowrap; }
.table tbody td { padding: 14px 13px; border-color: #eef2f6; vertical-align: middle; }
.form-label { color: #486581; font-size: 12px; font-weight: 650; }
.form-control, .form-select { min-height: 43px; border-color: #d9e2ec; border-radius: 8px; font-size: 13px; }
.form-control:focus, .form-select:focus { border-color: #45c9b6; box-shadow: 0 0 0 .2rem rgba(15,159,143,.12); }
.btn { border-radius: 8px; font-size: 12px; font-weight: 650; }
.btn-primary { border-color: var(--teal); background: var(--teal); }
.btn-primary:hover { border-color: #087f72; background: #087f72; }
.btn-success { border-color: #16876b; background: #16876b; }
.btn-sm { padding: 6px 9px; }
.alert { border: 0; border-radius: 10px; font-size: 13px; }
.empty-state { padding: 38px 15px; color: var(--muted); text-align: center; }
.empty-state i { display: block; margin-bottom: 10px; color: #bcccdc; font-size: 25px; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.table-toolbar .form-control { max-width: 300px; }
.text-muted { color: var(--muted) !important; }
.auth-screen { display: grid; min-height: 100vh; place-items: center; padding: 22px; background: radial-gradient(circle at 20% 20%, #d7f5ef 0, transparent 36%), var(--paper); }
.auth-card { width: min(100%, 440px); padding: 35px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 18px 55px rgba(16,42,67,.09); }
.auth-brand { padding: 0 0 28px; color: var(--navy); }
.auth-brand .brand-light { color: #627d98; }
.auth-card h1 { margin: 0 0 8px; color: var(--navy); font-size: 25px; font-weight: 750; letter-spacing: -.6px; }
.auth-card p { font-size: 13px; }
@media (max-width: 850px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .nav-open .sidebar { transform: translateX(0); box-shadow: 8px 0 28px #102a4333; }
    .main-panel { margin-left: 0; }
    .topbar { height: 60px; justify-content: flex-start; gap: 14px; padding: 0 18px; }
    .nav-toggle { display: inline-flex; padding: 4px 8px; font-size: 20px; }
    .topbar-badge { margin-left: auto; }
    .page-content { padding: 24px 17px; }
}
@media (max-width: 560px) {
    .topbar-badge { display: none; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .page-heading .btn { align-self: stretch; }
    .surface { padding: 14px; }
    .table-toolbar { align-items: stretch; flex-direction: column; }
    .table-toolbar .form-control { max-width: none; }
    .auth-card { padding: 27px 22px; }
}