/* ==========================================================================
   Senarai Transaksi — tab, tapisan, eksport
   Jadual itu sendiri digerakkan oleh assets/css/jadual.css
   ========================================================================== */

/* ---------- tapisan ---------- */
.tr-tapis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)) minmax(0,1.5fr) auto;
  gap:12px;
  align-items:end;
  padding:14px;
  border:1px solid var(--garis, #E6EAF2);
  border-radius:11px;
  background:var(--permukaan-2, #FAFBFD);
  margin-bottom:14px;
}

.tr-medan{min-width:0}
.tr-medan label{
  display:block;
  font-size:11px;
  font-weight:500;
  color:var(--ink-3, #6B7386);
  margin-bottom:5px;
  white-space:nowrap;
}
.tr-medan input,
.tr-medan select{
  width:100%;
  font:inherit;
  font-size:12.5px;
  color:var(--ink-1, #2A3244);
  background:var(--permukaan, #fff);
  border:1px solid var(--garis-input, #DDE3EE);
  border-radius:8px;
  padding:9px 11px;
  min-height:38px;
  transition:border-color .14s, box-shadow .14s;
}
.tr-medan input:focus,
.tr-medan select:focus{
  outline:0;
  border-color:var(--biru, #24538A);
  box-shadow:0 0 0 3px rgba(36,83,138,.1);
}
.tr-medan .pilih-satu{position:relative}
.tr-medan .pilih-satu select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:32px;
  cursor:pointer;
}
.tr-medan .pilih-satu svg{
  position:absolute;
  right:11px;top:50%;
  transform:translateY(-50%);
  width:14px;height:14px;
  stroke:var(--ink-3, #6B7386);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.tr-reset{
  height:38px;
  white-space:nowrap;
}

/* ---------- ringkasan ---------- */
.tr-ringkas{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:0 2px 12px;
  font-size:12.5px;
  color:var(--ink-3, #6B7386);
}
.tr-ringkas strong{
  color:var(--ink-1, #2A3244);
  font-weight:600;
}

/* ---------- eksport ---------- */
.tr-eksport{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tr-eksport .btn-garis{
  font-size:11.5px;
  padding:6px 11px;
  min-height:32px;
}

/* ---------- cetak ---------- */
.tr-cetak{display:none}
body.tr-cetak-mod .tr-cetak{display:block}
body.tr-cetak-mod > *:not(.tr-cetak){display:none !important}
.tr-cetak{
  padding:24px;
  font-size:11px;
  color:#111;
}
.tc-kepala{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:2px solid #16255C;
  padding-bottom:10px;
  margin-bottom:14px;
}
.tc-kepala strong{display:block;font-size:13px;color:#16255C}
.tc-kepala span{font-size:10.5px;color:#555}
.tc-meta{text-align:right;display:flex;flex-direction:column;gap:2px}
.tr-cetak table{
  width:100%;
  border-collapse:collapse;
  font-size:9.5px;
}
.tr-cetak th{
  background:#F0F3F9;
  text-align:left;
  padding:6px 7px;
  border-bottom:1px solid #C9D1E0;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.tr-cetak td{
  padding:5px 7px;
  border-bottom:1px solid #E6EAF2;
}
.tr-cetak tfoot td{
  font-weight:600;
  border-top:1.5px solid #16255C;
  padding-top:7px;
}
.tc-kaki{
  margin-top:18px;
  font-size:9px;
  color:#888;
  text-align:center;
}

/* ---------- responsif ---------- */
@media (max-width:1080px){
  .tr-tapis{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .tr-medan--cari{grid-column:1/-1}
  .tr-reset{grid-column:1/-1;width:100%}
}

@media (max-width:760px){
  .tr-tapis{
    grid-template-columns:1fr;
    padding:12px;
    gap:11px;
  }
  .tr-medan--cari{grid-column:auto}
  .tr-eksport{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
  }
  .tr-eksport .btn-garis{
    justify-content:center;
    padding:7px 4px;
    font-size:11px;
  }
  .tr-ringkas{
    justify-content:space-between;
    gap:10px;
  }
}

/* ---------- tema gelap ---------- */
html[data-tema="gelap"] .tr-tapis{
  background:#1A2131;
  border-color:#2A3348;
}
html[data-tema="gelap"] .tr-medan input,
html[data-tema="gelap"] .tr-medan select{
  background:#151B2B;
  border-color:#33405C;
  color:#DCE3F0;
}
html[data-tema="gelap"] .tr-ringkas{color:#8C95AA}
html[data-tema="gelap"] .tr-ringkas strong{color:#DCE3F0}