/* Standar komponen ISPKU — satu tempat untuk rupa tombol, kartu, huruf,
   isian, tabel, lencana, dan dasbor. Dimuat SETELAH app.css.

   app.css tetap memegang kerangka (sidebar, topbar, grid halaman, perilaku
   layar kecil). Berkas ini memegang RUPA: setiap ukuran, radius, warna, dan
   gerak komponen bersama ditetapkan di sini dari token di tokens.css, supaya
   dua halaman tidak pernah punya dua versi tombol yang sama.

   Aturan yang dipegang:
   - Sembilan ukuran huruf (--teks-*), empat berat (400/500/600/700).
   - Satu tinggi kontrol: tombol dan isian 36px, varian kecil 32px.
   - Gerak hanya transform/opacity/warna, 140–220 ms, kurva --ease-keluar.
     Efek hover hanya di perangkat berpenunjuk halus.
   - Status selalu tiga serangkai: isi, teks, latar. */

/* ── Dasar ─────────────────────────────────────────────────────────────── */
body {
  font-family: var(--huruf-teks);
  font-size: var(--teks-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
a { color: var(--accent-teks); }
.tautan-id, .panel__tautan, .tab__item--aktif, .breadcrumb a { color: var(--accent-teks); }
.tab__item--aktif { border-bottom-color: var(--accent-teks); }
/* Topologi digambar di atas kotak berwarna terang yang tetap; tulisannya
   tidak ikut memutih di tema gelap. */
.topologi__judul { fill: #181c25; }
.topologi__ket { fill: #4b5363; }
[data-theme="dark"] .topologi__gambar line { stroke: #606d80; }
h1, h2, h3, h4 { line-height: 1.25; }

/* Pengenal mesin — CID, nomor layanan, nomor invoice, IP, VLAN — memakai
   huruf selebar tetap supaya deret angkanya rata dan mudah dibandingkan. */
.mesin {
  white-space: nowrap;
  font-family: var(--huruf-mono);
  font-size: var(--teks-sm);
  font-weight: 500;
  letter-spacing: -.01em;
}
.tautan-id { font-weight: 500; text-underline-offset: 3px; }
.tautan-id:hover { text-decoration: underline; }
.angka { font-variant-numeric: tabular-nums; }

/* ── Kerangka: sidebar ─────────────────────────────────────────────────── */
/* Latar sidebar datang dari Merek Aplikasi (--sidebar-bg). Warna tulisan
   dan sorotannya diturunkan dari situ lewat variabel --sb-*: gelap secara
   bawaan, dan `.sidebar--terang` membalik semuanya bila latarnya terang. */
.sidebar {
  --sb-teks: rgba(255, 255, 255, .72);
  --sb-teks-kuat: #fff;
  --sb-redup: rgba(255, 255, 255, .46);
  --sb-hover: rgba(255, 255, 255, .08);
  --sb-sub-aktif: rgba(255, 255, 255, .12);
  --sb-garis: rgba(255, 255, 255, .08);
  --sb-aktif-bg: var(--accent);
  --sb-aktif-teks: #fff;
  background: var(--sidebar-bg); color: var(--sb-teks);
  border-right: 1px solid var(--sb-garis);
}
.sidebar--terang {
  --sb-teks: #4b5363;
  --sb-teks-kuat: #181c25;
  --sb-redup: #5a6372;
  --sb-hover: rgba(12, 17, 29, .06);
  --sb-sub-aktif: rgba(12, 17, 29, .08);
  --sb-garis: #d6dae1;
  --sb-aktif-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --sb-aktif-teks: var(--accent);
}
.sidebar__merek { padding: 16px; }
.sidebar__merek-nama { color: var(--sb-teks-kuat); font-weight: 700; letter-spacing: 0; }
.sidebar__merek-nama em { color: color-mix(in srgb, var(--accent) 60%, var(--sb-teks-kuat)); }
.sidebar__merek-sub { color: var(--sb-redup); font-size: var(--teks-2xs); }
.menu { padding: 4px 10px; display: grid; gap: 2px; }
/* Judul kelompok menu. */
.menu__grup {
  margin: 14px 0 4px; padding: 0 10px;
  font-size: var(--teks-2xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sb-redup);
}
.lipat .menu__grup { height: 1px; margin: 10px 8px; padding: 0; overflow: hidden; background: var(--sb-garis); color: transparent; }
.menu__tautan {
  min-height: 36px; padding: 0 10px; gap: 10px; color: var(--sb-teks);
  font-size: var(--teks-sm); font-weight: 500;
  border-radius: var(--radius-kontrol);
  transition: background-color var(--durasi-mikro) var(--ease-keluar),
    color var(--durasi-mikro) var(--ease-keluar);
}
.menu__tautan > i, .menu__tautan > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.menu__tautan:hover { background: var(--sb-hover); color: var(--sb-teks-kuat); }
.menu__tautan--aktif,
.menu__tautan--aktif:hover { background: var(--sb-aktif-bg); color: var(--sb-aktif-teks); font-weight: 600; }
.submenu { padding-left: 38px; margin: 2px 0 6px; display: grid; gap: 1px; }
.submenu__tautan {
  min-height: 32px; display: flex; align-items: center; padding: 0 10px;
  color: var(--sb-teks); font-size: var(--teks-sm); border-radius: var(--radius-kontrol);
  transition: background-color var(--durasi-mikro) var(--ease-keluar);
}
.submenu__tautan:hover { background: var(--sb-hover); color: var(--sb-teks-kuat); }
.submenu__tautan--aktif,
.submenu__tautan--aktif:hover { background: var(--sb-sub-aktif); color: var(--sb-teks-kuat); font-weight: 600; }
.menu__tautan--belum:hover, .submenu__tautan--belum:hover,
.menu__tautan--nonaktif:hover, .submenu__tautan--nonaktif:hover {
  background: transparent; color: var(--sb-teks);
}
.menu__segera { border-color: var(--sb-garis); color: var(--sb-redup); font-size: var(--teks-2xs); }
.sidebar__kaki { color: var(--sb-redup); font-size: var(--teks-2xs); }
.merek-pratinjau .sidebar__merek-nama { color: #fff; }

/* ── Kerangka: topbar ──────────────────────────────────────────────────── */
.topbar { padding: 0 20px; gap: 12px; }
.topbar__kanan { gap: 6px; }
.topbar__menu { width: var(--kontrol-tinggi); padding: 0; justify-content: center; }
.topbar__lepas { position: relative; }
/* Tombol ikon di topbar: tema dan lonceng. */
.topbar__ikon {
  position: relative; width: var(--kontrol-tinggi); height: var(--kontrol-tinggi);
  display: inline-grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-kontrol);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background-color var(--durasi-mikro) var(--ease-keluar),
    color var(--durasi-mikro) var(--ease-keluar), transform var(--durasi-mikro) var(--ease-keluar);
}
.topbar__ikon:hover { background: var(--surface-muted); color: var(--text); }
.topbar__ikon:active { transform: scale(.94); }
.topbar__ikon svg, .topbar__ikon i { width: 18px; height: 18px; }
.topbar__ikon-terang { display: none; }
[data-theme="dark"] .topbar__ikon-terang { display: block; }
[data-theme="dark"] .topbar__ikon-gelap { display: none; }
.topbar__lencana {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--bahaya); color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--surface);
}
.topbar__lencana[hidden] { display: none; }
.topbar__akun {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 3px 8px 3px 4px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--text); cursor: pointer; font: inherit; text-align: left;
  transition: background-color var(--durasi-mikro) var(--ease-keluar);
}
.topbar__akun:hover, .topbar__akun[aria-expanded="true"] { background: var(--surface-muted); }
.topbar__akun > svg, .topbar__akun > i { width: 14px; height: 14px; color: var(--text-subtle); }
.topbar__avatar {
  width: 32px; height: 32px; flex: none; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: var(--teks-sm); font-weight: 700;
}
.topbar__pengguna { display: grid; min-width: 0; }
.topbar__pengguna .tabel__utama { font-size: var(--teks-sm); line-height: 1.25; white-space: nowrap; }
.topbar__pengguna .tabel__sekunder { font-size: var(--teks-2xs); line-height: 1.25; text-transform: capitalize; }
.topbar__keluar { margin: 0; }

/* Panel lepas (menu akun, notifikasi). Muncul dari tombolnya: titik asal
   transformasinya di pojok kanan atas, bukan di tengah. */
.lepas {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0;
  min-width: 232px; padding: 6px; border-radius: var(--radius-kartu);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--bayangan-angkat); transform-origin: top right;
}
.lepas--masuk { transition: opacity 150ms var(--ease-keluar), transform 150ms var(--ease-keluar); }
.lepas--keluar { transition: opacity 100ms var(--ease-keluar), transform 100ms var(--ease-keluar); }
.lepas--awal { opacity: 0; transform: scale(.97) translateY(-4px); }
.lepas__identitas { display: grid; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.lepas__identitas strong { font-size: var(--teks-sm); }
.lepas__identitas span { font-size: var(--teks-xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; }
.lepas__butir {
  width: 100%; min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  border: 0; border-radius: var(--radius-kontrol); background: transparent;
  color: var(--text); font: inherit; font-size: var(--teks-sm); text-decoration: none; cursor: pointer;
  transition: background-color var(--durasi-mikro) var(--ease-keluar);
}
.lepas__butir:hover { background: var(--surface-muted); }
.lepas__butir svg, .lepas__butir i { width: 16px; height: 16px; color: var(--text-subtle); }
.lepas__butir--bahaya, .lepas__butir--bahaya svg { color: var(--bahaya-fg); }
.lepas__butir--bahaya:hover { background: var(--bahaya-bg); }
.lepas .topbar__keluar { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }

.lepas--notifikasi { width: min(380px, calc(100vw - 24px)); padding: 0; }
.lepas__kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--border); }
.lepas__isi { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; }
.notif__judul { padding: 10px 8px 4px; font-size: var(--teks-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.notif {
  --st: var(--netral); --st-fg: var(--netral-fg); --st-bg: var(--netral-bg);
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px;
  border-radius: var(--radius-kontrol); color: var(--text); text-decoration: none;
  transition: background-color var(--durasi-mikro) var(--ease-keluar);
}
a.notif:hover { background: var(--surface-muted); }
.notif[data-nada="kritis"] { --st: var(--bahaya); --st-fg: var(--bahaya-fg); --st-bg: var(--bahaya-bg); }
.notif[data-nada="antrean"] { --st: var(--jingga); --st-fg: var(--jingga-fg); --st-bg: var(--jingga-bg); }
.notif[data-nada="waspada"] { --st: var(--peringatan); --st-fg: var(--peringatan-fg); --st-bg: var(--peringatan-bg); }
.notif[data-nada="sehat"] { --st: var(--sukses); --st-fg: var(--sukses-fg); --st-bg: var(--sukses-bg); }
.notif[data-nada="info"] { --st: var(--info); --st-fg: var(--info-fg); --st-bg: var(--info-bg); }
.notif__ikon { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--st-bg); color: var(--st-fg); }
.notif__ikon svg, .notif__ikon i { width: 16px; height: 16px; }
.notif__teks { flex: 1; min-width: 0; font-size: var(--teks-sm); line-height: 1.35; }
.notif__teks small { display: block; font-size: var(--teks-2xs); color: var(--text-subtle); }
.notif__teks .mesin { font-size: var(--teks-xs); }
.notif__jumlah { flex: none; min-width: 26px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--st-bg); color: var(--st-fg); font-size: var(--teks-sm); font-variant-numeric: tabular-nums; }
/* Belum dibaca: titik di kanan dan teks lebih tegas. */
.notif--baru .notif__teks { font-weight: 600; }
.notif--baru::after { content: ""; width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--accent); }
.notif--baru:has(.notif__jumlah)::after { display: none; }
.profil__baris { margin-top: 16px; }

.isi { padding: calc(var(--topbar-tinggi) + 20px) 20px 40px; }

/* ── Kepala halaman ────────────────────────────────────────────────────── */
.halaman__kepala { align-items: center; margin-bottom: 16px; gap: 12px; }
.halaman__judul { font-size: var(--teks-xl); font-weight: 600; letter-spacing: -.01em; }
.halaman__subjudul { font-size: var(--teks-sm); color: var(--text-muted); margin-top: 2px; }
.breadcrumb { font-size: var(--teks-xs); color: var(--text-subtle); margin-top: 4px; }
.halaman__aksi { gap: 8px; align-items: center; }
.halaman__aksi form { margin: 0; display: inline-flex; }

/* ── Kartu ─────────────────────────────────────────────────────────────── */
.kartu { padding: 16px; border-radius: var(--radius-kartu); box-shadow: var(--bayangan); }
.kartu + .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, form + .kartu, .kartu + form { margin-top: 16px; }
/* Kartu di dalam grid dijaraki `gap`, bukan margin antarkartu. */
.statistik > .kartu, .tiga-kolom > .kartu, .dua-setara > .kartu,
.dashboard-kpi > .kartu, .dashboard-antrian__grid > .kartu { margin-top: 0; }
.dua-setara, .tiga-kolom, .dua-kolom { gap: 16px; }
.tiga-kolom { margin-bottom: 16px; }
.panel__judul { font-size: calc(15px * var(--skala-font)); font-weight: 600; margin: 0 0 12px; }
.panel__kepala { min-height: 32px; gap: 8px; margin-bottom: 12px; }
.panel__tautan {
  font-size: var(--teks-sm); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; margin-right: -8px; border-radius: var(--radius-kontrol);
}
.panel__tautan:hover { background: var(--accent-soft); }
.panel__tautan svg { width: 14px; height: 14px; }
/* Judul bagian di dalam satu kartu yang memuat beberapa kelompok isian. */
.kartu > .panel__judul:not(:first-child),
.kartu form > .panel__judul:not(:first-child) {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* ── Tombol ────────────────────────────────────────────────────────────── */
.tombol {
  min-height: var(--kontrol-tinggi); padding: 0 14px; gap: 6px;
  border-radius: var(--radius-kontrol); border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: var(--teks-sm); font-weight: 500; line-height: 1;
  white-space: nowrap; user-select: none;
  transition: transform var(--durasi-mikro) var(--ease-keluar),
    background-color var(--durasi-mikro) var(--ease-keluar),
    border-color var(--durasi-mikro) var(--ease-keluar),
    box-shadow var(--durasi-mikro) var(--ease-keluar);
}
.tombol svg, .tombol i { width: 16px; height: 16px; flex: none; }
.tombol:active:not(:disabled), button.tab__item:active { transform: scale(.97); }
.tombol:disabled { opacity: .55; }
.tombol--utama { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tombol--bahaya { background: var(--bahaya); border-color: var(--bahaya); color: #fff; font-weight: 600; }
.tombol--kecil { min-height: var(--kontrol-tinggi-kecil); padding: 0 10px; font-size: var(--teks-xs); }
.tombol--hantu { border-color: transparent; background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .tombol:not(:disabled):not(.tombol--utama):not(.tombol--bahaya):hover {
    background: var(--surface-muted); border-color: var(--border-kuat);
  }
  .tombol--utama:not(:disabled):hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .tombol--bahaya:not(:disabled):hover { background: var(--bahaya-fg); border-color: var(--bahaya-fg); filter: none; }
}
/* Sasaran sentuh: satu anak tangga lebih tinggi di layar sentuh. */
@media (pointer: coarse) {
  .tombol, .form__isian { min-height: 40px; }
  .aksi-ikon { width: 40px; height: 40px; }
}

/* Aksi baris: tombol ikon persegi, satu ukuran di semua tabel. */
.tabel__aksi { gap: 4px; }
.aksi-ikon {
  width: 32px; height: 32px; border-radius: var(--radius-kontrol);
  border: 1px solid transparent; background: transparent; color: var(--text-muted);
  transition: background-color var(--durasi-mikro) var(--ease-keluar),
    color var(--durasi-mikro) var(--ease-keluar),
    transform var(--durasi-mikro) var(--ease-keluar);
}
.aksi-ikon:active { transform: scale(.94); }
.aksi-ikon:hover { background: var(--accent-soft); color: var(--accent-teks); border-color: transparent; }
.aksi-ikon--bahaya:hover { background: var(--bahaya-bg); color: var(--bahaya-fg); border-color: transparent; }
.aksi-ikon i, .aksi-ikon svg { width: 16px; height: 16px; }
/* Aksi baris yang belum diberi kelas tetap tampil sebagai tombol ikon. */
.tabel__aksi > a:not([class]), .tabel__aksi > button:not([class]),
.tabel__aksi form > button:not([class]) {
  width: 32px; height: 32px; flex: none; padding: 0;
  display: inline-grid; place-items: center;
  border: 0; border-radius: var(--radius-kontrol);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background-color var(--durasi-mikro) var(--ease-keluar), color var(--durasi-mikro) var(--ease-keluar);
}
.tabel__aksi > a:not([class]):hover, .tabel__aksi > button:not([class]):hover,
.tabel__aksi form > button:not([class]):hover { background: var(--accent-soft); color: var(--accent); }
.tabel__aksi svg, .tabel__aksi i { width: 16px; height: 16px; }

/* ── Formulir ──────────────────────────────────────────────────────────── */
.form__label { font-size: var(--teks-sm); font-weight: 500; margin: 14px 0 6px; }
.form__isian {
  min-height: var(--kontrol-tinggi); padding: 7px 10px;
  border: 1px solid var(--border-kuat); border-radius: var(--radius-kontrol);
  font-size: var(--teks-base); line-height: 1.4;
  transition: border-color var(--durasi-mikro) var(--ease-keluar),
    box-shadow var(--durasi-mikro) var(--ease-keluar);
}
.form__isian::placeholder { color: var(--text-subtle); opacity: .75; }
.form__isian:hover { border-color: var(--text-muted); }
.form__isian:focus {
  outline: none; border-color: var(--fokus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent);
}
.form__isian:disabled, .form__isian[readonly] { background: var(--surface-muted); color: var(--text-muted); }
select.form__isian { padding-right: 28px; }
textarea.form__isian { min-height: 84px; }
.form__isian[type="file"] { padding: 5px; }
.form__isian[type="file"]::file-selector-button {
  margin-right: 10px; padding: 4px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-kecil); background: var(--surface-muted);
  font: inherit; font-size: var(--teks-xs); font-weight: 500; cursor: pointer;
}
/* Satu tinggi untuk semua isian sebaris — tanggal, pemilih, dan teks. */
.form__isian:not(textarea):not([type="file"]):not([type="checkbox"]):not([type="radio"]) { height: var(--kontrol-tinggi); }
/* Label pertama tidak menambah jarak di atas padding kartunya. */
form > .form__label:first-of-type, .kartu > .form__label:first-child { margin-top: 0; }
.form-grid { margin-top: -6px; }
.form__bantuan + .form__isian, .form__bantuan + form { margin-top: 8px; }
.form__bantuan { font-size: var(--teks-xs); color: var(--text-subtle); margin: 6px 0 0; line-height: 1.45; }
.form__galat { font-size: var(--teks-xs); color: var(--bahaya-fg); font-weight: 500; margin: 6px 0 0; }
.form__aksi { gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.form-grid { column-gap: 16px; row-gap: 2px; }
/* Kotak centang beserta labelnya, sebaris. */
.form__cek {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0;
  font-size: var(--teks-sm); cursor: pointer;
}
.form__cek input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Isian pencarian dan pemilih di bilah filter memakai rupa isian yang sama. */
.cari input, .filter-baris select, .paginasi__per-halaman select {
  min-height: var(--kontrol-tinggi); border: 1px solid var(--border-kuat);
  border-radius: var(--radius-kontrol); background: var(--surface);
  font-size: var(--teks-sm); font-family: inherit;
}
.cari input:focus, .filter-baris select:focus {
  outline: none; border-color: var(--fokus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent);
}
.filter-baris, .daftar-toolbar, .customer-toolbar, .billing-toolbar, .layanan-toolbar { margin: 12px 0; gap: 8px; }
.filter-panel { gap: 10px 16px; }
.filter-panel__medan--aksi { display: flex; gap: 8px; }
.filter-panel__medan--aksi .tombol { flex: 1; width: auto; }
/* Tombol Filter sebaris dengan tombol lain di bilahnya. */
.filter-lanjutan { margin: 0 0 12px; }
.filter-panel__toggle { margin-bottom: 0; }
.filter-lanjutan[open] > summary { margin-bottom: 10px; }
.billing-toolbar .filter-lanjutan, .layanan-toolbar .filter-lanjutan,
.customer-toolbar .filter-lanjutan, .daftar-toolbar .filter-lanjutan { margin: 0; }

/* ── Tabel ─────────────────────────────────────────────────────────────── */
.tabel { font-size: var(--teks-sm); }
.tabel thead th {
  background: var(--surface-muted); color: var(--text-muted);
  font-size: var(--teks-xs); font-weight: 600; padding: 9px 12px;
  white-space: nowrap;
}
.tabel thead th:first-child { border-top-left-radius: var(--radius-kontrol); }
.tabel thead th:last-child { border-top-right-radius: var(--radius-kontrol); }
.tabel tbody td { padding: 10px 12px; vertical-align: middle; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr { transition: background-color var(--durasi-mikro) var(--ease-keluar); }
.tabel tbody tr:hover { background: color-mix(in srgb, var(--surface-muted) 45%, transparent); }
.tabel__utama { font-weight: 600; }
.tabel__sekunder { font-size: var(--teks-xs); color: var(--text-subtle); }
.tabel--rapat tbody td { padding: 3px 8px; }

/* Keadaan kosong: satu rupa untuk baris tabel maupun paragraf. */
.kosong, .tabel tbody td[colspan] {
  padding: 28px 16px; text-align: center;
  color: var(--text-subtle); font-size: var(--teks-sm);
}
.kosong svg, .kosong i { width: 20px; height: 20px; display: block; margin: 0 auto 8px; }
.tabel--rapat tbody td[colspan] { padding: 8px; text-align: left; }

/* ── Lencana ───────────────────────────────────────────────────────────── */
.lencana {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--radius-pil);
  font-size: var(--teks-xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.lencana--biru { color: var(--info-fg); background: var(--info-bg); }

/* ── Tab, paginasi, pesan ──────────────────────────────────────────────── */
.tab { gap: 2px; }
.tab__item {
  padding: 9px 12px; font-size: var(--teks-sm); font-weight: 500;
  transition: color var(--durasi-mikro) var(--ease-keluar),
    border-color var(--durasi-mikro) var(--ease-keluar);
}
.tab__item:hover { color: var(--text); }
a.tab__item, button.tab__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tab__item svg, .tab__item i { width: 16px; height: 16px; flex: none; }
.tab__item--aktif { font-weight: 600; }

.paginasi { padding: 12px 4px 0; gap: 8px; }
.paginasi__info { font-size: var(--teks-xs); color: var(--text-subtle); }
.paginasi__halaman, .paginasi__elipsis { min-width: 32px; height: 32px; font-size: var(--teks-xs); }
.paginasi__halaman { transition: background-color var(--durasi-mikro) var(--ease-keluar); }
.paginasi__halaman:not(.paginasi__halaman--aktif):not(.paginasi__panah--mati):hover { background: var(--surface-muted); }
.paginasi__per-halaman select { height: 32px; min-height: 32px; font-size: var(--teks-xs); }

.pesan-tumpuk { gap: 8px; margin-bottom: 12px; }
.pesan {
  padding: 10px 12px; border-radius: var(--radius-kontrol);
  font-size: var(--teks-sm); font-weight: 500;
  /* Pesan baru masuk dengan halus; dipicu sekali saat dirender. */
  animation: pesan-masuk var(--durasi-masuk) var(--ease-keluar) both;
}
.pesan--sukses { border-color: color-mix(in srgb, var(--sukses) 40%, transparent); }
.pesan--bahaya { border-color: color-mix(in srgb, var(--bahaya) 40%, transparent); }
.pesan--peringatan { border-color: color-mix(in srgb, var(--peringatan) 45%, transparent); }
.pesan--info { background: var(--info-bg); color: var(--info-fg); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.pesan a { color: inherit; font-weight: 600; font-family: inherit; font-size: inherit; }
@keyframes pesan-masuk { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.live-update { border-radius: var(--radius-kartu); box-shadow: var(--bayangan-angkat); font-size: var(--teks-sm); }

/* Aksi di kaki kartu samping tidak menempel ke isi di atasnya. */
.detail-baris + form, .detail-baris + .tombol, .tabel + form, .kartu > form + form { margin-top: 12px; }
.peringatan-kartu { border-color: color-mix(in srgb, var(--peringatan) 45%, transparent); }
.paginasi__per-halaman select { border-color: var(--border); }

/* ── Baris detail ──────────────────────────────────────────────────────── */
.detail-baris { font-size: var(--teks-sm); }
.detail-baris > span:first-child { color: var(--text-muted); }

/* ── Kartu statistik ───────────────────────────────────────────────────── */
/* Ikon di kiri, angka dan label di kanan — padat, dan seragam di semua
   halaman daftar. Warna ikon lewat pengubah `--{nada}`, bukan style sebaris. */
/* Sampai lima kartu sebaris; bila hanya empat, keempatnya mengisi baris
   tanpa meninggalkan lubang di kanan. */
.statistik { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.statistik__kartu {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px; align-content: center; align-items: center;
  padding: 12px 14px; min-height: 76px;
}
.statistik__ikon {
  grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0;
  border-radius: var(--radius-kartu); background: var(--netral-bg); color: var(--netral-fg);
}
.statistik__ikon svg, .statistik__ikon i { width: 20px; height: 20px; }
.statistik__ikon--biru { background: var(--info-bg); color: var(--info-fg); }
.statistik__ikon--hijau { background: var(--sukses-bg); color: var(--sukses-fg); }
.statistik__ikon--ungu { background: var(--ungu-bg); color: var(--ungu-fg); }
.statistik__ikon--jingga { background: var(--jingga-bg); color: var(--jingga-fg); }
.statistik__ikon--kuning { background: var(--peringatan-bg); color: var(--peringatan-fg); }
.statistik__ikon--merah { background: var(--bahaya-bg); color: var(--bahaya-fg); }
.statistik__ikon--netral { background: var(--netral-bg); color: var(--netral-fg); }
.statistik__label {
  font-size: var(--teks-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.statistik__nilai {
  font-size: var(--teks-xl); font-weight: 700; line-height: 1.15; margin: 0;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.statistik__banding { font-size: var(--teks-2xs); color: var(--text-subtle); margin: 0; }
.statistik--ringkas-customer .statistik__kartu { padding: 12px 14px; }
.statistik--ringkas-customer .statistik__ikon { width: 40px; height: 40px; margin: 0; }
.statistik--ringkas-customer .statistik__nilai { font-size: var(--teks-xl); }
a.statistik__kartu { text-decoration: none; color: inherit; }

/* Kartu pintasan (ringkasan Network): seluruh kartu adalah tautannya. */
.inventory-aksi__kartu { padding: 0; min-height: 0; }
.inventory-aksi__kartu .aksi-cepat__item {
  min-height: 76px; padding: 14px 16px; gap: 12px; border: 0;
  border-radius: var(--radius-kartu);
  transition: background-color var(--durasi-mikro) var(--ease-keluar);
}
.inventory-aksi__kartu .aksi-cepat__item > svg,
.inventory-aksi__kartu .aksi-cepat__item > i {
  width: 40px; height: 40px; flex: none; padding: 10px; border-radius: var(--radius-kartu);
  background: var(--info-bg); color: var(--info-fg);
}
.inventory-aksi__kartu .tabel__sekunder { min-height: 0; }
.aksi-cepat__item:hover { background: var(--surface-muted); }

/* ── Grafik ────────────────────────────────────────────────────────────── */
/* SVG grafik menskala bersama lebarnya, hurufnya ikut. Lebar dibatasi
   supaya di kartu lebar hurufnya tidak membesar jadi raksasa; di panel
   sempit view mengirim kanvas yang lebih kecil. */
.grafik__kanvas { max-width: 760px; margin-inline: auto; }
.grafik__legenda { font-size: var(--teks-xs); color: var(--text-muted); }
.grafik__titik--tagihan { background: var(--grafik-1); }
.grafik__titik--dibayar { background: var(--grafik-3); }
.grafik__garis--tagihan { stroke: var(--grafik-1); }
.grafik__garis--dibayar { stroke: var(--grafik-3); }
.grafik__noktah--tagihan { fill: var(--grafik-1); }
.grafik__noktah--dibayar { fill: var(--grafik-3); }
.grafik__noktah { transition: r var(--durasi-mikro) var(--ease-keluar); cursor: default; }
.grafik__noktah:hover { r: 5.5; }

/* ═════════════════════════════════════════════════════════════════════════
   DASBOR
   Satu rangkaian komponen untuk semua peran. Tiap angka adalah tautan ke
   daftar yang tersaring; nol tampil dengan nada sehat.
   ═════════════════════════════════════════════════════════════════════ */
.db { display: flex; flex-direction: column; gap: 14px; max-width: 1480px; min-width: 0; }

/* Nada status diwariskan lewat tiga variabel; komponen di bawah hanya
   membaca --st, --st-fg, --st-bg. */
.db [data-nada], .db-cip, .db-kpi__ubin {
  --st: var(--netral); --st-fg: var(--netral-fg); --st-bg: var(--netral-bg);
}
/* Nama nada milik lencana (sukses, jingga, …) diterima sebagai alias. */
.db [data-nada="sukses"], .db [data-nada="hijau"] { --st: var(--sukses); --st-fg: var(--sukses-fg); --st-bg: var(--sukses-bg); }
.db [data-nada="peringatan"] { --st: var(--peringatan); --st-fg: var(--peringatan-fg); --st-bg: var(--peringatan-bg); }
.db [data-nada="jingga"] { --st: var(--jingga); --st-fg: var(--jingga-fg); --st-bg: var(--jingga-bg); }
.db [data-nada="bahaya"], .db [data-nada="merah"] { --st: var(--bahaya); --st-fg: var(--bahaya-fg); --st-bg: var(--bahaya-bg); }
.db [data-nada="biru"] { --st: var(--info); --st-fg: var(--info-fg); --st-bg: var(--info-bg); }
.db [data-nada="sehat"] { --st: var(--sukses); --st-fg: var(--sukses-fg); --st-bg: var(--sukses-bg); }
.db [data-nada="waspada"] { --st: var(--peringatan); --st-fg: var(--peringatan-fg); --st-bg: var(--peringatan-bg); }
.db [data-nada="antrean"] { --st: var(--jingga); --st-fg: var(--jingga-fg); --st-bg: var(--jingga-bg); }
.db [data-nada="kritis"] { --st: var(--bahaya); --st-fg: var(--bahaya-fg); --st-bg: var(--bahaya-bg); }
.db [data-nada="info"] { --st: var(--info); --st-fg: var(--info-fg); --st-bg: var(--info-bg); }
.db [data-nada="ungu"] { --st: var(--ungu); --st-fg: var(--ungu-fg); --st-bg: var(--ungu-bg); }

/* Hero: sapaan, satu kalimat ringkasan, pemilih, dan deret KPI. */
.db-hero {
  position: relative; display: grid; gap: 14px; padding: 20px;
  border-radius: 16px; border: 1px solid var(--border); overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--hero-atas), var(--hero-bawah));
}
.db-hero__atas { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.db-hero__teks { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 320px; }
.db-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: var(--teks-xs); color: var(--text-muted);
}
.db-titik { width: 8px; height: 8px; border-radius: 999px; background: var(--sukses); display: inline-block; }
.db-hero h1 { font-size: var(--teks-xl); font-weight: 600; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.db-ringkas { font-size: var(--teks-base); color: var(--text-muted); margin: 0; max-width: 68ch; text-wrap: pretty; }
.db-ringkas b, .db-ringkas a { color: var(--text); font-weight: 600; }
.db-ringkas a { text-decoration: underline; text-decoration-color: var(--border-kuat); text-underline-offset: 3px; }
.db-ringkas a:hover { text-decoration-color: currentColor; }
.db-hero__aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* Pemilih berbentuk pil (rentang waktu, cakupan). */
.db-pil { display: flex; flex-wrap: wrap; gap: 6px; }
.db-pil a {
  min-height: 32px; padding: 0 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--teks-sm); font-weight: 500; text-decoration: none;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text-muted);
  transition: background-color var(--durasi-mikro) var(--ease-keluar),
    border-color var(--durasi-mikro) var(--ease-keluar), color var(--durasi-mikro) var(--ease-keluar);
}
.db-pil a:hover { border-color: var(--accent); color: var(--text); }
.db-pil a[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent-teks); color: var(--accent-teks); font-weight: 600; }

/* KPI: empat ubin, semuanya tautan. */
.db-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.db-kpi--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.db-kpi__ubin {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  min-height: 76px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  transition: transform 160ms var(--ease-keluar), border-color 160ms var(--ease-keluar),
    box-shadow 160ms var(--ease-keluar);
}
.db-kpi__ubin:active { transform: scale(.985); }
.db-kpi__ubin:focus-visible { outline: 2px solid var(--st); outline-offset: 2px; }
.db-kpi__ikon {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; background: var(--st-bg); color: var(--st-fg);
}
.db-kpi__ikon svg, .db-kpi__ikon i { width: 20px; height: 20px; }
.db-kpi__angka { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.db-kpi__bawah { display: flex; align-items: center; gap: 8px; min-width: 0; }
.db-kpi__bawah .db-kpi__label { flex: 0 1 auto; min-width: 0; }
.db-kpi__bawah .db-kata { flex: none; }
.db-kpi__n {
  font-size: calc(26px * var(--skala-font)); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
.db-kpi__n small { font-size: var(--teks-base); font-weight: 600; }
.db-kpi__label {
  font-size: var(--teks-sm); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Kata status: titik + kata, tidak pernah hanya warna. */
.db-kata {
  flex: none; font-size: var(--teks-2xs); font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--st-bg); color: var(--st-fg); white-space: nowrap;
}
.db-kata::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  background: currentColor; margin-right: 5px; vertical-align: 1px;
}

/* Strip "Perlu tindakan": cip berbilang jumlah. */
.db-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
}
.db-strip__judul { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--teks-base); margin-right: 4px; }
.db-strip__judul svg, .db-strip__judul i { width: 18px; height: 18px; color: var(--accent-teks); }
.db-cip {
  min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 5px 0 12px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--st) 45%, transparent);
  background: var(--st-bg); color: var(--text); font-size: var(--teks-sm); text-decoration: none;
  transition: border-color 160ms var(--ease-keluar), transform 160ms var(--ease-keluar);
}
.db-cip:active { transform: scale(.97); }
.db-cip b {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: inline-grid; place-items: center; background: var(--surface); color: var(--st-fg);
  font-variant-numeric: tabular-nums; font-size: var(--teks-sm);
}
.db-strip__semua {
  margin-left: auto; min-height: 36px; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--teks-sm); font-weight: 600; text-decoration: none; padding: 0 6px;
}
.db-strip__beres { display: inline-flex; align-items: center; gap: 6px; font-size: var(--teks-sm); color: var(--sukses-fg); font-weight: 500; }
.db-strip__beres svg, .db-strip__beres i { width: 16px; height: 16px; }

/* Kartu domain: satu area kerja, satu angka utama, bilah komposisi, dan
   empat angka bertautan. */
.db-grid-domain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.db-grid-domain--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-kd {
  --h: var(--info); --h-fg: var(--info-fg); --h-bg: var(--info-bg);
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
}
.db-kd[data-domain="customer"] { --h: #4a43d2; --h-fg: #3f38c4; --h-bg: #eeedfc; }
.db-kd[data-domain="billing"] { --h: #298e60; --h-fg: #126840; --h-bg: #e7f8f0; }
.db-kd[data-domain="tiket"] { --h: #b537c2; --h-fg: #9027a0; --h-bg: #f9ebfb; }
.db-kd[data-domain="network"] { --h: #2083b6; --h-fg: #14638f; --h-bg: #e6f3fa; }
.db-kd[data-domain="layanan"] { --h: #6a9c1c; --h-fg: #47700b; --h-bg: #f0f8e2; }
[data-theme="dark"] .db-kd { --h: hsl(210 85% 62%); --h-fg: hsl(210 90% 76%); --h-bg: hsl(212 45% 15%); }
[data-theme="dark"] .db-kd[data-domain="customer"] { --h: #8b85f0; --h-fg: #aba6f6; --h-bg: #211f47; }
[data-theme="dark"] .db-kd[data-domain="billing"] { --h: hsl(152 55% 48%); --h-fg: hsl(152 60% 62%); --h-bg: hsl(152 40% 13%); }
[data-theme="dark"] .db-kd[data-domain="tiket"] { --h: #d06bdc; --h-fg: #e29aea; --h-bg: #3a1840; }
[data-theme="dark"] .db-kd[data-domain="network"] { --h: #4aa8d8; --h-fg: #7cc4ea; --h-bg: #10303f; }
[data-theme="dark"] .db-kd[data-domain="layanan"] { --h: #9bc53d; --h-fg: #b9dc6b; --h-bg: #26330f; }
.db-kd__kepala { display: flex; align-items: center; gap: 10px; min-width: 0; }
.db-kd__ikon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: grid; place-items: center; background: var(--h-bg); color: var(--h-fg);
}
.db-kd__ikon svg, .db-kd__ikon i { width: 20px; height: 20px; }
.db-kd h2 { font-size: calc(15px * var(--skala-font)); font-weight: 600; margin: 0; line-height: 1.2; }
.db-buka {
  margin-left: auto; min-height: 32px; display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px; border-radius: 8px; font-size: var(--teks-sm); font-weight: 600;
  color: var(--h-fg, var(--accent)); text-decoration: none;
  transition: background-color var(--durasi-mikro) var(--ease-keluar);
}
.db-buka:hover { background: var(--h-bg, var(--accent-soft)); }
.db-buka svg, .db-buka i { width: 14px; height: 14px; }
.db-kd__utama { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.db-kd__utama a { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--h-fg); }
.db-kd__utama a:hover .db-kd__n { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.db-kd__n {
  font-size: var(--teks-3xl); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.db-kd__n small { font-size: var(--teks-lg); }
.db-kd__s { font-size: var(--teks-sm); color: var(--text-muted); }

.db-bilah { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-muted); gap: 2px; }
.db-bilah span { display: block; height: 100%; min-width: 4px; background: var(--st, var(--h)); }
.db-legenda { display: flex; flex-wrap: wrap; gap: 6px; }
.db-legenda a {
  min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--border); font-size: var(--teks-xs);
  color: var(--text); text-decoration: none;
  transition: border-color var(--durasi-mikro) var(--ease-keluar), background-color var(--durasi-mikro) var(--ease-keluar);
}
.db-legenda a:hover { border-color: var(--st, var(--h)); background: var(--st-bg, var(--h-bg)); }
.db-legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--st, var(--h)); }
.db-legenda b { font-variant-numeric: tabular-nums; }

.db-tautan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.db-tautan a {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px 8px 12px;
  border-radius: 10px; background: color-mix(in srgb, var(--surface-muted) 45%, transparent);
  border: 1px solid transparent; text-decoration: none; color: var(--text);
  transition: border-color 160ms var(--ease-keluar), background-color 160ms var(--ease-keluar);
}
.db-tautan a:hover { border-color: var(--h); background: var(--h-bg); }
.db-tautan__t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.db-tautan__t span { font-size: var(--teks-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-tautan__t small { font-size: var(--teks-2xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-tautan__v {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(17px * var(--skala-font)); font-weight: 700; font-variant-numeric: tabular-nums;
}
.db-tautan a[data-nada] .db-tautan__v { color: var(--st-fg); }
.db-tautan a[data-nada] .db-tautan__v::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }

/* Panel daftar ringkas di baris bawah. */
.db-grid-bawah { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.db-grid-bawah--2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.db-panel {
  position: relative; padding: 16px; border-radius: 14px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.db-panel__kepala { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-height: 32px; }
.db-panel__kepala h2 { font-size: calc(15px * var(--skala-font)); font-weight: 600; margin: 0; }
.db-panel__kepala .db-pil, .db-panel__kepala .db-buka { margin-left: auto; }
.db-chev { width: 16px; height: 16px; color: var(--text-subtle); flex: none; }
.db-kosong--netral { color: var(--text-subtle); }
.db-baris__ikon { font-size: var(--teks-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.db-panel__sub { font-size: var(--teks-xs); color: var(--text-subtle); margin: -2px 0 8px; }
.db-baris {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 4px 6px; margin: 0 -6px; border-radius: 8px;
  text-decoration: none; color: var(--text);
  transition: background-color var(--durasi-mikro) var(--ease-keluar);
}
a.db-baris:hover { background: color-mix(in srgb, var(--surface-muted) 60%, transparent); }
a.db-baris:active { transform: scale(.995); }
.db-baris__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.db-baris__t span { font-size: var(--teks-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-baris__t small { font-size: var(--teks-2xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-baris__v { font-size: var(--teks-base); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-baris__ikon {
  width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--st-bg, var(--netral-bg)); color: var(--st-fg, var(--netral-fg));
}
.db-baris__ikon svg, .db-baris__ikon i { width: 16px; height: 16px; }
.db-meter { display: block; height: 4px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin-top: 4px; }
.db-meter i { display: block; height: 100%; background: var(--st, var(--accent)); transform-origin: left center; }
.db-kosong { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: var(--teks-sm); color: var(--sukses-fg); }
.db-kosong svg, .db-kosong i { width: 18px; height: 18px; }
.db-baris small .mesin, .db-baris small.mesin, .db-kd__s .mesin { font-size: var(--teks-2xs); font-weight: 500; }
.db-waktu { font-size: var(--teks-2xs); color: var(--text-subtle); white-space: nowrap; }
.db-panel .grafik { margin-top: 4px; }

/* Hover hanya di perangkat berpenunjuk halus: di layar sentuh hover menempel
   setelah ketukan. */
@media (hover: hover) and (pointer: fine) {
  .db-kpi__ubin:hover {
    transform: translateY(-1px); border-color: var(--st);
    box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--st) 60%, transparent);
  }
  .db-cip:hover { border-color: var(--st); transform: translateY(-1px); }
}

/* Masuk bertahap, sekali per muat halaman; bukan pada pembaruan langsung. */
.db > * { animation: db-masuk 260ms var(--ease-keluar) both; }
.db > *:nth-child(2) { animation-delay: 40ms; }
.db > *:nth-child(3) { animation-delay: 80ms; }
.db > *:nth-child(4) { animation-delay: 120ms; }
.db > *:nth-child(5) { animation-delay: 160ms; }
.db > *:nth-child(n+6) { animation-delay: 200ms; }
@keyframes db-masuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .db-kpi, .db-kpi--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-grid-domain, .db-grid-domain--3, .db-grid-bawah, .db-grid-bawah--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .db { gap: 12px; }
  .db-hero { padding: 14px; border-radius: 14px; }
  .db-hero h1 { font-size: calc(19px * var(--skala-font)); }
  .db-kpi { gap: 8px; }
  .db-kpi__ubin { grid-template-columns: minmax(0, 1fr); min-height: 88px; padding: 10px 12px; }
  .db-kpi__ikon { display: none; }
  .db-kpi__bawah { flex-direction: column; align-items: flex-start; gap: 4px; }
  .db-kpi__angka { flex-direction: column; align-items: flex-start; gap: 4px; }
  .db-kpi__label { white-space: normal; }
  .db-strip__semua { margin-left: 0; }
  .db-tautan { grid-template-columns: minmax(0, 1fr); }
  .db-kd__n { font-size: calc(30px * var(--skala-font)); }
  .statistik__kartu { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .db > *, .pesan { animation: none; }
  .db-kpi__ubin, .db-cip, .tombol, .aksi-ikon { transition: none; }
}

/* Halaman sedang diambil (pindah menu tanpa muat ulang): isi sedikit
   diredupkan bila jawabannya lambat, tanpa melompat. */
#konten-utama[aria-busy="true"] { opacity: .6; transition: opacity 120ms var(--ease-keluar) 150ms; }

/* ── Keterangan (?) ───────────────────────────────────────────────────────
   Keterangan panjang tidak lagi memenuhi halaman: static/js/ui.js
   memindahkannya ke balik tombol tanda tanya di samping label atau judulnya.
   Tanpa JavaScript paragrafnya tetap tampil seperti biasa. */
.bantuan-tombol {
  width: 18px; height: 18px; margin-left: 6px; padding: 0; vertical-align: text-bottom;
  display: inline-grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--border-kuat); background: var(--surface);
  color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background-color var(--durasi-mikro) var(--ease-keluar),
    color var(--durasi-mikro) var(--ease-keluar), border-color var(--durasi-mikro) var(--ease-keluar);
}
.bantuan-tombol:hover, .bantuan-tombol[aria-expanded="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.bantuan-pop {
  position: fixed; inset: auto; margin: 0; max-width: min(340px, calc(100vw - 16px));
  padding: 10px 12px; border-radius: var(--radius-kartu);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  box-shadow: var(--bayangan-angkat);
  font-size: var(--teks-sm); font-weight: 400; line-height: 1.5; text-align: left;
  transform-origin: top left; opacity: 1; transform: none;
  transition: opacity 140ms var(--ease-keluar), transform 140ms var(--ease-keluar),
    display 140ms allow-discrete, overlay 140ms allow-discrete;
}
.bantuan-pop:not(:popover-open) { opacity: 0; transform: scale(.97); }
@starting-style { .bantuan-pop:popover-open { opacity: 0; transform: scale(.97); } }
.bantuan-pop code { font-family: var(--huruf-mono); font-size: var(--teks-xs); background: var(--surface-muted); padding: 1px 4px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .bantuan-pop { transition: none; } }

/* ── Tabel standar (static/js/tabel.js) ───────────────────────────────────
   Tata letak dan ukurannya mengikuti tabel Transit Pak: kartu bilah alat di
   atas, cip saringan, lalu kartu tabel yang memuat bilah aksi massal, tabel,
   dan kaki paginasi. */

/* Sebelum tabel.js selesai merakit, bilah saringan versi templat disembunyikan
   supaya tidak sempat berkedip dalam bentuk lamanya. Kelas ini dipasang skrip
   sebaris di <head> dan dicabut sendiri bila tabel.js gagal dimuat. */
.tabel-menunggu #konten-utama :is(.filter-lanjutan, .daftar-toolbar) { visibility: hidden; }

/* Kartu bilah alat. */
.kartu.alat {
  position: sticky; top: calc(var(--topbar-tinggi) + 4px); z-index: 15;
  padding: 8px 12px; border-radius: var(--radius-besar);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: blur(8px);
}
.kartu.alat + .kartu, .kartu.alat + .alat__cip-baris, .alat__cip-baris + .kartu { margin-top: 12px; }
.alat__baris { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.alat__kanan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.alat__kanan form { margin: 0; }
.alat .tombol--kecil { min-height: var(--kontrol-tinggi); font-size: var(--teks-sm); }
.alat__cari { position: relative; flex: 1 1 240px; max-width: 384px; }
.alat__cari > svg, .alat__cari > i {
  position: absolute; left: 12px; top: 50%; width: 16px; height: 16px;
  transform: translateY(-50%); color: var(--text-subtle); pointer-events: none;
}
.alat__cari-isian {
  width: 100%; height: var(--kontrol-tinggi); padding: 0 12px 0 36px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--teks-base);
  transition: border-color var(--durasi-mikro) var(--ease-keluar), box-shadow var(--durasi-mikro) var(--ease-keluar);
}
.alat__cari-isian::placeholder { color: var(--text-subtle); opacity: .8; }
.alat__cari-isian:focus {
  outline: none; border-color: var(--fokus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent);
}
.alat__saring-tombol { border-radius: 8px; }
.alat__saring-tombol--aktif { border-color: var(--accent-teks); color: var(--accent-teks); background: var(--surface-muted); font-weight: 600; }
.alat__hitung {
  min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: var(--teks-xs); font-weight: 600;
}
/* Panel saringan: satu baris isian di bawah bilahnya. */
.alat__panel { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.alat__panel[hidden] { display: none; }
.alat__saring { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0; }
.alat__saring > *, .alat__saring .filter-panel__medan { margin: 0; }
.alat__saring :is(.filter-panel__medan, .form-grid__medan) { display: flex; flex-direction: column; flex: 0 1 200px; min-width: 150px; }
.alat__saring .form__label { margin: 0 0 4px; font-size: var(--teks-2xs); font-weight: 600; color: var(--text-subtle); }
.alat__saring :is(select, input:not([type="checkbox"]):not([type="radio"])) {
  width: 100%; min-width: 150px; height: var(--kontrol-tinggi); padding: 0 10px;
  border: 1px solid var(--border-kuat); border-radius: var(--radius-kontrol);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--teks-sm);
}
.alat__saring > :is(select, input) { flex: 0 1 200px; width: auto; }
.alat__saring .filter-panel__medan--aksi { flex: 0 0 auto; min-width: 0; }
.alat__saring .filter-panel__medan--aksi .tombol { width: auto; flex: none; }
.alat__lencana-kolom { padding: 1px 5px; border-radius: 4px; background: var(--surface-muted); font-size: 10px; font-weight: 600; }
.alat__lencana-kolom[hidden] { display: none; }

/* Cip "Disaring:". */
.alat__cip-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--teks-sm); }
.alat__cip-label { color: var(--text-subtle); font-size: var(--teks-xs); font-weight: 600; }
.alat__cip {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 10px; min-height: 28px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: var(--teks-xs);
}
.alat__cip-lepas {
  width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 999px;
  color: var(--text-subtle); text-decoration: none; font-size: 15px; line-height: 1;
}
.alat__cip-lepas:hover { background: var(--bahaya-bg); color: var(--bahaya-fg); }
.alat__cip-semua { margin-left: 4px; font-size: var(--teks-xs); font-weight: 600; text-decoration: none; }

/* Menu Kolom. */
.tabel-alat__kolom .pemilih-kolom__panel, .alat .pemilih-kolom__panel {
  left: auto; right: 0; width: 240px; max-height: 320px; overflow-y: auto; padding: 8px;
  border-radius: 12px; box-shadow: var(--bayangan-angkat); z-index: 30;
}
.pemilih-kolom__judul { padding: 4px 8px 6px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.pemilih-kolom__baris { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: var(--teks-base); }
.pemilih-kolom__baris:hover { background: var(--bg); }
.pemilih-kolom__baris input { accent-color: var(--accent); }
.pemilih-kolom__kaki { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }

/* Kartu tabel. */
.kartu.tabel-kartu { padding: 0; overflow: hidden; border-radius: var(--radius-besar); }
.tabel-kartu > :is(.panel__kepala, .panel__judul, .form__bantuan) { margin: 0; padding: 14px 16px 0; }
.tabel-kartu > .panel__kepala + .tabel-bungkus, .tabel-kartu > .panel__judul + .tabel-bungkus { margin-top: 12px; }
.tabel-bungkus { overflow-x: auto; }
.tabel-bungkus .tabel { font-size: var(--teks-base); }
.tabel-bungkus .tabel thead th {
  position: relative; top: auto; padding: 12px 16px; border-radius: 0;
  background: var(--bg); border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-subtle); white-space: nowrap;
}
.tabel-bungkus .tabel tbody td { padding: 12px 16px; }
.tabel-bungkus .tabel tbody tr:hover { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); }
.tabel__baris--tersaring { display: none; }
.tabel__pilih { width: 40px; padding-right: 0 !important; }
.tabel__pilih input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.tabel tbody tr.tabel__baris--dipilih,
.tabel tbody tr.tabel__baris--dipilih:hover { background: var(--accent-soft); }
.tabel__sel--sembunyi { display: none; }
/* Kolom aksi tetap terlihat saat tabel digulir ke samping; bayangannya hanya
   muncul selagi ada isi yang tersembunyi di kanan. */
.tabel-bungkus .tabel :is(th, td).tabel__aksi-lengket {
  position: sticky; right: 0; z-index: 2; width: 1px; white-space: nowrap;
  background: var(--surface); border-left: 1px solid var(--border);
}
.tabel-bungkus .tabel thead th.tabel__aksi-lengket { background: var(--bg); z-index: 3; }
.tabel-bungkus .tabel tbody tr:hover td.tabel__aksi-lengket { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); }
.tabel-bungkus .tabel tbody tr.tabel__baris--dipilih td.tabel__aksi-lengket { background: var(--accent-soft); }
.tabel-bungkus[data-ada-kanan] .tabel__aksi-lengket { box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .28); }
/* Setelah satu kolom digeser, lebar semua kolom dipegang sendiri. */
.tabel--lebar-tetap { table-layout: fixed; width: max-content; min-width: 100%; }
.tabel--lebar-tetap td { overflow: hidden; text-overflow: ellipsis; }
.tabel__geser { position: absolute; top: 0; right: 0; bottom: 0; width: 6px; cursor: col-resize; touch-action: none; user-select: none; }
.tabel__geser:hover, .sedang-menggeser .tabel__geser { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.sedang-menggeser { cursor: col-resize; user-select: none; }

/* Keadaan kosong. */
.tabel-bungkus .tabel tbody td[colspan] { padding: 40px 16px; }
.tabel-kosong { display: grid; justify-items: center; gap: 10px; color: var(--text-subtle); font-size: var(--teks-base); }
.tabel-kosong strong { font-weight: 500; }
.tabel-kosong__ikon {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px;
  background: var(--bg); border: 1px solid var(--border);
}
.tabel-kosong__ikon svg, .tabel-kosong__ikon i { width: 22px; height: 22px; }

/* Bilah aksi massal: di dalam kartu tabel, di atas kepalanya. */
.tabel-massal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 16px; background: var(--bahaya-bg); border-bottom: 1px solid var(--border);
  animation: pesan-masuk var(--durasi-masuk) var(--ease-keluar) both;
}
.tabel-massal[hidden] { display: none; }
.tabel-massal__jumlah { font-size: var(--teks-base); font-weight: 500; font-variant-numeric: tabular-nums; }
.tabel-massal__aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tabel-massal__batal { padding: 0; border: 0; background: none; color: var(--text-subtle); font: inherit; font-size: var(--teks-xs); cursor: pointer; }
.tabel-massal__batal:hover { color: var(--text); text-decoration: underline; }
.tabel-massal .tombol--kecil { font-weight: 600; }

/* Kaki paginasi: jumlah baris dan keterangan di kiri, nomor halaman di kanan. */
.tabel-kartu > .paginasi { padding: 10px 16px; border-top: 1px solid var(--border); gap: 10px 12px; flex-wrap: wrap; }
.paginasi__per-halaman { order: -2; margin: 0; }
.paginasi__info { order: -1; font-size: var(--teks-sm); color: var(--text-subtle); }
.paginasi__daftar { margin-left: auto; gap: 6px; }
.paginasi__halaman, .paginasi__elipsis { min-width: 32px; height: 32px; border-radius: 6px; font-size: var(--teks-sm); font-weight: 500; }
.paginasi__halaman { border-color: transparent; background: transparent; color: var(--text-muted); }
.paginasi__halaman--aktif, .paginasi--lokal button.paginasi__halaman--aktif { background: var(--text); border-color: var(--text); color: var(--surface); }
.paginasi__panah--mati { opacity: .3; background: transparent; }
.paginasi__per-halaman select { height: 32px; min-height: 32px; border-color: var(--border); border-radius: 6px; font-size: var(--teks-sm); }
.paginasi--lokal button.paginasi__halaman { cursor: pointer; font: inherit; font-size: var(--teks-sm); font-weight: 500; }
.paginasi--lokal button:disabled { cursor: default; }

/* Ponsel: baris menjadi kartu — kolom pertama sebagai judul, sisanya
   berlabel kepala kolomnya. */
@media (max-width: 640px) {
  .kartu.alat { position: static; }
  .alat__cari { max-width: none; flex-basis: 100%; }
  .alat__kanan { margin-left: 0; }
  .tabel-kartu .tabel thead { display: none; }
  .tabel-kartu .tabel, .tabel-kartu .tabel tbody, .tabel-kartu .tabel tr { display: block; width: 100%; }
  .tabel-kartu .tabel tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .tabel-kartu .tabel tbody td { display: block; padding: 2px 0; border: 0; }
  .tabel-kartu .tabel :is(th, td).tabel__aksi-lengket { position: static; width: auto; border: 0; padding-top: 8px; }
  .tabel-kartu .tabel td.tabel__pilih { float: left; width: 28px; }
}

/* ── Dialog ────────────────────────────────────────────────────────────── */
.dialog {
  width: min(460px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius-besar); background: var(--surface); color: var(--text);
  box-shadow: 0 8px 24px rgba(12, 17, 29, .14), 0 24px 64px rgba(12, 17, 29, .18);
  opacity: 1; transform: none;
  transition: opacity 180ms var(--ease-keluar), transform 180ms var(--ease-keluar),
    display 180ms allow-discrete, overlay 180ms allow-discrete;
}
.dialog:not([open]) { opacity: 0; transform: scale(.97); }
@starting-style { .dialog[open] { opacity: 0; transform: scale(.97); } }
.dialog::backdrop { background: rgba(12, 17, 29, .45); }
.dialog__isi { display: grid; gap: 0; }
.dialog__kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--border); font-size: var(--teks-md); }
.dialog__badan { padding: 14px 16px 4px; font-size: var(--teks-sm); }
.dialog__badan p { margin: 0 0 4px; color: var(--text-muted); line-height: 1.5; }
.dialog__badan code { font-family: var(--huruf-mono); font-size: var(--teks-xs); background: var(--surface-muted); padding: 1px 4px; border-radius: 3px; }
.dialog .form__galat { margin: 8px 16px 0; }
.dialog__aksi { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 16px 16px; }
@media (prefers-reduced-motion: reduce) { .dialog { transition: none; } }

/* ── Penanganan tiket: langkah bernomor beserta evidence-nya ─────────────── */
.langkah { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 0; }
.langkah__butir { position: relative; display: flex; gap: 12px; padding: 0 0 16px; }
/* Garis penghubung antarlangkah. */
.langkah__butir:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px;
  background: var(--border);
}
.langkah__nomor {
  width: 28px; height: 28px; flex: none; z-index: 1; border-radius: 999px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-teks);
  font-size: var(--teks-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.langkah__isi { flex: 1; min-width: 0; }
.langkah__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--teks-sm); min-height: 28px; }
.langkah__teks { margin-top: 2px; font-size: var(--teks-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.langkah__form { padding-top: 14px; border-top: 1px solid var(--border); }
.evidence { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.evidence__foto {
  width: 96px; height: 72px; overflow: hidden; border-radius: var(--radius-kontrol);
  border: 1px solid var(--border); background: var(--surface-muted);
  transition: transform var(--durasi-mikro) var(--ease-keluar), border-color var(--durasi-mikro) var(--ease-keluar);
}
.evidence__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evidence__foto:active { transform: scale(.97); }
.evidence__berkas {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border-radius: var(--radius-kontrol); border: 1px solid var(--border);
  font-size: var(--teks-xs); color: var(--text); text-decoration: none;
}
.evidence__berkas svg, .evidence__berkas i { width: 14px; height: 14px; color: var(--text-subtle); }
.evidence__berkas small { color: var(--text-subtle); }
@media (hover: hover) and (pointer: fine) {
  .evidence__foto:hover, .evidence__berkas:hover { border-color: var(--accent); }
}

/* Jam berjalan di topbar. Lebar digitnya tetap, jadi tidak bergoyang tiap detik. */
.topbar__jam {
  display: grid; justify-items: end; margin-right: 6px; padding-right: 12px;
  border-right: 1px solid var(--border); line-height: 1.25; white-space: nowrap;
}
.topbar__jam-tanggal { font-size: var(--teks-2xs); color: var(--text-subtle); }
.topbar__jam-waktu { font-size: var(--teks-sm); font-weight: 600; color: var(--text); }
@media (max-width: 760px) { .topbar__jam { display: none; } }

/* Atribut `hidden` selalu menang atas display milik kelas mana pun. */
[hidden] { display: none !important; }

/* Tabel di dalam kartu berpadding (Detail Invoice, Laporan): berbingkai
   sendiri supaya tidak menempel ke tepi kartu. */
.kartu:not(.tabel-kartu) > .tabel-bungkus { border: 1px solid var(--border); border-radius: var(--radius-kartu); margin-top: 8px; }
.kartu:not(.tabel-kartu) > .paginasi { padding: 10px 0 0; }
.kartu:not(.tabel-kartu) > .statistik { margin: 12px 0; }

/* Kartu statistik tanpa ikon: label di atas angkanya. */
.statistik__kartu:not(:has(.statistik__ikon)) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; }

/* Daftar selebar halaman dengan panel pelengkap di bawahnya (Invoice). */
.daftar-penuh > div:last-child:not(.panel-htmx) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px;
}
.daftar-penuh > div:last-child:not(.panel-htmx) > .kartu { margin-top: 0; }
@media (max-width: 900px) { .daftar-penuh > div:last-child:not(.panel-htmx) { grid-template-columns: minmax(0, 1fr); } }

/* ── Sidebar dilipat: submenu melayang ──────────────────────────────────── */
.submenu--tutup { display: none; }
@media (min-width: 901px) {
  /* Sidebar terlipat hanya berisi ikon; submenunya muncul di samping saat
     ikon disorot atau difokus, jadi semua halaman tetap terjangkau. */
  .lipat .sidebar { overflow: visible; z-index: 30; }
  .lipat .menu > li { position: relative; }
  .lipat .menu > li:hover > .submenu,
  .lipat .menu > li:focus-within > .submenu {
    display: grid; position: absolute; left: 100%; top: -6px; z-index: 60;
    min-width: 208px; margin: 0 0 0 8px; padding: 6px;
    background: var(--sidebar-bg); border: 1px solid var(--sb-garis);
    border-radius: var(--radius-kartu); box-shadow: var(--bayangan-angkat);
  }
  .lipat .menu > li > .submenu::before {
    content: attr(data-judul); padding: 6px 10px 4px;
    font-size: var(--teks-2xs); font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--sb-redup);
  }
  /* Jembatan di celah 8px supaya sorotan tidak putus saat kursor menyeberang. */
  .lipat .menu > li > .submenu::after { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 12px; }
}
@media (max-width: 900px) {
  /* Di layar kecil sidebar adalah laci. Keadaan "dilipat" dari layar besar
     tidak boleh menahannya tetap tertutup. */
  .lipat .sidebar.sidebar--buka { transform: translateX(0); }
}
@media (max-width: 640px) {
  /* Panel lepas memakai lebar layar, bukan menggantung dari tombolnya. */
  .lepas--notifikasi, .lepas--akun {
    position: fixed; top: calc(var(--topbar-tinggi) + 6px); left: 8px; right: 8px; width: auto; min-width: 0;
  }
}

/* ── Site di bawah layanan induk ────────────────────────────────────────── */
.catatan-induk { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; color: var(--text-muted); font-size: var(--teks-sm); }
.catatan-induk > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.site-tambah { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.site-tambah .form__isian { flex: 1 1 220px; min-width: 0; }

/* ── Gangguan massal ────────────────────────────────────────────────────── */
.gangguan-massal { border: 1px solid var(--border); border-radius: var(--radius-kartu); padding: 12px 16px 14px; margin: 16px 0 0; }
.gangguan-massal > legend { padding: 0 6px; margin: 0; }
.gangguan-massal__jumlah { font-weight: 600; color: var(--text); }
.terdampak { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.terdampak li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--border); font-size: var(--teks-sm); }
.terdampak li:first-child { border-top: 0; }
.form__centang { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; font-size: var(--teks-sm); }
.form__centang input { margin-top: 2px; }

/* ── Riwayat harga layanan ──────────────────────────────────────────────── */
.riwayat-harga { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.riwayat-harga li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--border); font-size: var(--teks-sm); }
.riwayat-harga li:first-child { border-top: 0; padding-top: 0; }
.riwayat-harga__tanggal { color: var(--text-muted); font-size: var(--teks-xs); }

/* ── Rekonsiliasi mutasi bank ───────────────────────────────────────────── */
.rekon-pilih { width: 56px; text-align: center; }
.rekon-ket { max-width: 360px; overflow-wrap: anywhere; font-size: var(--teks-sm); }
.rekon-aksi { padding-top: 12px; }
.rekon-tolak { margin: 8px 0 0; padding-left: 18px; font-size: var(--teks-sm); }

/* ── Scrollbar mengikuti warna halaman ──────────────────────────────────── */
/* Bawaan peramban berwarna abu terang dengan latar putih — mencolok di
   sidebar gelap dan di tema gelap. Di sini relnya transparan dan batangnya
   diturunkan dari warna garis halaman, jadi ikut berganti bersama tema. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 38%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 34%, transparent);
  border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 60%, transparent); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* Sidebar punya warnanya sendiri (bisa gelap saat halaman terang). */
.sidebar, .sidebar * { scrollbar-color: color-mix(in srgb, var(--sidebar-text) 30%, transparent) transparent; }
.sidebar ::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sidebar-text) 28%, transparent); background-clip: padding-box;
}
.sidebar ::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--sidebar-text) 50%, transparent); background-clip: padding-box;
}

/* Rentang tanggal di panel saring: dua isian berdampingan, tidak bertumpuk. */
.alat__saring .filter-panel__medan:has(.filter-tanggal) { flex: 0 1 330px; min-width: 280px; }
.alat__saring .filter-tanggal { display: flex; gap: 8px; }
.alat__saring .filter-tanggal > input { flex: 1 1 0; min-width: 0; width: auto; }
.daftar-penuh--panel > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.daftar-penuh--panel > div:last-child > .kartu { margin-top: 0; }
@media (max-width: 1100px) { .daftar-penuh--panel > div:last-child { grid-template-columns: minmax(0, 1fr); } }

/* ── Halaman selebar layar: tidak pernah bergulir ke samping ────────────── */
/* Kolom `1fr` berarti minmax(auto, 1fr): isi yang lebar (tabel) mendorong
   kolomnya melewati layar, halaman ikut bergulir ke kanan, dan kepala tabel
   yang lengket menimpa sidebar. Kolom dikunci ke minmax(0, …) dan yang
   bergulir hanya pembungkus tabelnya sendiri. */
.isi { min-width: 0; overflow-x: clip; }
.dua-kolom { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1200px) { .dua-kolom { grid-template-columns: minmax(0, 1fr); } }
.dua-kolom > *, .tiga-kolom > *, .daftar-penuh > *, .statistik > * { min-width: 0; }
.kartu { min-width: 0; max-width: 100%; }
.kartu > table.tabel:not([data-tabel-siap]) { display: block; overflow-x: auto; }
.tabel-bungkus { max-width: 100%; overflow-x: auto; }
.detail-baris > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.tab { overflow-x: auto; scrollbar-width: none; }

/* ── Layanan aktif ringkas (Detail Customer) ────────────────────────────── */
.layanan-ringkas { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.layanan-ringkas > li { padding: 10px 0; border-top: 1px solid var(--border); display: grid; gap: 4px; }
.layanan-ringkas > li:first-child { border-top: 0; padding-top: 2px; }
.layanan-ringkas__utama { display: grid; gap: 1px; text-decoration: none; color: inherit; }
.layanan-ringkas__site { font-weight: 600; }
.layanan-ringkas__utama:hover .layanan-ringkas__site { color: var(--accent-teks); }
.layanan-ringkas__bawah { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ── Alokasi port (Detail Perangkat) ────────────────────────────────────── */
.port-alokasi { display: flex; gap: 6px; align-items: center; }
.port-alokasi select { min-width: 360px; max-width: 520px; flex: 1 1 360px; }

/* ── Detail Layanan: ringkasan teknis ───────────────────────────────────── */
.lyn-hero { padding: 18px 20px; }
.lyn-hero__kepala { display: flex; gap: 14px; align-items: center; }
.lyn-hero__ikon { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-teks); }
.lyn-hero__ikon svg { width: 22px; height: 22px; }
.lyn-hero__judul { min-width: 0; }
.lyn-hero__lencana { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.lyn-hero__nama { margin: 0; font-size: var(--teks-xl); font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.lyn-hero__sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--text-muted); font-size: var(--teks-sm); margin-top: 2px; }
.lyn-fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-top: 16px; }
.lyn-fakta__butir { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-kartu); background: var(--surface-muted); min-width: 0; }
.lyn-fakta__label { display: flex; align-items: center; gap: 6px; font-size: var(--teks-2xs, 11px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.lyn-fakta__label svg { width: 13px; height: 13px; }
.lyn-fakta__nilai { font-size: var(--teks-md); font-weight: 600; color: var(--text); overflow-wrap: anywhere; text-decoration: none; }
a.lyn-fakta__nilai:hover { color: var(--accent-teks); }
.lyn-fakta__nilai--bahaya { color: var(--bahaya-fg); }
.lyn-fakta__kecil { font-size: var(--teks-xs); color: var(--text-muted); overflow-wrap: anywhere; }

.lyn-jalur { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 6px 2px 4px; }
.lyn-jalur__simpul { flex: 1 1 0; min-width: 170px; display: grid; gap: 2px; align-content: center; padding: 12px 14px; border: 1px solid var(--border-kuat, var(--border)); border-radius: var(--radius-kartu); background: var(--surface); }
.lyn-jalur__simpul--ujung { border-color: var(--accent-teks); background: var(--accent-soft); }
.lyn-jalur__label { font-size: var(--teks-2xs, 11px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.lyn-jalur__utama { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.lyn-jalur__utama:hover { color: var(--accent-teks); }
.lyn-jalur__utama--kosong { color: var(--text-muted); font-weight: 500; }
.lyn-jalur__kecil { font-size: var(--teks-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.lyn-jalur__garis { flex: 0 0 110px; display: grid; place-items: center; position: relative; }
.lyn-jalur__garis::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--border-kuat, var(--border)); }
.lyn-jalur__garis > span { position: relative; padding: 2px 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: var(--teks-xs); font-family: var(--huruf-mono); color: var(--text-muted); white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .lyn-jalur { flex-direction: column; }
  .lyn-jalur__garis { flex-basis: 34px; }
  .lyn-jalur__garis::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid var(--border-kuat, var(--border)); }
}

/* Kartu yang isinya formulir jarang dipakai: dilipat sampai dibutuhkan. */
.lipat-kartu > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-weight: 500; }
.lipat-kartu > summary::-webkit-details-marker { display: none; }
.lipat-kartu > summary svg { width: 15px; height: 15px; }
.lipat-kartu[open] > summary { margin-bottom: 12px; color: var(--text); font-weight: 600; }

/* ── Grafik trafik (gaya MRTG) ──────────────────────────────────────────── */
.grafik-trafik { width: 100%; height: auto; display: block; }
.grafik-trafik__kisi { stroke: var(--border); stroke-width: 1; }
.grafik-trafik__label { fill: var(--text-muted); font-size: 10px; font-family: var(--huruf-mono); }
.grafik-trafik__kosong { fill: var(--text-muted); font-size: 13px; }
.grafik-trafik__masuk { fill: color-mix(in srgb, var(--sukses) 55%, transparent); stroke: var(--sukses); stroke-width: 1; }
.grafik-trafik__keluar { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.grafik-trafik__titik { fill: var(--accent); }
.trafik-legenda { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 8px; font-size: var(--teks-sm); color: var(--text-muted); }
.trafik-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.trafik-legenda__masuk { background: color-mix(in srgb, var(--sukses) 55%, transparent); border: 1px solid var(--sukses); }
.trafik-legenda__keluar { background: var(--accent); }
.pil-rentang { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 99px; }
.pil-rentang__butir { padding: 3px 12px; border-radius: 99px; font-size: var(--teks-sm); color: var(--text-muted); text-decoration: none; }
.pil-rentang__butir--aktif { background: var(--accent); color: #fff; font-weight: 600; }
.daftar-ringkas { list-style: none; margin: 0; padding: 0; display: grid; }
.daftar-ringkas > li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); font-size: var(--teks-sm); }
.daftar-ringkas > li:first-child { border-top: 0; padding-top: 0; }
.teks-bahaya { color: var(--bahaya-fg); }

/* ── Tab berikon dengan jumlah (pola Detail Perangkat DC Pak) ───────────── */
.tab--ikon { gap: 2px; margin: 16px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-kartu); padding: 0 8px; }
.tab--ikon .tab__item { display: inline-flex; align-items: center; gap: 7px; padding: 11px 12px; white-space: nowrap; }
.tab--ikon .tab__item svg { width: 15px; height: 15px; flex: none; }
.tab__jumlah { min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--surface-muted); color: var(--text-muted); font-size: var(--teks-2xs, 11px); font-weight: 600; text-align: center; font-family: var(--huruf-mono); }
.tab__item--aktif .tab__jumlah { background: var(--accent-soft); color: var(--accent-teks); }
.tab--lengket { position: sticky; top: calc(var(--topbar-tinggi) + 8px); z-index: 5; }
/* Layar sempit: hanya ikon dan jumlah, supaya enam tab tetap satu baris. */
@media (max-width: 760px) { .tab--ikon .tab__label { display: none; } .tab--ikon .tab__item { padding: 11px 10px; } }

/* ── Kabar ke customer terdampak ────────────────────────────────────────── */
.kabar-customer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.kabar-customer > summary { list-style: none; cursor: pointer; display: inline-flex; }
.kabar-customer > summary::-webkit-details-marker { display: none; }
.kabar-customer[open] > summary { margin-bottom: 10px; }

.kode-blok { margin: 8px 0; padding: 10px 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-kontrol, 8px); font-family: var(--huruf-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }

.portal-akun__sandi { display: flex; gap: 8px; }
.portal-akun__sandi .form__isian { flex: 1 1 auto; min-width: 0; }

/* Pengaturan → Portal Pelanggan */
.portal-atur__bagian { border: 0; padding: 0; margin: 0; min-width: 0; }
.portal-atur__bagian > .panel__judul { margin-top: 20px; }
.portal-atur__bagian > .panel__judul:first-child { margin-top: 0; }
.portal-atur__sakelar { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.portal-atur__sakelar input { margin-top: 3px; }
.portal-atur__samping { display: grid; gap: 16px; align-content: start; }
.portal-atur__samping > .kartu { margin: 0; }
.portal-pratinjau { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); overflow: hidden; font-size: var(--teks-xs); }
.portal-pratinjau__atas { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--pratinjau-aksen); }
.portal-pratinjau__umum { margin: 10px 12px 0; padding: 6px 10px; border-radius: 6px; background: var(--accent-soft); }
.portal-pratinjau__umum--peringatan { background: var(--peringatan-bg); color: var(--peringatan-fg); }
.portal-pratinjau__umum--bahaya { background: var(--bahaya-bg); color: var(--bahaya-fg); }
.portal-pratinjau__kartu { margin: 12px auto 16px; width: 82%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: grid; gap: 6px; }
.portal-pratinjau__kartu p { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.portal-pratinjau__judul { font-weight: 700; font-size: var(--teks-sm); }
.portal-pratinjau__isian { height: 18px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); }
.portal-pratinjau__tombol { justify-self: start; padding: 3px 12px; border-radius: 4px; background: var(--pratinjau-aksen); color: #fff; font-weight: 600; }