/* ====================================================================
   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);
}
.dist__meta span { display: inline-flex; align-items: center; gap: 4px; }

/* 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;
}
.alih__pilih { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.alih__pilih input { margin-top: 3px; flex: none; }
.alih__pilih strong { display: block; font-size: 13px; }
.alih__pilih small {
  display: block;
  color: var(--abu-700);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 2px;
}
.alih__tujuan { margin-top: 10px; }

.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 BELUM pernah tercatat di database sengaja dibedakan dari sel
 * berstatus Hadir. Tanpa pembedaan ini, kisi menampilkan deretan H untuk
 * tanggal yang sebenarnya belum pernah diisi siapa pun — dan itu
 * kebohongan yang mahal, karena angkanya dipakai sebagai dasar insentif.
 */
.kotak--kosong {
  background: transparent;
  border: 1px dashed var(--abu-200);
  color: var(--abu-400);
  font-weight: 400;
}

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

/* Kolom tanggal yang ditandai libur: seluruh kolomnya diredupkan, bukan
   hanya kepalanya, agar sekali lihat jelas hari itu tidak dihitung. */
.kisi__hari--libur { background: var(--abu-50); }

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

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

/* ================================================================== */
/* 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); }
.kpm-total td { border-top: 2px solid var(--abu-200); 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; }