/* ==========================================================================
   Panel tabel data (desain admin-produk.html) untuk semua DataTables admin & member.
   Dipasang lewat public/js/gh-datatable.js (GHTable.enhance).
   ========================================================================== */

.gh-dt.product-table-panel {
  margin: 4px 0 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #191922;
  color: var(--ink);
}

.gh-dt .product-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px 12px;
}

.gh-dt .product-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gh-dt .product-table-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
}

.gh-dt .product-table-head p {
  margin: 4px 0 0;
  color: #858293;
  font-size: 11px;
}

.gh-dt .product-data-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(112, 199, 158, .16);
  border-radius: 5px;
  background: rgba(75, 170, 128, .07);
  color: #80cca7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

.gh-dt .product-data-badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7dcfa8;
}

.gh-dt .product-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.gh-dt .product-page-actions .button {
  min-height: 34px;
  margin: 0 !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

/* Toolbar */
.gh-dt .product-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: rgba(255, 255, 255, .012);
}

.gh-dt .product-search {
  display: flex;
  width: min(320px, 45%);
  height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #14141c;
  color: #8e8b9b;
}

.gh-dt .product-search:focus-within {
  border-color: var(--border-color, rgba(160, 140, 255, .56));
}

.gh-dt .product-search > span {
  font-size: 17px;
}

.gh-dt .product-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #eeeaf6;
  font-size: 12px;
}

.gh-dt .product-search input::placeholder {
  color: #757283;
}

.gh-dt .product-search kbd {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: #797586;
  font: 10px var(--font);
}

.gh-dt .product-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.gh-dt .product-filters > label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gh-dt .product-filters > label > span {
  color: #888596;
  font-size: 11px;
}

.gh-dt .product-filters select,
.gh-dt .product-table-footer select {
  height: 30px;
  padding: 0 24px 0 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background-color: #1b1b25;
  color: #cbc8d6;
  font-size: 11px;
}

.gh-dt .product-clear-filters {
  padding: 5px;
  border: 0;
  background: none;
  color: #b5a6ff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.gh-dt [hidden] {
  display: none !important;
}

/* Tabel */
.gh-dt .datatable-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #2b2a38 transparent;
}

.gh-dt .dataTables_wrapper {
  padding: 0 !important;
}

.gh-dt table.product-datatable {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  white-space: nowrap;
  color: #c4c1cf !important;
  font-size: 12px !important;
}

.gh-dt table.product-datatable thead tr,
.gh-dt table.product-datatable thead th {
  border: 0 !important;
  background: rgba(255, 255, 255, .015) !important;
}

.gh-dt table.product-datatable thead th {
  height: 38px;
  padding: 0 12px !important;
  border-bottom: 1px solid var(--border) !important;
  color: #817e90 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  background-image: none !important;
}

/* Panah urut (gaya demo) */
.gh-dt table.product-datatable thead th.sorting,
.gh-dt table.product-datatable thead th.sorting_asc,
.gh-dt table.product-datatable thead th.sorting_desc {
  padding-right: 22px !important;
  cursor: pointer;
  position: relative;
}

.gh-dt table.product-datatable thead th.sorting::before,
.gh-dt table.product-datatable thead th.sorting_asc::before,
.gh-dt table.product-datatable thead th.sorting_desc::before,
.gh-dt table.product-datatable thead th.sorting::after,
.gh-dt table.product-datatable thead th.sorting_asc::after,
.gh-dt table.product-datatable thead th.sorting_desc::after {
  display: none !important;
}

.gh-dt table.product-datatable thead th.sorting {
  background: rgba(255, 255, 255, .015) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0zM4 12L0 7h8z' fill='%23716e80'/%3E%3C/svg%3E") no-repeat right 8px center !important;
}

.gh-dt table.product-datatable thead th.sorting_asc {
  color: #c2b5ff !important;
  background: rgba(255, 255, 255, .015) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0z' fill='%23b7aaff'/%3E%3Cpath d='M4 12L0 7h8z' fill='%233a3848'/%3E%3C/svg%3E") no-repeat right 8px center !important;
}

.gh-dt table.product-datatable thead th.sorting_desc {
  color: #c2b5ff !important;
  background: rgba(255, 255, 255, .015) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0z' fill='%233a3848'/%3E%3Cpath d='M4 12L0 7h8z' fill='%23b7aaff'/%3E%3C/svg%3E") no-repeat right 8px center !important;
}

.gh-dt table.product-datatable tbody tr,
.gh-dt table.product-datatable tbody tr.odd,
.gh-dt table.product-datatable tbody tr.even {
  background: transparent !important;
}

.gh-dt table.product-datatable tbody tr:hover {
  background: rgba(255, 255, 255, .02) !important;
}

.gh-dt table.product-datatable tbody td {
  height: 46px;
  padding: 7px 12px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .043) !important;
  color: #c4c1cf !important;
  vertical-align: middle;
}

.gh-dt table.product-datatable tbody tr:last-child td {
  border-bottom: 0 !important;
}

.gh-dt table.product-datatable td img {
  border-radius: 6px;
}

/* Tombol aksi di baris (Edit / Hapus / Detail / Bayar) */
.gh-dt table.product-datatable td a[class*="bg-"],
.gh-dt table.product-datatable td button[class*="bg-"] {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin: 1px 2px !important;
  padding: 0 9px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: #20202a !important;
  color: #c3bfd0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.gh-dt table.product-datatable td a[class*="bg-"]:hover,
.gh-dt table.product-datatable td button[class*="bg-"]:hover {
  border-color: rgba(165, 146, 255, .27) !important;
  background: rgba(132, 111, 244, .1) !important;
  color: #d4caff !important;
}

.gh-dt table.product-datatable td a[class*="bg-red"],
.gh-dt table.product-datatable td button[class*="bg-red"],
.gh-dt table.product-datatable td a[href*="/hapus/"] {
  color: #e48f9b !important;
}

.gh-dt table.product-datatable td a[class*="bg-red"]:hover,
.gh-dt table.product-datatable td button[class*="bg-red"]:hover,
.gh-dt table.product-datatable td a[href*="/hapus/"]:hover {
  border-color: rgba(232, 119, 137, .28) !important;
  background: rgba(224, 94, 115, .1) !important;
  color: #f3a5af !important;
}

/* Label status di dalam sel (span berwarna lama) -> pil status */
.gh-dt table.product-datatable td span[class*="bg-green"],
.gh-dt table.product-datatable td span[class*="bg-red"],
.gh-dt table.product-datatable td span[class*="bg-yellow"],
.gh-dt table.product-datatable td span[class*="bg-blue"],
.gh-dt table.product-datatable td span[class*="bg-indigo"],
.gh-dt table.product-datatable td span[class*="bg-gray"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px !important;
  border: 1px solid transparent;
  border-radius: 99px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.gh-dt table.product-datatable td span[class*="bg-green"] { border-color: rgba(95, 204, 154, .16); background: rgba(82, 187, 139, .08) !important; color: #80d1ad !important; }
.gh-dt table.product-datatable td span[class*="bg-red"] { border-color: rgba(235, 122, 137, .16); background: rgba(235, 122, 137, .08) !important; color: #e88894 !important; }
.gh-dt table.product-datatable td span[class*="bg-yellow"] { border-color: rgba(230, 175, 93, .16); background: rgba(210, 156, 72, .08) !important; color: #dfb56e !important; }
.gh-dt table.product-datatable td span[class*="bg-blue"],
.gh-dt table.product-datatable td span[class*="bg-indigo"] { border-color: rgba(128, 165, 240, .16); background: rgba(95, 138, 216, .09) !important; color: #a1b7f1 !important; }
.gh-dt table.product-datatable td span[class*="bg-gray"] { border-color: var(--border); background: rgba(255, 255, 255, .04) !important; color: #b8b5c4 !important; }

/* Kosong */
.gh-dt .product-table-empty {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #898697;
  font-size: 12px;
}

.gh-dt .product-table-empty > span {
  font-size: 22px;
}

.gh-dt .product-table-empty > b {
  margin-top: 7px;
  color: #dad6e3;
  font-size: 13px;
}

.gh-dt .product-table-empty > p {
  margin: 4px 0 0;
}

/* Footer */
.gh-dt .product-table-footer {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border-top: 1px solid var(--border);
  color: #878495;
  font-size: 11px;
}

.gh-dt .product-table-footer > label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gh-dt .pager-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gh-dt .pager-controls button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #20202b;
  color: #c8c4d4;
  font-size: 15px;
  cursor: pointer;
}

.gh-dt .pager-controls button:hover:not(:disabled) {
  border-color: rgba(165, 146, 255, .3);
  color: #fff;
}

.gh-dt .pager-controls button:disabled {
  opacity: .35;
  cursor: default;
}

.gh-dt .pager-controls span {
  min-width: 46px;
  color: #c3bfd0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gh-dt .dataTables_processing {
  top: 40px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  background: #20202b !important;
  color: var(--ink) !important;
  font-size: 12px;
}

@media (max-width: 620px) {
  .gh-dt .product-table-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .gh-dt .product-page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .gh-dt .product-table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .gh-dt .product-search {
    width: 100%;
  }

  .gh-dt .product-filters {
    justify-content: space-between;
  }

  .gh-dt .product-table-footer {
    flex-wrap: wrap;
    padding: 7px 10px;
  }

  .gh-dt .product-table-footer > .gh-range {
    order: 3;
    flex-basis: 100%;
  }
}

/* Halaman admin: panel tabel tidak dibungkus kotak panel lagi (hindari bingkai ganda) */
.admin-content > section:has(> .gh-dt) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Kolom yang tidak bisa diurutkan (Aksi, Gambar, Logo) */
.gh-dt table.product-datatable thead th.gh-nosort {
  padding-right: 12px !important;
  cursor: default;
  background-image: none !important;
}

/* ---------- Tandai & hapus banyak data ---------- */
.gh-dt table.product-datatable tr.gh-row-pilih td { background: rgba(132, 111, 244, .08) !important; }
.gh-dt .gh-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .05); background: rgba(132, 111, 244, .1); color: #d8d3f7; font-size: 12px; }
.gh-dt .gh-bulk[hidden] { display: none; }
.gh-dt .gh-bulk-info b { color: #fff; font-family: var(--display); font-size: 14px; }
.gh-dt .gh-bulk-link { padding: 0; border: 0; background: none; color: #b4a8ff; font-size: 12px; font-weight: 700; cursor: pointer; }
.gh-dt .gh-bulk-link:hover { text-decoration: underline; }
.gh-dt .gh-bulk-link[hidden] { display: none; }
.gh-dt .gh-bulk-del { min-height: 32px; margin-left: auto; border-color: rgba(235, 122, 137, .35); background: rgba(235, 122, 137, .14); color: #f3a2ac; }
.gh-dt .gh-bulk-del:hover { background: rgba(235, 122, 137, .24); }
.gh-dt .gh-bulk-del:disabled { opacity: .6; cursor: wait; }

/* Kotak centang bergaya tema gelap (tandai baris) */
.gh-dt .gh-check { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none; width: 16px; height: 16px; margin: -2px 10px 0 0; border: 1.5px solid #4b485c; border-radius: 5px; background: #17171f; vertical-align: middle; cursor: pointer; transition: background .12s, border-color .12s; }
.gh-dt .gh-check::before { content: ""; width: 9px; height: 9px; background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform .12s; }
.gh-dt .gh-check:hover { border-color: #8c79ff; }
.gh-dt .gh-check:checked,
.gh-dt .gh-check:indeterminate { border-color: #7762f1; background: #7762f1; }
.gh-dt .gh-check:checked::before { transform: scale(1); }
.gh-dt .gh-check:indeterminate::before { height: 2px; clip-path: none; transform: scale(1); }
.gh-dt .gh-check:focus-visible { outline: 2px solid #8c79ff; outline-offset: 2px; }
.gh-dt .gh-check[hidden] { display: none; }

/* ---------- Kerapian kolom ---------- */
/* Isi sel rata kiri seperti judulnya (banyak view lama memakai text-center di tbody) */
.gh-dt table.product-datatable tbody td { text-align: left !important; }
/* Kolom pertama (No + kotak centang) & kolom aksi tidak terpotong */
.gh-dt table.product-datatable thead th:first-child,
.gh-dt table.product-datatable tbody td:first-child { width: 1%; white-space: nowrap; }
/* Tombol aksi: tetap satu baris bila muat, turun ke baris berikut bila tabel sempit (tidak terpotong) */
.gh-dt table.product-datatable tbody td:last-child .flex { flex-wrap: wrap; gap: 4px 0; }
.gh-dt table.product-datatable td a[class*="bg-"],
.gh-dt table.product-datatable td button[class*="bg-"] { white-space: nowrap; }
/* Angka & harga rata kanan, judulnya ikut */
.gh-dt table.product-datatable thead th.gh-num,
.gh-dt table.product-datatable tbody td.gh-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.gh-dt table.product-datatable thead th.gh-num.sorting,
.gh-dt table.product-datatable thead th.gh-num.sorting_asc,
.gh-dt table.product-datatable thead th.gh-num.sorting_desc { padding-right: 24px !important; }
/* Teks panjang (judul berita, API key, deskripsi) dibungkus, tidak melebarkan tabel */
.gh-dt table.product-datatable tbody td.gh-teks { min-width: 200px; max-width: 340px; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.gh-dt table.product-datatable tbody td.gh-token { min-width: 150px; max-width: 190px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; color: #a9a6b8 !important; word-break: break-all; }
/* Judul kolom angka yang panjang ("PROFIT PLATINUM", "HARGA PROVIDER") boleh 2 baris agar kolom tidak terlalu lebar */
.gh-dt table.product-datatable thead th.gh-num { white-space: normal; min-width: 64px; max-width: 120px; line-height: 1.3; }
.gh-dt table.product-datatable thead th.gh-num,
.gh-dt table.product-datatable tbody td.gh-num { padding-left: 6px !important; }