/* ============================================================
   Aplikasi petugas — HP di lapangan
   Sasaran: sarung tangan basah, matahari terik, satu tangan.
   Semua sasaran sentuh minimal 48 px.
   ============================================================ */

body{padding-bottom:calc(76px + var(--aman-bawah))}

/* ---------- masuk ---------- */
.masuk{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:radial-gradient(600px 400px at 40% 0%, #16585C 0%, var(--laut) 55%, var(--laut-3) 100%);
  padding:22px;overflow-y:auto;
}
.masuk-kotak{
  width:100%;max-width:360px;background:var(--putih);
  border-radius:var(--r-l);padding:28px 24px 24px;box-shadow:var(--sh-3);
}
.masuk-kotak .isian{font-size:22px;letter-spacing:.18em;text-align:center;min-height:56px}

/* ---------- kepala ---------- */
.kepala{position:sticky;top:0;z-index:90;background:var(--laut);color:#fff;padding-top:var(--aman-atas)}
.kepala-baris{display:flex;align-items:center;gap:12px;max-width:620px;margin:0 auto;padding:12px 16px}
.kepala-teks{flex:1;min-width:0;line-height:1.25}
.kepala-teks strong{display:block;font-size:15.5px;font-weight:800}
.kepala-teks span{display:block;font-size:11.5px;opacity:.75;font-weight:600}
.kepala-tbl{width:42px;height:42px;border-radius:11px;color:#fff;display:grid;place-items:center;background:rgba(255,255,255,.12)}

.pita-antre{background:var(--laut-2);color:#fff;font-size:12.5px;font-weight:700;text-align:center;padding:7px 12px}

#isi{max-width:620px;margin:0 auto;padding:14px 14px 8px}

/* ---------- log angkutan (rit) ---------- */
.rit-kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);
  padding:16px 16px 14px;margin-bottom:14px;
}
.rit-kartu.berjalan{
  background:linear-gradient(150deg,var(--laut-2) 0%,var(--laut) 100%);
  color:#fff;border:0;box-shadow:var(--sh-2);
}
.rit-atas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.rit-kartu.berjalan .mini{color:rgba(255,255,255,.8)}
.rit-kartu.berjalan .mono{font-size:13px;opacity:.85}
.rit-tanya{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:3px}
.rit-jam{font-size:15px;font-weight:600}
.rit-jam b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.rit-kartu.berjalan .kecil{color:rgba(255,255,255,.78);margin-top:5px}

/* ---------- cari ---------- */
.cari-bungkus{margin-bottom:14px}
.cari-bungkus .isian{min-height:52px;font-size:15.5px}
.cari-bungkus .kecil{margin-top:6px}
/* Kolom cari melar, penyaring RT selebar seperlunya. Keduanya tetap
   setinggi 52px supaya mudah ditekan dengan jempol sambil berdiri. */
.cari-baris{display:flex;gap:8px}
.cari-baris #cari{flex:1;min-width:0}
.cari-baris #tapis-rt{flex:0 0 auto;width:118px;padding-right:10px}

/* ---------- kemajuan rute ---------- */
.maju{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-m);
  padding:14px 16px;margin-bottom:14px;
}
.maju-atas{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.maju-atas b{font-size:19px;font-weight:800}
.maju-atas span{font-size:12.5px;color:var(--redup);font-weight:600}
.maju-pecah{display:flex;gap:14px;margin-top:10px;font-size:12px;font-weight:700;color:var(--redup);flex-wrap:wrap}
.maju-pecah i{font-style:normal;display:inline-flex;align-items:center;gap:5px}
.maju-pecah .kotak{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ---------- kelompok per RT ---------- */
.rt-blok{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-m);
  margin-bottom:12px;overflow:hidden;
}
.rt-blok.tuntas{border-color:#BFDCCB;background:#F5FAF7}
.rt-blok.susulan{border-color:var(--pala);border-width:1.5px}
.rt-kepala{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:14px 15px 12px;text-align:left;
}
.rt-judul{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.rt-judul b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.rt-jenis{font-size:12px;font-weight:700;color:var(--redup)}
.lencana-susulan{
  font-size:10.5px;font-weight:800;letter-spacing:.04em;
  background:var(--pala-soft);color:#6B4E10;padding:3px 9px;border-radius:999px;
}
.rt-kanan{display:flex;align-items:center;gap:10px;flex:none}
.rt-hitung{
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--redup);
}
.rt-hitung.tuntas{color:var(--daun)}
.rt-panah{color:var(--redup);font-size:13px}
.rt-catatan{font-size:11.5px;color:#6B4E10;padding:0 15px 8px;line-height:1.5}
.rt-batang{height:4px;background:var(--garis);margin:0 15px}
.rt-batang > i{display:block;height:100%;background:var(--daun)}
.rt-blok.susulan .rt-batang > i{background:var(--pala)}
.rt-isi{padding:12px 12px 4px}
.rt-aksi{padding:12px 12px 0}

/* pilihan RT yang ditunda, di lembar tutup rute */
.rt-pilih{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 13px;border:1.5px solid var(--garis);border-radius:11px;
  margin-bottom:8px;cursor:pointer;font-size:14px;line-height:1.5;
}
.rt-pilih input{width:20px;height:20px;margin-top:1px;accent-color:var(--pala);flex:none}
.rt-pilih:has(input:checked){border-color:var(--pala);background:var(--pala-soft)}

/* ---------- kartu rumah ---------- */
.rumah{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-m);
  padding:13px 14px;margin-bottom:9px;
}
.rumah.terangkut{border-color:#BFDCCB;background:#F5FAF7}
.rumah.kosong{opacity:.66}
.rumah.masalah{border-color:#E9BCB1;background:#FDF6F4}
.rumah.luar-rute{border-style:dashed}
.rumah-atas{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px}
.rumah-isi{flex:1;min-width:0}
.rumah-nama{font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.rumah-alamat{font-size:12.5px;color:var(--redup);margin-top:2px}
.rumah-no{font-size:11.5px;color:var(--redup);margin-top:3px}
.rumah-tunggak{
  font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:999px;
  background:var(--fuli-soft);color:#8E2F1B;white-space:nowrap;flex:none;
}
.rumah-tunggak.lunas{background:var(--daun-soft);color:#1E5D38}

/* tiga pilihan centang */
.tiga{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tiga button{
  min-height:52px;border-radius:11px;font-size:12.5px;font-weight:700;
  background:var(--kertas);color:var(--redup);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  line-height:1.2;text-align:center;padding:6px 4px;
}
.tiga button .tik{font-size:15px;line-height:1}
.tiga button:hover{background:#E3E9E6}
.tiga button.pilih[data-nilai="terangkut"]{background:var(--daun);color:#fff}
.tiga button.pilih[data-nilai="kosong"]{background:var(--redup);color:#fff}
.tiga button.pilih[data-nilai="masalah"]{background:var(--fuli);color:#fff}

.rumah-setor{
  margin-top:8px;width:100%;min-height:48px;border-radius:11px;
  background:var(--putih);box-shadow:inset 0 0 0 1.5px var(--laut);
  color:var(--laut);font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.rumah-setor:hover{background:#DCEAEA}

.pisah-judul{
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--redup);margin:20px 0 9px;
}

/* ---------- setoran ---------- */
.total-kartu{text-align:center;padding:20px 16px}
.total-kartu b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;margin:6px 0 3px}
.cepat{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.cepat button{
  padding:9px 14px;border-radius:10px;background:var(--kertas);
  font-size:13px;font-weight:700;
}
.cepat button:hover{background:#E3E9E6}
.isian-rp{position:relative}
.isian-rp span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:700;color:var(--redup);pointer-events:none}
.isian-rp .isian{padding-left:46px;font-size:21px;font-weight:700;min-height:56px}

.verif-alokasi{
  padding:12px 14px;border-radius:11px;background:var(--pala-soft);
  font-size:13px;line-height:1.65;color:#6B4E10;
}
.angka-baris{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0}
.angka-baris span{font-size:13.5px;color:var(--redup)}
.angka-baris b{font-size:15px}

/* ---------- bukti terima ----------
   Dipindah ke bersama.css (20 Agustus 2026) supaya admin bisa memakai
   kartu bukti yang sama -- lihat L.buatKartuBukti di data-contoh.js. */

/* ---------- unggah ---------- */
.unggah{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--garis);background:var(--putih);
  font-size:14.5px;font-weight:700;color:var(--laut-2);
}
.unggah.terisi{border-style:solid;border-color:var(--daun);color:var(--daun)}

/* ---------- tab bawah ---------- */
.tab-bawah{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-top:1px solid var(--garis);padding-bottom:var(--aman-bawah);
}
.tab-bawah button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:10px 4px 9px;color:var(--redup);font-size:11.5px;font-weight:700;
}
.tab-bawah svg{width:24px;height:24px}
.tab-bawah button.aktif{color:var(--laut)}