* { box-sizing: border-box; }

/* Alpine belum sempat menyembunyikan elemen bersyarat sebelum ia dimuat. */
[x-cloak] { display: none !important; }

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: calc(14px * var(--skala-font));
  color: var(--text);
  background: var(--bg);
}

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

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 14px; transform: translateY(-160%);
  border-radius: var(--radius-kontrol); background: var(--surface);
  color: var(--text); box-shadow: var(--bayangan);
}
.skip-link:focus { transform: translateY(0); }

.angka { font-variant-numeric: tabular-nums; }

/* Kerangka */
.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-lebar);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sidebar__merek { padding: 20px 16px; display: flex; gap: 10px; align-items: center; }
.sidebar__merek-nama { color: #fff; font-weight: 700; letter-spacing: .02em; }
.sidebar__merek-nama em { color: var(--accent); font-style: normal; }
.sidebar__merek-sub { font-size: calc(11px * var(--skala-font)); color: var(--text-subtle); }

.menu { list-style: none; margin: 0; padding: 4px 12px; }
.menu__tautan {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-kontrol);
  color: var(--sidebar-text); text-decoration: none; font-size: calc(14px * var(--skala-font));
}
.menu__tautan > i { flex: 0 0 16px; }
.menu__tautan:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu__tautan--aktif { background: var(--accent); color: #fff; }
.submenu { list-style: none; margin: 2px 0 6px; padding-left: 34px; }
.submenu__tautan {
  display: block; padding: 8px 12px; border-radius: var(--radius-kontrol);
  color: var(--sidebar-text); text-decoration: none; font-size: calc(13px * var(--skala-font));
}

.submenu__tautan--aktif { background: var(--sidebar-submenu-active); color: #fff; }
.menu__tautan--belum,
.submenu__tautan--belum {
  opacity: .45;
  cursor: default;
}
.menu__tautan--belum:hover,
.submenu__tautan--belum:hover {
  background: transparent;
  color: var(--sidebar-text);
}
.menu__segera {
  margin-left: auto;
  font-size: calc(10px * var(--skala-font));
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-subtle);
}

.sidebar__bawah { margin-top: auto; padding: 12px; }
.sidebar__kaki { padding: 12px 16px; font-size: calc(11px * var(--skala-font)); color: var(--text-subtle); }

.topbar {
  position: fixed; top: 0; left: var(--sidebar-lebar); right: 0;
  height: var(--topbar-tinggi);
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  z-index: 20;
}
.topbar__spacer { flex: 1; min-width: 0; }
.topbar__pengguna { min-width: 0; }
.cari { flex: 1; max-width: 520px; position: relative; }
.cari input {
  width: 100%; min-height: 40px; padding: 10px 12px 10px 38px;
  border: 1px solid var(--border); border-radius: var(--radius-kontrol);
  background: var(--bg); font-size: calc(14px * var(--skala-font));
}
.cari__pintasan {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: calc(11px * var(--skala-font)); color: var(--text-subtle);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px;
}
.topbar__kanan { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.topbar__keluar { margin: 0; }
.lonceng { position: relative; }
.lonceng__jumlah {
  position: absolute; top: -6px; right: -8px;
  background: var(--bahaya-fg); color: #fff;
  font-size: calc(10px * var(--skala-font)); border-radius: 999px; padding: 1px 5px;
}

.isi {
  margin-left: var(--sidebar-lebar);
  padding: calc(var(--topbar-tinggi) + 24px) 24px 40px;
}
.halaman__judul { font-size: calc(24px * var(--skala-font)); font-weight: 700; margin: 0; }
.halaman__subjudul { color: var(--text-muted); font-size: calc(14px * var(--skala-font)); margin: 4px 0 0; }
.breadcrumb { font-size: calc(13px * var(--skala-font)); color: var(--text-muted); margin-top: 8px; }
/* Jarak ke isi halaman ada di sini, bukan di tiap halaman. Tanpa ini judul
   menempel ke kartu pertama di halaman yang isinya langsung tabel. */
.halaman__kepala { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.halaman__aksi { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Komponen */
.kartu {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-kartu); box-shadow: var(--bayangan);
  padding: 20px;
}
/* Lima kolom tetap, bukan auto-fit: mockup meletakkan lima kartu statistik
   sebaris dan auto-fit menjatuhkannya jadi empat begitu layarnya kurang dari
   sekitar 1150px. Yang menyusut jumlah kolomnya di media query di bawah,
   bertahap, bukan dibiarkan ditentukan lebar minimum. */
.statistik { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0 0 20px; }
.statistik__ikon {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 12px;
}
.statistik__label { font-size: calc(13px * var(--skala-font)); color: var(--text-muted); }
.statistik__nilai { font-size: calc(26px * var(--skala-font)); font-weight: 700; margin-top: 2px; }
.statistik__banding { font-size: calc(12px * var(--skala-font)); margin-top: 6px; }
.statistik__banding--naik { color: var(--sukses-fg); }
.statistik__banding--turun { color: var(--bahaya-fg); }

.lencana {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: calc(12px * var(--skala-font)); font-weight: 500;
}
.lencana--sukses { color: var(--sukses-fg); background: var(--sukses-bg); }
.lencana--peringatan { color: var(--peringatan-fg); background: var(--peringatan-bg); }
.lencana--jingga { color: var(--jingga-fg); background: var(--jingga-bg); }
.lencana--bahaya { color: var(--bahaya-fg); background: var(--bahaya-bg); }
.lencana--ungu { color: var(--ungu-fg); background: var(--ungu-bg); }
.lencana--netral { color: var(--netral-fg); background: var(--netral-bg); }
/* Warna lencana kategori layanan (ServiceCategory.badge_color) yang belum
   tercakup di atas — dipakai lewat _components/badge.html di halaman
   Layanan. Dipetakan ke variabel yang sudah ada, bukan warna baru. */
.lencana--biru { color: var(--accent); background: var(--pastel-biru); }
.lencana--hijau { color: var(--sukses-fg); background: var(--sukses-bg); }
.lencana--merah { color: var(--bahaya-fg); background: var(--bahaya-bg); }

.tabel { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--skala-font)); }
.tabel thead th {
  text-align: left; font-size: calc(12px * var(--skala-font)); font-weight: 600; color: var(--text-muted);
  background: #f8fafc; padding: 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: var(--topbar-tinggi); z-index: 1;
}
.tabel tbody td { padding: 14px 12px; border-bottom: 1px solid var(--border); }
.tabel tbody tr:hover { background: #fbfcfe; }
/* Baris yang sedang ditampilkan di panel detail sebelah kanan. */
.tabel__baris--klik { cursor: pointer; }
.tabel__baris--terpilih { background: var(--accent-soft); }
.tabel__baris--terpilih:hover { background: var(--accent-soft); }
/* Pemilih kolom di atas tabel. `<details>` dipakai supaya panelnya bekerja
   tanpa JavaScript sama sekali; `summary` diberi rupa tombol agar sederet
   dengan tombol di sebelahnya. */
.pemilih-kolom { position: relative; }
.pemilih-kolom > summary { list-style: none; user-select: none; }
.pemilih-kolom > summary::-webkit-details-marker { display: none; }
.pemilih-kolom__panel {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0;
  min-width: 240px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-kontrol); box-shadow: 0 8px 24px rgb(15 23 42 / .12);
}
.pemilih-kolom__baris {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: calc(13px * var(--skala-font));
}
.pemilih-kolom__panel .form__bantuan { margin: 8px 0 4px; font-weight: 600; }
.pemilih-kolom__panel .tombol { width: 100%; justify-content: center; margin-top: 10px; }

/* Blok merek di halaman pratinjau; bentuknya sama dengan yang di sidebar. */
.merek-pratinjau {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-kontrol); margin-bottom: 16px;
  background: var(--sidebar-bg);
}
.merek-pratinjau .sidebar__merek-sub { color: var(--sidebar-text); }

/* Tabel di dalam sel tabel lain — rincian perubahan pada satu baris audit.
   Tanpa ini, padding 14px milik tabel luar terpakai dua kali dan satu baris
   audit setinggi setengah layar. */
.tabel--rapat tbody td { padding: 4px 8px; border-bottom: none; }
.tabel--rapat tbody tr:hover { background: transparent; }
.tabel__utama { font-weight: 600; }
.tabel__sekunder { color: var(--text-muted); font-size: calc(12px * var(--skala-font)); }
.tautan-id { color: var(--accent); text-decoration: none; font-weight: 500; }

.tombol {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 10px 16px; border-radius: var(--radius-kontrol);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: calc(14px * var(--skala-font)); cursor: pointer; text-decoration: none;
  transition: transform 140ms ease-out, background-color 140ms ease,
    border-color 140ms ease;
}
.tombol:not(:disabled):not(.tombol--utama):not(.tombol--bahaya):hover {
  background: var(--accent-soft); border-color: var(--accent);
}
.tombol:active, button.tab__item:active { transform: scale(.98); }
.tombol:disabled { cursor: not-allowed; opacity: .6; }
.tombol--utama { background: var(--accent); border-color: var(--accent); color: #fff; }
.tombol--utama:hover { background: var(--accent-hover); }
/* Tombol untuk aksi yang tidak bisa dibatalkan memakai warna semantik bahaya. */
.tombol--bahaya { background: var(--bahaya-fg); border-color: var(--bahaya-fg); color: #fff; }
.tombol--bahaya:hover { filter: brightness(0.92); }

.paginasi { display: flex; align-items: center; gap: 12px; padding: 16px 12px; }
.paginasi__info { color: var(--text-muted); font-size: calc(13px * var(--skala-font)); }
.paginasi__daftar { margin-left: auto; display: flex; gap: 6px; }
.paginasi__halaman {
  min-width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-kontrol);
  text-decoration: none; color: var(--text); font-size: calc(13px * var(--skala-font));
}
.paginasi__halaman--aktif { background: var(--accent); border-color: var(--accent); color: #fff; }
.paginasi__panah { color: var(--text-muted); }
.paginasi__panah--mati { color: var(--text-subtle); cursor: default; background: var(--bg); }
.paginasi__elipsis {
  min-width: 20px; height: 34px; display: grid; place-items: center;
  color: var(--text-subtle); font-size: calc(13px * var(--skala-font));
}
.paginasi__per-halaman { margin: 0 0 0 6px; display: flex; gap: 6px; }
.paginasi__per-halaman select {
  height: 34px; border: 1px solid var(--border); border-radius: var(--radius-kontrol);
  background: var(--surface); color: var(--text); font-size: calc(13px * var(--skala-font)); padding: 0 8px;
}

/* Halaman Layanan: tab kategori, tata letak dua kolom, panel kanan. */
.tab {
  display: flex; gap: 4px; overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.tab__item {
  padding: 12px 14px; font-size: calc(14px * var(--skala-font)); color: var(--text-muted);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.tab__item--aktif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* Tab dalam-halaman memakai <button>, bukan <a>: perpindahannya tidak menuju
   ke mana pun, jadi tautan palsu berarti menu konteks dan Ctrl-klik yang
   membohongi penggunanya. */
button.tab__item {
  background: none; border: none; cursor: pointer;
  font: inherit; border-bottom: 2px solid transparent;
}

/* Bagian halaman yang disegarkan sendiri oleh htmx. Diredupkan selagi
   permintaannya berjalan supaya perpindahan tab tidak tampak menggantung. */
.panel-htmx.htmx-request { opacity: .55; transition: opacity .12s ease-out; }

.dua-kolom { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .dua-kolom { grid-template-columns: 1fr; } }
.tiga-kolom {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; align-items: stretch;
}
@media (max-width: 1200px) and (min-width: 701px) {
  .tiga-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tiga-kolom { grid-template-columns: 1fr; }
}

/* Kartu yang bertumpuk diberi jarak dari satu tempat. Sebelumnya tiap templat
   menuliskan `style="margin-top: 16px"` sendiri dan yang lupa jadi mepet. */
.kartu + .kartu { margin-top: 20px; }
.statistik .kartu + .kartu { margin-top: 0; }
.dashboard-kpi > .kartu,
.dashboard-antrian__grid > .kartu,
.tiga-kolom > .kartu {
  min-width: 0;
  margin-top: 0;
}
/* Jarak yang sama juga berlaku antara kartu dan blok berkolom. Tanpa ini,
   deretan Terminasi → Hop Transit → Riwayat Gangguan di halaman Detail
   Layanan menempel satu sama lain karena bukan sesama `.kartu`. */
.dua-setara + .kartu, .kartu + .dua-setara,
.dua-setara + .dua-setara, .dua-kolom + .kartu, .kartu + .dua-kolom,
.tiga-kolom + .kartu, .kartu + .tiga-kolom, .statistik + .kartu {
  margin-top: 20px;
}

.panel__judul { font-size: calc(15px * var(--skala-font)); font-weight: 600; margin: 0 0 12px; }
.aksi-cepat { display: flex; flex-direction: column; gap: 8px; }
.aksi-cepat__item {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-kontrol);
  text-decoration: none; color: var(--text); font-size: calc(13px * var(--skala-font));
}
.aksi-cepat__item:hover { background: var(--accent-soft); }

.filter-baris { display: flex; align-items: center; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.filter-baris .cari { flex: 1; max-width: none; }
.filter-baris select {
  min-height: 40px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-kontrol); background: var(--surface); font-size: calc(13px * var(--skala-font));
}
.daftar-toolbar, .customer-toolbar, .billing-toolbar, .layanan-toolbar {
  display: flex; align-items: center; gap: 8px; margin: 16px 0;
}
.customer-toolbar { gap: 8px; }
.customer-toolbar .filter-baris { margin: 0; flex-wrap: nowrap; }
.customer-toolbar__filter { flex: 1 1 auto; min-width: 0; }
.customer-toolbar__filter .cari { min-width: 120px; }
.customer-toolbar__kolom, .customer-toolbar__export { flex: 0 0 auto; }
@media (max-width: 700px) {
  .customer-toolbar { flex-wrap: wrap; }
  .customer-toolbar__filter { flex: 1 1 100%; }
}
.billing-toolbar__filter {
  position: relative; flex: 0 0 auto; margin: 0;
}
.billing-toolbar .filter-panel__toggle { margin: 0; }
.billing-toolbar .filter-panel__content {
  position: absolute; z-index: 10; top: calc(100% + 8px); left: 0;
  width: min(620px, calc(100vw - 48px));
}
.billing-toolbar .filter-baris { margin: 0; }
@media (max-width: 560px) {
  .billing-toolbar .filter-panel__content { max-width: calc(100vw - 48px); }
}
.layanan-toolbar { position: relative; }
.layanan-toolbar .filter-lanjutan { position: relative; margin: 0; }
.layanan-toolbar .filter-panel__toggle { margin: 0; }
.layanan-toolbar__kolom { margin: 0; }
.layanan-toolbar__filter-panel {
  position: absolute; z-index: 10; top: calc(100% + 8px); left: 0;
  width: min(620px, calc(100vw - 32px));
}
.layanan-toolbar__filter-panel .filter-baris { margin: 0; }
.layanan-toolbar, .customer-toolbar { min-width: 0; }
.tiket-toolbar { align-items: flex-start; }
@media (max-width: 560px) {
  .layanan-toolbar { flex-wrap: wrap; }
  .layanan-toolbar__filter-panel { max-width: calc(100vw - 48px); }
}

.tabel__aksi { display: flex; gap: 4px; align-items: center; }
/* Aksi baris jadi tombol ikon berukuran sama. Sebelumnya campuran tautan teks
   "Ubah" dan tombol "Hapus" dengan tinggi berbeda, jadi kolomnya tidak pernah
   rata dan memakan lebar yang dibutuhkan data. */
.aksi-ikon {
  width: 32px; height: 32px; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-kontrol);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; text-decoration: none; padding: 0;
}
.aksi-ikon:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.aksi-ikon--bahaya:hover { background: var(--bahaya-bg); color: var(--bahaya-fg); border-color: var(--bahaya-fg); }
.aksi-ikon i, .aksi-ikon svg { width: 16px; height: 16px; }
/* Formulir hapus hanya pembungkus tombol; ia tidak boleh menambah tinggi. */
.tabel__aksi form { margin: 0; display: inline-flex; }
/* Hanya untuk tombol aksi yang fiturnya belum ada. Dulu aturan ini menyasar
   SEMUA tombol di kolom aksi, jadi tombol hapus yang sungguhan pun ikut
   ber-cursor `not-allowed` dan kehilangan bingkainya. */
.tabel__aksi button:disabled {
  border: none; background: transparent; color: var(--text-subtle);
  padding: 6px; border-radius: var(--radius-kontrol); cursor: not-allowed;
}

/* Menu aksi baris. Dibangun dari <details>, bukan Alpine: menu ini hidup di
   dalam baris tabel, dan dua kali di proyek ini panel Alpine tersandera
   x-cloak tanpa galat apa pun. <details> tetap terbuka kalau skripnya gagal
   dimuat, dan sudah bisa dipakai lewat papan ketik tanpa kode tambahan. */
.aksi-menu { position: relative; display: inline-flex; }
.aksi-menu > summary {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-kontrol);
  color: var(--text-muted); cursor: pointer; list-style: none;
}
.aksi-menu > summary::-webkit-details-marker { display: none; }
.aksi-menu > summary:hover,
.aksi-menu[open] > summary { background: var(--accent-soft); color: var(--accent); }
.aksi-menu > summary i, .aksi-menu > summary svg { width: 16px; height: 16px; }
.aksi-menu__isi {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 10;
  min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-kontrol); box-shadow: var(--bayangan);
  text-align: left;
}
.hop-ubah__panel {
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.hop-ubah__panel .form-grid { grid-template-columns: 1fr; }
.aksi-menu__isi form { margin: 0; display: block; }
.aksi-menu__isi > a,
.aksi-menu__isi button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: none; background: transparent;
  color: var(--text); text-align: left; text-decoration: none;
  border-radius: var(--radius-kontrol); cursor: pointer;
  font-size: calc(13px * var(--skala-font));
}
.aksi-menu__isi > a:hover,
.aksi-menu__isi button:hover { background: var(--accent-soft); color: var(--accent); }
.aksi-menu__isi i, .aksi-menu__isi svg { width: 15px; height: 15px; flex: none; }
/* Akibat menekan tombolnya ditulis, bukan ditebak dari kata "Nonaktifkan". */
.aksi-menu__catatan {
  margin: 4px 0 2px; padding: 0 10px;
  color: var(--text-subtle); font-size: calc(11px * var(--skala-font));
  line-height: 1.4;
}

.detail-baris {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: calc(13px * var(--skala-font));
}
.detail-baris:last-child { border-bottom: none; }
.detail-baris > span:first-child { color: var(--text-muted); }
.detail-baris > span:last-child { font-weight: 500; text-align: right; }

.form { max-width: 680px; }
.form__label {
  display: block;
  font-size: calc(13px * var(--skala-font));
  font-weight: 500;
  margin: 16px 0 6px;
  color: var(--text);
}
.form__isian {
  width: 100%; min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-kontrol);
  font-family: inherit;
  font-size: calc(14px * var(--skala-font));
  color: var(--text);
  background: var(--surface);
}
.form__isian:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form__isian[type="checkbox"] { width: auto; }
textarea.form__isian { min-height: 90px; resize: vertical; }
.form__galat { color: var(--bahaya-fg); font-size: calc(12px * var(--skala-font)); margin: 6px 0 0; }
.form__bantuan { color: var(--text-muted); font-size: calc(12px * var(--skala-font)); margin: 6px 0 0; }
.form__baris {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 22px;
  font-size: calc(14px * var(--skala-font));
}
.form__aksi { display: flex; gap: 8px; margin-top: 8px; }

/* Formulir dua kolom. Satu baris satu isian membuat formulir pendek pun
   sepanjang layar; yang panjang isinya (alamat, catatan) diberi kelas
   `--lebar` supaya tetap satu baris penuh. */
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* Jarak kolom 24px, bukan 16px: dengan label di atas isian, 16px membuat
     kolom kiri dan kanan terbaca seperti satu kolom. */
  column-gap: 24px; row-gap: 4px;
}
/* Formulir dua kolom butuh lebih dari 680px. `.form` membatasi lebar demi
   formulir satu kolom yang panjang; batas itu justru memepetkan yang dua
   kolom sampai kolomnya menempel. */
.form:has(.form-grid) { max-width: none; }
.form-grid__medan--lebar { grid-column: 1 / -1; }
/* Tiap medan satu kolom penuh dengan label di atas isian. `align-content:
   start` mencegah isian meregang mengikuti medan tertinggi di barisnya —
   itulah yang membuat baris campuran (input pendek + textarea) tampak
   berantakan. */
.form-grid__medan { display: flex; flex-direction: column; align-self: start; }
.form-grid .form__label { margin: 12px 0 6px; }
.form-grid .form__bantuan, .form-grid .form__galat { margin-bottom: 0; }
.form-grid textarea.form__isian { min-height: 76px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* Dua kartu berukuran sama bersebelahan, beda dari `dua-kolom` yang sisi
   kanannya panel sempit 320px. */
.dua-setara { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.dua-setara > .kartu { margin-top: 0; display: flex; flex-direction: column; }
.dua-setara > .kartu form { display: flex; flex: 1; flex-direction: column; }
.dua-setara > .kartu .form__aksi { margin-top: auto; padding-top: 8px; }
@media (max-width: 1000px) { .dua-setara { grid-template-columns: 1fr; } }

.isi--polos { margin-left: 0; padding-top: 40px; max-width: 720px; }

/* Halaman Customer: kartu statistik berkolom, panel berkepala, detail. */
.statistik__kartu { display: flex; flex-direction: column; }
.statistik--ringkas-customer { gap: 10px; margin-bottom: 16px; }
.statistik--ringkas-customer .statistik__kartu { padding: 12px 14px; }
.statistik--ringkas-customer .statistik__ikon { width: 30px; height: 30px; margin-bottom: 6px; }
.statistik--ringkas-customer .statistik__nilai { font-size: calc(21px * var(--skala-font)); }
.panel__kepala { display: flex; align-items: center; margin-bottom: 12px; }
.panel__kepala .panel__judul { margin: 0; }
.panel__tautan {
  margin-left: auto; color: var(--accent); font-size: calc(13px * var(--skala-font)); text-decoration: none;
}
.filter-tanggal { display: flex; gap: 8px; }

/* Panel filter mendatar di atas tabel. Tiap medan dibungkus sendiri supaya
   label dan kontrolnya tetap satu paket saat grid membungkus baris. */
.filter-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 24px; align-items: end;
}
.filter-panel .form__label { margin: 0 0 6px; }
.filter-panel__medan--aksi .tombol { width: 100%; justify-content: center; }
.filter-panel__toggle { margin-bottom: 10px; }
.filter-panel__isi[hidden] { display: none; }
.filter-panel__content[hidden] { display: none !important; }
.filter-lanjutan { margin-bottom: 16px; }
.filter-lanjutan > summary { display: inline-flex; list-style: none; user-select: none; }
.filter-lanjutan > summary::-webkit-details-marker { display: none; }
.customer-toolbar .filter-panel__toggle { margin: 0; }
.live-update {
  position: fixed; z-index: 2000; top: 12px; right: 16px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-kartu); background: var(--surface);
  box-shadow: var(--bayangan); font-size: calc(13px * var(--skala-font));
}
.live-update[hidden] { display: none; }

.detail-kepala { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.detail-kepala__avatar {
  width: 64px; height: 64px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-kartu); background: var(--pastel-biru);
  color: var(--accent); font-weight: 700; font-size: calc(20px * var(--skala-font));
}
.detail-kepala__utama { min-width: 220px; }
.detail-kepala__nama {
  font-size: calc(20px * var(--skala-font)); font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.detail-kepala__cid { margin-top: 6px; font-size: calc(13px * var(--skala-font)); color: var(--text-muted); }
.detail-kepala__lencana { display: flex; gap: 6px; margin: 8px 0; }
.detail-kepala__kolom { font-size: calc(13px * var(--skala-font)); display: grid; gap: 2px; align-content: start; }
.detail-kepala__kolom > .tabel__sekunder { margin-top: 8px; }

.tab--halaman { margin: 0 -16px; padding: 0 16px; }
.tab__item--mati { color: var(--text-subtle); cursor: default; }

.panel-kontak {
  display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.panel-kontak:last-child { border-bottom: none; }
.panel-kontak__avatar {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--pastel-biru); color: var(--accent);
  font-weight: 600; font-size: calc(13px * var(--skala-font));
}
.panel-kontak__isi { flex: 1; font-size: calc(13px * var(--skala-font)); }
.panel-kontak .tabel__aksi form { margin: 0; }

.daftar-dokumen__baris {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.daftar-dokumen__baris:last-child { border-bottom: none; }
.daftar-dokumen__isi { flex: 1; }

.catatan-kartu {
  background: var(--peringatan-bg); border-radius: var(--radius-kontrol);
  padding: 10px 12px; margin-top: 10px; font-size: calc(13px * var(--skala-font));
}

.timeline { position: relative; padding-left: 6px; }
.timeline__baris { display: flex; gap: 12px; padding: 10px 0; }
.timeline__titik {
  width: 10px; height: 10px; margin-top: 5px; flex: none;
  border-radius: 50%; background: var(--accent);
}

/* Topologi: kanvas digulir native bila lebih lebar dari layar. */
.topologi { overflow-x: auto; padding-bottom: 4px; }
.topologi__gambar { display: block; }
.topologi__judul { font-size: calc(13px * var(--skala-font)); font-weight: 600; fill: var(--text); }
.topologi__ket { font-size: calc(11px * var(--skala-font)); fill: var(--text-muted); }

/* Dashboard: grafik donat dan kartu inventaris. */
.tiga-kolom { margin-bottom: 20px; }
.dashboard-kpi {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.dashboard-kpi__kartu {
  min-width: 0; min-height: 148px; display: flex; flex-direction: column;
  align-items: flex-start; color: var(--text); text-decoration: none;
  transition: transform 140ms ease-out, border-color 140ms ease, box-shadow 140ms ease;
}
.dashboard-kpi__kartu:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgb(15 23 42 / .08);
}
.dashboard-kpi__kartu:active { transform: scale(.99); }
.dashboard-kpi__ikon {
  width: 36px; height: 36px; display: grid; place-items: center;
  margin-bottom: 12px; border-radius: 10px;
}
.dashboard-kpi__ikon--biru { color: #1d4ed8; background: var(--pastel-biru); }
.dashboard-kpi__ikon--hijau { color: var(--sukses-fg); background: var(--pastel-hijau); }
.dashboard-kpi__ikon--ungu { color: var(--ungu-fg); background: var(--pastel-ungu); }
.dashboard-kpi__ikon--jingga { color: var(--peringatan-fg); background: var(--pastel-jingga); }
.dashboard-kpi__ikon--merah { color: var(--bahaya-fg); background: var(--pastel-merah); }
.dashboard-kpi__label { color: var(--text-muted); font-size: calc(12px * var(--skala-font)); }
.dashboard-kpi__nilai {
  max-width: 100%; margin-top: 4px; overflow-wrap: anywhere;
  font-size: calc(24px * var(--skala-font)); line-height: 1.2;
}
.dashboard-kpi__catatan {
  margin-top: auto; padding-top: 8px; color: var(--text-muted);
  font-size: calc(11px * var(--skala-font)); line-height: 1.4;
}
.dashboard-bagian__kepala {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin: 24px 0 12px;
}
.dashboard-bagian__kepala--analitik { margin-top: 28px; }
.dashboard-eyebrow {
  color: var(--text-muted); font-size: calc(10px * var(--skala-font));
  font-weight: 700; letter-spacing: .08em;
}
.dashboard-bagian__judul {
  margin: 3px 0 0; font-size: calc(18px * var(--skala-font)); font-weight: 650;
}
.dashboard-live {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-muted); font-size: calc(12px * var(--skala-font));
}
.dashboard-live > span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sukses-fg); box-shadow: 0 0 0 3px var(--sukses-bg);
}
.dashboard-antrian { margin-bottom: 24px; }
.dashboard-antrian__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.dashboard-antrian__kartu {
  min-width: 0; min-height: 232px; display: flex; flex-direction: column;
}
.dashboard-antrian__kepala {
  display: flex; align-items: center; gap: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.dashboard-antrian__ikon {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 10px;
}
.dashboard-antrian__kepala > div { min-width: 0; }
.dashboard-antrian__kepala .panel__judul { margin: 0 0 3px; }
.dashboard-antrian__kepala .tabel__sekunder { margin: 0; }
.dashboard-antrian__semua {
  flex: none; margin-left: auto; color: var(--accent);
  font-size: calc(12px * var(--skala-font)); font-weight: 600;
  text-decoration: none;
}
.dashboard-antrian__semua:hover { text-decoration: underline; }
.dashboard-antrian__daftar { flex: 1; }
.dashboard-antrian__item {
  min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 0; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.dashboard-antrian__item:last-child { border-bottom: 0; }
.dashboard-antrian__item:hover .dashboard-antrian__item-info strong { color: var(--accent); }
.dashboard-antrian__item-info { min-width: 0; flex: 1; display: grid; gap: 3px; }
.dashboard-antrian__item-info strong,
.dashboard-antrian__item-info small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-antrian__item-info strong { font-size: calc(12px * var(--skala-font)); }
.dashboard-antrian__item-info small { color: var(--text-muted); font-size: calc(11px * var(--skala-font)); }
.dashboard-antrian__nilai { flex: none; font-size: calc(12px * var(--skala-font)); }
.dashboard-antrian__item > i,
.dashboard-antrian__item > svg { width: 15px; height: 15px; flex: none; color: var(--text-subtle); }
.dashboard-kosong {
  min-height: 128px; display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 0; color: var(--text-muted); font-size: calc(13px * var(--skala-font));
}
.dashboard-kosong i, .dashboard-kosong svg { color: var(--sukses-fg); }
.dashboard-analitik__kartu { min-height: 280px; display: flex; flex-direction: column; }
.dashboard-analitik__kartu > .donat { flex: 1; align-content: center; }
.dashboard-analitik__kartu .grafik__kanvas { margin-top: auto; }
.dashboard-aktivitas > .kartu { display: flex; flex-direction: column; }
.dashboard-aktivitas .timeline { max-height: 280px; overflow-y: auto; }
.inventory-aksi__kartu { min-height: 154px; display: flex; align-items: center; }
.inventory-aksi__kartu .aksi-cepat__item { width: 100%; min-height: 100px; }
.inventory-aksi__kartu .tabel__sekunder { min-height: 2.6em; }
.dashboard-metrik {
  margin-top: 20px; border: 1px solid var(--border);
  border-radius: var(--radius-kartu); background: var(--surface);
}
.dashboard-metrik__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 16px; cursor: pointer; list-style: none;
}
.dashboard-metrik__toggle::-webkit-details-marker { display: none; }
.dashboard-metrik__toggle > span { display: grid; gap: 4px; }
.dashboard-metrik__toggle strong { font-weight: 600; }
.dashboard-metrik__toggle > i,
.dashboard-metrik__toggle > svg { transition: transform 160ms ease-out; }
.dashboard-metrik[open] .dashboard-metrik__toggle > i,
.dashboard-metrik[open] .dashboard-metrik__toggle > svg { transform: rotate(180deg); }
.dashboard-metrik__isi { padding: 0 16px 16px; margin-bottom: 0; }
.dashboard-metrik__isi .kartu { box-shadow: none; }
.donat { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donat__gambar { transform: rotate(-90deg); flex: none; }
.donat__angka { font-size: calc(6px * var(--skala-font)); font-weight: 700; fill: var(--text); transform: rotate(90deg); transform-origin: 21px 21px; }
.donat__label { font-size: calc(3px * var(--skala-font)); fill: var(--text-muted); transform: rotate(90deg); transform-origin: 21px 21px; }
.donat__legenda { flex: 1; min-width: 150px; font-size: calc(13px * var(--skala-font)); }
.donat__baris { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.donat__baris .angka { margin-left: auto; color: var(--text-muted); }
.donat__titik { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Billing: baris total, tenggat lewat, dan kartu peringatan. */
.detail-baris--total { font-weight: 700; font-size: calc(15px * var(--skala-font)); }
.detail-baris--total > span:last-child { color: var(--accent); }
.tabel__tenggat--lewat { color: var(--bahaya-fg); font-weight: 600; }
.peringatan-kartu { background: var(--peringatan-bg); border-color: var(--peringatan-fg); }

/* Grafik garis. Dua deret, satu skala. Warnanya sengaja beda nada — bukan dua
   biru — supaya tetap terbaca saat dicetak hitam putih. */
.grafik__kanvas { width: 100%; height: auto; display: block; }
.grafik__bantu { stroke: var(--border); stroke-width: 1; }
.grafik__label { font-size: calc(10px * var(--skala-font)); fill: var(--text-muted); }
.grafik__garis { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafik__garis--tagihan { stroke: var(--accent); }
.grafik__garis--dibayar { stroke: var(--sukses-fg); stroke-dasharray: 5 3; }
.grafik__noktah--tagihan { fill: var(--accent); }
.grafik__noktah--dibayar { fill: var(--sukses-fg); }
.grafik__legenda {
  display: flex; gap: 16px; margin-top: 10px;
  font-size: calc(12px * var(--skala-font)); color: var(--text-muted);
}
.grafik__legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.grafik__titik { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.grafik__titik--tagihan { background: var(--accent); }
.grafik__titik--dibayar { background: var(--sukses-fg); }

/* Peta sebaran: digambar sendiri, tanpa ubin dari luar. */
.peta { width: 100%; height: auto; display: block; }
.peta__latar { fill: var(--bg); stroke: var(--border); }
.peta__titik--site { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.peta__titik--pelanggan { fill: var(--sukses-fg); opacity: .8; }
.peta__contoh { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.peta__contoh--site { background: var(--accent); }
.peta__contoh--pelanggan { background: var(--sukses-fg); }

/* Pesan flash. Dirender base.html sejak 0.6.0; sebelumnya setiap flash()
   di seluruh aplikasi hilang tanpa jejak. */
.pesan-tumpuk { display: grid; gap: 8px; margin-bottom: 16px; }
.pesan {
  padding: 12px 14px; border-radius: var(--radius-kontrol);
  font-size: calc(13px * var(--skala-font)); border: 1px solid transparent;
}
.pesan--sukses { background: var(--sukses-bg); color: var(--sukses-fg); border-color: var(--sukses-fg); }
.pesan--bahaya { background: var(--bahaya-bg); color: var(--bahaya-fg); border-color: var(--bahaya-fg); }
.pesan--peringatan { background: var(--peringatan-bg); color: var(--peringatan-fg); border-color: var(--peringatan-fg); }
.pesan--info { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   Layar kecil. Titik hentinya 900px: di bawah itu sidebar 225px memakan
   seperempat lebar layar dan tabel tujuh kolom sudah pasti meluber.

   Tombol hamburger dan tirai hanya ada di sini. Kalau jendela dilebarkan
   selagi laci terbuka, keduanya lenyap bersama media query-nya — jadi
   keadaan `laci` yang tertinggal true tidak menutupi apa pun.
   ------------------------------------------------------------------------ */
/* Tombol hamburger selalu ada: di layar besar ia melipat sidebar, di layar
   kecil ia membuka lacinya. */
.topbar__menu { display: inline-flex; }
.tirai { display: none; }

/* Sidebar dilipat di layar besar. Kelas `lipat` dipasang pada <html> oleh
   skrip kecil di <head> supaya keadaannya sudah benar sebelum cat pertama —
   bukan oleh Alpine yang dimuat `defer`. */
@media (min-width: 901px) {
  .sidebar, .topbar, .isi { transition: width .18s ease-out, left .18s ease-out, margin-left .18s ease-out; }
  .lipat .sidebar { width: 68px; }
  .lipat .sidebar__merek { justify-content: center; padding-inline: 8px; }
  .lipat .sidebar__merek > div,
  .lipat .sidebar__bawah,
  .lipat .sidebar__kaki,
  .lipat .menu__label,
  .lipat .menu__segera,
  .lipat .submenu { display: none; }
  .lipat .menu { padding-inline: 8px; }
  .lipat .menu__tautan { justify-content: center; padding: 12px 8px; }
  .lipat .topbar { left: 68px; }
  .lipat .isi { margin-left: 68px; }
}

@media (max-width: 900px) {
  .sidebar {
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    box-shadow: 0 0 24px rgba(10, 26, 51, .35);
  }
  .sidebar--buka { transform: translateX(0); }
  .lipat .sidebar { width: var(--sidebar-lebar); transform: translateX(-100%); }
  .lipat .topbar { left: 0; }
  .lipat .isi { margin-left: 0; }

  .tirai {
    display: block;
    position: fixed; inset: 0; z-index: 30;
    background: rgba(10, 26, 51, .45);
  }

  .topbar { left: 0; padding: 0 12px; gap: 10px; }
  .isi { margin-left: 0; padding: calc(var(--topbar-tinggi) + 16px) 16px 32px; }

  /* Menjadikan <table> sendiri kotak gulir — tanpa ini tiap tabel butuh
     <div> pembungkus di 19 template, dan halaman baru pasti ada yang lupa.
     Efek sampingnya lebar kolom menyusut mengikuti isi, yang memang
     diinginkan di layar sempit. */
  .tabel { display: block; overflow-x: auto; }
  /* Kepala lengket menempel pada gulir halaman; di dalam kotak gulir
     mendatar ia tidak punya arti lagi. */
  .tabel thead th { position: static; }

  .kartu { padding: 16px; }
  .dua-kolom, .tiga-kolom { gap: 16px; }
  .form { max-width: none; }

  .statistik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topbar { gap: 10px; }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .statistik { grid-template-columns: repeat(3, 1fr); }
  .dashboard-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .dashboard-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dashboard-antrian__grid { grid-template-columns: 1fr; }
  .dashboard-analitik__kartu { min-height: 250px; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 12px; }
  .topbar__kanan { gap: 10px; }
  .topbar__pengguna .tabel__sekunder { display: none; }
  .topbar__keluar .tombol { padding: 10px; font-size: 0; gap: 0; }

  .isi { padding: calc(var(--topbar-tinggi) + 12px) 12px 24px; }
  .statistik { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .statistik__kartu { min-width: 0; padding: 12px; }
  .statistik__nilai { overflow-wrap: anywhere; font-size: calc(22px * var(--skala-font)); }
  .halaman__kepala { gap: 10px; margin-bottom: 16px; }
  .halaman__aksi { margin-left: 0; }
  .billing-toolbar, .daftar-toolbar { flex-wrap: wrap; }
  .customer-toolbar { flex-wrap: wrap; }
  .dashboard-metrik__isi { grid-template-columns: 1fr; padding-inline: 12px; }
  .dashboard-bagian__kepala { align-items: flex-start; }
  .dashboard-live { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}