/* ==========================================================================
   Laporan Kas — cash ledger. Builds on laporan-impor.css for the card/list/
   month-tab/field styling. Each summary chip carries its own accent color
   (set via --accent/--accent-tint per kas-chip-<filter> class below) for a
   proper finance-dashboard feel — a colored left edge and value text by
   default, filled solid with that same color when selected as a filter.
   ========================================================================== */

/* ---- Saldo hero card (Tunai / Saldo only) -------------------------------- */
.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;
}

.kas-saldo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

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

/* ---- Category breakdown ---------------------------------------------------
   3 kategori sejak "Lainnya" dihapus (digabung ke Operasional). Dulu 4 kolom
   (dengan versi mobile 2x2) supaya "Lainnya" tidak menggantung sendirian di
   baris kedua. */
.kas-kategori-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Di HP 3 kolom tidak muat: pada layar 375px tiap kartu cuma menyisakan 73px
   untuk angkanya, sedangkan "Rp 1.633.026" butuh 98px - angkanya terpotong
   jadi "Rp 789..." (dilaporkan pengguna). Turun ke 2 kolom, persis seperti
   yang sudah dilakukan halaman Arus Kas Bulanan untuk grid yang sama. */
@media (max-width: 560px) {
  .kas-kategori-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Dan angkanya sendiri dibiarkan turun ke baris ke-2 di dalam kartu yang
   sama, bukan dipotong elipsis - 2 kolom saja belum menjamin muat kalau
   angkanya sampai jutaan/9 digit. Cuma perlu di HP; di layar lebar kartunya
   sudah cukup lebar untuk satu baris. Sama dengan aturan di
   css/arus-kas-bulanan.css. */
@media (max-width: 560px) {
  .kas-saldo-grid .kas-chip-value,
  .kas-jenis-grid .kas-chip-value,
  .kas-kategori-grid .kas-chip-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
}

/* ---- Shared chip: every filter trigger on this page uses this one shape.
   Each carries its own --accent/--accent-tint (set per kas-chip-<filter>
   below) — a colored left edge and value text by default, filled solid
   with that color (white text) once selected as the active filter. */
.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;
}

/* Plain chip (Pemasukan/Pengeluaran/kategori): white by default, fills
   solid with its own accent color once selected as the active filter. */
.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;
}

/* Dark chip (Tunai/Saldo): sits on the navy hero card instead of white —
   a translucent panel with its accent color carried on the value text;
   inverts to a solid white card (same accent, now on white) when active. */
.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.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-value {
  color: var(--accent, var(--ink));
}

/* ---- Per-metric accent colors ---------------------------------------------- */
.kas-chip-tunai { --accent: #F5B942; }
.kas-chip-saldo { --accent: #6C8CF5; }
.kas-chip-debit { --accent: #059669; }
.kas-chip-kredit { --accent: var(--red-dark); }
.kas-chip-ongkir { --accent: #0284C7; }
.kas-chip-packing { --accent: #D97706; }
.kas-chip-operasional { --accent: #059669; }
.kas-chip-lainnya { --accent: #64748B; }

/* ---- Order actions row: 2 add buttons + export + delete, not the usual
   1 add + export + delete laporan-impor.css sizes for, so this page picks
   its own ratio rather than leaving export/delete squeezed to 10% each. */
#kas-order-actions .impor-add-order-btn {
  flex: 2;
}

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

/* Solid, filled tint instead of the default dashed outline — reads as a
   deliberate green/red action, not a placeholder-looking dashed box. */
.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;
}

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

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

/* Which pool of money (Tunai/Saldo) a transaction moved — kategori stays
   out of the collapsed card per earlier feedback, but dana was asked back. */
.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-tunai { background: #fff; color: #B45309; border-color: #FDE68A; }
.kas-dana-badge.dana-saldo { background: #fff; color: #4338CA; border-color: #C7D2FE; }

/* Inline edit form and popup field grids use the shared .form-grid from
   laporan-impor.css.

   laporan-impor.css splits .impor-card-main into a top + footer flex pair at
   desktop width, sized assuming a middle stepper column (.impor-progress)
   that this page never renders — the same gap barang-po.css already fixes
   for Data PO, whose cards don't have one either. */
@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;
  }
}

/* ---- PIN gate for Atur Saldo ------------------------------------------------ */
.kas-pin-field {
  margin-bottom: 10px;
}

.kas-pin-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.6em;
  outline: none;
  /* A plain text input, not type=password — that was the one the browser's
     saved site login kept auto-filling into, since it's the only password
     field on the page. Masked visually instead via -webkit-text-security,
     which also sidesteps password-manager autofill entirely. Firefox has
     no equivalent and shows plain digits; acceptable since this PIN was
     never a real security boundary to begin with. */
  -webkit-text-security: disc;
}

/* The dots this field shows should only ever appear for digits the user
   actually typed — no placeholder text and no autofill, so an empty field
   reads as empty rather than looking pre-filled. */
.kas-pin-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(228, 33, 43, .1);
}

.kas-pin-error {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--red-dark);
  text-align: center;
  margin-bottom: 14px;
}

/* Pengaturan: Atur Saldo and Kolom Wajib share one dialog now (one PIN,
   one icon) — this divides the two sections inside it. */
.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; }

/* Menjelaskan bahwa "Atur Saldo" selalu mengoreksi saldo bulan TERBARU
   (months[0], bisa beda dari tab yang sedang dibuka) - lihat komentar di
   btn-kas-settings, js/laporan-kas.js. */
.kas-pengaturan-hint {
  font-size: 0.76rem;
  color: var(--muted);
  margin: -4px 0 10px;
  line-height: 1.4;
}

.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; }

/* Normal/Padat view toggle and the "padat" preview-row look are shared —
   see .view-icon-btn / .impor-list.view-padat / .impor-card.preview-row in
   laporan-impor.css. Debit/kredit amount coloring stays kas-specific via
   .kas-amount-in / .kas-amount-out (both !important, so they still win
   over .preview-row-amount's default ink color here). */

.impor-attach-btn.has-file.image2 { background:#E4F1FE;border-color:rgba(2,132,199,.25);color:#0284C7; }