/* ==========================================================================
   9. DATATABLES ENGINE ADAPTER (FIXED ALIGNMENT & RESPONSIVE)
   ========================================================================== */

/* 1. Hilangkan icon sort bawaan DataTables yang jelek */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after {
  display: none !important;
}

/* 2. Highlight kolom yang sedang di-sort (Opsional) */
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
  background-color: var(--theme-table-head-bg);
  color: var(--theme-neutral);
  border-bottom: 2px solid var(--theme-primary);
  margin-bottom: 10px;
}

/* 3. Wrapper Pagination (Responsive Layout) */
.dataTables_wrapper .dataTables_paginate {
  width: 100%;
  display: flex;
  justify-content: center; /* Default Mobile: Rata Tengah */
}

.dataTables_wrapper .pagination {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px; /* Jarak antar tombol */
}

/* 4. Styling Tombol (Kotak Presisi) */
.dataTables_wrapper .pagination .page-item .page-link {
  color: var(--theme-text-muted);
  background-color: transparent;
  border: 1px solid var(--theme-border);
  border-radius: 8px; /* Rounded Modern */

  /* --- KUNCI PERBAIKAN POSISI ICON --- */
  display: flex; /* Wajib Flexbox */
  align-items: center; /* Tengah Vertikal */
  justify-content: center; /* Tengah Horizontal */

  width: 24px; /* Lebar Fixed */
  height: 24px; /* Tinggi Fixed */
  padding: 0; /* Reset padding agar text tidak dorong layout */

  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  transition: all 0.2s ease;
}

/* 5. Fix Ukuran Icon Next/Prev */
.dataTables_wrapper .pagination .page-item .page-link i {
  font-size: 0.8rem; /* Ukuran icon disesuaikan */
  transform: translateY(1px); /* Geser dikit biar center mata */
}

/* 6. State Hover & Active */
.dataTables_wrapper .pagination .page-item:hover .page-link {
  color: var(--theme-primary);
  background-color: var(--theme-primary-subtle);
  border-color: var(--theme-primary);
  transform: translateY(-1px);
}

.dataTables_wrapper .pagination .page-item.active .page-link {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dataTables_wrapper .pagination .page-item.disabled .page-link {
  color: var(--theme-text-muted);
  opacity: 0.5;
  pointer-events: none;
  background-color: var(--theme-bg-input);
  border-color: var(--theme-border);
}

/* 7. Teks Info (Showing 1 to 10...) */
.dataTables_info {
  color: var(--theme-text-muted) !important;
  font-size: 0.85rem;
}

/* --- DESKTOP VIEW (Layar Lebar) --- */
@media (min-width: 768px) {
  /* Tombol Pagination pindah ke Kanan */
  .dataTables_wrapper .dataTables_paginate {
    justify-content: flex-end !important;
    margin-top: 0;
  }

  /* Hilangkan margin atas pada info */
  .dataTables_info {
    margin-top: 0;
    padding-top: 0.5rem !important;
  }
}
.dataTables_length select {
  border-radius: var(--dim-radius-ui);
  padding: 6px 30px 6px 12px;
  border: 1px solid var(--theme-border);
  background-color: var(--theme-bg-surface);
  color: var(--theme-text-body);
  cursor: pointer;

  outline: none !important;
  box-shadow: none !important;
}

.dataTables_length select:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1) !important; /* Shadow halus hijau (opsional) */
  outline: none !important;
}

/* Wrapper agar length container sejajar vertical */
#length-container .dataTables_length {
  margin-bottom: 0;
}