/* ============================================================
   Layanan Sampah Tanah Rata — gaya bersama
   Dipakai oleh aplikasi warga, panel admin, dan aplikasi petugas.
   ============================================================ */

:root{
  /* warna resmi */
  --laut:#0C4A4E;
  --laut-2:#12666B;
  --laut-3:#0A3B3E;
  --daun:#2F7D4E;
  --daun-soft:#E4F0E8;
  --fuli:#C0492E;
  --fuli-soft:#FBEAE5;
  --pala:#E0A93B;
  --pala-soft:#FBF1DC;
  --kertas:#EFF3F1;
  --putih:#FFFFFF;
  --tinta:#11201F;
  --redup:#63736F;
  --garis:#E1E8E5;

  --r-l:20px;
  --r-m:14px;
  --r-s:10px;

  --sh-1:0 1px 2px rgba(17,32,31,.06);
  --sh-2:0 1px 2px rgba(17,32,31,.05), 0 10px 26px -14px rgba(17,32,31,.28);
  --sh-3:0 12px 40px -12px rgba(17,32,31,.30);

  --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --aman-atas:env(safe-area-inset-top, 0px);
  --aman-bawah:env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--tinta);
  background:var(--kertas);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
a{color:var(--laut-2)}
:focus-visible{outline:2.5px solid var(--laut);outline-offset:2px;border-radius:8px}
.mono{font-family:var(--mono);letter-spacing:.02em}
[hidden]{display:none !important}

/* ---------- teks ---------- */
.h1{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.h2{font-size:16px;font-weight:700;letter-spacing:-.01em}
.h3{font-size:13.5px;font-weight:700}
.kecil{font-size:12.5px;color:var(--redup);line-height:1.5}
.mini{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--laut-2)}
.redup{color:var(--redup)}
.tebal{font-weight:700}

/* ---------- kartu ---------- */
.kartu{
  background:var(--putih);
  border:1px solid var(--garis);
  border-radius:var(--r-l);
  box-shadow:var(--sh-1);
  padding:16px;
}
.kartu + .kartu{margin-top:12px}
.kartu-judul{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}

/* ---------- tombol ---------- */
.tbl{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 18px;border-radius:12px;
  font-size:14.5px;font-weight:700;white-space:nowrap;
  transition:transform .06s ease, filter .15s ease;
}
.tbl:active{transform:translateY(1px)}
.tbl:disabled{opacity:.45;cursor:not-allowed}
.tbl-utama{background:var(--laut);color:#fff}
.tbl-utama:hover{filter:brightness(1.1)}
.tbl-hijau{background:var(--daun);color:#fff}
.tbl-merah{background:var(--fuli);color:#fff}
.tbl-garis{background:var(--putih);color:var(--laut);box-shadow:inset 0 0 0 1.5px var(--garis)}
.tbl-garis:hover{background:var(--kertas)}
.tbl-halus{background:var(--kertas);color:var(--tinta)}
.tbl-penuh{width:100%}
.tbl-kecil{min-height:36px;padding:0 12px;font-size:13px;border-radius:9px}

/* ---------- label status ---------- */
.label{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;line-height:1.4;
}
.label-lunas{background:var(--daun-soft);color:#1E5D38}
.label-sebagian{background:var(--pala-soft);color:#8A6412}
.label-belum{background:var(--fuli-soft);color:#8E2F1B}
.label-netral{background:var(--kertas);color:var(--redup)}
.label-laut{background:#DCEAEA;color:var(--laut)}
.titik{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---------- ruas isian ---------- */
.ruas{margin-bottom:14px}
.ruas > label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.ruas .bantuan{font-size:11.5px;color:var(--redup);margin-top:5px}
.isian{
  width:100%;min-height:46px;padding:11px 13px;
  background:var(--putih);border:1.5px solid var(--garis);border-radius:12px;
  font-size:15px;
}
.isian:focus{border-color:var(--laut);outline:none}
textarea.isian{min-height:96px;resize:vertical;line-height:1.5}
select.isian{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2363736F' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

/* ---------- tanda mata (lihat/sembunyikan kata sandi) ---------- */
.isian-sandi-bungkus{position:relative}
.isian-sandi-bungkus .isian{padding-right:46px}
.tbl-mata{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;background:none;border:0;padding:0;
  color:var(--redup);cursor:pointer;
}
.tbl-mata:hover{color:var(--tinta)}
.salah{border-color:var(--fuli) !important}
.pesan-salah{font-size:12px;color:var(--fuli);font-weight:600;margin-top:5px}

/* pilihan berjajar (RT, jenis sampah, dst) */
.pilihan{display:flex;flex-wrap:wrap;gap:8px}
.pilihan input{position:absolute;opacity:0;pointer-events:none}
.pilihan label{
  padding:9px 16px;border-radius:11px;background:var(--putih);
  box-shadow:inset 0 0 0 1.5px var(--garis);
  font-size:14px;font-weight:700;cursor:pointer;
}
.pilihan input:checked + label{background:var(--laut);color:#fff;box-shadow:none}
.pilihan input:focus-visible + label{outline:2.5px solid var(--laut);outline-offset:2px}

/* ---------- baris daftar ---------- */
.baris{
  display:flex;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--garis);
}
.baris:last-child{border-bottom:0}
.baris-isi{flex:1;min-width:0}
.baris-isi .judul{font-size:14.5px;font-weight:700;line-height:1.35}
.baris-isi .sub{font-size:12.5px;color:var(--redup);margin-top:2px}

/* ---------- garis batang kemajuan ---------- */
.batang{height:8px;border-radius:999px;background:var(--garis);overflow:hidden}
.batang > i{display:block;height:100%;border-radius:999px;background:var(--daun);transition:width .3s ease}
.batang.sebagian > i{background:var(--pala)}
.batang.belum > i{background:var(--fuli)}

/* ---------- pemberitahuan mengambang ---------- */
#kabar{
  position:fixed;left:50%;bottom:calc(96px + var(--aman-bawah));transform:translateX(-50%) translateY(20px);
  z-index:200;max-width:min(420px, calc(100vw - 32px));
  background:var(--tinta);color:#fff;padding:12px 16px;border-radius:13px;
  font-size:13.5px;font-weight:600;box-shadow:var(--sh-3);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
}
#kabar.tampil{opacity:1;transform:translateX(-50%) translateY(0)}
#kabar.baik{background:#1E5D38}
#kabar.buruk{background:#8E2F1B}
#kabar.awas{background:#8A5A16}

/* ---------- penanda luring ---------- */
.pita-luring{
  background:var(--pala);color:#4A3708;
  font-size:12.5px;font-weight:700;text-align:center;padding:7px 12px;
}

/* ---------- lembar naik dari bawah ---------- */
.tirai{
  position:fixed;inset:0;background:rgba(11,26,25,.45);
  z-index:150;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.tirai.tampil{opacity:1;pointer-events:auto}
.lembar{
  position:fixed;left:0;right:0;bottom:0;z-index:151;
  background:var(--putih);border-radius:22px 22px 0 0;
  padding:8px 18px calc(20px + var(--aman-bawah));
  max-height:88vh;overflow-y:auto;
  transform:translateY(102%);transition:transform .26s cubic-bezier(.22,1,.36,1);
  box-shadow:var(--sh-3);
}
.lembar.tampil{transform:translateY(0)}
.lembar .genggam{width:38px;height:4px;border-radius:99px;background:var(--garis);margin:6px auto 14px}

/* ---------- bukti terima (dipakai bersama: petugas + admin) ----------
   Dipindah dari petugas.css (20 Agustus 2026) supaya admin bisa memakai
   kartu bukti yang sama -- lihat L.buatKartuBukti di data-contoh.js.
   Sengaja meniru struk transfer bank/dompet digital: kop, nomor,
   nominal besar, rincian baris, garis putus-putus, catatan kaki. */
.bukti{
  border:2px solid var(--laut);border-radius:var(--r-m);padding:18px 18px 16px;
  background:var(--putih);
}
.bukti-kop{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1.5px dashed var(--garis)}
.bukti-kop strong{display:block;font-size:14px;font-weight:800;line-height:1.25}
.bukti-kop span{display:block;font-size:11px;color:var(--redup);font-weight:600}
.bukti-nomor{
  text-align:center;font-size:19px;font-weight:600;letter-spacing:.09em;
  color:var(--laut);margin:14px 0 2px;
}
.bukti-jumlah{
  text-align:center;font-size:34px;font-weight:600;letter-spacing:-.02em;
  color:var(--daun);margin-bottom:16px;
}
.bukti-baris{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px;border-bottom:1px solid var(--garis)}
.bukti-baris span{color:var(--redup)}
.bukti-baris b{font-weight:700;text-align:right}
.bukti-alokasi{
  margin-top:12px;padding:11px 13px;border-radius:10px;background:var(--daun-soft);
  font-size:12.5px;line-height:1.6;color:#1E5D38;
}
.bukti-kaki{font-size:11.5px;color:var(--redup);text-align:center;margin-top:14px;line-height:1.55}

.bukti-aksi{display:flex;gap:8px;margin-top:14px}
.bukti-aksi button{flex:1}

/* Dipakai L.cetakBukti() untuk mencetak HANYA kartu bukti, bukan
   seluruh halaman di baliknya (dialog/tab yang sedang terbuka). */
#cetak-bukti-area{display:none}

/* ---------- cetak ---------- */
@media print{
  body{background:#fff}
  .tanpa-cetak, .tab-bawah, .kepala, #kabar{display:none !important}
  .kartu{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  @page{margin:16mm}

  body.cetak-bukti-aktif > *:not(#cetak-bukti-area){display:none !important}
  body.cetak-bukti-aktif #cetak-bukti-area{display:flex !important;justify-content:center;padding:24px}
  body.cetak-bukti-aktif #cetak-bukti-area .bukti{width:380px}
}

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