/* ========================================
   PKB Data Center — Design System v2 "Buku Data"
   Style : Editorial Grid (ui-ux-pro-max: editorial-grid-magazine),
           diadaptasi untuk dashboard padat (density 8).
   Fonts : Newsreader (judul & angka besar) + Public Sans (UI, tabel)
   Warna : hijau PKB tua di atas kertas hangat, aksen oker.
           Garis tipis, tanpa bayangan dekoratif, tanpa gradien.
   Nama class & token lama dipertahankan → markup tidak perlu diubah.
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    /* ---- Brand: hijau PKB tua ---- */
    --pkb-green: #0F6B3E;           /* 6.6:1 di atas putih */
    --pkb-green-light: #2E8B57;
    --pkb-green-dark: #0A4A2B;
    --pkb-green-tint: #E8F0EA;

    /* ---- Aksen: oker (sorotan, bukan teks kecil) ---- */
    --gold: #B7791F;
    --gold-light: #D69E2E;
    --gold-text: #8A5A12;           /* versi teks: 5.9:1 */
    --warm: #B4532A;
    --warm-soft: #D9825B;

    /* alias lama */
    --primary-blue: #0F6B3E;
    --primary-blue-light: var(--gold);
    --brand: var(--pkb-green);

    /* ---- Status ---- */
    --danger-red: #B42318;
    --warning-orange: #B7791F;
    --success-green: #1E7B45;

    /* ---- Permukaan (kertas) ---- */
    --bg-app: #F4F2EB;              /* kanvas: kertas hangat */
    --bg-dark: #FAF8F3;             /* nama lama, kini surface muted terang */
    --bg-card: #FFFEFB;
    --bg-card-hover: #FAF8F3;
    --bg-muted: #F1EEE5;
    --bg-light: #F1EEE5;            /* alias dipakai inline */

    /* ---- Tinta ---- */
    --ink: #1B1D1A;
    --text-primary: #1B1D1A;        /* 15.9:1 */
    --text-secondary: #4A4E47;      /* 8.4:1 */
    --text-muted: #6A6D64;          /* 5.2:1 di atas putih, 4.7:1 di kertas */
    --text-invert: #FFFFFF;

    --border-color: #E4E0D4;        /* garis rambut */
    --border-strong: #CDC7B6;
    --border: var(--border-color);
    --rule: #1B1D1A;                /* garis tebal ala koran */

    /* bayangan nyaris tidak dipakai — hanya untuk lapisan melayang */
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: 0 12px 32px -12px rgba(27, 29, 26, 0.25);
    --shadow-focus: 0 0 0 3px rgba(15, 107, 62, 0.22);

    --radius-sm: 3px;
    --radius: 4px;
    --radius-lg: 6px;

    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-ui: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --sidebar-w: 240px;
    --topbar-h: 56px;

    /* sidebar gelap */
    --side-bg: #0E2A1D;
    --side-text: #DCE5DE;
    --side-muted: #93A89A;          /* 6.1:1 di atas --side-bg */
    --side-hover: rgba(255, 255, 255, 0.06);
    --side-line: rgba(255, 255, 255, 0.09);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-ui);
    font-size: 15px;
    background: var(--bg-app);
    color: var(--text-primary);
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    line-height: 1.2;
    text-wrap: balance;
}
h4, h5 { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; }

/* angka: Public Sans dengan angka tabular, bukan font mono */
.value, .metric-card .value, .data-table td, .mono {
    font-variant-numeric: tabular-nums lining-nums;
}
code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.88em;
    background: var(--bg-muted);
    padding: 1px 5px;
    border-radius: 2px;
}

a { color: var(--pkb-green); text-decoration: none; }
a:hover { color: var(--pkb-green-dark); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: rgba(183, 121, 31, 0.25); }

/* ============================================
   APP SHELL — sidebar + topbar + main
   ============================================ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--side-bg);
    color: var(--side-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 22px var(--space-5) 20px;
    border-bottom: 1px solid var(--side-line);
    text-decoration: none;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand .logo {
    width: 36px; height: 36px;
    background: transparent;
    border: 1.5px solid var(--gold-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; color: var(--gold-light); font-size: 0.8em; letter-spacing: 0.04em;
    flex-shrink: 0;
}
.sidebar-brand h1 {
    font-family: var(--font-display);
    font-size: 1.12em; font-weight: 600; color: #fff; line-height: 1.15;
}
.sidebar-brand small {
    display: block; font-size: 0.66em; color: var(--side-muted); font-weight: 500;
    letter-spacing: 0.03em; text-transform: uppercase; margin-top: 3px; white-space: nowrap;
}

.nav-section {
    padding: var(--space-5) var(--space-5) var(--space-2);
    font-size: 0.66em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--side-muted);
}

.nav-menu { list-style: none; padding: 0 var(--space-2); display: flex; flex-direction: column; gap: 1px; }
.nav-menu a {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 36px;
    padding: 7px var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--side-text);
    font-size: 0.88em; font-weight: 500;
    position: relative;
    transition: background 0.15s, color 0.15s;
}
.nav-menu a svg { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 1.6; color: var(--side-muted); }
.nav-menu a:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
.nav-menu a.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 600;
}
.nav-menu a.active::before {
    content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px;
    width: 3px; background: var(--gold-light); border-radius: 0 2px 2px 0;
}
.nav-menu a.active svg { color: var(--gold-light); }

/* ===== Parent menu buka-tutup (native <details>) ===== */
.nav-group { padding: 0 var(--space-2); margin-top: var(--space-2); }
.nav-group > summary {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 36px;
    padding: 7px var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--side-text);
    font-size: 0.88em; font-weight: 600;
    cursor: pointer; list-style: none; user-select: none;
    transition: background 0.15s, color 0.15s;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary .nav-ic { display: inline-flex; flex-shrink: 0; color: var(--side-muted); }
.nav-group > summary .nav-ic svg { width: 17px; height: 17px; stroke-width: 1.6; }
.nav-group > summary:hover { background: var(--side-hover); color: #fff; }
.nav-group > summary .caret {
    margin-left: auto; display: inline-flex; flex-shrink: 0;
    transition: transform 0.18s ease; color: var(--side-muted);
}
.nav-group > summary .caret svg { width: 13px; height: 13px; }
.nav-group[open] > summary .caret { transform: rotate(90deg); }
.nav-group.has-active > summary { color: #fff; }
.nav-group.has-active > summary .nav-ic { color: var(--gold-light); }
/* anak menu: garis vertikal tipis sebagai penanda hierarki */
.nav-group .nav-menu {
    padding: 2px 0 var(--space-2) 0;
    margin-left: 20px;
    border-left: 1px solid var(--side-line);
}
.nav-group .nav-menu a { padding-left: var(--space-4); font-weight: 400; color: var(--side-muted); }
.nav-group .nav-menu a:hover, .nav-group .nav-menu a.active { color: #fff; }
.nav-group .nav-menu a svg { display: none; }
.nav-group .nav-menu a.active::before { left: -1px; top: 8px; bottom: 8px; width: 2px; }

.sidebar-footer { margin-top: auto; padding: var(--space-3) 0 var(--space-4); border-top: 1px solid var(--side-line); }
.sidebar-footer .nav-menu { padding: 0 var(--space-2) !important; }

/* main area */
.main-area {
    flex: 1;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    height: var(--topbar-h);
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-8);
    position: sticky; top: 0; z-index: 900;
}
.topbar .page-title {
    font-size: 0.78em; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted);
}
.topbar .topbar-spacer { margin-left: auto; }
.topbar .topbar-date { font-size: 0.82em; color: var(--text-muted); }
.topbar .topbar-user { display: flex; align-items: center; gap: var(--space-2); font-size: 0.86em; color: var(--text-secondary); font-weight: 500; }
.topbar .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--pkb-green-tint);
    border: 1px solid var(--border-strong);
    color: var(--pkb-green-dark); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.76em;
}

.nav-toggle {
    display: none;
    background: none; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary); cursor: pointer;
    width: 40px; height: 40px; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }
.sidebar-backdrop { display: none; }

/* ============================================
   HERO → kepala halaman ala laporan (tanpa kotak, tanpa gradien)
   ============================================ */
.hero {
    background: none;
    color: var(--text-primary);
    padding: var(--space-2) 0 var(--space-5);
    margin-bottom: var(--space-6);
    border-bottom: 2px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "kicker kicker" "title title" "sub sub";
    column-gap: var(--space-6);
}
.hero .info-badge {
    grid-area: kicker;
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 0;
    font-size: 0.74em; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--pkb-green);
    margin-bottom: 10px;
    order: -1;
}
.hero .info-badge::before {
    content: ''; width: 18px; height: 2px; background: var(--gold); display: inline-block;
}
.hero h2 {
    grid-area: title;
    font-size: clamp(1.7em, 2.6vw, 2.35em);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.015em;
}
.hero .subtitle {
    grid-area: sub;
    font-size: 1em; color: var(--text-secondary);
    max-width: 68ch;
}

/* ============================================
   CONTAINER
   ============================================ */
.container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-8) var(--space-8) var(--space-6);
}

/* ============================================
   METRIC CARDS (KPI) — strip angka dengan garis atas
   ============================================ */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));   /* 6 kartu KPI muat 1 baris */
    gap: 0;
    margin-bottom: var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.metrics-grid > .metric-card { border: none; border-radius: 0; border-right: 1px solid var(--border-color); }
.metrics-grid > .metric-card:last-child { border-right: none; }

.metric-card {
    background: var(--bg-card);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    position: relative;
    transition: background 0.15s;
}
.metric-card::before {
    content: ''; position: absolute; top: -1px; left: var(--space-5);
    width: 28px; height: 3px;
    background: var(--gold);
}
.metric-card.pkb::before { background: var(--pkb-green); }
.metric-card.win::before { background: var(--success-green); }
.metric-card.loss::before { background: var(--danger-red); }
.metric-card.warn::before { background: var(--warning-orange); }

a:hover > .metric-card, .metric-card[style*="cursor"]:hover { background: var(--bg-card-hover); }

.metric-card .label {
    font-size: 0.72em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 8px;
}
.metric-card .value {
    font-family: var(--font-display);
    font-size: 2.15em;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.05;
    margin: 2px 0;
    letter-spacing: -0.01em;
}
.metric-card.pkb .value { color: var(--pkb-green-dark); }
.metric-card .value.highlight-positive { color: var(--success-green); }
.metric-card .value.highlight-negative { color: var(--danger-red); }
.metric-card .sublabel { font-size: 0.8em; color: var(--text-muted); margin-top: 6px; }

/* ============================================
   SECTION / PANEL
   ============================================ */
.section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    border: 1px solid var(--border-color);
}
.section h3 {
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: baseline; gap: var(--space-2);
}
.section h3 .icon { display: none; }

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

/* ============================================
   CHART CONTAINER
   ============================================ */
.chart-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin: var(--space-4) 0;
    border: 1px solid var(--border-color);
}
.chart-container h4 { font-size: 0.82em; margin-bottom: var(--space-4); color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.chart { width: 100%; min-height: 350px; }

/* ============================================
   TABLES — gaya tabel laporan: garis tinta di kepala, garis rambut antar baris
   ============================================ */
.data-table-wrapper {
    overflow-x: auto;
    border-radius: 0;
    border: none;
    border-top: 2px solid var(--rule);
    margin: var(--space-4) 0;
    background: var(--bg-card);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.data-table th {
    background: var(--bg-card);
    padding: 10px var(--space-4);
    text-align: left;
    font-weight: 600;
    font-family: var(--font-ui);
    color: var(--text-secondary);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: sticky; top: 0;
    white-space: nowrap;
    border-bottom: 1px solid var(--rule);
}
.data-table td { padding: 9px var(--space-4); border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.12s; }
.data-table tbody tr:hover { background: var(--bg-card-hover); }
/* Simulasi Kursi: hasil bagi yang belum mendapat kursi */
.data-table tr.sk-tanpa-kursi td { background: #E2E2DF; color: var(--text-primary); }
.data-table tr.pkb-row { background: var(--pkb-green-tint); font-weight: 600; }
.data-table tr.pkb-row td:first-child { box-shadow: inset 3px 0 0 var(--pkb-green); }
.data-table tr.pkb-row:hover { background: #DDE9E0; }
.data-table strong { font-weight: 700; }
/* Tabel lebar: kolom pertama menempel saat digeser horizontal. */
.data-table--sticky1 th:first-child,
.data-table--sticky1 td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--bg-card);
    box-shadow: 1px 0 0 var(--border-color);
}
.data-table--sticky1 th:first-child { z-index: 2; }

/* ============================================
   BADGES — label kotak kecil, bukan pil
   ============================================ */
.badge {
    display: inline-flex; align-items: center;
    padding: 1px 7px; border-radius: 2px;
    font-size: 0.76em; font-weight: 600;
    font-family: var(--font-ui);
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.badge.green  { background: var(--pkb-green-tint); color: var(--pkb-green-dark); border-color: #C9DCCF; }
.badge.red    { background: #FBEDEB; color: #9A1C13; border-color: #EFCFCB; }
.badge.orange { background: #FBF1E1; color: var(--gold-text); border-color: #EBD7B4; }
.badge.blue   { background: #EAF0F6; color: #24507A; border-color: #CCDAE8; }

/* Tabel Mapping TPS → RW → RT */
.tabel-mapping td { vertical-align: top; }
.tabel-mapping .col-tps {
    background: var(--bg-light);
    border-right: 1px solid var(--border-strong);
}
.tabel-mapping .tps-total {
    font-size: 0.78em; font-weight: 500;
    color: var(--text-muted); margin-top: 2px;
}
.tabel-mapping .col-rw { white-space: nowrap; color: var(--gold-text); }
.tabel-mapping tr.tps-mulai > td { border-top: 1px solid var(--border-strong); }
.tabel-mapping .rt-badge {
    margin: 2px 3px 2px 0;
    background: var(--pkb-green-tint); color: var(--pkb-green-dark);
}
.tabel-mapping .rt-badge em { font-style: normal; opacity: 0.7; margin-left: 3px; }

/* Tabel Korelasi demografi × hasil PKB */
.tabel-korelasi td { vertical-align: middle; }
.tabel-korelasi .korelasi-juara,
.tabel-korelasi .korelasi-muted { font-size: 0.78em; color: var(--text-muted); margin-left: 4px; }
.tabel-korelasi .korelasi-dominan { font-size: 0.85em; font-weight: 600; }
/* Bar rasio L/P */
.lp-bar {
    display: flex; height: 8px; border-radius: 1px; overflow: hidden;
    background: var(--bg-light); min-width: 120px; margin-bottom: 4px;
}
.lp-bar .lp-l { background: var(--pkb-green); }
.lp-bar .lp-p { background: var(--gold); }
.lp-teks { font-size: 0.76em; color: var(--text-secondary); white-space: nowrap; }
.lp-teks em { font-style: normal; color: var(--text-muted); }

/* Stacked bar 4 rentang usia */
.usia-bar {
    display: flex; height: 22px; border-radius: 2px; overflow: hidden;
    background: var(--bg-light); min-width: 240px;
}
.usia-bar > span {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.72em; font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow: hidden; transition: filter .12s;
}
.usia-bar > span:hover { filter: brightness(1.1); }
.usia-bar .u-pemula { background: #4E9A6B; }
.usia-bar .u-muda   { background: var(--pkb-green); }
.usia-bar .u-dewasa { background: var(--gold); }
.usia-bar .u-senior { background: #7A4E12; }

.usia-legend {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin-bottom: 12px; font-size: 0.82em; color: var(--text-secondary);
}
.usia-legend span { display: inline-flex; align-items: center; gap: 6px; }
.usia-legend i { width: 10px; height: 10px; border-radius: 1px; display: inline-block; }
.usia-legend .l-pemula { background: #4E9A6B; }
.usia-legend .l-muda   { background: var(--pkb-green); }
.usia-legend .l-dewasa { background: var(--gold); }
.usia-legend .l-senior { background: #7A4E12; }

/* Detail pemilih (Mapping) */
.detail-pemilih-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.btn-download {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--pkb-green); color: #fff; text-decoration: none;
    padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.88em;
    white-space: nowrap; transition: background .15s;
}
.btn-download:hover { background: var(--pkb-green-dark); color: #fff; text-decoration: none; }

/* Banner desa aktif */
.desa-aktif-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.desa-aktif-banner .label-mini {
    font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted); font-weight: 600;
}

/* ============================================
   FILTER BAR — baris kontrol polos di atas konten
   ============================================ */
.filter-bar {
    display: flex; gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap; align-items: flex-end;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0 0 var(--space-5);
}
.filter-bar label { font-size: 0.72em; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.filter-field { display: flex; flex-direction: column; gap: 5px; }
.filter-scope {
    font-family: var(--font-display);
    font-size: 1.05em; font-weight: 600; color: var(--text-primary);
    align-self: flex-end; padding-bottom: 8px;
}
.filter-bar select, .filter-bar input {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    padding: 8px 12px;
    min-height: 38px;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    font-family: inherit;
    min-width: 160px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-bar select:hover, .filter-bar input:hover { border-color: var(--text-muted); }
.filter-bar select:focus, .filter-bar input:focus {
    outline: none;
    border-color: var(--pkb-green);
    box-shadow: var(--shadow-focus);
}
.filter-bar select:disabled { background: var(--bg-muted); color: var(--text-muted); cursor: not-allowed; }

/* ============================================
   SWOT GRID — empat kuadran dengan label huruf
   ============================================ */
.swot-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px; margin: var(--space-5) 0;
    background: var(--border-color); border: 1px solid var(--border-color);
}
.swot-card { padding: var(--space-5); border-radius: 0; border: none; border-top: 3px solid; background: var(--bg-card); }
.swot-card.strength    { border-top-color: var(--success-green); }
.swot-card.weakness    { border-top-color: var(--danger-red); }
.swot-card.opportunity { border-top-color: #24507A; }
.swot-card.threat      { border-top-color: var(--warning-orange); }
.swot-card h4 { font-family: var(--font-display); font-size: 1.15em; margin-bottom: var(--space-3); display: flex; align-items: center; gap: 8px; }
.swot-card ul { list-style: none; padding: 0; }
.swot-card li { padding: 6px 0 6px 16px; position: relative; font-size: 0.9em; line-height: 1.5; color: var(--text-secondary); border-top: 1px solid var(--border-color); }
.swot-card li:first-child { border-top: none; }
.swot-card li::before { content: ''; position: absolute; left: 0; top: 0.95em; width: 6px; height: 1px; background: var(--text-muted); }

/* ============================================
   INSIGHT BOX — catatan pinggir
   ============================================ */
.insight-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--pkb-green);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
}
.insight-box.warning { border-left-color: var(--warning-orange); background: #FDF8EE; }
.insight-box.danger  { border-left-color: var(--danger-red); background: #FDF3F1; }
.insight-box h4 { margin-bottom: var(--space-2); display: flex; align-items: center; gap: 8px; }
.insight-box p { color: var(--text-secondary); font-size: 0.92em; }

/* ============================================
   ACCORDION
   ============================================ */
.accordion { margin: var(--space-4) 0; border-top: 1px solid var(--border-color); }
.accordion-item { background: none; border: none; border-bottom: 1px solid var(--border-color); border-radius: 0; margin-bottom: 0; overflow: hidden; }
.accordion-header { padding: var(--space-4) var(--space-2); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; transition: background 0.15s; }
.accordion-header:hover { background: var(--bg-card-hover); }
.accordion-header .arrow { transition: transform 0.25s; color: var(--text-muted); }
.accordion-item.active .accordion-header .arrow { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 var(--space-2); }
.accordion-item.active .accordion-content { max-height: 2000px; padding: 0 var(--space-2) var(--space-4); }

/* ============================================
   ROADMAP / TIMELINE
   ============================================ */
.roadmap { position: relative; padding-left: 28px; }
.roadmap::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--border-strong); }
.roadmap-item { position: relative; padding: var(--space-3) 0 var(--space-4); margin-bottom: var(--space-2); background: none; border: none; border-bottom: 1px solid var(--border-color); border-radius: 0; }
.roadmap-item::before { content: ''; position: absolute; left: -25px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--pkb-green); }
.roadmap-item h4 { font-family: var(--font-display); font-size: 1.1em; color: var(--pkb-green-dark); margin-bottom: 4px; }

/* ============================================
   DERIV TREE — pohon derivasi strategi
   ============================================ */
.deriv-tree { display: flex; flex-direction: column; gap: var(--space-3); }
.deriv-empty { text-align: center; color: var(--text-muted); padding: var(--space-6); }
.deriv-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-4); font-size: 0.82em; color: var(--text-muted); }
.deriv-arrow { color: var(--text-muted); font-weight: 700; }
.analisa-parent { font-size: 0.8em; color: var(--text-muted); margin-bottom: 6px; }

.deriv-node { position: relative; }

.deriv-children {
    margin-left: 18px;
    padding-left: 22px;
    border-left: 1px solid var(--border-strong);
    display: flex; flex-direction: column; gap: var(--space-3);
    margin-top: var(--space-3);
}
.deriv-children > .deriv-node > .deriv-card::before {
    content: ''; position: absolute; left: -23px; top: 24px;
    width: 21px; height: 1px; background: var(--border-strong);
}
.deriv-children > .deriv-node { position: relative; }

.deriv-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
}
.deriv-node--provinsi  > .deriv-card { border-top-color: var(--pkb-green); }
.deriv-node--kabupaten > .deriv-card { border-top-color: var(--gold); }
.deriv-node--kecamatan > .deriv-card { border-top-color: var(--warm); }

.deriv-card__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px; }

.deriv-level {
    font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    padding: 2px 8px; border-radius: 2px; color: #fff;
}
.deriv-level.lvl-prov { background: var(--pkb-green); }
.deriv-level.lvl-kab  { background: var(--gold-text); }
.deriv-level.lvl-kec  { background: var(--warm); }

.deriv-fase { font-size: 0.8em; font-weight: 600; color: var(--pkb-green-dark); }
.deriv-status { margin-left: auto; }
.deriv-actions { display: inline-flex; gap: 4px; margin-left: var(--space-2); }

.deriv-title { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); font-size: 1.15em; }
.deriv-desc { font-size: 0.9em; color: var(--text-secondary); margin-top: 4px; }
.deriv-target { font-size: 0.9em; color: var(--text-muted); margin-top: 4px; }
.deriv-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 0.8em; color: var(--text-muted); }

.deriv-evidence { margin-top: var(--space-3); padding-left: var(--space-3); border-left: 1px solid var(--border-strong); }
.deriv-evidence__label { font-size: 0.72em; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.deriv-evidence-add { margin-top: var(--space-2); }
.evidence-form { background: var(--bg-muted); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--space-4); margin-top: var(--space-2); }

@media (max-width: 600px) {
    .deriv-children { margin-left: 8px; padding-left: 14px; }
    .deriv-children > .deriv-node > .deriv-card::before { left: -15px; width: 13px; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    max-width: 1440px; width: 100%; margin: var(--space-6) auto 0;
    padding: var(--space-5) var(--space-8) var(--space-8);
    color: var(--text-muted); font-size: 0.8em;
    border-top: 1px solid var(--border-color);
}

/* ============================================
   LOADING
   ============================================ */
.loading { text-align: center; padding: var(--space-8); color: var(--text-muted); }
.loading::after { content: ''; display: inline-block; width: 22px; height: 22px; border: 2px solid var(--border-color); border-top-color: var(--pkb-green); border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 10px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   TABS
   ============================================ */
.tab-nav { display: flex; gap: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border-color); overflow-x: auto; }
.tab-btn { background: none; border: none; color: var(--text-muted); padding: 10px 0; min-height: 40px; cursor: pointer; font-size: 0.9em; font-weight: 500; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--text-primary); border-bottom-color: var(--rule); font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Tab halaman (dibangun JS dari [data-tab]) — menempel di bawah topbar */
.page-tabs {
    display: flex; gap: var(--space-6);
    position: sticky; top: var(--topbar-h); z-index: 800;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-strong);
    margin: 0 0 var(--space-6);
    overflow-x: auto; scrollbar-width: none;
    scroll-margin-top: var(--topbar-h);
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs [role="tab"] {
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.92em; font-weight: 500;
    color: var(--text-muted);
    min-height: 46px; padding: 12px 0 10px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.page-tabs [role="tab"]:hover { color: var(--text-primary); }
.page-tabs [role="tab"].active { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--pkb-green); }
.page-tabs [role="tab"]:focus-visible { outline-offset: -2px; }
[data-tab][hidden] { display: none !important; }

/* Comparison highlight */
.highlight-positive { color: var(--success-green); font-weight: 600; }
.highlight-negative { color: var(--danger-red); font-weight: 600; }
.highlight-neutral  { color: var(--gold-text); font-weight: 600; }

/* ============================================
   FORM (modul Manajemen)
   ============================================ */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-size: 0.84em; color: var(--text-secondary); font-weight: 600; }
.form-input, .form-select, .form-textarea {
    width: 100%; background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 9px 12px; min-height: 40px; font-size: 0.92em; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--text-muted); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: var(--pkb-green); box-shadow: var(--shadow-focus);
}
.form-input::placeholder { color: var(--text-muted); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-static { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.form-error { color: var(--danger-red); font-size: 0.8em; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid transparent; cursor: pointer;
    padding: 9px 16px; min-height: 38px; border-radius: var(--radius-sm);
    font-size: 0.88em; font-weight: 600; font-family: inherit;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none; line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { filter: brightness(0.94); }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--pkb-green); color: #fff; }
.btn-primary:hover { background: var(--pkb-green-dark); color: #fff; }
.btn-success { background: var(--pkb-green); color: #fff; }
.btn-success:hover { background: var(--pkb-green-dark); color: #fff; }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-muted); border-color: var(--text-muted); color: var(--text-primary); }
.btn-danger-link { background: none; color: var(--danger-red); padding: 4px 8px; min-height: 28px; }
.btn-danger-link:hover { text-decoration: underline; color: var(--danger-red); }
.btn-edit-link { background: none; color: var(--pkb-green-dark); padding: 4px 8px; min-height: 28px; }
.btn-edit-link:hover { text-decoration: underline; }
.btn-sm { padding: 6px 12px; min-height: 32px; font-size: 0.82em; }

/* ============================================
   ALERT
   ============================================ */
.alert-ok { background: var(--pkb-green-tint); border: 1px solid #C9DCCF; border-left: 3px solid var(--pkb-green); color: var(--pkb-green-dark); padding: 10px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: var(--space-4); font-size: 0.9em; }

/* ============================================
   TOOLBAR & LIST ROWS (modul)
   ============================================ */
.mgmt-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.list-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-color); }
.list-row:last-child { border-bottom: none; }
.list-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 2px; font-size: 0.76em; font-weight: 600; border: 1px solid transparent; }
.pill-green  { background: var(--pkb-green-tint); color: var(--pkb-green-dark); border-color: #C9DCCF; }
.pill-blue   { background: #EAF0F6; color: #24507A; border-color: #CCDAE8; }
.pill-gray   { background: var(--bg-muted); color: var(--text-secondary); border-color: var(--border-color); }
.pill-red    { background: #FBEDEB; color: #9A1C13; border-color: #EFCFCB; }
.pill-orange { background: #FBF1E1; color: var(--gold-text); border-color: #EBD7B4; }

/* Chip pemilih jenis SDM (radio) */
.jenis-chip {
    display: inline-flex; align-items: center; cursor: pointer;
    min-height: 36px; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 0.85em; font-weight: 600;
    border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-secondary);
}
.jenis-chip.active { border-color: currentColor; }
.jenis-chip--internal.active  { color: var(--pkb-green-dark); background: var(--pkb-green-tint); }
.jenis-chip--eksternal.active { color: #9A1C13; background: #FBEDEB; }
.jenis-chip--netral.active    { color: var(--text-secondary); background: var(--bg-muted); }

/* Baris analisa SDM per TPS: tint menang/kalah */
tr.sdm-menang td { background: rgba(30, 123, 69, 0.06); }
tr.sdm-kalah td  { background: rgba(180, 35, 24, 0.05); }

/* ============================================
   PAGINATION (Livewire)
   ============================================ */
/* Markup bawaan Livewire memakai class Tailwind yang tidak dimuat di layout ini,
   jadi struktur nav > [div mobile, div desktop] distyle langsung di sini. */
.pagination-wrap nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 0.85em; }
.pagination-wrap nav > div:first-child { display: none; gap: var(--space-2); }
.pagination-wrap nav > div:last-child { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.pagination-wrap p { color: var(--text-muted); }
.pagination-wrap p .font-medium { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.pagination-wrap nav > div:last-child > div:last-child > span { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pagination-wrap svg { width: 16px; height: 16px; display: block; }
.pagination-wrap button,
.pagination-wrap a,
.pagination-wrap [aria-current] > span,
.pagination-wrap span[aria-disabled] > span,
.pagination-wrap nav > div:first-child span > span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; min-height: 34px; padding: 0 10px;
    border-radius: var(--radius-sm); border: 1px solid var(--border-color);
    background: var(--bg-card); color: var(--text-secondary);
    font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pagination-wrap button:hover, .pagination-wrap a:hover { background: var(--bg-muted); border-color: var(--border-strong); color: var(--text-primary); text-decoration: none; }
.pagination-wrap [aria-current] > span { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; cursor: default; }
.pagination-wrap span[aria-disabled] > span, .pagination-wrap nav > div:first-child span > span { color: var(--text-muted); opacity: 0.6; cursor: not-allowed; }
@media (max-width: 640px) {
    .pagination-wrap nav > div:first-child { display: flex; flex: 1; justify-content: space-between; }
    .pagination-wrap nav > div:last-child { display: none; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .container { padding: var(--space-6); }
    .topbar { padding: 0 var(--space-6); }
    .footer { padding: var(--space-5) var(--space-6) var(--space-6); }
}

@media (max-width: 900px) {
    :root { --sidebar-w: 0px; }
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 260px;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    .main-area { margin-left: 0; }
    .nav-toggle { display: inline-flex; }
    .topbar .topbar-date { display: none; }
    .sidebar-backdrop.show {
        display: block; position: fixed; inset: 0;
        background: rgba(14, 42, 29, 0.45); z-index: 999;
    }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .metrics-grid > .metric-card { border-bottom: 1px solid var(--border-color); }
}

@media (max-width: 600px) {
    .container { padding: var(--space-5) var(--space-4); }
    .topbar { padding: 0 var(--space-4); }
    .footer { padding: var(--space-4); }
    .section { padding: var(--space-4); }
    .hero h2 { font-size: 1.6em; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .metrics-grid > .metric-card:nth-child(2n) { border-right: none; }
    .metrics-grid > .metric-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .metric-card .value { font-size: 1.6em; }
    .filter-bar select, .filter-bar input { min-width: 0; width: 100%; }
    .filter-field { flex: 1 1 140px; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
:focus-visible { outline: 2px solid var(--pkb-green); outline-offset: 2px; }
.sidebar :focus-visible { outline-color: var(--gold-light); }

.skip-link {
    position: absolute; left: 8px; top: -48px; z-index: 2000;
    background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 0.88em;
}
.skip-link:focus { top: 8px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state { text-align: center; padding: 56px 24px; }
/* .empty-mark juga dipakai di luar .empty-state (partials/rekap-kosong, pemilih-kosong):
   tanpa ukuran eksplisit, SVG melebar memenuhi halaman */
.empty-mark {
    width: 44px; height: 44px; margin: 0 auto 14px;
    border: 1.5px solid var(--border-strong); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.empty-mark svg { width: 20px; height: 20px; flex: none; }

/* ============================================
   EVIDENCE CARD (Strategi Partai)
   ============================================ */
.evidence-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-top: 8px;
}
.evidence-card:first-of-type { margin-top: 0; }
.evidence-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    color: var(--text-primary); font-size: 0.9em;
}
.evidence-head .evidence-dot { color: var(--pkb-green); font-weight: 700; }
.evidence-meta { font-size: 0.82em; color: var(--text-muted); font-weight: 500; }
.evidence-meta + .evidence-meta::before { content: '·'; margin-right: 8px; }
.evidence-desc { margin-top: 6px; font-size: 0.86em; color: var(--text-secondary); line-height: 1.5; }
.evidence-line { margin-top: 6px; font-size: 0.85em; color: var(--text-secondary); }
.evidence-tag {
    display: inline-block; font-size: 0.76em; font-weight: 600;
    padding: 1px 6px; border-radius: 2px; margin-right: 4px;
    background: var(--bg-muted); color: var(--text-secondary);
}
.evidence-tag.ok { background: var(--pkb-green-tint); color: var(--pkb-green-dark); }
.evidence-attach { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.evidence-thumb {
    display: block; width: 72px; height: 72px; border-radius: var(--radius-sm);
    overflow: hidden; border: 1px solid var(--border-color); flex-shrink: 0;
}
.evidence-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evidence-doc {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.84em; font-weight: 600; color: var(--pkb-green-dark);
    padding: 5px 10px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--bg-card);
    transition: background 0.15s;
}
.evidence-doc:hover { background: var(--bg-muted); text-decoration: none; }

/* ============================================
   CALEG ASSESSMENT (Strategi Caleg)
   ============================================ */
.form-section-label { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--pkb-green-dark); margin: var(--space-5) 0 var(--space-3); padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color); }

.caleg-card { background: var(--bg-card); border: 1px solid var(--border-color);
    border-top: 3px solid var(--border-strong); border-radius: var(--radius); padding: var(--space-5);
    margin-bottom: var(--space-4); }
.caleg-card--kuat        { border-top-color: var(--pkb-green); }
.caleg-card--potensial   { border-top-color: var(--gold); }
.caleg-card--pertimbangan{ border-top-color: var(--warm); }
.caleg-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.caleg-name { font-family: var(--font-display); font-size: 1.3em; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.caleg-meta { font-size: 0.85em; color: var(--text-muted); margin-top: 2px; }
.caleg-skor-all { font-family: var(--font-display); font-size: 2.2em; font-weight: 500; color: var(--pkb-green-dark); line-height: 1; font-variant-numeric: tabular-nums; }
.caleg-skor-all span { font-family: var(--font-ui); font-size: 0.38em; color: var(--text-muted); font-weight: 600; }

.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: var(--space-3) 0; border-top: 1px solid var(--border-color); }
.score-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px;
    background: none; border-bottom: 1px solid var(--border-color); border-radius: 0; font-size: 0.86em; color: var(--text-secondary); margin-right: 16px; }
.score-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.score-value.skor-hi  { color: var(--pkb-green); }
.score-value.skor-mid { color: var(--gold-text); }
.score-value.skor-lo  { color: var(--danger-red); }
.score-value.skor-nil { color: var(--text-muted); }

.caleg-analisa { font-size: 0.9em; color: var(--text-secondary); background: var(--bg-muted);
    border-radius: var(--radius-sm); padding: 10px 12px; margin: var(--space-2) 0; line-height: 1.55; }
.caleg-info-row { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 0.88em; color: var(--text-secondary); margin: var(--space-2) 0; }

.desa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0; }
.desa-tag { padding: 1px 7px; border-radius: 2px; font-size: 0.76em; font-weight: 600; }
.desa-tag.desa-basis  { background: var(--pkb-green-tint); color: var(--pkb-green-dark); }
.desa-tag.desa-target { background: #EAF0F6; color: #24507A; }
.desa-tag.desa-lemah  { background: #FBF1E1; color: var(--gold-text); }

.peluang-badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 0.74em; font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.peluang-kuat        { background: var(--pkb-green-tint); color: var(--pkb-green-dark); }
.peluang-potensial   { background: #FBF1E1; color: var(--gold-text); }
.peluang-pertimbangan{ background: #FBEDEB; color: #9A1C13; }

.rekomen-box { margin-top: var(--space-3); padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.88em; color: var(--text-secondary); line-height: 1.6; border-left: 3px solid var(--border-strong); background: var(--bg-muted); }
.rekomen-kuat        { background: #F0F5F1; border-left-color: var(--pkb-green); }
.rekomen-potensial   { background: #FDF8EE; border-left-color: var(--gold); }
.rekomen-pertimbangan{ background: #FBF2EE; border-left-color: var(--warm); }

/* Badge jumlah peringatan baru di sidebar */
.nav-badge {
    margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 2px;
    background: #C2410C; color: #fff; font-size: 0.72em; font-weight: 700;
    text-align: center; line-height: 1.7; font-variant-numeric: tabular-nums;
}

/* ============================================
   PETA STATISTIK (Overview)
   ============================================ */
.geo-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-4); }
.geo-chip {
    border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-secondary);
    padding: 6px 12px; min-height: 32px; border-radius: var(--radius-sm); font-size: 0.84em; font-family: inherit; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.geo-chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
.geo-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.geo-legenda {
    background: rgba(255, 254, 251, 0.95); padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
    font-size: 12px; color: var(--text-secondary); min-width: 170px;
}
.geo-legenda-judul { font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.geo-legenda-bar { height: 8px; border-radius: 1px; border: 1px solid var(--border-color); }
.geo-legenda-skala { display: flex; justify-content: space-between; margin-top: 3px; font-variant-numeric: tabular-nums; }
.geo-legenda-kosong { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.geo-legenda-kosong i { width: 14px; height: 10px; border-radius: 1px; display: inline-block; border: 1px solid var(--border-strong); }
.geo-legenda-nilai { font-size: 13px; color: var(--text-primary); }
.geo-tooltip { font-size: 12px; line-height: 1.45; }