/* petugas.css v23 - Simple & bersih (font sistem, 1 warna aksen) */

:root {
  --bg: #f5f6f8;
  --kartu: #ffffff;
  --garis: #e3e6eb;
  --teks: #111827;
  --teks-2: #6b7280;
  --input: #ffffff;
  --input-garis: #d1d5db;
  --aksen: #2563eb;
  --hijau: #059669;
  --hijau-bg: #ecfdf5;
  --merah: #dc2626;
  --merah-bg: #fef2f2;
  --ambar: #b45309;
  --ambar-bg: #fffbeb;
  --on-hijau: #ffffff;
  --on-merah: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f15; --kartu: #141a23; --garis: #263040; --teks: #eef2f7; --teks-2: #97a3b4;
    --input: #0e131b; --input-garis: #344052; --aksen: #3b82f6;
    --hijau: #34d399; --hijau-bg: rgba(52,211,153,.12);
    --merah: #f87171; --merah-bg: rgba(248,113,113,.12);
    --ambar: #fbbf24; --ambar-bg: rgba(251,191,36,.12);
    --on-hijau: #052e22;
    --on-merah: #3b0a0a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --on-hijau: #052e22;
  --on-merah: #3b0a0a;
  --bg: #0b0f15; --kartu: #141a23; --garis: #263040; --teks: #eef2f7; --teks-2: #97a3b4;
  --input: #0e131b; --input-garis: #344052; --aksen: #3b82f6;
  --hijau: #34d399; --hijau-bg: rgba(52,211,153,.12);
  --merah: #f87171; --merah-bg: rgba(248,113,113,.12);
  --ambar: #fbbf24; --ambar-bg: rgba(251,191,36,.12);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--teks); line-height: 1.45;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
.st-sumber, .cl-mode { display: none; }

.ikon, button svg, .nav-app svg, .st-gps svg { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.cl-baris svg, .cl-baris .ikon, .seg svg, .seg .ikon, .seg img { display: none !important; }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
input:focus-visible + .seg, input:focus-visible + .ubin { outline: 2px solid var(--aksen); outline-offset: 2px; }

/* Header */
.kepala { background: var(--kartu); border-bottom: 1px solid var(--garis); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; }
.kepala-isi { max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.merek-grup { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.kepala .merek-grup img, .kepala .merek-grup svg { width: 28px; height: 28px; flex: none; }
.judul { font-size: 17px; font-weight: 700; white-space: nowrap; }
.sub { display: none; }
.kepala button { display: none !important; }
.nav-app { flex: none; display: flex; gap: 2px; }
.nav-app a { padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--teks-2); text-decoration: none; border-radius: 8px; }
.nav-app a[aria-current="page"] { color: #fff; background: var(--aksen); }

/* Jam */
.stempel { background: var(--kartu); border-bottom: 1px solid var(--garis); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-jam { font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.st-tgl { font-size: 12px; color: var(--teks-2); display: block; margin-top: 3px; }
.st-lokasi-badge { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--hijau); background: var(--hijau-bg); padding: 2px 8px; border-radius: 6px; }
.st-gps { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--garis); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--teks-2); }

/* Layout */
.app { max-width: 560px; margin: 0 auto; padding: 12px 12px calc(130px + env(safe-area-inset-bottom, 0px)); }
.muat { text-align: center; padding: 40px 16px; color: var(--teks-2); font-size: 14px; }
.muat p { margin: 0 0 10px; }
.hasil { background: var(--hijau-bg); color: var(--hijau); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; }

.bagian { background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.bagian.selesai { border-color: var(--hijau); }
.bagian > h2 { margin: 0 0 10px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.bagian > h2 small { margin-left: auto; }
.langkah { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--garis); color: var(--teks-2); font-size: 11px; font-weight: 700; }
.bagian.selesai .langkah { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.bagian > h2 small { font-size: 12px; font-weight: 600; color: var(--teks-2); }
.bagian.selesai > h2 small { color: var(--hijau); }
.petunjuk { font-size: 12.5px; color: var(--teks-2); margin: 8px 0 0; }
.petunjuk:empty { display: none; }
.galat { color: var(--merah); font-size: 12.5px; font-weight: 600; margin: 6px 0 0; }

/* Lokasi */
.lokasi-nama { font-size: 17px; font-weight: 700; padding: 12px; border-radius: 10px; text-align: center; background: var(--bg); color: var(--teks-2); border: 1px dashed var(--input-garis); }
.bagian.selesai .lokasi-nama { background: var(--hijau-bg); color: var(--hijau); border: 1px solid var(--hijau); }
.geo { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--ambar-bg); color: var(--ambar); }
.geo .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.geo[data-state="cari"] .dot { animation: kedip 1.2s ease-in-out infinite; }
.geo[data-state="ok"] { background: var(--hijau-bg); color: var(--hijau); }
.geo[data-state="luar"] { background: var(--merah-bg); color: var(--merah); }
@keyframes kedip { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .geo .dot { animation: none !important; } }

/* Input */
.medan { margin-bottom: 12px; }
.medan:last-child { margin-bottom: 0; }
.label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--teks-2); }
.input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--input-garis); border-radius: 10px; background: var(--input); color: var(--teks); font: inherit; font-size: 16px; }
.input:focus { border-color: var(--aksen); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.input.invalid { border-color: var(--merah); }
textarea.input { min-height: 64px; resize: vertical; }
.kombo { position: relative; }
.daftar { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; margin: 0; padding: 4px; list-style: none; max-height: min(280px, 42vh); overflow-y: scroll; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; -webkit-user-select: none; user-select: none; background: var(--kartu); border: 1px solid var(--input-garis); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.daftar.atas { top: auto; bottom: calc(100% + 4px); }
.daftar .kosong { color: var(--teks-2); cursor: default; }
.daftar li { padding: 10px 12px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.daftar li:hover, .daftar li[aria-selected="true"] { background: var(--bg); }

/* Checklist */
#btn-semua { margin-bottom: 6px; }
.cl-baris { padding: 12px 0; border-top: 1px solid var(--garis); }
.cl-baris:first-child { border-top: 0; }
.cl-nama { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.seg-grup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tingkat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg-na, input[value="NA"], input[value="N/A"], input[value="na"], input[value="n/a"] { display: none !important; }
.seg-grup input, .tingkat input, .ubin-grup input { position: absolute; opacity: 0; pointer-events: none; }
.seg { min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--input-garis); border-radius: 10px; background: var(--input); font-size: 13.5px; font-weight: 600; color: var(--teks-2); cursor: pointer; user-select: none; }
input:checked + .seg-ok { background: var(--hijau); border-color: var(--hijau); color: var(--on-hijau); }
input:checked + .seg-bad { background: var(--merah); border-color: var(--merah); color: var(--on-merah); }
input:checked + .seg-na { background: var(--teks-2); border-color: var(--teks-2); color: #fff; }
input:checked + .t-rendah { background: #0e7490; border-color: #0e7490; color: #fff; }
input:checked + .t-sedang { background: #d97706; border-color: #d97706; color: #fff; }
input:checked + .t-tinggi { background: #dc2626; border-color: #dc2626; color: #fff; }
#blok-temuan { margin: 12px 0; padding: 12px; border-radius: 10px; background: var(--merah-bg); }

/* Tenant (halaman lain) */
.ubin-grup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ubin { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 56px; gap: 8px; padding: 12px; border: 1px solid var(--input-garis); border-radius: 10px; background: var(--input); cursor: pointer; font-size: 17px; font-weight: 700; }
.ubin svg, .ubin .ikon, .ubin img { display: none !important; }
.ubin small { display: none !important; }
input:checked + .ubin { background: var(--aksen); border-color: var(--aksen); color: #fff; }

/* Foto */
.foto-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.foto-grid:empty { display: none; }
.foto-item { position: relative; width: 80px; height: 80px; }
.foto-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--garis); }
.foto-hapus { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--kartu); background: var(--merah); color: var(--on-merah); font-size: 11px; font-weight: 700; cursor: pointer; }

/* Tombol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; font: inherit; font-size: 14.5px; font-weight: 600; border-radius: 10px; border: none; cursor: pointer; }
.btn:disabled { cursor: not-allowed; }
.btn-utama { background: var(--aksen); color: #fff; }
.btn-semua { width: 100%; background: var(--hijau-bg); color: var(--hijau); }
.btn-foto { width: 100%; background: transparent; color: var(--aksen); border: 1px dashed var(--aksen); }
.btn-foto:disabled { color: var(--teks-2); border-color: var(--input-garis); }

/* Bar kirim */
.bar-kirim { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--kartu); border-top: 1px solid var(--garis); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.bar-isi { max-width: 560px; margin: 0 auto; }
#bar-progres { display: block; width: 100%; height: 4px; margin: 0 0 8px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; -webkit-appearance: none; background: var(--garis); }
#bar-progres::-webkit-progress-bar { background: var(--garis); }
#bar-progres::-webkit-progress-value { background: var(--aksen); transition: width .2s; }
#bar-progres::-moz-progress-bar { background: var(--aksen); }
#bar-progres.siap::-webkit-progress-value { background: var(--hijau); }
#bar-progres.siap::-moz-progress-bar { background: var(--hijau); }
.kurang { font-size: 12.5px; color: var(--teks-2); margin: 0 0 8px; }
.kurang.siap { color: var(--hijau); font-weight: 600; }
#btn-kirim { width: 100%; min-height: 48px; font-size: 15px; font-weight: 700; }
#btn-kirim:disabled { background: var(--garis); color: var(--teks-2); }

/* Teks bantuan dihilangkan */
.petunjuk { display: none !important; }
/* Label field disembunyikan secara visual (tetap terbaca screen reader) */
.medan > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Tanpa ikon di tombol foto */
.btn-foto svg, .btn-foto .ikon { display: none !important; }
.lokasi-nama:not([hidden]) + .btn { margin-top: 10px; }

/* Pilihan lantai / tenant: tombol besar, mudah diketuk */
.bagian button:not(.btn):not(.foto-hapus) { min-height: 46px; margin: 0 8px 8px 0; padding: 0 16px; border: 1px solid var(--input-garis); border-radius: 10px; background: var(--input); color: var(--teks); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.bagian button:not(.btn):not(.foto-hapus) small, .bagian button:not(.btn):not(.foto-hapus) span { font-size: 12px; font-weight: 500; color: var(--teks-2); }
.bagian button[aria-pressed="true"]:not(.btn):not(.foto-hapus), .bagian button[aria-selected="true"]:not(.btn):not(.foto-hapus), .bagian button.aktif:not(.btn):not(.foto-hapus), .bagian button.active:not(.btn):not(.foto-hapus), .bagian button.on:not(.btn):not(.foto-hapus), .bagian button.terpilih:not(.btn):not(.foto-hapus) { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.bagian button[aria-pressed="true"]:not(.btn):not(.foto-hapus) small, .bagian button[aria-pressed="true"]:not(.btn):not(.foto-hapus) span, .bagian button.aktif:not(.btn):not(.foto-hapus) small, .bagian button.aktif:not(.btn):not(.foto-hapus) span, .bagian button.active:not(.btn):not(.foto-hapus) small, .bagian button.active:not(.btn):not(.foto-hapus) span { color: rgba(255,255,255,.85); }
.daftar li { min-height: 48px; display: flex; align-items: center; padding: 8px 12px; }

/* Scan QR */
.scan { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-bingkai { position: relative; width: min(70vw, 280px); aspect-ratio: 1; border: 3px solid #fff; border-radius: 20px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
.scan-teks { position: relative; margin: 18px 0 0; color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.scan-batal { position: absolute; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: #fff; color: #111; }

/* Checklist: tanpa ikon */
#checklist svg, #checklist .ikon, #checklist img { display: none !important; }

/* Daftar pilihan (nama, tenant): selalu bisa di-scroll dengan jari, termasuk di iPhone */
.daftar { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.daftar li { touch-action: pan-y; -webkit-tap-highlight-color: rgba(37,99,235,.12); }
.daftar li .opsi-detail { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--teks-2); white-space: nowrap; }
.lantai-grup { display: flex; flex-wrap: wrap; }
.bagian .lantai-btn { min-width: 64px; min-height: 48px; }

/* Checklist: tanpa penghitung, titik, dan tombol navigasi */
.fokus-atas, .fokus-titik, .fokus-nav { display: none !important; }

/* Catatan: satu baris, tumbuh otomatis */
#catatan { min-height: 42px; height: 42px; max-height: 96px; padding: 9px 12px; resize: none; line-height: 1.35; overflow-y: auto; }

/* Tombol kecil minta izin: di samping judul "Lokasi", hilang otomatis bila akses sudah diizinkan */
.bagian-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.bagian-kepala h2 { margin: 0; font-size: 14px; font-weight: 700; }
.bagian button.btn-izin:not(.btn):not(.foto-hapus) { margin: 0; min-height: 26px; padding: 0 10px; border: 1px solid var(--input-garis); border-radius: 999px; background: transparent; color: var(--aksen); font-size: 11.5px; font-weight: 600; line-height: 1; cursor: pointer; }
.bagian button.btn-izin[hidden] { display: none; }
.bagian button.btn-izin:disabled { opacity: .6; }

/* Header + jam tetap di atas saat halaman di-scroll */
.atas-tetap { position: sticky; top: 0; z-index: 45; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
html { scroll-padding-top: 150px; }

/* Animasi pindah halaman */
@keyframes masuk { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes masukKanan { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes masukKiri { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.app { animation: masuk .3s cubic-bezier(.2,.7,.2,1) backwards; }
html[data-arah="maju"] .app { animation-name: masukKanan; }
html[data-arah="mundur"] .app { animation-name: masukKiri; }
.app, .bar-kirim { transition: opacity .17s ease, transform .17s ease; }
html.keluar .app { opacity: 0; transform: translateX(-22px); }
html.keluar[data-arah="mundur"] .app { transform: translateX(22px); }
html.keluar .bar-kirim { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .app { animation: none; } .app, .bar-kirim { transition: none; } }

/* Kamera foto bukti: layar penuh di atas halaman (tanpa ini video tampil di bawah halaman dan melebarkannya) */
body.kamera-terbuka { overflow: hidden; }
.kamera { position: fixed; inset: 0; z-index: 200; background: #000; color: #fff; overflow: hidden; touch-action: none; }
.kamera[hidden], .kamera [hidden] { display: none !important; }
.kamera video, .kamera .kamera-hasil { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; background: #000; }
.kamera .kamera-hasil { object-fit: contain; }
.kamera-stempel { position: absolute; left: 12px; right: 12px; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); padding: 8px 10px; border-left: 4px solid var(--aksen, #3F6AD8); border-radius: 6px; background: rgba(20,20,20,.72); font-size: 12.5px; line-height: 1.4; white-space: pre-line; word-break: break-word; pointer-events: none; }
.kamera-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.kamera-senter { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kamera-senter.aktif { background: #f5c518; color: #111; }
.kamera-aksi { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.kamera-aksi.hasil .btn { flex: 1; }
.kamera-jepret { width: 74px; height: 74px; border-radius: 50%; border: 5px solid #fff; background: rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.kamera-jepret:active { background: #fff; }
.kamera-pesan { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: rgba(0,0,0,.85); }
.kamera-pesan p { margin: 0; font-size: 15px; line-height: 1.5; }
.btn-garis-terang { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.btn-stempel { background: var(--aksen, #3F6AD8); color: #fff; }

/* ---- Status koneksi + Riwayat saya ---- */
.strip { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--teks-2); }
.strip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hijau); flex: none; }
.strip-status { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.strip[data-s="offline"] .strip-dot { background: var(--merah); }
.strip[data-s="offline"] .strip-status { color: var(--merah); }
.strip-riwayat { flex: none; border: 1px solid var(--garis); background: var(--kartu); color: var(--teks); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.strip-riwayat:active { background: var(--bg); }

/* ---- Lembar (panel dari bawah) ---- */
body.lembar-buka { overflow: hidden; }
.lembar-tirai { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; background: rgba(0, 0, 0, 0.45); animation: lembar-tirai-masuk 0.18s ease-out; }
.lembar-tirai.tutup { opacity: 0; transition: opacity 0.18s; }
.lembar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 201; max-width: 560px; margin: 0 auto; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--kartu); color: var(--teks); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  padding-bottom: env(safe-area-inset-bottom, 0px); animation: lembar-naik 0.22s ease-out; }
.lembar.tutup { transform: translateY(100%); transition: transform 0.18s ease-in; }
.lembar-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--garis); }
.lembar-kepala h2 { margin: 0; font-size: 16px; }
.lembar-sub { margin: 2px 0 0; font-size: 12px; color: var(--teks-2); }
.lembar-badan { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 16px 14px; flex: 1 1 auto; }
.lembar-aksi { padding: 10px 16px 12px; border-top: 1px solid var(--garis); }
.lembar-aksi:empty, .lembar-aksi[hidden] { display: none; }
.lembar-aksi .btn { width: 100%; }
@keyframes lembar-naik { from { transform: translateY(100%); } to { transform: none; } }
@keyframes lembar-tirai-masuk { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lembar, .lembar-tirai { animation: none; } .lembar.tutup, .lembar-tirai.tutup { transition: none; } }

.riwayat-daftar, .zona-daftar { list-style: none; margin: 0; padding: 0; }
.riwayat-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--garis); }
.riwayat-item:last-child { border-bottom: 0; }
.r-jam { flex: none; width: 42px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--teks-2); padding-top: 1px; }
.r-isi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.r-isi strong { font-size: 14px; overflow-wrap: anywhere; }
.r-isi small { font-size: 12px; color: var(--teks-2); }
.r-isi small.r-temuan { color: var(--merah); font-weight: 600; }
.r-isi small.r-ket { color: var(--merah); }
.r-status { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.r-status.s-terkirim { color: var(--hijau); background: var(--hijau-bg); }
.r-status.s-menunggu { color: var(--ambar); background: var(--ambar-bg); }
.r-status.s-ditolak { color: var(--merah); background: var(--merah-bg); }
.riwayat-kosong { text-align: center; color: var(--teks-2); font-size: 14px; padding: 28px 0; margin: 0; }
.riwayat-catatan { text-align: center; font-size: 11.5px; color: var(--teks-2); margin: 12px 0 0; }

/* ---- Zona terjadwal ---- */
.zona-saran { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ambar); background: var(--ambar-bg); border-radius: 8px; padding: 6px 10px; }
.btn-tautan { display: block; margin: 8px auto 0; padding: 6px 8px; border: 0; background: none; color: var(--aksen); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.zona-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; padding: 13px 4px; border: 0; border-bottom: 1px solid var(--garis); background: none; color: var(--teks); font: inherit; cursor: pointer; }
.zona-item:active { background: var(--bg); }
.zona-item.dipilih .zona-nama::after { content: " ✓"; color: var(--aksen); }
.zona-nama { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.zona-status { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: var(--teks-2); background: var(--bg); }
.zona-item.s-belum .zona-status { color: var(--ambar); background: var(--ambar-bg); }
.zona-item.s-terlambat .zona-status { color: var(--merah); background: var(--merah-bg); }
.zona-item.s-ok .zona-status { color: var(--hijau); background: var(--hijau-bg); }
.zona-kosong { text-align: center; color: var(--teks-2); padding: 24px 0; }

/* ---- Toast, dialog konfirmasi, panel antrean (sebelumnya belum bergaya di berkas ini) ---- */
#toast { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 10000; max-width: 536px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: #111827; color: #fff; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); animation: toast-masuk 0.2s ease-out; overflow-wrap: anywhere; }
.toast.ok { background: var(--hijau); color: var(--on-hijau); }
.toast.bad { background: var(--merah); color: var(--on-merah); }
@keyframes toast-masuk { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.dialog { border: 0; border-radius: 14px; padding: 18px; width: min(92vw, 380px); background: var(--kartu); color: var(--teks); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.dialog h3 { margin: 0 0 6px; font-size: 16px; }
.dialog p { margin: 0 0 14px; font-size: 14px; color: var(--teks-2); }
.dialog-aksi { display: flex; gap: 8px; justify-content: flex-end; }
.btn-garis { background: transparent; color: var(--teks); border: 1px solid var(--input-garis); }
.btn-kecil { min-height: 34px; padding: 0 12px; font-size: 13px; background: var(--bg); color: var(--teks); border: 1px solid var(--garis); }
.btn-kecil.btn-utama { background: var(--aksen); color: #fff; border-color: transparent; }
.antrean { background: var(--ambar-bg); border: 1px solid var(--ambar); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; color: var(--teks); }
.antrean-baris, .antrean-tolak { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.antrean-tolak { margin-top: 8px; color: var(--merah); flex-wrap: wrap; }
.antrean-aksi { display: flex; gap: 6px; }
.bagian button.btn-tautan:not(.btn):not(.foto-hapus) { display: block; width: auto; min-height: 0; margin: 6px auto 0; padding: 6px 8px; border: 0; border-radius: 0; background: none; color: var(--aksen); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Plakat tenant terpilih: unit dan nama dipisah jelas (sebelumnya menyatu: "LG 01,02SANFU") */
.plakat { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 12px 14px; background: var(--hijau-bg); border: 1px solid var(--hijau); border-radius: 12px; }
.plakat[hidden] { display: none; }
.plakat b { font-size: 13px; font-weight: 600; color: var(--teks-2); letter-spacing: .02em; }
.plakat span { font-size: 20px; font-weight: 700; color: var(--teks); line-height: 1.25; overflow-wrap: anywhere; }

/* Kartu tugas dan ronde (lantai tugas, shift, progres 3 jam) */
.ronde { margin: 0 0 14px; padding: 14px 16px; background: var(--kartu); border: 1px solid var(--garis); border-left: 5px solid var(--aksen); border-radius: 14px; }
.ronde[hidden] { display: none; }
.ronde-lengkap { border-left-color: var(--hijau); background: var(--hijau-bg); }
.ronde-diam { border-left-color: var(--input-garis); }
.ronde-judul { font-size: 16px; font-weight: 700; color: var(--teks); }
.ronde-baris { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 13.5px; color: var(--teks-2); }
.ronde-baris b { color: var(--teks); white-space: nowrap; }
.ronde progress { width: 100%; height: 10px; margin-top: 8px; border: 0; border-radius: 999px; overflow: hidden; accent-color: var(--aksen); }
.ronde-lengkap progress { accent-color: var(--hijau); }
.ronde-ket { margin: 8px 0 0; font-size: 13px; color: var(--teks-2); }
.ronde-belum { margin-top: 8px; font-size: 13px; }
.ronde-belum summary { cursor: pointer; font-weight: 600; color: var(--aksen); min-height: 32px; display: flex; align-items: center; }
.ronde-belum ul { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow-y: auto; color: var(--teks); }
.lantai-lain { margin-left: 8px; font-size: 13px; color: var(--teks-2); }

/* Kunci nama + shift */
.shift-jam { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: inherit; opacity: .75; }
.bagian .lantai-btn:disabled { opacity: .7; }
.kunci { margin-top: 10px; padding: 10px 12px; background: var(--hijau-bg); border: 1px solid var(--hijau); border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--hijau); }
.kunci[hidden] { display: none; }
.kunci .btn-tautan { margin: 6px 0 0; padding: 4px 0; }
#nama:disabled { background: var(--bg); color: var(--teks); opacity: 1; -webkit-text-fill-color: var(--teks); }

.segar-baris { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.btn-segar:disabled { opacity: .6; }

/* ===== Tata letak: baris status + tombol muat ulang ===== */
.atas-status { display: flex; align-items: flex-start; gap: 6px; }
.atas-status > #antrean-wadah .antrean-baris:first-child, .atas-status > #antrean-wadah > :first-child { margin-bottom: 0; }
.atas-status > #antrean-wadah { flex: 1; min-width: 0; }
.btn-segar { flex: none; width: 34px; height: 34px; margin: 2px 0 0; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--garis); border-radius: 50%; background: var(--kartu); color: var(--aksen); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.btn-segar:active { transform: scale(.94); }
.btn-segar:disabled { opacity: .6; }
.btn-segar.memuat { animation: putar .8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
.segar-baris { display: none; }

/* ===== Kartu sesi patroli ===== */
.ronde { margin: 0 0 14px; padding: 14px 16px 12px; background: var(--kartu); border: 1px solid var(--garis); border-left: 4px solid var(--aksen); border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.ronde-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ronde-judul { font-size: 16px; font-weight: 700; color: var(--teks); }
.ronde-badge { flex: none; padding: 3px 10px; border-radius: 999px; background: rgba(37,99,235,.1); color: var(--aksen); font-size: 12px; font-weight: 700; }
.ronde-angka { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13.5px; color: var(--teks-2); }
.ronde-angka b { font-size: 24px; line-height: 1; color: var(--teks); }
.ronde-sisa { font-weight: 600; color: var(--ambar); }
.ronde-lengkap .ronde-sisa { color: var(--hijau); }
.ronde progress { display: block; width: 100%; height: 8px; margin-top: 8px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; -webkit-appearance: none; background: var(--garis); }
.ronde progress::-webkit-progress-bar { background: var(--garis); border-radius: 999px; }
.ronde progress::-webkit-progress-value { background: linear-gradient(90deg, var(--aksen), #38bdf8); border-radius: 999px; transition: width .3s; }
.ronde progress::-moz-progress-bar { background: var(--aksen); border-radius: 999px; }
.ronde-lengkap progress::-webkit-progress-value { background: var(--hijau); }
.ronde-lengkap progress::-moz-progress-bar { background: var(--hijau); }
.ronde-ket { margin: 8px 0 0; font-size: 12.5px; color: var(--teks-2); }
.ronde-belum { margin-top: 6px; }
.ronde-belum summary { min-height: 34px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--aksen); cursor: pointer; }
.ronde-chip-wadah { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; padding: 4px 0 2px; }
.ronde-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--garis); background: var(--bg); font-size: 12.5px; font-weight: 600; color: var(--teks); }
.ronde-diam { border-left-color: var(--input-garis); }

/* ===== Mode gelap yang lebih rapi ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: radial-gradient(900px 420px at 50% -80px, rgba(59,130,246,.10), transparent 70%), var(--bg); background-attachment: fixed; }
  :root:not([data-theme="light"]) .kepala, :root:not([data-theme="light"]) .stempel { background: rgba(20,26,35,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--garis); }
  :root:not([data-theme="light"]) .bar-kirim { background: rgba(20,26,35,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  :root:not([data-theme="light"]) .bagian { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) , var(--kartu); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
  :root:not([data-theme="light"]) .bagian.selesai { border-color: rgba(52,211,153,.55); }
  :root:not([data-theme="light"]) .nav-app a[aria-current="page"] { background: rgba(59,130,246,.18); color: #c4dbff; box-shadow: inset 0 0 0 1px rgba(96,165,250,.5); }
  :root:not([data-theme="light"]) .lantai-btn { background: var(--input); border-color: var(--input-garis); color: var(--teks); }
  :root:not([data-theme="light"]) .lantai-btn[aria-pressed="true"] { background: rgba(59,130,246,.2); border-color: #60a5fa; color: #d6e6ff; box-shadow: 0 0 0 1px rgba(96,165,250,.35); }
  :root:not([data-theme="light"]) .ronde { background: linear-gradient(150deg, rgba(59,130,246,.16), rgba(20,26,35,0) 62%), var(--kartu); border-left-color: #60a5fa; box-shadow: 0 8px 22px rgba(0,0,0,.32); }
  :root:not([data-theme="light"]) .ronde-lengkap { background: linear-gradient(150deg, rgba(52,211,153,.16), rgba(20,26,35,0) 62%), var(--kartu); border-left-color: var(--hijau); }
  :root:not([data-theme="light"]) .ronde-badge { background: rgba(96,165,250,.18); color: #bcd6ff; }
  :root:not([data-theme="light"]) .ronde-chip { background: rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .btn-segar { background: rgba(255,255,255,.05); color: #9cc4ff; }
  :root:not([data-theme="light"]) .btn-foto { border-color: rgba(96,165,250,.6); color: #9cc4ff; background: rgba(59,130,246,.06); }
  :root:not([data-theme="light"]) .lokasi-nama { background: rgba(255,255,255,.03); }
  :root:not([data-theme="light"]) .input:focus { box-shadow: 0 0 0 3px rgba(96,165,250,.25); }
  :root:not([data-theme="light"]) .daftar { box-shadow: 0 12px 30px rgba(0,0,0,.5); }
  :root:not([data-theme="light"]) #bar-progres::-webkit-progress-value { background: linear-gradient(90deg, #3b82f6, #38bdf8); }
  :root:not([data-theme="light"]) .kunci { background: var(--hijau-bg); }
}
:root[data-theme="dark"] body { background: radial-gradient(900px 420px at 50% -80px, rgba(59,130,246,.10), transparent 70%), var(--bg); background-attachment: fixed; }
:root[data-theme="dark"] .kepala, :root[data-theme="dark"] .stempel { background: rgba(20,26,35,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--garis); }
:root[data-theme="dark"] .bar-kirim { background: rgba(20,26,35,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="dark"] .bagian { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) , var(--kartu); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
:root[data-theme="dark"] .bagian.selesai { border-color: rgba(52,211,153,.55); }
:root[data-theme="dark"] .nav-app a[aria-current="page"] { background: rgba(59,130,246,.18); color: #c4dbff; box-shadow: inset 0 0 0 1px rgba(96,165,250,.5); }
:root[data-theme="dark"] .lantai-btn { background: var(--input); border-color: var(--input-garis); color: var(--teks); }
:root[data-theme="dark"] .lantai-btn[aria-pressed="true"] { background: rgba(59,130,246,.2); border-color: #60a5fa; color: #d6e6ff; box-shadow: 0 0 0 1px rgba(96,165,250,.35); }
:root[data-theme="dark"] .ronde { background: linear-gradient(150deg, rgba(59,130,246,.16), rgba(20,26,35,0) 62%), var(--kartu); border-left-color: #60a5fa; box-shadow: 0 8px 22px rgba(0,0,0,.32); }
:root[data-theme="dark"] .ronde-lengkap { background: linear-gradient(150deg, rgba(52,211,153,.16), rgba(20,26,35,0) 62%), var(--kartu); border-left-color: var(--hijau); }
:root[data-theme="dark"] .ronde-badge { background: rgba(96,165,250,.18); color: #bcd6ff; }
:root[data-theme="dark"] .ronde-chip { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .btn-segar { background: rgba(255,255,255,.05); color: #9cc4ff; }
:root[data-theme="dark"] .btn-foto { border-color: rgba(96,165,250,.6); color: #9cc4ff; background: rgba(59,130,246,.06); }
:root[data-theme="dark"] .lokasi-nama { background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .input:focus { box-shadow: 0 0 0 3px rgba(96,165,250,.25); }
:root[data-theme="dark"] .daftar { box-shadow: 0 12px 30px rgba(0,0,0,.5); }
:root[data-theme="dark"] #bar-progres::-webkit-progress-value { background: linear-gradient(90deg, #3b82f6, #38bdf8); }
:root[data-theme="dark"] .kunci { background: var(--hijau-bg); }

/* Baris status: tombol muat ulang sejajar dengan "Online" dan "Riwayat saya" */
.atas-status { align-items: center; margin-bottom: 10px; }
.atas-status .strip { margin-bottom: 0; }
.atas-status > #antrean-wadah .antrean { margin-top: 8px; margin-bottom: 0; }
.btn-segar { margin: 0; }

/* ---- Form dinonaktifkan admin ---- */
.muat.form-off { margin: 24px 0; padding: 32px 20px; border-radius: 16px; background: var(--kartu); border: 1px solid var(--garis); color: var(--teks); }
.muat.form-off h2 { margin: 0 0 10px; font-size: 18px; }
.muat.form-off p { margin: 0 0 16px; color: var(--teks-2); line-height: 1.5; overflow-wrap: anywhere; }