/* ==========================================================================
   dasar.css - token warna/ukuran, reset, dan gaya elemen HTML dasar.
   Urutan muat: dasar.css -> tata-letak.css -> komponen.css -> halaman.css
   Tanpa font luar dan tanpa CDN (komputer sekolah sering offline).
   Target browser: Chrome 109 / Firefox 115 (Windows 7).
   Panduan lengkap: public/css/README.md
   ========================================================================== */

:root {
  /* Warna utama: hijau tinta buku kas */
  --brand: #1f6f5c;
  --brand-tua: #175546;
  --brand-muda: #e3f1eb;
  --brand-garis: #a9d4c3;

  /* Permukaan dan teks */
  --latar: #eef2f0;
  --panel: #ffffff;
  --panel-redup: #f6f9f7;
  --teks: #1c2b27;
  --teks-redup: #5c6b66;
  --garis: #d9e2de;
  --garis-kuat: #c3cec9;

  /* Status */
  --bahaya: #b42318;
  --bahaya-muda: #fdeeed;
  --bahaya-garis: #efb4ae;
  --awas: #9a5b06;
  --awas-muda: #fff6e2;
  --awas-garis: #e8c46a;
  --berhasil: #1d6b45;
  --berhasil-muda: #e7f4ec;
  --berhasil-garis: #9fd2b6;
  --info: #2c4a9b;
  --info-muda: #e8eefc;

  /* Menu samping */
  --samping: #123a32;
  --samping-teks: #c3d6cf;
  --samping-aktif: #2a7a65;

  /* Ukuran */
  --radius: 8px;
  --radius-kecil: 6px;
  --bayang: 0 1px 2px rgba(18, 58, 50, .06), 0 1px 1px rgba(18, 58, 50, .04);
  --lebar-samping: 236px;
  --tinggi-atas: 56px;

  /* Nama lama (dipakai beberapa view lama); jangan dipakai di kode baru */
  --muted: var(--teks-redup);
  --line: var(--garis);
  --danger: var(--bahaya);
  --ok-bg: var(--berhasil-muda);
}

* { box-sizing: border-box; }
/* Atribut hidden selalu menang atas display dari kelas lain (mis. .btn, .status-2fa). */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--teks);
  background: var(--latar);
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0 0 2px; letter-spacing: -.01em; }
h2 { font-size: 15.5px; font-weight: 600; margin: 0 0 10px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
p { margin: 0 0 10px; }
a { color: var(--brand); }
a:hover { color: var(--brand-tua); }
:focus-visible { outline: 2px solid #3a9b82; outline-offset: 2px; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--garis); margin: 16px 0; }
details > summary { cursor: pointer; }

/* Teks bantu */
.muted { color: var(--teks-redup); }
.small { font-size: 12.5px; }
.kanan { text-align: right; }
.angka { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.error { color: var(--bahaya); font-size: 12.5px; margin-top: 3px; }
.uang-lunas { color: var(--brand); }
.uang-belum { color: var(--awas); }
.uang-telat { color: var(--bahaya); }
ul.plain { margin: 0; padding-left: 18px; }
ul.plain li { margin: 2px 0; }

/* ---------- Formulir ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=search], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=file], select, textarea {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--garis-kuat);
  border-radius: var(--radius-kecil);
  padding: 7px 10px;
  max-width: 100%;
}
input[type=text], input[type=search], input[type=password], input[type=email] { width: 100%; }
textarea { width: 100%; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31, 111, 92, .15); }
input[disabled], select[disabled], textarea[disabled] { background: var(--panel-redup); color: var(--teks-redup); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
.bantu { display: block; font-size: 12px; font-weight: 400; color: var(--teks-redup); margin-top: 3px; }
label.cek { display: inline-block; font-weight: 400; margin: 2px 14px 2px 0; white-space: nowrap; }
label.cek input { margin-right: 4px; }
label.saklar { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 10px 0 0; cursor: pointer; }
label.saklar input { margin-top: 3px; flex: 0 0 auto; }
label.saklar strong { font-weight: 600; }

/* ---------- Tabel ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
thead th { font-size: 12.5px; font-weight: 600; color: var(--teks-redup); background: var(--panel-redup); border-bottom-color: var(--garis-kuat); white-space: nowrap; }
tbody tr:hover > td { background: #f8faf9; }
th.angka, td.angka { text-align: right; }
td.kosong { color: var(--teks-redup); text-align: center; padding: 28px 10px; }
tr.total-baris > td, tr.total-baris > th { font-weight: 700; background: var(--panel-redup); border-top: 2px solid var(--garis-kuat); }
tr.baris-batal > td { color: #8a8a8a; text-decoration: line-through; }
tr.baris-batal > td:last-child { text-decoration: none; }
tr.baris-salah > td { background: #fff5f4; }
tr.baris-dipakai > td { color: var(--teks-redup); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }