/* Gaya UI bersama yang tidak ada di output.css (Tailwind prebuilt — tidak di-build ulang di server):
   tombol X kolom cari, tombol X modal, dan judul kolom tabel yang membeku saat di-scroll. */

/* Kolom cari — tombol X hanya tampil saat kolom berisi (placeholder tidak terlihat), lihat
   clearSearch() di ui.js. Lebar/margin dipegang pembungkus .search-box, input selalu penuh. */
.search-box { position: relative; }
.search-box > input { width: 100%; padding-right: 2rem; }
.search-clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  color: #9ca3af;
  cursor: pointer;
}
.search-clear:hover { color: #4b5563; background-color: #f3f4f6; }
.dark .search-clear:hover { color: #e5e7eb; background-color: #374151; }
.search-clear .icon { width: 0.75rem; height: 0.75rem; }
.search-box > input:placeholder-shown + .search-clear { display: none; }

/* Modal form — tidak lagi tertutup saat klik di luar panel (data yang sedang diisi hilang kalau
   salah klik); tutup lewat tombol X di pojok kanan atas ini atau tombol Batal. */
.modal-panel { position: relative; }
.modal-panel h2 { padding-right: 1.75rem; }
.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: #9ca3af;
}
.modal-close:hover { color: #374151; background-color: #f3f4f6; }
.dark .modal-close:hover { color: #f3f4f6; background-color: #374151; }
.modal-close .icon { width: 1rem; height: 1rem; }

/* Freeze judul kolom (seperti freeze baris di Excel) — tabel data jadi area scroll sendiri setinggi
   layar dan baris judulnya menempel di atas. Otomatis untuk semua tabel ber-thead di pembungkus
   overflow-x-auto (pola standar halaman daftar); .table-freeze untuk tabel yang terbungkus elemen
   lain (mis. Buku Besar di kartu laporan). */
.overflow-x-auto:has(> table > thead),
.table-freeze {
  max-height: calc(100vh - 8rem);
  overflow: auto;
}
.overflow-x-auto > table > thead th,
.table-freeze > table > thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #e5e7eb;
}
.dark .overflow-x-auto > table > thead th,
.dark .table-freeze > table > thead th {
  background-color: #1f2937;
  box-shadow: inset 0 -1px 0 #374151;
}
@media print {
  .overflow-x-auto:has(> table > thead),
  .table-freeze {
    max-height: none;
    overflow: visible;
  }
  .overflow-x-auto > table > thead th,
  .table-freeze > table > thead th {
    position: static;
    box-shadow: none;
  }
}