/* =========================================================
   MONFIS — design tokens
   Palet & tipografi sengaja beda dari portal pemerintah:
   teal tua + amber pudar (bukan navy+kuning), Fraunces buat
   judul (nuansa dokumen/hukum), IBM Plex buat UI & angka.
   ========================================================= */

:root {
  --color-primary:       #0B4F4A;
  --color-primary-dark:  #073431;
  --color-accent:        #C08B2E;
  --color-accent-light:  #E8C77A;
  --color-bg:            #F7F6F2;
  --color-surface:       #FFFFFF;
  --color-text:          #1F2A2E;
  --color-text-muted:    #5C6B6A;
  --color-border:        #E1DED4;

  /* Tabel — ditimpa blok :root dari pengaturan Tampilan (App\Libraries\Theme). */
  --table-head-bg: #F7F6F2;
  --table-head-fg: #1F2A2E;
  --table-foot-bg: #F7F6F2;
  --table-foot-fg: #5C6B6A;
  --table-stripe:  #FBFAF7;

  --dot-teal:  #0B4F4A;
  --dot-amber: #C08B2E;
  --dot-clay:  #A5573D;
  --dot-moss:  #4C7A6B;
  --dot-ink:   #33424A;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(31, 42, 46, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 42, 46, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.text-accent { color: var(--color-accent); }

/* ---------- Nav ---------- */

.app-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.app-nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.app-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.app-nav__brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
}

.app-nav__brand-accent { color: var(--color-accent); }

/* Menu mengisi ruang sisa antara brand dan akun. min-width:0 wajib: tanpa itu
   flex item menolak menyusut di bawah lebar isinya, dan menu mendorong area
   akun keluar alih-alih melipat kelebihannya ke "Lainnya". */
.app-nav__menu {
  flex: 1 1 auto;
  min-width: 0;
}

.app-nav__menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;

  /* Tetap satu baris apa pun jumlah menunya. Yang tidak muat dipindahkan
     app.js ke menu "Lainnya" — bukan digulir, karena panel submenu diposisikan
     terhadap induknya dan wadah yang bisa digulir akan memotongnya. */
  flex-wrap: nowrap;
}

/* [hidden] harus menang atas display flex/list-item — inilah cara app.js
   menyembunyikan menu yang dipindahkan ke "Lainnya". */
.app-nav__item[hidden] { display: none; }

.app-nav__item { position: relative; }

.app-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.app-nav__link:hover { background: var(--color-bg); }

.app-nav__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot--teal  { background: var(--dot-teal); }
.dot--amber { background: var(--dot-amber); }
.dot--clay  { background: var(--dot-clay); }
.dot--moss  { background: var(--dot-moss); }
.dot--ink   { background: var(--dot-ink); }

.app-nav__caret { color: var(--color-text-muted); transition: transform 0.15s ease; }
.app-nav__item.has-children:hover .app-nav__caret { transform: rotate(180deg); }

.app-nav__mega {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 8px;
  left: 0;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 50;
}

/* Jarak 8px di atas panel hanya jarak pandang, bukan celah yang boleh memutus
   hover. Tanpa jembatan ini kursor melewati pita mati saat turun dari menu
   induk ke submenu: sesaat ia tidak berada di atas induk maupun panel, dan
   panelnya hilang sebelum sempat diklik. Pseudo-element ini bagian dari panel,
   yang bagian dari <li> induk, jadi menyentuhnya membuat :hover tetap hidup. */
.app-nav__mega::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.app-nav__item.has-children:hover .app-nav__mega,
.app-nav__item.has-children.is-open .app-nav__mega {
  display: block;
}

.app-nav__mega ul { display: block; }

.app-nav__mega a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.app-nav__mega a:hover { background: var(--color-bg); color: var(--color-primary-dark); }

.app-nav__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.app-nav__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  margin: 4px 0;
}

/* ---------- Dashboard hero ---------- */

.app-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.dashboard__hero {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

.dashboard__greeting { color: var(--color-text-muted); margin: 0 0 8px; }

.dashboard__title {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--color-primary-dark);
}

.dashboard__desc { color: var(--color-text-muted); margin: 0 0 28px; }

.dashboard__quicklinks { display: flex; flex-direction: column; gap: 4px; }

.quicklink {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 4px;
  border-top: 1px solid var(--color-border);
}

.quicklink:first-child { border-top: none; }

.quicklink__icon { font-size: 1.2rem; }

.quicklink__text strong { display: block; font-size: 0.95rem; }
.quicklink__text small { color: var(--color-text-muted); font-size: 0.82rem; }

/* ---------- Banner carousel ---------- */

.dashboard__banner {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  min-height: 320px;
  overflow: hidden;
}

.dashboard__banner-track { position: relative; height: 100%; }

.dashboard__banner-slide {
  position: absolute;
  inset: 0;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.dashboard__banner-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dashboard__banner-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: 10px;
}

.dashboard__banner-slide h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin: 0 0 10px;
  max-width: 26ch;
}

.dashboard__banner-slide p { max-width: 42ch; color: rgba(255,255,255,0.85); margin: 0; }

.dashboard__banner-dots {
  position: absolute;
  bottom: 20px;
  left: 36px;
  display: flex;
  gap: 6px;
}

.banner-dot {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  border: none;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
}

.banner-dot.is-active { background: var(--color-accent-light); }

/* ---------- Summary cards ---------- */

.dashboard__cards {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.summary-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.summary-card__icon { font-size: 1.3rem; }
.summary-card strong { font-size: 0.98rem; }
.summary-card p { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; }

/* ---------- Footer ---------- */

.app-footer {
  border-top: 1px solid var(--color-border);
  padding: 20px 24px;
}

.app-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .app-nav__inner { position: relative; }
  .app-nav__menu { display: none; }
  .app-nav__burger { display: block; }

  /* Tombol burger memasang .is-open — tanpa aturan ini kelasnya terpasang dan
     tidak terjadi apa-apa, sehingga menu tidak pernah bisa dibuka di ponsel. */
  .app-nav__menu.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 24px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    z-index: 45;
  }

  /* Di layar sempit menu ditumpuk ke bawah, jadi aturan satu baris tidak
     berlaku — yang dijaga satu baris hanya bilah nav di layar lebar. */
  .app-nav__menu.is-open ul { flex-direction: column; align-items: stretch; gap: 2px; }

  /* Submenu ikut mengalir di tempatnya, bukan melayang: panel melayang di
     dalam wadah yang bisa digulir akan terpotong. */
  .app-nav__menu.is-open .app-nav__mega {
    position: static;
    margin: 0 0 4px 1.1rem;
    min-width: 0;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 2px 8px;
  }
  .app-nav__menu.is-open .app-nav__mega::before { content: none; }

  .dashboard__hero { grid-template-columns: 1fr; }
  .dashboard__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .dashboard__cards { grid-template-columns: 1fr; }
  .dashboard__title { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard__banner-slide { transition: none; }
  .summary-card { transition: none; }
}

/* =========================================================
   Auth, admin, modal, peta — ditambahkan untuk modul admin
   ========================================================= */

/* --- tombol --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 500; line-height: 1;
  padding: .55rem .95rem; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--solid  { background: var(--color-primary); color: #fff; }
.btn--solid:hover  { background: var(--color-primary-dark); }
.btn--ghost  { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover  { border-color: var(--color-primary); color: var(--color-primary); }
.btn--danger { background: #9B2C2C; color: #fff; }
.btn--danger:hover { background: #7A2222; }
.btn--mini   { padding: .3rem .6rem; font-size: .8rem; border-radius: 8px;
               background: var(--color-bg); border-color: var(--color-border); }
.btn--mini:hover { border-color: var(--color-primary); }
.btn.btn--danger { background: #9B2C2C; color: #fff; }
.btn.btn--danger:hover, .btn.btn--danger:focus { background: #7A2222; color: #fff; }
.btn--block  { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* --- akun di nav --- */
/* flex-shrink 0: area akun tidak boleh ikut menyusut, kalau tidak nama
   penggunanya terpotong justru saat menunya banyak. */
.app-nav__account { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-shrink: 0; }

.app-nav__akun { position: relative; }

.app-nav__akun-tombol {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  font: inherit; font-size: .9rem; font-weight: 500; color: var(--color-text);
  cursor: pointer;
}
.app-nav__akun-tombol:hover { background: var(--color-bg); }
.app-nav__akun-tombol[aria-expanded="true"] { background: var(--color-bg); border-color: var(--color-primary); }
.app-nav__akun-tombol[aria-expanded="true"] .app-nav__caret { transform: rotate(180deg); }

/* Nama panjang dipotong, bukan melebarkan bilah dan mendorong menu melipat. */
.app-nav__akun-nama { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-nav__akun-menu {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  right: 0;
  min-width: 190px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 60;
}
.app-nav__akun-menu[hidden] { display: none; }

.app-nav__akun-menu a,
.app-nav__akun-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 6px;
  border: 0; background: none; font: inherit; font-size: .9rem;
  color: var(--color-text); cursor: pointer;
}
.app-nav__akun-ikon { flex: none; color: var(--color-text-muted); }
.app-nav__akun-menu a:hover .app-nav__akun-ikon,
.app-nav__akun-menu button:hover .app-nav__akun-ikon { color: inherit; }
.app-nav__akun-menu a:hover,
.app-nav__akun-menu button:hover { background: var(--color-bg); color: var(--color-primary-dark); }
.app-nav__akun-menu form { margin: 0; border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 4px; }

.badge, .badge-admin {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .12rem .4rem; border-radius: 999px;
  background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.badge-admin { background: var(--color-accent-light); border-color: var(--color-accent); color: var(--color-primary-dark); }

/* --- halaman profil --- */
.profil { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .1rem 1rem; margin: 1.2rem 0; }
.profil dt { padding: .55rem 0; color: var(--color-text-muted); font-size: .88rem; border-top: 1px solid var(--color-border); }
.profil dd { padding: .55rem 0; margin: 0; border-top: 1px solid var(--color-border); }
.profil__kosong { color: var(--color-text-muted); font-size: .88rem; }

@media (max-width: 620px) {
  .profil { grid-template-columns: 1fr; }
  .profil dd { border-top: 0; padding-top: 0; }
}

/* --- mega menu 3 level --- */
.app-nav__mega-list { list-style: none; margin: 0; padding: 0; }
.app-nav__mega-list .app-nav__mega-list { margin-left: .9rem; border-left: 1px solid var(--color-border); padding-left: .7rem; }
.app-nav__mega-item > a { display: block; padding: .35rem .2rem; font-size: .92rem; border-radius: 6px; }
.app-nav__mega-item > a:hover { background: var(--color-bg); color: var(--color-primary); }
.app-nav__mega-item > a.is-group { font-weight: 600; color: var(--color-text-muted); cursor: default; }

/* Grup terlipat. list-style:none dan ::-webkit-details-marker dua-duanya perlu:
   yang pertama untuk mesin render modern, yang kedua untuk Safari/WebKit lama
   yang masih menggambar segitiganya lewat pseudo-element sendiri. */
.app-nav__mega-grup > summary {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .2rem; font-size: .92rem; font-weight: 600;
  color: var(--color-text-muted); border-radius: 6px;
  cursor: pointer; list-style: none;
}
.app-nav__mega-grup > summary::-webkit-details-marker { display: none; }
.app-nav__mega-grup > summary:hover { background: var(--color-bg); color: var(--color-primary); }

/* Caret sendiri, bukan segitiga bawaan, supaya arahnya bisa diputar saat
   terbuka — itu satu-satunya penanda visual bahwa isinya masih ada. */
.app-nav__mega-grup > summary::before {
  content: ''; flex: none;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .15s ease;
}
.app-nav__mega-grup[open] > summary::before { transform: rotate(90deg); }

/* Grup yang punya URL sendiri: tautannya mengisi baris summary tanpa menambah
   padding kedua. */
.app-nav__mega-grup > summary > a { padding: 0; font-weight: inherit; color: inherit; }

/* --- modal --- */
body.is-modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1.2rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(31, 42, 46, .45); backdrop-filter: blur(2px); }
.modal__panel {
  position: relative; width: min(460px, 100%); max-height: 90vh; overflow: auto;
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: 1.6rem; box-shadow: var(--shadow-md);
}
.modal__panel--wide { width: min(720px, 100%); }
.modal__panel--narasi { width: min(860px, 100%); }
.modal__close {
  position: absolute; top: .6rem; right: .7rem; border: 0; background: none;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text-muted);
}
.modal__title { font-family: var(--font-display); margin: 0 0 .3rem; font-size: 1.3rem; }
.modal__desc  { margin: 0 0 1rem; color: var(--color-text-muted); font-size: .9rem; }
.modal__aksi  { display: flex; justify-content: flex-end; gap: .6rem; }

/* --- form --- */
.form__row { margin-bottom: .85rem; display: flex; flex-direction: column; gap: .3rem; }
.form__row label { font-size: .85rem; font-weight: 500; }
.form__row--inline { flex-direction: row; flex-wrap: wrap; gap: .9rem; align-items: center; }
.form__row--inline label { font-weight: 400; display: inline-flex; align-items: center; gap: .35rem; }
.form__row--inline label.is-disabled { opacity: .45; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.form input[type=text], .form input[type=password], .form input[type=email],
.form input[type=number], .form select, .form textarea {
  font: inherit; padding: .5rem .65rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); color: inherit; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--color-accent-light); outline-offset: 1px; border-color: var(--color-accent);
}
.form input[readonly] { background: var(--color-bg); color: var(--color-text-muted); }
.form__error {
  margin: .3rem 0 .8rem; padding: .5rem .7rem; border-radius: var(--radius-md);
  background: #FDECEC; border: 1px solid #F3C2C2; color: #8A2020; font-size: .87rem;
}

/* --- halaman --- */
.page { max-width: 1100px; margin: 0 auto; padding: 2rem 1.2rem 3rem; }
.page--narrow { max-width: 480px; }
.page__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page__title { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 .3rem; }
.page__hint { color: var(--color-text-muted); font-size: .9rem; margin: .2rem 0 1.2rem; }
.page__section { margin-top: 2.4rem; }
.page__section h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 0; }
.notice { padding: .7rem .9rem; border-radius: var(--radius-md); font-size: .9rem; margin: 0 0 1rem; }
.notice--warn { background: #FDF3DF; border: 1px solid var(--color-accent-light); color: #6B4A08; }
.rules { font-size: .87rem; color: var(--color-text-muted); padding-left: 1.1rem; margin: 0 0 1.2rem; }

/* --- daftar akses menu --- */
.access-tree { list-style: none; margin: 0 0 1rem; padding: 0; max-height: 45vh; overflow: auto;
               border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .6rem; }
.access-tree__item { padding-left: calc(var(--depth, 0) * 1.3rem); }
.access-tree__item label { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem 0; font-size: .9rem; }

/* --- DataTables: seluruh warnanya lewat variabel supaya bisa diatur admin --- */
.table.display { border-collapse: collapse; font-size: .9rem; }
table.dataTable thead th {
  background: var(--table-head-bg); color: var(--table-head-fg);
  border-bottom: 1px solid var(--color-border) !important;
  font-weight: 600; text-align: left;
}
table.dataTable tfoot th, table.dataTable tfoot td {
  background: var(--table-foot-bg); color: var(--table-foot-fg);
  border-top: 1px solid var(--color-border); font-weight: 500; text-align: left;
}
/* Baris Total. Tebal dan bergaris atas ganda supaya tidak terbaca sebagai
   baris data terakhir — ia satu-satunya baris di tabel ini yang tidak mewakili
   satu isian pun.
   Selectornya TIDAK disandarkan pada .dataTable: kelas itu baru dipasang
   DataTables saat berjalan, jadi barisnya akan tampil polos setiap kali tabel
   dirender tanpanya. */
tr.tabel-total td {
  font-weight: 700;
  border-top: 2px solid var(--color-border) !important;
  background: var(--table-foot-bg); color: var(--table-foot-fg);
}

td.kol-angka, th.kol-angka { text-align: right; white-space: nowrap; }

table.dataTable tbody td { border-bottom: 1px solid var(--color-border); vertical-align: middle; }
table.dataTable tbody tr:hover td { background: var(--table-stripe); }
table.dataTable tbody tr:nth-child(even) td { background: var(--table-stripe); }
table.dataTable tbody tr:nth-child(even):hover td { background: var(--color-bg); }
/* Label yang hanya dibacakan pembaca layar. Setiap kontrol butuh label; yang
   sudah jelas dari ikon di sebelahnya tidak perlu ikut memakan ruang. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Kontrol di luar .form — toolbar tabel, filter dimensi, filter periode —
   memakai bentuk yang sama. Ditulis sekali: kontrol yang tampilannya berbeda
   antar bagian terbaca seperti dua aplikasi yang ditempel jadi satu. */
.filter-bar select,
.filter-dimensi input,
.tabel-alat input,
.tabel-alat select {
  font: inherit; padding: .45rem .6rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.filter-bar select:hover,
.filter-dimensi input:hover,
.tabel-alat input:hover,
.tabel-alat select:hover { border-color: var(--color-accent); }

.filter-bar select:focus,
.filter-dimensi input:focus,
.tabel-alat input:focus,
.tabel-alat select:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* Header tabel data rata TENGAH. Kolomnya hampir seluruhnya besaran, dan
   judul yang rata kiri di atas angka rata kanan membuat mata harus melompat
   untuk mencocokkan keduanya.

   SELEKTORNYA SENGAJA MEMUAT .display. DataTables punya aturan sendiri dengan
   selektor yang sama persis — table.dataTable thead th { text-align: left } —
   dan berkas CSS-nya dimuat SESUDAH app.css, jadi pada kekhususan yang seri ia
   yang menang. Satu kelas tambahan cukup untuk membalikkannya.

   Panah urut dilepas dari aliran flex header. Bawaan DataTables 2 menaruhnya
   sebagai saudara sebaris judul, sehingga judulnya terpusat pada sisa lebar —
   bukan pada lebar kolomnya — dan setiap judul tergeser ke kiri sebesar
   setengah panah. Yang tanpa panah, seperti kolom Aksi, tidak tergeser sama
   sekali, dan barisan header itu jadi terlihat goyah. */
table.dataTable.display thead th,
table.dataTable.display thead td { position: relative; text-align: center; }

table.dataTable.display thead th div.dt-column-header,
table.dataTable.display thead td div.dt-column-header { justify-content: center; }

table.dataTable.display thead th div.dt-column-order {
  position: absolute; right: .3rem; top: 0; bottom: 0; width: var(--dt-order-arrow-width);
}

/* Kolom Aksi tidak ikut melebar mengikuti isinya. */
table.dataTable td.kol-aksi, table.dataTable th.kol-aksi { width: 1%; white-space: nowrap; text-align: center; }

/* ---- Toolbar tabel: pencarian dan jumlah baris, keduanya buatan sendiri ---- */

.tabel-alat {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin: .6rem 0 .2rem;
}

.tabel-alat__cari { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.tabel-alat__cari input { width: 100%; padding-left: 2.2rem; }
.tabel-alat__ikon {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); pointer-events: none;
}

.tabel-alat__baris { display: flex; align-items: center; gap: .45rem; }
.tabel-alat__baris label { font-size: .8rem; color: var(--color-text-muted); }
.tabel-alat__baris select { min-width: 5rem; }

/* ---- Kaki tabel: keterangan jumlah dan tombol halaman ---- */

.tabel-kaki {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin: .1rem 0 .4rem;
}
.tabel-kaki__info { margin: 0; font-size: .82rem; color: var(--color-text-muted); }
.tabel-kaki__nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.tabel-kaki__nav button {
  min-width: 2.1rem; padding: .3rem .55rem; font-size: .82rem; line-height: 1.4;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tabel-kaki__nav button:hover:not(:disabled) { background: var(--table-stripe); border-color: var(--color-primary); }
.tabel-kaki__nav button:disabled { opacity: .45; cursor: default; }
.tabel-kaki__nav button.is-kini {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600;
}

/* ---- Kerangka pemuatan ----
   Ditampilkan menimpa tabel selama permintaan berjalan. Tanpa ini, berpindah
   halaman terlihat seperti tabel yang mendadak kosong lalu terisi lagi. */

.tabel-gulir { position: relative; }
.table.is-memuat tbody { opacity: .25; transition: opacity .15s ease; }

.tabel-kerangka {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: .5rem; padding: .6rem .2rem;
  background: var(--color-surface);
  pointer-events: none;
}

/* WAJIB. display:flex di atas mengalahkan display:none bawaan atribut hidden,
   jadi tanpa baris ini kerangkanya tidak pernah hilang — ia terus berkilau di
   atas tabel yang sudah selesai dimuat. */
.tabel-kerangka[hidden] { display: none; }
.tabel-kerangka span {
  display: block; height: 1.05rem; border-radius: 6px;
  background: linear-gradient(90deg, var(--color-border) 25%, var(--table-stripe) 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: tabel-kilau 1.1s linear infinite;
}
.tabel-kerangka span:nth-child(even) { width: 82%; }

@keyframes tabel-kilau {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Animasi dimatikan buat yang memintanya lewat setelan sistem. */
@media (prefers-reduced-motion: reduce) {
  .tabel-kerangka span { animation: none; }
}

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

table.dataTable td.dt-empty, table.dataTable td.dataTables_empty { padding: 0; }

.tabel-kosong {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 2.2rem 1rem; text-align: center; color: var(--color-text-muted);
}
.tabel-kosong__ikon { color: var(--color-border); line-height: 0; margin-bottom: .2rem; }
.tabel-kosong strong { font-size: .95rem; color: inherit; font-weight: 600; }
.tabel-kosong small { font-size: .8rem; max-width: 30rem; }

/* ---- Menu aksi per baris ---- */

.baris-aksi { position: relative; display: inline-block; }

.btn--ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; padding: 0;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--color-text-muted); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--ikon:hover { background: var(--table-stripe); color: inherit; border-color: var(--color-border); }

.baris-menu {
  position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20;
  min-width: 9.5rem; padding: .25rem;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); box-shadow: 0 8px 24px rgb(0 0 0 / .12);
  text-align: left;
}
.baris-menu button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .4rem .55rem; border: 0; border-radius: 7px;
  background: transparent; color: inherit; font-size: .85rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.baris-menu button:hover { background: var(--table-stripe); }
.baris-menu button.is-bahaya { color: var(--color-danger, #b3261e); }
.baris-menu button.is-bahaya:hover { background: var(--color-danger-light, #fdecea); }

.dt-container { margin-top: .8rem; }
.dt-search input, .dt-length select {
  font: inherit; padding: .35rem .5rem; border: 1px solid var(--color-border); border-radius: 8px;
}
.dt-paging button.current { background: var(--color-primary) !important; color: #fff !important; border-radius: 8px; }
.row-actions { display: flex; gap: .3rem; flex-wrap: wrap; }

/* --- peta --- */
.map { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; }
.app-nav__logout { display: inline; margin: 0; }

/* --- halaman pengaturan tampilan --- */
.page--narrow-wide { max-width: 900px; }
.tema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem 1.2rem; }
.tema-item { display: flex; flex-direction: column; gap: .3rem; }
.tema-item--lebar { grid-column: 1 / -1; }
.tema-item label { font-size: .85rem; font-weight: 500; }
.tema-warna { display: flex; gap: .4rem; align-items: center; }
.tema-warna input[type=color] {
  width: 42px; height: 38px; padding: 2px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.tema-warna input[type=text] { font-family: var(--font-mono); text-transform: uppercase; }
.tema-bawaan { font-size: .75rem; color: var(--color-text-muted); }
.tema-bawaan code { font-family: var(--font-mono); }
.tema-aksi { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.tema-contoh-tabel { width: 100%; margin-top: 1rem; }
.tema-contoh-tabel th, .tema-contoh-tabel td { padding: .5rem .7rem; }

/* --- halaman peta batas wilayah --- */
.page--lebar { max-width: 1200px; }
.wilayah-filter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .8rem; align-items: end; margin-bottom: .8rem;
  padding: .9rem 1rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.wilayah-filter .form__row { margin-bottom: 0; }
.wilayah-filter select:disabled { opacity: .55; cursor: not-allowed; }
.form__row--tombol { justify-content: flex-end; }
.wilayah-status { font-size: .87rem; color: var(--color-text-muted); margin: 0 0 .8rem; min-height: 1.2em; }
.wilayah-status--salah {
  color: #8A2020; background: #FDECEC; border: 1px solid #F3C2C2;
  padding: .5rem .7rem; border-radius: var(--radius-md);
}

/* --- tombol lihat password --- */
.form__password { position: relative; display: flex; }
.form__password input { width: 100%; padding-right: 2.6rem; }
.form__password-toggle {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--color-text-muted);
}
.form__password-toggle:hover { color: var(--color-primary); background: var(--color-bg); }
.form__password-toggle:focus-visible {
  outline: 2px solid var(--color-accent-light); outline-offset: 1px;
}
.form__password-toggle[aria-pressed="true"] { color: var(--color-primary); }

/* --- Bantuan: daftar manual --- */
.manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .8rem;
  margin-top: 1.2rem;
}
.manual-kartu {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
a.manual-kartu:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.manual-kartu__judul { color: var(--color-text); }
.manual-kartu__berkas { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; color: var(--color-primary); }
.manual-kartu__meta { font-size: .8rem; color: var(--color-text-muted); }
.manual-kartu--hilang { opacity: .6; }
.manual-kartu--hilang .manual-kartu__meta { color: var(--color-danger, #b3261e); }

/* --- Bantuan: halaman manual --- */
.manual-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Daftar isi menempel saat digulir; manualnya panjang dan tanpa ini pembaca
   harus menggulir balik ke atas hanya untuk pindah bagian. */
.manual-wadah { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-top: 1rem; }
.manual-toc { position: sticky; top: 1rem; font-size: .86rem; }
.manual-toc__judul { margin: 0 0 .4rem; font-weight: 600; color: var(--color-text-muted); }
.manual-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.manual-toc li a { display: block; padding: .25rem .6rem; color: var(--color-text-muted); border-radius: 0 6px 6px 0; }
.manual-toc li a:hover { background: var(--color-bg); color: var(--color-primary); }

/* minmax(0,1fr) di atas: tanpa itu blok kode panjang memaksa kolom melebar dan
   seluruh halaman ikut bisa digeser ke samping. */
.manual-isi { min-width: 0; line-height: 1.65; }
.manual-isi h1 { font-size: 1.5rem; margin: 1.6rem 0 .6rem; }
.manual-isi h2 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--color-border); }
.manual-isi h3 { font-size: 1.02rem; margin: 1.3rem 0 .4rem; }
.manual-isi h4, .manual-isi h5, .manual-isi h6 { font-size: .95rem; margin: 1rem 0 .3rem; }
.manual-isi h2, .manual-isi h3 { scroll-margin-top: 1rem; }
.manual-isi p, .manual-isi ul, .manual-isi ol { margin: .6rem 0; }
.manual-isi li { margin: .25rem 0; }
.manual-isi hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.6rem 0; }
.manual-isi blockquote {
  margin: .8rem 0; padding: .6rem .9rem;
  border-left: 3px solid var(--color-accent, var(--color-primary));
  background: var(--color-bg); border-radius: 0 6px 6px 0;
}
.manual-isi code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .87em; padding: .1rem .3rem;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px;
}
.manual-isi pre {
  margin: .8rem 0; padding: .8rem 1rem; overflow-x: auto;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.manual-isi pre code { padding: 0; background: none; border: 0; font-size: .84rem; line-height: 1.55; }

/* Tabel manual bisa selebar apa pun; yang boleh menggulir hanya pembungkusnya,
   bukan halamannya. */
.tabel-gulir { overflow-x: auto; margin: .8rem 0; }
.tabel-gulir table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.tabel-gulir th, .tabel-gulir td { padding: .45rem .7rem; border: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.tabel-gulir th { background: var(--color-bg); font-weight: 600; white-space: nowrap; }

@media (max-width: 900px) {
  .manual-wadah { grid-template-columns: 1fr; }
  .manual-toc { position: static; }
}

/* --- konsol korpus RAG --- */
.korpus-aksi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; align-items: start; margin-bottom: 1.6rem;
  padding: .9rem 1rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.korpus-aksi .form__row { margin-bottom: .6rem; }
.korpus-aksi .page__hint { margin: 0 0 .7rem; }

/* ------------------------------------------- Monfis: filter, tab, foto, chart */

/* Menetap tepat di bawah bar navigasi, yang juga sticky di atasnya. Offsetnya
   ditulis sebagai custom property, bukan angka yang bertebaran: kalau tinggi
   navigasi berubah, hanya baris ini yang perlu ikut. */
:root { --nav-h: 57px; }

.filter-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 30;
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 0 0 1.4rem;
  padding: .8rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.filter-bar__item { display: flex; flex-direction: column; gap: .25rem; }
.filter-bar__item label { font-size: .8rem; color: var(--color-text-muted); }
.filter-bar__item select { min-width: 11rem; }
.filter-bar__hint {
  flex: 1 1 16rem; margin: 0; align-self: center;
  font-size: .82rem; color: var(--color-text-muted);
}

.page__bab {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 1.6rem 0 .8rem;
}

.page__aksi { display: flex; gap: .4rem; flex-wrap: wrap; }

.form__status { align-self: center; font-size: .85rem; color: var(--color-text-muted); }

/* Tab dipilih lewat tombol, bukan <details>: ketiga panel di sini setara dan
   hanya satu yang relevan sekali waktu, sedangkan <details> dipakai di navigasi
   justru supaya beberapa cabang bisa terbuka bersamaan. */
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); }

.tabs__tab {
  appearance: none; cursor: pointer;
  padding: .6rem 1rem; font: inherit; font-size: .92rem;
  color: var(--color-text-muted);
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabs__tab:hover { color: var(--color-primary); }
.tabs__tab.is-aktif { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.tabs__panel { padding-top: .4rem; }

/* Galeri gambar Input Data.
 *
 * Empat tata letak, dan pengisi yang memilih — banyaknya gambar tidak diketahui
 * lebih dulu, dan susunan yang pas untuk dua foto memanjang bukan susunan yang
 * pas untuk enam foto potret. Semuanya memakai auto-fit/minmax, jadi jumlah
 * kolom yang sesungguhnya tetap mengikuti lebar halaman: tata letak "tiga
 * kolom" pada layar sempit turun sendiri jadi dua, lalu satu.
 *
 * Kuncinya (mozaik, dua, tiga, satu) sama persis dengan PetaHalaman::TATA_LETAK
 * dan dengan yang tersimpan di tata_letak_gambar. */
.galeri {
  display: grid;
  gap: .7rem;
  margin: .6rem 0 0;
  grid-auto-rows: 190px;
}

/* Jumlah kolom dipatok, bukan auto-fit: dengan auto-fit, layar 27 inci
   menghasilkan enam kolom dan foto selebar kartu nama — dan "tiga kolom" tidak
   lagi berarti apa pun sebagai pilihan. Yang menyesuaikan lebar halaman adalah
   penurunannya di media query di bawah. */
.galeri--mozaik, .galeri--tiga { grid-template-columns: repeat(3, 1fr); }
.galeri--dua { grid-template-columns: repeat(2, 1fr); }
.galeri--satu { grid-template-columns: 1fr; grid-auto-rows: 420px; }

/* Gambar pertama besar — biasanya foto gedung kantornya, dan itu yang dilihat
   lebih dulu. Hanya berlaku kalau kolomnya memang lebih dari satu; pada layar
   sempit span 2 akan meluber keluar grid.
   dense: tanpa itu, lubang yang ditinggalkan bingkai besar di baris pertama
   dibiarkan menganga sampai baris berikutnya. */
@media (min-width: 821px) {
  .galeri--mozaik { grid-auto-flow: dense; }
  .galeri--mozaik > .galeri__item:first-child { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 1100px) {
  /* Tiga kolom pada lebar segini menyisakan gambar selebar 20 karakter
     keterangan. Pilihannya sendiri tidak diubah — ia kembali tiga kolom di
     layar yang memang cukup. */
  .galeri--mozaik, .galeri--tiga { grid-template-columns: repeat(2, 1fr); }
}

/* Blok gambar berbingkai tunggal — Peta Wilayah pada BAB II. Petanya justru
   bagian yang perlu dibaca, jadi ia tidak pernah dimampatkan jadi sepertiga
   lebar apa pun tata letak yang tersimpan. */
.galeri[data-tunggal] { grid-template-columns: 1fr !important; grid-auto-rows: 460px; }
.galeri[data-tunggal] > .galeri__item:first-child { grid-column: auto !important; grid-row: auto !important; }

.galeri__item {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--table-stripe);
}

.galeri__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Keterangan menumpang di atas gambarnya, bukan di bawah: bingkai galeri
   tingginya seragam, dan kaki setinggi satu baris di dalamnya memotong
   gambarnya sebanyak itu di setiap bingkai. */
.galeri__kaki {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .45rem .6rem; font-size: .78rem; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.galeri__hapus {
  position: absolute; top: .4rem; right: .4rem;
  width: 1.7rem; height: 1.7rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  font-size: 1.1rem; color: #fff;
  background: rgba(0, 0, 0, .55); border: 0; border-radius: 50%;
  opacity: 0; transition: opacity .12s ease;
}

.galeri__item:hover .galeri__hapus,
.galeri__hapus:focus-visible { opacity: 1; }

.galeri__kosong {
  margin: .6rem 0 0; padding: 1.6rem 1rem; text-align: center;
  font-size: .88rem; color: var(--color-text-muted);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface);
}

.galeri-alat {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: .6rem 0 0;
}

.galeri-alat__sisa { font-size: .82rem; color: var(--color-text-muted); }

/* Pemilih tata letak. Ke kanan, memisahkan diri dari tombol unggah: yang satu
   menambah isi, yang lain hanya mengatur tampilannya. */
.galeri-tata { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-left: auto; }
.galeri-tata__label { font-size: .82rem; color: var(--color-text-muted); margin-right: .2rem; }

.galeri-tata__btn {
  appearance: none; cursor: pointer;
  padding: .3rem .6rem; font: inherit; font-size: .8rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}

.galeri-tata__btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

.galeri-tata__btn.is-aktif {
  color: #fff; font-weight: 600;
  background: var(--color-primary); border-color: var(--color-primary);
}

/* Pratinjau sebelum berkas dikirim. Gambarnya dibaca dari komputer pengisi,
   jadi yang tampil di sini belum ada di server sama sekali. */
.pratinjau { display: flex; flex-direction: column; gap: .6rem; margin: .6rem 0; }

.pratinjau__item {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
}

.pratinjau__gambar {
  width: 96px; height: 72px; object-fit: cover; flex-shrink: 0;
  border-radius: var(--radius-md); background: var(--table-stripe);
}

.pratinjau__isi { flex: 1; min-width: 0; }
.pratinjau__nama {
  margin: 0 0 .3rem; font-size: .8rem; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pratinjau__isi input { width: 100%; }

/* Penyunting narasi berformat. Toolbar-nya dirakit penyunting.js, jadi yang di
   bawah ini satu-satunya tempat bentuknya ditentukan. */
.penyunting {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); overflow: hidden;
}

.penyunting__alat {
  display: flex; align-items: center; gap: .15rem; flex-wrap: wrap;
  padding: .35rem .45rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--table-stripe);
}

/* Pemisah antar-grup digambar dengan border, bukan elemen tersendiri: satu
   baris toolbar yang membungkus di layar sempit akan meninggalkan garis
   menggantung di ujung barisnya. */
.penyunting__grup { display: flex; align-items: center; gap: .1rem; padding-right: .35rem; margin-right: .2rem; }
.penyunting__grup + .penyunting__grup { border-left: 1px solid var(--color-border); padding-left: .35rem; }

.penyunting__tombol {
  appearance: none; cursor: pointer;
  display: grid; place-items: center;
  width: 1.85rem; height: 1.85rem; padding: 0;
  color: var(--color-text-muted);
  background: transparent; border: 0; border-radius: var(--radius-md);
}

.penyunting__tombol:hover { color: var(--color-primary); background: var(--color-surface); }
.penyunting__tombol.is-aktif { color: var(--color-primary); background: var(--color-surface); font-weight: 600; }

.penyunting__pilih {
  font: inherit; font-size: .78rem; padding: .2rem .3rem; max-width: 9rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}

.penyunting__area,
.narasi-konten,
.cetak-narasi {
  font-size: .92rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.penyunting__area {
  position: relative;
  min-height: 12rem; padding: .8rem .9rem;
}

.penyunting__area:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.penyunting__area p, .narasi-konten p, .cetak-narasi p { margin: 0 0 .6rem; }
.penyunting__area ul, .penyunting__area ol, .narasi-konten ul, .narasi-konten ol, .cetak-narasi ul, .cetak-narasi ol { margin: 0 0 .6rem; padding-left: 1.6rem; }
.penyunting__area blockquote, .narasi-konten blockquote, .cetak-narasi blockquote {
  margin: 0 0 .6rem; padding: .2rem 0 .2rem .8rem;
  border-left: 3px solid var(--color-border); color: var(--color-text-muted);
}

/* Wadah pratinjau narasi berformat pada modal preview */
.narasi-preview__wadah {
  margin: .4rem 0 1.2rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  max-height: 55vh;
  overflow-y: auto;
  overflow-wrap: break-word;
}

/* Gambar yang disisipkan di dalam narasi, beserta keterangannya. Lebarnya
   dalam PERSEN dan disimpan pada <figure>-nya sendiri: dokumen ini berakhir di
   kertas A4, jadi lebar dalam piksel tidak berarti apa-apa. */
.penyunting__area figure, .narasi-konten figure, .cetak-narasi figure {
  margin: .6rem auto; padding: 0; max-width: 100%;
}

.penyunting__area figure img, .narasi-konten figure img, .cetak-narasi figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}

.penyunting__area figcaption, .narasi-konten figcaption, .cetak-narasi figcaption {
  margin-top: .25rem; text-align: center;
  font-size: .8rem; color: var(--color-text-muted);
}

/* Isyarat bahwa gambarnya bisa diklik untuk ganti ukuran. */
.penyunting__area figure img { cursor: zoom-in; }

/* Placeholder. Kelas, bukan :empty — penyunting yang kosong tetap berisi
   <p><br></p>, jadi ia tidak pernah cocok dengan :empty. */
.penyunting.is-kosong .penyunting__area::before {
  content: attr(data-kosong);
  /* Ditumpangkan, bukan disisipkan sebagai baris tersendiri: paragraf kosong
     yang menampung kursor tetap ada di bawahnya, dan tanpa position: absolute
     penandanya mendorong kursor turun satu baris. */
  position: absolute; left: .9rem; top: .8rem;
  color: var(--color-text-muted);
  pointer-events: none;
}

.penyunting.is-kosong .penyunting__area:focus::before { content: ''; }

/* Filter blok berdimensi — satu tabel fisik yang disaring per Seksi
   Pengawasan, wilayah administrasi, atau kabupaten/kota. */
.filter-dimensi {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .4rem 0 .6rem;
}
.filter-dimensi label { font-weight: 600; font-size: .9rem; }
.filter-dimensi input { min-width: 22rem; max-width: 100%; }

@media (max-width: 820px) {
  /* Galerinya runtuh jadi satu kolom apa pun tata letak yang tersimpan: pada
     layar sempit, tiga kolom menyisakan lebar beberapa sentimeter per gambar
     dan tidak ada satu pun yang terbaca. Pilihannya sendiri tidak diubah —
     begitu halaman dibuka lagi di layar lebar, susunannya kembali seperti yang
     dipilih pengisinya. */
  .galeri { grid-template-columns: 1fr !important; grid-auto-rows: 220px; }
  .galeri > .galeri__item:first-child { grid-column: auto !important; grid-row: auto !important; }
  .galeri-tata { margin-left: 0; }
  .filter-bar { position: static; }
}

/* Peringatan lunak: akun tanpa unit, atau periode yang sudah terkunci. Bukan
   .form__error, yang menandai kesalahan pengguna pada satu isian. */
.page__peringatan {
  padding: .7rem .9rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}

/* Tinggi dikunci di wadahnya, bukan diserahkan ke Chart.js. Canvas yang
   tingginya ditentukan isinya sendiri tumbuh setiap kali digambar ulang. */
.chart-wadah {
  position: relative;
  height: 320px;
  margin: 1rem 0 .4rem;
}

/* ------------------------------------------------- Monfis: penilaian & laporan */

.skor-ringkas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}

.skor-kartu {
  padding: .9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: flex; flex-direction: column; gap: .2rem;
}

.skor-kartu--utama { border-color: var(--color-primary); }
.skor-kartu__label { font-size: .8rem; color: var(--color-text-muted); }
.skor-kartu__nilai { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; }
.skor-kartu small { font-size: .75rem; color: var(--color-text-muted); }

.skor-tabel th, .skor-tabel td { padding: .55rem .7rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.skor-tabel thead th { background: var(--table-head-bg); color: var(--table-head-fg); text-align: left; }
.skor-baris--belum { color: var(--color-text-muted); }

.skor-hitung { font-size: .82rem; color: var(--color-text-muted); }
.skor-item { list-style: none; margin: .35rem 0 0; padding: 0; font-size: .84rem; }
.skor-item li { padding: .1rem 0; }
.skor-item .is-kosong, .skor-item .is-abai { color: var(--color-text-muted); }

/* ---- Lencana status ----
   Warna BUKAN satu-satunya penanda: teksnya selalu ikut. Sekitar satu dari dua
   belas laki-laki tidak bisa membedakan hijau dari merah, dan halaman ini
   menentukan nilai unit mereka. */

.lencana {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  border: 1px solid transparent; font-size: .72rem; font-weight: 600;
  line-height: 1.5; white-space: nowrap; vertical-align: middle;
}
.lencana--terisi   { background: #E6F4EA; border-color: #A8D5B5; color: #1B5E32; }
.lencana--sebagian { background: #FDF3D8; border-color: #E7CE8C; color: #7A5A10; }
.lencana--kosong   { background: #F2F1EC; border-color: var(--color-border); color: var(--color-text-muted); }
.lencana--abai     { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); font-weight: 500; }

.skor-tabel .lencana { margin-right: .35rem; }
.skor-item .lencana { min-width: 4.2rem; text-align: center; margin-right: .3rem; }

.lapor-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lapor-tabel th, .lapor-tabel td { padding: .45rem .6rem; border: 1px solid var(--color-border); text-align: right; }
.lapor-tabel th { background: var(--table-head-bg); color: var(--table-head-fg); text-align: center; }
.lapor-tabel td:nth-child(2) { text-align: left; }

/* Baris Unit 1 adalah induk dari baris di bawahnya, bukan sejajar dengan
   mereka. Tanpa penanda ini tabelnya terbaca seolah tujuh unit setingkat. */
.lapor-baris--induk td { background: var(--table-stripe); font-weight: 600; }

.atur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .2rem 1.2rem; }
.form__row--pasangan { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.form__row--pasangan input { flex: 1 1 6rem; min-width: 5rem; }
.form__row-label { font-size: .82rem; color: var(--color-text-muted); }
#jumlah-bobot.is-salah { color: var(--color-danger, #B3261E); }