/* ====================================================================
   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; }
/* Judul kolom yang dapat diurutkan (Riwayat Dokumen). */
.th-urut {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit;
}
.th-urut span { font-size: 10px; opacity: .45; }
.th-urut:hover, .th-urut--aktif { color: var(--daun-700); }
.th-urut--aktif span { opacity: 1; }
.th-urut:focus-visible { outline: 2px solid var(--daun-500); outline-offset: 2px; border-radius: 3px; }
/* 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); }

/* Deret tanggal Pengadaan: judul & lencana tanggal SPP (2 November 2026). */
.label-deret { font-size: 12px; font-weight: 600; color: var(--abu-700); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .03em; }
.label-deret span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.spp-tgl { display: inline-block; margin: 3px 4px 0 0; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px;
  background: var(--daun-100); color: var(--daun-700); }
.spp-tgl--minggu { background: var(--jagung-muda); color: #7a5200; }

/* Deret tanggal pembayaran di halaman SPP (2 November 2026; sama dengan deret Pengadaan). */
.deret-tgl { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.deret-tgl button { flex: 0 0 auto; border: 1px solid var(--abu-200); background: var(--kertas); border-radius: 10px; padding: 6px 10px;
  cursor: pointer; text-align: left; min-width: 118px; font: inherit; color: var(--tinta); }
.deret-tgl button.aktif { border-color: var(--daun-700); box-shadow: 0 0 0 2px var(--daun-700) inset; }
.deret-tgl b { display: block; font-size: 13px; }
.deret-tgl small { display: block; font-size: 11.5px; }
.deret-tgl .s-ok { color: var(--daun-700); } .deret-tgl .s-tunggu { color: #9a6a00; }
.deret-tgl .s-tolak { color: var(--bata); } .deret-tgl .s-diam { 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%;
}

/**
 * Kotak centang dan radio DIKECUALIKAN dari aturan di atas.
 *
 * Aturan itu ditulis untuk isian teks, tetapi pemilihnya mengenai seluruh
 * <input> — termasuk kotak centang, yang lalu melar selebar pembungkusnya
 * lengkap dengan padding dan bingkai. Di dalam susunan flex akibatnya parah:
 * kotak centang merampas seluruh baris dan mendesak labelnya menjadi lajur
 * setipis beberapa piksel (terlihat pada kotak pengalihan di Input Distribusi
 * KPM sebelum ini diperbaiki).
 *
 * Selama ini ditambal satu per satu (`.saklar input`), sehingga tiap kotak
 * centang baru mengulang cacat yang sama. Diperbaiki di sumbernya.
 */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  padding: 0;
  border: 0;
  accent-color: var(--daun-700);
  cursor: pointer;
}
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; }
/* Paragraf keterangan rata kanan-kiri (23 Oktober 2026) — terutama keterangan
   di atas tiap menu yang panjangnya beberapa baris. Baris terakhir tetap rata kiri. */
p.bantuan { text-align: justify; text-justify: inter-word; }
.keadaan p.bantuan, .rata-tengah p.bantuan { text-align: inherit; }

/* Keterangan yang perlu terbaca sebelum orang menyunting, bukan sesudah —
   dipakai pada tab Format Nomor untuk kategori bernomor manual. */
.bantuan--kotak {
  display: block; font-size: 12.5px; color: var(--abu-700);
  background: var(--jagung-muda); border: 1px solid #e6cf9a;
  border-radius: 8px; padding: 10px 12px;
}
.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;
}

/* Kotak nomor bukti transfer di dalam tabel penerima. Dipadatkan agar 38
   baris masih terbaca sekaligus, dan memakai huruf angka supaya deret huruf
   dan angka dari bank mudah dibandingkan dengan mutasi rekening. */
.isian-bukti {
  min-width: 168px;
  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; }
.cip__butir--kosong { opacity: .45; }
.cip__butir--kosong.cip__butir--pilih { opacity: 1; }

/* ---- 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; }
/* Penerima manfaat | Relawan aktif — dua kartu, satu kolom di layar sempit. */
.petak--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .petak--2x2 { grid-template-columns: 1fr; } }

/* Keuangan SPPG di Dasbor (dasbor_keuangan.js, 4 November 2026). Warna rumpun & merah
   "melebihi pagu" lolos uji pembeda warna/buta warna; jangan dipakai ulang untuk hal lain. */
.keu {
  --keu-bb: #2f6fa3; --keu-op: #b8790f; --keu-fas: #a8456e; --keu-masuk: #2f6b4f;
  --keu-saldo: #6b7570; --keu-lebih: #a33724;
  display: block; margin-bottom: 14px;
}
.keu-kartu { padding: 16px 18px; overflow: visible; min-width: 0; }
.keu-kecil { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--daun-500); font-weight: 700; }
.keu-judul { font-size: 16px; margin: 2px 0 12px; }
.keu-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.keu-rentang { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.keu-periode { position: relative; }
.keu-tombol-periode {
  font: inherit; font-size: 14px; font-weight: 650; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--daun-500); background: var(--daun-100);
  color: var(--daun-700); cursor: pointer;
}
.keu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 330px; background: var(--kertas, #fff);
  border: 1px solid var(--abu-200); border-radius: 12px; box-shadow: 0 10px 30px rgba(22, 40, 31, .18); padding: 12px;
}
.keu-panel[hidden] { display: none; }
.keu-panel__judul { font-size: 12px; color: var(--abu-700); font-weight: 650; margin: 0 0 6px; }
.keu-cepat { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.keu-cepat button {
  font: inherit; font-size: 13px; text-align: left; padding: 7px 10px; border: 1px solid var(--abu-200);
  border-radius: 8px; background: var(--kertas, #fff); cursor: pointer; line-height: 1.3; color: var(--tinta);
}
.keu-cepat button small { display: block; color: var(--abu-700); font-size: 11.5px; }
.keu-cepat button.aktif { border-color: var(--daun-500); background: var(--daun-100); color: var(--daun-700); font-weight: 650; }
.keu-sendiri { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--abu-200); }
.keu-sendiri label { font-size: 12px; color: var(--abu-700); display: grid; gap: 2px; }
.keu-sendiri input { font: inherit; font-size: 13.5px; padding: 6px 7px; border: 1px solid var(--abu-200); border-radius: 8px; width: 100%; }
.keu-sendiri__aksi { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.keu-galat { grid-column: 1 / -1; color: var(--bata); font-size: 12.5px; background: var(--bata-muda); border-radius: 8px; padding: 6px 8px; }
.keu-galat[hidden] { display: none; }
.keu-ajak { margin-top: 12px; background: var(--jagung-muda); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.keu-ubin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.keu-ubin > div { border-radius: 10px; padding: 10px 12px; min-width: 0; background: var(--abu-50); border-left: 4px solid var(--abu-200); }
.keu-ubin small { display: block; font-size: 12px; color: var(--abu-700); }
.keu-ubin b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keu-ubin--masuk { border-left-color: var(--keu-masuk) !important; }
.keu-ubin--masuk b { color: var(--keu-masuk); }
.keu-ubin--keluar { border-left-color: var(--keu-saldo) !important; }
.keu-ubin--utama { background: var(--daun-100) !important; border-left-color: var(--daun-700) !important; }
.keu-ubin--utama b { color: var(--daun-700); }
.keu-ubin__ubah { font-size: 11.5px; color: var(--abu-700); }
.keu-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; margin-top: 14px; }
.keu-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.keu-penuh { margin-top: 14px; }
.keu-grafik { min-width: 0; }
.keu svg { display: block; overflow: visible; }
.keu svg text { font-family: inherit; }
.keu-legenda { display: grid; gap: 6px; margin-top: 10px; font-size: 13px; }
.keu-legenda div { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 8px; align-items: center; }
.keu-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.keu-angka { font-variant-numeric: tabular-nums; text-align: right; }
.keu-pct { color: var(--abu-700); min-width: 46px; text-align: right; }
.keu-ang { min-width: 0; }
.keu-ang h4 { margin: 0; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.keu-besar { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.keu-lencana { font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 99px; }
.keu-lencana--aman { background: var(--daun-100); color: var(--daun-700); }
.keu-lencana--lewat { background: var(--bata-muda); color: var(--keu-lebih); }
.keu-bulan { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.keu-bulan button {
  font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--abu-200); border-radius: 99px;
  background: var(--kertas, #fff); color: var(--tinta); cursor: pointer;
}
.keu-bulan button.aktif { border-color: var(--daun-500); background: var(--daun-100); color: var(--daun-700); font-weight: 650; }
.keu-batas { margin-top: 10px; background: var(--abu-50); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; color: var(--abu-700); }
.keu-batas b { color: var(--tinta); }
.keu-batas__kepala, .keu-batas__baris { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.keu-batas__kepala span { cursor: help; font-size: 12px; }
.keu-batas__hasil { margin-top: 4px; font-size: 13px; color: var(--tinta); }
.keu-bilah--batas { background: var(--kertas, #fff); margin: 6px 0 4px; }
.keu-bilah { height: 8px; background: var(--abu-200); border-radius: 99px; overflow: hidden; margin: 6px 0 3px; }
.keu-bilah > div { height: 100%; border-radius: 99px; }
.keu-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--abu-700); margin: 8px 0 4px; }
.keu-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.keu-hari { cursor: pointer; }
.keu-rinci { margin-top: 16px; background: var(--abu-50); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--abu-700); }
.keu-rinci b { color: var(--tinta); }
.keu-rinci__baris { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.keu-rinci__baris > div { background: var(--kertas, #fff); border-radius: 8px; padding: 9px 11px; border-top: 3px solid var(--abu-200); }
.keu-rinci__baris > .keu-k-bb { border-top-color: var(--keu-bb); }
.keu-rinci__baris > .keu-k-op { border-top-color: var(--keu-op); }
.keu-rinci dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 4px 0 0; }
.keu-rinci dt { color: var(--abu-700); }
.keu-rinci dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta); }
.keu-rinci p { margin: 4px 0 0; }
.keu-rinci dt.keu-rinci__sub { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--abu-200); font-weight: 650; color: var(--tinta); }
.keu-tip {
  position: fixed; pointer-events: none; z-index: 60; display: none; white-space: nowrap;
  background: var(--daun-900); color: #fff; font-size: 12.5px; line-height: 1.45; padding: 7px 10px; border-radius: 6px;
}
@media (max-width: 860px) { .keu-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .keu-grid2 { grid-template-columns: 1fr; }
  .keu-ubin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .keu-ubin b { font-size: 14.5px; }
  .keu-ubin > div { padding: 8px 10px; }
  .keu-rentang { font-size: 17px; }
}
@media (max-width: 560px) {
  .keu-periode, .keu-tombol-periode { width: 100%; justify-content: center; }
  .keu-panel { left: 0; right: 0; width: auto; }
  .keu-rinci__baris { grid-template-columns: 1fr; }
}

/* ---- 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; }

/**
 * Kartu KABAR BAIK — sengaja dibuat setipis mungkin.
 *
 * Dipakai kartu kesehatan cadangan saat semuanya beres: dasbor bukan tempat
 * memajang hal yang sedang baik-baik saja, tetapi hilang sama sekali juga
 * salah — orang perlu tahu bahwa pemeriksaannya memang berjalan, bukan
 * sekadar diam. Satu baris tenang, tanpa kepala kartu.
 */
.kartu--tenang { border-color: var(--daun-100); }
.kartu--tenang .kartu__badan { padding: 12px 18px; }
.teks-baik { color: var(--daun-700); }

/* ================= 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; }
/* Keterangan penggantian di bawah status. Inline-block: garis coret baris
   Dibatalkan tidak menurun ke elemen atomik, jadi keterangannya tetap terbaca. */
.catatan-dokumen { max-width: 240px; margin-top: 3px; }
/* Riwayat: Nota PO & Penerimaan per penyedia dikelompokkan per tanggal (20 Oktober 2026). */
.grup-kepala td { background: var(--abu-50, #fafbf9); }
.grup-anak td { background: #f4f7f2; font-size: 13px; }
.grup-anak td:first-child { padding-left: 26px; position: relative; }
.grup-anak td:first-child::before { content: '↳'; position: absolute; left: 9px; color: var(--abu-400); }
.lencana--grup { background: #e8f0fe; color: #1a4fa3; }
.catatan-dokumen small { display: inline-block; font-size: 11.5px; line-height: 1.35; }

.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); }

/* Status Aktif / Nonaktif oleh Ka SPPG (27 Oktober 2026). */
.kpm__lencana-status { margin-left: 6px; vertical-align: 2px; }
.kpm-status { margin-bottom: 14px; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.kpm-status--mati { background: var(--abu-50); border: 1px solid var(--abu-200); }
.kpm-status--mati strong { color: var(--bata); }
.kpm-status--hidup { background: var(--daun-100); color: var(--daun-700); }
.kpm-status q { display: block; margin-top: 4px; font-style: italic; color: var(--abu-700); }
.kpm-status .bantuan { margin-top: 6px; }
.kpm-status__ket { font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.kpm-status__petunjuk { background: var(--jagung-muda); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin: 0 0 12px; line-height: 1.45; }
.kpm-status__beres { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.kpm-status__beres li { margin-bottom: 8px; }
.kpm-status__beres small { display: block; color: var(--abu-700); }

@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__nama-hari {
  display: block; font-size: 9.5px; font-weight: 700;
  color: var(--abu-400); letter-spacing: .02em;
}
.kisi__tgl { display: block; font-variant-numeric: tabular-nums; font-size: 12px; }

.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; }

/* ---- Rentang pendek: dipaskan ke lebar layar ----
   Sampai 14 kolom, tabelnya dibuat selebar wadahnya dengan table-layout
   tetap, sehingga kolom hari membagi rata sisa lebar dan TIDAK ada gulir
   menyamping. Rentang yang lebih panjang tidak memakai kelas ini: memaksa
   40 kolom masuk layar hanya membuat tiap kolom selebar 12px, yang berarti
   menukar satu ketidaknyamanan dengan yang lebih buruk.

   Kolom nama dan kolom total tetap berlebar tetap; hanya kolom hari yang
   memuai dan menyusut. */
.kisi--pas { width: 100%; table-layout: fixed; }
/* Lebarnya sendiri dipasang JS sebagai persen pada baris kepala — lihat
   lebarKolomHari() di web/js/pages/absensi.js. Di sini hanya batas piksel
   bawaannya yang dilepas, sebab min/max-width piksel akan melawan persen
   itu dan mengembalikan gulir menyamping. */
.kisi--pas .kisi__nama  { min-width: 0; max-width: none; }
.kisi--pas .kisi__total { min-width: 0; }
.kisi--pas .kisi__hari  { padding: 6px 1px !important; }
/* Pada 14 kolom yang dipaskan, tiap kolom bisa menyusut sampai ~32px di
   layar sempit. Tombolnya ikut mengecil supaya tetap muat utuh, bukan
   terpotong separuh. */
.kisi--pas .kisi__libur { font-size: 9px; padding: 1px 2px; }
.kisi--pas .kisi__sel   { padding: 3px 1px !important; }

/* Kotak status ikut menyusut mengikuti kolomnya, dengan batas atas 30px
   supaya pada layar lebar ia tidak melar menjadi persegi besar. */
.kisi--pas .kotak { width: 100%; max-width: 30px; margin: 0 auto; }
.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); }


/* LIBUR — yaitu sel tanpa catatan sama sekali. Bukan status tersimpan;
   ketiadaan barisnya itulah yang berarti libur. Tetap dapat diketuk untuk
   mencatat kehadiran. */
.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);
}

/* 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); }

/* ================= PUSTAKA MENU MBG ================= */

/* Kartu menu disusun mengisi lebar layar; di ponsel satu kolom. */
.pustaka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pustaka .kartu__kepala { align-items: center; padding: 12px 16px; }
.pustaka .kartu__kepala h3 { font-size: 14.5px; }
.pustaka .kartu__kepala > div { flex-shrink: 0; white-space: nowrap; }
.pustaka .kartu__kepala > .pm-judul { flex-shrink: 1; white-space: normal; min-width: 0; }
.pustaka__isi { padding: 10px 16px 14px; display: grid; gap: 10px; }
.pustaka__baris {
  display: grid; grid-template-columns: 104px 1fr; gap: 2px 10px;
  margin: 0; font-size: 13px;
}
.pustaka__baris dt { color: var(--abu-700); }
.pustaka__baris dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pustaka__baris + .pustaka__baris { border-top: 1px dashed var(--abu-200); padding-top: 10px; }

/* ================= PERENCANAAN MENU ================= */

/* Tiga isian porsi berdampingan; di ponsel menumpuk. */
.rencana-porsi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.rencana-porsi .isian-angka { width: 100%; max-width: 160px; }
.rencana-bahan td { vertical-align: top; }
.rencana-bahan .isian-angka { width: 78px; }
/* Tabel Kebutuhan bahan baku tampil utuh tanpa geser ke kanan di layar
   laptop (keputusan 2 Oktober 2026): sel dirapatkan, judul kolom dan
   keterangan kecil boleh turun baris, isian angka diperkecil. Di layar
   sempit (ponsel/tablet) tabel tetap dapat digeser. */
@media (min-width: 900px) {
  .tabel.rencana-bahan { table-layout: auto; }
  .tabel.rencana-bahan th, .tabel.rencana-bahan td { padding: 6px 5px; font-size: 12px; white-space: normal; }
  .tabel.rencana-bahan th { font-size: 10.5px; line-height: 1.2; }
  .tabel.rencana-bahan th:first-child, .tabel.rencana-bahan td:first-child { padding-left: 8px; }
  .tabel.rencana-bahan th:last-child, .tabel.rencana-bahan td:last-child { padding-right: 8px; }
  .tabel.rencana-bahan .isian-angka { width: 48px; padding: 5px 4px; font-size: 12px; }
  .tabel.rencana-bahan [data-isi="safety_stock"] { width: 44px; }
  .tabel.rencana-bahan [data-isi="harga_satuan"] { width: 68px; }
  .tabel.rencana-bahan [data-isi="jumlah"] { width: 58px; }
  .tabel.rencana-bahan td small { font-size: 10.5px; line-height: 1.25; }
  .tabel.rencana-bahan td small.blok { max-width: 96px; margin-left: auto; white-space: normal; }
  .tabel.rencana-bahan td:nth-child(2) small.blok { max-width: none; margin-left: 0; }
  .tabel.rencana-bahan td:nth-child(2) { min-width: 118px !important; }  /* menimpa min-width bawaan sel */
  .tabel.rencana-bahan .lencana { font-size: 10px; padding: 1px 6px; }
  .tabel.rencana-bahan td:last-child small { display: inline-block; max-width: 44px; line-height: 1.15; }
  /* Isian dan satuannya (g, pcs, kg) tetap sebaris. */
  .tabel.rencana-bahan td:has(> .isian-angka) { white-space: nowrap; }
  .tabel.rencana-bahan td:has(> .isian-angka) > small:not(.blok) { font-size: 10px; }
}

/* ================= LAPORAN GIZI HARIAN ================= */

/* Kartu tanggal yang dapat diketuk. */
.lg-kartu { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.lg-kartu:hover { border-color: var(--daun-500); }
.lg-kartu--pilih { border-color: var(--daun-500); box-shadow: 0 0 0 2px var(--daun-100); }
/* Daftar bahan dibagi dua kolom supaya tidak memanjang sementara lebar layar
   menganggur; di layar sempit menumpuk. */
.lg-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }

/* Tata letak Perencanaan Menu (1 Oktober 2026): bilah ringkasan menempel,
   Jumlah porsi | Menu MBG berdampingan, lalu bahan dan pagu selebar halaman. */
.rm-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--kertas); border: 1px solid var(--abu-200);
  border-radius: var(--sudut); box-shadow: var(--bayang);
}
.rm-bar__tgl { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 2px 6px; }
.rm-bar__tgl > .pilih-label { grid-column: 1 / -1; margin: 0; }
.rm-bar__tgl input { width: auto; }
.rm-bar__n { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.rm-bar__n b { font-size: 15px; font-family: var(--huruf-angka); white-space: nowrap; }
.rm-bar__n small { font-size: 11px; color: var(--abu-400); white-space: nowrap; }
.rm-bar__aksi { margin-left: auto; display: flex; gap: 8px; }

.rm-atas {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 12px; align-items: stretch;
}
.rm-k { padding: 12px 14px; }
.rm-k__kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.rm-k__kepala h3 { font-size: 15.5px; }
.rm-bawah { margin-top: 12px; }

.rm-porsi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.rm-porsi label { display: block; font-size: 12px; font-weight: 600; color: var(--abu-700); margin-bottom: 3px; }
.rm-porsi .isian-angka { width: 100%; }
.rm-porsi__org {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  min-height: 36px; padding: 2px 8px; border: 1px dashed var(--abu-200); border-radius: 8px; line-height: 1.15;
}
.rm-porsi__org small { font-size: 10.5px; }
.rm-k__judul { display: flex; align-items: center; gap: 8px; }
/* Keterangan ⓘ: muncul saat kursor di ikon atau saat ikon diklik/diketuk. */
.rm-info { position: relative; display: inline-flex; }
.rm-info__tombol {
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--abu-400); background: var(--kertas); color: var(--abu-700);
  font: italic 700 12px/1 Georgia, serif; cursor: help;
}
.rm-info__tombol:hover, .rm-info--buka .rm-info__tombol { border-color: var(--daun-700); color: var(--daun-700); }
.rm-info__isi {
  display: none; position: absolute; z-index: 25; top: calc(100% + 8px); left: -12px;
  width: min(420px, calc(100vw - 48px)); padding: 12px 14px;
  background: var(--kertas); border: 1px solid var(--abu-200); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(22, 40, 31, .16); font-size: 12.5px; font-weight: 400;
}
.rm-info__isi::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.rm-info:hover .rm-info__isi, .rm-info--buka .rm-info__isi { display: block; }
.rm-info__isi > div > p:first-child { margin-top: 0 !important; }

.rm-menu__kolom, .rm-menu__baris { display: flex; align-items: center; gap: 8px; }
.rm-menu__kolom { font-size: 12px; font-weight: 600; color: var(--abu-700); margin-bottom: 3px; }
.rm-menu__baris + .rm-menu__baris { margin-top: 8px; }
.rm-menu__teks { flex: 1 1 auto; min-width: 0; }
.rm-menu__susu { flex: 0 0 230px; width: 230px; }
.rm-menu__baris--beda { border-left: 3px solid var(--jagung); padding-left: 8px; }
.rm-menu__tanda { flex: none; }
.rm-menu__catat { display: block; margin: 4px 0 0; }
.rm-menu__beda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 8px; font-size: 13px; }
.rm-menu__beda label { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; cursor: pointer; }

.rm-alat {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px;
  padding: 12px 18px; border-bottom: 1px solid var(--abu-200);
}
.rm-alat label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.rm-alat__cari { flex: 1 1 280px; min-width: 0; }
.rencana-bahan tr.rm-kurang > td { background: var(--jagung-muda); }
/* Pustaka lengkap (tahap 3): keterangan khusus porsi, angka acuan, beda Pustaka. */
.rm-khusus { color: #7a5405; font-weight: 600; }
.rm-acuan { color: #5b3fb0; }
.rm-beda-pustaka { margin-top: 8px; padding: 8px 10px; border: 1px dashed #e6cf9a; background: #fffaf0; border-radius: 10px; font-size: 12.5px; }
.rm-beda-pustaka__isian { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px; align-items: center; margin-top: 6px; }
@media (max-width: 640px) { .rm-beda-pustaka__isian { grid-template-columns: minmax(0, 1fr); } }
.rm-beda-pustaka__isian input { width: 100%; }
/* Nama hidangan setelah bahan berubah (15 Oktober 2026): sorotan wajib diperiksa & catatan ganti otomatis. */
.rm-beda-pustaka__isian input.rm-sorot { background: #fff3c4; border-color: #e0a800; box-shadow: 0 0 0 2px rgba(224, 168, 0, .25); }
.rm-nama-oto, .rm-nama-cek { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 3px; font-size: 12px; }
.rm-nama-oto { color: var(--daun-700); }
.rm-nama-cek { color: #8a5b04; }
#rmBahanStatus, #rmPaguStatus { white-space: nowrap; }

.rm-pagu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rm-pagu__c { border: 1px solid var(--abu-200); border-radius: 12px; padding: 10px 12px; background: var(--kertas); }
.rm-pagu__c--lewat { border-color: var(--bata); }
.rm-pagu__c--kosong { opacity: .55; }
.rm-pagu__judul { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.rm-pagu__bar { height: 8px; border-radius: 5px; background: var(--abu-200); overflow: hidden; margin: 7px 0; }
.rm-pagu__bar i { display: block; height: 100%; background: var(--daun-700); }
.rm-pagu__c--lewat .rm-pagu__bar i { background: var(--bata); }
.rm-pagu__rinci { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--abu-700); }
.rm-pagu__total { margin: 10px 0 0; font-size: 12.5px; color: var(--abu-700); }

@media (max-width: 900px) {
  .rm-atas, .rm-pagu { grid-template-columns: minmax(0, 1fr); }
  .rm-menu__susu { flex-basis: 150px; width: 150px; }
}
@media (max-width: 640px) {
  .rm-bar { gap: 6px 14px; padding: 8px 10px; }
  .rm-bar__n b { font-size: 13.5px; }
  .rm-bar__aksi { width: 100%; margin-left: 0; }
  .rm-bar__aksi .tombol { flex: 1; }
  .rm-menu__baris { flex-wrap: wrap; }
  .rm-menu__teks { flex-basis: 100%; }
  .rm-menu__susu { flex: 1 1 auto; width: auto; }
  .rm-menu__kolom { display: none; }
}

/* Varian menu Pustaka (4 Oktober 2026). */
.lencana--varian { background: #efe8ff; color: #5b3fb0; }

/* ================= PANDUAN PENGGUNAAN ================= */

.pd-kepala { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pd-cari { flex: 1 1 300px; max-width: 460px; }
.pd-isi { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.pd-isi__butir {
  padding: 5px 12px; border: 1px solid var(--abu-200); border-radius: 99px;
  background: var(--kertas); color: var(--tinta); font: inherit; font-size: 13px; cursor: pointer;
}
.pd-isi__butir:hover { border-color: var(--daun-700); }
.pd-bagian { margin-top: 14px; scroll-margin-top: calc(var(--atas-tinggi, 60px) + 10px); }
.pd-bagian[hidden], .pd-bagian [data-cari][hidden], .pd-kosong[hidden] { display: none !important; }
.pd-menu {
  display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--daun-100);
  color: var(--daun-700); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.pd-menu:hover { text-decoration: underline; }
.pd-peran { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; padding: 14px 18px; }
.pd-peran article { border: 1px solid var(--abu-200); border-radius: 12px; padding: 12px 14px; }
.pd-peran h4 { margin: 0 0 6px; font-size: 14.5px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pd-peran h5 { margin: 10px 0 2px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--abu-400); }
.pd-peran ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.pd-alur { padding: 4px 18px 14px; }
.pd-alur__satu { padding: 10px 0; border-bottom: 1px dashed var(--abu-200); }
.pd-alur__satu:last-child { border-bottom: 0; }
.pd-alur h4 { margin: 0 0 8px; font-size: 14px; }
.pd-alur p { margin: 8px 0 0; font-size: 12.5px; color: var(--abu-700); }
.pd-langkah { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pd-langkah__butir { border: 1px solid var(--abu-200); background: var(--kertas); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; line-height: 1.25; }
.pd-langkah__butir small { display: block; color: var(--abu-400); font-size: 11px; }
.pd-langkah__panah { color: var(--abu-400); font-weight: 700; }
.pd-tanya { padding: 4px 18px 12px; }
.pd-tanya > div { padding: 10px 0; border-bottom: 1px dashed var(--abu-200); }
.pd-tanya > div:last-child { border-bottom: 0; }
.pd-tanya strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.pd-tanya p { margin: 0; font-size: 13px; color: var(--abu-700); }
.pd-istilah { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; padding: 6px 18px 14px; margin: 0; }
.pd-istilah > div { padding: 8px 0; border-bottom: 1px dashed var(--abu-200); font-size: 13px; }
.pd-istilah dt { font-weight: 700; }
.pd-istilah dd { margin: 2px 0 0; color: var(--abu-700); }
.pd-kosong { padding: 20px; text-align: center; color: var(--abu-400); }
.pd-permenu { padding: 6px 18px 14px; display: grid; gap: 8px; }
.pd-permenu__satu { border: 1px solid var(--abu-200); border-radius: 12px; padding: 0 14px; scroll-margin-top: calc(var(--atas-tinggi, 60px) + 10px); }
.pd-permenu__satu > summary { cursor: pointer; padding: 10px 0; font-weight: 700; font-size: 14px; }
.pd-permenu__satu[open] > summary { border-bottom: 1px dashed var(--abu-200); }
.pd-permenu__satu--tuju { border-color: var(--daun-700); box-shadow: 0 0 0 2px var(--daun-50, #eef6ee); }
.pd-permenu__satu .pd-permenu__isi { padding: 8px 0 12px; }
.pd-permenu__isi { font-size: 13px; line-height: 1.55; }
.pd-permenu__isi p { margin: 0 0 6px; }
.pd-permenu__guna { color: var(--abu-700); }
.pd-permenu__isi h5 { margin: 10px 0 2px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--abu-400); }
.pd-permenu__isi ol, .pd-permenu__isi ul { margin: 0; padding-left: 20px; }
@media (max-width: 640px) {
  .pd-peran, .pd-istilah { grid-template-columns: minmax(0, 1fr); padding-left: 12px; padding-right: 12px; }
}

/* ================= REKAP MENU & BAHAN BAKU ================= */

/* Satu hari, satu kartu selebar halaman — bukan kisi kartu sempit yang
   membuat nama menu dan tabel bahan terlipat dan terpotong. */
.rekap { display: grid; gap: 14px; }
.rekap-hari .kartu__kepala { align-items: center; }
.rekap-hari__aksi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.rekap-hari__badan {
  display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: 18px; padding: 14px 18px;
}
.rekap-hari__ringkas .tabel { margin: 0; }
.rekap-hari__uang {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  margin: 10px 0 0; font-size: 13px;
}
.rekap-hari__uang dt { color: var(--abu-700); }
.rekap-hari__uang dd { margin: 0; text-align: right; }
.rekap-hari__menu {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
}
.rekap-hari__kelompok {
  border: 1px solid var(--abu-200); border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.rekap-hari__kelompok h4 {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--abu-700);
}
.rekap-hari__nama { margin: 2px 0 8px; font-weight: 700; }
.rekap-hari__kelompok dl {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 13px;
}
.rekap-hari__kelompok dt { color: var(--abu-700); }
.rekap-hari__kelompok dd { margin: 0; overflow-wrap: anywhere; }
.rekap-hari__bahan { padding: 0 18px 14px; }
@media (max-width: 720px) {
  .rekap-hari__badan { grid-template-columns: minmax(0, 1fr); }
  .rekap-hari__aksi { justify-content: flex-start; }
}

/* Bahan terpilih satu komponen di formulir Pustaka Menu MBG. */
.pm-cip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pm-cip .lencana { display: inline-flex; align-items: center; gap: 4px; }
.pm-cip .tautan { padding: 0 2px; line-height: 1; }

/* Kartu yang memuat kotak pilihan (kombo) di dekat tepi bawahnya. `.kartu`
   memotong isinya demi sudut membulat, dan daftar pilihan yang menjulur ke
   bawah ikut terpotong — pilihan susu di Perencanaan Menu tak dapat dibuka. */
.kartu--terbuka { overflow: visible; }

/* ---- Input Survey Harga: lokasi dan penyunting harga ---- */
.sv-lokasi { display: grid; gap: 14px; }
.sv-kartu .kartu__kepala { align-items: flex-start; }
.sv-centang { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; margin-top: 4px; }
.sv-tambah-lokasi { justify-self: start; }
.sv-baris-daftar { display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; padding: 2px; }
.sv-baris {
  display: grid; gap: 6px 8px; padding: 8px 10px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.1fr);
  border: 1px solid var(--abu-200); border-radius: 10px;
}
.sv-baris__bahan { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
.sv-baris__bahan .tautan { margin-left: auto; font-size: 18px; line-height: 1; }
.sv-baris [data-f="keterangan"] { grid-column: 1 / 3; }
.sv-baris .sv-centang { margin-top: 0; }
.sv-baris [data-f="alasan_keluar"] { grid-column: 1 / -1; }
.sv-baris--keluar { background: var(--bata-muda); }
.sv-tambah { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .sv-baris { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sv-baris [data-f="keterangan"] { grid-column: 1 / -1; }
}

/* ---- Isian pesanan PO (Buat Dokumen → Nota Pesanan) ---- */
.po-semua { display: flex; align-items: center; gap: 8px; padding: 10px 14px; flex-wrap: wrap; font-size: 13px; }
.po-semua select { max-width: 260px; }
.po-edit td { vertical-align: top; }
.po-edit .isian-angka { width: 92px; }
/* Tambahan di tengah produksi (4 Oktober 2026): kuning = dipesan melebihi
   rencana, biru = bahan di luar rencana. */
.po-edit tr.po-tambah > td { background: var(--jagung-muda); }
.po-edit tr.po-luar > td { background: #eef6ff; }
.po-label { display: inline-block; margin-top: 2px; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
.po-label--tambah { background: var(--jagung-muda); color: #7a5405; border: 1px solid #e6cf9a; }
.po-label--luar { background: #e3efff; color: #1d4f91; border: 1px solid #b9d3f5; }
.po-luar__teks { color: #1d4f91; }
/* Beberapa baris per bahan (6 Oktober 2026). */
.po-edit tr.po-sub > td { border-top: 0; padding-top: 4px; }
.po-sub__nama { padding-left: 12px; color: var(--abu-700); }
.po-satuan { display: inline-block; padding-top: 7px; }
.po-isian-satuan { width: 84px; }
.po-isian-merek { width: 130px; }
.po-setara { margin-top: 4px; white-space: nowrap; color: #7a4d00; }
.po-isian-setara { width: 64px !important; }
.po-aksi { white-space: nowrap; font-size: 12.5px; }
.po-edit select[data-f="penyedia_id"] { min-width: 150px; }
.po-edit input[data-f="keterangan"] { min-width: 120px; }
.po-tambah-bahan { padding: 10px 14px 0; max-width: 520px; }
/* Daftar pilihan "+ Tambah bahan" tidak boleh terpotong wadah bergulir:
   wadah luar dibiarkan, tabelnya sendiri yang bergulir mendatar. */
.kartu:has(#poPesanan), .tabel-gulir:has(> #poPesanan) { overflow: visible; }
/* Sama untuk PO Barang Operasional (#poOp, 4 Oktober 2026): daftar "Tambah barang" sempat terpotong. */
.kartu:has(#poOp), .tabel-gulir:has(> #poOp) { overflow: visible; }
/* Dan RAB Operasional (#rabOp, 8 Oktober 2026): daftar "Tambah barang" terpotong tepi kartu. */
.kartu:has(#rabOp), .tabel-gulir:has(> #rabOp) { overflow: visible; }
.po-tambah-bahan > label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.po-edit select { max-width: 180px; }
#poRingkas { padding: 0 14px 10px; color: var(--bata); }
.po-edit [data-f="keterangan"] { width: 140px; }
/* ⓘ di kepala kolom Dipesan (4 Oktober 2026) — isi pop-upnya tidak ikut huruf kapital kepala tabel. */
.po-kepala-info { display: inline-flex; align-items: center; gap: 6px; }
.po-edit th .rm-info__isi { text-transform: none; letter-spacing: normal; white-space: normal; color: var(--tinta); }

/* Galat berisi baris "Solusi: …" — baris barunya dipertahankan. Ketuk untuk menutup. */
.kabar { white-space: pre-line; cursor: pointer; }
.kabar--galat { max-width: 560px; line-height: 1.45; }

/* ---- Kuitansi Bahan Baku: daftar tagihan penyedia × tanggal ---- */
.kw-daftar { display: grid; gap: 10px; padding: 10px 14px; }
.kw-tagihan { border: 1px solid var(--abu-200); border-radius: 10px; padding: 10px 12px; }
.kw-tagihan--mati { background: var(--abu-50); }
.kw-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kw-kepala .sv-centang { flex: 1 1 260px; margin: 0; font-size: 14px; }
.kw-rinci { margin-top: 8px; }
.kw-rinci .isian-angka { width: 90px; }

/* ---- Kartu buka-tutup (Dasbor) ---- */
.kartu-lipat > summary { list-style: none; cursor: pointer; }
.kartu-lipat > summary::-webkit-details-marker { display: none; }
.kartu-lipat > summary::after { content: '▾'; margin-left: auto; padding-left: 12px; font-size: 18px;
  color: var(--abu-400); transition: transform .15s; }
.kartu-lipat:not([open]) > summary::after { transform: rotate(-90deg); }
/* Tombol "N KPM" berbentuk chip; panahnya berputar saat rincian dibuka. */
.jb-kpm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border: 1px solid var(--abu-200, #dfe4e1); border-radius: 999px;
  background: #fff; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: inherit; cursor: pointer; transition: background .15s, border-color .15s;
}
.jb-kpm:hover { background: var(--abu-50, #f7f9f8); border-color: var(--abu-400, #8e9994); }
.jb-kpm__panah { font-size: 10px; transition: transform .15s; }
.jb-kpm[aria-expanded="true"] { background: var(--abu-50, #f7f9f8); border-color: var(--abu-400, #8e9994); }
.jb-kpm[aria-expanded="true"] .jb-kpm__panah { transform: rotate(180deg); }

/* Baris batch yang rinciannya terbuka + baris rincian per KPM. */
tr.jb-buka > td { border-bottom-color: transparent; }
tr.jb-rinci > td {
  background: #fafbfa; font-size: 12.5px; color: var(--abu-700, #3f4a45);
  padding-top: 6px; padding-bottom: 6px; border-top: 0; border-bottom: 1px solid #eef1ef;
}
tr.jb-rinci--akhir > td { border-bottom: 1px solid var(--abu-200, #dfe4e1); }
/* Nama KPM memakai lebar kolom Batch–KPM; garis warna batch di kirinya
   menandai rincian itu milik batch mana. */
tr.jb-rinci > td.jb-rinci__nama { box-shadow: inset 3px 0 0 var(--warna); font-weight: 500; padding-left: 26px; }
td.jb-rinci__nama small { display: block; font-size: 11px; font-weight: 400; color: var(--abu-400, #8e9994); }

/* ---- Input Distribusi: batch pengantaran ---- */
.batch-kartu > summary { list-style: none; }
.batch-kartu > summary::-webkit-details-marker { display: none; }
.dist__batch { margin: 10px 0; border: 1px dashed var(--abu-200); border-radius: 10px; padding: 8px 12px; }
.dist__batch > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.dist__batch-daftar { display: grid; gap: 6px; margin-top: 6px; }
.dist__batch-butir { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.dist__batch-butir select { max-width: 280px; }
.dist__batch-jam { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dist__batch-jam .kurang { color: var(--bata); }

/* Bantu Isi AKSIS (pages/bantu_aksis.js) — nilai yang diklik untuk disalin. */
.aks-ringkas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.aks-sub { font-weight: 700; font-size: 13px; margin: 6px 0; color: var(--daun-700); }
.aks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 10px; }
.aks-grid label { display: block; font-size: 12px; margin-bottom: 2px; }
.aks-penuh { grid-column: 1 / -1; }
@media (max-width: 700px) { .aks-grid { grid-template-columns: 1fr; } }
.aks-slin { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--abu-200); background: var(--kertas, #fff);
  color: inherit; border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; max-width: 100%; }
.aks-slin span { color: var(--abu-400); font-size: 12px; }
.aks-slin:hover { border-color: var(--daun-500); }
.aks-slin--tersalin { background: var(--daun-50, #e4efe8); border-color: var(--daun-500); }
.aks-manual { display: inline-block; color: #7a5b00; background: #fff4d1; border-radius: 6px; padding: 3px 7px; font-size: 12px; }
.aks-t td { vertical-align: top; }
.aks-t th, .aks-t td:nth-child(-n+7) .aks-slin { white-space: nowrap; }
.aks-t td:nth-child(2) { min-width: 160px; }
.aks-t td:nth-child(8) { min-width: 230px; }
.aks-t td:nth-child(10), .aks-t td:nth-child(11) { min-width: 170px; }
.aks-tgl { display: block; margin: 2px 0; font-size: 12.5px; color: var(--abu-600, #555); }
.aks > summary .ringkas { margin-left: auto; }