/* table.css — .tbl-*: tabel data. Di wadah sempit: daftar ringkas 2 baris (.tbl--m, opsi mobile) atau kartu label:nilai (< 768px, tanpa opsi) */
.tbl-wrap{overflow-x:auto;margin:0 -6px;container:tbl / inline-size}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:var(--fs-xs);font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;white-space:nowrap}
.tbl td{padding:13px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl .tbl-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-main{font-weight:700}
.tbl-link{color:inherit;transition:color var(--dur-fast)}
.tbl-link:hover{color:var(--brand-text)}
.tbl-row{transition:background-color var(--dur-fast) var(--ease-out)}
.tbl-row--link{cursor:pointer}
.tbl-row:hover{background:var(--hover)}
.tbl-actions{text-align:right;white-space:nowrap}
.tbl-sub{display:block;font-size:var(--fs-xs);color:var(--text-3);font-weight:500;margin-top:2px}
.tbl-muted{color:var(--text-3)}

/* Daftar ringkas: sel .tbl-m hanya tampil saat wadah sempit; isinya disusun di grid baris:
   judul · angka / keterangan · status / info tambahan (+ aksi). Tautan judul menutup seluruh baris. */
.tbl-m{display:none}
.tbl-m-title{grid-column:1;grid-row:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.tbl-m-title svg.ic{margin-left:5px;color:var(--text-3);vertical-align:-2px}
.tbl-m-value{grid-column:2;grid-row:1;justify-self:end;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl-m-sub{grid-column:1;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);color:var(--text-3)}
.tbl-m-badge{grid-column:2;grid-row:2;justify-self:end;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:var(--fs-sm);color:var(--text-3)}
.tbl-m-meta{grid-column:1 / -1;grid-row:3;margin-top:4px;font-size:var(--fs-xs);color:var(--text-3)}
.tbl--act-inline .tbl-m-meta{grid-column:1}
.tbl-m-link{text-align:left}
.tbl-m-link::after{content:"";position:absolute;inset:0}
.tbl-m-link:focus-visible{outline:none}
.tbl-row:has(.tbl-m-link:focus-visible){outline:2px solid var(--brand-2);outline-offset:-2px}

/* Tanpa geser samping di layar sempit; cetak tetap tabel. Batas bawaan 760px, detail klien (.tbl--m-sm) 520px — aturannya sama. */
@media screen{
  @container tbl (max-width:760px){
    .tbl--m:not(.tbl--m-sm),.tbl--m:not(.tbl--m-sm) tbody{display:block}
    .tbl--m:not(.tbl--m-sm) thead{display:none}
    .tbl--m:not(.tbl--m-sm) tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:12px 6px;border-top:1px solid var(--line)}
    .tbl--m:not(.tbl--m-sm) tr:first-child{border-top:0}
    .tbl--m:not(.tbl--m-sm) tr.tbl-row--link:active{background:var(--hover-ink)}
    .tbl--m:not(.tbl--m-sm) td{display:none}
    .tbl--m:not(.tbl--m-sm) td.tbl-m{display:contents}
    .tbl--m:not(.tbl--m-sm) td.tbl-actions:not(:empty){position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;grid-column:1 / -1;grid-row:4;margin-top:8px;padding:0;border:0}
    .tbl--act-inline:not(.tbl--m-sm) td.tbl-actions:not(:empty){grid-column:2;grid-row:3;margin-top:4px}
    .tbl--act-none:not(.tbl--m-sm) td.tbl-actions:not(:empty){display:none}
  }
  @container tbl (max-width:520px){
    .tbl--m-sm,.tbl--m-sm tbody{display:block}
    .tbl--m-sm thead{display:none}
    .tbl--m-sm tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:12px 6px;border-top:1px solid var(--line)}
    .tbl--m-sm tr:first-child{border-top:0}
    .tbl--m-sm tr.tbl-row--link:active{background:var(--hover-ink)}
    .tbl--m-sm td{display:none}
    .tbl--m-sm td.tbl-m{display:contents}
    .tbl--m-sm td.tbl-actions:not(:empty){position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;grid-column:1 / -1;grid-row:4;margin-top:8px;padding:0;border:0}
    .tbl--act-inline.tbl--m-sm td.tbl-actions:not(:empty){grid-column:2;grid-row:3;margin-top:4px}
    .tbl--act-none.tbl--m-sm td.tbl-actions:not(:empty){display:none}
  }
}

/* Layar sentuh: tautan judul biasa (tanpa tautan selebar baris) & centang di kolom aksi ≥ 44px, tanpa menggeser tata letak */
@media (pointer:coarse){
  .tbl-m-title .tbl-link:not(.tbl-m-link){display:inline-block;padding:13px 0;margin:-13px 0}
  .tbl-actions label{min-height:44px}
}

/* Cadangan untuk tabel tanpa opsi mobile: < 768px tiap baris jadi kartu (label: nilai) */
@media (max-width:767px){
  .tbl-wrap:not(:has(.tbl--m)){overflow:visible;margin:0}
  .tbl:not(.tbl--m) thead{display:none}
  .tbl:not(.tbl--m),.tbl:not(.tbl--m) tbody{display:block}
  .tbl:not(.tbl--m) tr{display:block;padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-mobile)}
  .tbl:not(.tbl--m) td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border:0;text-align:right;font-size:var(--fs-sm)}
  .tbl:not(.tbl--m) td::before{content:attr(data-label);flex:none;color:var(--text-3);font-weight:600;text-align:left}
  .tbl:not(.tbl--m) td.tbl-main{justify-content:flex-start;text-align:left;font-size:var(--fs-md);padding-bottom:8px}
  .tbl:not(.tbl--m) td.tbl-main::before,.tbl:not(.tbl--m) td.tbl-actions::before{content:none}
  .tbl:not(.tbl--m) td.tbl-actions{justify-content:flex-end;padding-top:8px}
}