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

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

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

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

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

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

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

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

* { box-sizing: border-box; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tirai-sisi { display: none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

input, select, textarea {
  font: inherit;
  color: inherit;
  padding: 8px 10px;
  border: 1px solid var(--abu-200);
  border-radius: 6px;
  background: var(--kertas);
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* TABRAKAN CASCADE — jangan dikembalikan.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.kisi { font-size: 13px; }

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

.kisi__hari { text-align: center; padding: 6px 4px !important; }
.kisi__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); }