@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ═══════════════════════════════════════════════════════
   HIJAUVOTE — Tema moden (fresh & lapang)
   Link di SEMUA HTML pages, SELEPAS app.css:
   <link rel="stylesheet" href="assets/app.css">
   <link rel="stylesheet" href="assets/pas-theme.css">
════════════════════════════════════════════════════════ */

:root {
  /* nama lama (keserasian) */
  --pas-dk:#06762f; --pas:#0a8a3c; --pas-md:#0a8a3c; --pas-lt:#eaf6ee;
  --pas-bd:#e7efe9; --pas-bg:#f5f8f5; --pas-card:#ffffff;
  --pas-mu:#5d6f64; --pas-fg:#10241a; --gold:#b8860b;
  /* nama baharu (dipakai index.html / komponen moden) */
  --pas2:#06762f; --pas-light:#eaf6ee; --gold-pas:#b8860b;
  --bg:#f5f8f5; --surface:#ffffff; --surface2:#f0f5f1;
  --ink:#10241a; --muted:#5d6f64; --faint:#93a299;
  --line:#e7efe9; --line2:#d8e6db;
  --r-sm:9px; --r-md:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(16,50,30,.04); --shadow-h:0 8px 22px rgba(16,50,30,.08);
}

/* ── Global ── */
html, body { background: var(--bg) !important; color: var(--ink) !important; }
body { font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
       letter-spacing:-.01em; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { letter-spacing:-.02em; }

/* ── Nav (hijau rata, tiada gradien berat) ── */
.nav {
  background: var(--pas) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
}
.nav a, .nav span, .nav div { color: rgba(255,255,255,.92) !important; }
.nav .brand, .nav .brand-name { color:#fff !important; font-weight:700 !important; }
.nav .pill { background: rgba(255,255,255,.18) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important; }
.nav .btn { background: rgba(255,255,255,.15) !important; color:#fff !important; border:1px solid rgba(255,255,255,.25) !important; }
.nav .btn:hover { background: rgba(255,255,255,.25) !important; }

/* ── Tabs ── */
.tabs { background:#fff !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; }
.tabs a { color: var(--muted) !important; font-weight:600 !important;
          border-bottom:2.5px solid transparent !important; transition:color .15s,border-color .15s !important; }
.tabs a:hover { color: var(--pas) !important; }
.tabs a.active, .tabs a[class*="active"] { color: var(--pas) !important; border-bottom-color: var(--pas) !important; font-weight:700 !important; }

.wrap { background: transparent !important; }

/* ── Filter bar ── */
.filter-bar { background:#fff !important; border:1px solid var(--line) !important;
              border-radius: var(--r-md) !important; box-shadow: var(--shadow) !important; }

/* ── KPI cards ── */
.kpi { background:#fff !important; border:1px solid var(--line) !important;
       border-radius: var(--r-lg) !important; box-shadow: var(--shadow) !important;
       padding:16px 18px !important; transition: transform .16s ease, box-shadow .16s ease !important; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-h) !important; }
.kpi .lbl { color: var(--muted) !important; font-weight:500 !important; text-transform:none !important; letter-spacing:0 !important; font-size:12px !important; }
.kpi .val { color: var(--ink) !important; font-weight:700 !important; font-size:26px !important; letter-spacing:-.025em !important; }
.kpi .sub { color: var(--faint) !important; }
.kpi.gn .val { color: var(--pas) !important; }
.kpi.or .val { color: var(--gold) !important; }
.kpi.pp .val, .kpi.bl .val { color:#1a6fa8 !important; }

/* ── Cards ── */
.card { background:#fff !important; border:1px solid var(--line) !important;
        border-radius: var(--r-lg) !important; box-shadow: var(--shadow) !important; }
.card h2 { color: var(--ink) !important; font-weight:600 !important; }
.card .text-mu { color: var(--muted) !important; }
.card .card { background: var(--surface2) !important; border-color: var(--line2) !important; }

/* ── Tables ── */
table { border-color: var(--line) !important; }
th { background: var(--surface2) !important; color: var(--muted) !important; border-color: var(--line2) !important; }
td { border-color: var(--line) !important; color: var(--ink) !important; }
tr:hover td { background: var(--surface2) !important; }

/* ── Forms ── */
input, select, textarea {
  background:#fff !important; border:1px solid var(--line2) !important;
  color: var(--ink) !important; border-radius: var(--r-sm) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--pas) !important; box-shadow: 0 0 0 3px var(--pas-light) !important; outline:none !important;
}
input::placeholder, textarea::placeholder { color: var(--faint) !important; }
label { color: var(--muted) !important; font-weight:600 !important; }

/* ── Buttons ── */
.btn { border-radius: var(--r-sm) !important; font-weight:600 !important; }
.btn-primary, .btn[class*="primary"] { background: var(--pas) !important; color:#fff !important; border:none !important; }
.btn-ghost { background:#fff !important; border:1px solid var(--line2) !important; color: var(--muted) !important; }
.btn-ghost:hover { background: var(--surface2) !important; border-color: var(--pas) !important; }
.btn-danger { background:#dc2626 !important; color:#fff !important; border:none !important; }
.btn-success { background: var(--pas) !important; color:#fff !important; border:none !important; }

/* ── Pills ── */
.pill { border-radius:20px !important; font-weight:600 !important; }

/* ── Bars ── */
.bar-track { background: var(--surface2) !important; border-radius:6px !important; }
.bar-label { color: var(--ink) !important; }
.bar-value { color: var(--ink) !important; font-weight:700 !important; }

/* ── Sidebar / Dropdown ── */
.sidebar, .dropdown-menu { background:#fff !important; border:1px solid var(--line) !important; box-shadow: var(--shadow-h) !important; }

/* ── Loading / Empty / Error ── */
.loading { color: var(--muted) !important; }
.empty   { color: var(--muted) !important; }
.error-box { background:#fdecea !important; border-color:#f5c2bc !important; color:#b3261e !important; }

/* ── Pagination ── */
.page-btn { border:1px solid var(--line2) !important; color: var(--muted) !important; border-radius: var(--r-sm) !important; }
.page-btn.active { background: var(--pas) !important; color:#fff !important; border-color: var(--pas) !important; }

/* ── Modal ── */
.modal, .dialog, [class*="modal"], [class*="dialog"] {
  background:#fff !important; border:1px solid var(--line) !important;
  border-radius: var(--r-lg) !important; box-shadow: 0 20px 60px rgba(16,50,30,.18) !important;
}

/* ── Login ── */
.login-wrap, .login-page, body.login { background: var(--pas) !important; }
.login-box, .login-card { background:#fff !important; border-radius: var(--r-lg) !important; box-shadow: 0 12px 40px rgba(16,50,30,.22) !important; }
.login-logo, .login-title { color: var(--pas) !important; }
.login-sub { color: var(--muted) !important; }
.login-btn, .btn-login { background: var(--pas) !important; color:#fff !important; border:none !important; border-radius: var(--r-md) !important; font-weight:700 !important; }

/* ── Misc ── */
.voter-row, .pemilih-row { border-bottom:1px solid var(--line) !important; }
.voter-row:hover { background: var(--surface2) !important; }
[class*="badge-"], [class*="status-"] { border-radius: var(--r-sm) !important; font-weight:600 !important; }
.vcc-card { background:#fff !important; border:1px solid var(--line) !important; border-radius: var(--r-md) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: var(--pas); }

select option { background:#fff; color: var(--ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--pas) !important; }
a { color: var(--pas) !important; }
a:hover { color: var(--pas2) !important; }
.nav a, .tabs a, .btn { text-decoration:none !important; }