/* ELS Fit — gaya layar kelompok V4: Kas, Admin (hub), Verifikasi bukti, Rekening, Anggota dan peran, Aturan + simulator.
   Semua aturan berada di bawah pembungkus .v4 (atau kelas ber-awalan kas-/v4-) supaya tidak bocor ke layar lain. Hanya token tema
   (tokens.css / fit.css): tanpa warna mentah, tanpa gaya inline. Mobile-first 360-430 px, rapi di tablet/desktop. */

/* ================================================================== kerangka layar */
.v4-page { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.v4-page > .page-head { margin: 0; }
.v4-body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.v4 .page-head .back { min-height: var(--tap); padding-right: var(--space-3); }
.v4 .section { margin-top: var(--space-2); }
.v4 .section-head { margin-bottom: var(--space-3); }
.v4-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.v4-btns > .btn { flex: 1 1 8rem; }
.v4-btns.wide > .btn { flex-basis: 13rem; }
.v4-form { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.v4-form > .btn-block { margin-top: var(--space-1); }
.v4 input[type="file"].input { padding: var(--space-2) var(--space-3); cursor: pointer; }
.v4 input[type="file"]::file-selector-button {
  min-height: 32px; margin-right: var(--space-3); padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-3); color: var(--color-text); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.v4 .check-label { font-weight: 600; }
.v4-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
.v4-grid > .field { min-width: 0; }
@media (min-width: 640px) { .v4-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v4-live:empty { display: none; }
.v4 .v4-staff { gap: var(--space-3); }

/* ================================================================== Kas */
.kas-hero { gap: var(--space-2); }
.kas-big { font-size: 2.125rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.kas-stat .v { font-size: var(--fs-lg); }
.kas-stat.in .v, .kas-amt.in { color: var(--ok); }
.kas-stat.out .v, .kas-amt.out { color: var(--due); }
.kas-amt { font-weight: 800; white-space: nowrap; }
.kas-note { white-space: pre-line; }
/* nominal tetap sebaris dengan judul (rata kanan); teks panjang membungkus di kolomnya. Hanya di layar sangat sempit (<= 340 px) nominal boleh turun ke baris sendiri */
.kas-rows .row-main { flex: 1 1 0; }
@media (max-width: 340px) {
  .kas-rows .list-row { flex-wrap: wrap; }
  .kas-rows .row-main { flex: 1 1 9rem; }
  .kas-rows .row-end { margin-left: auto; }
}
.kas-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.kas-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; }
.kas-ic.in { background: var(--ok-soft); color: var(--ok); }
.kas-ic.out { background: var(--muted-soft); color: var(--color-muted); }
.kas-ic .icon { width: 18px; height: 18px; }
.v4-list-head { padding: 0 var(--space-1); }
.v4-day { margin: 0 0 var(--space-1); font-size: var(--fs-sm); font-weight: 800; color: var(--color-muted); letter-spacing: .01em; }

/* ================================================================== hub admin */
.stats.v4-tiles { align-items: stretch; }
.v4-stat.tone-money { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .stats.v4-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v4-stat.tone-money { grid-column: auto; }
}
.v4-stat { text-decoration: none; color: inherit; min-height: var(--tap); justify-content: center; transition: border-color .2s; }
.v4-stat:hover { border-color: var(--color-border-strong); }
.v4-stat .v { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.v4-stat.tone-info .v { color: var(--info); }
.v4-menus { display: flex; flex-direction: column; gap: var(--space-2); }
.v4-menu { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: var(--tap); }
.v4-menu-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.v4-menu-ic .icon { width: 20px; height: 20px; }
.v4-menu-t, .v4-menu-d { display: block; }
.v4-menu-d { margin-top: 2px; }
.v4-menu > .icon:last-child { color: var(--color-dim); }

/* ================================================================== verifikasi bukti */
.v4-list { display: flex; flex-direction: column; gap: var(--space-3); }
.v4-verify { padding: var(--space-4); list-style: none; }
.v4-verify > * + * { margin-top: 0; }
.v4-who { gap: var(--space-3); align-items: center; }
.v4-match { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-2); }
.v4-match-amt { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; }
.v4-proof { display: block; }
.v4-proof a { display: block; border-radius: var(--radius); }
.v4-proof-img { display: block; width: 100%; max-height: 22rem; object-fit: contain; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-2); }
.v4-proof-pdf { display: flex; flex-direction: column; gap: var(--space-2); }
.v4-reject { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--due-line); border-radius: var(--radius); background: var(--due-soft); }
.v4-reject[hidden] { display: none; }
.v4-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); box-shadow: none; }
.v4-ok:hover { background: var(--ok-soft); border-color: var(--ok); box-shadow: none; filter: none; }
.v4-unpaid { flex-wrap: wrap; align-items: center; }
.v4-unpaid-end { flex-wrap: wrap; justify-content: flex-end; }
.v4-unpaid .av { align-self: flex-start; }
.v4-unpaid .row-main { flex: 1 1 12rem; }
.v4-late { color: var(--due); font-weight: 600; }
@media (max-width: 639px) {
  .v4-unpaid-end { flex: 1 0 100%; justify-content: flex-start; padding-left: calc(36px + var(--space-3)); }
}

/* ================================================================== rekening */

.v4-preview { display: flex; flex-direction: column; gap: var(--space-1); }

/* ================================================================== anggota dan peran */
.v4-tools { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.v4-users { margin: 0; }
.v4-users > li + li { border-top: 1px solid var(--color-border); }
.v4-user-btn { border-top: 0; min-height: 64px; }
.v4-user-btn:hover .row-title { color: var(--color-link); }
.v4-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.v4-kv { margin: 0; }
.v4-kv dd { text-align: right; }

/* ================================================================== aturan dan simulator */
.v4-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-2); }
.v4-sim { width: 100%; min-width: 31rem; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.v4-sim th, .v4-sim td { padding: var(--space-2) var(--space-3); text-align: right; vertical-align: top; }
.v4-sim thead th { position: sticky; top: 0; background: var(--color-surface-3); color: var(--color-muted); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.v4-sim tbody tr + tr > * { border-top: 1px solid var(--color-border); }
.v4-sim tbody th { text-align: left; font-weight: 800; color: var(--color-text); }
.v4-sim thead th:first-child { text-align: left; }
.v4-was { display: block; color: var(--color-dim); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.v4-pos { color: var(--ok); }
.v4-neg { color: var(--due); }
.v4-hist-chip { margin-left: var(--space-2); vertical-align: middle; }
.v4-history .v4-hist { align-items: flex-start; }

/* layar sempit: tiap skenario menjadi kartu kecil (semua angka terlihat tanpa gulir samping) */
@media (max-width: 639px) {
  .v4-table-wrap { overflow: visible; border: 0; background: none; }
  .v4-sim { min-width: 0; display: block; }
  .v4-sim thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .v4-sim tbody { display: flex; flex-direction: column; gap: var(--space-2); }
  .v4-sim tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4);
    padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-2);
  }
  .v4-sim tbody tr + tr > * { border-top: 0; }
  .v4-sim tbody th { grid-column: 1 / -1; padding: 0; text-align: left; font-size: var(--fs-md); }
  .v4-sim tbody th::after { content: " pendaftar"; font-weight: 600; color: var(--color-muted); font-size: var(--fs-sm); }
  /* tiap sel: label kecil di atas, nilai baru di bawahnya, lalu "(dulu …)" — bertumpuk rata kiri sehingga tidak pernah terpotong di tepi kartu */
  .v4-sim td { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; padding: 0; text-align: left; }
  .v4-sim td::before { content: attr(data-label); color: var(--color-muted); font-size: var(--fs-xs); font-weight: 600; }
  .v4-sim td:last-child { grid-column: 1 / -1; }
  .v4-val { min-width: 0; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
  .v4-was { display: block; margin-left: 0; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .v4-stat { transition: none; }
}