/* Tabel → kartu di HP (pasangan tabel-hp.js). Warna mengikuti teks halaman agar cocok di mode terang & gelap. */
@media (max-width: 599.98px) {
  table.tabel-hp, table.tabel-hp tbody, table.tabel-hp tr, table.tabel-hp td, table.tabel-hp th { display: block; width: 100%; }
  table.tabel-hp { border: 0; min-width: 0 !important; }
  table.tabel-hp thead { display: none; }
  table.tabel-hp tbody tr { padding: 10px 12px; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); background: none; }
  table.tabel-hp tbody tr:last-child { border-bottom: 0; }
  table.tabel-hp tbody td, table.tabel-hp tbody th { display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
    border: 0 !important; padding: 3px 0 !important; text-align: right !important; white-space: normal !important; background: none !important; box-shadow: none !important; }
  table.tabel-hp tbody td::before, table.tabel-hp tbody th::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left;
    font-size: .74rem; font-weight: 600; opacity: .62; padding-top: 1px; }
  table.tabel-hp tbody td[data-label=""], table.tabel-hp tbody th[data-label=""] { justify-content: flex-start; text-align: left !important; }
  table.tabel-hp tbody td[data-label=""]::before, table.tabel-hp tbody th[data-label=""]::before { display: none; }
  /* kartu: sel depan (centang/foto) + judul sebaris, sisanya label : isi */
  table.tabel-hp tbody tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  table.tabel-hp tbody td.tabel-hp__depan { width: auto; flex: none; padding: 0 !important; }
  table.tabel-hp tbody td.tabel-hp__judul { width: auto; flex: 1 1 0; min-width: 0; justify-content: flex-start; text-align: left !important; font-weight: 600; font-size: 1.02em; padding: 2px 0 4px !important; }
  table.tabel-hp tbody td.tabel-hp__judul::before { display: none; }
  table.tabel-hp tbody td.tabel-hp__kosong { display: none; }
  /* kolom aksi: deret tombol di bawah, target sentuh lega */
  table.tabel-hp tbody td.tabel-hp__aksi { justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 8px !important; }
  table.tabel-hp tbody td.tabel-hp__aksi :is(a, button) { min-height: 40px; min-width: 40px; }
  /* baris "kosong" / gabungan kolom */
  table.tabel-hp tbody td[colspan] { justify-content: center; text-align: center !important; }
  /* pembungkus geser tidak perlu lagi */
  :is(.table-responsive, .table-wrap, .tbl-wrap):has(> table.tabel-hp) { overflow-x: visible; }
}