:root {
    --ag-navy: #0A2E7A;
    --ag-navy-2: #061a4a;
    --ag-purple: #5B1A8C;
    --ag-maroon: #B71C1C;
    --ag-bg: #f3f5f9;
    --ag-border: #e4e8f0;
    --ag-text-muted: #667085;
    --ag-sidebar-w: 256px;
}

body {
    background: var(--ag-bg);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: .9rem;
    color: #1d2433;
}

/* ---------- sidebar ---------- */
.ag-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--ag-sidebar-w);
    background: linear-gradient(180deg, var(--ag-navy) 0%, var(--ag-navy-2) 100%);
    color: #c9d3f0; overflow-y: auto; z-index: 1040; transition: transform .2s ease;
    padding-bottom: 1.5rem;
}
.ag-brand {
    display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.1rem 1rem;
    color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08);
}
.ag-brand:hover { color: #fff; }
.ag-brand small { font-size: .7rem; }
.ag-brand-icon {
    width: 38px; height: 38px; border-radius: .6rem; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--ag-maroon), var(--ag-purple)); font-size: 1.2rem;
}
.ag-nav { padding-top: .4rem; }
.ag-nav a {
    display: flex; align-items: center; gap: .65rem; color: #c9d3f0; padding: .5rem .9rem;
    border-radius: .5rem; margin: .1rem .65rem; text-decoration: none; font-weight: 500;
}
.ag-nav a i { font-size: 1.05rem; opacity: .9; }
.ag-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.ag-nav a.active { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 3px 0 0 #ff8a80; }
.ag-sec { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; opacity: .55; margin: 1rem 1.3rem .3rem; }
.ag-backdrop { display: none; }

.ag-main { margin-left: var(--ag-sidebar-w); min-height: 100vh; }
.ag-topbar {
    background: #fff; border-bottom: 1px solid var(--ag-border); padding: .6rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1020;
}
.page-title { font-weight: 600; font-size: 1.1rem; margin: 0; }
.ag-avatar {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700;
    background: linear-gradient(135deg, var(--ag-navy), var(--ag-purple)); color: #fff;
}
.ag-content { padding: 1.25rem; }

@media (max-width: 991.98px) {
    .ag-sidebar { transform: translateX(-100%); }
    .ag-sidebar.show { transform: none; }
    .ag-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1035; }
    .ag-main { margin-left: 0; }
    .ag-content { padding: .9rem; }
}

/* ---------- components ---------- */
.card { border: 1px solid var(--ag-border); box-shadow: 0 1px 2px rgba(16,24,40,.04); border-radius: .75rem; }
.card-header { background: #fff; border-bottom: 1px solid var(--ag-border); font-weight: 600; }
.kpi { display: flex; align-items: center; gap: .9rem; }
.kpi-icon { width: 46px; height: 46px; border-radius: .7rem; display: grid; place-items: center; font-size: 1.35rem; flex-shrink: 0; }
.kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.kpi-label { color: var(--ag-text-muted); font-size: .78rem; }
.bg-navy-soft { background: #e8eefc; color: var(--ag-navy); }
.bg-green-soft { background: #e3f6ec; color: #0f7b44; }
.bg-red-soft { background: #fde8e8; color: var(--ag-maroon); }
.bg-amber-soft { background: #fff4de; color: #a15c00; }
.bg-purple-soft { background: #f1e8fb; color: var(--ag-purple); }

.table { --bs-table-bg: transparent; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #5b6475;
    background: #f7f8fb; white-space: nowrap; border-bottom-width: 1px;
}
.table td { vertical-align: middle; }
.table-sm td, .table-sm th { padding: .4rem .5rem; }

.thumb { width: 42px; height: 42px; object-fit: cover; border-radius: .4rem; cursor: zoom-in; border: 1px solid var(--ag-border); }
.thumb-lg { width: 100%; max-height: 260px; object-fit: cover; border-radius: .6rem; cursor: zoom-in; border: 1px solid var(--ag-border); }
.flag-badge { font-size: .68rem; font-weight: 500; }
.code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.muted { color: var(--ag-text-muted); }
.filter-bar { background: #fff; border: 1px solid var(--ag-border); border-radius: .75rem; padding: .75rem; margin-bottom: 1rem; }
.filter-bar .form-label { font-size: .72rem; text-transform: uppercase; color: var(--ag-text-muted); margin-bottom: .2rem; }

.progress { height: .5rem; background: #eef1f6; }
.cov-cell { text-align: center; font-size: .72rem; font-weight: 600; min-width: 34px; }
.cov-na { background: #f7f8fb; color: #b5bccb; }
.cov-0 { background: #fde2e1; color: #9b1c1c; }
.cov-50 { background: #ffedd2; color: #9a4d00; }
.cov-80 { background: #e6f4d7; color: #3f6b12; }
.cov-100 { background: #cfeedd; color: #0b6a3a; }

.live-card { border-left: 4px solid var(--theme, var(--ag-navy)); }
.section-title { font-weight: 600; font-size: .95rem; margin-bottom: .6rem; }
#siteMap, #scanMap { height: 380px; border-radius: .6rem; border: 1px solid var(--ag-border); }

/* login */
.ag-login-bg {
    min-height: 100vh; display: grid; place-items: center; padding: 1rem;
    background: radial-gradient(1200px 600px at 10% 10%, #1b3f96 0%, transparent 60%),
                radial-gradient(900px 500px at 90% 90%, #5B1A8C 0%, transparent 55%), #071a47;
}
.ag-login-card { width: 100%; max-width: 410px; border: 0; border-radius: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); }

@media print {
    .ag-sidebar, .ag-topbar, .no-print, .dataTables_filter, .dataTables_length, .dataTables_paginate, .dataTables_info { display: none !important; }
    .ag-main { margin: 0; }
    .card { box-shadow: none; }
}