/* =========================================================
   Case Outbound – tampilan untuk HP
   ========================================================= */
:root {
  --kertas: #F3F4F1;
  --putih: #FFFFFF;
  --tinta: #1D2127;
  --redup: #636B75;
  --garis: #DCDFDA;
  --garis-tebal: #C5CAC3;
  --kraft: #A97C42;
  --kraft-muda: #F1E7D8;
  --hijau: #1E8A57;
  --hijau-muda: #E3F3EA;
  --merah: #C93A2C;
  --merah-muda: #FBE6E2;
  --kuning: #94660A;
  --kuning-muda: #FFF2D4;
  --plat: #17191D;

  --huruf: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --huruf-sempit: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  --tinggi-menu: 64px;
  --tinggi-aksi: 76px;
  --bawah-aman: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font: 400 16px/1.45 var(--huruf);
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
code { font-size: .9em; background: var(--kraft-muda); padding: 1px 5px; border-radius: 4px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
[hidden] { display: none !important; }
.ikon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.redup { color: var(--redup); }
.kecil { font-size: 13px; }
.merah { color: var(--merah); }

:focus-visible { outline: 3px solid var(--kraft); outline-offset: 2px; }

/* ---------- Kerangka ---------- */
.atas {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: rgba(243, 244, 241, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis);
}
.atas-judul { font: 700 24px/1 var(--huruf-sempit); letter-spacing: .2px; flex: 1; }
.atas-kembali { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -8px; border-radius: 10px; text-decoration: none; }
.atas-kembali:active { background: var(--garis); }
.atas-user { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 500; padding: 4px 4px 4px 4px; border-radius: 99px; }
.atas-nama { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atas-inisial {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tinta); color: var(--kertas); font: 600 15px/1 var(--huruf-sempit); flex: none;
}

.isi {
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 16px 16px calc(var(--tinggi-menu) + var(--bawah-aman) + 24px);
}
body[data-halaman="tempel"] .isi,
body[data-halaman="loading-scan"] .isi { padding-bottom: calc(var(--tinggi-menu) + var(--tinggi-aksi) + var(--bawah-aman) + 24px); }
body.polos .isi, body.halaman-login .isi { padding-bottom: 32px; }

/* Menu bawah */
.menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  height: calc(var(--tinggi-menu) + var(--bawah-aman)); padding-bottom: var(--bawah-aman);
  background: var(--putih); border-top: 1px solid var(--garis);
}
.menu-item {
  flex: 1; max-width: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--redup); font-size: 12.5px; font-weight: 500; position: relative;
}
.menu-item.aktif { color: var(--tinta); font-weight: 600; }
.menu-item.aktif::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--kraft);
}

/* ---------- Tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 12px;
  border: 1.5px solid var(--garis-tebal); background: var(--putih);
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
.tombol:active { transform: scale(.98); }
.tombol.utama { background: var(--tinta); border-color: var(--tinta); color: var(--kertas); }
.tombol.utama:disabled { background: #B9BEB8; border-color: #B9BEB8; color: #F2F3F0; cursor: not-allowed; transform: none; }
.tombol.kecil { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.tombol.kecil .ikon { width: 18px; height: 18px; }
.tombol.lebar { width: 100%; }
.tombol.bahaya { color: var(--merah); border-color: #E7B4AD; }
.tombol-besar { min-height: 56px; font-size: 17px; margin-bottom: 8px; }
.tautan { background: none; border: 0; padding: 6px 0; font-weight: 600; font-size: 14px; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tautan.merah { color: var(--merah); }
.baris-tombol { display: flex; gap: 10px; margin-top: 4px; }
.baris-tombol > * { flex: 1; }

/* ---------- Kolom scan (bagian paling penting) ---------- */
.panel-scan { margin-bottom: 18px; }
.scan-label { display: block; font-size: 14px; font-weight: 600; color: var(--redup); margin: 0 0 6px 2px; }
.scan-baris {
  display: flex; align-items: stretch;
  background: var(--putih);
  border: 2.5px solid var(--tinta); border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 0 var(--tinta);
}
.scan-baris:focus-within { border-color: var(--kraft); box-shadow: 0 3px 0 var(--kraft); }
.scan-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 12px 14px; height: 64px;
  font: 600 30px/1 var(--huruf-sempit); letter-spacing: .5px; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.scan-input::placeholder { font: 500 18px/1 var(--huruf); letter-spacing: 0; text-transform: none; color: #9AA19B; }
.scan-mode {
  width: 58px; border: 0; border-left: 1.5px solid var(--garis); background: var(--kertas);
  display: grid; place-items: center; cursor: pointer; color: var(--tinta);
}
.scan-mode:active { background: var(--garis); }
.scan-mode small { display: block; font-size: 10px; font-weight: 600; margin-top: 2px; }

/* Hasil scan terakhir */
.hasil {
  position: relative; margin-top: 12px; padding: 12px 14px 12px 18px;
  border-radius: 12px; background: var(--putih); border: 1.5px solid var(--garis);
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  overflow: hidden;
}
.hasil::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--garis-tebal); }
.hasil-status { font-weight: 700; font-size: 15px; grid-column: 1; }
.hasil-no { font: 700 34px/1.05 var(--huruf-sempit); letter-spacing: .5px; grid-column: 1; word-break: break-all; }
.hasil-ket { font-size: 14.5px; grid-column: 1; color: var(--tinta); }
.hasil-foto { grid-column: 2; grid-row: 1 / span 3; width: 68px; height: 68px; object-fit: cover; border-radius: 8px; background: var(--garis); }
.hasil.ok { background: var(--hijau-muda); border-color: #B7DEC8; }
.hasil.ok::before { background: var(--hijau); }
.hasil.ok .hasil-status { color: var(--hijau); }
.hasil.dobel { background: var(--merah-muda); border-color: #EDB9B1; }
.hasil.dobel::before { background: var(--merah); }
.hasil.dobel .hasil-status { color: var(--merah); }
.hasil.dobel .hasil-no { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(201, 58, 44, .55); }
.hasil.peringatan { background: var(--kuning-muda); border-color: #ECD39C; }
.hasil.peringatan::before { background: #D99A12; }
.hasil.peringatan .hasil-status { color: var(--kuning); }
.hasil.muncul { animation: muncul .22s ease-out; }
@keyframes muncul { from { transform: translateY(-4px); opacity: .4; } to { transform: none; opacity: 1; } }
.hasil.goyang { animation: goyang .35s ease; }
@keyframes goyang { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.info-hari { margin: 10px 2px 0; font-size: 14px; color: var(--redup); }

/* Kilat layar saat dobel */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .25s ease;
}
body.kilat-merah::after { box-shadow: inset 0 0 0 10px var(--merah); transition: none; }
body.kilat-hijau::after { box-shadow: inset 0 0 0 6px var(--hijau); transition: none; }

/* ---------- Daftar case ---------- */
.daftar-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
.daftar-kepala h2 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.hitung {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 99px;
  background: var(--tinta); color: var(--kertas); font: 700 16px/1 var(--huruf-sempit);
}
.hitung.merah { background: var(--merah); }
.kosong { color: var(--redup); font-size: 15px; margin: 4px 2px 12px; line-height: 1.5; }

.list-case { list-style: none; margin: 0 0 16px; padding: 0; background: var(--putih); border: 1px solid var(--garis); border-radius: 12px; overflow: hidden; }
.list-case:empty { display: none; }
.list-case li { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-top: 1px solid var(--garis); flex-wrap: wrap; }
.list-case li:first-child { border-top: 0; }
.lc-no { font: 600 21px/1.15 var(--huruf-sempit); letter-spacing: .3px; flex: 1; min-width: 0; word-break: break-all; font-variant-numeric: tabular-nums; }
.lc-meta { font-size: 13.5px; color: var(--redup); text-align: right; }
.list-case li .lc-meta { order: 2; }
.list-case li .lc-hapus { order: 3; }
.lc-hapus { width: 40px; height: 40px; border: 0; background: none; border-radius: 10px; display: grid; place-items: center; color: var(--redup); cursor: pointer; flex: none; }
.lc-hapus:active { background: var(--kertas); }
.lc-hapus .ikon { width: 20px; height: 20px; }
.list-case li.baru { animation: sorot 1.4s ease-out; }
@keyframes sorot { from { background: var(--hijau-muda); } to { background: var(--putih); } }
.list-case.tolak { border-color: #EDB9B1; }
.list-case.tolak .lc-no { color: var(--merah); text-decoration: line-through; text-decoration-color: rgba(201, 58, 44, .5); }
.list-case .lc-catatan { order: 4; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 2px; }
.tanda { display: inline-block; font-style: normal; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.tanda.kuning { background: var(--kuning-muda); color: var(--kuning); }
.tanda.hijau { background: var(--hijau-muda); color: var(--hijau); }
.tanda.merah { background: var(--merah-muda); color: var(--merah); }
.tanda.abu { background: var(--kertas); color: var(--redup); border: 1px solid var(--garis); }

/* ---------- Tombol aksi menempel di bawah ---------- */
.aksi-bawah {
  position: fixed; left: 0; right: 0; z-index: 25;
  bottom: calc(var(--tinggi-menu) + var(--bawah-aman));
  display: flex; gap: 10px; padding: 10px 16px;
  background: linear-gradient(to top, var(--kertas) 75%, rgba(243, 244, 241, 0));
  max-width: 560px; margin: 0 auto;
}
.aksi-bawah .tombol { min-height: 56px; flex: 1; font-size: 17px; }
.tombol-foto {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 0 14px 0 8px; border-radius: 12px; cursor: pointer;
  border: 2px dashed var(--garis-tebal); background: var(--putih); font-weight: 600;
}
.tombol-foto .foto-ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--kraft-muda); color: var(--kraft); }
.tombol-foto img { width: 40px; height: 40px; object-fit: cover; border-radius: 9px; }
.tombol-foto.ada { border-style: solid; border-color: var(--hijau); }
.tombol-foto.ada .foto-teks { color: var(--hijau); }
.tombol-foto.perlu { border-color: var(--kraft); animation: denyut 1.6s ease-in-out infinite; }
@keyframes denyut { 50% { border-color: var(--garis-tebal); } }
.tombol-foto.besar { width: 100%; min-height: 150px; flex-direction: column; justify-content: center; padding: 14px; margin: 6px 0 12px; }
.tombol-foto.besar img { width: 100%; height: auto; max-height: 260px; object-fit: contain; border-radius: 8px; }
.tombol-foto.besar .foto-ikon { width: 56px; height: 56px; }

/* ---------- Lembar (dialog dari bawah) ---------- */
dialog.lembar {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px;
  border-radius: 20px 20px 0 0; background: var(--putih); color: var(--tinta);
  max-height: 92dvh;
}
dialog.lembar::backdrop { background: rgba(23, 25, 29, .45); }
dialog.lembar[open] { animation: naik .22s ease-out; }
@keyframes naik { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.lembar-isi { padding: 22px 18px calc(18px + var(--bawah-aman)); }
dialog.lembar > form[method="dialog"] { padding: 0 18px calc(18px + var(--bawah-aman)); }
.lembar-isi h2 { font: 700 26px/1.1 var(--huruf-sempit); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lembar-isi > p { margin: 0 0 12px; }

/* Ringkasan setelah simpan */
.ringkas-angka { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; }
.ringkas-angka b { font: 700 56px/1 var(--huruf-sempit); color: var(--hijau); }
.ringkas-angka.nol b { color: var(--merah); }
.ringkas-tolak { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--merah-muda); }
.ringkas-tolak h3 { font-size: 15px; color: var(--merah); margin-bottom: 6px; }
.ringkas-tolak ul { margin: 0; padding: 0; list-style: none; }
.ringkas-tolak li { padding: 6px 0; border-top: 1px solid #F0C9C2; font-size: 14px; }
.ringkas-tolak li:first-child { border-top: 0; }
.ringkas-tolak li b { font: 600 19px/1.2 var(--huruf-sempit); display: block; }

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: block; font-size: 14px; font-weight: 600; }
.form label > input, .form label > select { display: block; margin-top: 6px; }
.form label .redup { font-weight: 400; }
.form input, .form select {
  height: 50px; padding: 0 14px; border: 1.5px solid var(--garis-tebal); border-radius: 11px;
  background: var(--putih); font-size: 17px; font-weight: 500; width: 100%;
}
.form input:focus, .form select:focus { outline: 0; border-color: var(--tinta); }
.input-nopol { font: 700 24px/1 var(--huruf-sempit) !important; text-transform: uppercase; letter-spacing: 1px; }
.baris-dua { display: flex; gap: 10px; }
.baris-dua > * { flex: 1; min-width: 0; }

/* ---------- Kartu umum ---------- */
.kartu { background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 22px 18px; }
.kartu h2 { font: 700 28px/1.1 var(--huruf-sempit); margin-bottom: 8px; }
.kartu.sempit { max-width: 420px; margin: 24px auto; }
.kartu .tombol { margin-top: 14px; }
.kotak-error { background: var(--merah-muda); color: var(--merah); padding: 10px 12px; border-radius: 10px; font-size: 14px; word-break: break-word; }

.blok { margin-top: 22px; }
.blok-judul { font: 700 21px/1.1 var(--huruf-sempit); margin: 0 2px 10px; letter-spacing: .2px; }
.blok .daftar-kepala .blok-judul { margin: 0; }

/* ---------- Plat nomor ---------- */
.plat {
  display: inline-flex; padding: 3px; border-radius: 8px; background: var(--plat); flex: none;
}
.plat span {
  display: block; padding: 5px 12px 4px; border: 1.5px solid #E9EAE6; border-radius: 5px;
  color: #F4F5F1; font: 700 22px/1 var(--huruf-sempit); letter-spacing: 1.5px; white-space: nowrap;
}
.plat.kecil span { font-size: 16px; padding: 3px 8px 2px; letter-spacing: 1px; }

/* ---------- Loading ---------- */
.list-truk { display: flex; flex-direction: column; gap: 10px; }
.truk {
  display: flex; align-items: center; gap: 12px; padding: 14px; text-decoration: none;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 14px;
}
.truk:active { background: #FAFAF8; }
.truk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.truk-tujuan { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truk-info .redup { font-size: 13px; }
.truk-jumlah { text-align: right; display: flex; flex-direction: column; line-height: 1; }
.truk-jumlah b { font: 700 30px/1 var(--huruf-sempit); }
.truk-jumlah small { color: var(--redup); font-size: 12px; }
.truk.selesai { background: transparent; }

.kepala-truk {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; margin-bottom: 16px; border-radius: 16px; background: var(--putih); border: 1px solid var(--garis);
}
.kepala-truk-kiri { min-width: 0; }
.kepala-truk-kiri .plat span { font-size: 28px; }
.kepala-truk-kiri p { margin: 8px 0 0; font-size: 14px; }
.kepala-truk-jumlah { text-align: right; display: flex; flex-direction: column; }
.kepala-truk-jumlah b { font: 700 48px/0.95 var(--huruf-sempit); font-variant-numeric: tabular-nums; }
.kepala-truk-jumlah small { color: var(--redup); font-size: 13px; }
.kepala-truk-jumlah b.loncat { animation: loncat .3s ease; }
@keyframes loncat { 40% { transform: scale(1.18); color: var(--hijau); } }
.status-selesai { margin-bottom: 16px; }
.status-selesai p { margin: 0 0 10px; font-weight: 600; }
.foto-besar img { width: 100%; border-radius: 12px; border: 1px solid var(--garis); }

/* ---------- Cek case ---------- */
.hasil-cek { margin-bottom: 8px; }
.cek-kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cek-no { font: 700 38px/1 var(--huruf-sempit); letter-spacing: .5px; word-break: break-all; }
.cek-status { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cek-status .tanda { font-size: 13.5px; padding: 4px 10px; }
.garis-waktu { list-style: none; margin: 0; padding: 0; position: relative; }
.garis-waktu::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--garis-tebal); }
.garis-waktu li { position: relative; padding: 0 0 14px 36px; }
.garis-waktu li::before {
  content: ""; position: absolute; left: 4px; top: 14px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--putih); border: 3px solid var(--tinta);
}
.garis-waktu li.loading::before { border-color: var(--kraft); }
.garis-waktu li.batal::before { border-color: var(--garis-tebal); }
.gw-kartu { background: var(--putih); border: 1px solid var(--garis); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.gw-kartu > * { grid-column: 1; }
.gw-judul { font-weight: 700; font-size: 16px; }
.gw-ket { font-size: 14px; color: var(--redup); }
.gw-foto { grid-column: 2 !important; grid-row: 1 / span 4; width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--garis); }
.batal .gw-kartu { background: transparent; border-style: dashed; }
.batal .gw-judul { text-decoration: line-through; color: var(--redup); }
.gw-batal { font-size: 13.5px; color: var(--merah); }
.gw-aksi { margin-top: 6px; }

.angka-hari { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; }
.angka-hari div { padding: 14px 12px; display: flex; flex-direction: column; border-left: 1px solid var(--garis); }
.angka-hari div:first-child { border-left: 0; }
.angka-hari b { font: 700 32px/1 var(--huruf-sempit); font-variant-numeric: tabular-nums; }
.angka-hari span { font-size: 13px; color: var(--redup); margin-top: 4px; line-height: 1.25; }

.list-batch { display: flex; flex-direction: column; gap: 8px; }
.batch { background: var(--putih); border: 1px solid var(--garis); border-radius: 12px; }
.batch summary { display: flex; align-items: center; gap: 12px; padding: 10px; cursor: pointer; list-style: none; }
.batch summary::-webkit-details-marker { display: none; }
.batch-foto { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; background: var(--garis); }
.kosong-foto { display: grid; place-items: center; color: var(--redup); background: var(--kertas); }
.batch-info { display: flex; flex-direction: column; font-size: 14px; }
.batch-info b { font: 700 20px/1.1 var(--huruf-sempit); }
.batch-isi { padding: 0 12px 12px; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.chip-case { font: 600 16px/1 var(--huruf-sempit); padding: 6px 10px; border-radius: 8px; background: var(--kertas); border: 1px solid var(--garis); text-decoration: none; letter-spacing: .3px; }

/* ---------- Admin ---------- */
.list-user { list-style: none; margin: 0; padding: 0; background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; }
.list-user li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--garis); }
.list-user li:first-child { border-top: 0; }
.list-user li.nonaktif { opacity: .55; }
.user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.user-info b { font-size: 16px; }

/* ---------- Login ---------- */
.login { max-width: 400px; margin: 0 auto; }
.halaman-login .atas { display: none; }
.login-merek { padding: 40px 0 20px; }
.merek-label {
  display: inline-block; padding: 10px 16px 8px; border: 2.5px solid var(--tinta); border-radius: 10px;
  font: 700 30px/1 var(--huruf-sempit); letter-spacing: .5px; box-shadow: 0 3px 0 var(--tinta); background: var(--putih);
  position: relative;
}
.merek-label::after {
  content: ""; position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--kraft); border: 2.5px solid var(--kertas);
}
.login-tanya { font-weight: 600; margin: 0 0 10px; }
.pilih-nama { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip-nama input { position: absolute; opacity: 0; pointer-events: none; }
.chip-nama span {
  display: inline-block; padding: 10px 16px; border-radius: 99px; border: 1.5px solid var(--garis-tebal);
  background: var(--putih); font-weight: 600; cursor: pointer;
}
.chip-nama input:checked + span { background: var(--tinta); color: var(--kertas); border-color: var(--tinta); }
.chip-nama input:focus-visible + span { outline: 3px solid var(--kraft); outline-offset: 2px; }
.pin-area { opacity: .35; pointer-events: none; transition: opacity .2s; }
.pin-area.siap { opacity: 1; pointer-events: auto; }
.pin-titik { display: flex; gap: 14px; justify-content: center; height: 18px; margin-bottom: 8px; }
.pin-titik i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tinta); }
.pin-titik i.penuh { background: var(--tinta); }
.pin-titik i.lebih { display: none; }
.pin-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pin-error { text-align: center; color: var(--merah); font-weight: 600; margin: 8px 0 0; font-size: 14px; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.pad button {
  height: 62px; border-radius: 14px; border: 1.5px solid var(--garis); background: var(--putih);
  font: 600 28px/1 var(--huruf-sempit); cursor: pointer;
}
.pad button:active { background: var(--garis); }
.pad .pad-masuk { background: var(--tinta); color: var(--kertas); border-color: var(--tinta); font: 600 18px/1 var(--huruf); }

/* ---------- Toast & proses ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tinggi-menu) + var(--bawah-aman) + 90px); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--tinta); color: var(--kertas); padding: 12px 18px; border-radius: 12px; font-weight: 500;
  max-width: calc(100% - 32px); width: max-content; transition: opacity .2s, transform .2s; text-align: center;
}
.toast.tampil { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--merah); }

.proses {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(243, 244, 241, .88); backdrop-filter: blur(3px);
}
.proses-isi { text-align: center; font-weight: 600; }
.putar { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid var(--garis-tebal); border-top-color: var(--tinta); animation: putar .8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (min-width: 600px) {
  .aksi-bawah { padding-left: 0; padding-right: 0; }
}

/* =========================================================
   Pembaruan v2: foto banyak, edit/hapus, cek case, pengaturan
   ========================================================= */

/* Label peran di header */
.peran { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.peran.admin { background: var(--kraft); color: #fff; }
.peran.staf { background: var(--garis); color: var(--redup); }
.atas-nama { max-width: 84px; }

/* Input umum di luar form */
.field { display: block; font-size: 14px; font-weight: 600; margin: 0 2px 6px; }
.input {
  width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--garis-tebal); border-radius: 11px;
  background: var(--putih); font-size: 17px; font-weight: 500;
}
.input:focus { outline: 0; border-color: var(--tinta); }
.input-case { font: 700 24px/1 var(--huruf-sempit) !important; text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Foto: strip kecil ---------- */
.foto-strip { margin: 0 0 10px; }
.foto-strip:empty { display: none; }
.ft-baris { display: flex; flex-wrap: wrap; gap: 8px; }
.ft { position: relative; width: 78px; height: 78px; border-radius: 10px; flex: none; }
.ft img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background: var(--garis); border: 1px solid var(--garis); cursor: zoom-in; }
.ft-x {
  position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--kertas);
  background: var(--tinta); color: var(--kertas); display: grid; place-items: center; padding: 0; cursor: pointer;
}
.ft-x .ikon { width: 14px; height: 14px; stroke-width: 2.4; }
.ft-tambah {
  border: 2px dashed var(--garis-tebal); background: var(--putih); color: var(--redup); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0;
}
.ft-tambah:active { background: var(--kertas); }
.ft-tambah small { font-size: 12px; font-weight: 600; }
.ft-info { margin: 8px 2px 0; }
.lencana {
  position: absolute; top: -8px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px;
  background: var(--hijau); color: #fff; font: 700 14px/24px var(--huruf-sempit); text-align: center; border: 2px solid var(--kertas);
}
.tombol-foto.lebar-penuh { width: 100%; justify-content: center; margin: 4px 0 14px; }
.lc-jejak { order: 5; flex-basis: 100%; font-size: 13px; color: var(--kuning); margin: -2px 0 2px; line-height: 1.35; }

/* ---------- Ubin "Loading #N" ---------- */
.ubin {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  min-width: 74px; padding: 7px 12px 6px; border-radius: 12px; background: var(--plat); color: #F4F5F1; line-height: 1;
  border: 2px solid #E9EAE6; outline: 3px solid var(--plat);
}
.ubin small { font: 600 11px/1 var(--huruf); letter-spacing: 1px; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
.ubin b { font: 700 34px/.95 var(--huruf-sempit); letter-spacing: .5px; }
.ubin.kecil { min-width: 58px; padding: 5px 9px 4px; border-width: 1.5px; outline-width: 2px; }
.ubin.kecil b { font-size: 24px; }
.ubin.kecil small { font-size: 9.5px; margin-bottom: 2px; }
.truk .ubin { margin-right: 2px; }
.truk-remarks { font-size: 13.5px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truk-info .truk-remarks + .redup { margin-top: 1px; }
.kepala-truk-kiri { display: flex; align-items: center; gap: 12px; }
.kt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kt-info b { font-size: 16px; line-height: 1.2; }
.kt-info .truk-remarks { white-space: normal; }

/* ---------- Isian kecil di lembar ---------- */
.chip-baris { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-pilih {
  border: 1.5px solid var(--garis-tebal); background: var(--kertas); border-radius: 99px; padding: 6px 12px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.chip-pilih:active { background: var(--garis); }
.tombol.isi-merah { background: var(--merah); border-color: var(--merah); color: #fff; }
dialog.lembar { overflow: auto; }

/* Menu aksi untuk satu case */
.aksi-daftar { display: flex; flex-direction: column; border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; }
.aksi-item {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; background: var(--putih);
  border: 0; border-top: 1px solid var(--garis); font-size: 16px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; width: 100%;
}
.aksi-item:first-child { border-top: 0; }
.aksi-item:active { background: var(--kertas); }
.aksi-item.bahaya { color: var(--merah); }

/* ---------- Penampil foto ---------- */
dialog.lembar.penampil {
  max-width: none; width: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0;
  background: #0E0F11; color: #F4F5F1; display: none; flex-direction: column; overflow: hidden;
}
dialog.lembar.penampil[open] { display: flex; animation: none; }
dialog.penampil::backdrop { background: #0E0F11; }
.pn-atas { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; }
.pn-hitung { flex: 1; font-weight: 600; font-size: 15px; }
.pn-buka { display: inline-flex; align-items: center; gap: 6px; color: #F4F5F1; font-size: 14px; font-weight: 600; text-decoration: none; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.12); }
.pn-buka .ikon { width: 16px; height: 16px; }
.pn-tutup { width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pn-gambar { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 8px; }
.pn-gambar img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.pn-bawah { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px calc(14px + var(--bawah-aman)); }
.pn-ket { flex: 1; text-align: center; font-size: 14px; opacity: .85; }
.pn-nav { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; }

/* ---------- Cek case: filter, ringkasan, tab ---------- */
.filter-tgl, .filter-jenis { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-jenis { margin: 0 0 12px; }
.chip-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 99px;
  border: 1.5px solid var(--garis-tebal); background: var(--putih); font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.chip-filter .ikon { width: 17px; height: 17px; }
.chip-filter.aktif { background: var(--tinta); border-color: var(--tinta); color: var(--kertas); }
.rentang-pilih { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; padding: 12px; background: var(--putih); border: 1px solid var(--garis); border-radius: 12px; }
.rentang-pilih label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; flex: 1; min-width: 130px; }
.rentang-pilih input { height: 44px; padding: 0 10px; border: 1.5px solid var(--garis-tebal); border-radius: 10px; font-size: 16px; background: var(--putih); width: 100%; }

.ringkasan { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.rk-kartu { background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; padding: 14px 16px; }
.rk-kartu.loading { border-left: 5px solid var(--kraft); }
.rk-kartu:first-child { border-left: 5px solid var(--tinta); }
.rk-atas { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rk-label { font-size: 14px; font-weight: 600; color: var(--redup); }
.rk-angka { font: 700 44px/1 var(--huruf-sempit); font-variant-numeric: tabular-nums; }
.rk-staf { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rk-staf li { display: grid; grid-template-columns: minmax(70px, 28%) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.rk-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rk-bar { height: 10px; border-radius: 99px; background: var(--kertas); overflow: hidden; }
.rk-bar i { display: block; height: 100%; border-radius: 99px; background: var(--tinta); }
.rk-kartu.loading .rk-bar i { background: var(--kraft); }
.rk-staf b { font: 700 18px/1 var(--huruf-sempit); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.rk-sekeleton { height: 90px; }

.tab-bar { display: flex; background: #E7E9E4; border-radius: 12px; padding: 4px; margin-bottom: 12px; position: sticky; top: calc(54px + env(safe-area-inset-top, 0px)); z-index: 10; }
.tab { flex: 1; border: 0; background: none; border-radius: 9px; min-height: 42px; font-size: 14.5px; font-weight: 600; color: var(--redup); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tab.aktif { background: var(--putih); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tab-n { font: 700 14px/1 var(--huruf-sempit); background: var(--kertas); border-radius: 99px; padding: 3px 7px; min-width: 22px; }
.tab-n:empty { display: none; }
.tab.aktif .tab-n { background: var(--tinta); color: var(--kertas); }

.isi-tab { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.memuat { color: var(--redup); text-align: center; padding: 18px 0; margin: 0; }

/* Kartu simpanan tempel / loading */
.kb { background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; }
.kb-kepala, .kb.kb-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; width: 100%; border: 0; background: none;
  text-align: left; text-decoration: none; color: inherit; cursor: pointer;
}
.kb.kb-link:active, .kb-kepala:active { background: #FAFAF8; }
.thumbs { display: flex; flex: none; position: relative; width: 84px; height: 56px; }
.thumbs img { position: absolute; top: 0; width: 56px; height: 56px; object-fit: cover; border-radius: 9px; border: 2px solid var(--putih); background: var(--garis); }
.thumbs img:nth-child(1) { left: 0; z-index: 3; }
.thumbs img:nth-child(2) { left: 14px; z-index: 2; }
.thumbs img:nth-child(3) { left: 28px; z-index: 1; }
.thumb-lebih { position: absolute; right: 0; bottom: 0; z-index: 4; background: var(--tinta); color: var(--kertas); font: 700 13px/1 var(--huruf-sempit); padding: 3px 6px; border-radius: 99px; }
.thumb-kosong { width: 56px; height: 56px; border-radius: 9px; display: grid; place-items: center; background: var(--kertas); color: var(--redup); border: 1px dashed var(--garis-tebal); }
.kb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.kb-info b { font: 700 21px/1.1 var(--huruf-sempit); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kb-jenis { font-weight: 600; font-size: 14px; }
.kb-remarks { font-size: 14px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-panah { color: var(--redup); flex: none; display: grid; place-items: center; transition: transform .2s; }
.kb.terbuka .kb-panah { transform: rotate(180deg); }
.kb-isi { padding: 2px 14px 14px; border-top: 1px solid var(--garis); }
.kb-sec { margin-top: 12px; }
.kb-sec h4 { margin: 0 0 6px; font-size: 14px; display: flex; flex-direction: column; gap: 1px; }
.kb-sec h4 small { font-weight: 400; color: var(--redup); font-size: 12.5px; }
button.chip-case { cursor: pointer; color: inherit; }
button.chip-case:active { background: var(--garis); }

/* Riwayat perubahan */
.rw { display: flex; gap: 12px; padding: 12px 14px; background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; }
.rw-ikon { width: 38px; height: 38px; border-radius: 10px; background: var(--kraft-muda); color: var(--kraft); display: grid; place-items: center; flex: none; }
.rw.merah .rw-ikon { background: var(--merah-muda); color: var(--merah); }
.rw-isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; }
.rw-judul b { font: 700 18px/1 var(--huruf-sempit); letter-spacing: .3px; }
.rw-alasan { font-size: 14px; }
.rw-isi .tautan { align-self: flex-start; padding: 4px 0 0; }

/* Garis waktu cek satu case */
.gw-fotos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.gw-fotos img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--garis); cursor: zoom-in; }
.gw-lebih { width: 64px; height: 64px; border-radius: 8px; border: 1.5px dashed var(--garis-tebal); background: var(--kertas); font: 700 18px/1 var(--huruf-sempit); cursor: pointer; }
.gw-aksi { display: flex; gap: 16px; flex-wrap: wrap; }
.garis-waktu li.edit::before { border-color: var(--kuning); }
.gw-kartu { display: flex; flex-direction: column; gap: 2px; }

/* Pengaturan: urutan jenis loading */
.urut-btn { display: flex; flex-direction: column; gap: 2px; }
.ikon-btn { width: 34px; height: 28px; border: 1px solid var(--garis); background: var(--kertas); border-radius: 8px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ikon-btn .ikon { width: 18px; height: 18px; }
.ikon-btn:disabled { opacity: .3; cursor: default; }
.list-user li { flex-wrap: wrap; }
.list-user .user-info { min-width: 120px; }

@media (max-width: 380px) {
  .atas-nama { display: none; }
  .ft { width: 70px; height: 70px; }
}