/* =====================================================================
   Tema SI-BERSINAR
   Warna diambil per piksel dari Lambang Daerah Kabupaten Kapuas.
   Struktur token, tangga jarak, radius, dan tinggi kontrol mengikuti
   sistem tata bentuk yang sudah matang; hanya nilai warnanya berbeda.

     #006F37  bidang perisai   53,5% piksel lambang   6,31:1 thd putih
     #000F54  pita motto                             17,55:1
     #FFFF00  bintang & padi   hanya di dalam lambang  1,07:1  (tak terbaca)
     #EE0000  perisai merah    hanya di dalam lambang
   Versi antarmuka kuning & merah digelapkan sampai lolos WCAG AA.
   ===================================================================== */

:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* warna lambang */
  --utama:        #006F37;
  --utama-sentuh: #005B2D;
  --utama-gelap:  #00351A;
  --utama-isi:    #E4F1EA;
  --utama-garis:  #B6D8C6;
  --pita:         #000F54;
  --pita-isi:     #E6E9F2;
  --emas:         #7A5E07;
  --emas-isi:     #FBF3D8;
  --bahaya:       #A8161B;
  --bahaya-isi:   #FBEAEA;
  --bahaya-garis: #EFC9C9;

  /* permukaan — netral dengan bias hijau, bukan abu-abu pabrik */
  --kanvas:    #F1F5F2;
  --bg:        #FFFFFF;
  --permukaan: #FFFFFF;
  --lembut:    #F6FAF7;
  --garis:     #DCE6E0;
  --garis-kuat:#C2D2C9;

  /* Permukaan mengambang di atas peta (panel, legenda, tombol bundar).
     Ia setengah tembus supaya peta di baliknya masih terasa. */
  --utama-isi-teks: #FFFFFF;
  --kaca:  rgba(255,255,255,.93);
  --kaca2: rgba(255,255,255,.97);
  /* Latar kanvas peta sebelum ubin datang. */
  --peta-latar: #E6EDE8;

  /* teks */
  --teks:   #0B2117;
  --teks-2: #33504A;
  --teks-3: #5B7268;

  /* keadaan */
  --ok: #1E8E4E;  --ok-isi: #E4F1EA;
  --awas: #96551A; --awas-isi: #FBEFE4;

  /* bentuk */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --bayang-sm: 0 1px 2px rgba(11,33,23,.06);
  --bayang-md: 0 6px 20px rgba(11,33,23,.08);
  --bayang-lg: 0 18px 44px rgba(11,33,23,.12);

  /* tata letak */
  --sisi: 268px;   /* memuat submenu Peta: peta dasar + daftar lapisan */
  --kop: 58px;
  --lebar: 1180px;
}
/* =====================================================================
   MODE GELAP

   Hanya nilai tokennya yang ditukar, bukan aturannya. Seluruh aplikasi
   DAN seluruh antarmuka mesin peta menumpang token yang sama (lihat
   alat/tema-terang.py), jadi satu blok ini membalik keduanya sekaligus
   — tidak ada tema kedua yang harus dirawat sejajar.

   Hijau lambang digunakan versi yang lebih terang: #006F37 di atas
   latar gelap rasio kontrasnya hanya 2,1:1 dan praktis tidak terbaca.
   ===================================================================== */
:root[data-tema="gelap"] {
  /* Mode gelap yang bisa dipakai seharian.
     Tiga hal yang membuat mode gelap menyakitkan mata, dan jawabannya
     di sini:
     1. Latar mendekati hitam pekat + teks mendekati putih. Rasio
        kontrasnya bisa 16:1 — lebih tajam daripada kertas putih, dan
        pupil yang sudah melebar karena gelap menerima kilatan itu
        telak. Latar diangkat ke abu-hijau sangat gelap dan teks
        diturunkan ke putih tulang: sekitar 11,8:1, masih jauh di atas
        syarat WCAG AA (4,5:1) tetapi tidak lagi menyilaukan.
     2. Warna aksen dengan kejenuhan penuh (hijau neon #4ADE80).
        Di atas latar gelap warna jenuh "bergetar" dan memaksa mata
        terus memfokus ulang. Hijau lambang di sini dinaikkan
        terangnya secukupnya untuk terbaca, lalu kejenuhannya
        DITURUNKAN.
     3. Biru pekat murni. Aberasi kromatik mata membuat biru jenuh
        tidak pernah benar-benar fokus; pita dibuat ke arah lavender
        yang lebih tenang. */
  --utama:        #6FBF91;
  --utama-sentuh: #8AD0A7;
  --utama-gelap:  #A3DCBA;
  --utama-isi:    #1A2B2299;
  --utama-garis:  #38614B;
  --pita:         #98A7D2;
  --pita-isi:     #1C2135;
  --emas:         #CDB273;
  --emas-isi:     #302A18;
  --bahaya:       #E28C8C;
  --bahaya-isi:   #341F1F;
  --bahaya-garis: #5E3434;

  /* Permukaan. Bukan hitam: hitam pekat memantulkan setiap sidik jari
     dan memberi kilau paling keras pada teks di atasnya. Semuanya
     abu-hijau gelap dengan tangga terang yang jelas, supaya panel
     bertumpuk tetap terbaca lapisannya. */
  --kanvas:    #121815;
  --bg:        #18201C;
  --permukaan: #18201C;
  --lembut:    #1E2723;
  --garis:     #2A342E;
  --garis-kuat:#3C4A42;
  --utama-isi-teks: #0C1711;
  --kaca:  rgba(24,32,28,.94);
  --kaca2: rgba(30,39,35,.97);
  --peta-latar: #121815;

  /* Teks. Putih tulang, bukan putih. */
  --teks:   #D3DDD7;
  --teks-2: #A3B3A9;
  --teks-3: #7A8B81;

  --ok: #6FBF91;  --ok-isi: #1A2B2299;
  --awas: #D2A96A; --awas-isi: #302818;

  /* Di ruang gelap bayangan hampir tak terlihat; yang memisahkan
     panel dari latarnya adalah tangga terang di atas, bukan bayangan.
     Maka bayangan dibuat lebih tipis agar tepinya tidak menghitam. */
  --bayang-sm: 0 1px 2px rgba(0,0,0,.42);
  --bayang-md: 0 6px 18px rgba(0,0,0,.38);
  --bayang-lg: 0 16px 40px rgba(0,0,0,.46);
}


* , *::before, *::after { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0; background: var(--kanvas); color: var(--teks);
  font-family: var(--font); font-size: 14.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100% }
a { color: var(--utama); text-decoration: none }
a:hover { color: var(--utama-sentuh) }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.015em; line-height: 1.2 }
p { margin: 0 }
:focus-visible { outline: 2px solid var(--utama); outline-offset: 2px }
::selection { background: var(--utama-isi) }

/* ---------------- tombol ---------------- */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid transparent; background: transparent;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.tbl:disabled { opacity: .55; cursor: not-allowed }
.tbl-utama { background: var(--utama); border-color: var(--utama); color: #fff }
.tbl-utama:hover:not(:disabled) { background: var(--utama-sentuh); border-color: var(--utama-sentuh) }
.tbl-kedua { background: #fff; border-color: var(--garis); color: var(--teks) }
.tbl-kedua:hover:not(:disabled) { border-color: var(--utama); color: var(--utama) }
.tbl-hantu { color: var(--teks-2) }
.tbl-hantu:hover:not(:disabled) { background: var(--lembut); color: var(--teks) }
.tbl-bahaya { background: #fff; border-color: var(--bahaya-garis); color: var(--bahaya) }
.tbl-bahaya:hover:not(:disabled) { background: var(--bahaya-isi) }
.tbl-kecil { min-height: 30px; padding: 0 11px; font-size: 12.5px }
.tbl-besar { min-height: 48px; padding: 0 22px; font-size: 15px }

/* ---------------- kartu & label ---------------- */
.kartu {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r-md); box-shadow: var(--bayang-sm); padding: 18px 20px;
}
.label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap; line-height: 1.4;
}
.label-utama  { background: var(--utama-isi); color: var(--utama) }
.label-netral { background: var(--lembut); color: var(--teks-2) }
.label-pita   { background: var(--pita-isi); color: var(--pita) }
.label-ok     { background: var(--ok-isi); color: var(--ok) }
.label-awas   { background: var(--awas-isi); color: var(--awas) }
.label-bahaya { background: var(--bahaya-isi); color: var(--bahaya) }
.label-emas   { background: var(--emas-isi); color: var(--emas) }

/* ---------------- isian ---------------- */
.isian {
  width: 100%; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--garis); border-radius: 10px; background: #fff;
}
.isian:focus { outline: none; border-color: var(--utama); box-shadow: 0 0 0 3px var(--utama-isi) }
label.kunci { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px }

/* ---------------- tabel ---------------- */
.tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--r-md); background: #fff }
table.tabel { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 640px }
table.tabel th, table.tabel td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--garis) }
table.tabel thead th {
  background: var(--lembut); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; color: var(--teks-2); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.tabel tbody tr:last-child td { border-bottom: none }
table.tabel tbody tr:hover { background: var(--lembut) }
table.tabel tbody tr.terpilih { background: var(--utama-isi) }
.angka { font-variant-numeric: tabular-nums; text-align: right }