/* ====================================================================
   SPPG — GAYA TAMPILAN

   Tidak memakai huruf dari internet. Seluruhnya memakai huruf bawaan
   perangkat, sehingga aplikasi tetap tampil utuh saat sinyal buruk atau
   saat dibuka dari cache. Ini keputusan sadar untuk aplikasi lapangan.

   Warna diambil dari dunia programnya sendiri: hijau daun tua untuk
   kerangka, kuning jagung untuk penanda perhatian, merah bata untuk
   tindakan berisiko.
   ================================================================== */

:root {
  --daun-900: #16281f;
  --daun-700: #1f4433;
  --daun-500: #2f6b4f;
  --daun-100: #e4efe8;

  --jagung: #c98a12;
  --jagung-muda: #fdf3dd;
  --bata: #a33724;
  --bata-muda: #fbe9e5;

  --tinta: #1a1d1b;
  --abu-700: #4d5651;
  --abu-400: #8a938d;
  --abu-200: #d8ded9;
  --abu-50: #f4f6f4;
  --kertas: #ffffff;

  --sudut: 8px;
  --sisi-lebar: 236px;
  --bayang: 0 1px 2px rgba(22, 40, 31, .08), 0 4px 14px rgba(22, 40, 31, .06);

  --huruf: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --huruf-angka: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* WAJIB. Atribut hidden bekerja lewat aturan bawaan browser (display:none),
   yang kalah oleh display:grid pada .masuk dan .rangka di bawah. Tanpa
   baris ini, layar masuk tetap menutupi aplikasi meski login berhasil. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--huruf);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--abu-50);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

:focus-visible {
  outline: 2px solid var(--daun-500);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ================= LAYAR MASUK ================= */

.masuk {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--daun-700) 0%, var(--daun-900) 70%);
}

.masuk__kartu {
  width: 100%;
  max-width: 380px;
  background: var(--kertas);
  border-radius: 14px;
  padding: 32px 28px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}

.masuk__merek { text-align: center; margin-bottom: 26px; }

.masuk__tanda {
  display: inline-block;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: .12em;
  color: var(--daun-700);
  border-bottom: 3px solid var(--jagung);
  padding-bottom: 3px;
}

.masuk__merek p {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--abu-700);
}

.masuk__galat {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bata-muda);
  border: 1px solid #eccfc8;
  color: var(--bata);
  font-size: 13px;
  line-height: 1.4;
}

.masuk__catatan {
  margin: 18px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--abu-400);
}

/* ================= KERANGKA ================= */

.rangka {
  display: grid;
  grid-template-columns: var(--sisi-lebar) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "sisi atas" "sisi halaman";
  height: 100%;
}

.atas {
  grid-area: atas;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  height: 56px;
  background: var(--kertas);
  border-bottom: 1px solid var(--abu-200);
  position: sticky;
  top: 0;
  z-index: 20;
}

.atas h1 { font-size: 17px; flex: 1; }

.atas__menu { display: none; flex-direction: column; gap: 4px; }
.atas__menu span {
  display: block; width: 18px; height: 2px;
  background: var(--tinta); border-radius: 2px;
}

/* ---- Penanda koneksi ---- */
.koneksi {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.koneksi::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.koneksi--daring { background: var(--daun-100); color: var(--daun-700); }
.koneksi--daring::before { background: var(--daun-500); }
.koneksi--luring { background: var(--bata-muda); color: var(--bata); }
.koneksi--luring::before { background: var(--bata); }

/* ================= SISI ================= */

.sisi {
  grid-area: sisi;
  background: var(--daun-900);
  color: #cfdbd4;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sisi__merek {
  padding: 18px 20px;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: .1em;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.menu { flex: 1; padding: 12px 0; }

.menu__kelompok { margin-bottom: 14px; }
.menu__kelompok h3 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #7d918a;
  padding: 6px 20px;
  font-weight: 650;
}

.menu__butir {
  display: block;
  padding: 9px 20px;
  color: #cfdbd4;
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.menu__butir:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu__butir--aktif {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-left-color: var(--jagung);
  font-weight: 600;
}

.sisi__kaki {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.pengguna { margin-bottom: 10px; line-height: 1.35; }
.pengguna strong { display: block; color: #fff; font-size: 13.5px; }
.pengguna small { color: #8ba096; font-size: 11.5px; }

.tirai-sisi { display: none; }

/* ================= HALAMAN ================= */

.halaman {
  grid-area: halaman;
  padding: 20px;
  overflow-y: auto;
}

.bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.bar__saring { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.bar__saring input[type=search] { min-width: 230px; flex: 1; }

.cacah { margin: 0 0 10px; font-size: 12.5px; color: var(--abu-400); }

/* ================= TABEL ================= */

.tabel-gulir {
  overflow-x: auto;
  background: var(--kertas);
  border: 1px solid var(--abu-200);
  border-radius: var(--sudut);
  box-shadow: var(--bayang);
}

.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabel th {
  text-align: left;
  padding: 10px 14px;
  background: var(--abu-50);
  border-bottom: 1px solid var(--abu-200);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--abu-700);
  white-space: nowrap;
}

.tabel td { padding: 11px 14px; border-bottom: 1px solid var(--abu-200); vertical-align: top; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: #fafbfa; }

.angka { font-family: var(--huruf-angka); font-size: 12.5px; }
.rata-kanan { text-align: right; }
.rata-tengah { text-align: center; }

/* PENTING — jangan dilepas.
   `.tabel th` menetapkan text-align:left dengan spesifisitas (0,1,1),
   sedangkan `.rata-kanan` hanya (0,1,0). Akibatnya SELURUH judul kolom
   tetap rata kiri walau isinya rata kanan, sehingga angka di badan tabel
   tidak sejajar dengan judul kolomnya dan mudah salah dibaca.
   Dua aturan di bawah menyamakan keduanya. */
.tabel th.rata-kanan { text-align: right; }
.tabel th.rata-tengah { text-align: center; }

/* Judul kolom dan isinya dirapatkan ke tepi yang sama. Perbedaan padding
   antara th dan td membuat angka tampak bergeser terhadap judulnya. */
.tabel th, .tabel td { padding-left: 14px; padding-right: 14px; }
.tabel th { vertical-align: bottom; }
/* Utilitas: menjadikan sebuah <small> baris tersendiri di bawah teks utama.
   Dipakai 15 kali di seluruh tabel (Riwayat Dokumen, Pengaturan Dokumen,
   Template, Harga Bahan Baku). Lihat catatan di bawah pada `.daftar-blok >
   .blok` — dulu keduanya bernama sama dan yang belakangan menang. */
.blok { display: block; }

.lencana {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}
.lencana--hidup { background: var(--daun-100); color: var(--daun-700); }
.lencana--diam { background: var(--abu-200); color: var(--abu-700); }

/* ================= KENDALI ================= */

input, select, textarea {
  font: inherit;
  color: inherit;
  padding: 8px 10px;
  border: 1px solid var(--abu-200);
  border-radius: 6px;
  background: var(--kertas);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--daun-500);
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 107, 79, .14);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--abu-50); color: var(--abu-400);
}
textarea { resize: vertical; }

.tombol {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 6px;
  border: 1px solid var(--abu-200);
  background: var(--kertas);
  color: var(--tinta);
  cursor: pointer;
  white-space: nowrap;
}
.tombol:hover { background: var(--abu-50); }
.tombol:disabled { opacity: .55; cursor: not-allowed; }

.tombol--utama {
  background: var(--daun-700);
  border-color: var(--daun-700);
  color: #fff;
}
.tombol--utama:hover { background: var(--daun-500); }

.tombol--bahaya { background: var(--bata); border-color: var(--bata); color: #fff; }
.tombol--bahaya:hover { filter: brightness(1.1); }

.tombol--diam { background: transparent; }
.tombol--lebar { width: 100%; }

.ikon-tombol {
  background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--abu-700);
  padding: 6px; border-radius: 6px;
}
.ikon-tombol:hover { background: var(--abu-50); }

.tautan {
  background: none; border: 0; padding: 0 8px 0 0;
  color: var(--daun-500); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.tautan:hover { color: var(--daun-700); }

/* Aksi merusak di dalam baris tabel (mis. Hapus template). Warnanya sama
   dengan .tombol--bahaya supaya arti merah tetap satu di seluruh aplikasi. */
.tautan--bahaya { color: var(--bata); }
.tautan--bahaya:hover { color: var(--bata); filter: brightness(1.15); }

/* ================= FORMULIR ================= */

.formulir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grup { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.grup--penuh { grid-column: 1 / -1; }

.formulir__pemisah {
  grid-column: 1 / -1;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--abu-400);
  border-top: 1px solid var(--abu-200);
  padding-top: 12px;
  margin-top: 2px;
}

label { font-size: 13px; font-weight: 600; color: var(--abu-700); }
.bantuan { font-size: 12px; color: var(--abu-400); line-height: 1.35; }
.teks-lembut { color: var(--abu-700); }

/* Nilai yang HILANG dan memang perlu diperhatikan — bukan sekadar redup.
   Dipakai untuk "belum diatur" pada tarif relawan dan kelompok gaji tanpa
   anggota, supaya salah ketik nama tim langsung terlihat. */
.teks-kurang { color: var(--bata); font-weight: 600; }

/* ================= DIALOG ================= */

.tirai {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(22, 40, 31, .45);
  display: grid; place-items: center;
  padding: 16px;
  animation: masukLembut .15s ease;
}
@keyframes masukLembut { from { opacity: 0 } to { opacity: 1 } }

.dialog {
  background: var(--kertas);
  border-radius: 12px;
  width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.dialog__kepala {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--abu-200);
}
.dialog__kepala h2 { font-size: 16px; }
.dialog__isi { padding: 20px; overflow-y: auto; }
.dialog__kaki {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--abu-200);
  background: var(--abu-50);
  border-radius: 0 0 12px 12px;
}

/* Dialog tanpa tombol aksi — lembar menu, misalnya — tidak boleh menyisakan
   pita abu-abu kosong setinggi 45px di kakinya. */
.dialog__kaki:empty { display: none; }

/* Pegangan seret. Hanya bermakna saat dialog tampil sebagai lembar bawah,
   jadi di layar besar ia tidak digambar sama sekali. */
.dialog__pegangan { display: none; }

/*
 * DI PONSEL, DIALOG ADALAH LEMBAR BAWAH (bottom sheet).
 *
 * `dialog()` di js/ui.js sudah lama menutup dengan `translateY(100%)` bila
 * lebar layar <= 640px — artinya ia SUDAH menganggap dirinya lembar bawah,
 * tetapi CSS-nya tidak pernah menyusul sehingga yang tampil masih kotak
 * mengambang di tengah. Aturan di bawah inilah yang melengkapinya, dan
 * karena diterapkan pada `.dialog` sendiri, SELURUH dialog di aplikasi
 * ikut menjadi lembar bawah — bukan hanya lembar menu navigasi.
 *
 * Ambangnya 640px, bukan 860px, supaya sengaja sama dengan angka di
 * js/ui.js. Dua angka berbeda akan membuat animasi tutup meleset.
 */
@media (max-width: 640px) {
  .tirai {
    place-items: end center;
    padding: 0;
  }

  .dialog {
    max-width: none !important;   /* menimpa `lebar` yang dikirim pemanggil */
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: naikDariBawah .26s cubic-bezier(.32, .72, 0, 1);
  }

  .dialog__pegangan {
    display: block;
    width: 40px; height: 4px;
    margin: 10px auto 0;
    border-radius: 2px;
    background: var(--abu-200);
  }

  .dialog__kepala { padding: 12px 20px 14px; }
  .dialog__kaki { border-radius: 0; }
}

@keyframes naikDariBawah {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ================= KEADAAN ================= */

.keadaan {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 52px 20px; text-align: center;
  background: var(--kertas);
  border: 1px solid var(--abu-200);
  border-radius: var(--sudut);
}
.keadaan h3 { font-size: 15px; }
.keadaan p { margin: 0; max-width: 42ch; font-size: 13.5px; }
.keadaan--galat { border-color: #eccfc8; background: var(--bata-muda); }
.keadaan--galat h3 { color: var(--bata); }

.pemuat {
  width: 26px; height: 26px;
  border: 2.5px solid var(--abu-200);
  border-top-color: var(--daun-500);
  border-radius: 50%;
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg) } }

/* ================= PEMBERITAHUAN ================= */

.kabar-wadah {
  position: fixed; z-index: 80;
  bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  width: min(440px, calc(100vw - 32px));
}

.kabar {
  padding: 11px 15px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  background: var(--tinta);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  animation: naik .2s ease;
}
@keyframes naik { from { opacity: 0; transform: translateY(8px) } }
.kabar--pergi { opacity: 0; transition: opacity .25s; }
.kabar--berhasil { background: var(--daun-700); }
.kabar--galat { background: var(--bata); }
.kabar--peringatan { background: var(--jagung); color: #2a1d02; }

/* ================= PONSEL ================= */

/* Catatan: tata letak kerangka di ponsel (rangka, bilah sisi menjadi laci,
   tombol buka-laci, dan tirai) kini SEPENUHNYA ditangani di kerangka.css
   dengan ambang 860px dan kelas keadaan body.sisi-buka — satu sistem laci
   saja, agar tidak ada dua definisi yang saling bertabrakan. Blok di sini
   hanya menyisakan penyesuaian isi halaman. */
@media (max-width: 820px) {
  .formulir { grid-template-columns: 1fr; }
  .bar__saring input[type=search] { min-width: 100%; }
  .bar__aksi, .bar__aksi .tombol { width: 100%; }
}

/* Layar sentuh: perbesar sasaran ketuk agar nyaman dipakai berdiri. */
@media (pointer: coarse) {
  .tombol { padding: 11px 16px; }
  .tautan { padding: 6px 10px 6px 0; }
  input, select, textarea { padding: 11px 12px; font-size: 16px; }
}

/* ================= KARTU & ISIAN ANGKA ================= */

.kartu {
  background: var(--kertas);
  border: 1px solid var(--abu-200);
  border-radius: var(--sudut);
  box-shadow: var(--bayang);
  overflow: hidden;
}

.kartu__kepala {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 16px 18px;
  border-bottom: 1px solid var(--abu-200);
}
.kartu__kepala h3 { font-size: 15.5px; }
.kartu__kepala p { margin: 3px 0 0; font-size: 12.5px; }
.kartu .tabel-gulir { border: 0; border-radius: 0; box-shadow: none; }

.ringkas { text-align: right; white-space: nowrap; }
.ringkas__angka {
  display: block; font-size: 24px; font-weight: 700;
  line-height: 1.1; color: var(--daun-700);
}
.ringkas__label {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--abu-400);
}

/* Kotak isian angka dibuat lebar tetap dan rata kanan, agar deretan
   angka mudah dibandingkan sekilas saat mengisi belasan kategori. */
.isian-angka {
  width: 92px;
  text-align: right;
  font-family: var(--huruf-angka);
  padding: 6px 8px;
}

.aksi-kaki {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; margin-top: 14px; flex-wrap: wrap;
}
.aksi-kaki .teks-lembut { font-size: 13px; color: var(--jagung); font-weight: 600; }

@media (max-width: 820px) {
  .kartu__kepala { flex-direction: column; gap: 10px; }
  .ringkas { text-align: left; }
  .isian-angka { width: 76px; }
  .aksi-kaki { flex-direction: column-reverse; align-items: stretch; }
  .aksi-kaki .tombol { width: 100%; }
}

/* ================= DISTRIBUSI & ABSENSI HARIAN ================= */

.daftar-dist, .daftar-absen { display: flex; flex-direction: column; }

/* ---- Distribusi ---- */
.dist { border-bottom: 1px solid var(--abu-200); }
.dist:last-child { border-bottom: 0; }

.dist__ringkas {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; cursor: pointer; list-style: none;
}
.dist__ringkas::-webkit-details-marker { display: none; }
.dist__ringkas:hover { background: #fafbfa; }

.dist__nama { flex: 1; min-width: 0; }
.dist__nama strong { display: block; font-size: 14px; }
.dist__nama small { display: block; font-size: 11.5px; }
.dist__angka { font-weight: 700; font-size: 15px; color: var(--daun-700); white-space: nowrap; }
.dist__angka.teks-lembut { font-weight: 400; font-size: 12px; color: var(--abu-400); }

.dist__isi { padding: 4px 18px 18px; }
.dist__baris { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }

/* Saklar sederhana untuk menyertakan atau mengeluarkan satdik. */
.saklar input { width: 18px; height: 18px; accent-color: var(--daun-700); cursor: pointer; }

/* Kategori libur ditandai dengan mencoret, bukan hanya mengubah warna,
   agar tetap terbaca oleh pengguna yang sulit membedakan warna. */
.cip { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.cip__butir {
  font: inherit; font-size: 12.5px;
  padding: 5px 10px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--abu-200); background: var(--kertas); color: var(--tinta);
}
.cip__butir:hover { border-color: var(--daun-500); }
.cip__n { font-family: var(--huruf-angka); font-size: 11.5px; color: var(--abu-400); margin-left: 3px; }
.cip__butir--libur {
  background: var(--jagung-muda); border-color: #e6cf9a;
  color: #7a5405; text-decoration: line-through;
}
.cip__butir--libur .cip__n { color: #a8813a; }

/* ---- Absensi ---- */
.absen {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--abu-200);
  align-items: center;
}
.absen:last-child { border-bottom: 0; }
.absen__nama strong { display: block; font-size: 14px; }
.absen__nama small { display: block; font-size: 11.5px; }
.absen__lanjut {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding-top: 4px;
}

.pilih-status { display: flex; gap: 0; }
.pilih-status__butir {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--abu-200); background: var(--kertas); color: var(--abu-700);
  margin-left: -1px;
}
.pilih-status__butir:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.pilih-status__butir:last-child { border-radius: 0 6px 6px 0; }
.pilih-status__butir:hover { background: var(--abu-50); }
.pilih-status__butir--pilih {
  background: var(--daun-700); border-color: var(--daun-700); color: #fff; z-index: 1;
}

@media (max-width: 820px) {
  .dist__baris, .absen__lanjut { grid-template-columns: 1fr; }
  .absen { grid-template-columns: 1fr; }
  .pilih-status { width: 100%; }
  .pilih-status__butir { flex: 1; padding: 9px 6px; }
}

/* ================= DASBOR ================= */

.petak {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.petak-2 {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr);
  gap: 12px;
  margin-bottom: 14px;
}

.kartu--angka { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.kartu__angka {
  font-size: 30px; font-weight: 700; line-height: 1.05;
  color: var(--daun-700); letter-spacing: -.02em;
}
.kartu__label { font-size: 13px; font-weight: 600; color: var(--tinta); }
.kartu--angka small { font-size: 11.5px; }

/* ---- Daftar pekerjaan hari ini ---- */
.tugas { list-style: none; margin: 0; padding: 0; }
.tugas__butir {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--abu-200);
}
.tugas__butir:last-child { border-bottom: 0; }
.tugas__tanda {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--abu-200); color: var(--abu-700);
  font-size: 13px; font-weight: 700;
}
.tugas__tanda--selesai { background: var(--daun-100); color: var(--daun-700); }
.tugas__teks { flex: 1; }
.tugas__teks strong { display: block; font-size: 14px; }
.tugas__teks small { display: block; font-size: 11.5px; }

/* ---- Grafik tren ---- */
.tren {
  display: flex; align-items: flex-end; gap: 5px;
  height: 132px; padding: 16px 18px 8px;
}
.tren__kolom {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; gap: 5px;
}
.tren__batang {
  width: 100%; max-width: 26px;
  background: var(--daun-500); border-radius: 3px 3px 0 0;
  transition: height .25s ease;
}
.tren__kolom:hover .tren__batang { background: var(--daun-700); }
.tren__label {
  font-size: 10px; color: var(--abu-400);
  font-family: var(--huruf-angka);
}

.kartu--catatan .kartu__kepala { border-bottom: 0; }
.kartu--waspada { border-color: #e6cf9a; background: var(--jagung-muda); }
.kartu--waspada h3 { color: #7a5405; }

/* ================= TAB ================= */

.tab {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--abu-200);
  margin-bottom: 16px;
}
.tab__butir {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 15px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--abu-700);
}
.tab__butir:hover { color: var(--tinta); }
.tab__butir--aktif { color: var(--daun-700); border-bottom-color: var(--daun-700); }

/* ================= SETELAN ================= */

.setelan__baris {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(200px, 1.2fr);
  gap: 14px; align-items: start;
  padding: 12px 18px; border-bottom: 1px solid var(--abu-200);
}
.setelan__baris:last-child { border-bottom: 0; }
.setelan__label { font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.setelan__label small { font-weight: 400; font-size: 11px; margin-top: 2px; }

/* Cip terpilih dipakai pada pemilihan peran. */
.cip__butir--pilih {
  background: var(--daun-700); border-color: var(--daun-700); color: #fff;
}
.cip__butir--pilih:hover { background: var(--daun-500); border-color: var(--daun-500); }

@media (max-width: 820px) {
  .petak-2 { grid-template-columns: 1fr; }
  .setelan__baris { grid-template-columns: 1fr; gap: 6px; }
  .tab { overflow-x: auto; }
}

.daftar-ringkas { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.daftar-ringkas li { margin-bottom: 2px; }

/* ================= RIWAYAT & TEMPLATE ================= */

.baris--batal td { opacity: .55; text-decoration: line-through; }
.baris--batal .lencana { text-decoration: none; }

.pasangan-layar div { display: flex; gap: 8px; margin-bottom: 5px; font-size: 13.5px; }
.pasangan-layar dt { width: 110px; flex: none; color: var(--abu-700); font-weight: 600; }
.pasangan-layar dd { margin: 0; flex: 1; }

/* TABRAKAN CASCADE — jangan dikembalikan.

   Kelas komponen di bawah ini dulu bernama `.blok` polos, persis sama dengan
   utilitas `.blok { display: block }` di bagian TABEL. Spesifisitasnya sama
   (0,1,0) dan ia ditulis BELAKANGAN, jadi ia menang di mana-mana: setiap
   `<small class="teks-lembut blok">` di dalam tabel diam-diam berubah menjadi
   baris flex ber-padding 11px dan bergaris bawah. Akibatnya sublabel seperti
   merek bahan baku dan nama kategori dokumen tampak menjorok dan barisnya
   tinggi sebelah.

   Diperbaiki dengan MENGURUNG komponennya di bawah induknya, bukan dengan
   menghapusnya: berkasnya tidak dipakai modul aktif mana pun saat ini, tetapi
   `.daftar-blok` masih menjadi milik modul yang dapat dihidupkan kembali. */
.daftar-blok { display: flex; flex-direction: column; }
.daftar-blok > .blok {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--abu-200);
}
.daftar-blok > .blok:last-child { border-bottom: 0; }
.blok__urut {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--daun-100); color: var(--daun-700);
  font-size: 11.5px; font-weight: 700;
}
.blok__isi { flex: 1; min-width: 0; }
.blok__isi strong { font-size: 13.5px; }
.blok__isi small { font-size: 11.5px; overflow-wrap: anywhere; }
.blok__aksi { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.blok__aksi .tautan:disabled { color: var(--abu-400); cursor: not-allowed; text-decoration: none; }

.tambah-blok {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 12px 18px; border-top: 1px solid var(--abu-200); background: var(--abu-50);
}

code {
  font-family: var(--huruf-angka); font-size: 12px;
  background: var(--abu-200); padding: 1px 5px; border-radius: 4px;
}

@media (max-width: 820px) {
  .daftar-blok > .blok { flex-wrap: wrap; }
  .blok__aksi { width: 100%; justify-content: flex-start; }
}

/* ================= INPUT STOK ================= */

.daftar-stok { display: flex; flex-direction: column; }
.stok {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(320px, 2.2fr) auto;
  gap: 12px 16px; align-items: start;
  padding: 13px 18px; border-bottom: 1px solid var(--abu-200);
}
.stok:last-child { border-bottom: 0; }
.stok--ada { background: #f7faf8; }
.stok__nama strong { display: block; font-size: 14px; }
.stok__nama small { display: block; font-size: 11.5px; }
.stok__isian { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stok__isian .grup--penuh { grid-column: 1 / -1; }
.stok__isian label { font-size: 11.5px; }
.stok__isian .isian-angka { width: 100%; }
.stok__total {
  min-width: 96px; text-align: right; font-weight: 700;
  font-size: 13.5px; color: var(--daun-700); padding-top: 18px;
}
.stok input[type=file] { font-size: 12px; padding: 6px; }

@media (max-width: 820px) {
  .stok { grid-template-columns: 1fr; }
  .stok__total { text-align: left; padding-top: 0; }
}

/* Selisih opname diberi warna DAN tanda, agar terbaca tanpa membedakan warna. */
.nilai--cocok { color: var(--daun-700); font-weight: 600; }
.nilai--kurang { color: var(--bata); font-weight: 700; }
.nilai--lebih { color: var(--jagung); font-weight: 700; }

/* ================================================================== */
/* Impor massal                                                        */
/* ================================================================== */

.impor__langkah { margin-bottom: 4px; }
.impor__langkah p { margin: 0 0 10px; }

.impor__awas {
  background: var(--jagung-muda);
  border-left: 3px solid var(--jagung);
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}

.impor__aksi { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.impor__aksi label.tombol { display: inline-flex; align-items: center; cursor: pointer; }

.impor__ringkas { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 10px; }
.lencana--tolak { background: var(--bata-muda); color: var(--bata); }

.impor__tabel { max-height: 320px; overflow: auto; }
.impor__tabel .tabel { font-size: 13px; }
.impor__tabel .tabel td { padding: 7px 12px; }

.impor__oke { color: var(--daun-700); font-weight: 600; }
.impor__tolak { color: var(--bata); }
.impor__gagal {
  margin: 16px 0 0; padding: 12px 14px;
  background: var(--bata-muda); color: var(--bata); border-radius: 8px;
}

/* ================================================================== */
/* Kotak pilihan yang bisa dicari                                      */
/* ================================================================== */

.kombo { position: relative; min-width: 0; }

.kombo__isian {
  width: 100%;
  padding-right: 30px;   /* ruang untuk tombol kosongkan */
}
.kombo__isian::placeholder { color: var(--abu-400); }

.kombo__hapus {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 22px; height: 22px; line-height: 1;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--abu-200); color: var(--abu-700);
  font-size: 15px;
}
.kombo__hapus:hover { background: var(--abu-400); color: #fff; }

.kombo--mati .kombo__isian { background: var(--abu-50); color: var(--abu-700); }

.kombo__daftar {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: var(--kertas); border: 1px solid var(--abu-200);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(22, 40, 31, .14);
}

.kombo__butir {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 14px; line-height: 1.3;
}
.kombo__butir--sorot { background: var(--daun-100); }
.kombo__butir--pilih { font-weight: 600; }
.kombo__kosong { padding: 10px; font-size: 14px; color: var(--abu-400); }

/* ================================================================== */
/* Kelompok Penerima Manfaat — tata letak dua panel                    */
/* ================================================================== */

.kpm {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.kpm__panel {
  background: var(--kertas);
  border: 1px solid var(--abu-200);
  border-radius: 14px;
  padding: 12px;
  position: sticky; top: 12px;
}

.kpm__cacah {
  margin: 10px 4px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--abu-400);
}

.kpm__daftar { max-height: 62vh; overflow-y: auto; margin: 0 -4px; }

.kpm__butir {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 2px;
  border: 0; border-radius: 9px; background: transparent;
  cursor: pointer; font: inherit;
}
.kpm__butir:hover { background: var(--abu-50); }
.kpm__butir--pilih { background: var(--daun-100); }
.kpm__butir strong { display: block; font-size: 14px; line-height: 1.3; }
.kpm__butir small { display: block; font-size: 12px; color: var(--abu-700); }

.kpm__isi { display: grid; gap: 16px; min-width: 0; }

/* Kolom yang sedang tidak boleh disunting tetap terbaca jelas, tetapi
   jelas pula bahwa ia sedang terkunci. */
.kpm__medan input:disabled,
.kpm__medan select:disabled,
.kpm__medan .kombo--mati .kombo__isian {
  background: var(--abu-50);
  color: var(--tinta);
  border-color: var(--abu-200);
  cursor: default;
}

.kpm__medan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px;
}
.kpm__medan .grup--penuh { grid-column: 1 / -1; }

.kpm__terkunci { color: var(--abu-400); }

@media (max-width: 900px) {
  .kpm { grid-template-columns: 1fr; }
  .kpm__panel { position: static; }
  .kpm__daftar { max-height: 300px; }
}

/* Butir menu yang berdiri sendiri tidak punya judul kelompok, jadi
   jarak atasnya dirapatkan agar tidak tampak seperti kelompok kosong. */
.menu__kelompok--tunggal { margin-top: 4px; }

/* Kelompok tombol di kepala kartu: tetap sejajar dengan angka ringkas,
   dan melipat ke bawah di layar sempit alih-alih mendorong judul. */
.kartu__aksi {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .kartu__aksi { width: 100%; justify-content: flex-start; }
}

/* ================================================================== */
/* Kisi absensi rentang tanggal                                        */
/* ================================================================== */

.kisi { font-size: 13px; }

/* Kolom nama dibekukan di kiri, karena kisi digulir menyamping dan
   deretan huruf H tanpa nama tidak berarti apa-apa. */
.kisi__nama {
  position: sticky; left: 0; z-index: 2;
  background: var(--kertas);
  min-width: 168px; max-width: 200px;
  box-shadow: 1px 0 0 var(--abu-200);
}
.kisi thead .kisi__nama { background: var(--abu-50); }
.kisi__nama strong { font-size: 13px; }

.kisi__hari { text-align: center; padding: 6px 4px !important; }
.kisi__tgl { display: block; font-variant-numeric: tabular-nums; }
.kisi__hari--libur .kisi__tgl { color: var(--abu-400); text-decoration: line-through; }

.kisi__libur {
  margin-top: 3px; padding: 1px 5px;
  font: inherit; font-size: 10px; font-weight: 600;
  border: 1px solid var(--abu-200); border-radius: 5px;
  background: transparent; color: var(--abu-400); cursor: pointer;
}
.kisi__libur--on {
  background: var(--jagung-muda); border-color: var(--jagung); color: #7a5308;
}

.kisi__sel { padding: 3px !important; text-align: center; }
.kisi__total {
  position: sticky; right: 0; z-index: 2;
  background: var(--kertas); text-align: right;
  min-width: 84px; box-shadow: -1px 0 0 var(--abu-200);
}
.kisi thead .kisi__total { background: var(--abu-50); }

.kotak {
  width: 30px; height: 30px;
  border: 1px solid transparent; border-radius: 7px;
  font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.kotak sup { font-size: 8px; font-weight: 400; }
.kotak:hover:not(:disabled) { outline: 2px solid var(--daun-500); outline-offset: 1px; }

.kotak--hadir { background: var(--daun-100); color: var(--daun-700); }
.kotak--izin  { background: #e6eefb; color: #24457d; }
.kotak--alpa  { background: var(--bata-muda); color: var(--bata); }

/* Status "Libur" milik SATU relawan pada satu hari: warna rata. Sengaja
   dibedakan dari .kotak--libur di bawah, yang menandai hari libur bagi
   SEMUA orang sebagai nilai bawaan sekolom. */
.kotak--libur-status { background: var(--jagung-muda); color: #7a5308; }

/* Hari libur bagi semua orang, sel belum terisi. Tetap dapat diketuk:
   penandanya adalah bawaan, bukan kunci. */
.kotak--libur {
  background: repeating-linear-gradient(45deg, var(--abu-50), var(--abu-50) 4px,
              var(--abu-200) 4px, var(--abu-200) 5px);
  color: var(--abu-400);
}

/* Bekerja PADA hari libur — misalnya tim keamanan saat yang lain libur.
   Warnanya tetap warna statusnya sendiri (H hijau, I biru), ditambah
   bingkai tegas supaya pengecualian ini langsung terlihat di antara
   kolom yang diarsir. */
.kotak--kecuali {
  box-shadow: inset 0 0 0 2px var(--daun-700);
  font-weight: 700;
}

/* Select yang belum dipilih tampil abu-abu seperti placeholder kotak
   pencarian, bukan hitam pekat yang terlihat seperti data sungguhan.
   Dipakai untuk select di dalam baris berulang, yang jumlahnya bisa
   puluhan sehingga tidak diganti komboBox. */
select:has(option[value=""]:checked) { color: var(--abu-400); }
select option { color: var(--tinta); }