/* Sembunyikan spinner secara default */
.htmx-indicator {
    display: none;
}

/* Tampilkan spinner saat request sedang berjalan */
.htmx-request .htmx-indicator {
    display: inline-block;
}

/* Opsional: Nonaktifkan tombol agar tidak bisa diklik dua kali saat loading */
.htmx-request[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Kontainer utama untuk scroll */
.table-container {
  max-height: 500px; /* Batasi tinggi untuk scroll vertikal */
  overflow: auto;
  border: 1px solid #ccc;
  position: relative;

}

table {
  border-collapse: separate; /* Penting agar sticky bekerja dengan border */
  border-spacing: 0;
  width: 100%;
}

/* 1. Freeze Header (Scroll Atas) */
thead th {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  z-index: 2; /* Di atas isi tabel */
}

/* 2. Freeze Dua Kolom (Scroll Samping) */
.sticky-col {
  position: sticky;
  background-color: #fff; /* Harus ada background agar data di belakangnya tertutup */
  z-index: 1;
}

/* Kolom pertama menempel di paling kiri */
.first-col {
  left: 0;
  width:50px
}

/* Kolom kedua menempel setelah lebar kolom pertama */
.second-col {
  left: 50px; /* Sesuaikan dengan lebar kolom pertama */
}

/* 3. Pojok Kiri Atas (Header yang juga Kolom Freeze) */
/* Harus memiliki z-index paling tinggi agar tetap di depan saat scroll kedua arah */
thead th.sticky-col {
  z-index: 3;
}


.table-container thead th {
  position: sticky;
  top: 0;        /* Menempel tepat di atas kontainer */
  z-index: 100;  /* Agar tidak tertutup oleh isi tabel saat di-scroll */
  background-color: #101010f6; /* Sesuaikan dengan warna header Anda */
  color: white;
  border-collapse: separate  !important;; /* WAJIB untuk sticky header yang rapi */
  border-spacing: 0;   

  box-shadow: inset 0 1px 0 var(--bs-primary), 
                inset 0 -1px 0 var(--bs-primary);
}

/* Semua TH di baris pertama */
.table-container thead tr:nth-child(1) th {
  top: 0;
  position: sticky;
  z-index: 101; 
  background-color: black;
}

/* Semua TH di baris kedua */
.table-container thead tr:nth-child(2) th {
  top: 32px; /* Sesuaikan dengan tinggi baris pertama */
  z-index: 99; /* Sedikit lebih rendah agar layering rapi */
}