:root {
    --nh-primary: #0b8fac;
    --nh-primary-dark: #08718a;
    --nh-accent: #19c6e6;
    --nh-sidebar: #0f1d26;
    --nh-sidebar-text: #b8c7d1;
    --bs-primary: #0b8fac;
    --bs-primary-rgb: 11, 143, 172;
    --bs-link-color: #0b8fac;
    --bs-link-hover-color: #08718a;
}

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.btn-primary { --bs-btn-bg: var(--nh-primary); --bs-btn-border-color: var(--nh-primary); --bs-btn-hover-bg: var(--nh-primary-dark); --bs-btn-hover-border-color: var(--nh-primary-dark); --bs-btn-active-bg: var(--nh-primary-dark); --bs-btn-disabled-bg: var(--nh-primary); --bs-btn-disabled-border-color: var(--nh-primary); }
.btn-outline-primary { --bs-btn-color: var(--nh-primary); --bs-btn-border-color: var(--nh-primary); --bs-btn-hover-bg: var(--nh-primary); --bs-btn-hover-border-color: var(--nh-primary); --bs-btn-active-bg: var(--nh-primary-dark); }
.text-bg-primary { background-color: var(--nh-primary) !important; }
.form-control:focus, .form-select:focus { border-color: var(--nh-accent); box-shadow: 0 0 0 .2rem rgba(25, 198, 230, .2); }
.form-check-input:checked { background-color: var(--nh-primary); border-color: var(--nh-primary); }
.page-link { color: var(--nh-primary); }
.active > .page-link { background-color: var(--nh-primary); border-color: var(--nh-primary); }

/* ---------- auth ---------- */
.auth-body { background: #f4f7f9; min-height: 100vh; }
.auth-wrap { display: flex; min-height: 100vh; }
.auth-hero { flex: 1; flex-direction: column; justify-content: space-between; padding: 3rem; color: #fff;
    background: linear-gradient(145deg, #0a2a36 0%, #0b6f87 60%, #0b8fac 100%); }
.auth-hero-logo { height: 56px; background: #fff; border-radius: 12px; padding: 6px 14px; }
.auth-hero h1 { font-weight: 800; letter-spacing: -.5px; }
.auth-features { list-style: none; padding: 0; margin-top: 2rem; }
.auth-features li { margin-bottom: .6rem; font-size: 1.05rem; }
.auth-features i { color: var(--nh-accent); margin-right: .5rem; }
.auth-main { flex: 0 0 520px; max-width: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fff; }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { height: 48px; }

/* ---------- panel ---------- */
.panel-body { background: #f4f7f9; }
.panel-wrap { display: flex; min-height: 100vh; }
.sidebar { width: 260px; flex: 0 0 260px; background: var(--nh-sidebar); color: var(--nh-sidebar-text); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar-brand img { height: 34px; background: #fff; border-radius: 8px; padding: 3px 8px; }
.sidebar-nav { padding: .5rem 0 2rem; }
.nav-link-top { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem 1.1rem; color: var(--nh-sidebar-text); text-decoration: none; background: none; border: 0; text-align: left; font-size: .93rem; }
.nav-link-top:hover, .nav-link-top.active { color: #fff; background: rgba(25, 198, 230, .08); }
.nav-link-top.active { border-left: 3px solid var(--nh-accent); padding-left: calc(1.1rem - 3px); }
.nav-link-top .caret { margin-left: auto; font-size: .75rem; transition: transform .2s; }
.nav-link-top.collapsed .caret { transform: rotate(-90deg); }
.nav-link-sub { display: block; padding: .38rem 1rem .38rem 2.9rem; color: var(--nh-sidebar-text); text-decoration: none; font-size: .87rem; }
.nav-link-sub:hover { color: #fff; }
.nav-link-sub.active { color: var(--nh-accent); font-weight: 600; }
.nav-link-sub.disabled { opacity: .45; cursor: default; }
.nav-link-sub .soon { font-size: .65rem; border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; margin-left: 4px; }
.panel-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; background: #fff; border-bottom: 1px solid #e6ecef; position: sticky; top: 0; z-index: 10; }
.content { padding: 1.5rem; }
.card { border: 1px solid #e6ecef; box-shadow: 0 1px 2px rgba(15, 29, 38, .04); }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; }
.stat-card .stat-icon { font-size: 1.8rem; color: var(--nh-primary); opacity: .8; }
.table > :not(caption) > * > * { vertical-align: middle; }
.perm-table th, .perm-table td { text-align: center; }
.perm-table th:first-child, .perm-table td:first-child { text-align: left; }
.qr-box svg { width: 200px; height: 200px; }
.recovery-codes { columns: 2; font-family: var(--bs-font-monospace); }

/* ---------- charts (pure CSS, CSP-friendly) ---------- */
.bar-chart { display: flex; align-items: flex-end; gap: .5rem; height: 220px; padding-top: .5rem; border-bottom: 1px solid #e6ecef; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bar-pair { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.bar-pair .bar { width: 40%; max-width: 22px; min-height: 2px; border-radius: 3px 3px 0 0; }
.bar-label { font-size: .75rem; color: #6c757d; padding-top: .25rem; }
.bar-single .bar { width: 60%; max-width: 30px; background: var(--nh-primary); }

/* ---------- print ---------- */
.print-body { background: #fff; }
@media print { .no-print { display: none !important; } .print-body { padding: 0 !important; } }

@media (max-width: 991.98px) {
    .sidebar { position: fixed; left: -270px; z-index: 1040; transition: left .2s; }
    .sidebar.open { left: 0; }
    .content { padding: 1rem; }
}