/* ====================================================================
   SPPG — KOMPONEN

   Dimuat SETELAH app.css dan kerangka.css, SEBELUM berkas tema.

   Berkas ini sengaja dipisah. Seluruh isinya adalah komponen BARU yang
   belum pernah ada — navigasi tanggal, menu Aksi Cepat, kartu distribusi,
   dan tambahan kisi absensi. Dengan memisahkannya, app.css dan
   kerangka.css tidak perlu disentuh sama sekali, sehingga revisi tangan
   yang sudah Anda lakukan di sana tidak berisiko tertimpa.

   Karena berkas tema dimuat setelah ini, tema tetap dapat menimpa apa pun
   di sini bila suatu saat diperlukan.
   ================================================================== */

/* ================================================================== */
/* Navigasi tanggal cepat                                              */
/* ================================================================== */

/**
 * Tiga tombol mengapit satu kotak tanggal. Dijadikan satu kesatuan
 * bersambung, bukan tombol-tombol lepas, agar terbaca sebagai satu alat
 * dan tidak pecah berantakan saat baris penyaring melipat di ponsel.
 */
.navtgl {
  display: flex;
  align-items: stretch;
  flex: none;
}

.navtgl__tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  padding: 8px 11px;
  margin-left: -1px;
  border: 1px solid var(--abu-200);
  background: var(--kertas);
  color: var(--tinta);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.navtgl__tombol:hover:not(:disabled) { background: var(--abu-50); }
.navtgl__tombol:disabled { opacity: .5; cursor: not-allowed; }
.navtgl__tombol:first-child { border-radius: 9px 0 0 9px; margin-left: 0; }
.navtgl__tombol:last-child { border-radius: 0 9px 9px 0; }

/* Kotak tanggal ikut menyatu: sudutnya dihilangkan supaya sambungannya
   rata dengan tombol di kiri dan kanannya. */
.navtgl input[type=date] {
  width: auto;
  min-width: 140px;
  margin-left: -1px;
  border-radius: 0;
  border-color: var(--abu-200);
  font-size: 13px;
  text-align: center;
}
.navtgl input[type=date]:focus { position: relative; z-index: 1; }

/* "Hari ini" ditandai supaya operator tahu ia sedang di tanggal berjalan
   tanpa perlu membaca angkanya. */
.navtgl__tombol--kini {
  background: var(--daun-100);
  border-color: var(--daun-100);
  color: var(--daun-700);
}

/* ================================================================== */
/* Menu Aksi Cepat                                                     */
/* ================================================================== */

/**
 * Operasi massal dikumpulkan di sini, bukan disebar sebagai tombol
 * sejajar. Tiga tombol salin yang berdiri sendiri memenuhi bilah atas
 * dan membuat tombol Simpan — satu-satunya yang benar-benar sering
 * ditekan — tenggelam di antaranya.
 */
.aksicepat { position: relative; flex: none; }

.aksicepat__menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 6px);
  right: 0;
  min-width: 250px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: var(--kertas);
  border: 1px solid var(--abu-200);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(22, 40, 31, .16);
}

.aksicepat__butir {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.aksicepat__butir:hover:not(:disabled) { background: var(--abu-50); }
.aksicepat__butir:disabled { opacity: .45; cursor: not-allowed; }
.aksicepat__butir strong { display: block; font-weight: 600; }
.aksicepat__butir small { display: block; font-size: 11.5px; color: var(--abu-400); line-height: 1.35; }

/* ================================================================== */
/* Kartu distribusi                                                    */
/* ================================================================== */

/**
 * Baris ringkas harus menjawab empat pertanyaan tanpa dibuka: dikirim
 * atau tidak, drivernya siapa, jam berapa, dan berapa porsinya. Itulah
 * sebabnya driver dan jam ikut ditampilkan di sini, bukan hanya di dalam.
 */
.dist__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--abu-700);
}
/* `min-width: 0` + pemenggalan wajib: tanpa keduanya, sebuah butir flex tidak
   pernah menyusut di bawah lebar isinya, sehingga tujuan pengalihan yang
   panjang ("Panti Asuhan Nurul Iman Sungai Ambawang") menjulur keluar kartu
   dan terpotong tepi layar alih-alih turun ke baris berikutnya. */
.dist__meta span {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; overflow-wrap: anywhere;
}

/* Bagian yang belum diisi ditulis apa adanya dan diberi warna perhatian,
   bukan dibiarkan kosong — kosong terbaca seperti "tidak perlu diisi". */
.dist__meta .kurang { color: var(--bata); font-weight: 600; }

/* Titik penanda kelengkapan di tepi kiri baris. Satu titik cukup;
   lencana penuh tulisan di setiap baris justru menghalangi pembacaan. */
.dist__tanda {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--abu-200);
}
.dist__tanda--lengkap { background: var(--daun-500); }
.dist__tanda--kurang { background: var(--jagung); }
.dist__tanda--mati { background: var(--abu-200); }

/* Baris satdik yang tidak dikirim diredupkan, sehingga mata langsung
   jatuh ke satdik yang masih perlu dikerjakan. */
.dist--mati .dist__nama strong,
.dist--mati .dist__meta { opacity: .55; }

/* KPM yang DIALIHKAN sengaja TIDAK diredupkan: porsinya tetap dihitung,
   jadi ia masih menyumbang angka hari itu dan tetap perlu dilengkapi. */
.dist--alih .dist__nama strong,
.dist--alih .dist__meta { opacity: 1; }

.dist__lencana {
  background: var(--jagung-muda);
  color: #7a5308;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: 999px;
}

/* Kotak pengalihan, muncul hanya pada keadaan "Tidak". */
.alih {
  background: var(--abu-50);
  border: 1px solid var(--abu-200);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* Kotak ini berubah warna begitu pengalihannya menyala: isinya berhenti
   menjadi tawaran dan berubah menjadi isian wajib, jadi ia harus terlihat
   berbeda dari kotak yang sekadar tersedia. */
.alih--nyala {
  background: var(--jagung-muda);
  border-color: var(--jagung);
}

.alih__pilih { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }

/**
 * Kotak centang WAJIB diberi lebar sendiri.
 *
 * Aturan global `input, select, textarea { width: 100% }` ikut mengenai
 * `input[type=checkbox]`, sehingga kotak centang ini melar selebar
 * pembungkusnya — lengkap dengan padding dan bingkainya. Karena `flex: none`
 * juga berarti tidak boleh menyusut, ia merampas SELURUH baris dan
 * mendesak judul beserta keterangannya menjadi lajur setipis beberapa piksel
 * di tepi kanan, terpotong keluar kartu.
 *
 * Pola yang sama sudah dipakai `.saklar input`; yang ini sempat luput.
 */
.alih__pilih input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px; padding: 0;
  border-radius: 4px;
  accent-color: var(--daun-700);
  cursor: pointer;
}

/* Pembungkus teksnya WAJIB `min-width: 0`. Sebagai butir flex ia berlebar
   isinya, dan keterangan dua kalimat di bawah judulnya lalu terdorong keluar
   kotak — inilah sebab keterangan itu terpotong dan tak terbaca. */
.alih__pilih > span { min-width: 0; flex: 1; }
.alih__pilih strong { display: block; font-size: 13px; line-height: 1.35; }
.alih__pilih small {
  display: block;
  color: var(--abu-700);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 3px;
}

/* Garis pemisah, bukan sekadar jarak: isian tujuan adalah akibat dari
   centangan di atasnya, dan garis membuat hubungan itu terbaca. */
.alih__tujuan {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--jagung);
}
.alih__tujuan label { font-size: 12.5px; font-weight: 600; }
.alih__tujuan input { width: 100%; }

.dist__kendali {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 14px;
  margin-bottom: 14px;
}

.dist__cipaksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Ringkasan angka di kaki tiap kartu: dua angka berdampingan, keduanya
   berubah seketika saat kategori diketuk. */
.dist__hitung {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--abu-200);
}
.dist__hitung div { line-height: 1.25; }
.dist__hitung strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--daun-700);
  font-variant-numeric: tabular-nums;
}
.dist__hitung small { font-size: 11px; color: var(--abu-400); text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 820px) {
  .dist__kendali { grid-template-columns: 1fr; }
  .navtgl { width: 100%; }
  .navtgl input[type=date] { flex: 1; min-width: 0; }
  .aksicepat, .aksicepat > .tombol { width: 100%; }
  .aksicepat__menu { left: 0; right: 0; min-width: 0; }
}

/* ================================================================== */
/* Kisi absensi — tambahan                                             */
/* ================================================================== */


/* Sel yang sudah diubah tetapi belum disimpan. Cincin, bukan warna latar,
   supaya kode statusnya tetap terbaca. */
.kotak--kotor { box-shadow: 0 0 0 2px var(--jagung); }

.kisi__nama small { display: block; font-size: 11px; color: var(--abu-400); }

/* Keterangan kode di bawah kisi. */
.kisi-arti {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 2px 0;
  font-size: 11.5px;
  color: var(--abu-700);
}
.kisi-arti span { display: inline-flex; align-items: center; gap: 5px; }
.kisi-arti i {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}

.kisi__total { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ================================================================== */
/* Baris alat halaman                                                  */
/* ================================================================== */

/* Dipakai bila satu bilah berisi lebih dari sekadar penyaring: navigasi
   tanggal, pencarian, dan menu aksi sekaligus. */
.alat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.alat__isi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.alat input[type=search] { flex: 0 1 260px; width: auto; min-width: 180px; }
.alat select { width: auto; min-width: 150px; }

@media (max-width: 820px) {
  .alat, .alat__isi { width: 100%; }
  .alat input[type=search], .alat select { flex: 1 1 100%; width: 100%; min-width: 0; }
}

/* ================================================================== */
/* Halaman KPM — master-detail                                         */
/* ================================================================== */

/* Halaman KPM boleh memakai seluruh lebar (bukan dibatasi 1180px seperti
   halaman teks), karena ini tata letak dua-panel yang butuh ruang. */
.halaman > .kpm { max-width: none; }

/* Label di atas kotak cari "Buat Berkas/Laporan": memaksa turun baris
   (width:100%) agar kotak cari berada di bawahnya, bukan sejajar. */
.berkas-pilih-label {
  display: block; width: 100%;
  font-size: 13px; font-weight: 600; color: var(--abu-700);
  margin-bottom: 2px;
}

/* ================================================================== */
/* Hub Pengaturan Berkas & Dokumen                                     */
/* ================================================================== */

.setup-grup {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--abu-400); margin: 6px 0 8px;
}

/* Pratinjau nomor pada editor jenis dokumen. */
.setup-contoh {
  padding: 10px 12px; border: 1px dashed var(--abu-200); border-radius: 8px;
  background: var(--abu-50); font-size: 14px; color: var(--daun-700);
  word-break: break-all;
}
.setup-contoh--galat { color: var(--bata); border-color: #eccfc8; background: var(--bata-muda); }

/* Pratinjau kop — meniru kop cetak (cetak.js) pada skala layar. */
.kop-pratinjau {
  background: #fff; border: 1px solid var(--abu-200); border-radius: 8px;
  padding: 16px 18px; color: #000; font-family: Arial, Helvetica, sans-serif;
}
.kop-pratinjau .kop { display: table; width: 100%; table-layout: fixed; }
.kop-pratinjau .kop__logo, .kop-pratinjau .kop__pusat { display: table-cell; vertical-align: middle; }
.kop-pratinjau .kop__logo { width: 56px; height: 56px; text-align: center; }
.kop-pratinjau .kop__logo img { max-width: 52px; max-height: 52px; width: auto; height: auto; }
.kop-pratinjau .kop__pusat { text-align: center; padding: 0 8px; }
.kop-pratinjau .kop__program { font-size: 15px; font-weight: 700; line-height: 1.2; }
.kop-pratinjau .kop__sppg { font-size: 13px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.kop-pratinjau .kop__alamat { font-size: 11px; line-height: 1.3; margin-top: 2px; }
.kop-pratinjau .kop__garis { border-top: 2px solid #000; margin-top: 4px; }

/* ===== Penyusun template: editor + pratinjau kertas A4 hidup ===== */
/* Dua panel: kiri = daftar blok yang bisa disunting, kanan = kertas A4
   dalam iframe yang memakai gaya cetak asli (cetak.js), sehingga
   pratinjau persis seperti hasil cetak. */
.tpl-susun {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 44%);
  gap: 16px; align-items: start;
}
.tpl-editor { min-width: 0; }

.tpl-pratinjau {
  position: sticky; top: 12px;
  border: 1px solid var(--abu-200); border-radius: var(--sudut);
  background: var(--kertas); box-shadow: var(--bayang); overflow: hidden;
}
.tpl-pratinjau__kepala {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--abu-200);
  font-size: 12.5px; font-weight: 700;
}
.tpl-pratinjau__kepala .teks-lembut { font-weight: 600; }
.tpl-pratinjau__kanvas {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 16px; background: var(--abu-200);
  max-height: 78vh; overflow: auto;
}
.tpl-kertas__wrap { flex: none; overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.tpl-kertas { border: 0; display: block; background: #fff; }

/* Saklar orientasi kertas. */
.tpl-orient {
  display: inline-flex; align-self: center;
  border: 1px solid var(--abu-200); border-radius: var(--sudut); overflow: hidden;
}
.tpl-orient button {
  border: 0; background: var(--kertas); cursor: pointer;
  padding: 8px 13px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--abu-700);
}
.tpl-orient button + button { border-left: 1px solid var(--abu-200); }
.tpl-orient button.aktif { background: var(--daun-500); color: #fff; }

/* ===== WYSIWYG: kertas jadi kanvas sunting ===== */
/* Kertas A4 penuh sebagai kanvas; teks disunting langsung di dalamnya
   (contenteditable), susunan blok lewat toolbar mengambang di kertas. */
.tpl-pratinjau--kanvas { position: static; }
.tpl-pratinjau--kanvas .tpl-pratinjau__kanvas { max-height: 80vh; }

/* Komposer dua kolom: kiri = panel alat (tambah blok), kanan = kertas. */
.tpl-komposer {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 14px; align-items: start;
}
.tpl-komposer--solo { grid-template-columns: 1fr; }

/* Panel alat di kiri: tumpukan vertikal, menempel saat kertas digulir. */
.tpl-komposer__alat {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px;
  border: 1px solid var(--abu-200); border-radius: var(--sudut); background: var(--abu-50);
}
.tpl-panel { display: flex; flex-direction: column; gap: 6px; }
.tpl-panel + .tpl-panel { padding-top: 10px; border-top: 1px solid var(--abu-200); }
.tpl-panel__judul {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--abu-700);
}
.tpl-panel__blok { display: flex; flex-direction: column; gap: 5px; }
.tpl-komposer__alat .cip__butir { width: 100%; text-align: left; }
.tpl-komposer__alat .kpm-inline { white-space: normal; }

.tpl-isian { position: relative; }
.tpl-isian .cip__butir { width: 100%; }
.tpl-isian__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: auto; z-index: 20;
  min-width: 230px; max-height: 320px; overflow: auto;
  background: var(--kertas); border: 1px solid var(--abu-200);
  border-radius: var(--sudut); box-shadow: var(--bayang); padding: 5px;
}
.tpl-isian__item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; padding: 7px 9px; border-radius: 6px; font: inherit;
}
.tpl-isian__item:hover { background: var(--daun-100); }
.tpl-isian__item strong { font-family: var(--huruf-angka); font-size: 12.5px; color: var(--daun-700); }
.tpl-isian__item small { font-size: 11.5px; }

.tpl-petunjuk { margin: 0 0 10px; }

@media (max-width: 900px) {
  .tpl-susun { grid-template-columns: 1fr; }
  .tpl-komposer { grid-template-columns: 1fr; }
  .tpl-komposer__alat { position: static; }
  .tpl-pratinjau { position: static; }
  .tpl-pratinjau__kanvas { max-height: 66vh; }
}

/* Tombol ringkas dipakai di panel kiri KPM. */
.tombol--kecil { padding: 6px 11px; font-size: 12.5px; }

/* Kotak cari di kepala panel: kotak teks biasa dengan ikon di kiri,
   BUKAN kolom pilihan — pengguna mengetik dan daftar tersaring seketika. */
.kpm__cari { position: relative; margin-bottom: 10px; }
.kpm__cari-ikon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--abu-400); font-size: 16px; pointer-events: none;
}
.kpm__cari-isian { width: 100%; padding-left: 34px; }

.kpm__alat { display: flex; gap: 8px; margin-bottom: 10px; }
.kpm__alat .tombol { flex: 1; }

.kpm__kosong { padding: 16px 8px; font-size: 13px; color: var(--abu-400); text-align: center; }

/* Baris angka kecil pada tiap butir daftar KPM. */
.kpm__butir-angka { color: var(--daun-500); font-weight: 600; margin-top: 1px; }
.kpm__butir strong .lencana { margin-left: 6px; vertical-align: 1px; }

/* Badan kartu identitas: beri ruang di sekeliling kisi medan. */
.kartu__badan { padding: 16px 18px; }

/* Tabel rincian: kotak angka rata kanan, sama seperti isian PM lama. */
.kpm-rincian td { vertical-align: middle; }
.kpm-total-sel { font-weight: 700; color: var(--daun-700); }

/* Bagian organoleptik: keterangan di kiri, dua medan kecil di kanan. */
.kpm-org {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 18px; padding: 14px 18px; border-top: 1px solid var(--abu-200);
}
.kpm-org__ket strong { display: block; font-size: 14px; }
.kpm-org__ket small { display: block; font-size: 11.5px; }
.kpm-org__medan { display: flex; gap: 14px; }
.kpm-org__medan .grup { min-width: 0; }
.kpm-org__medan label { font-size: 11.5px; }
.kpm-org__medan .isian-angka { width: 88px; }
.kpm-org__medan select { width: auto; min-width: 96px; }

/* Bilah total di kaki kartu rincian. */
/**
 * BILAH TOTAL di kaki kartu rincian KPM — sebuah <div>, BUKAN baris tabel.
 *
 * Pernah dipakai ulang sebagai `<tr class="kpm-total">` pada tabel Dasbor,
 * dan `display: flex` di bawah ini mengubah baris tabel itu menjadi wadah
 * flex: selnya lepas dari kolom kepala tabel, dan latar hijau berujung
 * membulat mendarat di tengah tabel. Baris total tabel kini memakai
 * `.tabel__total` di bawah.
 */
.kpm-total {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px; margin-top: 0;
  background: var(--daun-100); color: var(--daun-700);
  font-size: 13.5px; font-weight: 600;
  border-radius: 0 0 var(--sudut) var(--sudut);
}
.kpm-total strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.kpm-total__paket { color: var(--daun-700); }

@media (max-width: 900px) {
  .kpm-org { flex-direction: column; align-items: stretch; }
  .kpm-org__medan { width: 100%; }
}

/**
 * Baris TOTAL di kaki tabel — tetap sebuah baris tabel, sehingga selnya
 * lurus dengan kolom di atasnya. Garis tebal di atasnya memisahkan total
 * dari rinciannya tanpa perlu warna mencolok.
 */
.tabel__total td {
  border-top: 2px solid var(--daun-500);
  background: var(--daun-100);
  color: var(--daun-700);
  padding-top: 10px; padding-bottom: 10px;
}
.tabel__total strong { font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* Isian angka di dalam tabel: selebar isinya, bukan selebar kolom. */
.tabel .isian-angka {
  width: 84px; max-width: 100%;
  text-align: right; font-variant-numeric: tabular-nums;
  padding: 5px 8px;
}

/* ================================================================== */
/* Saklar geser tiga keadaan — status distribusi                       */
/* ================================================================== */

/**
 * Diletakkan di tengah baris ringkas, antara nama KPM dan angka total.
 * Warna disesuaikan dengan palet aplikasi: hijau daun (Seluruh), kuning
 * jagung (Sebagian), merah bata (Tidak) — bukan biru/oranye/merah umum.
 */
.tri { flex: none; width: 184px; }

/* Nama di kiri dan total di kanan sama-sama melar, sehingga saklar
   benar-benar berada di tengah baris — di antara nama dan total. */
.dist__ringkas .dist__angka { flex: 1 1 0; text-align: right; }

.tri__labels { display: flex; margin-bottom: 5px; }
.tri__label {
  flex: 1; text-align: center; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--abu-400); transition: color .25s ease;
}
.tri__track {
  position: relative; height: 26px;
  border-radius: 13px; background: var(--abu-200);
  display: flex;
}
.tri__zone {
  flex: 1; padding: 0; margin: 0;
  background: transparent; border: 0; cursor: pointer;
  position: relative; z-index: 2; border-radius: 13px;
}
.tri__knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  transition: left .28s cubic-bezier(.175, .885, .32, 1.275), background .25s ease;
  z-index: 1;
}
.tri[data-state="seluruh"] .tri__knob { left: 3px; background: var(--daun-500); }
.tri[data-state="sebagian"] .tri__knob { left: calc(50% - 10px); background: var(--jagung); }
.tri[data-state="tidak"] .tri__knob { left: calc(100% - 23px); background: var(--bata); }
.tri[data-state="seluruh"] .tri__label[data-for="seluruh"] { color: var(--daun-700); }
.tri[data-state="sebagian"] .tri__label[data-for="sebagian"] { color: var(--jagung); }
.tri[data-state="tidak"] .tri__label[data-for="tidak"] { color: var(--bata); }

/* Di layar sempit saklar turun ke baris sendiri di bawah nama KPM. */
@media (max-width: 680px) {
  .dist__ringkas { flex-wrap: wrap; row-gap: 8px; }
  .tri { order: 5; width: 100%; }

  /* Angka total berhenti ikut melar. Aturan `flex: 1 1 0` di atas ada demi
     satu hal saja — menaruh saklar tepat di tengah baris — dan di layar
     sempit saklarnya sudah pindah ke baris sendiri, sehingga aturan itu
     tinggal merampas separuh lebar dari nama KPM. Akibatnya baris keterangan
     ("dialihkan → tujuan · jam") berdesak di kolom setengah lebar dan
     terbaca berantakan. */
  .dist__ringkas .dist__angka { flex: none; }
}

/* ================================================================== */
/* Gudang — Input Stok & Opname (tata letak ERP)                       */
/* ================================================================== */

/* ---- Baris KPI ringkas ---- */
.gudang-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.gudang-kpi__sel {
  background: var(--kertas);
  border: 1px solid var(--abu-200);
  border-radius: var(--sudut);
  box-shadow: var(--bayang);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.gudang-kpi__angka {
  font-size: 22px; font-weight: 700; line-height: 1.1;
  color: var(--daun-700); font-variant-numeric: tabular-nums;
}
.gudang-kpi__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--abu-400);
}
.gudang-kpi__sel--awas { border-color: #e6cf9a; background: var(--jagung-muda); }
.gudang-kpi__sel--awas .gudang-kpi__angka { color: #7a5405; }

/* ---- Kotak cari & tambah item ---- */
.gudang-tambah {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; max-width: 480px;
}
.gudang-tambah__ikon { color: var(--abu-400); font-size: 18px; flex: none; }
.gudang-tambah__kombo { flex: 1; min-width: 0; }

/* ---- Kisi rapat bergaya spreadsheet ---- */
.gudang-kisi td { vertical-align: middle; padding: 7px 10px; }
.gudang-kisi th { white-space: nowrap; }
.gudang-kisi input,
.gudang-kisi select { width: 100%; padding: 7px 9px; }
.gudang-kisi .isian-angka { width: 100%; text-align: right; }
.gudang-kisi .gudang-file { padding: 5px; font-size: 12px; }
.gudang-subtotal { font-weight: 700; color: var(--daun-700); white-space: nowrap; }
.gudang-lencana { margin-left: 6px; vertical-align: 1px; font-size: 10.5px; }
.gudang-hapus { color: var(--abu-400); font-size: 18px; }
.gudang-hapus:hover { color: var(--bata); background: var(--bata-muda); }
.gudang-kosong { padding: 22px 18px; text-align: center; font-size: 13px; color: var(--abu-400); }

/* ---- Bilah simpan menempel di bawah ---- */
.gudang-simpan {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--kertas);
  border: 1px solid var(--abu-200);
  border-radius: var(--sudut);
  box-shadow: 0 -6px 20px -12px rgba(15, 36, 25, .35);
}
.gudang-simpan__info { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.gudang-simpan__info strong { font-size: 15px; }
.gudang-simpan .tombol { flex: none; }

@media (max-width: 640px) {
  .gudang-simpan { flex-direction: column; align-items: stretch; }
  .gudang-simpan .tombol { width: 100%; }
}

/* ===== Penjelajah Data KPM (Dasbor) ===== */
.tabel--rapat th, .tabel--rapat td { padding: 6px 9px; font-size: 12.5px; }
.kpm-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--abu-700); white-space: nowrap; }
.kpm-panel { border: 1px solid var(--abu-200); border-radius: var(--sudut); margin-bottom: 10px; background: var(--kertas); }
.kpm-panel > summary { cursor: pointer; padding: 9px 13px; font-size: 12.5px; font-weight: 700; color: var(--abu-700); }
.kpm-panel__isi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 13px 13px; }
.kpm-panel__judul { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; color: var(--abu-400); text-transform: uppercase; letter-spacing: .03em; }
.kpm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kpm-chip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--abu-200); border-radius: 999px; padding: 4px 10px; font-size: 12px; background: var(--kertas); }
.kpm-chip input { margin: 0; }
.kpm-chip--on { background: var(--daun-100); border-color: var(--daun-500); color: var(--daun-700); }
.kpm-grup td { background: var(--abu-50); }
@media (max-width: 720px) { .kpm-panel__isi { grid-template-columns: 1fr; } }

/* ===== Tab Format Nomor: pengaturan di kiri, token di kanan ===== */
.fmt { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.fmt__utama, .fmt__token { min-width: 0; }
.fmt__token { position: sticky; top: 14px; }

.fmt__label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--abu-400);
  text-transform: uppercase; letter-spacing: .03em;
}

/* Susunan pola: tiap bagian berdiri sebagai keping sendiri, jadi jelas
   mana token dan mana pemisah — dan tidak mungkin salah ketik. */
.fmt__pola {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 46px; padding: 9px 11px;
  border: 1px dashed var(--abu-200); border-radius: 10px; background: var(--abu-50);
}
.fmt__bagian {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 7px;
  font-family: var(--huruf-angka); font-size: 12.5px;
  background: var(--kertas); border: 1px solid var(--abu-200);
}
.fmt__bagian--token { border-color: var(--daun-500); color: var(--daun-700); }
.fmt__bagian--pisah { background: var(--abu-200); font-weight: 700; }
.fmt__bagian--teks { border-style: dashed; color: var(--abu-700); }
.fmt__buang {
  border: 0; background: transparent; cursor: pointer; padding: 0 1px;
  font-size: 14px; line-height: 1; color: var(--abu-400);
}
.fmt__buang:hover { color: var(--bata); }
.fmt__alat { display: flex; gap: 8px; margin-top: 8px; }

.fmt__daftar { display: flex; flex-wrap: wrap; gap: 6px; }
.fmt__daftar--tegak { flex-direction: column; flex-wrap: nowrap; }
.fmt__cip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; padding: 7px 10px; text-align: left;
  border: 1px solid var(--abu-200); border-radius: 8px;
  background: var(--kertas); font: inherit; cursor: pointer;
}
.fmt__cip code { font-family: var(--huruf-angka); font-size: 12.5px; color: var(--daun-700); }
.fmt__cip small { font-size: 11px; color: var(--abu-400); line-height: 1.3; }
.fmt__cip:hover:not(:disabled) { border-color: var(--daun-500); background: var(--daun-100); }
.fmt__cip:disabled { opacity: .5; cursor: not-allowed; }
.fmt__cip--pisah {
  width: auto; flex-direction: row; align-items: center;
  font-family: var(--huruf-angka); font-size: 15px; font-weight: 700;
  padding: 5px 14px;
}

@media (max-width: 900px) {
  .fmt { grid-template-columns: minmax(0, 1fr); }
  .fmt__token { position: static; }
  .fmt__daftar--tegak { flex-direction: row; flex-wrap: wrap; }
  .fmt__cip { width: auto; min-width: 150px; }
}

/* ===== Foto profil pengguna ===== */
.foto-atur { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.foto-atur__aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-atur .pengguna__awal { flex: none; }

/* ===== Pengaturan Sistem (Identitas / Lainnya) ===== */
.bantuan-abu { display: block; margin-top: 4px; font-size: 11.5px; color: var(--abu-400); }
.logo-atur { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; }
.logo-atur__sel { display: flex; flex-direction: column; gap: 8px; }
.logo-atur__sel > label { font-size: 12.5px; font-weight: 600; color: var(--abu-700); }
.logo-atur__pratinjau { min-height: 84px; display: flex; align-items: center; }
.logo-atur__aksi { display: flex; align-items: center; gap: 12px; }

/* Baris tab yang bisa digulir mendatar (untuk hub 8 tab). */
.tab--gulir { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.tab--gulir .tab__butir { white-space: nowrap; flex: none; }

/* ===== Riwayat Distribusi KPM (Dasbor) =====
   Alurnya pendek dengan sengaja: satu baris pemilih di atas, satu tabel di
   bawah. Tidak ada panel pengaturan bertingkat, sehingga halaman dasbor
   tidak tumbuh melebihi satu layar dan tidak perlu digulir jauh. */

.jelajah__pilih {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px;
  padding: 13px 15px; margin-bottom: 4px;
  border: 1px solid var(--abu-200); border-radius: var(--sudut); background: var(--kertas);
}
.jelajah__medan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jelajah__medan > label {
  font-size: 11.5px; font-weight: 700; color: var(--abu-400);
  text-transform: uppercase; letter-spacing: .03em;
}
.jelajah__medan input[type=date] { width: auto; min-width: 160px; }
.jelajah__medan--aksi { margin-left: auto; }

.jelajah__preset { display: flex; flex-wrap: wrap; gap: 7px; }
.jelajah__cip {
  border: 1px solid var(--abu-200); border-radius: 999px; padding: 7px 14px;
  background: var(--kertas); color: var(--abu-700);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.jelajah__cip:hover { border-color: var(--daun-500); color: var(--daun-700); }
.jelajah__cip--on { background: var(--daun-700); border-color: var(--daun-700); color: #fff; }

/* Daftar centang untuk memilih banyak baris sekaligus — mis. satuan
   pendidikan yang terdampak keadaan darurat. Tingginya dibatasi agar daftar
   berisi belasan satdik tidak mendorong tombol Terbitkan keluar layar. */
.pilih-banyak {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 14px;
  max-height: 220px; overflow-y: auto;
  padding: 8px 10px; border: 1px solid var(--abu-200); border-radius: var(--sudut);
  background: var(--kertas);
}
.pilih-banyak__butir {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 2px; font-size: 13.5px; line-height: 1.35; cursor: pointer;
}
.pilih-banyak__butir input { width: auto; flex: none; margin: 2px 0 0; }
.pilih-banyak__butir:hover { color: var(--daun-700); }
.pilih-banyak__alat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
}
.pilih-banyak__alat .bantuan-abu { margin-left: auto; }

/* Saklar geser untuk opsi Organoleptik. */
/* `position: relative` di sini BUKAN hiasan — ia menahan kotak centang
   tersembunyi di bawah. Tanpa jangkar ini, `input` yang di-`position:
   absolute` memakai blok penampung awal (viewport) sebagai acuan, lalu
   aturan umum `input { width: 100% }` membuatnya selebar viewport DARI
   posisi statisnya — mendorong dokumen ~1000px ke kanan. Itulah sebab
   halaman Dasbor (satu-satunya pemakai saklar ini) bisa digeser mendatar
   dan menyisakan pita abu-abu di kanan, sementara menu lain tidak. */
.jelajah__saklar {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 11px; border: 1px solid var(--abu-200); border-radius: 9px;
  background: var(--abu-50); font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
/* Sembunyikan kotak centang tanpa menghilangkannya dari fokus keyboard:
   geometri 1x1 tanpa padding/border, bukan `display:none`. */
.jelajah__saklar input {
  position: absolute; inset: 0 auto auto 0;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
}
.jelajah__saklar-alur {
  position: relative; flex: none; width: 34px; height: 19px;
  border-radius: 999px; background: var(--abu-200); transition: background 160ms;
}
.jelajah__saklar-alur::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  transition: transform 160ms; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.jelajah__saklar input:checked ~ .jelajah__saklar-alur { background: var(--daun-500); }
.jelajah__saklar input:checked ~ .jelajah__saklar-alur::after { transform: translateX(15px); }
.jelajah__saklar input:focus-visible ~ .jelajah__saklar-alur { outline: 2px solid var(--daun-500); outline-offset: 2px; }

.jelajah__kepala-hasil { margin: 14px 0 8px; font-size: 13px; color: var(--abu-700); }

/* Catatan di bawah tabel. Isinya keterangan yang menentukan cara membaca
   angka (penggabungan Pendidik/Tendik/Kader, status organoleptik terhadap
   pagu), jadi sengaja diberi latar agar tidak terlewat. */
.jelajah__catatan-kotak {
  margin-top: 10px; padding: 11px 14px;
  border: 1px solid var(--abu-200); border-left: 3px solid var(--daun-500);
  border-radius: 9px; background: var(--abu-50);
}
.jelajah__catatan-kotak p { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--abu-700); }
.jelajah__catatan-kotak p:last-child { margin-bottom: 0; }
.jelajah__catatan-kotak code { font-size: 11.5px; }

/* Tabel Kelompok Porsi berkolom banyak; dirapatkan agar muat tanpa perlu
   digeser mendatar pada layar desktop biasa. */
.tabel--porsi th, .tabel--porsi td { padding: 7px 8px; white-space: nowrap; }
.tabel--porsi th { font-size: 11px; letter-spacing: .01em; }

/* Pengaman lebar: tanpa ini sebuah tabel lebar dapat memaksa wadahnya ikut
   melebar, dan seluruh halaman jadi bisa digeser ke samping — bukan hanya
   tabelnya. */
.tabel-gulir { max-width: 100%; min-width: 0; }

@media (max-width: 640px) {
  .jelajah__pilih { gap: 12px; }
  .jelajah__medan { width: 100%; }
  .jelajah__medan--aksi { margin-left: 0; }
  .jelajah__medan--aksi .tombol { width: 100%; }
}

/* ================================================================== */
/* Lembar menu (isi bottom sheet navigasi)                             */
/* ================================================================== */

/**
 * Daftar lurus tanpa kategori, dipakai lembar "+ Input" dan "Lainnya".
 *
 * Sengaja TIDAK memakai ulang `.menu__butir` milik bilah sisi. Kelas itu
 * membawa penanda "sedang aktif" beserta pita tegak di tepi kiri dari
 * berkas tema; di dalam lembar yang menutup begitu ditekan, penanda itu
 * tidak pernah sempat berarti dan hanya menimbulkan kedipan.
 *
 * Baris dibuat setinggi 52px: jempol perlu sasaran yang lapang, dan
 * lembar ini justru dipakai sambil berdiri di lapangan.
 */
.lembar-menu {
  display: flex;
  flex-direction: column;
  margin: -8px -20px -4px;      /* melawan padding .dialog__isi agar baris penuh selebar lembar */
}

.lembar-menu__butir {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 10px 20px;
  color: var(--tinta);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.lembar-menu__butir:hover,
.lembar-menu__butir:active { background: var(--abu-50); }

.lembar-menu__ikon {
  font-size: 19px;
  color: var(--abu-700);
  flex: none;
}

/* Baris yang sedang terbuka ditandai halus — cukup untuk menjawab "saya
   ada di mana", tanpa menjadikannya tampak seperti pilihan tercentang. */
.lembar-menu__butir--kini { font-weight: 700; }
.lembar-menu__butir--kini .lembar-menu__ikon { color: var(--jagung-kuat); }

/* ================================================================== */
/* Input Menu MBG                                                      */
/* ================================================================== */

/**
 * Dua kartu porsi berdampingan dengan lebar PERSIS SAMA.
 *
 * Sengaja tidak memakai `.petak-2`, yang berat sebelah (1fr : 1.4fr) untuk
 * tata letak dasbor. Porsi Kecil dan Porsi Besar berkedudukan setara dan
 * diisi berpasangan — mata membandingkan baris demi baris antara keduanya,
 * dan itu hanya bekerja bila kedua kolomnya sama lebar.
 */
.mbg-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

/* Isian angka gizi mengisi lebar kolom formulir. Berbeda dari
   `.isian-angka` yang berlebar tetap 92px karena dipakai berderet di dalam
   tabel; di sini tiap angka berdiri sendiri di dalam kisi formulir. */
.mbg-angka { text-align: right; font-family: var(--huruf-angka); }

/* Saklar "Samakan" menumpang di kepala kartu Porsi Besar, jadi dikecilkan
   agar tidak menyaingi judul kartunya. */
.kartu__kepala .jelajah__saklar { flex: none; font-size: 12px; }

/* Baris rincian yang terbuka di bawah satu baris riwayat. Diberi latar
   abu agar terbaca sebagai lanjutan baris di atasnya, bukan baris data
   tersendiri. */
.mbg-rinci > td { background: var(--abu-50); padding: 14px 18px; }
.mbg-rinci__judul {
  margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--abu-400);
}
.mbg-rinci__aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: flex-end; }

@media (max-width: 900px) {
  .mbg-duo { grid-template-columns: 1fr; }
}

/* ---- Poster Rencana Menu (diekspor sebagai JPG) ----
 *
 * Wadahnya digeser jauh ke luar layar dan BUKAN `display:none`, karena
 * html2canvas hanya dapat memotret elemen yang benar-benar dirender.
 *
 * Warnanya ditulis harfiah, bukan lewat var(), dan hurufnya Arial seperti
 * berkas cetak lain. Alasannya: berkas JPG ini diedarkan ke satdik dan wali
 * murid sebagai lembar resmi, jadi rupanya harus tetap sama walau tema
 * aplikasi kelak diganti. Nilai-nilainya tetap diambil dari palet yang sama
 * dengan aplikasi, hanya dibekukan. */
.mbg-poster-wadah {
  position: fixed;
  left: -10000px; top: 0;
  width: 1150px;
  pointer-events: none;
}

.mbg-poster {
  box-sizing: border-box;
  width: 1150px;
  padding: 32px;
  background: #fff;
  color: #16201c;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
}

.mbg-poster__kop { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; }
.mbg-poster__logo { width: 80px; height: 80px; flex: none; }
.mbg-poster__logo img { width: 100%; height: 100%; object-fit: contain; }

.mbg-poster__kop-teks { flex: 1; text-align: center; line-height: 1.25; }
.mbg-poster__kop-teks h4 {
  margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #545f5a;
}
.mbg-poster__kop-teks h2 {
  margin: 3px 0 0; font-size: 17px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: #163024;
}
.mbg-poster__kop-teks h3 {
  margin: 3px 0 0; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; color: #16201c;
}
.mbg-poster__kop-teks p { margin: 5px 0 0; font-size: 10.5px; color: #545f5a; }

/* Kop ganda: satu garis tebal, satu tipis — lazim pada surat dinas. */
.mbg-poster__garis-tebal { border-top: 2.5px solid #163024; }
.mbg-poster__garis-tipis { border-top: 1px solid #8e9994; margin-top: 2px; margin-bottom: 20px; }

.mbg-poster__judul {
  padding: 12px 14px; margin-bottom: 20px; text-align: center;
  background: #163024; color: #fff;
}
.mbg-poster__judul h2 {
  margin: 0; font-size: 15px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.mbg-poster__judul p { margin: 4px 0 0; font-size: 11.5px; font-weight: 600; color: #a9c7b7; }

.mbg-poster__bagian { margin-bottom: 22px; }
.mbg-poster__bagian-judul {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #e2e7e4;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #16201c;
}
.mbg-poster__pita { width: 10px; height: 20px; flex: none; }
.mbg-poster__pita--kecil { background: #b07406; }
.mbg-poster__pita--besar { background: #205138; }

.mbg-poster table {
  width: 100%; border-collapse: collapse;
  table-layout: fixed; font-size: 11.5px;
}
.mbg-poster th, .mbg-poster td {
  border: 1px solid #c4cdc8; padding: 7px 6px;
  text-align: center; vertical-align: middle;
}
.mbg-poster thead th { background: #163024; color: #fff; font-weight: 700; }
.mbg-poster__kolom-judul { width: 158px; background: #0f2318; }
.mbg-poster__hari { display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.mbg-poster__tgl { display: block; font-size: 10px; font-weight: 500; color: #b9cec3; margin-top: 1px; }
.mbg-poster__kkal { display: block; font-size: 10px; font-weight: 600; color: #8fd0ae; margin-top: 2px; }

/* Pemisah antara blok Komposisi dan blok Kandungan Gizi di dalam tabel. */
.mbg-poster__pisah td {
  background: #eef2f0; color: #3c4b44; padding: 5px 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.mbg-poster__label {
  background: #f7f9f8; text-align: left; padding-left: 10px; font-weight: 700;
}
.mbg-poster__kosong { color: #aab3ae; }

.mbg-poster__catatan {
  margin: 18px 0; padding: 10px 12px;
  border: 1px solid #e6cf9a; border-left: 3px solid #b07406; background: #fdf3d9;
  font-size: 10.5px; line-height: 1.5; color: #6b4a05;
}

.mbg-poster__ttd { display: flex; justify-content: flex-end; padding: 10px 40px 0; }
.mbg-poster__ttd-kolom { width: 260px; text-align: center; font-size: 12px; }
.mbg-poster__ttd-kolom p { margin: 0; }
.mbg-poster__ttd-kota { color: #545f5a; }
.mbg-poster__ttd-jabatan { font-weight: 700; margin-top: 2px; }
.mbg-poster__ttd-ruang {
  height: 80px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-style: italic; color: #c4cdc8;
}
.mbg-poster__ttd-nama { font-weight: 700; text-decoration: underline; }
.mbg-poster__ttd-nip { font-size: 10.5px; color: #545f5a; margin-top: 2px; }

/* ------------------------------------------------------------------ */
/* Pasangan tanggal berdampingan (Berita Acara Pencairan Gaji Staf)     */
/* ------------------------------------------------------------------ */

/*
 * Dua tanggal sejajar dengan centang penyama tepat di tengahnya. Centangnya
 * sengaja di TENGAH, bukan di bawah salah satunya: yang disamakan adalah
 * hubungan antara keduanya, dan meletakkannya di salah satu sisi membuatnya
 * terbaca sebagai milik sisi itu saja.
 *
 * Di layar sempit ketiganya menumpuk dan centangnya berpindah ke kiri —
 * tanda panah "di tengah" kehilangan artinya begitu susunannya menurun.
 */
.pasangan-tanggal {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
}
.pasangan-tanggal__sisi { flex: 1 1 180px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pasangan-tanggal__tengah { flex: 0 0 auto; padding-bottom: 9px; }
.pasangan-tanggal__tengah label {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; cursor: pointer; font-size: 13px;
}
.pasangan-tanggal__tengah input { margin: 0; }

@media (max-width: 560px) {
  .pasangan-tanggal { flex-direction: column; align-items: stretch; }
  .pasangan-tanggal__tengah { padding: 0 0 4px; }
}

/* Sel tabel yang terisi sendiri dan tidak boleh diketik. Sengaja `readonly`,
   bukan `disabled`: isian yang disabled tidak ikut terkirim, padahal justru
   isinya yang harus tercetak di dokumen. */
input.mati {
  background: var(--abu-50); color: var(--abu-700); cursor: default;
}