/* ============================================================
   SIRAMI — sistem tampilan
   Mobile-first: aplikasi ini dipakai petugas dari HP di meja layanan, jadi target
   sentuh minimal 44px dan teks tidak pernah di bawah 12px.
   Di layar lebar navigasi bawah berubah jadi sidebar kiri lewat CSS saja — markup
   dan id-nya sama, sehingga ruang layar terpakai dan isi tidak jadi pita sempit.
   Semua warna lewat token di :root: mode gelap cukup menimpa token, bukan menambal
   tiap selector satu per satu.
   ============================================================ */

/* ── 1. Token ─────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Merek */
  --brand-50:  #eef3ff;
  --brand-100: #dce6ff;
  --brand-200: #bfd0fb;
  --brand-300: #91acf0;
  --brand-400: #6687dd;
  --brand-500: #4869c2;
  --brand-600: #3655a7;
  --brand-700: #2b4388;
  --brand-800: #23366e;
  --brand-900: #1b2a57;

  /* Status */
  --bahaya:        #ad342e;
  --bahaya-lembut: #fff2f0;
  --bahaya-garis:  #f1cbc7;
  --hati:          #a9680d;
  --hati-lembut:   #fff8e9;
  --hati-garis:    #eed9a8;
  --aman:          #2d7a4d;
  --aman-lembut:   #eef9f2;
  --aman-garis:    #c8e5d2;
  --netral:        #61708a;
  --netral-lembut: #f0f3f8;
  --netral-garis:  #dbe2ed;
  --info-lembut:   var(--brand-50);
  --info-garis:    var(--brand-200);

  /* Permukaan & teks */
  --latar:       #f4f7fc;
  --kartu:       #ffffff;
  --kartu-2:     #f8faff;
  --garis:       #e1e7f1;
  --garis-kuat:  #cbd6e7;
  --teks:        #17213f;
  --teks-redam:  #60708e;
  --teks-lembut: #8996ae;

  /* Caret select (diganti di mode gelap) */
  --caret: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* Bentuk */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-full: 999px;

  /* Bayang */
  --sh-1: 0 1px 2px rgba(31,47,87,.05), 0 1px 1px rgba(31,47,87,.03);
  --sh-2: 0 10px 28px -18px rgba(31,47,87,.34), 0 2px 5px rgba(31,47,87,.05);
  --sh-3: 0 22px 48px -20px rgba(31,47,87,.38);
  --cincin: 0 0 0 3px rgba(54,85,167,.28);

  /* Aksen merek dipakai konsisten untuk navigasi, tombol, dan penanda aktif. */
  --grad-biru:  linear-gradient(135deg, #4869c2 0%, #2b4388 100%);
  --grad-hijau: linear-gradient(135deg, #4c9a69 0%, #2d7a4d 100%);
  --navy:       #22366f;
  --zaitun:     #817441;
  --sisi-aktif: #3655a7;

  /* Tata letak */
  --topbar-h: 64px;
  --nav-w: 280px;
  --nav-h: 64px;
  --isi-maks: 1440px;
  --gutter: 16px;

  /* Gerak */
  --cepat: 140ms cubic-bezier(.3,.7,.4,1);
  --sedang: 240ms cubic-bezier(.3,.7,.4,1);
}

/* ── 2. Dasar ─────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--teks);
  background: var(--latar);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -.015em; }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* ── 3. Utilitas ──────────────────────────────────────────── */
.hidden { display: none !important; }

.redam { color: var(--teks-redam); font-size: 13px; }

.ikon { width: 18px; height: 18px; flex: none; pointer-events: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.titik { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ── 4. Tombol ────────────────────────────────────────────── */
.btn {
  font: inherit;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 10px 16px;
  min-height: 44px;
  background: var(--netral-lembut);
  color: var(--teks);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--cepat), border-color var(--cepat),
              box-shadow var(--cepat), transform var(--cepat), color var(--cepat);
}
.btn:hover { background: var(--netral-garis); }
.btn:active { transform: translateY(1px); }

.btn-utama { background: var(--brand-700); color: #fff; box-shadow: 0 1px 2px rgba(10,47,80,.3); }
.btn-utama:hover { background: var(--brand-600); }

.btn-garis { background: var(--kartu); border-color: var(--garis-kuat); color: var(--teks); }
.btn-garis:hover { background: var(--kartu-2); border-color: var(--netral); }

.btn-teks { background: transparent; border-color: transparent; color: var(--brand-700); }
.btn-teks:hover { background: var(--brand-50); }

.btn-bahaya { background: var(--bahaya); color: #fff; }
.btn-bahaya:hover { background: #a51f24; }

.btn-blok { display: flex; width: 100%; margin-top: 10px; }

.btn-kecil { min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: var(--r-xs); gap: 6px; }
.btn-kecil .ikon { width: 15px; height: 15px; }

.btn-ikon {
  min-height: 40px; width: 40px; padding: 0;
  background: transparent; border-color: transparent;
  border-radius: var(--r-sm); color: var(--teks-redam);
}
.btn-ikon:hover { background: var(--netral-lembut); color: var(--teks); }

.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

:where(input, select, textarea, .btn, .btn-aksi, .chip, .stat, .nav-item):focus-visible {
  outline: none;
  box-shadow: var(--cincin);
}

/* ── 5. Input ─────────────────────────────────────────────── */
input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--garis-kuat);
  border-radius: var(--r-sm);
  background: var(--kartu);
  color: var(--teks);
  transition: border-color var(--cepat), box-shadow var(--cepat);
}
input:hover, select:hover, textarea:hover { border-color: var(--netral); }
input::placeholder, textarea::placeholder { color: var(--teks-lembut); }

input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; }

textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px;
  background-image: var(--caret);
  background-repeat: no-repeat;
  background-position: right 12px center;
}

label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 13.5px; }
label input, label select, label textarea { margin-top: 6px; font-weight: 400; }
label small {
  display: block; margin-top: 5px;
  font-weight: 400; color: var(--teks-redam); font-size: 12px; line-height: 1.45;
}

code {
  background: var(--netral-lembut); color: var(--brand-800);
  padding: 1px 5px; border-radius: var(--r-xs);
  font-size: 12px; font-family: ui-monospace, Consolas, monospace;
}

/* Pencarian dengan ikon */
.cari-bungkus { position: relative; display: block; flex: 1; min-width: 0; }
.cari-bungkus .cari-ikon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--teks-lembut);
}
.cari-bungkus input { padding-left: 40px; }

/* Bidang rahasia dengan tombol lihat */
.bidang-rahasia { position: relative; display: block; margin-top: 6px; }
.bidang-rahasia input { padding-right: 46px; margin-top: 0; }
.bidang-rahasia .btn-lihat {
  position: absolute; right: 3px; bottom: 3px;
  min-height: 38px; width: 38px;
}

/* Saklar */
.saklar {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.saklar input {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 46px; height: 28px; margin: 0; opacity: 0; cursor: pointer;
}
.saklar-track {
  position: relative; flex: none;
  width: 46px; height: 28px; border-radius: var(--r-full);
  background: var(--garis-kuat);
  transition: background var(--cepat);
}
.saklar-knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--sedang);
}
.saklar input:checked + .saklar-track { background: var(--brand-600); }
.saklar input:checked + .saklar-track .saklar-knob { transform: translateX(18px); }
.saklar input:focus-visible + .saklar-track { box-shadow: var(--cincin); }

/* ── 6. Badge, chip, lencana ──────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: var(--r-full);
  white-space: nowrap; border: 1px solid transparent;
}
.badge .ikon { width: 12px; height: 12px; }
.badge-habis, .badge-hari-ini { background: var(--bahaya-lembut); color: var(--bahaya); border-color: var(--bahaya-garis); }
.badge-kritis    { background: var(--hati-lembut);   color: var(--hati);      border-color: var(--hati-garis); }
.badge-menjelang { background: var(--info-lembut);   color: var(--brand-700); border-color: var(--info-garis); }
.badge-aman      { background: var(--aman-lembut);   color: var(--aman);      border-color: var(--aman-garis); }
.badge-nonaktif  { background: var(--netral-lembut); color: var(--netral);    border-color: var(--netral-garis); }
.badge-terkirim  { background: var(--aman-lembut);   color: var(--aman);      border-color: var(--aman-garis); }

.chip-baris {
  display: flex; gap: 7px;
  overflow-x: auto; padding: 2px 2px 8px;
  margin-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.chip {
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
  scroll-snap-align: start;
  background: var(--kartu); border: 1px solid var(--garis-kuat); color: var(--teks-redam);
  border-radius: var(--r-full); padding: 7px 14px; min-height: 36px; cursor: pointer;
  transition: background var(--cepat), color var(--cepat), border-color var(--cepat);
}
.chip:hover { border-color: var(--netral); color: var(--teks); }
.chip-aktif {
  background: var(--brand-700); border-color: var(--brand-700); color: #fff;
  box-shadow: 0 1px 2px rgba(10,47,80,.3);
}
.chip-aktif:hover { color: #fff; }
.chip-jumlah {
  font-style: normal; font-size: 11px; font-weight: 700;
  margin-left: 7px; opacity: .7; font-variant-numeric: tabular-nums;
}
.chip-jumlah:empty { display: none; }

/* Lencana duduk di ujung kanan baris navigasi. Dulu diposisikan absolut untuk navigasi
   bawah; di sidebar posisi itu membuatnya menimpa label halaman. */
.lencana {
  margin-left: auto; flex: none;
  background: var(--bahaya); color: #fff;
  font-size: 10px; font-style: normal; font-weight: 700; line-height: 17px;
  min-width: 17px; height: 17px; padding: 0 4px; text-align: center;
  border-radius: var(--r-full);
  box-shadow: 0 0 0 2px var(--kartu);
}

/* ── 7. Panel & kartu ─────────────────────────────────────── */
.panel {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh-2);
}
/* Judul blok dibuat ringkas dan mudah dipindai tanpa deretan huruf kapital yang berat. */
.panel-judul {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding-bottom: 13px;
  border-bottom: 1px solid var(--garis);
  font-size: 14.5px; font-weight: 750; letter-spacing: -.01em;
  color: var(--teks);
}
.panel-judul .ikon { width: 17px; height: 17px; color: var(--brand-600); }
/* Bila judul berbagi baris dengan tombol, garis bawahnya pindah ke baris itu: pada judul
   saja garisnya hanya selebar teks, bukan selebar panel. */
.panel-kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; padding-bottom: 11px; flex-wrap: wrap;
  border-bottom: 1px solid var(--garis);
}
.panel-kepala .panel-judul { margin: 0; padding: 0; border-bottom: 0; }
.panel > p:last-child { margin-bottom: 0; }

.daftar { display: flex; flex-direction: column; gap: 12px; }

.kartu {
  position: relative; overflow: hidden;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  padding: 14px 16px 14px 19px;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--cepat), border-color var(--cepat);
}
.kartu::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--netral-garis);
}
.kartu:hover { box-shadow: var(--sh-2); border-color: var(--garis-kuat); }
.kartu-b-habis::before, .kartu-b-hari-ini::before { background: var(--bahaya); }
.kartu-b-kritis::before    { background: var(--hati); }
.kartu-b-menjelang::before { background: var(--brand-500); }
.kartu-b-aman::before      { background: var(--aman); }
.kartu-b-nonaktif::before  { background: var(--netral-garis); }
.kartu-selesai { opacity: .7; }

.kartu-kepala { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.kartu-utama { min-width: 0; }
.kartu-nama { font-weight: 700; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.kartu-jenis { font-size: 12.5px; color: var(--teks-redam); margin-top: 2px; overflow-wrap: anywhere; }
.kartu-tanda { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.kartu-orang { display: flex; align-items: center; gap: 11px; min-width: 0; }

.kartu-rinci {
  display: grid; gap: 8px 18px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--garis);
}
.rinci { display: flex; flex-direction: column; min-width: 0; }
.rinci-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--teks-lembut);
}
.rinci-nilai { font-size: 13.5px; overflow-wrap: anywhere; }
.rinci-lebar { grid-column: 1 / -1; }

.kartu-aksi-baris { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }
.baris-tombol { display: flex; gap: 8px; flex-wrap: wrap; }
.baris-tombol .btn { flex: 1 1 auto; min-width: 140px; }

.avatar {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-700);
  font-size: 13px; font-weight: 700;
}

.kosong {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 36px 20px;
  color: var(--teks-redam); font-size: 14px;
  background: var(--kartu);
  border: 1px dashed var(--garis-kuat);
  border-radius: var(--r-md);
}
.kosong .ikon { width: 26px; height: 26px; color: var(--teks-lembut); }

.hitung-hasil {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 600;
  color: var(--teks-redam); font-variant-numeric: tabular-nums;
}

.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 18px; }
.pager span {
  font-size: 13px; font-weight: 600; color: var(--teks-redam);
  font-variant-numeric: tabular-nums;
}
.pager .btn { min-width: 0; }

/* Kerangka muat */
.kerangka {
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--r-md); padding: 16px 18px;
  display: grid; gap: 10px;
}
.kerangka i {
  display: block; height: 11px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--netral-lembut) 25%, var(--garis) 50%, var(--netral-lembut) 75%);
  background-size: 200% 100%;
  animation: kilau 1.4s linear infinite;
}
.kerangka i:nth-child(1) { width: 52%; height: 14px; }
.kerangka i:nth-child(2) { width: 78%; }
.kerangka i:nth-child(3) { width: 34%; }

/* ── 8. Modal, toast, indikator sibuk ─────────────────────── */
.tirai {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8,17,31,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: pudar var(--sedang) both;
}
.modal {
  background: var(--kartu);
  width: 100%; max-width: 620px; max-height: 92vh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-3);
  animation: naik var(--sedang) both;
}
.modal-gagang {
  width: 42px; height: 4px; border-radius: var(--r-full);
  background: var(--garis-kuat); margin: 9px auto 0; flex: none;
}
.modal-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--garis);
}
.modal-kepala h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.modal-isi {
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal-isi > p:first-child { margin-top: 0; }
.modal-isi .baris-tombol { margin-top: 10px; }

.toast {
  position: fixed; left: 50%;
  bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 460px);
  background: #111d2e; color: #fff;
  padding: 12px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; line-height: 1.4;
  box-shadow: var(--sh-3);
  animation: naik-toast var(--sedang) both;
}
.toast .ikon { width: 18px; height: 18px; }
.toast-sukses { background: #13693a; }
.toast-gagal { background: #a51f24; }

/* Notifikasi proses terpusat. Lapisannya tetap menutup layar supaya tombol simpan tidak
   bisa ditekan dua kali selagi permintaan berjalan. Bilah atas memberi tanda seketika;
   kartu status muncul setelah 450 ms supaya permintaan cepat tidak menimbulkan kedipan. */
.tirai-sibuk { position: fixed; inset: 0; z-index: 70; background: transparent; cursor: progress; }
.tirai-sibuk::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(23, 33, 63, .16); opacity: 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: selubung 200ms ease 450ms both;
}
@keyframes selubung { to { opacity: 1; } }
/* Bilah ini selalu jatuh di 3px teratas layar, dan 3px teratas selalu topbar biru tua
   (atau gradien biru layar login). Warnanya karena itu harus terang, bukan biru merek:
   biru di atas biru sama saja dengan tidak ada indikator sama sekali. */
.pemutar {
  position: absolute; top: 0; left: 0;
  width: 38%; height: 3px;
  border-radius: 0 var(--r-full) var(--r-full) 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), #9ccbef 40%, #ffffff);
  box-shadow: 0 0 8px rgba(255, 255, 255, .5);
  animation: lintas 1.15s cubic-bezier(.65,.05,.36,1) infinite;
}

.notif-sibuk {
  position: absolute; left: 50%; top: 50%;
  width: min(90vw, 390px);
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  color: #17213f;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,245,255,.96)),
    #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  box-shadow: 0 26px 70px -24px rgba(18,35,76,.55), 0 8px 24px -14px rgba(18,35,76,.3);
  opacity: 0;
  transform: translate(-50%, calc(-50% + 12px)) scale(.97);
  animation: tampil-notif-sibuk 260ms cubic-bezier(.2,.8,.3,1) 450ms both;
}
.notif-sibuk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.55), transparent 36%);
}
.notif-sibuk-visual {
  position: relative; width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
}
.cincin-sibuk {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 45deg, transparent 0 14%, #91acf0 28%, #3655a7 68%, transparent 82%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  animation: putar-sibuk 1.2s linear infinite;
}
.inti-sibuk {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: #3655a7; background: #eef3ff; border-radius: 50%;
  box-shadow: inset 0 0 0 1px #dce6ff, 0 5px 15px -8px rgba(54,85,167,.7);
}
.inti-sibuk .ikon { width: 20px; height: 20px; }
.notif-sibuk-teks { position: relative; z-index: 1; min-width: 0; display: grid; gap: 3px; }
.notif-sibuk-teks strong { font-size: 15px; letter-spacing: -.01em; }
.notif-sibuk-teks > span:not(.titik-sibuk) { color: #60708e; font-size: 12.5px; line-height: 1.45; }
.titik-sibuk { display: flex; gap: 4px; height: 8px; margin-top: 3px; }
.titik-sibuk i { width: 5px; height: 5px; border-radius: 50%; background: #6687dd; animation: denyut-sibuk 1.1s ease-in-out infinite; }
.titik-sibuk i:nth-child(2) { animation-delay: 140ms; }
.titik-sibuk i:nth-child(3) { animation-delay: 280ms; }

@keyframes kilau { to { background-position: -200% 0; } }
@keyframes lintas { 0% { left: -38%; } 60%, 100% { left: 100%; } }
@keyframes pudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes tampil-notif-sibuk { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes putar-sibuk { to { transform: rotate(360deg); } }
@keyframes denyut-sibuk { 0%, 70%, 100% { opacity: .28; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
@keyframes naik { from { transform: translateY(22px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes muncul { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes naik-toast { from { transform: translate(-50%, 14px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ── 9. Layar auth ────────────────────────────────────────── */
.layar-auth {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(155deg, var(--brand-600) 0%, var(--brand-800) 45%, var(--brand-900) 100%);
  overflow: hidden;
}
/* Pola halus di latar: dua lingkaran cahaya, bukan gambar, supaya tetap jalan luring. */
.layar-auth::before,
.layar-auth::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.layar-auth::before {
  width: 420px; height: 420px; top: -150px; right: -120px;
  background: radial-gradient(circle, rgba(129,186,235,.3) 0%, rgba(129,186,235,0) 70%);
}
.layar-auth::after {
  width: 520px; height: 520px; bottom: -220px; left: -160px;
  background: radial-gradient(circle, rgba(10,47,80,.55) 0%, rgba(10,47,80,0) 70%);
}

.auth-kartu {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: var(--kartu);
  border-radius: var(--r-xl);
  padding: 28px 24px 24px;
  box-shadow: 0 24px 60px -18px rgba(5,25,45,.6);
  animation: naik var(--sedang) both;
}
.auth-merek { display: flex; gap: 13px; align-items: center; margin-bottom: 22px; }
.auth-merek img { border-radius: var(--r-md); box-shadow: var(--sh-1); }
.auth-merek h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: .01em; }
.auth-merek p { margin: 2px 0 0; font-size: 13px; color: var(--teks-redam); }
.auth-form label:last-of-type { margin-bottom: 18px; }
.auth-catatan {
  display: flex; align-items: flex-start; gap: 7px;
  min-height: 20px; margin: 12px 0 0;
  font-size: 13px; font-weight: 600; color: var(--bahaya);
}
.auth-catatan:empty { display: none; }
.auth-info {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--info-lembut); color: var(--brand-800);
  border: 1px solid var(--info-garis);
  padding: 11px 13px; border-radius: var(--r-sm);
  font-size: 13px; margin: 0 0 18px;
}
.auth-info .ikon { color: var(--brand-600); margin-top: 1px; }

/* ── 10. Rangka aplikasi: sidebar + kepala breadcrumb ─────── */
/* Sidebar memisahkan identitas, profil, dan navigasi dalam permukaan yang jelas. Di layar
   sempit sidebar menjadi laci agar area kerja tetap lapang. */
.sisi {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 45;
  width: var(--nav-w);
  display: flex; flex-direction: column;
  background: #f8faff;
  border-right: 1px solid var(--garis);
  padding: calc(16px + env(safe-area-inset-top)) 14px 16px;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform var(--sedang);
}
body.nav-terbuka .sisi { transform: none; }

.tirai-sisi {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(8,17,31,.45);
  animation: pudar var(--cepat) both;
}

.sisi-merek {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 14px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: var(--grad-biru);
  box-shadow: 0 12px 28px -18px rgba(34,54,111,.8);
}
.merek-logo {
  border-radius: var(--r-sm); flex: none;
  background: #fff; padding: 2px; box-shadow: 0 3px 12px rgba(13,30,55,.2);
}
.merek-teks { min-width: 0; }
.merek-teks strong {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: .03em;
  line-height: 1.2; color: #fff;
}
.merek-teks span {
  display: block; font-size: 10.5px; line-height: 1.35; color: rgba(255,255,255,.78);
}

.sisi-profil {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.avatar-besar { width: 38px; height: 38px; font-size: 14px; flex: none; }
.sisi-profil-teks { min-width: 0; }
.sisi-profil-teks strong {
  display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--teks);
}
/* Peran dan instansi dibedakan dari nama melalui ukuran dan warna yang lebih tenang. */
.sisi-profil-teks span {
  display: block; font-size: 11px; line-height: 1.4; color: var(--teks-redam); word-break: break-word;
}

.nav-utama { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 20px; }
.nav-grup {
  margin: 16px 0 5px; padding: 0 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--teks-lembut);
}
.nav-grup-utama { margin-top: 6px; }
.nav-item {
  position: relative;
  font: inherit; font-size: 14px; font-weight: 600; text-align: left;
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 0 11px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--teks-redam); cursor: pointer;
  transition: background var(--cepat), color var(--cepat), border-color var(--cepat);
}
.nav-item:hover { background: var(--kartu); border-color: var(--garis); color: var(--teks); }
.nav-ikon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: transparent; color: var(--teks-redam);
  transition: background var(--cepat), color var(--cepat);
}
.nav-ikon .ikon { width: 18px; height: 18px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-aktif, .nav-aktif:hover {
  background: var(--brand-50); border-color: var(--brand-200);
  color: var(--brand-800); font-weight: 700;
}
.nav-aktif::before {
  content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 var(--r-full) var(--r-full) 0; background: var(--brand-600);
}
.nav-aktif .nav-ikon { background: var(--brand-100); color: var(--brand-700); }

.utama { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--topbar-h);
  padding: 10px var(--gutter);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(244,247,252,.92);
  border-bottom: 1px solid var(--garis);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.tombol-menu { color: var(--teks-redam); flex: none; }
.remah {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-size: 13.5px; color: var(--teks-redam);
}
.remah-home { width: 17px; height: 17px; flex: none; }
.remah-pisah { color: var(--teks-lembut); flex: none; }
.remah-induk { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.remah-kini { color: var(--teks); font-weight: 600; white-space: nowrap; }

.topbar-kanan { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
/* Kartu pengguna di kanan atas, seperti Srikandi: kartu putih bernaung, bukan chip datar. */
.kartu-user {
  display: flex; align-items: center; gap: 9px;
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--r-md); padding: 7px 14px;
  box-shadow: var(--sh-2); max-width: 230px;
}
.kartu-user > .ikon { width: 22px; height: 22px; color: var(--teks-redam); flex: none; }
.kartu-user-teks { min-width: 0; line-height: 1.25; }
.kartu-user-teks strong {
  display: block; font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kartu-user-teks span { display: block; font-size: 11px; color: var(--teks-lembut); }

.banner-luring {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--hati-lembut); color: var(--hati);
  border: 1px solid var(--hati-garis);
  border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 13px; font-weight: 600;
  margin-bottom: 16px;
}

.konten {
  flex: 1 0 auto;
  width: 100%; max-width: var(--isi-maks); margin: 0 auto;
  padding: 4px var(--gutter) calc(32px + env(safe-area-inset-bottom));
}
.kaki {
  flex: none;
  width: 100%; max-width: var(--isi-maks); margin: 0 auto;
  padding: 18px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  font-size: 12.5px; color: var(--teks-lembut);
}

/* ── 11. Panel halaman, kepala, dan judul bagian ──────────── */
/* Setiap halaman duduk di atas satu kartu putih membulat, seperti Srikandi. */
.panel-utama {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 22px var(--gutter) 26px;
  margin-bottom: 18px;
}
.sapaan {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 20px;
}
.sapaan h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--teks); }
.sapaan p { margin: 5px 0 0; font-size: 13.5px; color: var(--teks-redam); }

/* Judul bagian di dalam panel: huruf kapital berjarak dengan garis bawah selebar panel. */
.judul-bagian {
  margin: 0 0 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--garis);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teks-redam);
}

/* Bilah penyaring di atas tabel: kotak cari melebar, dropdown menyesuaikan isinya.
   Letaknya di LUAR <table> dengan sengaja — tabel data lebih lebar daripada ruang layar
   pada banyak perangkat, dan kendali yang ikut tergulir mendatar bersama kolomnya praktis
   tidak pernah ditemukan petugas. */
.bilah-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.bilah-filter .cari-bungkus { flex: 1 1 260px; }
/* max-width ada karena nama jenis izin di lapangan bisa sangat panjang — mis. "IZIN
   PENGGUNAAN TANAH MAKAM (MAKAM BARU/PERPANJANGAN/TUMPANGAN)". Tanpa batas, select yang
   melebar mengikuti isinya mendesak kotak cari turun dan memecah bilah menjadi tiga baris.
   Teksnya dipotong hanya pada keadaan tertutup; daftar pilihannya tetap tampil utuh. */
.bilah-filter select {
  flex: 0 1 auto; width: auto; min-width: 152px; max-width: 260px;
  text-overflow: ellipsis;
}
.bilah-filter input, .bilah-filter select { min-height: 40px; font-size: 13.5px; }

/* Di layar sempit tiap kendali mengambil satu baris penuh: dua dropdown berdampingan pada
   lebar itu hanya menyisakan ruang untuk beberapa huruf pertama pilihannya. */
@media (max-width: 559px) {
  .bilah-filter > * { flex: 1 1 100%; }
  .bilah-filter select { width: 100%; min-width: 0; max-width: none; }
}

/* Baris alat di atas tabel: jumlah baris per halaman, rata kanan seperti Srikandi. */
.alat-tabel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.alat-tabel .hitung-hasil { margin: 0; }
.alat-tabel .pilih-jumlah { margin-left: auto; }
.pilih-jumlah {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--teks-redam);
}
.pilih-jumlah select { width: auto; min-width: 74px; min-height: 38px; padding: 6px 30px 6px 10px; }

/* ── 11b. Tabel data ──────────────────────────────────────── */
.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Area gulir daftar + kepala tabel yang tetap terlihat.
   Hanya berlaku pada mode TABEL (di bawah ambang kartu, kepala kolom memang disembunyikan
   dan tiap baris sudah menjadi kartu, sehingga keduanya tidak ada artinya).

   Tingginya dibatasi agar perkakas di atas tabel, pager, dan tombol unduh/impor di bawahnya
   tetap terlihat sementara barisnya digulir. Ini juga satu-satunya cara membuat `position:
   sticky` bekerja di sini: .tabel-bungkus sudah menjadi wadah gulir karena overflow-x,
   sehingga kepala tabel melekat pada wadah itu — bukan pada jendela — dan tanpa tinggi
   terbatas wadahnya tidak pernah benar-benar menggulir.

   max() menjaga area tetap layak di jendela pendek tanpa memaksa ruang kosong pada daftar
   yang isinya sedikit: max-height tidak pernah meregangkan isi yang lebih pendek. */
@media (min-width: 1465px) {
  .tabel-bungkus { max-height: max(240px, calc(100vh - 330px)); overflow: auto; }
  .tabel-data thead tr.baris-kolom th {
    position: sticky; top: 0; z-index: 3;
    /* Garis bawah dipasang sebagai bayangan dalam, bukan border: pada tabel
       border-collapse, border milik sel yang melekat ikut tergulir dan menghilang. */
    box-shadow: inset 0 -1px 0 var(--garis);
  }
}
.tabel-data {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px;
}
/* Padding mendatar 11px, bukan 14px. Sepuluh kolom dikali dua sisi membuat tiap 1px di
   sini bernilai 20px pada lebar tabel: menurunkannya 3px memangkas lebar minimum tabel
   izin dari 1201px menjadi 1141px (diukur di browser). Itu yang membuat tabel tetap muat
   utuh di layar 1465-1624px saat sidebar ditutup — lihat catatan ambang mode kartu di
   bawah. Jarak tegaknya sengaja tidak ikut dikurangi; yang mahal hanya yang mendatar. */
.tabel-data th, .tabel-data td {
  border-bottom: 1px solid var(--garis);
  padding: 13px 11px; text-align: left; vertical-align: top;
}
.tabel-data thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-800); background: var(--kartu-2); white-space: nowrap;
}
.tabel-data tbody tr { transition: background var(--cepat); }
.tabel-data tbody tr:hover { background: var(--brand-50); }
.tabel-data td.sel-no { width: 54px; color: var(--teks-redam); font-variant-numeric: tabular-nums; }
/* Kolom NIK adalah deretan 16 angka yang dibandingkan sekilas antar baris. Dengan lebar
   digit yang seragam, angka yang berbeda terlihat dari posisinya, bukan dari membaca
   seluruhnya. white-space: nowrap mencegahnya patah di tengah nomor. */
.tabel-data td.sel-nik { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel-data td.sel-utama strong { display: block; font-size: 14px; font-weight: 700; }
.tabel-data td.sel-utama span { display: block; font-size: 12.5px; color: var(--teks-redam); }
.tabel-data .sel-tambahan { display: block; font-size: 12px; color: var(--teks-lembut); }
.tabel-data td.sel-aksi { white-space: nowrap; width: 1%; }
/* Sel kerangka muat memenuhi lebar tabel, jadi ia tidak boleh ikut mendapat label kolom
   saat baris dilipat jadi kartu di layar sempit. */
.kerangka-sel { padding: 10px 14px; }
.kerangka-sel::before { content: none !important; }
.baris-selesai { opacity: .62; }

.sel-kosong {
  text-align: center; color: var(--teks-redam); font-size: 13.5px; padding: 26px 14px;
}
/* Baris pemisah tingkat urgensi pada daftar "perlu dihubungi": daftar itu dikerjakan dari
   atas ke bawah, jadi batas antar tingkat harus terlihat tanpa membaca tiap baris. */
.baris-grup td {
  background: var(--netral-lembut);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teks-redam);
  padding: 9px 14px;
}
/* Warna dipasang pada SEL, bukan pada baris: .baris-grup td sudah menetapkan color, dan
   aturan .g-* di <tr> kalah spesifik sehingga tingkat urgensi tampil abu-abu semua. */
.baris-grup.g-habis td, .baris-grup.g-hari-ini td { color: var(--bahaya); }
.baris-grup.g-kritis td    { color: var(--hati); }
.baris-grup.g-menjelang td { color: var(--brand-600); }
.baris-grup.g-aman td      { color: var(--aman); }
.baris-grup.g-nonaktif td  { color: var(--netral); }
/* Pil jumlah memakai latar --netral-lembut, sama persis dengan latar baris pemisah, jadi
   di sini ia harus memakai warna kartu agar tetap terlihat sebagai pil. */
.baris-grup .grup-jumlah {
  color: var(--teks-redam); background: var(--kartu); margin-left: 8px;
}

/* Tombol aksi di dalam tabel: hanya ikon supaya kolomnya tidak melebar, dengan label
   lewat aria-label/title karena ikon saja tidak terbaca pembaca layar. */
.aksi-tabel { display: flex; gap: 4px; }
.btn-aksi {
  display: grid; place-items: center;
  width: 34px; height: 34px; min-height: 0; padding: 0;
  border-radius: var(--r-sm); border: 1px solid var(--garis);
  background: var(--kartu); color: var(--teks-redam); cursor: pointer;
  transition: background var(--cepat), color var(--cepat), border-color var(--cepat);
}
.btn-aksi:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.btn-aksi.aksi-wa:hover { background: var(--aman-lembut); color: var(--aman); border-color: var(--aman-garis); }
.btn-aksi.aksi-hapus:hover { background: var(--bahaya-lembut); color: var(--bahaya); border-color: var(--bahaya-garis); }
.btn-aksi .ikon { width: 17px; height: 17px; }

/* ── 12. Beranda ──────────────────────────────────────────── */
.kartu-aksi {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--kartu) 0%, var(--brand-50) 100%);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-lg);
  padding: 17px 18px 17px 21px;
  margin-bottom: 22px;
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: box-shadow var(--cepat), transform var(--cepat);
}
.kartu-aksi:hover { transform: translateY(-1px); box-shadow: var(--sh-3); }
.kartu-aksi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--brand-500);
}
.kartu-aksi.mendesak::before { background: var(--bahaya); }
.kartu-aksi.aman::before { background: var(--aman); }
.kartu-aksi.mendesak { background: linear-gradient(135deg, var(--kartu) 0%, var(--bahaya-lembut) 100%); border-color: var(--bahaya-garis); }
.kartu-aksi.aman { background: linear-gradient(135deg, var(--kartu) 0%, var(--aman-lembut) 100%); border-color: var(--aman-garis); }

.kartu-aksi-ikon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--info-lembut); color: var(--brand-700);
}
.kartu-aksi-ikon .ikon { width: 23px; height: 23px; display: none; }
.kartu-aksi-ikon .i-netral { display: block; }
.kartu-aksi.mendesak .kartu-aksi-ikon { background: var(--bahaya-lembut); color: var(--bahaya); }
.kartu-aksi.mendesak .kartu-aksi-ikon .ikon { display: none; }
.kartu-aksi.mendesak .kartu-aksi-ikon .i-mendesak { display: block; }
.kartu-aksi.aman .kartu-aksi-ikon { background: var(--aman-lembut); color: var(--aman); }
.kartu-aksi.aman .kartu-aksi-ikon .ikon { display: none; }
.kartu-aksi.aman .kartu-aksi-ikon .i-aman { display: block; }

.kartu-aksi-isi { flex: 1; min-width: 0; }
.kartu-aksi-isi strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.kartu-aksi-isi p { margin: 3px 0 0; font-size: 13px; color: var(--teks-redam); }
.kartu-aksi .btn { flex: none; }

/* Di layar sempit tombol turun ke baris sendiri: kalau dipaksa sebaris, teks ringkasan
   terjepit jadi tiga baris dan angka yang jadi inti kartu ikut tenggelam. */
@media (max-width: 559px) {
  .kartu-aksi { flex-wrap: wrap; }
  .kartu-aksi .btn { width: 100%; }
}

.stat-wrap { display: grid; gap: 20px; margin-bottom: 22px; }
.grup-judul {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 11px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--teks-redam);
}
.grup-judul .ikon { width: 14px; height: 14px; }

.grid-statistik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat {
  position: relative; overflow: hidden;
  font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 112px; padding: 15px 14px 13px;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  color: var(--netral);
  transition: transform var(--cepat), box-shadow var(--cepat), border-color var(--cepat);
}
.stat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 4px; background: currentColor;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.stat-angka {
  font-size: 29px; font-weight: 800; line-height: 1;
  color: currentColor; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat-label { min-height: 30px; font-size: 11.5px; font-weight: 650; color: var(--teks-redam); line-height: 1.3; }
.stat-bar {
  display: block; height: 4px; border-radius: var(--r-full);
  background: var(--netral-lembut); overflow: hidden;
}
.stat-bar i {
  display: block; height: 100%; width: 0;
  border-radius: inherit; background: currentColor;
  transition: width var(--sedang);
}
.stat-habis, .stat-hari-ini { color: var(--bahaya); background: linear-gradient(145deg, var(--kartu) 35%, var(--bahaya-lembut)); border-color: var(--bahaya-garis); }
.stat-kritis    { color: var(--hati); background: linear-gradient(145deg, var(--kartu) 35%, var(--hati-lembut)); border-color: var(--hati-garis); }
.stat-menjelang { color: var(--brand-600); background: linear-gradient(145deg, var(--kartu) 35%, var(--brand-50)); border-color: var(--brand-200); }
.stat-aman      { color: var(--aman); background: linear-gradient(145deg, var(--kartu) 35%, var(--aman-lembut)); border-color: var(--aman-garis); }
.stat-nonaktif  { color: var(--netral); background: linear-gradient(145deg, var(--kartu) 35%, var(--netral-lembut)); border-color: var(--netral-garis); }

.panel-grid { display: grid; gap: 14px; }

.daftar-info {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; gap: 1px;
  background: var(--garis);
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.daftar-info li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: var(--kartu); font-size: 13.5px;
}
.daftar-info strong { font-size: 16px; font-variant-numeric: tabular-nums; }

.blok-bantuan p { margin: 0 0 12px; }

/* ── 13. Halaman izin ─────────────────────────────────────── */
.chip-baris { margin-bottom: 14px; }

/* Bilah berkas di kaki daftar. Unduh dan impor berdampingan karena keduanya mengurus
   berkas yang sama; garis atas memisahkannya dari baris data tanpa menambah kotak baru. */
.bilah-data {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--garis);
}

/* Pratinjau impor (di dalam modal) */
input[type="file"] { padding: 9px 11px; font-size: 13px; }
.kotak-galat {
  margin-top: 12px; padding: 12px 14px;
  background: var(--bahaya-lembut); border: 1px solid var(--bahaya-garis);
  border-radius: var(--r-sm); font-size: 13px; line-height: 1.5;
}
.kotak-galat p { margin: 0 0 6px; }
.kotak-galat p:last-child { margin-bottom: 0; }
.kotak-galat ul { margin: 0 0 10px; padding-left: 18px; }
.kotak-galat li { margin-bottom: 4px; }
.teks-bahaya { color: var(--bahaya); font-weight: 700; }
.pratinjau-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel-pratinjau { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabel-pratinjau th, .tabel-pratinjau td {
  padding: 7px 9px; border-bottom: 1px solid var(--garis); text-align: left;
}
/* Judul tidak boleh patah, isi boleh: nama pemohon yang panjang cukup turun baris,
   sehingga pratinjau biasanya muat di layar HP tanpa perlu digeser mendatar. */
.tabel-pratinjau th { white-space: nowrap; }
.tabel-pratinjau thead th {
  background: var(--kartu-2); color: var(--brand-800);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* ── 14. Halaman pengingat ────────────────────────────────── */
.grup-jumlah {
  font-size: 11.5px; font-weight: 700;
  color: var(--teks-redam); background: var(--netral-lembut);
  border-radius: var(--r-full); padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.g-habis, .g-hari-ini { color: var(--bahaya); }
.g-kritis    { color: var(--hati); }
.g-menjelang { color: var(--brand-600); }
.g-aman      { color: var(--aman); }
.g-nonaktif  { color: var(--netral); }

.baris-saklar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--r-md); padding: 11px 14px; margin-bottom: 14px;
  box-shadow: var(--sh-1);
}

/* ── 15. Halaman pengaturan ───────────────────────────────── */
fieldset { border: 0; padding: 0; margin: 0; }
.set { margin-bottom: 14px; }
/* <legend> secara bawaan dirender di area GARIS fieldset, di luar kotak padding-nya,
   sehingga latar panel tidak menjangkaunya: judulnya melayang di atas kartu dan garis
   bawahnya jatuh sendirian di dalam kartu. Menurut spesifikasi, legend yang di-float tidak
   lagi diperlakukan sebagai legend fieldset — ia kembali ke aliran normal di dalam padding.
   Itu perilaku yang didefinisikan, bukan akal-akalan, dan satu-satunya cara memposisikannya
   tanpa membongkar <fieldset>/<legend> yang menjadi semantik kelompok isian ini. */
.set-legend {
  float: left; width: 100%;
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 0 0 11px;
  border-bottom: 1px solid var(--garis);
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--teks-redam);
}
/* Float harus dibersihkan oleh isi di bawahnya, kalau tidak isinya menimpa judul. */
.set-legend + * { clear: both; }
.set-legend .ikon { width: 17px; height: 17px; color: var(--brand-600); }
.set-desc { margin: 0 0 16px; font-size: 13px; color: var(--teks-redam); }
.set-isi { display: grid; gap: 0 18px; }
.set-isi > label { margin-bottom: 14px; }
.set-isi > .baris-tombol, .set-isi > .rentang { grid-column: 1 / -1; }

.pratinjau-bungkus {
  background: var(--kartu-2);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  padding: 14px;
}
.pratinjau-judul {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--teks-lembut);
}
.pratinjau-judul .ikon { width: 14px; height: 14px; }
.pratinjau {
  background: #dcf8c6; color: #0c2a17;
  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
  padding: 12px 14px;
  font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  box-shadow: var(--sh-1);
}

.simpan-bar {
  position: static;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--kartu); border: 1px solid var(--garis-kuat);
  border-radius: var(--r-md); padding: 12px 14px; margin: 4px 0 20px;
  box-shadow: var(--sh-1);
}
.simpan-bar .btn { flex: 1 1 auto; }

.form-blok {
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--r-md); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--sh-1);
}
.form-blok h3 { margin: 0 0 6px; font-size: 15px; }

/* ── 16. Layar sedang ─────────────────────────────────────── */
@media (min-width: 560px) {
  .kartu-rinci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .tirai { align-items: center; padding: 24px; }
  .modal { border-radius: var(--r-xl); animation-name: muncul; }
  .modal-gagang { display: none; }
  .modal-isi { padding-bottom: 20px; }
  .set-isi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simpan-bar .btn { flex: 0 0 auto; min-width: 210px; }
}

@media (min-width: 900px) {
  .stat-wrap { grid-template-columns: 1fr 1fr; }
  .panel-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ── 17. Layar sempit: tabel jadi kartu ───────────────────── */
/* Aplikasi ini PWA yang dipakai petugas dari HP. Tabel tujuh kolom tidak terbaca di layar
   selebar telapak tangan, jadi tiap baris dilipat menjadi kartu dengan label kolom diambil
   dari atribut data-label. Markup dan seluruh penanganan event tetap sama persis — yang
   berubah hanya cara menggambarnya.

   Ambangnya BUKAN 1024px seperti sidebar. Lebar minimum tabel izin diukur ulang di
   browser setiap kali kolom bertambah, dengan width:min-content pada tabelnya:
   851px -> 1056px (kolom Kecamatan dan Kelurahan) -> 1201px (kolom NIK, yang sendirian
   butuh 144px untuk 16 digit) -> 1141px sesudah padding mendatar sel dirapatkan.

   Angkanya TETAP 1464/1465 walau tabelnya kini butuh 1201px, dan itu keputusan yang
   diambil sadar. Menaikkannya ke 1625px — lebar saat tabel dijamin muat utuh di samping
   sidebar yang terbuka — sempat dicoba, dan akibatnya layar 1465-1624px berganti menjadi
   kartu bertumpuk. Pemakainya menolak: yang hilang bukan sekadar tampilan, melainkan
   kemampuan membandingkan banyak izin sekaligus dalam satu pandangan, dan itulah guna
   halaman ini.

   Jadi pertukarannya dibalik dengan sengaja: di rentang itu tabel boleh menggulir
   mendatar. Konsekuensinya diukur di browser, bukan dikira-kira. Dengan sidebar TERBUKA
   ruang yang tersisa adalah lebar layar dikurangi 424px, jadi tabel muat utuh sejak
   1565px; di 1465px ia meluber 100px. Menutup sidebar membebaskan tepat 135px, dan
   sesudah itu tabel muat utuh di SELURUH rentang mode tabel — pada 1465px sekalipun,
   luberannya nol dan keempat tombol Aksi terjangkau tanpa digeser.

   Itulah jalan keluarnya bila tabel terasa sempit: tutup sidebar, bukan mengganti
   seluruh tampilan menjadi kartu.

   Kartu tetap dipakai di bawah 1465px, dan memuat SELURUH kolom tanpa gulir. Di sana NIK
   justru lebih terbaca daripada bentuk lamanya: ia punya label sendiri (data-label="NIK"),
   sementara dulu ia hanya baris kecil tanpa judul di dalam sel Nama Pemohon.

   Satu angka ini adalah tempat menyetelnya — naikkan ke 1624/1625 bila lebih suka kartu
   daripada tabel yang menggulir. */
@media (max-width: 1464px) {
  .tabel-bungkus { overflow-x: visible; }
  .tabel-data, .tabel-data tbody, .tabel-data tbody tr, .tabel-data tbody td { display: block; width: auto; }
  .tabel-data thead tr.baris-kolom { display: none; }

  .tabel-data tbody tr {
    border: 1px solid var(--garis); border-radius: var(--r-md);
    background: var(--kartu); box-shadow: var(--sh-1);
    padding: 6px 0; margin-bottom: 12px;
  }
  .tabel-data tbody tr:hover { background: var(--kartu); }
  .tabel-data tbody td { border: 0; padding: 5px 14px; }
  .tabel-data tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--teks-lembut);
  }
  .tabel-data tbody td.sel-no { display: none; }
  .tabel-data tbody td.sel-aksi { width: auto; white-space: normal; padding-top: 10px; }
  .tabel-data tbody tr.baris-grup { border: 0; box-shadow: none; margin: 14px 0 8px; padding: 0; background: none; }
  .tabel-data tbody tr.baris-grup td { display: block; border-radius: var(--r-sm); }
  .tabel-data tbody tr.baris-grup td::before { content: none; }
  .tabel-data tbody td.sel-kosong { padding: 22px 14px; }
  .tabel-data tbody td.sel-kosong::before { content: none; }
}

@media (max-width: 767px) {
  .topbar { gap: 8px; }
  .tombol-menu { order: -1; }
  .remah-bagian { display: none; }
  .remah { overflow: hidden; font-size: 13px; }
  .kartu-user { padding: 7px 9px; }
  .kartu-user-teks { display: none; }
  .sapaan .btn { min-height: 42px; }
}

/* ── 17b. Layar lebar: sidebar terbuka berdampingan ───────── */
@media (min-width: 1024px) {
  :root { --gutter: 28px; }

  body.nav-terbuka .utama { margin-left: var(--nav-w); }
  .utama { transition: margin-left var(--sedang); }
  /* Di layar lebar sidebar berdampingan dengan isi, bukan melayang di atasnya, jadi
     lapisan gelapnya tidak pernah dipakai. */
  .tirai-sisi { display: none !important; }

  .topbar {
    top: 12px;
    margin: 16px 28px 0;
    padding-top: 10px;
    background: var(--kartu);
    border: 1px solid var(--garis);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
  }
  .konten { padding-top: 24px; }
  .panel-utama { padding: 26px 28px 30px; }
  .sapaan h2 { font-size: 25px; }
  .toast { bottom: 24px; }
}

@media (min-width: 1180px) {
  .daftar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    align-items: start;
  }
}

/* ── 18. Gerak minimal ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .pemutar { animation: none; width: 100%; opacity: .7; }
  .cincin-sibuk, .titik-sibuk i { animation: none; }
  .kerangka i { animation: none; }
  .btn:active { transform: none; }
}

/* ── 19. Mode gelap ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-50:  #15283c;
    --brand-100: #1b3650;
    --brand-200: #27496b;
    --brand-300: #3d6d9c;
    --brand-400: #5b93c4;
    --brand-500: #7db5e0;
    --brand-600: #9ccbef;
    --brand-700: #b9dcf7;
    --brand-800: #d5ecfc;
    --brand-900: #eaf5fe;

    --bahaya:        #f09a9a;
    --bahaya-lembut: #3a1618;
    --bahaya-garis:  #5c2326;
    --hati:          #f0bd6a;
    --hati-lembut:   #3a2a10;
    --hati-garis:    #58401a;
    --aman:          #86d9a3;
    --aman-lembut:   #10301d;
    --aman-garis:    #1d4a2f;
    --netral:        #93a5bb;
    --netral-lembut: #1b2535;
    --netral-garis:  #2b3a4f;

    --latar:       #0a1119;
    --kartu:       #121b27;
    --kartu-2:     #16202e;
    --garis:       #243246;
    --garis-kuat:  #33455e;
    --teks:        #e7eef7;
    --teks-redam:  #a2b3c8;
    --teks-lembut: #7e90a6;

    --caret: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a2b3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 2px 4px rgba(0,0,0,.35), 0 8px 20px -8px rgba(0,0,0,.5);
    --sh-3: 0 16px 40px -10px rgba(0,0,0,.65);
    --cincin: 0 0 0 3px rgba(125,181,224,.4);
  }

  /* Topbar kini menyatu dengan latar halaman (bukan lagi pita biru pekat), jadi warnanya
     cukup mengikuti token --latar. Layar auth tetap biru pekat. */
  .layar-auth { background: linear-gradient(155deg, #11283f 0%, #0b1a2b 45%, #070f1a 100%); }
  .sisi { background: #0f1825; }
  .topbar { background: rgba(10,17,25,.92); }
  .nav-aktif .nav-ikon { background: #203c69; }
  .sisi-profil-teks span { color: var(--teks-redam); }

  .btn-utama { background: #1f5f98; color: #fff; }
  .btn-utama:hover { background: #2a74b5; }
  .chip-aktif { background: #1f5f98; border-color: #1f5f98; color: #fff; }
  .btn-teks { color: var(--brand-600); }
  .panel-judul .ikon, .set-legend .ikon { color: var(--brand-500); }
  .kartu-aksi::before { background: var(--brand-400); }
  .kartu-aksi-ikon { background: var(--brand-50); color: var(--brand-600); }
  .stat-menjelang { color: var(--brand-500); }
  .kartu-b-menjelang::before { background: var(--brand-400); }
  .saklar input:checked + .saklar-track { background: #1f5f98; }
  .pratinjau { background: #15432c; color: #dff3e4; }
  .toast { background: #1b2838; }
  .toast-sukses { background: #165a3b; }
  .toast-gagal { background: #7f2225; }
  .tirai-sibuk::before { background: rgba(2,8,16,.58); }
  .notif-sibuk {
    color: #e7eef7;
    background: linear-gradient(135deg, rgba(24,36,51,.98), rgba(13,24,38,.98)), #121b27;
    border-color: rgba(125,181,224,.18);
    box-shadow: 0 28px 76px -24px rgba(0,0,0,.85), 0 8px 24px -14px rgba(0,0,0,.75);
  }
  .notif-sibuk-teks > span:not(.titik-sibuk) { color: #a2b3c8; }
  .inti-sibuk { color: #9ccbef; background: #15283c; box-shadow: inset 0 0 0 1px #27496b; }
}