/* public/tpi.css — tampilan bersama seluruh halaman TPI Digital
 *
 * Satu berkas untuk semua halaman, supaya tombol, kotak pesan, tabel,
 * dan label status berarti sama di layar mana pun. Pengguna baru belajar
 * satu kali: tombol teal penuh = langkah utama, kotak hijau = berhasil,
 * kotak merah = perlu diperbaiki.
 *
 * Warna tema diambil dari logo TPI Digi Lebak: arang gelap untuk kepala
 * halaman, teal lambang untuk tombol dan tautan, emas tulisan "TPI Digi"
 * untuk sentuhan kecil. Emas sengaja hemat - hanya di kepala halaman -
 * supaya tidak bersaing dengan warna status (hijau/merah/kuning).
 */

:root {
  --bg: #eef2f2;
  --kartu: #ffffff;
  --ink: #172427;
  --ink-soft: #59696c;
  --ink-pudar: #8a9899;
  --rule: #d8e1e1;
  --rule-lembut: #e8eeee;
  --surface: #f4f7f7;

  /* Teal logo (#639093) terlalu muda untuk tulisan putih di tombol.
     Versi yang lebih pekat ini lolos kontras 4.5:1. */
  --accent: #3a6f73;
  --accent-gelap: #2b5558;
  --accent-muda: #e5efef;
  --accent-garis: #c4dbdb;
  --accent-sedang: #8fb8ba;
  --kepala: #17181d;

  --emas: #c0a879;
  --emas-terang: #e2cb98;
  --teal-terang: #9fcecf;

  --ok: #1f6b43;
  --ok-bg: #e5f3eb;
  --ok-garis: #b9dcc8;
  --err: #a1352a;
  --err-bg: #fbeae7;
  --err-garis: #edc3bd;
  --warn: #85590c;
  --warn-bg: #fbf2de;
  --warn-garis: #ead7a8;

  --radius: 10px;
  --radius-kecil: 7px;
  --bayang: 0 1px 2px rgba(15, 45, 58, 0.05), 0 2px 8px rgba(15, 45, 58, 0.05);
}

* { box-sizing: border-box; }

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

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
  background: var(--bg);
  font-size: 15px;
}

/* Lambang samar di pojok kanan bawah layar. Letaknya di belakang kartu,
   jadi hanya tampak di sela-sela - tidak pernah menutupi angka atau
   tulisan. Diam di tempat saat halaman digulir. */
body::after {
  content: "";
  position: fixed;
  right: -3.5rem;
  bottom: -2.5rem;
  width: min(24rem, 62vw);
  aspect-ratio: 154.5 / 186.4;
  background: url("logo-tpi.svg") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}

a { color: var(--accent); }

/* ------------------------------------------------------------------
   Kerangka halaman
   ------------------------------------------------------------------ */

.halaman {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.4rem 1.1rem 4rem;
}
.halaman.sempit { max-width: 36rem; }
.halaman.sedang { max-width: 62rem; }

.kepala-halaman {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.8rem 1.2rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.kepala-halaman h1 { margin: 0; }
.kepala-halaman .sub { margin: 0.2rem 0 0; color: var(--ink-soft); max-width: 62ch; }
.kepala-halaman .aksi { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kepala-halaman .aksi button { margin: 0; }

h1 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
h2 {
  font-size: 1.05rem;
  margin: 1.8rem 0 0.7rem;
  display: flex; align-items: center; gap: 0.5rem;
}
h3 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; }
h4 { font-size: 0.9rem; margin: 1rem 0 0.3rem; }

p.info, span.info, .info {
  font-size: 0.86rem;
  color: var(--ink-soft);
}
p.info { margin: 0 0 0.8rem; max-width: 75ch; }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--rule-lembut);
  border-radius: 4px;
  padding: 0 0.25rem;
}

/* ------------------------------------------------------------------
   Kepala aplikasi (dibuat tpi.js)
   ------------------------------------------------------------------ */

.app-kepala {
  background: var(--kepala);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
/* Garis emas tipis yang memudar di kedua ujung - meniru garis di kiri
   dan kanan tulisan "DINAS PERIKANAN" pada logo. */
.app-kepala::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 168, 121, 0.6) 18%, rgba(192, 168, 121, 0.6) 82%, transparent);
  pointer-events: none;
}
.app-kepala-isi {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.6rem;
}
.merek {
  display: flex; align-items: center; gap: 0.55rem;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.merek img { height: 2.3rem; width: auto; flex-shrink: 0; display: block; }
.merek b { display: block; font-size: 1.02rem; line-height: 1.15; letter-spacing: 0.01em; color: var(--emas-terang); font-weight: 700; white-space: nowrap; }
.merek b span { color: var(--teal-terang); font-weight: 400; }
.merek small { display: block; font-size: 0.72rem; color: rgba(255, 255, 255, 0.62); line-height: 1.2; }

.app-nav { display: flex; align-items: center; gap: 0.15rem; flex: 1; min-width: 0; }
.app-nav a, .nav-grup > button {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 0.45rem 0.7rem;
  border-radius: 7px;
  white-space: nowrap;
  background: none;
  border: none;
  margin: 0;
  font-weight: 500;
  min-height: 0;
  cursor: pointer;
}
.app-nav a:hover, .nav-grup > button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.app-nav a[aria-current="page"], .nav-grup.aktif > button {
  background: rgba(255, 255, 255, 0.09);
  color: var(--emas-terang);
  font-weight: 600;
}
.nav-grup { position: relative; }
.nav-grup > button::after { content: "▾"; margin-left: 0.3rem; font-size: 0.7rem; opacity: 0.8; }
.nav-grup-isi {
  display: none;
  position: absolute; top: calc(100% + 0.35rem); left: 0;
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(15, 45, 58, 0.18);
  min-width: 13rem; padding: 0.35rem;
}
.nav-grup.buka .nav-grup-isi { display: block; }
.nav-grup-isi a {
  display: block; color: var(--ink); padding: 0.5rem 0.7rem; border-radius: 6px;
}
.nav-grup-isi a small { display: block; color: var(--ink-soft); font-size: 0.74rem; font-weight: 400; white-space: normal; }
.nav-grup-isi a:hover { background: var(--accent-muda); color: var(--ink); }
.nav-grup-isi a[aria-current="page"] { background: var(--accent-muda); color: var(--accent-gelap); }

.pengguna { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; flex-shrink: 0; }
.avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(159, 206, 207, 0.14); color: var(--teal-terang);
  box-shadow: inset 0 0 0 1px rgba(159, 206, 207, 0.3);
  display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
}
.pengguna-nama { line-height: 1.15; }
.pengguna-nama b { display: block; font-size: 0.84rem; font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pengguna-nama small { display: block; font-size: 0.72rem; opacity: 0.75; }
.pengguna button.keluar {
  margin: 0; background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.8rem; padding: 0.3rem 0.7rem; min-height: 0;
}
.pengguna button.keluar:hover { background: rgba(255, 255, 255, 0.12); }

.menu-toggle {
  display: none;
  margin: 0 0 0 auto; background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35); min-height: 0;
  padding: 0.35rem 0.7rem; font-size: 0.85rem;
}
.menu-toggle:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 60rem) {
  .app-kepala-isi { flex-wrap: wrap; gap: 0 0.6rem; padding: 0.35rem 1rem; }
  .menu-toggle { display: inline-flex; }
  .app-nav, .pengguna { display: none; }
  .app-kepala.buka .app-nav {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; padding: 0.4rem 0 0.2rem; gap: 0.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 0.35rem;
  }
  .app-kepala.buka .pengguna {
    display: flex; flex-basis: 100%; margin: 0;
    padding: 0.6rem 0 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .app-kepala.buka .pengguna button.keluar { margin-left: auto; }
  .app-nav a, .nav-grup > button { padding: 0.6rem 0.7rem; text-align: left; width: 100%; }
  .nav-grup > button { justify-content: flex-start; }
  .nav-grup > button::after { margin-left: auto; }
  .nav-grup-isi {
    position: static; box-shadow: none; border: none; background: transparent;
    padding: 0 0 0 0.8rem; min-width: 0;
  }
  .nav-grup-isi a { color: rgba(255, 255, 255, 0.86); }
  .nav-grup-isi a small { color: rgba(255, 255, 255, 0.6); }
  .nav-grup-isi a:hover, .nav-grup-isi a[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
}

@media (max-width: 60rem) {
  .app-kepala.sederhana .app-kepala-isi { flex-wrap: nowrap; }
  .app-kepala.sederhana .pengguna { display: flex; margin-left: auto; }
  .app-kepala.sederhana .avatar { display: none; }
  .app-kepala.sederhana .pengguna-nama b { max-width: 9rem; }
}

/* Pesan dari halaman sebelumnya, mis. "halaman itu bukan untuk peran Anda" */
.pesan-singgah { max-width: 76rem; margin: 1rem auto 0; padding: 0 1.1rem; }
.pesan-singgah .kotak { margin: 0; display: flex; gap: 0.6rem; align-items: flex-start; }
.pesan-singgah .kotak button { margin: 0 0 0 auto; padding: 0 0.5rem; min-height: 0; background: none; border: none; font-size: 1.1rem; line-height: 1; color: inherit; }

/* ------------------------------------------------------------------
   Kartu dan bagian
   ------------------------------------------------------------------ */

fieldset, .kartu-panel, .panel {
  background: var(--kartu);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  margin: 0 0 1rem;
  padding: 1rem 1.15rem 1.15rem;
  min-width: 0;
}
legend {
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
  padding: 0.15rem 0.55rem; margin-left: -0.3rem;
  background: var(--kartu); border: 1px solid var(--rule); border-radius: 999px;
}
fieldset > p.info:first-of-type { margin-top: 0; }
.panel h3 { margin-top: 0; }
.panel h3 .periode, .periode { font-weight: 400; color: var(--ink-soft); }

.judul-kartu {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: -0.1rem 0 0.7rem;
}
.judul-kartu h2, .judul-kartu h3 { margin: 0; }

/* Penjelasan panjang dilipat. Isinya tetap penting, tapi tidak boleh
   menghalangi pengguna yang hanya ingin menyelesaikan pekerjaannya. */
details.bantuan {
  background: var(--accent-muda);
  border: 1px solid var(--accent-garis);
  border-radius: var(--radius);
  margin: 0 0 1rem;
  font-size: 0.87rem;
}
details.bantuan > summary {
  cursor: pointer; list-style: none;
  padding: 0.55rem 0.9rem; font-weight: 600; color: var(--accent-gelap);
  display: flex; align-items: center; gap: 0.45rem;
}
details.bantuan > summary::-webkit-details-marker { display: none; }
details.bantuan > summary::before {
  content: "i"; display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 0.72rem; font-style: italic; font-family: Georgia, serif;
}
details.bantuan > summary::after { content: "Tampilkan"; margin-left: auto; font-weight: 400; font-size: 0.78rem; color: var(--accent); }
details.bantuan[open] > summary::after { content: "Sembunyikan"; }
details.bantuan > div { padding: 0 0.9rem 0.7rem 2.5rem; color: var(--ink); }
details.bantuan p { margin: 0 0 0.55rem; max-width: 80ch; }
details.bantuan ul, details.bantuan ol { margin: 0 0 0.55rem; padding-left: 1.2rem; }

details.panel > summary {
  cursor: pointer; font-size: 0.95rem; font-weight: 600;
}
details.panel[open] > summary { margin-bottom: 0.6rem; }
details.panel > summary::marker { color: var(--ink-soft); }

/* ------------------------------------------------------------------
   Tab
   ------------------------------------------------------------------ */

/* Tab yang tidak muat TURUN ke baris berikutnya, bukan disembunyikan di
   balik geseran ke samping. Tab yang terpotong di tepi layar tidak
   terbaca sebagai pilihan - orang mengira halamannya hanya punya dua tab. */
.tab-bar {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  box-shadow: inset 0 -1px 0 var(--rule);
  margin: 0 0 1.1rem;
}
.tab-bar button {
  margin: 0; border: none; background: none; border-radius: 0;
  padding: 0.6rem 0.9rem; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  border-bottom: 3px solid transparent; white-space: nowrap; min-height: 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.tab-bar button:hover { background: none; color: var(--ink); border-bottom-color: var(--rule); }
.tab-bar button[aria-selected="true"] { color: var(--accent-gelap); font-weight: 600; border-bottom-color: var(--accent); }

/* Di layar sempit tab bergaris bawah yang terbungkus ke dua baris membuat
   garisnya melayang di tengah. Di sana tab berubah menjadi tombol-pil
   yang mengisi baris - bentuk yang tetap rapi berapa pun barisnya. */
@media (max-width: 40rem) {
  .tab-bar { box-shadow: none; gap: 0.4rem; }
  .tab-bar button {
    flex: 1 1 auto; justify-content: center;
    border: 1px solid var(--rule); border-radius: 999px; background: #fff;
    padding: 0.45rem 0.8rem; font-size: 0.86rem;
  }
  .tab-bar button:hover { border-color: #aebcc2; background: #fff; }
  .tab-bar button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
  .tab-bar button[aria-selected="true"] .hitungan { background: #fff; color: var(--warn); }
}
.hitungan {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--warn); color: #fff; font-size: 0.72rem; font-weight: 700;
}
.hitungan:empty { display: none; }

/* ------------------------------------------------------------------
   Langkah bernomor
   ------------------------------------------------------------------ */

.langkah-alur {
  display: flex; gap: 0; margin: 0 0 1.1rem; padding: 0; list-style: none;
  background: var(--kartu); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--bayang); overflow: hidden;
}
.langkah-alur li {
  flex: 1 1 0; display: flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 0.85rem; font-size: 0.84rem; color: var(--ink-soft);
  position: relative; min-width: 0;
}
.langkah-alur li + li { border-left: 1px solid var(--rule-lembut); }
.langkah-alur li .nomor {
  flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 0.8rem;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink-soft);
}
.langkah-alur li b { display: block; color: inherit; font-size: 0.86rem; }
.langkah-alur li small { display: block; font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langkah-alur li.aktif { background: var(--accent-muda); color: var(--accent-gelap); }
.langkah-alur li.aktif .nomor { background: var(--accent); border-color: var(--accent); color: #fff; }
.langkah-alur li.selesai { color: var(--ok); }
.langkah-alur li.selesai .nomor { background: var(--ok-bg); border-color: var(--ok-garis); color: var(--ok); }
.langkah-alur li.selesai .nomor::before { content: "✓"; }
.langkah-alur li.selesai .nomor span { display: none; }
@media (max-width: 44rem) {
  /* Dua kolom, bukan satu: empat langkah yang bertumpuk memakan hampir
     satu layar HP sebelum form pertama terlihat. */
  .langkah-alur { display: grid; grid-template-columns: 1fr 1fr; }
  .langkah-alur li { padding: 0.5rem 0.6rem; gap: 0.45rem; }
  .langkah-alur li + li { border-left: none; }
  .langkah-alur li:nth-child(even) { border-left: 1px solid var(--rule-lembut); }
  .langkah-alur li:nth-child(n+3) { border-top: 1px solid var(--rule-lembut); }
  .langkah-alur li b { font-size: 0.8rem; }
}

/* ------------------------------------------------------------------
   Formulir
   ------------------------------------------------------------------ */

label { display: block; margin: 0.7rem 0 0.25rem; font-size: 0.82rem; font-weight: 600; color: #34464d; }
label .info, label span.info { font-weight: 400; }
label.inline {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 0.35rem 1.1rem 0.35rem 0; font-weight: 500; color: var(--ink);
}

input, select, textarea {
  padding: 0.5rem 0.65rem;
  width: 100%;
  min-height: 2.5rem;
  font-size: 0.92rem;
  font-family: inherit;
  border: 1px solid #c8d3d8;
  border-radius: var(--radius-kecil);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.12s, box-shadow 0.12s;
}
textarea { min-height: 5rem; }
input::placeholder, textarea::placeholder { color: #9aa8ae; }
input:hover, select:hover, textarea:hover { border-color: #aebcc2; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58, 111, 115, 0.2);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface); color: var(--ink-soft); cursor: not-allowed; }
input[type="radio"], input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--accent); }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
input[type="file"] { padding: 0.4rem; background: var(--surface); }

.wajib, label .bintang { color: var(--err); }

button, .tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  min-height: 2.5rem;
  margin: 0.75rem 0.4rem 0 0;
  cursor: pointer;
  border-radius: var(--radius-kecil);
  border: 1px solid #b9c7cd;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
button:hover, .tombol:hover { background: var(--surface); border-color: #9fb0b7; }
button:focus-visible, .tombol:focus-visible { outline: 3px solid rgba(58, 111, 115, 0.38); outline-offset: 1px; }
button.utama, .tombol.utama {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
button.utama:hover, .tombol.utama:hover { background: var(--accent-gelap); border-color: var(--accent-gelap); }
button.bahaya { border-color: var(--err-garis); color: var(--err); font-weight: 600; }
button.bahaya:hover { background: var(--err-bg); border-color: var(--err); }
button.hijau { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
button.hijau:hover { background: #185536; }
button:disabled, button:disabled:hover {
  background: var(--surface); border-color: var(--rule); color: #9aa8ae;
  cursor: not-allowed; font-weight: 500;
}
button.kecil, .aksi-baris button {
  font-size: 0.78rem; padding: 0.22rem 0.55rem; min-height: 1.85rem; margin: 0.1rem 0.25rem 0.1rem 0;
}
button.besar { min-height: 2.9rem; padding: 0.6rem 1.3rem; font-size: 0.95rem; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.9rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0.9rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 0.9rem; }
.baris { display: flex; gap: 0 0.9rem; align-items: flex-end; flex-wrap: wrap; }
.baris > div { flex: 1; min-width: 9rem; }
.baris > div > button { margin-top: 0; }
.tombol-baris { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.9rem; }
.tombol-baris button { margin: 0; }

@media (max-width: 40rem) {
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .halaman { padding: 1rem 0.8rem 3rem; }
  h1 { font-size: 1.25rem; }
}

/* ------------------------------------------------------------------
   Tabel
   ------------------------------------------------------------------ */

.tabel-gulir {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--kartu);
  margin-top: 0.7rem;
  box-shadow: var(--bayang);
}
fieldset .tabel-gulir, .panel .tabel-gulir, .kartu-panel .tabel-gulir, dialog .tabel-gulir, details .tabel-gulir {
  box-shadow: none;
}
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tabel-gulir > table { margin: 0; }
th, td { padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-lembut); }
th {
  background: var(--surface); font-weight: 600; font-size: 0.78rem; color: #3f5259;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #f7fafa; }
td.angka, th.angka { text-align: right; font-variant-numeric: tabular-nums; }
td button { white-space: nowrap; }
td small, th small { color: var(--ink-soft); }
tr.pudar td { color: var(--ink-pudar); }
td[colspan] { color: var(--ink-soft); text-align: center; padding: 1.2rem 0.7rem; }

/* ------------------------------------------------------------------
   Kotak pesan
   ------------------------------------------------------------------ */

.kotak {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-kecil);
  margin-top: 0.75rem;
  font-size: 0.87rem;
  white-space: pre-wrap;
  border: 1px solid transparent;
  border-left-width: 4px;
}
.kotak:empty { display: none; }
/* Pesan teks biasa dari JS boleh memuat pindah baris. Kotak yang berisi
   elemen HTML ditata seperti paragraf biasa - kalau tidak, lekuk baris
   di berkas HTML ikut tampil sebagai baris kosong. */
.kotak:has(*) { white-space: normal; }
.kotak.ok     { color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok-garis);   border-left-color: var(--ok); }
.kotak.err    { color: var(--err);  background: var(--err-bg);  border-color: var(--err-garis);  border-left-color: var(--err); }
.kotak.warn   { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-garis); border-left-color: #c0891f; }
.kotak.netral { color: #34464d; background: var(--surface); border-color: var(--rule); border-left-color: #9fb0b7; }

.hidden { display: none !important; }

/* ------------------------------------------------------------------
   Label status
   ------------------------------------------------------------------ */

.lencana {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.08rem 0.5rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.5;
  color: var(--ink-soft); background: var(--surface); border-color: var(--rule);
}
td .lencana { margin: 0.05rem 0.2rem 0.05rem 0; }
.lencana.aktif, .lencana.ok, .lencana.wajar, .lencana.sehat, .lencana.ketua {
  color: var(--ok); background: var(--ok-bg); border-color: var(--ok-garis);
}
.lencana.mati, .lencana.err, .lencana.menyimpang, .lencana.terkonsentrasi {
  color: var(--err); background: var(--err-bg); border-color: var(--err-garis);
}
.lencana.warn, .lencana.perhatian, .lencana.terkunci, .lencana.admin {
  color: var(--warn); background: var(--warn-bg); border-color: var(--warn-garis);
}
.lencana.dinas, .lencana.biru { color: var(--accent-gelap); background: var(--accent-muda); border-color: var(--accent-garis); }
.lencana.batal, .lencana.petugas { color: var(--ink-soft); background: var(--surface); border-color: var(--rule); }

/* ------------------------------------------------------------------
   Kartu angka
   ------------------------------------------------------------------ */

.kartu-baris, .kpi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.7rem;
  margin: 0 0 1rem;
  padding: 0;
}
.kartu, .kpi > div {
  background: var(--kartu);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  padding: 0.75rem 0.9rem;
  min-width: 0;
}
.kartu dt, .kpi dt { font-size: 0.76rem; color: var(--ink-soft); margin: 0; }
.kartu dd, .kpi dd {
  margin: 0.2rem 0 0; font-size: 1.2rem; font-weight: 700;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   Dialog
   ------------------------------------------------------------------ */

dialog {
  border: none; border-radius: 14px; padding: 1.2rem 1.3rem;
  max-width: 44rem; width: 94%; color: var(--ink);
  box-shadow: 0 20px 60px rgba(10, 35, 45, 0.3);
}
dialog::backdrop { background: rgba(10, 30, 40, 0.45); }
dialog h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }

/* ------------------------------------------------------------------
   Lain-lain
   ------------------------------------------------------------------ */

.pilih-baris { cursor: pointer; padding: 0.5rem 0.7rem; border: 1px solid var(--rule); border-top: none; font-size: 0.87rem; background: #fff; }
.pilih-baris:first-child { border-top: 1px solid var(--rule); border-radius: var(--radius-kecil) var(--radius-kecil) 0 0; }
.pilih-baris:last-child { border-radius: 0 0 var(--radius-kecil) var(--radius-kecil); }
.pilih-baris:only-child { border-radius: var(--radius-kecil); }
.pilih-baris:hover { background: var(--accent-muda); }

.aksi-baris { white-space: nowrap; }
tr.nonaktif td { color: var(--ink-pudar); }
tr.nonaktif td.aksi-baris, tr.nonaktif td .lencana { color: inherit; }

.kosong-besar {
  text-align: center; padding: 2rem 1rem; color: var(--ink-soft);
  border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--kartu);
}
.kosong-besar b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 0.25rem; }

.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 55rem) { .dua-kolom { grid-template-columns: 1fr; } }

/* Kaki halaman: lambang kecil + nama, diapit dua garis tipis seperti
   baris "DINAS PERIKANAN" di logo. Sengaja pudar - penanda, bukan isi. */
.app-kaki {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  max-width: 76rem; margin: -2rem auto 0; padding: 0 1.1rem 1.8rem;
  color: var(--ink-pudar); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.app-kaki::before, .app-kaki::after {
  content: ""; flex: 0 1 4rem; height: 1px; background: currentColor; opacity: 0.45;
}
.app-kaki img { height: 1.05rem; width: auto; opacity: 0.75; }
.app-kaki span { white-space: nowrap; }
@media (max-width: 30rem) {
  .app-kaki { gap: 0.5rem; font-size: 0.62rem; letter-spacing: 0.1em; }
}

@media print {
  .app-kepala, .app-kaki, .tab-bar, details.bantuan, button { display: none !important; }
  body::after { display: none; }
  body { background: #fff; }
  fieldset, .panel, .kartu, .tabel-gulir { box-shadow: none; }
}