:root{
  --paper:#EDEFEB; --surface:#FCFCFB; --surface-2:#F4F6F1;
  --ink:#111815; --ink-2:#3B4742; --muted:#5D6A64;
  --rule:#DCE1DA; --rule-strong:#C3CBC2;
  --accent:#134E56; --accent-soft:#DCEAEA;
  --masuk:#008A72; --keluar:#C2521F;
  --masuk-soft:#DDEDE7; --keluar-soft:#F6E5DA;
  --masuk-teks:#00644F; --keluar-teks:#9E3F12;   /* teks kecil di atas latar lembut: kontras ≥ 4.5:1 */
  --on-accent:#FCFCFB;
  --shadow:0 1px 2px rgba(17,24,21,.05), 0 8px 24px -18px rgba(17,24,21,.35);
  --r:3px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1412; --surface:#181E1B; --surface-2:#1E2522;
    --ink:#E8ECE7; --ink-2:#C3CCC6; --muted:#94A19A;
    --rule:#2B332F; --rule-strong:#3A443F;
    --accent:#6FC2CB; --accent-soft:#1D2E31;
    --masuk:#2AA189; --keluar:#C9713A;
    --masuk-soft:#16302A; --keluar-soft:#33231A;
    --on-accent:#0F1412;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{

    --paper:#0F1412; --surface:#181E1B; --surface-2:#1E2522;
    --ink:#E8ECE7; --ink-2:#C3CCC6; --muted:#94A19A;
    --rule:#2B332F; --rule-strong:#3A443F;
    --accent:#6FC2CB; --accent-soft:#1D2E31;
    --masuk:#2AA189; --keluar:#C9713A;
    --masuk-soft:#16302A; --keluar-soft:#33231A;
    --on-accent:#0F1412;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.8);
    color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
button,input,select{font:inherit;color:inherit}
:where(a,button,input,select,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}
.num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.wrap{max-width:1200px;margin:0 auto;padding:26px 22px 72px}
select,input[type=text],input[type=date],input[type=search],input[type=email],input[type=password]{background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r);padding:8px 10px;font-size:14px;width:100%}
select{cursor:pointer}
.btn{border:1px solid var(--rule-strong);background:var(--surface);border-radius:var(--r);padding:8px 14px;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{background:var(--surface-2);border-color:var(--muted)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{padding:6px 10px;font-size:13px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500;width:100%;padding:11px 14px}
.btn-primary:hover{filter:brightness(1.08);background:var(--accent)}

/* ── Layar masuk ──────────────────────────────────────── */
/* Gerbang masuk: satu kartu tenang — merek, lalu isian. */
.gerbang{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 20px}
.gerbang-kotak{
  width:100%;max-width:392px;background:var(--surface);
  border:1px solid var(--rule-strong);border-top:2px solid var(--accent);box-shadow:var(--shadow);
}
.gerbang-kepala{padding:38px 34px 0;text-align:center}
.gerbang-kepala h1{
  font-family:Newsreader,Georgia,serif;font-weight:500;font-size:clamp(28px,7vw,34px);
  line-height:1.05;letter-spacing:-.015em;margin-top:7px;color:var(--accent);
}
.gerbang-kanan{padding:26px 34px 32px}
.pesan{font-size:13.5px;padding:9px 11px;border-radius:var(--r);margin-bottom:14px}
.pesan.galat{background:var(--keluar-soft);color:var(--keluar)}
.pesan.baik{background:var(--masuk-soft);color:var(--masuk)}

/* ── Ringkasan ────────────────────────────────────────── */
.ringkasan{margin-top:22px;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);grid-template-columns:1fr 1fr}
@media (min-width:800px){.ringkasan{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.fig{background:var(--surface);padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px;min-width:0}
.fig .label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fig .val{font-size:22px;font-weight:500;line-height:1.15;overflow-wrap:normal;word-break:keep-all}
.fig.saldo{background:var(--accent-soft)}
/* Ubin dasbor sebagai pemilih seri grafik */
.fig-pilih{border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background .15s}
.fig-pilih:hover{background:var(--surface-2)}
.fig-pilih[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--accent)}
.fig-pilih[aria-pressed="true"] .val{color:var(--accent);font-weight:600}
.fig-pilih:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fig.saldo .val{font-size:clamp(26px,3.4vw,34px);color:var(--accent);font-weight:600}
.fig .note{font-size:12px;color:var(--muted)}
.val.masuk{color:var(--masuk)}
.val.keluar{color:var(--keluar)}
.akun-strip{display:flex;flex-wrap:wrap;border:1px solid var(--rule);border-top:0;background:var(--rule)}
.akun-cell{flex:1 1 190px;background:var(--surface);padding:11px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 1px 1px 0;min-width:0}
.akun-cell .nm{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;color:var(--ink-2)}
.akun-cell .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule-strong);border-radius:2px;padding:1px 5px;flex:none}
.akun-cell .amt{font-size:14px;font-weight:500;white-space:nowrap}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.field > label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.rupiah{display:flex;align-items:stretch;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface)}
.rupiah span{display:flex;align-items:center;padding:0 10px;background:var(--surface-2);border-right:1px solid var(--rule-strong);color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:13px;white-space:nowrap}
.rupiah input{border:0;background:transparent;text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:16px;padding:9px 10px;width:100%}
.rupiah input:focus{outline:none}
.rupiah:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.err{color:var(--keluar);font-size:12.5px}

.section{margin-bottom:34px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--rule-strong);padding-bottom:8px;margin-bottom:16px}
.section-head h2{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:22px;letter-spacing:-.01em}
.legend{display:flex;gap:14px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.swatch{width:11px;height:11px;border-radius:2px;flex:none}
.chart-wrap{position:relative}
.chart-wrap svg{display:block;width:100%;height:auto}
.tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);background:var(--ink);color:var(--paper);padding:8px 10px;border-radius:var(--r);font-size:12px;line-height:1.45;white-space:nowrap;z-index:5;transition:opacity .12s;box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}
.tip b{font-family:"IBM Plex Mono",monospace;font-weight:500}
.slot{fill:transparent}
.slot:hover{fill:var(--rule);fill-opacity:.35}
.kat{display:flex;flex-direction:column;gap:11px}
.kat-row{display:grid;grid-template-columns:minmax(96px,142px) minmax(0,1fr) auto;gap:12px;align-items:center}
.kat-row .nm{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kat-track{height:9px;background:var(--rule);border-radius:2px;overflow:hidden}
.kat-bar{height:100%;background:var(--keluar);border-radius:0 2px 2px 0}
.kat-bar.saldo{background:var(--accent)} .kat-bar.masuk{background:var(--masuk)} .kat-bar.minus{background:var(--keluar)}
.kat-dua{display:flex;flex-direction:column;gap:3px}
.kat-dua .kat-track{height:6px}
.kat-row .amt{font-size:13px;color:var(--ink-2)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .search{flex:1 1 200px;min-width:170px}
.toolbar .akun-filter{flex:0 1 190px}
.chips{display:flex;gap:6px}
.chip{border:1px solid var(--rule-strong);background:var(--surface);border-radius:999px;padding:6px 13px;font-size:13px;cursor:pointer;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
thead th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:0 10px 8px;border-bottom:1px solid var(--rule-strong);position:sticky;top:0;background:var(--paper)}
thead th.r{text-align:right}
thead th[data-urut]{cursor:pointer;user-select:none;white-space:nowrap}
thead th[data-urut]:hover{color:var(--ink)}
thead th[data-urut]::after{content:"↕";display:inline-block;margin-left:5px;font-size:10px;opacity:.35}
thead th[aria-sort="ascending"]{color:var(--accent)}
thead th[aria-sort="descending"]{color:var(--accent)}
thead th[aria-sort="ascending"]::after{content:"▲";opacity:1;font-size:8px}
thead th[aria-sort="descending"]::after{content:"▼";opacity:1;font-size:8px}
tbody td{padding:11px 10px;border-bottom:1px solid var(--rule);vertical-align:top;font-size:14px}
tbody td.r{text-align:right;white-space:nowrap}
tbody tr:hover{background:var(--surface-2)}
.tgl{color:var(--muted);white-space:nowrap;font-size:13px}
.ket{display:flex;flex-direction:column;gap:4px}
.ket .meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.k-cat{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:2px;white-space:nowrap;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--rule)}
.k-cat.m{background:var(--masuk-soft);border-color:transparent;color:var(--masuk)}
.k-cat.k{background:var(--keluar-soft);border-color:transparent;color:var(--keluar)}
.pencatat{font-size:11.5px;color:var(--muted)}
td .m{color:var(--masuk)}
td .k{color:var(--keluar)}
.saldo-col{color:var(--ink-2)}
.del{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:2px}
.del:hover{color:var(--keluar);background:var(--keluar-soft)}
.del[data-armed="1"]{color:var(--keluar);background:var(--keluar-soft);font-weight:500}
.empty{padding:36px 14px;text-align:center;color:var(--muted);font-size:14px;border-bottom:1px solid var(--rule)}

/* ── Data induk & anggota ─────────────────────────────── */
.master{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
        grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.master-tunggal{grid-template-columns:minmax(0,1fr);max-width:560px}
.mcol.mcol-polos{padding:0;background:transparent}
.tb-ringkas{max-width:none;margin:2px 0 14px;padding:2px 14px 0}
.tb-ringkas .lr-r{grid-template-columns:minmax(0,1fr) auto}
.tb-ringkas .lr-p{display:none}
.md-track{height:9px;background:var(--rule);border-radius:2px;overflow:hidden}
.md-bar{height:100%;background:var(--accent);border-radius:0 2px 2px 0}
/* Di popup, nama akun tidak boleh terpotong: keterangan turun ke baris kedua. */
.mcol-polos .mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nama acts" "meta acts";row-gap:2px;align-items:center}
.mcol-polos .mrow .mname{grid-area:nama;white-space:normal}
.mcol-polos .mrow .mmeta{grid-area:meta;white-space:normal}
.mcol-polos .mrow .acts{grid-area:acts;align-self:center}

.mcol{background:var(--surface);padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mcol h3{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.mcol h3 .count{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);font-weight:400}
/* Satu baris keterangan per kartu; ditarik rapat ke judulnya. */
.mcol .mhint{font-size:12px;line-height:1.45;color:var(--muted);margin-top:-7px}
/* Akun kas: keterangannya panjang (jenis, saldo awal, jumlah transaksi), jadi
   turun ke baris kedua agar namanya tidak terpotong di kolom sempit. */
#listAkun .mrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"no nama acts" "no meta acts";row-gap:1px;column-gap:8px;align-items:center}
#listAkun .mrow .no-akun{grid-area:no;align-self:center}
#listAkun .mrow .mname{grid-area:nama;white-space:normal}
#listAkun .mrow .mmeta{grid-area:meta;white-space:normal}
#listAkun .mrow .acts{grid-area:acts;align-self:center}
.mlist{display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule);min-width:0}
.mrow:first-child{border-top:1px solid var(--rule)}
.mrow .mname{flex:1 1 auto;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .mmeta{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);white-space:nowrap}
/* Nomor akun: lebar tetap supaya nama tetap sejajar walau nomornya beda panjang. */
.mrow .no-akun{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);flex:0 0 auto;min-width:30px}
/* Kotak nomor akun: sempit, karena isinya paling banyak empat angka.
   Awalan grupnya bagian dari label, bukan isian — grup ditentukan jenis datanya. */
.madd .rupiah.no-isi,.medit .rupiah.no-isi{flex:0 0 124px}
.rupiah.no-isi span{padding:0 8px}
.rupiah.no-isi input{text-align:left;font-size:13.5px;padding:9px 8px}
.mrow .acts{display:flex;gap:2px;flex:none}
.icon-btn{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;padding:3px 6px;border-radius:2px}
.icon-btn:hover{color:var(--ink);background:var(--surface-2)}
.icon-btn.danger:hover{color:var(--keluar);background:var(--keluar-soft)}
.icon-btn:disabled{opacity:.38;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--rule-strong)}
.icon-btn:disabled:hover{color:var(--muted);background:transparent}
.icon-btn[data-armed="1"]{color:var(--keluar);background:var(--keluar-soft);font-weight:500}
.medit{display:flex;flex-direction:column;gap:7px;padding:9px 0;border-bottom:1px solid var(--rule)}
.medit .row,.madd .row{display:flex;gap:7px}
.medit .row > *,.madd .row > *{flex:1 1 0;min-width:0}
.madd{display:flex;flex-direction:column;gap:7px;margin-top:2px}
/* Tombol tampilkan sandi menumpang di dalam medannya sendiri: barisnya sudah
   padat oleh peran dan tombol simpan, jadi tidak ada kolom baru yang ditambah. */
.sandi-bidang{position:relative;display:flex}
.sandi-bidang input{flex:1 1 auto;min-width:0;padding-right:86px}
.sandi-lihat{position:absolute;top:50%;right:4px;transform:translateY(-50%);border:0;background:transparent;
  color:var(--muted);cursor:pointer;font-size:11px;padding:4px 6px;border-radius:2px;line-height:1}
.sandi-lihat:hover{color:var(--ink);background:var(--surface-2)}
.sandi-lihat[aria-pressed="true"]{color:var(--ink)}
.mempty{font-size:13px;color:var(--muted);padding:8px 0}
.tautan-undangan{display:flex;gap:7px;align-items:center;margin-top:8px;padding:9px 11px;background:var(--surface-2);border-left:3px solid var(--accent);font-size:12.5px;word-break:break-all}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:12px;font-size:13.5px;line-height:1.45;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;width:max-content;max-width:min(88vw,480px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--rule);color:var(--muted);font-size:12.5px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ── Cangkang aplikasi: header + sidebar ──────────────── */
.shell{min-height:100vh;display:flex;flex-direction:column}
.app-header{
  position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:14px;
  padding:0 18px;height:58px;background:var(--surface);border-bottom:1px solid var(--rule-strong);
}
@media (min-width:1700px){ .app-header{padding:0 26px} }
.hamburger{display:none;flex:none;border:1px solid var(--rule-strong);background:var(--surface);border-radius:var(--r);width:34px;height:32px;cursor:pointer;font-size:15px;line-height:1;color:var(--ink-2)}
.merek{display:flex;align-items:baseline;gap:10px;min-width:0}
.merek-nama{font-family:Newsreader,Georgia,serif;font-size:19px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.merek-pisah{color:var(--rule-strong)}
.usaha-nama{font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-kanan{margin-left:auto;display:flex;align-items:center;gap:10px}
.header-kanan .periode-kotak{display:flex;align-items:center;gap:7px}
.header-kanan select{width:auto;min-width:140px;padding:6px 9px;font-size:13.5px}
.btn-aksen{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500;padding:7px 13px;font-size:13.5px;white-space:nowrap}
.btn-aksen:hover{background:var(--accent);filter:brightness(1.08)}
.pengguna{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--rule);min-width:0}
.pengguna .nm{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.peran{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}

.badan{flex:1;display:grid;grid-template-columns:222px minmax(0,1fr);align-items:start}
@media (min-width:1700px){
  .badan{grid-template-columns:260px minmax(0,1fr)}
  .sidebar{padding:20px 16px}
}
.sidebar{
  position:sticky;top:58px;height:calc(100vh - 58px);height:calc(100dvh - 58px);background:var(--surface);
  border-right:1px solid var(--rule-strong);padding:16px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;
}
.nav-judul{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:10px 10px 6px}
.nav-item{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;
  border:0;background:transparent;border-radius:var(--r);padding:9px 10px;cursor:pointer;
  font-size:14px;color:var(--ink-2);text-align:left;transition:background .12s,color .12s;
}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:500;box-shadow:inset 2px 0 0 var(--accent)}
.nav-item .lencana{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.nav-item[aria-current="page"] .lencana{color:var(--accent)}
.tirai{display:none;position:fixed;inset:58px 0 0;background:rgba(17,24,21,.4);z-index:9}

.isi{padding:26px 32px 64px;width:100%;max-width:1280px;margin-inline:auto;min-width:0}
.judul-halaman{margin-bottom:20px}
.judul-halaman h1{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:clamp(24px,3vw,32px);line-height:1.05;letter-spacing:-.015em}
.judul-halaman p{color:var(--muted);font-size:13.5px;margin-top:5px;max-width:60ch}
/* Judul ringkas (dasbor): satu baris, tanpa eyebrow dan keterangan */
.judul-ringkas{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.judul-ringkas h1{font-size:clamp(22px,2.4vw,26px)}
.judul-ringkas .eyebrow,.judul-ringkas p{display:none}
.halaman[hidden]{display:none}

@media (max-width:1024px){
  .badan{grid-template-columns:minmax(0,1fr)}
  .hamburger{display:block}
  .sidebar{
    position:fixed;top:58px;left:0;width:236px;z-index:10;transform:translateX(-100%);
    transition:transform .18s ease;box-shadow:var(--shadow);
  }
  .sidebar.buka{transform:translateX(0)}
  .tirai.buka{display:block}
  .isi{padding:20px 16px 56px}
  .pengguna .nm{display:none}
}
@media (max-width:560px){
  .btn-aksen{padding:7px 10px}
  .usaha-nama{display:none}
}

/* ── Formulir pencatatan ──────────────────────────────── */
.bantuan{font-size:11.5px;color:var(--muted);line-height:1.45}
.bantuan strong{color:var(--masuk);font-weight:500}

/* ── Laporan laba rugi ────────────────────────────────── */
.lr-kepala{margin-bottom:16px;align-items:flex-end}
.lr-kepala p{margin-top:4px}


.lr-banding{margin-bottom:6px}
.lr-banding-alat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lr-banding-alat select{width:auto;padding:6px 9px;font-size:13.5px}
.lr-banding-alat .eyebrow + select{margin-right:6px}
.lr-banding-ket{font-size:12.5px;color:var(--muted);margin-left:auto}
/* Pemilih "sampai periode" pada Laba Rugi: kisi bulan / kuartal / tahun. */
.lr-sampai{position:relative}
.pop-sampai{position:absolute;top:calc(100% + 6px);left:0;z-index:15;width:300px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r);box-shadow:0 18px 40px -20px rgba(0,0,0,.45);padding:12px 14px 10px}
.lr-basis-kotak{display:contents}
.pop-sampai-tab{display:flex;gap:4px;margin:-4px -4px 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.pop-sampai-tab button{flex:1;border:0;background:transparent;padding:7px 4px;border-radius:999px;cursor:pointer;font-size:13.5px;color:var(--muted)}
.pop-sampai-tab button:hover{color:var(--ink);background:var(--surface-2)}
.pop-sampai-tab button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.pop-sampai-rentang{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;padding:4px 0 8px}
.pop-sampai-rentang .err{grid-column:1 / -1;min-height:0}
.pop-sampai-kepala{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pop-sampai-judul{font-weight:600;font-size:15px}
.pop-sampai-nav{border:0;background:transparent;cursor:pointer;font-size:20px;line-height:1;padding:2px 10px;color:var(--ink-2);border-radius:2px}
.pop-sampai-nav:hover{background:var(--surface-2);color:var(--ink)}
.pop-sampai-kisi{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pop-sampai-kisi.dua{grid-template-columns:repeat(2,1fr)}
.pop-sampai-kisi button{border:0;background:transparent;cursor:pointer;padding:11px 6px;border-radius:var(--r);font-size:15px;color:var(--ink);line-height:1.2}
.pop-sampai-kisi button small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.pop-sampai-kisi button:hover{background:var(--surface-2)}
.pop-sampai-kisi button.pilih{background:var(--accent);color:var(--on-accent)}
.pop-sampai-kisi button.pilih small{color:var(--on-accent);opacity:.8}
.pop-sampai-kisi button.depan{color:var(--muted)}
.pop-sampai-kaki{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.pop-sampai-sela{flex:1}
.pop-sampai-teks{border:0;background:transparent;cursor:pointer;padding:6px 10px;font-size:14px;color:var(--ink-2);border-radius:var(--r)}
.pop-sampai-teks:hover{background:var(--surface-2);color:var(--ink)}

/* Laporan tunggal satu kolom: pernyataan di atas, tabel enam bulan di bawahnya. */
.lr-grid{display:block}
.lr-badan{max-width:780px;margin:0 auto}
.lr-lembar-tunggal .lr-laporan{border:0;padding:0 0 4px;background:transparent}
.lr-lembar-tunggal .lr-total{margin-left:0;margin-right:0;padding-left:16px;padding-right:16px}
.lr-samping{min-width:0}
.lr-periode-kotak{display:contents}
.lr-lembar-ringkas .lr-ring{margin-top:0}

.lr-laporan{background:var(--surface);border:1px solid var(--rule-strong);padding:2px 18px 8px}
.lr-r{display:grid;grid-template-columns:minmax(0,1fr) auto 58px;gap:14px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--rule)}
.lr-judul{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:13px 0 3px;border-bottom:0;display:block}
.lr-judul:first-child{padding-top:10px}
.lr-n{font-size:14px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-sub .lr-n{padding-left:14px;color:var(--ink-2);font-size:13.5px}
.lr-v{font-size:14px;text-align:right;white-space:nowrap}
.lr-sub .lr-v{color:var(--ink-2)}
.lr-p{font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap}
.lr-subtotal{border-top:1px solid var(--rule-strong);border-bottom:0;margin-top:-1px;padding-top:8px}
.lr-subtotal .lr-n,.lr-subtotal .lr-v{font-weight:600}
/* Laporan tunggal mengikuti tipografi lembar perbandingan: judul bagian tebal kapital,
   baris jumlah tebal bergaris atas, laba kotor bergaris atas-bawah, laba bersih aksen bergaris ganda. */
.lr-lembar-tunggal .lr-laporan .lr-r{padding:8px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
/* Angka yang bisa diklik untuk melihat transaksi penyusunnya */
.lr-klik{border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:0 2px;border-radius:2px;text-decoration:underline dotted var(--rule-strong);text-underline-offset:4px}
.lr-klik:hover{color:var(--accent);background:var(--accent-soft);text-decoration-color:var(--accent)}
#dlgRincian tfoot td{font-weight:700;border-top:1.5px solid var(--ink)}
#rcRingkas{margin:14px 0 4px}
.lr-lembar-tunggal .lr-laporan .lr-judul{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);padding:18px 0 4px}
.lr-lembar-tunggal .lr-laporan .lr-judul:first-child{padding-top:4px}
.lr-lembar-tunggal .lr-laporan .lr-sub .lr-n{padding-left:22px;color:var(--ink-2);font-size:13.5px}
.lr-lembar-tunggal .lr-laporan .lr-subtotal{border:0;margin-top:0;padding-top:4px;padding-bottom:10px}
.lr-lembar-tunggal .lr-laporan .lr-subtotal .lr-n,.lr-lembar-tunggal .lr-laporan .lr-subtotal .lr-v{font-weight:700;color:var(--ink)}
.lr-lembar-tunggal .lr-laporan .lr-subtotal .lr-v,.lr-lembar-tunggal .lr-laporan .lr-subtotal .lr-p{padding-top:2px}
.lr-lembar-tunggal .lr-laporan .lr-laba{margin-top:4px;padding:12px 0}
.lr-lembar-tunggal .lr-laporan .lr-laba .lr-n,.lr-lembar-tunggal .lr-laporan .lr-laba .lr-v{text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.lr-lembar-tunggal .lr-laporan .lr-laba{border-bottom:1px solid var(--rule)}
.lr-lembar-tunggal .lr-laporan .lr-total{margin:4px 0 0;padding:12px 0;background:transparent;border:0}
.lr-lembar-tunggal .lr-laporan .lr-total .lr-n{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--accent)}
.lr-lembar-tunggal .lr-laporan .lr-total .lr-v{font-size:15px;font-weight:700;color:var(--accent);padding:2px 0}
.lr-lembar-tunggal .lr-laporan .lr-total .lr-p{color:var(--accent);font-weight:600;font-size:11.5px;padding-top:2px}
.lr-lembar-tunggal .lr-laporan .lr-total.rugi .lr-n,.lr-lembar-tunggal .lr-laporan .lr-total.rugi .lr-v,.lr-lembar-tunggal .lr-laporan .lr-total.rugi .lr-p{color:var(--keluar)}
.lr-subtotal .lr-p{color:var(--ink-2)}
.lr-kosong .lr-n,.lr-kosong .lr-v{color:var(--muted);font-style:italic}
.lr-total{margin:10px -18px 0;padding:12px 18px;background:var(--accent-soft);border:0}
.lr-total .lr-n{font-weight:600;color:var(--accent);font-size:15px}
.lr-total .lr-v{font-size:22px;font-weight:600;color:var(--accent)}
.lr-total .lr-p{color:var(--accent);font-weight:500;font-size:12.5px}
.lr-total.rugi{background:var(--keluar-soft)}
.lr-total.rugi .lr-n,.lr-total.rugi .lr-v,.lr-total.rugi .lr-p{color:var(--keluar)}
.lr-catatan{font-size:11.5px;color:var(--muted);padding:10px 0 4px;line-height:1.5}

/* Sakelar tampilan (segmen): pil bergabung berlatar lembut, berbeda dari tombol aksi yang gelap. */
.seg{display:inline-flex;gap:0;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r);overflow:hidden;align-self:flex-start}
.seg .btn{border:0;border-left:1px solid var(--rule-strong);border-radius:0;background:transparent;padding:10px 16px;font-size:14px;color:var(--muted);box-shadow:none;flex:none}
.seg .btn:first-child{border-left:0}
.seg .btn:hover{background:var(--surface-2);color:var(--ink)}
.seg .btn[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent);pointer-events:none}
.md-aksi{display:inline-flex;gap:10px;padding-left:12px;border-left:1px solid var(--rule-strong)}
.md-aksi:empty,.md-aksi[hidden]{display:none}
.lr-mode{margin-left:8px;white-space:nowrap}
.lr-mode[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lr-ring-chips{gap:4px}
.lr-ring-chips .chip{padding:4px 10px;font-size:12px}
.lr-ring{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:14px}
@media (max-width:640px){.lr-ring{grid-template-columns:1fr 1fr}}
.lr-ring-item{background:var(--surface);padding:10px 13px 11px;min-width:0}
.lr-ring-item .label{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lr-ring-item .val{font-size:17px;font-weight:600;margin-top:3px;line-height:1.15;overflow-wrap:normal;word-break:keep-all}
.lr-ring-item .val.rugi{color:var(--keluar)}
.lr-ring-item .val.laba{color:var(--masuk)}
.lr-ring-item .note{font-size:11px;color:var(--muted);margin-top:2px}
.lr-ring-ket{font-size:13px;color:var(--ink-2);line-height:1.6;margin:12px 0 18px;max-width:72ch}
.lr-tabel-sub{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--rule-strong);margin-bottom:2px}
.lr-tabel-kepala{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--rule-strong);margin-bottom:2px}
.lr-tabel-ket{font-size:11.5px;color:var(--muted)}
.lr-tabel-gulir{overflow-x:auto}
table.lr-tabel{min-width:0;width:100%}
.lr-tabel thead th{font-size:9.5px;padding:8px 4px 6px;position:static;background:transparent;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
.lr-tabel thead th:first-child{text-align:left;padding-left:6px}
.lr-tabel td{padding:7px 4px;font-size:12px;border-bottom:1px solid var(--rule);white-space:nowrap;text-align:right}
.lr-tabel td:first-child{color:var(--ink-2);text-align:left;padding-left:6px;font-size:12.5px}
.lr-tabel td.kosong{color:var(--rule-strong)}
.lr-tabel tr.lr-tabel-total td{font-weight:600;border-top:1px solid var(--rule-strong)}
.lr-tabel tr:last-child td{border-bottom:0}
.lr-tabel td.r{text-align:right}
.lr-tabel td.kosong{color:var(--muted)}
td.rugi,.lr-v.rugi{color:var(--keluar)}
.lr-banding-ket{margin-left:auto}
.lr-jumlah-kotak{display:contents}

.lr-lembar{background:var(--surface);border:1px solid var(--rule-strong);padding:26px 30px 30px}
.lr-lembar-kepala{text-align:center;margin-bottom:22px}
.lr-lembar-usaha{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.lr-lembar-judul{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:28px;line-height:1.1;color:var(--accent);margin-top:4px}
.lr-lembar-sub{font-size:13.5px;color:var(--ink-2);margin-top:6px}
.lr-lembar-meta{font-size:11.5px;color:var(--muted);font-style:italic;text-align:right;margin-top:10px}
.lr-banding-gulir{overflow-x:auto;margin:0 -16px}
table.lr-banding-tabel{min-width:0;width:100%;border-collapse:separate;border-spacing:16px 0}
.lr-banding-tabel th,.lr-banding-tabel td{padding:6px 2px;white-space:nowrap;border:0;vertical-align:baseline}
.lr-banding-tabel thead th{position:static;background:transparent;font-family:"IBM Plex Sans",sans-serif;font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent);text-align:right;border-bottom:2px solid var(--accent);padding-bottom:5px}
.lr-banding-tabel thead th:first-child{text-align:left}
.lr-banding-tabel td{text-align:right;font-size:13.5px}
.lr-banding-tabel td:first-child{text-align:left;min-width:220px}
.lr-banding-tabel tr.judul td{font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);padding-top:18px;padding-bottom:4px;text-align:left}
.lr-banding-tabel tr.sub td:first-child{padding-left:22px;color:var(--ink-2)}
.lr-banding-tabel tr.jumlah td{font-weight:700;padding-bottom:10px}
.lr-banding-tabel tr.jumlah td.num{border-top:1.5px solid var(--ink)}
.lr-banding-tabel tr.laba td{font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding-top:12px;padding-bottom:12px}
.lr-banding-tabel tr.laba td.num{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.lr-banding-tabel tr.laba.akhir td{color:var(--accent)}
.lr-banding-tabel tr.laba.akhir td.num{border-bottom:3px double var(--ink)}
.lr-banding-tabel td.rugi,.lr-banding-tabel tr.laba.akhir td.rugi{color:var(--keluar)}
.lr-banding-tabel td.nol{color:var(--muted)}
.lr-banding-tabel th.total-kol,.lr-banding-tabel td.total-kol{padding-left:10px}
@media print{
  .app-header,.sidebar,.lr-kepala .saring-tgl,.lr-banding-alat,.lr-mode{display:none!important}
  .lr-lembar{border:0;padding:0}
}


/* ── Judul halaman dengan tombol aksi ─────────────────── */
.judul-aksi{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.judul-aksi > div{min-width:0}
.btn-besar{padding:10px 16px;font-size:14px;flex:none}

/* ── Popup catat transaksi ────────────────────────────── */
.modal{
  border:1px solid var(--rule-strong);border-radius:var(--r);padding:0;
  background:var(--surface);color:var(--ink);width:min(430px, calc(100vw - 32px));
  box-shadow:0 24px 60px -24px rgba(0,0,0,.5);
}
.modal::backdrop{background:rgba(17,24,21,.45)}
.modal-kepala{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid var(--rule)}
.modal-kepala h2{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:20px}
.tutup{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:2px 7px;border-radius:2px}
.tutup:hover{color:var(--ink);background:var(--surface-2)}
.modal-isi{padding:18px;max-height:calc(100vh - 92px);overflow:auto}
.modal-isi .hint{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.modal[open]{animation:munculModal .16s ease}
@keyframes munculModal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.modal[open]{animation:none}}

/* ── Layar masuk: judul & masuk cepat ─────────────────── */
.judul-gerbang{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.masuk-cepat{margin-top:22px;padding-top:16px;border-top:1px dashed var(--rule-strong)}
.mc-judul{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.mc-catatan{font-size:11.5px;color:var(--muted)}
.mc-daftar{display:flex;flex-direction:column;gap:6px;max-height:196px;overflow-y:auto}
.mc-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--rule);background:var(--surface-2);border-radius:var(--r);padding:8px 11px;
  transition:border-color .12s,background .12s;
}
.mc-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.mc-item .mc-nama{font-size:13.5px;font-weight:500;white-space:nowrap}
.mc-item .mc-email{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.mc-item .peran{flex:none}
.mc-item .mc-usaha{font-size:11.5px;color:var(--muted);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.mc-kaki{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5}
.mc-kaki code{font-family:"IBM Plex Mono",monospace;font-size:11px;background:var(--surface-2);padding:1px 4px;border-radius:2px}

/* ── Dropdown catat transaksi ─────────────────────────── */
.dropdown{position:relative}
.menu-turun{
  position:absolute;top:calc(100% + 6px);right:0;z-index:15;min-width:186px;padding:4px;
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.45);display:flex;flex-direction:column;
}
.menu-turun button{
  display:flex;align-items:center;gap:10px;border:0;background:transparent;cursor:pointer;
  text-align:left;padding:9px 11px;border-radius:2px;font-size:14px;color:var(--ink-2);
}
.menu-turun button:hover{background:var(--surface-2);color:var(--ink)}
.menu-turun button::before{content:"";width:9px;height:9px;border-radius:2px;flex:none;background:var(--muted)}
.menu-turun button[data-catat="penjualan"]::before{background:var(--masuk)}
.menu-turun button[data-catat="pembelian"]::before{background:var(--keluar)}
.menu-turun button[data-catat="biaya"]::before{background:transparent;box-shadow:inset 0 0 0 2px var(--keluar)}
.menu-turun button[data-catat="laba_diambil"]::before{background:var(--accent)}

/* ── Pembagian satu transaksi ke beberapa akun kas ─────── */
.kas-daftar{display:flex;flex-direction:column;gap:6px}
.kas-row{display:flex;gap:6px;align-items:stretch}
.kas-row select{flex:1 1 auto;min-width:0}
.kas-row .rupiah{flex:0 0 220px}  /* muat angka sampai miliaran tanpa terpotong */
@media (max-width:520px){.kas-row{flex-wrap:wrap} .kas-row .rupiah{flex:1 1 100%}}
.kas-row .rupiah input{font-size:14px}
.kas-row .buang{
  flex:0 0 auto;border:1px solid var(--rule);background:var(--surface);border-radius:var(--r);
  width:32px;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;
}
.kas-row .buang:hover{color:var(--keluar);border-color:var(--keluar);background:var(--keluar-soft)}
.kas-kaki{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
.kas-kaki .bantuan{flex:1 1 auto;text-align:right}
.kas-kaki .bantuan.kurang{color:var(--keluar)}
.kas-kaki .bantuan.pas{color:var(--masuk)}

/* ── Pemilih tampilan ─────────────────────────────────── */
.tombol-tema{padding:6px 10px;line-height:1;font-size:14px;min-width:34px}
.menu-turun button[data-tema]::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:transparent;box-shadow:inset 0 0 0 1.5px var(--rule-strong);
}
.menu-turun button[data-tema][aria-checked="true"]::before{background:var(--accent);box-shadow:none}
.menu-turun button[data-tema][aria-checked="true"]{color:var(--ink);font-weight:500}

/* ── Saringan tanggal pada toolbar tabel ──────────────── */
.saring-tgl{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
.saring-tgl .eyebrow{font-size:9.5px;letter-spacing:.14em;white-space:nowrap}
.saring-tgl input[type=date]{width:auto;min-width:132px;padding:6px 8px;font-size:13px}
.saring-tgl .sampai{color:var(--muted);font-size:13px}
.saring-tgl .buang{
  border:1px solid var(--rule);background:var(--surface);border-radius:var(--r);
  width:26px;height:28px;cursor:pointer;color:var(--muted);font-size:12px;line-height:1;flex:none;
}
.saring-tgl .buang:hover{color:var(--keluar);border-color:var(--keluar);background:var(--keluar-soft)}

/* ── Paginasi bernomor ────────────────────────────────── */
.pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 2px 0}
.pager .info{font-size:12.5px;color:var(--muted);margin-right:auto}
/* Pager tahun yang duduk di toolbar, bukan di bawah tabel: tanpa baris
   keterangan, dan ikut hilang bersama toolbarnya kalau cuma ada satu tahun. */
.pager-ringkas{padding:0}
.toolbar:has(> .pager-ringkas:empty){display:none}
.pager .nomor{display:flex;gap:4px;flex-wrap:wrap}
.pager button{
  border:1px solid var(--rule-strong);background:var(--surface);border-radius:var(--r);
  min-width:32px;height:32px;padding:0 8px;cursor:pointer;font-size:13px;color:var(--ink-2);
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
}
.pager button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pager button[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .lompat{color:var(--muted);padding:0 2px;align-self:center;font-size:13px}
.pager .per select{width:auto;padding:5px 8px;font-size:12.5px}
.pager .per{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
@media (max-width:560px){ .pager .info{width:100%;margin-bottom:4px} }

/* ── Pilihan cara pembayaran ──────────────────────────── */
.pilih-bayar{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong);border-radius:var(--r);overflow:hidden}
.pilih-bayar button{border:0;background:var(--surface);padding:9px 6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:background .15s,color .15s}
.pilih-bayar button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.pilih-bayar button[data-bayar-pilih="nanti"][aria-pressed="true"]{background:var(--keluar)}

/* ── Hutang & piutang ─────────────────────────────────── */
.tempo{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.tempo .sisa-hari{font-size:11px;color:var(--muted)}
tr.telat .tempo .num{color:var(--keluar);font-weight:500}
tr.telat .tempo .sisa-hari{color:var(--keluar)}
.pihak{display:flex;flex-direction:column;gap:3px;min-width:0}
.pihak .nm{font-weight:500}
.pihak .ket{font-size:12.5px;color:var(--muted)}
.btn-lunasi{border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:var(--r);padding:5px 11px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.btn-lunasi:hover{background:var(--accent);color:var(--on-accent)}
.lencana-telat{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--keluar);background:var(--keluar-soft);border-radius:2px;padding:1px 6px}

/* ── Daftar kas & buku satu akun ──────────────────────── */
.tautan-kas{
  border:0;background:transparent;padding:0;cursor:pointer;font:inherit;font-weight:500;
  color:var(--accent);text-align:left;text-decoration:underline;text-decoration-color:var(--rule-strong);
  text-underline-offset:3px;
}
.tautan-kas:hover{text-decoration-color:var(--accent)}
.tautan-balik{
  border:0;background:transparent;padding:0 0 4px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.tautan-balik:hover{color:var(--accent)}
.aksi-kanan{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.aksi-kanan.seg{gap:0;flex-wrap:nowrap}
tfoot td{padding:11px 10px;border-top:2px solid var(--rule-strong);font-size:14px}

/* ── Suplier ──────────────────────────────────────────── */
.baris-ganda{display:flex;gap:7px;align-items:stretch}
.baris-ganda select,.baris-ganda .suplier-combo{flex:1 1 auto;min-width:0}
.baris-ganda .btn{flex:none;white-space:nowrap}
.suplier-combo{position:relative;display:flex;align-items:stretch}
.suplier-combo input{width:100%;padding-right:38px}
.combo-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:34px;border:0;border-left:1px solid var(--rule);background:var(--surface-2);color:var(--ink);cursor:pointer;font-size:15px;line-height:1}
.combo-toggle:hover{background:var(--surface)}
.combo-menu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:190px;overflow:auto;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);box-shadow:0 12px 24px rgba(17,24,21,.14)}
.combo-opsi{display:block;width:100%;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;padding:9px 11px;cursor:pointer}
.combo-opsi:hover,.combo-opsi:focus{background:var(--surface-2);outline:none}
.combo-opsi.terpilih{font-weight:600;color:var(--accent)}
.combo-kosong{padding:9px 11px;color:var(--muted);font-size:12.5px}
.file-pilih{display:flex;align-items:center;gap:8px;min-width:0}
.file-pilih input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-tombol{display:inline-flex;align-items:center;justify-content:center;flex:none}
.file-nama{font-size:12px;color:var(--muted);overflow-wrap:anywhere;min-width:0}
.total-form{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--rule);background:var(--surface-2);padding:10px 12px;margin:-2px 0 13px}
.total-form span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.total-form strong{font-size:15px;font-weight:600;color:var(--accent);white-space:nowrap}
.pilih-aktif{display:flex;align-items:center;gap:8px;font-family:inherit;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink-2);cursor:pointer}
.pilih-aktif input{width:auto}
.suplier-nama{display:flex;flex-direction:column;gap:2px;min-width:0}
.suplier-nama .nm{font-weight:500}
/* Padding tombol digeser balik supaya nama sejajar dengan alamat di bawahnya. */
.suplier-nama .lr-klik{margin-left:-2px}
.suplier-nama .sp-ket{font-size:12.5px;color:var(--muted)}
.suplier-nama .alamat{font-size:12.5px;color:var(--muted)}
.suplier-nama .catatan{font-size:12px;color:var(--muted);font-style:italic}
.suplier-nama .pisah{margin:0 7px;color:var(--rule-strong)}
tr.nonaktif td{opacity:.55}

/* ── Tombol ubah pada baris tabel ─────────────────────── */
.aksi-baris{display:flex;gap:2px;justify-content:flex-end;white-space:nowrap}
.ubah{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:2px}
.detail{border:0;background:transparent;color:var(--accent);cursor:pointer;font-size:12.5px;padding:1px 4px;border-radius:2px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-strong)}
.detail:hover{background:var(--accent-soft);text-decoration-color:var(--accent)}
.meta .detail{font-size:11.5px}
.ubah:hover{color:var(--accent);background:var(--accent-soft)}
.modal[data-mode="ubah"] .modal-kepala h2::after{content:" · Ubah";color:var(--muted);font-weight:400;font-size:.8em}

/* ── Halaman Kas: kartu akun sebagai saringan ─────────── */
.kartu-kas{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:6px}
.kartu{
  text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:11px 13px;display:flex;flex-direction:column;gap:3px;min-width:0;transition:border-color .12s,background .12s;
}
.kartu:hover{border-color:var(--rule-strong);background:var(--surface-2)}
.kartu[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.kartu .kartu-nama{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);min-width:0}
.kartu .kartu-nama span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kartu .kartu-saldo{font-size:18px;font-weight:600;letter-spacing:-.01em}
.kartu[aria-pressed="true"] .kartu-saldo{color:var(--accent)}
.kartu .kartu-catatan{font-size:11.5px;color:var(--muted)}
tr.pindah td.num.redup{color:var(--muted);font-weight:400}


/* ── Pemilih rentang tanggal ──────────────────────────── */
.tgl-tombol{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:var(--r);padding:7px 10px;font-size:13.5px;cursor:pointer;white-space:nowrap;color:var(--ink);
}
.tgl-tombol:hover{border-color:var(--muted)}
.tgl-tombol.aktif{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tgl-panah{font-size:11px;color:var(--muted)}
/* Popover saringan tanggal: panel pemilih periode, isinya memakai gaya
   .pop-sampai-* yang sama dengan pemilih periode Laporan Laba Rugi. */
.pop-tgl{
  position:absolute;z-index:30;width:300px;max-width:calc(100vw - 16px);
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.45);padding:12px 14px 10px;
}
.pop-tgl-cepat{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pop-tgl-cepat button{
  flex:1 1 auto;border:1px solid var(--rule-strong);background:var(--surface);border-radius:var(--r);
  padding:8px 7px;cursor:pointer;font-size:12.5px;color:var(--ink-2);white-space:nowrap;
}
.pop-tgl-cepat button[data-cepat="semua"]{flex:0 0 auto;margin-left:auto}
.pop-tgl-cepat button:hover{background:var(--surface-2);color:var(--ink)}
.pop-tgl-cepat button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:500}
/* Kalender hari untuk tab Rentang: klik pertama tanggal mulai, klik kedua tanggal akhir. */
.pop-tgl-kal{display:flex;flex-direction:column;gap:4px}
.kal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.kal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0}
.kal-hari{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);padding:2px 0 5px}
.kal-tgl{
  border:0;background:transparent;height:36px;font-size:14px;cursor:pointer;border-radius:0;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.kal-tgl:hover{background:var(--surface-2)}
.kal-tgl.kini{box-shadow:inset 0 0 0 1px var(--rule-strong);border-radius:3px}
.kal-tgl.rentang{background:var(--accent-soft);color:var(--accent)}
.kal-tgl.awal{border-radius:6px 0 0 6px}
.kal-tgl.akhir{border-radius:0 6px 6px 0}
.kal-tgl.awal.akhir{border-radius:6px}
.kal-tgl.awal,.kal-tgl.akhir{background:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:none}
.kal-petunjuk{text-align:center;font-size:12.5px;color:var(--muted);margin-top:4px;padding-top:8px;border-top:1px solid var(--rule)}

/* ── Kartu kas saat akunnya banyak ────────────────────── */
.kartu-kas.padat{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.kartu-kas.padat .kartu{padding:7px 10px;gap:1px;height:56px;justify-content:center}
.kartu-kas.padat .kartu-nama{font-size:12.5px}
.kartu-kas.padat .kartu-saldo{font-size:14px}
.kartu-kas.padat .kartu-catatan{display:none}
.kartu-kas.dilipat{max-height:118px;overflow:hidden}   /* tepat dua baris kartu padat (2 × 56px + celah 6px) */
.kartu-toggle{margin-top:6px;font-size:11px}

/* ── Kelompok menu yang bisa dilipat ──────────────────── */
.nav-kelompok{
  display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:10px 10px 6px;margin-top:4px;border-radius:var(--r);
}
.nav-kelompok:hover{color:var(--ink)}
.nav-panah{font-size:11px;transition:transform .15s}
.nav-kelompok[aria-expanded="true"] .nav-panah{transform:rotate(180deg)}
.nav-isi{display:flex;flex-direction:column;gap:3px}

/* ── Ikon menu ────────────────────────────────────────── */
.nav-ikon{width:17px;height:17px;flex:none;color:var(--muted);display:inline-flex}
.nav-ikon svg{width:100%;height:100%}
.nav-item:hover .nav-ikon{color:var(--ink)}
.nav-item[aria-current="page"] .nav-ikon{color:var(--accent)}

/* ── Dasbor ───────────────────────────────────────────── */
.ubin-baris{display:grid;width:100%;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-top:0}
.ubin{background:var(--surface);padding:10px 14px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ubin .label{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ubin .val{font-size:15.5px;font-weight:500;line-height:1.2;overflow-wrap:normal;word-break:keep-all}
.ubin .note{font-size:11.5px;color:var(--muted)}
.dua-kolom{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.dua-kolom .section{display:flex;flex-direction:column}
.dua-kolom .panel-info{flex:1;display:flex;flex-direction:column}
.dua-kolom .baris-info.tanpa-garis{margin-top:auto}
.ds-kas .baris-info{padding:8px 0;flex:1 0 auto}  /* baris kas melebar merata mengisi tinggi kartu */
.dua-kolom .kat{padding-top:4px}
@media (max-width:960px){.dua-kolom{grid-template-columns:1fr}}
.dua-kolom .section{margin-bottom:0}
.panel-info{background:var(--surface);border:1px solid var(--rule-strong);padding:4px 18px}
.baris-info{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
.baris-info.tanpa-garis{border-bottom:0}
.baris-info > span:first-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.bi-nama{font-size:14px;color:var(--ink-2)}
.bi-sub{font-size:11.5px;color:var(--muted)}
.bi-nilai{font-size:15px;white-space:nowrap}
.bi-tebal{font-weight:600;color:var(--accent);font-size:17px}
/* Laba rugi ringkas di dasbor: kartu seperti panel di sebelahnya, baris pakai kisi laporan */
.ds-lr{padding:6px 18px 4px}
.panel-grafik{padding:16px 18px}
.panel-grafik .lr-kaki{font-size:12px;color:var(--muted);line-height:1.5;padding:12px 0 0}
.ds-lr .lr-r{padding:10px 0}
.ds-lr .lr-total{margin:10px -18px 0;padding:12px 18px}
.ds-lr .lr-kaki{font-size:12px;color:var(--muted);line-height:1.5;padding:12px 0 8px;margin-top:auto}
.section-head .tautan-balik{padding:0;font-size:10.5px}

/* ── Status lunas / belum lunas ───────────────────────── */
.status-kolom{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.status-kolom .pencatat{cursor:help}
.status{display:inline-block;align-self:flex-start;white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:2px}
.status.lunas{color:var(--masuk);background:var(--masuk-soft)}
.status.belum{color:var(--accent);background:var(--accent-soft)}
.status.telat{color:var(--keluar);background:var(--keluar-soft)}
/* Nota batal: dibiarkan terbaca tetapi jelas tidak berlaku lagi. */
.status.batal{color:var(--muted);background:var(--surface-2);text-decoration:line-through;text-decoration-thickness:1px}
tr.nota-batal td{color:var(--muted)}
tr.nota-batal td .ket > span:first-child,tr.nota-batal td.num.k{text-decoration:line-through;text-decoration-color:var(--rule-strong)}
tr.belum-lunas td{background:color-mix(in srgb, var(--accent-soft) 35%, transparent)}
.bayar{border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;font-size:12.5px;font-weight:500;padding:3px 9px;border-radius:2px}
.bayar:hover{filter:brightness(1.08)}

.k-cat.invoice{text-transform:none;letter-spacing:.02em;color:var(--accent);background:var(--accent-soft);border-color:transparent}
.inv-stack{display:flex;flex-direction:column;gap:2px;min-width:0}
.inv-stack > span:first-child{overflow-wrap:anywhere}
/* Nomor transaksi: chip mono yang bisa diklik untuk membuka detail & riwayat */
.nomor-trx{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;padding:2px 7px;border:1px solid var(--rule-strong);border-radius:2px;background:var(--surface);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.nomor-trx:hover{border-color:var(--accent);color:var(--accent)}
.nomor-trx.besar{font-size:15px;padding:4px 10px;cursor:default;font-weight:600}
.nomor-trx.besar:hover{border-color:var(--rule-strong);color:var(--ink-2)}
.trx-kepala{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.trx-rincian{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0}
.trx-rincian > div{background:var(--surface);padding:9px 12px;min-width:0}
.trx-rincian dt{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.trx-rincian dd{margin:3px 0 0;font-size:14px;overflow-wrap:anywhere}
.trx-log{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.trx-log > li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.trx-log ul li{display:list-item;padding:2px 0;border:0;font-size:13px}
.trx-log .kapan{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);line-height:1.5}
.trx-log .aksi{font-weight:600}
.trx-log .aksi.dibuat{color:var(--masuk)} .trx-log .aksi.diubah{color:var(--accent)} .trx-log .aksi.dihapus{color:var(--keluar)}
.trx-log ul{margin:4px 0 0;padding-left:16px;color:var(--ink-2);font-size:13px}
.trx-log .dari{color:var(--muted);text-decoration:line-through}
.trx-aksi{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
.trx-aksi .pencatat{align-self:center;margin-right:auto}
/* Halaman log perubahan */
.lg-alat{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 12px}
.lg-alat input[type=search]{flex:1 1 220px;min-width:180px}
.lg-alat select{width:auto;flex:0 0 auto}
.lg-alat .saring-tgl{display:flex;align-items:center;gap:6px}
.lg-alat .saring-tgl input{width:auto}
.lg-aksi{font-weight:600}
.lg-aksi.dibuat{color:var(--masuk)} .lg-aksi.diubah{color:var(--accent)} .lg-aksi.dihapus{color:var(--keluar)}
.lg-ubah{margin:0;padding-left:16px;font-size:12.5px;color:var(--ink-2)}
.lg-ubah .dari{color:var(--muted);text-decoration:line-through}
.nomor-trx.hilang{opacity:.6;text-decoration:line-through;cursor:default}

@media (min-width:800px){.ringkasan.tiga{grid-template-columns:1.5fr 1fr 1fr}}
@media (min-width:800px){.ringkasan.enam{grid-template-columns:repeat(3,1fr)}}

/* ── Kaki formulir: Hapus (mode ubah) + tombol utama ──── */
.kaki-form{display:flex;gap:8px;align-items:stretch}
.kaki-form .btn-primary{flex:1;width:auto}
.btn-hapus{border-color:var(--keluar-soft);color:var(--keluar);background:var(--surface);padding:11px 14px;white-space:nowrap}
.btn-hapus:hover{background:var(--keluar-soft);border-color:var(--keluar)}
.btn-hapus[data-armed="1"]{background:var(--keluar);color:var(--on-accent);border-color:var(--keluar);font-weight:500}

td.inv{font-size:12.5px;color:var(--ink-2);white-space:nowrap;vertical-align:top}
td.inv .kosong{color:var(--rule-strong)}

/* Modal: skema pembagian laba & tabel bulanan */
.md-skema{display:flex;gap:24px;align-items:stretch;margin-top:26px;padding:18px 22px;border:1px solid var(--rule);border-radius:6px;background:var(--surface)}
.md-skema-isi{flex:1;min-width:0}
.md-skema-isi h3{margin:4px 0 6px;font-size:18px}
.md-skema-isi p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.md-skema-proyeksi{flex:0 0 260px;border-left:1px solid var(--rule);padding-left:22px}
.md-skema-proyeksi .val{font-size:20px;font-weight:600;margin:4px 0 2px}
.md-skema-proyeksi .note{color:var(--muted);font-size:12.5px;line-height:1.45}
.md-skema.akuisisi{border-color:var(--accent)}
.md-radio{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:13.5px;line-height:1.45;cursor:pointer}
.md-radio input{margin-top:3px}
.md-form-skema{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.md-form-skema .err{font-size:12.5px;color:var(--keluar)}
.md-bulanan th.kelompok{text-align:center;border-bottom:none;padding-bottom:2px}
.md-bulanan th.sub{font-weight:500;color:var(--muted);padding-top:2px}
/* Keterangan kecil di kepala kolom: menegaskan bahwa satu baris mencampur laba
   bulan itu dengan tutup buku bulan sebelumnya yang dibayarkan di bulan itu. */
.md-bulanan th .th-ket{display:block;margin-top:3px;font-size:9px;letter-spacing:.02em;text-transform:none;font-weight:400;opacity:.72}
.md-bulanan td.pisah,.md-bulanan th.pisah{border-left:1px solid var(--rule)}
.md-bulanan tr.berjalan td{color:var(--muted);font-style:italic}
.md-bulanan tr.total td{font-weight:600;border-top:2px solid var(--rule-strong)}
.md-bulanan td,.md-bulanan th{padding-left:9px;padding-right:9px;white-space:nowrap}
#mdRiwayat td{white-space:nowrap}
.tb-beli{margin:6px 0 14px;padding:10px 14px;border:1px dashed var(--rule-strong);border-radius:4px}
.tb-beli #tbBeliMedan{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule)}
@media (max-width:760px){.md-skema{flex-direction:column}.md-skema-proyeksi{border-left:none;border-top:1px solid var(--rule);padding:14px 0 0;flex-basis:auto}}

.tautan-kecil{margin-top:10px;padding:0;border:0;background:none;color:var(--accent);font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tautan-kecil:hover{color:var(--ink)}
.nav-item[hidden]{display:none}
/* Angka HPP / laba kotor / margin disembunyikan dari staff toko. */
body.peran-staff .rahasia{display:none!important}
/* Ubin yang tersisa untuk staff mengisi satu baris penuh, tanpa kotak kosong. */
@media (min-width:800px){body.peran-staff [data-halaman="penjualan"] .ringkasan{grid-template-columns:1.5fr 1fr 1fr}body.peran-staff [data-halaman="biaya"] .ringkasan{grid-template-columns:1.5fr 1fr}}
.acts{white-space:nowrap}
.acts .icon-btn{white-space:nowrap}
.acts select.a-peran{width:auto;padding:5px 8px;font-size:12.5px;flex:none}

/* Lebar popup: ditaruh setelah aturan .modal supaya menang */
.modal.modal-lebar{width:min(560px, calc(100vw - 32px))}
.modal.modal-tabel{width:min(980px, calc(100vw - 32px))}
.modal.modal-tabel .modal-isi{max-height:calc(100vh - 140px);overflow:auto}

/* ── Responsif: HP, tablet, dan jendela sempit ─────────── */
/* Header: nama aplikasi boleh menyusut, tombol di kanan tidak boleh menimpa. */
.merek{flex:1 1 auto;overflow:hidden}
.merek-nama{overflow:hidden;text-overflow:ellipsis;min-width:0}
.header-kanan{flex:0 0 auto}

/* Perangkat sentuh (laci menu aktif): sasaran sentuh dan ukuran isian. */
@media (max-width:1024px){
  .icon-btn{padding:8px 10px;font-size:13px;min-height:36px}
  .bayar{padding:7px 12px;min-height:36px;font-size:13px}
  .buang{min-width:32px;min-height:32px}
  /* 16 px mencegah Safari iPhone memperbesar layar saat isian diketuk. */
  select,input[type=text],input[type=date],input[type=search],input[type=email],input[type=password],input[type=number],
  .saring-tgl input[type=date],.pop-tgl input[type=date]{font-size:16px}
  .header-kanan select{font-size:15px}
}

/* Tabel di layar sempit: kolom sekunder disembunyikan supaya yang penting muat
   tanpa geser; yang tersisa tetap bisa digeser bila perlu. */
@media (max-width:640px){
  table{min-width:0}
  thead th{padding:0 6px 8px;width:auto!important;min-width:0}   /* lebar tetap dari markup dilepas: kolom menyesuaikan isi */
  tbody td{padding-left:6px;padding-right:6px}
  table:has(#jlDaftar) :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(8)){display:none}   /* HPP, laba kotor, margin, catatan */
  table:has(#blDaftar) :is(th,td):is(:nth-child(2),:nth-child(4)){display:none}                              /* invoice, dibayar dari */
  table:has(#byDaftar) :is(th,td):is(:nth-child(3),:nth-child(5)){display:none}                              /* dibayar dari, dicatat oleh */
  table:has(#tfDaftar) :is(th,td):nth-child(6){display:none}                                                 /* dicatat oleh */
  table:has(#asDaftar) :is(th,td):is(:nth-child(2),:nth-child(4),:nth-child(5),:nth-child(7)){display:none}  /* perolehan, per bulan, akumulasi, penyusutan terakhir */
  table:has(#hpDaftarHutang) :is(th,td):is(:nth-child(2),:nth-child(5)),
  table:has(#hpDaftarPiutang) :is(th,td):is(:nth-child(2),:nth-child(5)){display:none}                      /* jatuh tempo, dibayar/diterima */
  table:has(#hpPelunasanHutang) :is(th,td):is(:nth-child(3),:nth-child(5)),
  table:has(#hpPelunasanPiutang) :is(th,td):is(:nth-child(3),:nth-child(5)){display:none}                   /* akun, dicatat oleh */
  table:has(#ldDaftar) :is(th,td):nth-child(5){display:none}                                                 /* dicatat oleh */
  /* Arus Kas: di HP hanya chip jenis dan lencana hutang/piutang yang tampil;
     HPP, kategori, akun, invoice, dan pencatat dibuka lewat Detail. */
  table:has(#tbody) .ket .meta .pencatat,
  table:has(#tbody) .ket .meta .k-cat:not(:first-child){display:none}
}
@media (max-width:480px){
  table:has(#tbody) :is(th,td):nth-child(5){display:none}                                                    /* saldo berjalan di arus kas */
}

/* HP */
@media (max-width:560px){
  .app-header{gap:8px;padding:0 12px}
  .merek-nama{font-size:17px}
  .merek-pisah{display:none}
  .header-kanan{gap:6px}
  .pengguna .peran{display:none}
  .isi{padding:16px 12px 48px}

  .fig{padding:14px 12px}

  /* Huruf kecil dinaikkan supaya terbaca di HP. */
  .eyebrow,.fig .label,.lr-judul,thead th,.saring-tgl .eyebrow{font-size:11px}
  .bantuan{font-size:12.5px}
  .lr-p{font-size:12px}

  /* Laporan laba rugi: label boleh melipat, bukan terpotong. */
  .lr-n{white-space:normal;overflow:visible;text-overflow:clip}
  .lr-r{grid-template-columns:minmax(0,1fr) auto 44px;gap:8px}
  .lr-laporan{padding:2px 12px 8px}

  /* Tab jenis laporan / pilihan tampilan: lebar penuh, dibagi rata. */
  .aksi-kanan.seg,.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;align-self:stretch}
  .seg .btn{padding:9px 6px;font-size:12.5px;white-space:normal;line-height:1.2;text-align:center}
}

/* ── Dasbor: empat kartu seragam berkepala (2×2) ── */
.ds-grid{display:grid;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:30px;align-items:stretch}
@media (max-width:960px){.ds-grid{grid-template-columns:1fr}}
.kartu-ds{background:var(--surface);border:1px solid var(--rule-strong);display:flex;flex-direction:column;min-width:0}
.kartu-ds-kepala{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 18px 11px;background:var(--paper);border-bottom:1px solid var(--rule-strong)}
.kartu-ds-kepala h2{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:19px;letter-spacing:-.01em;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kartu-ds-kepala .tautan-balik{padding:0;font-size:10.5px;white-space:nowrap}
.kartu-ds-isi{padding:4px 18px 6px;flex:1;display:flex;flex-direction:column}
/* Baris kategori menyebar mengisi tinggi kartu bila jumlahnya banyak; bila
   sedikit, biarkan menempel ke atas supaya tidak melayang di tengah. */
.kartu-ds-isi .kat{flex:1;justify-content:space-evenly;padding:6px 0;gap:8px}
.kartu-ds-isi .kat.sedikit{justify-content:flex-start;gap:14px;padding-top:12px}
.baris-ds{display:grid;grid-template-columns:minmax(0,1fr) auto 48px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule)}
.baris-ds:last-child{border-bottom:0}
.baris-ds .nm{font-size:14px;color:var(--ink-2);min-width:0;display:flex;flex-direction:column;gap:1px}
.baris-ds .nm .sub{font-size:11.5px;color:var(--muted)}
.baris-ds .v{font-size:14px;text-align:right;white-space:nowrap}
.baris-ds .p{font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap}
.kartu-ds-kaki{margin-top:auto;padding:11px 18px 12px;background:var(--accent-soft);border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) auto 48px;gap:12px;align-items:center}
.kartu-ds-kaki .nm{font-weight:600;color:var(--accent);font-size:14px;display:flex;flex-direction:column;gap:1px;min-width:0}
.kartu-ds-kaki .nm .sub{font-weight:400;font-size:11.5px;color:var(--accent);opacity:.8}
.kartu-ds-kaki .v{font-size:20px;font-weight:600;color:var(--accent);text-align:right;white-space:nowrap}
.kartu-ds-kaki .p{font-size:12px;font-weight:500;color:var(--accent);text-align:right;white-space:nowrap}
.kartu-ds-kaki.rugi{background:var(--keluar-soft)}
.kartu-ds-kaki.rugi .nm,.kartu-ds-kaki.rugi .nm .sub,.kartu-ds-kaki.rugi .v,.kartu-ds-kaki.rugi .p{color:var(--keluar)}
.kartu-ds-kaki.netral{background:var(--paper)}
.kartu-ds-kaki.netral .nm,.kartu-ds-kaki.netral .p{color:var(--ink-2);font-weight:500}
.kartu-ds-kaki.netral .nm .sub{color:var(--muted);opacity:1}
.kartu-ds-kaki.netral .v{color:var(--ink);font-size:15px}
.kartu-ds-kaki[hidden]{display:none}
.kartu-ds-kaki .up{color:var(--masuk)} .kartu-ds-kaki .dn{color:var(--keluar)}
.kartu-ds-kaki .nm .sub .up,.kartu-ds-kaki .nm .sub .dn{opacity:1;font-weight:600}
.ds-tabel{width:100%;min-width:0;border-collapse:collapse;margin:2px 0 4px}  /* timpa min-width tabel global; kolom angka selebar isinya */
.ds-tabel th:not(:first-child),.ds-tabel td:not(:first-child){width:1%}
.kartu-ds-isi{min-width:0;overflow-x:auto}
@media (max-width:640px){.ds-tabel td{font-size:12px} .ds-tabel td.nm{font-size:13px}}
.ds-tabel th{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:10px 0 6px;border-bottom:1px solid var(--rule-strong);position:static;background:transparent}
.ds-tabel th.r,.ds-tabel td.r{text-align:right}
.ds-tabel td{padding:10px 0 10px 10px;border-bottom:1px solid var(--rule);font-size:13px;white-space:nowrap}
.ds-tabel td:first-child{padding-left:0}
.ds-tabel tr:last-child td{border-bottom:0}
.ds-tabel td.nm{font-size:14px;color:var(--ink-2);white-space:normal}
.ds-tabel td.nm .jenis{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:1px}
.ds-tabel td.up{color:var(--masuk)} .ds-tabel td.dn{color:var(--keluar)}
.ds-tabel td .up{color:var(--masuk)} .ds-tabel td .dn{color:var(--keluar)}
.ds-tabel td.saldo{font-weight:600;color:var(--ink)}
.ds-tabel td.kosong{color:var(--muted);font-size:14px;padding:12px 0}
@media (max-width:600px){.kartu-ds-kaki .v{font-size:17px} .kartu-ds-kepala h2{font-size:17px}}

/* ── Audit responsif: sasaran ketuk, tab, dan tabel di layar sentuh/sempit ── */
@media (max-width:1024px){
  /* Tautan kecil di tabel jadi setinggi ≥36 px agar mudah diketuk. */
  .detail,.ubah,.del,.nomor-trx{min-height:36px;padding:8px 10px;display:inline-flex;align-items:center}
  .aksi-baris{gap:6px}
  .pager .nomor button{min-width:36px;min-height:36px}
  .kartu-ds-kepala .tautan-balik{min-height:32px;display:inline-flex;align-items:center}
}
@media (max-width:640px){
  /* Kolom teks utama diberi lebar minimum supaya tidak melipat 5–6 baris. */
  table:has(#tbody) .ket,.pihak,.suplier-nama{min-width:170px}
  /* Baris yang punya Detail bisa diketuk di mana saja (lihat app.js). */
  tbody tr.bisa-ketuk{cursor:pointer}
  tbody tr.bisa-ketuk:active{background:var(--surface-2)}
}
@media (max-width:560px){
  /* Tab jenis laporan: kolom boleh menyusut di bawah lebar kata agar tab ketiga tidak terpotong. */
  .aksi-kanan.seg,.seg{grid-auto-columns:minmax(0,1fr)}
  .seg .btn{min-width:0;overflow-wrap:anywhere}
}

/* ═══════════ Audit responsif putaran 2: HP 320–480, tablet, popup ═══════════
   Semua aturan di sini sengaja ditaruh di akhir berkas agar menang urutan cascade. */
.laci-kepala,.status-hp,.rute-hp,.tempo-hp,.jumlah-hp,.harga-hp{display:none}
body.laci-buka{overflow:hidden}
#addAnggota #undangPeran{flex:0 0 150px}

@media (max-width:1024px){
  .table-scroll.bisa-geser::before{content:"Geser ke samping untuk kolom lainnya ›";display:block;position:sticky;left:0;padding:0 0 6px;font-size:11.5px;color:var(--muted)}
  .table-scroll.bisa-geser{background:linear-gradient(to left,rgba(0,0,0,.07),transparent 18px) right/18px 100% no-repeat;background-attachment:local}
  .tutup{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:-7px -10px -7px 0}
  .hamburger{width:40px;height:38px}
  .tombol-tema{min-width:40px;min-height:38px}
  .pager .per select{min-height:36px;padding:6px 8px}
  .tautan-kecil{min-height:36px;display:inline-flex;align-items:center;padding:6px 0}
  #listAnggota .acts .icon-btn{border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface)}
  #listAnggota .acts .icon-btn.danger{color:var(--keluar)}
  /* Identitas usaha/akun dan tombol Keluar tersedia di kepala laci menu. */
  .laci-kepala{display:block;padding:4px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--rule)}
  .laci-usaha{font-family:Newsreader,Georgia,serif;font-size:17px;font-weight:600;line-height:1.2}
  .laci-akun{font-size:12.5px;color:var(--muted);margin:3px 0 10px;overflow-wrap:anywhere}
}
@media (max-width:799px){ .ringkasan.tiga .fig.saldo{grid-column:1 / -1} }

/* Popover tanggal: "Rentang khusus" melipat rapi, tombol navigasi bulan cukup besar. */
@media (max-width:720px){
  .pop-tgl{overflow:hidden;max-width:calc(100vw - 16px)}
  .pop-tgl .pop-sampai-tab button{min-height:36px}
}

/* Tabel di HP: kolom Detail disembunyikan (baris sudah bisa diketuk), kolom sekunder
   lain menyusul, kolom teks utama diberi lebar minimum, info penting yang hilang
   dipindahkan ke dalam sel teks (.status-hp/.rute-hp/.tempo-hp). */
@media (max-width:640px){
  table:has(#tbody) :is(th,td):nth-child(6),
  table:has(#jlDaftar) :is(th,td):nth-child(6),
  table:has(#blDaftar) :is(th,td):is(:nth-child(6),:nth-child(7)),
  table:has(#byDaftar) :is(th,td):nth-child(6),
  table:has(#tfDaftar) :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(7)),
  table:has(#hpDaftarHutang) :is(th,td):is(:nth-child(4),:nth-child(7)),
  table:has(#hpDaftarPiutang) :is(th,td):is(:nth-child(4),:nth-child(7)),
  table:has(#hpPelunasanHutang) :is(th,td):nth-child(6),
  table:has(#hpPelunasanPiutang) :is(th,td):nth-child(6),
  table:has(#asDaftar) :is(th,td):nth-child(3),
  table:has(#listSuplier) :is(th,td):is(:nth-child(2),:nth-child(5)),
  table:has(#lgDaftar) :is(th,td):is(:nth-child(3),:nth-child(5)),
  table:has(#tbDaftar) :is(th,td):is(:nth-child(4),:nth-child(6),:nth-child(7)),
  table:has(#mdDaftar) :is(th,td):is(:nth-child(2),:nth-child(4),:nth-child(5),:nth-child(6)),
  table:has(#mdRiwayat) :is(th,td):is(:nth-child(4),:nth-child(5)){display:none}
  thead th[style*="min-width"]{min-width:0!important}
  table:has(#tbody) .ket,.pihak,.suplier-nama,#asDaftar .ket,#byDaftar .ket,#jlDaftar .ket,#lgDaftar td:last-child{min-width:170px}
  #mdRiwayat td{white-space:normal}
  .status-hp{display:inline-flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-top:2px}
  .rute-hp{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .tempo-hp{display:block;font-size:12px;color:var(--muted)}
  tr.telat .tempo-hp{color:var(--keluar);font-weight:500}
  /* Anggota: baris jadi tiga lapis (nama / meta / aksi), form melipat. */
  #listAnggota .mrow{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"nama" "meta" "acts";row-gap:6px;padding:10px 0}
  #listAnggota .mrow .mname{grid-area:nama;white-space:normal}
  #listAnggota .mrow .mmeta{grid-area:meta;white-space:normal;overflow-wrap:anywhere}
  #listAnggota .mrow .acts{grid-area:acts;flex-wrap:wrap;gap:6px}
  #listAnggota .acts .a-peran{flex:1 1 140px;width:auto;min-width:0}
  #listAnggota .medit .row,#addAnggota .row{flex-wrap:wrap}
  #listAnggota .medit .row > .mname{flex:1 0 100%!important;white-space:normal}
  #listAnggota .medit .row .a-sandi-baru{flex:1 1 150px;min-width:0}
  #addAnggota .row > *{flex:1 1 100%!important}
  #addAnggota #undangPeran,#addAnggota button[type=submit]{flex:1 1 45%!important;min-height:43px}
  table.lr-banding-tabel{border-spacing:8px 0}
  .lr-banding-tabel th,.lr-banding-tabel td{font-size:12.5px}
  .lr-banding-tabel td:first-child{min-width:130px;white-space:normal}
  .lr-banding-tabel :is(th,td):first-child{position:sticky;left:0;background:var(--surface);z-index:1}
}

@media (max-width:560px){
  /* Popup Detail: tombol bertumpuk lebar penuh, aksi utama paling atas. */
  .trx-aksi{flex-direction:column;align-items:stretch;gap:8px}
  .trx-aksi .btn{width:100%;min-width:0;white-space:normal;text-align:center;min-height:44px;padding:10px 12px}
  .trx-aksi .btn-aksen{order:-1}
  .trx-aksi .pencatat{margin-right:0;text-align:center}
  /* Popup umum: lebih lebar, kepala lengket, rincian 2 kolom, kaki form lengket. */
  .modal,.modal.modal-lebar{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .modal-kepala{position:sticky;top:0;background:var(--surface);z-index:1}
  .modal-isi{padding:14px}
  .modal-isi .hint{font-size:12px;margin-bottom:10px}
  .field{margin-bottom:10px}
  .trx-rincian{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trx-rincian > div{padding:8px 10px}
  .trx-rincian dd{font-size:13.5px}
  .trx-rincian > div.lebar{grid-column:1 / -1}
  .kaki-form{position:sticky;bottom:0;background:var(--surface);margin:0 -14px -14px;padding:10px 14px 14px;border-top:1px solid var(--rule)}
  .fig{padding:14px 10px}
  .fig .note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lr-ring-item{padding:10px 10px 11px}
  .lr-ring-item .val{font-size:clamp(13.5px,4vw,16px);white-space:nowrap}
  /* Toolbar & pager melipat rapi dua kolom. */
  .toolbar .saring-tgl,.toolbar .akun-filter{flex:1 1 calc(50% - 5px);min-width:0}
  .toolbar .akun-filter select{width:100%}
  .tgl-tombol{flex:1 1 auto;justify-content:space-between;padding:9px 10px;min-height:41px}
  .pager .nomor{gap:2px}
  .pager .per{margin-left:auto}
  /* Judul halaman + tombol sejajar tengah; garis yatim .md-aksi hilang. */
  .judul-aksi.judul-ringkas{align-items:center;gap:12px}
  .judul-ringkas .btn-besar{padding:8px 12px;font-size:13.5px}
  .md-aksi{border-left:0;padding-left:0}
  .madd .row{flex-wrap:wrap}
  .madd .row > *{flex:1 1 100%}
  /* Menu + Catat di judul halaman dianchor ke tepi kanan area isi, bukan ke
     tombolnya, supaya lebarnya tetap cukup dan tidak keluar layar. */
  .judul-aksi .aksi-kanan{position:relative}
  .judul-aksi .aksi-kanan .dropdown{position:static}
  .judul-aksi .aksi-kanan .menu-turun{left:auto;right:0;min-width:min(260px,calc(100vw - 24px))}
  .kartu-kas{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kartu-kas .kartu[data-kas="semua"]{grid-column:1 / -1}
  .kartu .kartu-saldo{font-size:16px}
  /* Kartu dasbor: batang kategori di baris sendiri, tabel akun kas padat, kaki tidak melipat. */
  .kat-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm amt" "bar bar";gap:3px 10px;align-items:baseline}
  .kat-row .nm{grid-area:nm} .kat-row .amt{grid-area:amt} .kat-row .kat-track{grid-area:bar;height:6px}
  .kartu-ds-kepala,.kartu-ds-isi,.kartu-ds-kaki{padding-left:12px;padding-right:12px}
  .ds-tabel td{padding-left:6px;font-size:12px}
  .ds-tabel td.nm{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
  .ds-tabel td.nm .jenis{display:inline;margin-left:4px}
  .baris-ds,.kartu-ds-kaki{grid-template-columns:minmax(0,1fr) auto auto;gap:6px 10px}
  .baris-ds .p:empty,.kartu-ds-kaki .p:empty{display:none}
  .kartu-ds-kaki .v{font-size:16px}
  .baris-ds .nm .sub,.kartu-ds-kaki .nm .sub{font-size:11px;line-height:1.4}
  .kartu-ds-kepala{flex-wrap:wrap;align-items:baseline;gap:2px 12px}
  .kartu-ds-kepala h2{white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 auto;min-width:60%}
  .tip{white-space:normal;max-width:calc(100vw - 40px);font-size:12.5px}
  /* Laba Rugi: lembar berpadding tipis, popup periode & chip rentang muat. */
  .lr-lembar{padding:18px 14px 22px}
  .lr-banding-gulir{margin:0 -14px}
  .lr-banding-alat{position:relative}
  .lr-sampai{position:static}
  .pop-sampai{left:0;right:auto;width:min(300px,calc(100vw - 24px))}
  .lr-basis-kotak,.lr-jumlah-kotak,.lr-periode-kotak{display:inline-flex;align-items:center;gap:8px}
  .lr-banding-ket{flex-basis:100%;margin-left:0;font-size:12px}
  .lr-tabel-kepala{flex-wrap:wrap;row-gap:8px}
  .lr-ring-chips{flex-wrap:wrap;gap:6px}
  .lr-ring-chips .chip{white-space:nowrap;flex:none}
  .lr-r{grid-template-columns:minmax(0,1fr) auto minmax(28px,auto);gap:8px}
  .lr-tabel thead th{font-size:10.5px;white-space:normal;padding:8px 3px 6px}
  .lr-tabel td{padding:7px 3px}
  .lr-lembar-judul{font-size:clamp(22px,6.5vw,28px)}
  .lr-lembar-sub{font-size:12.5px}
  .aksi-kanan.seg,.seg{align-items:stretch}
  .seg .btn{display:flex;align-items:center;justify-content:center;min-height:44px}
  /* Hutang & Piutang: eyebrow yang mengulang ubin disembunyikan, judul bagian lebih kecil. */
  #hpHutangLunas,#hpPiutangLunas{display:none}
  .section-head h2{font-size:19px;line-height:1.2}
  /* Log perubahan: saringan melipat rapi. */
  .lg-alat input[type=search],.lg-alat .saring-tgl{flex:1 1 100%}
  .lg-alat select{flex:1 1 120px;min-width:0}
  .lg-alat .saring-tgl input{flex:1 1 0;min-width:0;width:auto}
  /* Huruf kecil dinaikkan agar terbaca di HP. */
  .k-cat,.field > label,.trx-rincian dt,.ds-tabel th,.ubin .label,.lr-ring-item .label,.lr-tabel thead th,.kartu-toggle{font-size:11px}
  .ds-tabel th{letter-spacing:.08em}
  .k-cat{letter-spacing:.04em;padding:2px 6px}
  .tag,.lencana-telat,.status{font-size:10.5px}
  .pencatat,.mrow .mmeta,.lr-catatan,.ds-tabel td.nm .jenis,.status-kolom .pencatat{font-size:12px}
  .kartu-ds-kepala .tautan-balik,.section-head .tautan-balik{font-size:11.5px}
}
@media (max-width:480px){
  /* Arus Kas di HP kecil: Masuk/Keluar dilebur ke sel keterangan (.jumlah-hp), Saldo sudah tersembunyi. */
  table:has(#tbody) :is(th,td):is(:nth-child(3),:nth-child(4)){display:none}
  #tbody .jumlah-hp{display:block;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px;margin-top:2px}
  #jlDaftar .ket,#byDaftar .ket,#blDaftar .ket{min-width:130px}
  .ds-tabel :is(th,td):nth-child(4){display:none}
  .merek-nama{font-size:15px}
  .pengguna{padding-left:8px}
  #btnKeluar{display:none}          /* Keluar tersedia di kepala laci menu */
  .merek #pilihUsaha{display:none}
}

/* Kontras teks chip/status di atas latar lembut (AA untuk huruf kecil). */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --masuk-teks:#5FC7AE; --keluar-teks:#E39463; } }
:root[data-theme="dark"]{ --masuk-teks:#5FC7AE; --keluar-teks:#E39463; }
.k-cat.m,.status.lunas{color:var(--masuk-teks)}
.k-cat.k,.status.telat,.lencana-telat{color:var(--keluar-teks)}

/* ═══════════ Audit responsif putaran 3 (hasil verifikasi) ═══════════ */
.pop-sampai-nav{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}
#byTerbesar{font-size:19px}
@media (max-width:1024px){
  table:has(#listSuplier) .suplier-nama{min-width:170px}
  table:has(#listSuplier) td.num{white-space:nowrap}
  /* Kolom nama tinggal sekitar 190 px di sini sehingga nama panjang membungkus
     dua baris. Tanggal pembelian terakhir paling bisa dilepas: tetap terlihat
     di popup transaksi suplier. */
  table:has(#listSuplier) :is(th,td):nth-child(5){display:none}
}
@media (max-width:640px){
  table:has(#tfDaftar) td:nth-child(2),#hpPelunasanHutang .ket,#hpPelunasanPiutang .ket,
  table:has(#mdRiwayat) td:nth-child(2),#tbDaftar td:nth-child(5),#ldDaftar td:nth-child(2),
  #dlgRincian tbody td:not(.num):not(.tgl):not(:last-child){min-width:170px}
  table:has(#listSuplier) :is(th,td):first-child{position:sticky;left:0;background:var(--paper);z-index:1}
  .lr-banding-tabel td[colspan]{position:static}
  .lr-klik{padding:7px 4px;margin:-7px -4px;min-height:36px}
  /* Sasaran sentuh memakai padding 4px, jadi geser baliknya ikut 4px. */
  .suplier-nama .lr-klik{margin-left:-4px}
  .harga-hp{display:block;flex:1 1 100%;font-size:12px}
  table:has(#mdDaftar) td:first-child .meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
  table:has(#mdDaftar) td:first-child{min-width:130px;max-width:170px}
  table:has(#mdRiwayat) td.r,table:has(#mdRiwayat) td.num{white-space:nowrap}
}
@media (max-width:560px){
  .modal,.modal.modal-lebar{max-width:calc(100vw - 16px)}   /* menimpa max-width bawaan <dialog> */
  .tip{width:max-content}
  .fig.saldo .note{-webkit-line-clamp:3}
  .fig .val:not(.num){white-space:normal;overflow-wrap:anywhere}
  #byTerbesar{font-size:clamp(15px,4.6vw,19px)}
  #mdList .medit .row{flex-wrap:wrap}
  #mdList .medit .row > *{flex:1 1 100%}
  #mdList .medit .row > .btn{flex:1 1 45%}
}
@media (max-width:480px){
  .pihak,table:has(#tfDaftar) td:nth-child(2),#hpPelunasanHutang .ket,#hpPelunasanPiutang .ket,
  table:has(#mdRiwayat) td:nth-child(2),#tbDaftar td:nth-child(5),#ldDaftar td:nth-child(2),
  #dlgRincian tbody td:not(.num):not(.tgl):not(:last-child){min-width:130px}
}
@media (max-width:400px){
  .toolbar .saring-tgl,.toolbar .akun-filter{flex:1 1 100%}
  .saring-tgl .eyebrow{display:none}
  .tgl-tombol{min-width:0}
}
@media (max-width:360px){
  table:has(#byDaftar) :is(th,td):nth-child(4),table:has(#blDaftar) :is(th,td):nth-child(5){display:none}
  #byDaftar .jumlah-hp,#blDaftar .jumlah-hp{display:block;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;margin-top:2px}
  .ds-tabel td{padding-left:4px;font-size:11.5px}
  .ds-tabel td.nm{max-width:80px;font-size:12px}
  .judul-ringkas .seg .btn{padding:8px 4px;font-size:12.5px}
}
@media (max-height:520px){
  .modal-kepala{position:sticky;top:0;background:var(--surface);z-index:1}
  .kaki-form{position:sticky;bottom:0;background:var(--surface);margin:0 -18px -18px;padding:10px 18px 14px;border-top:1px solid var(--rule)}
}

/* ── Popup detail aset ────────────────────────────────── */
.modal-lebar{width:min(640px, calc(100vw - 32px))}
/* Rincian pengambilan memuat dua tabel berkolom pemilik, jadi perlu lebih lega
   daripada modal lebar biasa. */
#dlgAmbil.modal-lebar{width:min(780px, calc(100vw - 32px))}
.dt-judul{display:flex;flex-direction:column;gap:6px;min-width:0}
.dt-lencana{display:flex;flex-wrap:wrap;gap:5px}
.dt-kisi{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:560px){.dt-kisi{grid-template-columns:repeat(3,1fr)}}
.dt-sel{background:var(--surface);padding:10px 12px;min-width:0}
.dt-sel .label{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dt-sel .nilai{font-size:15px;font-weight:500;margin-top:2px;overflow-wrap:anywhere}
.dt-sel.utama{background:var(--accent-soft)}
.dt-sel.utama .nilai{color:var(--accent);font-size:19px;font-weight:600}
.dt-catatan{margin-top:10px;font-size:13px;color:var(--ink-2);padding:9px 11px;background:var(--surface-2);border-left:3px solid var(--rule-strong)}
.dt-aksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dt-aksi .btn.danger{color:var(--keluar);border-color:var(--keluar-soft)}
.dt-aksi .btn.danger:hover{background:var(--keluar-soft)}
.dt-gulir{max-height:300px;overflow-y:auto;border:1px solid var(--rule)}
.dt-tabel{min-width:0}
.dt-tabel thead th{background:var(--surface);top:0}
.dt-tabel td{padding:8px 10px;font-size:13px}
.dt-tabel tr.mendatang td{color:var(--muted)}
.dt-tabel tr.berhenti td{color:var(--muted);text-decoration:line-through;opacity:.7}
.dt-tabel tr.berjalan td{background:var(--accent-soft);font-weight:500}
.dt-tabel tr.berjalan td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* ═══════════ Angka ubin: satu baris, ukurannya mengikuti lebar ubin ═══════════
   Lebar ubin bergantung jumlah kolom dan ada-tidaknya sidebar, bukan lebar layar,
   jadi ukurannya dihitung dari ubin itu sendiri (cqi) — bukan vw. Angka mono ±0,59em
   per karakter; 17 karakter ("−Rp 1.234.567.890") muat pas pada 9,4cqi.
   Deklarasi px di depan menjadi cadangan untuk peramban tanpa container query. */
.fig,.ubin,.lr-ring-item{container-type:inline-size}
.fig .val{font-size:22px;font-size:clamp(12px,9.4cqi,22px);white-space:nowrap}
.fig.saldo .val{font-size:clamp(26px,3.4vw,34px);font-size:clamp(12px,9.4cqi,34px)}
.ubin .val{font-size:15.5px;font-size:clamp(12px,9.4cqi,15.5px);white-space:nowrap}
.lr-ring-item .val{font-size:17px;font-size:clamp(12px,9.4cqi,17px);white-space:nowrap}
/* Nilai berupa teks (mis. nama kategori terbesar) tetap boleh melipat. */
.fig .val:not(.num),.ubin .val:not(.num),.lr-ring-item .val:not(.num){white-space:normal;overflow-wrap:anywhere}

/* Rincian penyusutan yang dibukukan di popup Tutup Buku. */
.tb-susut{border:1px solid var(--rule);background:var(--surface);margin:0 0 13px;padding:0 14px}
.tb-susut > summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 0;font-size:13.5px;color:var(--ink-2)}
.tb-susut > summary .num{color:var(--keluar)}
.tb-susut[open] > summary{border-bottom:1px solid var(--rule)}
.tb-susut .lr-r{padding:7px 0}
.tb-susut .bantuan{padding:2px 0 12px}