/* ==========================================================================
   Arus Kas Bulanan — sama persis bentuknya dengan css/laporan-kas.css
   (lihat berkas itu untuk komentar penjelasan tiap bagian), taksonominya
   saja yang beda: 3 dana (BCA/BSI/Bank Jago, bukan Tunai/Saldo) dan 3
   aktivitas (Operasional/Investasi/Pendanaan, bukan 4 kategori).
   ========================================================================== */

/* ---- Saldo hero card (BCA / BSI / Bank Jago) ------------------------------ */
.kas-saldo-card {
  background: linear-gradient(135deg, var(--surface-dark), #2B335C);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.kas-saldo-label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* 4 kartu sekarang (BCA/BSI/Bank Jago + Alipay Akhir Bulan) - 1 baris utuh
   di layar lebar. */
.kas-saldo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* Di HP jadi 2x2 (bukan ditumpuk 1 per baris) - satu kartu per baris
   kepanjangan/boros ruang untuk chip sesederhana ini. */
@media (max-width: 560px) {
  .kas-saldo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Angkanya sendiri dulu dipotong-elipsis di layar sempit (chip terlalu
   sempit untuk angka minus 9 digit) - sekarang dibiarkan turun ke baris
   ke-2 di dalam kartu yang sama, bukan terpotong "...". Cuma perlu di HP -
   di layar lebar chipnya sudah cukup lebar untuk satu baris. */
@media (max-width: 560px) {
  .kas-saldo-grid .kas-chip-value,
  .kas-jenis-grid .kas-chip-value,
  .kas-kategori-grid .kas-chip-value,
  .kas-subaktivitas-grid .kas-chip-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
}

/* ---- Kas Masuk / Kas Keluar, its own symmetric row ------------------------ */
.kas-jenis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ---- Aktivitas breakdown (Operasional/Investasi/Pendanaan) ---------------- */
.kas-kategori-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 560px) {
  .kas-kategori-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Rincian Operasional: HPP / OPEX --------------------------------------- */
.kas-subaktivitas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* ---- Shared chip: every filter trigger on this page uses this one shape.
   Same rules as laporan-kas.css's .kas-chip - see there for the full
   explanation. */
.kas-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent, var(--border));
  background: #fff;
  color: var(--ink);
  min-width: 0;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.kas-chip:active {
  transform: scale(0.98);
}

.kas-chip-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kas-chip-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent, var(--ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Setara Yuan kecil di bawah nominal Rupiah - cuma dipakai chip Alipay
   (lihat renderSaldoAndKategori, js/arus-kas-bulanan.js), murni tampilan.
   Warnanya mengikuti pola .kas-chip-label per kondisi (biasa/dark/active)
   di bawah - tetap kecil & pudar, tidak pernah bersaing dengan nominal
   Rupiah di atasnya. */
.kas-chip-sub {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
}

.kas-chip.active {
  background: var(--accent, var(--ink));
  border-color: var(--accent, var(--ink));
  color: #fff;
}

.kas-chip.active .kas-chip-label {
  color: rgba(255, 255, 255, .7);
}

.kas-chip.active .kas-chip-value {
  color: #fff;
}

.kas-chip.active .kas-chip-sub {
  color: rgba(255, 255, 255, .6);
}

.kas-chip-dark {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 4px solid var(--accent, rgba(255, 255, 255, .3));
  color: #fff;
}

.kas-chip-dark .kas-chip-label {
  color: rgba(255, 255, 255, .6);
}

.kas-chip-dark .kas-chip-sub {
  color: rgba(255, 255, 255, .5);
}

.kas-chip-dark.active {
  background: #fff;
  border-color: #fff;
  border-left-color: var(--accent, #fff);
  color: var(--ink);
}

.kas-chip-dark.active .kas-chip-label {
  color: var(--muted);
}

.kas-chip-dark.active .kas-chip-sub {
  color: var(--muted);
}

.kas-chip-dark.active .kas-chip-value {
  color: var(--accent, var(--ink));
}

/* ---- Per-metric accent colors ---------------------------------------------- */
.kas-chip-bca { --accent: #F5B942; }
.kas-chip-bsi { --accent: #6C8CF5; }
.kas-chip-jago { --accent: #EC6A52; }
.kas-chip-alipay { --accent: #34D399; }
.kas-chip-debit { --accent: #059669; }
.kas-chip-kredit { --accent: var(--red-dark); }
.kas-chip-operasional { --accent: #059669; }
.kas-chip-investasi { --accent: #0284C7; }
.kas-chip-pendanaan { --accent: #7C3AED; }
.kas-chip-hpp { --accent: #D97706; }
.kas-chip-opex { --accent: #DB2777; }
.kas-chip-gaji { --accent: #2563EB; }

/* ---- Order actions row: Debit + Kredit + FX + delete - Export dipindah ke
   .section-head-right (lihat di bawah), digantikan tombol "FX" di sini. */
#kas-order-actions .impor-add-order-btn {
  flex: 2;
}

/* FX tetap sesempit slot Export yang lama (bukan selebar Debit/Kredit) -
   labelnya cuma 2 huruf, tidak butuh seluas itu. */
#kas-order-actions .kas-add-fx-btn {
  flex: 1;
}

#kas-order-actions .impor-delete-order-btn {
  flex: 1;
}

.kas-add-debit-btn {
  border-style: solid;
  border-width: 1.5px;
  border-color: #059669;
  background: #ECFDF5;
  color: #059669;
}

.kas-add-debit-btn:hover {
  background: #D1FAE5;
}

.kas-add-keluar-btn {
  border-style: solid;
  border-width: 1.5px;
  border-color: var(--red-dark);
  background: #FDEBEC;
  color: var(--red-dark);
}

.kas-add-keluar-btn:hover {
  background: #FBD5D8;
}

/* Ketiga tombol aksi sekarang mengikuti pola warna hijau/merah/biru -
   FX pakai biru supaya jelas beda dari Debit (hijau)/Kredit (merah). */
.kas-add-fx-btn {
  border-style: solid;
  border-width: 1.5px;
  border-color: #2563EB;
  background: #EFF6FF;
  color: #2563EB;
}

.kas-add-fx-btn:hover {
  background: #DBEAFE;
}

/* Export dipindah ke header (section-head-right, sejajar ikon urutan/
   tampilan) - .impor-export-btn dari laporan-impor.css pakai flex:1 untuk
   konteks aslinya (baris order-actions), tidak relevan di sini. */
.section-head-right .impor-export-btn {
  flex: 0 0 auto;
  width: auto;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-full);
}

/* ---- Transaction cards ---------------------------------------------------- */
.kas-amount-in {
  color: #059669 !important;
}

.kas-amount-out {
  color: var(--red-dark) !important;
}

/* Nilai Yuan di bawah nominal Rupiah - cuma muncul untuk transaksi dana
   Alipay yang tercatat lewat FX (baik tombol "FX" maupun Dana=Alipay di
   popup Tambah Debit/Kredit biasa, lihat fxYuan di js). */
.kas-yuan-sub {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* Which sumber dana (BCA/BSI/Bank Jago) a transaction moved. */
.kas-dana-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
}

.kas-dana-badge.dana-bca { background: #fff; color: #B45309; border-color: #FDE68A; }
.kas-dana-badge.dana-bsi { background: #fff; color: #4338CA; border-color: #C7D2FE; }
.kas-dana-badge.dana-jago { background: #fff; color: #B91C1C; border-color: #FCA5A5; }
.kas-dana-badge.dana-alipay { background: #fff; color: #047857; border-color: #86E0B8; }

/* Slot lampiran "Gambar 2" (image2) - halaman ini punya 2 slot gambar,
   bukan cuma 1 seperti modul lain. css/laporan-impor.css (dipakai bersama
   modul lain) cuma punya warna untuk .has-file.pdf/.excel/.image - image2
   belum ada di sana sama sekali, jadi ikonnya tetap abu-abu default
   walaupun sudah ada filenya. Disamakan biru persis seperti .image (slot
   Gambar 1) di sini. */
.impor-attach-btn.has-file.image2 {
  background: #E4F1FE;
  border-color: rgba(2, 132, 199, 0.25);
  color: #0284C7;
}

@media (min-width: 860px) {
  #kas-list .impor-card-top {
    flex: 1;
  }

  #kas-list .impor-card-footer {
    flex: 0 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
  }
}

/* Catatan di form edit baris Pindah Dana/FX - jumlah & dananya dikunci
   (lihat renderEntryCard/commitCardEdit), cuma Tanggal & Deskripsi yang
   bisa diubah. */
.kas-transfer-edit-note {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 4px 0 10px;
}

.kas-pengaturan-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 8px;
}
.kas-pengaturan-section-title:first-of-type { margin-top: 0; }

/* Catatan kecil di bawah judul "Atur Saldo" - menegaskan bahwa yang
   diatur adalah saldo akhir BULAN YANG SEDANG DIBUKA saja (lihat
   showPengaturanModal, js/arus-kas-bulanan.js). Salah paham soal ini
   yang dulu bikin "edit September, Agustus ikut berubah" tidak
   ketahuan sampai datanya terlanjur bergeser. */
.kas-pengaturan-hint {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 10px;
}

.kas-pengaturan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.kas-pengaturan-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.kas-pengaturan-row input { margin-top: 3px; accent-color: var(--red); flex-shrink: 0; }
.kas-pengaturan-row strong { color: var(--ink); }
.kas-pengaturan-row:has(input:checked) { border-color: var(--red); background: #FEF2F2; }

/* ---- Atur Saldo: 3 kolom (BCA/BSI/Bank Jago), bukan 2 - form-grid dari
   laporan-impor.css otomatis membungkus ke baris berikutnya di layar
   sempit, jadi tidak perlu aturan tambahan selain lebar kolomnya sendiri. */
.ak-saldo-awal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 560px) {
  .ak-saldo-awal-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ---- Rincian Uang Masuk per kategori (Debit) ----------------------------- */
.kas-masuk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.kas-masuk-grid[hidden] { display: none; }
.kas-masuk-grid .kas-chip { --accent: #16A34A; }
.kas-masuk-grid .kas-chip-masuk-pendapatan_lain { --accent: #0D9488; }
.kas-masuk-grid .kas-chip-masuk-modal,
.kas-masuk-grid .kas-chip-masuk-pinjaman_masuk { --accent: #7C3AED; }
.kas-masuk-grid .kas-chip-masuk-penjualan_aset,
.kas-masuk-grid .kas-chip-masuk-pengembalian_pinjaman { --accent: #0284C7; }
.kas-masuk-grid .kas-chip-masuk-belum { --accent: #9CA3AF; }
.ak-masuk-judul {
  grid-column: 1 / -1;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: -4px;
}
.ak-kategori-akt { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; }
@media (max-width: 560px) {
  .kas-masuk-grid { grid-template-columns: repeat(2, 1fr); }
  .kas-masuk-grid .kas-chip-value { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
}

/* ---- Dana Cadangan (setor/tarik ke kantong cadangan - bukan biaya) -------- */
.kas-cadangan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kas-cadangan-grid[hidden] { display: none; }
.kas-chip-cadangan { --accent: #7C3AED; }

/* ---- Kas Masuk / Kas Keluar: blok berwarna lembut bernada dingin ---------- */
.kas-jenis-grid .kas-chip-debit:not(.active) { background: #EAF6F2; border-color: #CDE8DE #CDE8DE #CDE8DE var(--accent); }
.kas-jenis-grid .kas-chip-kredit:not(.active) { background: #F8EEF1; border-color: #EDD5DC #EDD5DC #EDD5DC var(--accent); }
.kas-jenis-grid .kas-chip-debit:not(.active):hover { background: #DFF1EA; }
.kas-jenis-grid .kas-chip-kredit:not(.active):hover { background: #F3E3E8; }

/* ---- Rincian Uang Masuk + Dana Cadangan dalam satu jajaran, maks. 3 kartu
   per baris (2 di HP). Kedua section jadi display:contents supaya kartunya
   mengalir di grid yang sama; judul Rincian tetap satu baris penuh. ---- */
.kas-rincian-baris { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kas-rincian-baris > .kas-masuk-grid,
.kas-rincian-baris > .kas-cadangan-grid { display: contents; }
.kas-rincian-baris > section[hidden] { display: none; }
.kas-rincian-baris:not(:has(> section:not([hidden]))) { display: none; }
@media (max-width: 560px) {
  .kas-rincian-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kas-rincian-baris .kas-chip-value { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
}
@media (max-width: 560px) {
  .kas-subaktivitas-grid { grid-template-columns: repeat(2, 1fr); }
}