/* ==========================================================================
   Dana Cadangan (js/dana-cadangan.js). Kartu saldo memakai .kas-saldo-card
   dari css/arus-kas-bulanan.css; tabel & dialog dari css/karyawan-dokumen.css.
   ========================================================================== */

#dc-root { display: flex; flex-direction: column; gap: 14px; }

.dc-total { display: flex; flex-direction: column; gap: 4px; }
.dc-total-angka { font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }

.dc-pos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .dc-pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dc-pos-grid { grid-template-columns: 1fr; } }

.dc-pos {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-md); background: #fff; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; min-width: 0;
  transition: background .12s, border-color .12s;
}
.dc-pos:hover { background: #FAFAFB; }
.dc-pos.aktif { background: color-mix(in srgb, var(--accent) 8%, #fff); border-color: var(--accent); }
.dc-pos-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.dc-pos-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; }
.dc-pos-bank { flex: 0 0 auto; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); white-space: nowrap; }
.dc-pos-bank.kosong { color: var(--muted); background: #F1F5F9; font-weight: 600; }
.dc-pos-saldo { font-size: 1.2rem; font-weight: 800; }


.dc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 160px; padding: 11px 14px; border-radius: var(--radius-md);
  font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border); background: #fff; color: var(--ink);
}
.dc-btn svg { width: 15px; height: 15px; }
.dc-btn:disabled { opacity: .5; cursor: not-allowed; }
.dc-btn--setor { background: #ECFDF3; border-color: #A7E3C0; color: #15803D; }
.dc-btn--pakai { background: #FFF5F5; border-color: #F3B8BC; color: var(--red); }
.dc-btn--tarik { background: #F5F7FF; border-color: #C7D2FE; color: #4F46E5; }

.dc-trx-daftar { display: flex; flex-direction: column; gap: 8px; }
.dc-trx {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff;
}
.dc-jenis { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 4px 9px; border-radius: 99px; }
.dc-jenis--masuk { background: #E7F7EE; color: #15803D; }
.dc-jenis--pakai { background: #FDEBEC; color: var(--red); }
.dc-jenis--tarik { background: #EEF2FF; color: #4F46E5; }
.dc-trx-isi { display: flex; flex-direction: column; min-width: 0; }
.dc-trx-isi strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-trx-isi small { font-size: .74rem; color: var(--muted); }
.dc-trx-nominal { font-size: .95rem; font-weight: 800; white-space: nowrap; }
.dc-trx-nominal--masuk { color: #15803D; }
.dc-trx-nominal--pakai { color: var(--red); }
.dc-trx-nominal--tarik { color: #4F46E5; }
.dc-trx-lampiran { display: flex; gap: 4px; }
.dc-lampiran { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-soft); }
.dc-lampiran:hover { border-color: var(--red); color: var(--red); }
.dc-lampiran svg { width: 15px; height: 15px; }
.dc-trx-aksi { display: flex; gap: 4px; align-items: center; }
.dc-trx-aksi .kd-btn { text-decoration: none; padding: 5px 10px; font-size: .74rem; }
.dc-ikon-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--ink-soft); cursor: pointer; }
.dc-ikon-btn svg { width: 14px; height: 14px; }
.dc-ikon-btn:hover { border-color: #1E3A8A; color: #1E3A8A; }
.dc-ikon-btn--hapus:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 640px) {
  .dc-trx { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dc-trx-lampiran { grid-column: 2; }
  .dc-trx-aksi { grid-column: 3; justify-self: end; }
}

.dc-hapus-filter { border: 0; background: none; color: var(--red); font: inherit; font-weight: 700; cursor: pointer; padding: 0 0 0 4px; }
.dc-dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dc-lampiran-pilih { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dc-lampiran-pilih .kd-btn { display: inline-flex; align-items: center; gap: 5px; }
.dc-lampiran-pilih .kd-btn svg { width: 14px; height: 14px; }
.dc-lampiran-nama { font-size: .76rem; color: var(--muted); }
/* Tanggal di form ini wajib - sembunyikan tombol × kosongkan dari js/pwa.js. */
.dc-modal .tgl-hapus { display: none !important; }

/* Pengaturan kantong: bank & saldo awal per pos */
.dc-atur-baris { border-left: 4px solid var(--accent); padding: 2px 0 2px 12px; margin-bottom: 12px; }
.dc-atur-nama { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin-bottom: 4px; }