/* ==========================================================================
   JADUAL — sticky header, sorting, pagination
   Dimuatkan selepas style.css
   ========================================================================== */

.jd-bekas{
  border:1px solid var(--garis, #E6EAF2);
  border-radius:12px;
  background:var(--permukaan, #fff);
  /* overflow:clip TIDAK wujudkan scroll container — sticky kekal hidup */
  overflow:hidden;
  overflow:clip;
}

/* bekas skrol: satu-satunya bekas yang skrol → header melekat di dalamnya */
.jd-skrol{
  overflow:auto;
  max-height:min(62vh, 520px);
  -webkit-overflow-scrolling:touch;
}

/* ---------- header melekat ---------- */
.jd-jadual thead th{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--kepala-jadual, #F7F9FC);
  box-shadow:inset 0 -1px 0 var(--garis, #E6EAF2), 0 2px 6px rgba(15,18,60,.05);
}

/* baris bawah kepala kekal kelihatan bila skrol */
.jd-skrol::-webkit-scrollbar{width:10px;height:10px}
.jd-skrol::-webkit-scrollbar-thumb{
  background:#CBD5E6;border-radius:6px;border:2px solid transparent;
  background-clip:content-box;
}
.jd-skrol::-webkit-scrollbar-thumb:hover{background:#A9B6CE;background-clip:content-box}

/* ---------- sel kepala boleh klik ---------- */
.jd-jadual thead th[data-jdkol]{
  cursor:pointer;
  user-select:none;
  transition:background .15s, color .15s;
}
.jd-jadual thead th[data-jdkol]:hover{background:#EFF3FA}
.jd-jadual thead th[data-jdkol]:focus-visible{
  outline:2px solid var(--biru, #24538A);
  outline-offset:-2px;
}
.jd-jadual thead th.disusun{color:var(--navy, #16255C)}
.jd-jadual thead th.tak-susun{cursor:default}

.jd-th{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:normal;
}
.jd-anak{
  flex:0 0 auto;
  width:11px;height:11px;
  stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  opacity:.32;
  transition:opacity .15s;
}
.jd-jadual thead th[data-jdkol]:hover .jd-anak{opacity:.6}
.jd-jadual thead th.disusun .jd-anak{opacity:1}

/* ---------- checkbox pilih ---------- */
.jd-pilih-kepala,
.jd-pilih-sel{
  width:44px;
  text-align:center;
  padding-left:6px !important;
  padding-right:6px !important;
}

.jd-cb{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;height:18px;
  cursor:pointer;
  vertical-align:middle;
}
.jd-cb input{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.jd-cb span[aria-hidden]{
  width:17px;height:17px;
  border:1.5px solid #C3CDDF;
  border-radius:4px;
  background:#fff;
  transition:background .13s, border-color .13s;
  position:relative;
}
.jd-cb input:checked + span[aria-hidden]{
  background:var(--navy, #16255C);
  border-color:var(--navy, #16255C);
}
.jd-cb input:checked + span[aria-hidden]::after{
  content:'';
  position:absolute;
  left:4.6px;top:1.2px;
  width:5px;height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.jd-cb input:indeterminate + span[aria-hidden]{
  background:var(--navy, #16255C);
  border-color:var(--navy, #16255C);
}
.jd-cb input:indeterminate + span[aria-hidden]::after{
  content:'';
  position:absolute;
  left:3px;top:7px;
  width:9px;height:2px;
  background:#fff;
  border-radius:1px;
}
.jd-cb input:focus-visible + span[aria-hidden]{
  outline:2px solid var(--biru, #24538A);
  outline-offset:2px;
}

.jd-jadual tbody tr.dipilih{background:#F2F7FE}
.jd-jadual tbody tr.dipilih:hover{background:#EAF2FD}

/* ---------- kaki pagination ---------- */
.jd-kaki{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 14px;
  border-top:1px solid var(--garis, #E6EAF2);
  background:var(--kepala-jadual, #FBFCFE);
  flex-wrap:wrap;
}
.jd-info{
  font-size:12px;
  color:var(--ink-3, #6B7386);
}
.jd-info strong{color:var(--ink-2, #3A4256);font-weight:600}

/* kiri kaki: info + pemilih saiz halaman */
.jd-kiri{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.jd-saiz{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--ink-3, #6B7386);
}
.jd-saiz-label{white-space:nowrap}
.jd-saiz-pilih{
  font:inherit;
  font-size:12px;
  padding:5px 26px 5px 9px;
  border:1px solid var(--garis, #DDE3EE);
  border-radius:6px;
  background:var(--putih, #fff) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7386' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center;
  background-size:11px;
  color:var(--ink-2, #3A4256);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .14s ease;
}
.jd-saiz-pilih:hover{border-color:#B9C6DD}
.jd-saiz-pilih:focus{outline:2px solid #24538A;outline-offset:1px}

.jd-hal{display:flex;align-items:center;gap:3px}

.jd-hal-btn{
  min-width:30px;height:30px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:12px;
  font-weight:500;
  color:var(--ink-2, #3A4256);
  background:transparent;
  border:1px solid transparent;
  border-radius:7px;
  cursor:pointer;
  transition:background .13s, color .13s, border-color .13s;
  font-variant-numeric:tabular-nums;
}
.jd-hal-btn:hover:not(:disabled):not(.aktif){
  background:#EDF2FA;
  border-color:#DBE4F1;
}
.jd-hal-btn.aktif{
  background:var(--navy, #16255C);
  color:#fff;
  border-color:var(--navy, #16255C);
  font-weight:600;
}
.jd-hal-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.jd-hal-btn svg{
  width:14px;height:14px;
  stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.jd-hal-nav{color:var(--ink-3, #6B7386)}
.jd-titik{
  padding:0 3px;
  color:var(--ink-3, #6B7386);
  font-size:12px;
}

/* ---------- tema gelap ---------- */
html[data-tema="gelap"] .jd-bekas{
  border-color:#2C3550;
  background:#151B2B;
}
html[data-tema="gelap"] .jd-jadual thead th{
  background:#1B2233;
  box-shadow:inset 0 -1px 0 #2C3550;
}
html[data-tema="gelap"] .jd-jadual thead th[data-jdkol]:hover{background:#222B40}
html[data-tema="gelap"] .jd-kaki{
  background:#1A2131;
  border-top-color:#2C3550;
}
html[data-tema="gelap"] .jd-info{color:#8C95AA}
html[data-tema="gelap"] .jd-info strong{color:#C9D2E3}
html[data-tema="gelap"] .jd-hal-btn{color:#B6C0D4}
html[data-tema="gelap"] .jd-hal-btn:hover:not(:disabled):not(.aktif){
  background:#242E45;border-color:#33405C;
}
html[data-tema="gelap"] .jd-hal-btn.aktif{
  background:#2E5C9A;border-color:#2E5C9A;color:#fff;
}
html[data-tema="gelap"] .jd-cb span[aria-hidden]{
  background:#1E2637;border-color:#3C4A66;
}
html[data-tema="gelap"] .jd-jadual tbody tr.dipilih{background:#1C2537}
html[data-tema="gelap"] .jd-jadual tbody tr.dipilih:hover{background:#212B40}

/* ---------- mobile: jadual jadi senarai kad ---------- */
@media (max-width:760px){
  .jd-bekas{border-radius:10px}
  .jd-bekas--tetap .jd-skrol{max-height:none}
  .jd-skrol{overflow:visible}

  /* header disembunyikan, label dibawa oleh data-label */
  .jd-jadual thead{display:none}
  .jd-jadual,
  .jd-jadual tbody,
  .jd-jadual tr,
  .jd-jadual td{display:block;width:100%}

  .jd-jadual tr{
    position:relative;
    padding:14px 14px 12px;
    border-bottom:1px solid var(--garis, #E6EAF2);
  }
  .jd-jadual tr:last-child{border-bottom:0}

  .jd-jadual td{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:4px 0 !important;
    border:0 !important;
    text-align:left !important;
    font-size:12.5px;
    line-height:1.5;
  }
  .jd-jadual td::before{
    content:attr(data-label);
    flex:0 0 42%;
    max-width:42%;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--ink-3, #6B7386);
    padding-top:1px;
  }

  /* sel pilih jadi kotak di penjuru */
  .jd-jadual td.jd-pilih-sel{
    position:absolute;
    top:12px;right:12px;
    width:auto;
    padding:0 !important;
  }
  .jd-jadual td.jd-pilih-sel::before{display:none}
  .jd-jadual tr{padding-right:48px}

  /* kolum utama lebih tebal */
  .jd-jadual td[data-label="No. Kompaun"],
  .jd-jadual td[data-label="No. Transaksi"],
  .jd-jadual td[data-label="Keterangan"]{font-weight:600}

  .jd-kaki{
    padding:10px 12px;
    justify-content:center;
    flex-direction:column;
    gap:9px;
  }
  .jd-info{font-size:11.5px}
}

/* ==========================================================================
   Butang ikon dalam sel jadual
   ========================================================================== */
.btn-ikon{
  width:30px;height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:var(--ink-3, #6B7386);
  cursor:pointer;
  transition:background .14s, color .14s, border-color .14s;
}
.btn-ikon svg{
  width:15px;height:15px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.btn-ikon:hover{
  background:#EAF1FB;
  border-color:#D8E3F4;
  color:var(--biru, #24538A);
}
.btn-ikon:focus-visible{
  outline:2px solid var(--biru, #24538A);
  outline-offset:1px;
}
html[data-tema="gelap"] .btn-ikon{color:#8C95AA}
html[data-tema="gelap"] .btn-ikon:hover{background:#243049;border-color:#33405C;color:#7DB0EE}

/* sel tindakan jangan beri bayang/label pelik pada mobile */
@media (max-width:760px){
  .jd-jadual td[data-label="Tindakan"]{
    justify-content:flex-end;
    padding-top:8px !important;
  }
  .jd-jadual td[data-label="Tindakan"]::before{display:none}
}

/* sel Kenderaan: teks dan '—' mesti rata kiri sama */
.jadual-akaun.jd-jadual tbody td[data-label="Kenderaan"]{
  text-align:left !important;
}

/* anak panah pagination: disabled pun mesti kelihatan */
.jd-hal-btn:disabled{opacity:.5}
.jd-hal-nav{color:var(--ink-2, #3A4256)}

/* ==========================================================================
   MOBILE: jadual mesti mengalahkan `.jadual-akaun{min-width:640px}`
   dalam style.css — jika tidak ia 578px dalam viewport 390px dan
   `.jd-bekas{overflow:hidden}` menyoroknya tanpa gejala.
   ========================================================================== */
@media (max-width:760px){
  .jd-bekas .jd-jadual.jadual-akaun{
    min-width:0;
    width:100%;
    table-layout:auto;
  }
  .jd-bekas .jd-jadual.jadual-akaun thead th,
  .jd-bekas .jd-jadual.jadual-akaun tbody td{
    width:auto !important;
    max-width:none;
  }
}

html[data-tema="gelap"] .jd-saiz-pilih{
  background-color:#1E2637;
  border-color:#33405A;
  color:#DCE3F0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C95AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-tema="gelap"] .jd-saiz-pilih:hover{border-color:#46577A}

@media (max-width:640px){
  .jd-kaki{align-items:flex-start;gap:10px}
  .jd-kiri{flex-direction:column;align-items:flex-start;gap:8px;width:100%}
}

/* ---------- offset skrol: jangan sorok baris bawah header melekat ---------- */
html{scroll-padding-top:104px}
.jd-jadual tbody tr,
.jd-jadual tbody td,
.jd-jadual tbody td button,
.jd-jadual tbody td a{scroll-margin-top:148px}