/* ======================================================
   DATATABLES MENYESUAIKAN TAMPILAN TAILWIND
   ====================================================== */

div.dt-container {
  width: 100%;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #475569;
}

/* Jarak layout atas dan bawah */
div.dt-container div.dt-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

/* Area tombol */
div.dt-container .dt-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Tombol Copy, Excel, PDF */
div.dt-container button.dt-button,
div.dt-container div.dt-button,
div.dt-container a.dt-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  margin: 0 !important;
  padding: 0.45rem 0.85rem !important;

  border: 1px solid #cbd5e1 !important;
  border-radius: 0.625rem !important;

  background: #ffffff !important;
  color: #334155 !important;

  font-family: inherit !important;
  font-size: 0.7rem !important;
  line-height: 1rem !important;
  font-weight: 800 !important;

  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

div.dt-container button.dt-button:hover,
div.dt-container div.dt-button:hover,
div.dt-container a.dt-button:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Tombol export dibedakan warnanya */
div.dt-container .dt-buttons button.dt-button:nth-child(1) {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #334155 !important;
}

div.dt-container .dt-buttons button.dt-button:nth-child(2) {
  border-color: #a7f3d0 !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
}

div.dt-container .dt-buttons button.dt-button:nth-child(3) {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* Label pencarian dan pilihan jumlah baris */
div.dt-container .dt-search,
div.dt-container .dt-length {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  color: #64748b;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Input pencarian */
div.dt-container .dt-search input {
  width: 210px;
  min-height: 34px;
  margin-left: 0 !important;
  padding: 0.45rem 0.7rem !important;

  border: 1px solid #cbd5e1 !important;
  border-radius: 0.625rem !important;

  background: #ffffff !important;
  color: #334155 !important;

  font-family: inherit !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;

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

div.dt-container .dt-search input:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgb(16 185 129 / 0.12) !important;
}

/* Dropdown jumlah baris */
div.dt-container .dt-length select {
  min-width: 72px;
  min-height: 34px;
  margin: 0 0.25rem !important;
  padding: 0.35rem 1.8rem 0.35rem 0.6rem !important;

  border: 1px solid #cbd5e1 !important;
  border-radius: 0.625rem !important;

  background-color: #ffffff !important;
  color: #334155 !important;

  font-family: inherit !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;

  outline: none !important;
}

/* Tabel */
div.dt-container table.dataTable {
  width: 100% !important;
  margin: 0 !important;

  border-collapse: separate !important;
  border-spacing: 0 !important;

  font-family: inherit !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

/* Header tabel */
div.dt-container table.dataTable thead th {
  padding: 0.65rem 0.6rem !important;

  border-top: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;

  background: #f8fafc !important;
  color: #64748b !important;

  font-size: 0.68rem !important;
  line-height: 1rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

/* Isi tabel */
div.dt-container table.dataTable tbody td {
  padding: 0.6rem !important;

  border-top: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;

  font-family: inherit !important;
  font-size: 0.75rem !important;
  line-height: 1.15rem !important;
  vertical-align: top;
}

/* Hover baris */
div.dt-container table.dataTable tbody tr:hover td {
  background: #f8fafc !important;
}

/* Informasi jumlah data */
div.dt-container .dt-info {
  padding-top: 0 !important;
  color: #64748b;

  font-family: inherit;
  font-size: 0.7rem;
  line-height: 1rem;
}

/* Pagination */
div.dt-container .dt-paging {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

div.dt-container .dt-paging .dt-paging-button {
  min-width: 32px;
  min-height: 32px;
  margin: 0 2px !important;
  padding: 0.35rem 0.6rem !important;

  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;

  background: #ffffff !important;
  color: #475569 !important;

  font-family: inherit !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;

  box-shadow: none !important;
}

div.dt-container .dt-paging .dt-paging-button:hover {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

div.dt-container .dt-paging .dt-paging-button.current {
  border-color: #2563eb !important;
  background: #2563eb !important;
  color: #ffffff !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled {
  cursor: not-allowed !important;
  opacity: 0.45;
}

/* Scroll horizontal */
div.dt-container .dt-scroll-head,
div.dt-container .dt-scroll-body {
  border: 0 !important;
}

div.dt-container .dt-scroll-body {
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Responsif */
@media (max-width: 1024px) {
  div.dt-container div.dt-layout-row {
    align-items: stretch;
    flex-direction: column;
  }

  div.dt-container .dt-layout-cell {
    width: 100%;
  }

  div.dt-container .dt-buttons {
    justify-content: flex-start;
  }

  div.dt-container .dt-search {
    justify-content: flex-start;
  }

  div.dt-container .dt-search input {
    width: min(100%, 320px);
  }

  div.dt-container .dt-paging {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}