/* Gaya kustom panel Keuangan KSI. Plain CSS, tanpa build pipeline. */

/* Tahap desain: palet Koperasi Keluarga Samawa Indonesia. Semua warna buatan sendiri lewat variabel; .dark = mode gelap */
:root {
    --keu-navy: #062657;
    --keu-biru: #037dc8;
    --keu-biru-terang: #5bb8ee;
    --keu-emas: #d49821;
    --keu-emas-terang: #e3b33d;
    --keu-latar: #f4f6fa;
    --keu-kartu: #ffffff;
    --keu-kartu-2: #f1f4f9;
    --keu-garis: #e6eaf2;
    --keu-teks: #0f172a;
    --keu-teks-redup: #64748b;
    --keu-tautan: #02679f;
    --keu-pil-aktif: var(--keu-navy);
    --keu-hover: rgba(15, 23, 42, 0.045);
    --keu-radius: 20px;
    --keu-bayangan: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 24px rgba(15, 23, 42, 0.05);
    --keu-bayangan-naik: 0 2px 6px rgba(15, 23, 42, 0.06), 0 14px 32px rgba(15, 23, 42, 0.09);
    --keu-hijau: #15803d;
    --keu-hijau-latar: #dcfce7;
    --keu-merah: #b91c1c;
    --keu-merah-latar: #fee2e2;
    --keu-oranye: #b45309;
    --keu-oranye-latar: #fef3c7;
    --keu-mrx-latar: #fef9c3;
    --keu-mrx-teks: #854d0e;
    --keu-tint-navy: rgba(6, 38, 87, 0.05);
    --keu-tint-navy-kuat: rgba(6, 38, 87, 0.1);
    --keu-angka-kartu: var(--keu-navy);
    /* segmen donut & grafik */
    --keu-seg-1: var(--keu-navy);
    --keu-seg-2: var(--keu-biru);
    --keu-seg-3: var(--keu-emas);
    --keu-seg-4: #7cc3ec;
    --keu-seg-5: var(--keu-emas-terang);
    --keu-seg-lain: #cbd5e1;
    /* umur Mr. X 0–30 / 31–90 / 91–365 / >365 */
    --keu-umur-1: var(--keu-biru);
    --keu-umur-2: var(--keu-emas);
    --keu-umur-3: #dc2626;
    --keu-umur-4: #64748b;
}
.dark {
    --keu-latar: #0b1426;
    --keu-kartu: #111c33;
    --keu-kartu-2: #17243f;
    --keu-garis: #1e2b47;
    --keu-teks: #e2e8f0;
    --keu-teks-redup: #94a3b8;
    --keu-tautan: #5bb8ee;
    --keu-pil-aktif: var(--keu-biru);
    --keu-hover: rgba(255, 255, 255, 0.05);
    --keu-bayangan: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 24px rgba(0, 0, 0, 0.25);
    --keu-bayangan-naik: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(0, 0, 0, 0.35);
    --keu-hijau: #4ade80;
    --keu-hijau-latar: rgba(22, 163, 74, 0.2);
    --keu-merah: #f87171;
    --keu-merah-latar: rgba(220, 38, 38, 0.22);
    --keu-oranye: #fbbf24;
    --keu-oranye-latar: rgba(217, 119, 6, 0.22);
    --keu-mrx-latar: rgba(202, 138, 4, 0.22);
    --keu-mrx-teks: #fde68a;
    --keu-tint-navy: rgba(91, 184, 238, 0.06);
    --keu-tint-navy-kuat: rgba(91, 184, 238, 0.12);
    --keu-angka-kartu: var(--keu-biru-terang);
    --keu-seg-1: var(--keu-biru-terang);
    --keu-seg-2: var(--keu-biru);
    --keu-seg-3: var(--keu-emas);
    --keu-seg-4: #2f6fb5;
    --keu-seg-5: var(--keu-emas-terang);
    --keu-seg-lain: #334155;
    --keu-umur-1: var(--keu-biru-terang);
    --keu-umur-2: var(--keu-emas-terang);
    --keu-umur-3: #f87171;
    --keu-umur-4: #94a3b8;
}

/* Baris Mr. X berlatar kuning (SPEC §8 no. 2) */
.fi-ta-row.keu-mrx,
tr.keu-mrx > td {
    background-color: var(--keu-mrx-latar);
}

/* Tabel laporan / preview */
.keu-tabel-scroll { overflow-x: auto; }
.keu-tabel { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.keu-tabel th, .keu-tabel td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); vertical-align: top; text-align: left; }
.dark .keu-tabel th, .dark .keu-tabel td { border-bottom-color: rgba(255, 255, 255, 0.08); }
.keu-tabel th { font-weight: 600; background: rgba(0, 0, 0, 0.03); white-space: nowrap; }
.dark .keu-tabel th { background: rgba(255, 255, 255, 0.04); }
.keu-tabel-kecil { font-size: 0.8rem; }
.keu-kanan { text-align: right !important; }
.keu-nowrap { white-space: nowrap; }
/* Uraian: lebar minimum ±22rem, maksimal 2 baris + elipsis (teks penuh di title/tooltip) — tabel kustom & tabel Filament */
.keu-uraian { min-width: 22rem; }
html .fi-body th.keu-kolom-uraian { min-width: 22rem; }
/* Kolom teks bebas di tabel kustom (keterangan log, dsb.) jangan menyempit sampai pecah per kata */
.keu-kolom-teks { min-width: 14rem; }
.keu-dua-baris { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.keu-muted { color: var(--keu-teks-redup); }
.keu-kecil { font-size: 0.75rem; }
.keu-baris-saldo td { background: var(--keu-tint-navy); }
.keu-baris-ditolak td { opacity: 0.6; }
.keu-baris-duplikat td { opacity: 0.6; }

/* Ringkasan angka di atas tabel */
.keu-ringkasan { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 0.75rem; font-size: 0.875rem; }
.keu-ringkasan b { margin-left: 0.25rem; }
.keu-ok { color: var(--keu-hijau); }
.keu-bad { color: var(--keu-merah); }
.keu-warn { color: var(--keu-oranye); }
.keu-mrx-badge { background: var(--keu-mrx-latar); color: var(--keu-mrx-teks); padding: 0 0.4rem; border-radius: 9999px; }

/* Badge kecil di tabel preview */
.keu-badge { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.keu-badge-success { background: var(--keu-hijau-latar); color: #166534; }
.keu-badge-warning { background: var(--keu-oranye-latar); color: #92400e; }
.keu-badge-danger { background: var(--keu-merah-latar); color: #991b1b; }
.keu-badge-gray { background: #e5e7eb; color: #374151; }
.dark .keu-badge-success { color: #86efac; }
.dark .keu-badge-warning { color: #fcd34d; }
.dark .keu-badge-danger { color: #fca5a5; }
.dark .keu-badge-gray { background: #1e293b; color: #cbd5e1; }

/* Tahap 4: Mr. X */
.keu-link { color: var(--keu-tautan); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.keu-kandidat td { vertical-align: middle; }
.keu-badge-mrx { background: var(--keu-mrx-latar); color: var(--keu-mrx-teks); }
.keu-badge-transaksi { background: #e0f2fe; color: #075985; }
.keu-badge-bukti { background: #ede9fe; color: #5b21b6; }
.dark .keu-badge-transaksi { background: rgba(3, 125, 200, 0.22); color: #bae6fd; }
.dark .keu-badge-bukti { background: rgba(124, 58, 237, 0.22); color: #ddd6fe; }
.keu-aging-0-30 { color: var(--keu-hijau); }
.keu-aging-31-90 { color: var(--keu-oranye); }
.keu-aging-91-365 { color: var(--keu-merah); }
.keu-aging-gt365 { color: var(--keu-teks-redup); }

/* Tahap 5: komentar & flag */
.keu-komentar-daftar { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.keu-komentar-item { border: 1px solid var(--keu-garis); border-radius: 14px; padding: 0.6rem 0.85rem; font-size: 0.875rem; background: var(--keu-kartu); }
.keu-komentar-flag { border-color: #fca5a5; background: #fef2f2; }
.dark .keu-komentar-flag { border-color: #991b1b; background: rgba(153, 27, 27, 0.15); }
.keu-komentar-flag-selesai { opacity: 0.75; }
.keu-komentar-kepala { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.25rem; }
.keu-komentar-penulis { font-weight: 600; }
.keu-komentar-isi { white-space: pre-wrap; word-break: break-word; }
.keu-komentar-kaki { margin-top: 0.35rem; }
.keu-komentar-form { display: flex; flex-direction: column; gap: 0.5rem; }
/* Isian komentar = komponen Filament (fi-input-wrp + textarea.fi-input, tab pil tipe, fi-btn); tanpa latar sendiri */
.keu-komentar-textarea { min-height: 5rem; resize: vertical; }
.keu-komentar-aksi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.keu-komentar-aksi > .fi-btn:only-child { margin-inline-start: auto; }

/* Tahap 6a: Resume */
.keu-resume .keu-resume-label { min-width: 22rem; white-space: nowrap; }
.keu-resume-l1 td { font-weight: 600; background: rgba(0, 0, 0, 0.03); }
.dark .keu-resume-l1 td { background: rgba(255, 255, 255, 0.04); }
.keu-resume-l2 td.keu-resume-label { padding-left: 1.5rem; }
.keu-resume-l3 td.keu-resume-label { padding-left: 3rem; color: var(--keu-teks-redup); }
.keu-baris-sintetis td { font-weight: 700; background: var(--keu-tint-navy-kuat); }
.keu-baris-belum td { background: var(--keu-oranye-latar); }
.keu-sel { background-color: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted rgba(0, 0, 0, 0.35); text-underline-offset: 3px; }
.dark .keu-sel { text-decoration-color: rgba(255, 255, 255, 0.35); }
.keu-sel:hover { color: var(--keu-tautan); }
.keu-sel-komentar::after { content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 0.3rem; border-radius: 9999px; background: var(--keu-emas); vertical-align: middle; }
.keu-resume-sel-judul { font-weight: 600; margin: 1rem 0 0.5rem; }

/* Tahap 6b: laporan lain (refund, konsumen, utang-piutang, kasbon, overhead, dinas, aging, log revisi) */
.keu-grup td { font-weight: 600; background: rgba(0, 0, 0, 0.03); }
.dark .keu-grup td { background: rgba(255, 255, 255, 0.04); }
.keu-subtotal td { font-weight: 600; background: var(--keu-tint-navy); }
.keu-total td { font-weight: 700; background: var(--keu-tint-navy-kuat); }
.keu-indent { padding-left: 1.5rem !important; }
.keu-kosong { color: var(--keu-teks-redup); font-style: italic; }
.keu-catatan { margin-top: 0.75rem; font-size: 0.8rem; color: var(--keu-teks-redup); font-style: italic; }
.keu-saldo-negatif { color: var(--keu-merah); }
.keu-saldo-positif { color: var(--keu-hijau); }

/* Tahap 7: Ringkasan AI */
.keu-ringkasan-ai-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; font-size: 0.8rem; color: var(--keu-teks-redup); }
.keu-ringkasan-ai { font-size: 0.9rem; line-height: 1.6; }
.keu-ringkasan-ai p { margin: 0 0 0.75rem; }
.keu-ringkasan-ai ul { margin: 0 0 0.75rem 1.25rem; list-style: disc; }
.keu-ringkasan-ai li { margin-bottom: 0.25rem; }
.keu-ringkasan-ai strong { font-weight: 600; }

/* Tahap 8: kartu dashboard per area */
.keu-kartu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.keu-kartu { border: 0; border-radius: var(--keu-radius); padding: 1.1rem 1.25rem; background: var(--keu-kartu); box-shadow: var(--keu-bayangan); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.keu-kartu-judul { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 1rem; }
.keu-kartu-utama { padding: 0.5rem 0 0.6rem; border-bottom: 1px solid var(--keu-garis); margin-bottom: 0.25rem; }
.keu-kartu-label { font-size: 0.72rem; color: var(--keu-teks-redup); text-transform: uppercase; letter-spacing: 0.05em; }
.keu-kartu-nilai { font-size: 1.45rem; font-weight: 700; color: var(--keu-angka-kartu); white-space: nowrap; letter-spacing: -0.01em; }
.keu-kartu-baris { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.keu-kartu-baris b { white-space: nowrap; text-align: right; }
.keu-kartu-selisih { background: var(--keu-merah-latar); margin: 0 -0.5rem; padding: 0.3rem 0.5rem; border-radius: 12px; }

/* ===================================================================================================
   Tahap desain: re-skin panel (referensi docs/desain/referensi-*.png). Override kelas Filament memakai
   awalan "html .fi-body" supaya menang atas utilitas Tailwind bawaan Filament (termasuk varian dark:).
   =================================================================================================== */

/* --- Utilitas --- */
.keu-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.keu-ikon { width: 1.15rem; height: 1.15rem; flex: none; }
.keu-ikon-bulat { display: inline-flex; align-items: center; justify-content: center; }
/* Tanpa "display": tombol buka/tutup sidebar Filament memakai lg:hidden */
.keu-ikon-bulat,
html .fi-body .fi-topbar .fi-icon-btn {
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    background-color: var(--keu-kartu-2); color: var(--keu-teks-redup); box-shadow: inset 0 0 0 1px var(--keu-garis);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.keu-ikon-bulat:hover,
html .fi-body .fi-topbar .fi-icon-btn:hover { background-color: var(--keu-hover); color: var(--keu-teks); }
.keu-ikon-bulat .keu-ikon { width: 1.2rem; height: 1.2rem; }
.keu-ikon-bulat-kecil { width: 2rem; height: 2rem; }
.keu-ikon-bulat-kecil .keu-ikon { width: 1rem; height: 1rem; }

/* --- Global: latar abu muda, kartu/section/tabel putih radius 20px, bayangan sangat halus, tanpa border tebal --- */
html .fi-body,
html.dark .fi-body { background-color: var(--keu-latar); } /* html.dark: menang atas dark:bg-gray-950 */
html .fi-body .fi-section,
html .fi-body .fi-ta-ctn,
html .fi-body .fi-wi-stats-overview-stat,
html .fi-body .fi-modal-window {
    background-color: var(--keu-kartu); border-radius: var(--keu-radius); box-shadow: var(--keu-bayangan);
}
html .fi-body .fi-ta-ctn { overflow: hidden; }
html .fi-body .fi-dropdown-panel { border-radius: 16px; }
html .fi-body .fi-input-wrp { border-radius: 12px; }
html .fi-body .fi-header-heading { letter-spacing: -0.02em; }
/* Header section dengan konten kanan (pil/tombol): boleh turun baris supaya judul & deskripsi tidak terjepit pecah per kata */
html .fi-body .fi-section-header > .flex { flex-wrap: wrap; }
html .fi-body .fi-section-header > .flex > .grid.flex-1 { min-width: min(100%, 12rem); }
/* Tombol & badge berbentuk pil */
html .fi-body .fi-btn,
html .fi-body .fi-badge,
html .fi-body .fi-icon-btn { border-radius: 9999px; }
html .fi-body .fi-btn-group { border-radius: 9999px; overflow: hidden; }
html .fi-body .fi-btn-group .fi-btn { border-radius: 0; }

/* --- Logo: ikon + nama di sidebar/topbar; logo lengkap cerah/gelap hanya di halaman login --- */
.keu-brand { display: flex; align-items: center; }
.keu-brand-ringkas { display: flex; align-items: center; gap: 0.6rem; }
.keu-brand-ikon { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.keu-brand-nama { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--keu-teks); white-space: nowrap; }
.keu-brand-lengkap { display: none; }
.keu-brand-lengkap img { width: 12.5rem; max-width: 70vw; height: auto; }
.keu-logo-gelap { display: none; }
.dark .keu-logo-cerah { display: none; }
.dark .keu-logo-gelap { display: block; }

/* --- Sidebar: sapaan, label grup kapital kecil abu, item aktif pil navy (gelap: biru), kartu Ringkasan AI --- */
html .fi-body .fi-sidebar,
html .fi-body .fi-sidebar-header { background-color: var(--keu-kartu); }
html .fi-body .fi-sidebar { border-inline-end: 1px solid var(--keu-garis); }
html .fi-body .fi-sidebar-header { box-shadow: none; }
html .fi-body .fi-sidebar-nav { padding-top: 1.5rem; padding-bottom: 2rem; }
/* Kartu Ringkasan AI = anak flex terakhir di nav yang bisa digulir: tanpa flex-shrink 0 ia ikut menyusut lalu terpotong
   overflow:hidden-nya sendiri. Layar pendek (< 760px, termasuk laci HP mendatar): versi ringkas ikon + "Buka Resume". */
.keu-kartu-ai { flex-shrink: 0; }
@media (max-height: 759px) {
    .keu-kartu-ai { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; }
    .keu-kartu-ai-hiasan,
    .keu-kartu-ai-judul,
    .keu-kartu-ai-teks { display: none; }
    .keu-kartu-ai-ikon { width: 2rem; height: 2rem; flex: none; }
    .keu-kartu-ai-tombol { flex: 1; min-width: 0; justify-content: space-between; }
}
.keu-sapaan { padding: 0 0.25rem; }
.keu-sapaan-judul { font-size: 1.4rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--keu-teks); }
.keu-sapaan-sub { margin-top: 0.3rem; font-size: 0.8rem; color: var(--keu-teks-redup); }
html .fi-body .fi-sidebar-group-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--keu-teks-redup); }
html .fi-body .fi-sidebar-item-button { border-radius: 9999px; padding: 0.6rem 0.95rem; }
html .fi-body .fi-sidebar-item-button:hover { background-color: var(--keu-hover); }
html .fi-body .fi-sidebar-item-icon { width: 1.25rem; height: 1.25rem; color: var(--keu-teks-redup); }
html .fi-body .fi-sidebar-item-label { color: var(--keu-teks); font-weight: 500; }
html .fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: var(--keu-pil-aktif); box-shadow: 0 8px 18px rgba(6, 38, 87, 0.2);
}
html .fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
html .fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon { color: #fff; }
.dark .fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-button { box-shadow: 0 8px 18px rgba(3, 125, 200, 0.3); }

.keu-kartu-ai {
    position: relative; overflow: hidden; padding: 1.1rem; border-radius: var(--keu-radius); color: #fff;
    background: radial-gradient(90% 70% at 100% 0%, rgba(91, 184, 238, 0.45), rgba(91, 184, 238, 0) 60%),
        linear-gradient(145deg, var(--keu-navy) 0%, #0a4a8a 55%, var(--keu-biru) 100%);
    box-shadow: 0 12px 30px rgba(6, 38, 87, 0.28);
}
.keu-kartu-ai-hiasan { position: absolute; right: 0.5rem; top: 0.75rem; width: 5rem; fill: rgba(255, 255, 255, 0.16); }
.keu-kartu-ai-ikon { display: inline-flex; width: 2.25rem; height: 2.25rem; border-radius: 9999px; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); }
.keu-kartu-ai-judul { position: relative; margin-top: 0.8rem; font-weight: 700; font-size: 1.1rem; }
.keu-kartu-ai-teks { position: relative; margin: 0.25rem 0 0.9rem; font-size: 0.78rem; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }
.keu-kartu-ai-tombol {
    position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.3rem 0.3rem 0.95rem;
    border-radius: 9999px; background: #0b1426; color: #fff; font-size: 0.8rem; font-weight: 600; text-decoration: none;
}
.keu-kartu-ai-tombol:hover { background: #000; }
.keu-kartu-ai-panah { display: inline-flex; width: 1.7rem; height: 1.7rem; border-radius: 9999px; align-items: center; justify-content: center; background: #fff; color: var(--keu-navy); }
.keu-kartu-ai-panah .keu-ikon { width: 1rem; height: 1rem; }

/* --- Topbar: filter area pil, tombol bulat (mode, lonceng), avatar + nama + email --- */
html .fi-body .fi-topbar > nav { background-color: var(--keu-kartu); box-shadow: 0 1px 0 var(--keu-garis); }
/* Filter area = select Filament dalam fi-input-wrp; dibentuk pil */
.keu-area-filter { display: flex; align-items: center; max-width: 16rem; }
html .fi-body .keu-area-filter .fi-input-wrp { border-radius: 9999px; background-color: var(--keu-kartu-2); box-shadow: inset 0 0 0 1px var(--keu-garis); }
html .fi-body .keu-area-filter .fi-select-input { font-size: 0.85rem; font-weight: 500; padding-block: 0.45rem; text-overflow: ellipsis; }
/* Layar sempit (375px): ikon pin disembunyikan dan jarak ikon topbar dirapatkan supaya "Semua area" tidak terpotong */
@media (max-width: 639px) {
    html .fi-body .keu-area-filter .fi-input-wrp-prefix { display: none; }
    html .fi-body .fi-topbar > nav .gap-x-4 { column-gap: 0.5rem; }
}
/* Tombol mode: dua icon-button Filament; bulan di mode cerah, matahari di mode gelap */
.keu-tombol-tema { display: flex; }
html .fi-body .keu-tombol-tema .keu-tombol-tema-matahari { display: none; }
html.dark .fi-body .keu-tombol-tema .keu-tombol-tema-matahari { display: flex; }
html.dark .fi-body .keu-tombol-tema .keu-tombol-tema-bulan { display: none; }
/* Avatar inisial (SVG lokal) dengan ring emas */
html .fi-body .fi-user-avatar { box-shadow: 0 0 0 2px var(--keu-kartu), 0 0 0 4px var(--keu-emas); }
.keu-pengguna { display: none; flex-direction: column; line-height: 1.2; margin-inline-start: -0.5rem; max-width: 14rem; }
@media (min-width: 768px) { .keu-pengguna { display: flex; } }
.keu-pengguna-nama { font-size: 0.85rem; font-weight: 600; color: var(--keu-teks); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keu-pengguna-email { font-size: 0.72rem; color: var(--keu-teks-redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Tab di halaman (Mr. X, dsb.) dan pilihan ≤ 4 (ToggleButtons, rentang grafik) bergaya pil; aktif = biru penuh --- */
/* Elemen form/tombol: hanya background-color, jangan shorthand background (menghapus ikon chevron/latar bawaan Filament) */
html .fi-body .fi-tabs { background-color: transparent; box-shadow: none; padding: 0; gap: 0.5rem; flex-wrap: wrap; justify-content: center; overflow: visible; }
html .fi-body .fi-tabs-item { border-radius: 9999px; padding: 0.55rem 1.1rem; background-color: var(--keu-kartu); box-shadow: inset 0 0 0 1px var(--keu-garis); }
html .fi-body .fi-tabs-item:hover { background-color: var(--keu-kartu-2); }
html .fi-body .fi-tabs-item.fi-active { background-color: var(--keu-biru); box-shadow: 0 6px 16px rgba(3, 125, 200, 0.28); }
html .fi-body .fi-tabs-item.fi-active .fi-tabs-item-label,
html .fi-body .fi-tabs-item.fi-active .fi-tabs-item-icon { color: #fff; }
html .fi-body .fi-tabs-item.fi-active .fi-badge { background-color: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; }
html .fi-body .fi-fo-toggle-buttons .fi-btn {
    border-radius: 9999px; padding-inline: 1.1rem; background-color: var(--keu-kartu-2); color: var(--keu-teks);
    box-shadow: inset 0 0 0 1px var(--keu-garis);
}
html .fi-body .fi-fo-toggle-buttons input:checked + .fi-btn { background-color: var(--keu-biru); color: #fff; box-shadow: 0 4px 12px rgba(3, 125, 200, 0.3); }
html .fi-body .fi-fo-toggle-buttons input:checked + .fi-btn .fi-btn-label { color: #fff; }
/* Pil kecil berkelompok (rentang grafik, tipe komentar) = komponen tab Filament dengan kelas keu-tab-kecil */
html .fi-body .fi-tabs.keu-tab-kecil {
    display: inline-flex; flex-wrap: wrap; width: auto; margin: 0; gap: 0.25rem; padding: 0.25rem; border-radius: 9999px;
    background-color: var(--keu-kartu-2); box-shadow: inset 0 0 0 1px var(--keu-garis);
}
html .fi-body .fi-tabs.keu-tab-kecil .fi-tabs-item { padding: 0.3rem 0.85rem; font-size: 0.78rem; background-color: transparent; box-shadow: none; }
html .fi-body .fi-tabs.keu-tab-kecil .fi-tabs-item:hover { background-color: var(--keu-hover); }
html .fi-body .fi-tabs.keu-tab-kecil .fi-tabs-item.fi-active { background-color: var(--keu-biru); box-shadow: 0 4px 12px rgba(3, 125, 200, 0.3); }
html .fi-body .fi-tabs.keu-tab-kecil .fi-tabs-item-icon { width: 1rem; height: 1rem; }
/* Tautan berbentuk pil (bukan tombol form) */
.keu-pil {
    display: inline-flex; align-items: center; padding: 0.3rem 0.85rem; border-radius: 9999px; background-color: var(--keu-kartu-2);
    box-shadow: inset 0 0 0 1px var(--keu-garis); font-size: 0.78rem; font-weight: 600; color: var(--keu-teks-redup);
    text-decoration: none; white-space: nowrap; transition: color 0.15s ease;
}
.keu-pil:hover { color: var(--keu-teks); }

/* --- Dashboard --- */
.keu-bagian-judul { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.25rem 0 0.75rem; font-weight: 700; font-size: 1.05rem; color: var(--keu-teks); }
.keu-baris-atas { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .keu-baris-atas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .keu-hero { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .keu-baris-atas { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); }
    .keu-hero { grid-column: auto; grid-row: span 2; }
}
/* Hero gelap: gradasi navy dengan cahaya biru */
.keu-hero {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.65rem; padding: 1.5rem; border-radius: var(--keu-radius); color: #fff;
    background: radial-gradient(110% 85% at 100% 0%, rgba(3, 125, 200, 0.6) 0%, rgba(3, 125, 200, 0) 58%),
        radial-gradient(70% 55% at 0% 100%, rgba(91, 184, 238, 0.22) 0%, rgba(91, 184, 238, 0) 65%),
        linear-gradient(160deg, #0b2350 0%, var(--keu-navy) 55%, #031735 100%);
    box-shadow: 0 16px 40px rgba(6, 38, 87, 0.28);
}
.dark .keu-hero { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(91, 184, 238, 0.14); }
.keu-hero-kepala { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.keu-hero-label { font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.keu-hero-angka { font-size: clamp(1.75rem, 2.4vw, 2.6rem); overflow-wrap: anywhere; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.keu-hero-sub { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); }
.keu-progres { height: 0.55rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.keu-progres > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--keu-biru), var(--keu-biru-terang)); }
.keu-hero-kaki { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); }
.keu-hero-tautan { color: #fff; font-weight: 600; text-decoration: none; }
.keu-hero-tautan:hover { text-decoration: underline; }
/* Isi tengah hero: saldo per area/rekening + arus kas bulan acuan */
.keu-hero-judul-kecil { margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.keu-hero-rincian ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.keu-hero-rincian li,
.keu-hero-arus-baris {
    display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(2.5rem, 1fr) auto; align-items: center; gap: 0.6rem;
    font-size: 0.78rem; color: rgba(255, 255, 255, 0.85);
}
.keu-hero-rincian-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keu-hero-rincian-nominal { font-weight: 600; color: #fff; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.keu-hero-bar { display: block; height: 0.4rem; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.12); overflow: hidden; }
.keu-hero-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--keu-biru), var(--keu-biru-terang)); }
.keu-hero-bar-minus > span { background: #f87171; }
.keu-hero-bar-masuk > span { background: var(--keu-biru-terang); }
.keu-hero-bar-keluar > span { background: var(--keu-emas-terang); }
.keu-hero-arus { display: flex; flex-direction: column; gap: 0.35rem; }
.keu-hero-bawah { margin-top: auto; display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.35rem; }
/* Header dashboard: subjudul + pemilih bulan acuan berbentuk pil kecil di kanan */
.keu-dash-subjudul { margin-top: 0.35rem; font-size: 0.92rem; color: var(--keu-teks-redup); }
.keu-pilih-bulan { width: 100%; }
@media (min-width: 640px) { .keu-pilih-bulan { width: 13.5rem; } }
html .fi-body .keu-pilih-bulan .fi-input-wrp { border-radius: 9999px; background-color: var(--keu-kartu); box-shadow: var(--keu-bayangan), inset 0 0 0 1px var(--keu-garis); }
html .fi-body .keu-pilih-bulan .fi-select-input { font-size: 0.85rem; font-weight: 600; }
.keu-chip-info { margin-inline-end: 0.35rem; background: rgba(3, 125, 200, 0.12); color: var(--keu-tautan); }
.dark .keu-chip-info { background: rgba(3, 125, 200, 0.24); }
/* Kartu statistik putih */
.keu-stat {
    position: relative; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; padding: 1.1rem 1.2rem 0.85rem;
    border-radius: var(--keu-radius); background: var(--keu-kartu); box-shadow: var(--keu-bayangan); color: var(--keu-teks); text-decoration: none;
}
.keu-stat-kepala { display: flex; align-items: center; gap: 0.55rem; }
.keu-stat-ikon { display: inline-flex; width: 2rem; height: 2rem; border-radius: 9999px; align-items: center; justify-content: center; background: var(--keu-kartu-2); color: var(--keu-teks-redup); box-shadow: inset 0 0 0 1px var(--keu-garis); }
.keu-stat-ikon .keu-ikon { width: 1rem; height: 1rem; }
.keu-stat-label { font-size: 0.82rem; font-weight: 500; color: var(--keu-teks-redup); }
.keu-stat-baris { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; }
.keu-angka-utama { font-size: 1.45rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.keu-stat-sub { font-size: 0.72rem; color: var(--keu-teks-redup); }
.keu-stat.keu-kartu-selisih { margin: 0; padding: 1.1rem 1.2rem 0.85rem; background: var(--keu-kartu); border-radius: var(--keu-radius); box-shadow: var(--keu-bayangan), inset 0 0 0 1.5px var(--keu-merah); }
.keu-stat.keu-kartu-selisih .keu-angka-utama { color: var(--keu-merah); }
/* Chip % vs bulan lalu */
.keu-chip { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.12rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.keu-chip-baik { background: var(--keu-hijau-latar); color: #15803d; }
.keu-chip-buruk { background: var(--keu-merah-latar); color: #b91c1c; }
.keu-chip-netral { background: var(--keu-kartu-2); color: var(--keu-teks-redup); }
.keu-chip-kaca { background: rgba(255, 255, 255, 0.15); color: #fff; }
.dark .keu-chip-baik { color: #86efac; }
.dark .keu-chip-buruk { color: #fca5a5; }
/* Sparkline */
.keu-spark { display: block; width: 100%; height: 2.4rem; margin-top: 0.2rem; overflow: visible; }
.keu-spark-garis { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.keu-spark-isi { fill: currentColor; opacity: 0.1; }
.keu-spark-biru { color: var(--keu-biru); }
.keu-spark-emas { color: var(--keu-emas); }
.keu-spark-navy { color: var(--keu-navy); }
.keu-spark-merah { color: var(--keu-umur-3); }
.dark .keu-spark-navy { color: var(--keu-biru-terang); }
.keu-spark-sumbu { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--keu-teks-redup); }
/* Hover kartu naik 2px */
.keu-stat, .keu-hero, .keu-kartu, .keu-cincin-kartu,
.fi-dashboard-page .fi-wi-widget > .fi-section { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.keu-stat:hover, .keu-kartu:hover, .keu-cincin-kartu:hover,
html .fi-body .fi-dashboard-page .fi-wi-widget > .fi-section:hover { transform: translateY(-2px); box-shadow: var(--keu-bayangan-naik); }
.keu-hero:hover { transform: translateY(-2px); }
.keu-stat.keu-kartu-selisih:hover { box-shadow: var(--keu-bayangan-naik), inset 0 0 0 1.5px var(--keu-merah); }
@media (prefers-reduced-motion: reduce) {
    .keu-stat, .keu-hero, .keu-kartu, .keu-cincin-kartu, .fi-dashboard-page .fi-wi-widget > .fi-section { transition: none; }
    .keu-stat:hover, .keu-hero:hover, .keu-kartu:hover, .keu-cincin-kartu:hover,
    html .fi-body .fi-dashboard-page .fi-wi-widget > .fi-section:hover { transform: none; }
}
/* Donut pengeluaran interaktif (Chart.js) + legenda; angka tengah = HTML di atas kanvas, tidak menangkap kursor */
.keu-donut-blok { position: relative; }
.keu-donut-wadah { position: relative; width: min(13rem, 80%); margin: 0 auto 0.9rem; }
.keu-donut-kanvas { position: relative; min-width: 0; }
.keu-donut-kanvas canvas { display: block; margin: 0 auto; }
.keu-donut-tengah {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; pointer-events: none; padding: 0 22%;
}
.keu-donut-label { font-size: 0.7rem; line-height: 1.25; color: var(--keu-teks-redup); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.keu-donut-angka { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.keu-donut-persen { font-size: 0.72rem; font-weight: 600; color: var(--keu-teks-redup); }
.keu-donut-petunjuk { margin-top: 0.7rem; font-size: 0.72rem; color: var(--keu-teks-redup); }
/* Menu "Lihat di: <area>" (Semua area) */
.keu-donut-menu {
    position: absolute; z-index: 20; width: 14rem; max-width: calc(100% - 0.5rem); padding: 0.4rem;
    background-color: var(--keu-kartu); border: 1px solid var(--keu-garis); border-radius: 14px; box-shadow: var(--keu-bayangan-naik);
}
.keu-donut-menu-judul { padding: 0.3rem 0.5rem 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--keu-teks-redup); }
.keu-donut-menu-item {
    display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.5rem; border-radius: 10px;
    font-size: 0.8rem; color: var(--keu-teks); text-decoration: none;
}
.keu-donut-menu-item:hover, .keu-donut-menu-item:focus-visible { background-color: var(--keu-hover); outline: none; }
.keu-donut-menu-nominal { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.keu-seg-1 { stroke: var(--keu-seg-1); background-color: var(--keu-seg-1); }
.keu-seg-2 { stroke: var(--keu-seg-2); background-color: var(--keu-seg-2); }
.keu-seg-3 { stroke: var(--keu-seg-3); background-color: var(--keu-seg-3); }
.keu-seg-4 { stroke: var(--keu-seg-4); background-color: var(--keu-seg-4); }
.keu-seg-5 { stroke: var(--keu-seg-5); background-color: var(--keu-seg-5); }
.keu-seg-lain { stroke: var(--keu-seg-lain); background-color: var(--keu-seg-lain); }
.keu-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.8rem; }
/* Item legenda = tombol (fi-link) dua baris: titik · label (1 baris elipsis) · persen, lalu nominal di bawah label.
   Sorot → latar lembut; disembunyikan → pudar + coret. */
html .fi-body .keu-legenda .keu-legenda-tombol { display: block; width: 100%; padding: 0.3rem 0.45rem; border-radius: 10px; text-align: start; }
html .fi-body .keu-legenda .keu-legenda-tombol > span {
    display: grid; grid-template-columns: 0.65rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.55rem; row-gap: 0.05rem;
    font-size: 0.8rem; font-weight: 400; text-decoration: none;
}
.keu-legenda-tombol .keu-legenda-nominal { grid-column: 2 / 4; font-size: 0.75rem; font-weight: 500; color: var(--keu-teks-redup); }
.keu-legenda li.keu-legenda-aktif .keu-legenda-tombol,
html .fi-body .keu-legenda .keu-legenda-tombol:hover { background-color: var(--keu-hover); }
.keu-legenda li.keu-legenda-mati .keu-legenda-tombol { opacity: 0.45; }
.keu-legenda li.keu-legenda-mati .keu-legenda-label { text-decoration: line-through; }
.keu-legenda { gap: 0.15rem; }
.keu-titik { width: 0.65rem; height: 0.65rem; border-radius: 9999px; }
.keu-legenda-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keu-legenda-nominal { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.keu-legenda-persen { text-align: right; color: var(--keu-teks-redup); font-variant-numeric: tabular-nums; }
/* Aktivitas terbaru */
.keu-aktivitas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.keu-aktivitas-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0.5rem; border-radius: 14px; }
.keu-aktivitas-item:hover { background: var(--keu-hover); }
.keu-aktivitas-ikon { flex: none; display: inline-flex; width: 2.1rem; height: 2.1rem; border-radius: 9999px; align-items: center; justify-content: center; }
.keu-aktivitas-mrx { background: rgba(3, 125, 200, 0.12); color: var(--keu-biru); }
.keu-aktivitas-flag { background: var(--keu-merah-latar); color: var(--keu-merah); }
.keu-aktivitas-import { background: rgba(212, 152, 33, 0.16); color: #a16207; }
.dark .keu-aktivitas-mrx { background: rgba(3, 125, 200, 0.22); color: var(--keu-biru-terang); }
.dark .keu-aktivitas-import { background: rgba(212, 152, 33, 0.2); color: var(--keu-emas-terang); }
.keu-aktivitas-isi { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--keu-teks); }
.keu-aktivitas-judul b { font-weight: 600; }
.keu-aktivitas-detail { font-size: 0.76rem; color: var(--keu-teks-redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keu-aktivitas-waktu { margin-top: 0.1rem; font-size: 0.7rem; color: var(--keu-teks-redup); }
.keu-aktivitas-nominal { font-size: 0.82rem; font-weight: 700; white-space: nowrap; color: var(--keu-teks); font-variant-numeric: tabular-nums; }
/* Kartu cincin umur Mr. X */
.keu-cincin-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.keu-cincin-kartu { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border-radius: 16px; background: var(--keu-kartu-2); box-shadow: inset 0 0 0 1px var(--keu-garis); }
.keu-cincin-wadah { position: relative; flex: none; width: 4.25rem; height: 4.25rem; }
.keu-cincin { width: 100%; height: 100%; }
.keu-cincin circle { fill: none; stroke-width: 4.5; }
.keu-cincin-latar { stroke: var(--keu-garis); }
.keu-cincin-isi { stroke: currentColor; stroke-linecap: round; }
.keu-umur-1 { color: var(--keu-umur-1); }
.keu-umur-2 { color: var(--keu-umur-2); }
.keu-umur-3 { color: var(--keu-umur-3); }
.keu-umur-4 { color: var(--keu-umur-4); }
.keu-cincin-persen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--keu-teks); }
.keu-cincin-teks { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; color: var(--keu-teks); }
.keu-cincin-label { font-size: 0.75rem; color: var(--keu-teks-redup); }
.keu-cincin-angka { font-size: 1.05rem; font-weight: 700; }
.keu-cincin-nominal { font-size: 0.75rem; color: var(--keu-teks-redup); white-space: nowrap; }

/* --- Halaman login: logo besar sesuai mode, latar gradasi halus --- */
html .fi-body .fi-simple-layout {
    background: radial-gradient(55% 45% at 12% 8%, rgba(3, 125, 200, 0.14), rgba(3, 125, 200, 0) 70%),
        radial-gradient(50% 45% at 92% 92%, rgba(212, 152, 33, 0.14), rgba(212, 152, 33, 0) 70%),
        var(--keu-latar);
}
.dark .fi-body .fi-simple-layout {
    background: radial-gradient(55% 45% at 12% 8%, rgba(3, 125, 200, 0.22), rgba(3, 125, 200, 0) 70%),
        radial-gradient(50% 45% at 92% 92%, rgba(212, 152, 33, 0.1), rgba(212, 152, 33, 0) 70%),
        var(--keu-latar);
}
html .fi-body .fi-simple-main { background-color: var(--keu-kartu); box-shadow: var(--keu-bayangan-naik); }
@media (min-width: 640px) { html .fi-body .fi-simple-main { border-radius: 24px; } }
.fi-simple-layout .fi-logo { height: auto !important; }
.fi-simple-layout .keu-brand-ringkas { display: none; }
.fi-simple-layout .keu-brand-lengkap { display: block; }

/* ===================================================================================================
   Tahap desain lanjutan: bahasa manusia di riwayat, responsif (kartu HP), gerak. Semua gerak hormati
   prefers-reduced-motion; durasi ≤ 400ms (kecuali count-up 600ms di keuangan.js).
   =================================================================================================== */

/* Riwayat: badge nama log berlabel ("Mr. X", "Transaksi", …) */
.keu-badge-log { margin-inline-end: 0.25rem; background-color: var(--keu-tint-navy-kuat); color: var(--keu-teks); }
/* "Lihat detail (n)" di baris aksi Riwayat Mr. X & Log Aktivitas (details/summary bawaan, tanpa JS) */
.keu-detail { margin-top: 0.3rem; }
.keu-detail > summary { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; list-style: none; font-size: 0.75rem; font-weight: 600; color: var(--keu-tautan); }
.keu-detail > summary::-webkit-details-marker { display: none; }
.keu-detail > summary::before { content: '▸'; transition: transform 0.15s ease; }
.keu-detail[open] > summary::before { transform: rotate(90deg); }
.keu-detail[open] > summary { margin-bottom: 0.2rem; }

/* Topbar 375px: icon-button Filament bermargin negatif → tombol bulat menempel; jarak antar tombol jadi ≥ 8px */
html .fi-body .fi-topbar .fi-icon-btn { margin: 0; }

/* Kartu di HP (<768px), CSS saja: tabel yang selnya ditandai keu-k-* (Transaksi, Mr. X, Riwayat Import).
   Baris 1 tanggal + nominal tebal, baris 2 uraian (maks. 2 baris), baris 3 badge/info berlabel, lalu tombol aksi. */
@media (max-width: 767px) {
    html .fi-body .fi-ta-table:has(td.keu-k-uraian),
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) > tbody { display: block; width: 100%; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) > thead { display: none; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row {
        display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--keu-garis);
    }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td { display: none; padding: 0; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td:is(.keu-k-tanggal, .keu-k-nominal, .keu-k-uraian, .keu-k-info, .fi-ta-actions-cell) { display: block; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td .fi-ta-text,
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td .fi-ta-col-wrp > a,
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td.fi-ta-actions-cell > div { padding: 0; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td.keu-k-tanggal { order: 1; flex: 1 1 auto; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) td.keu-k-tanggal .fi-ta-text-item-label { font-size: 0.8rem; color: var(--keu-teks-redup); }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td.keu-k-nominal { order: 2; display: flex; align-items: baseline; gap: 0.25rem; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) td.keu-k-nominal .fi-ta-text-item-label { font-size: 1rem; font-weight: 700; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) td.keu-k-nominal[data-akhiran]::after { content: attr(data-akhiran); font-size: 0.78rem; color: var(--keu-teks-redup); }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td.keu-k-uraian { order: 3; flex: 1 1 100%; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td.keu-k-info { order: 4; display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) td.keu-k-info[data-label]::before { content: attr(data-label) ':'; color: var(--keu-teks-redup); }
    /* Info kosong (tanpa teks/badge, atau hanya placeholder "—") tidak ditampilkan di kartu */
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td.keu-k-info:not(:has(.fi-ta-text-item-label, .fi-badge)),
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td.keu-k-info:has(.fi-ta-placeholder) { display: none; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) .fi-ta-row > td.fi-ta-actions-cell { order: 5; margin-inline-start: auto; }
}

/* Layar sedang (<1024px): uraian boleh lebih sempit; Riwayat Mr. X bertumpuk (waktu · oleh · aksi, keterangan, perubahan)
   supaya kolom perubahan tidak terpotong di tepi tabel */
@media (max-width: 1023px) {
    html .fi-body th.keu-kolom-uraian { min-width: 14rem; } /* 14rem: tabel Transaksi muat tanpa geser di 768px */
    .keu-riwayat thead { display: none; }
    .keu-riwayat, .keu-riwayat tbody, .keu-riwayat tr { display: block; width: 100%; }
    .keu-riwayat tr { padding: 0.75rem 0; border-bottom: 1px solid var(--keu-garis); }
    .keu-riwayat tr > td { display: block; min-width: 0; padding: 0.1rem 0; border: 0; }
    .keu-riwayat tr > td:nth-child(-n + 3) { display: inline-block; margin-inline-end: 0.6rem; }
    .keu-riwayat tr > td:nth-child(1) { color: var(--keu-teks-redup); }
    .keu-riwayat tr > td:nth-child(4) { color: var(--keu-teks-redup); }
    .keu-riwayat tr > td:nth-child(5) { margin-top: 0.25rem; }
}

/* Baris tabel: sorotan lembut saat kursor di atasnya (tabel Filament & tabel laporan) */
html .fi-body .fi-ta-row:hover,
.keu-tabel tbody tr:hover > td { background-image: linear-gradient(var(--keu-hover), var(--keu-hover)); }

/* Tombol/pil/tab: efek tekan */
html .fi-body .fi-btn,
html .fi-body .fi-icon-btn,
html .fi-body .fi-tabs-item,
.keu-pil,
.keu-kartu-ai-tombol { transition: transform 0.1s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
html .fi-body .fi-btn:active,
html .fi-body .fi-icon-btn:active,
html .fi-body .fi-tabs-item:active,
.keu-pil:active,
.keu-kartu-ai-tombol:active { transform: scale(0.97); }

/* Bilah progres navigasi Livewire = biru KSI */
html:root { --livewire-progress-bar-color: #037dc8; }

/* Skeleton: widget dashboard selama bulan acuan diganti, wadah grafik sebelum Chart.js menggambar */
.keu-memuat .fi-wi > * { position: relative; pointer-events: none; }
.keu-memuat .fi-wi > *::after {
    content: ''; position: absolute; inset: 0; border-radius: var(--keu-radius);
    background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%); background-size: 200% 100%;
}
.dark .keu-memuat .fi-wi > *::after { background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.07) 50%, transparent 80%); }
.keu-grafik-wadah:has(> canvas:not([style*="box-sizing"])) {
    min-height: 16rem; border-radius: 14px;
    background-image: linear-gradient(90deg, var(--keu-kartu-2) 30%, var(--keu-garis) 50%, var(--keu-kartu-2) 70%); background-size: 200% 100%;
}

@keyframes keu-muncul { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes keu-pudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes keu-sapu { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes keu-busur { from { stroke-dasharray: 0 100; } }
@keyframes keu-naik { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes keu-kilau { from { background-position: 150% 0; } to { background-position: -50% 0; } }

@media (prefers-reduced-motion: no-preference) {
    /* Navigasi (termasuk SPA): konten utama memudar masuk */
    html .fi-body .fi-main { animation: keu-pudar 0.2s ease-out backwards; }
    /* Kartu dashboard muncul bergiliran (fade + naik 8px, jeda 60ms); "backwards" supaya hover naik 2px tetap jalan setelahnya */
    .fi-dashboard-page .fi-wi > *,
    .keu-baris-atas > * { animation: keu-muncul 0.35s ease-out backwards; }
    .fi-dashboard-page .fi-wi > *:nth-child(2), .keu-baris-atas > *:nth-child(2) { animation-delay: 60ms; }
    .fi-dashboard-page .fi-wi > *:nth-child(3), .keu-baris-atas > *:nth-child(3) { animation-delay: 120ms; }
    .fi-dashboard-page .fi-wi > *:nth-child(4), .keu-baris-atas > *:nth-child(4) { animation-delay: 180ms; }
    .fi-dashboard-page .fi-wi > *:nth-child(5), .keu-baris-atas > *:nth-child(5) { animation-delay: 240ms; }
    .fi-dashboard-page .fi-wi > *:nth-child(6) { animation-delay: 300ms; }
    .fi-dashboard-page .fi-wi > *:nth-child(7) { animation-delay: 360ms; }
    .fi-dashboard-page .fi-wi > *:nth-child(n + 8) { animation-delay: 420ms; }
    /* Sparkline tersapu kiri→kanan; cincin umur tumbuh dari 0 (donut pengeluaran = animasi Chart.js) */
    .keu-spark { animation: keu-sapu 0.4s ease-out 0.15s backwards; }
    .keu-cincin-isi { animation: keu-busur 0.4s ease-out 0.1s backwards; }
    /* Modal meluncur naik (notifikasi Filament sudah meluncur dari samping bawaan) */
    html .fi-body .fi-modal-window { animation: keu-naik 0.25s ease-out; }
    /* Skeleton berkilau */
    .keu-memuat .fi-wi > *::after,
    .keu-grafik-wadah:has(> canvas:not([style*="box-sizing"])) { animation: keu-kilau 1.2s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
    html .fi-body .fi-btn:active,
    html .fi-body .fi-icon-btn:active,
    html .fi-body .fi-tabs-item:active,
    .keu-pil:active,
    .keu-kartu-ai-tombol:active { transform: none; }
}

/* ===== Asisten Bantuan (SPEC §7.1): gelembung kanan bawah + panel chat; layar penuh di HP (<768px) ===== */
.keu-asisten [x-cloak] { display: none !important; }
/* Konten halaman boleh digulir melewati gelembung (paginasi tabel tidak tertutup) */
html .fi-body .fi-main { padding-bottom: 5.5rem; }

html .fi-body .keu-asisten-gelembung {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 25;
    width: 3.5rem; height: 3.5rem; padding: 0; border-radius: 9999px;
    background-color: var(--keu-navy);
    background-image: linear-gradient(135deg, var(--keu-navy) 0%, var(--keu-biru) 100%);
    box-shadow: 0 0 0 3px var(--keu-kartu), var(--keu-bayangan-naik);
}
html .fi-body .keu-asisten-gelembung:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--keu-kartu), 0 18px 36px rgba(6, 38, 87, 0.28); }
html .fi-body .keu-asisten-gelembung:focus-visible { outline: 3px solid var(--keu-emas); outline-offset: 3px; }
.keu-asisten-logo {
    width: 2.25rem; height: 2.25rem; padding: 0.25rem; border-radius: 9999px; background-color: #ffffff;
    object-fit: contain; display: block;
}

.keu-asisten-panel {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 25;
    width: min(24rem, calc(100vw - 2rem)); height: min(38rem, calc(100dvh - 6rem));
    display: flex; flex-direction: column; overflow: hidden;
    background-color: var(--keu-kartu); color: var(--keu-teks);
    border: 1px solid var(--keu-garis); border-radius: var(--keu-radius); box-shadow: var(--keu-bayangan-naik);
    transform-origin: bottom right;
}
.keu-asisten-kepala {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0.75rem 0.85rem 1rem; color: #ffffff;
    background-color: var(--keu-navy); background-image: linear-gradient(135deg, var(--keu-navy) 0%, var(--keu-biru) 100%);
}
.keu-asisten-kepala-logo { width: 2.25rem; height: 2.25rem; padding: 0.25rem; border-radius: 9999px; background-color: #ffffff; flex: none; object-fit: contain; }
.keu-asisten-kepala-teks { flex: 1; min-width: 0; }
.keu-asisten-judul { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.keu-asisten-sub { font-size: 0.75rem; opacity: 0.85; line-height: 1.3; }
html .fi-body .keu-asisten-kepala .fi-icon-btn { color: rgba(255, 255, 255, 0.85); }
html .fi-body .keu-asisten-kepala .fi-icon-btn:hover,
html .fi-body .keu-asisten-kepala .fi-icon-btn:focus-visible { color: #ffffff; background-color: rgba(255, 255, 255, 0.14); }

.keu-asisten-isi {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; background-color: var(--keu-latar);
}
.keu-asisten-pesan {
    max-width: 88%; padding: 0.6rem 0.85rem; border-radius: 16px; font-size: 0.875rem; line-height: 1.5;
    overflow-wrap: break-word; word-break: normal;
}
.keu-asisten-dari-asisten {
    align-self: flex-start; background-color: var(--keu-kartu); color: var(--keu-teks);
    border: 1px solid var(--keu-garis); border-bottom-left-radius: 4px;
}
.keu-asisten-dari-user {
    align-self: flex-end; background-color: var(--keu-biru); color: #ffffff; border-bottom-right-radius: 4px; white-space: pre-wrap;
}
.keu-asisten-pesan p + p, .keu-asisten-pesan p + ol, .keu-asisten-pesan p + ul,
.keu-asisten-pesan ol + p, .keu-asisten-pesan ul + p { margin-top: 0.45rem; }
.keu-asisten-pesan ol { list-style: decimal; padding-inline-start: 1.25rem; }
.keu-asisten-pesan ul { list-style: disc; padding-inline-start: 1.25rem; }
.keu-asisten-pesan li + li { margin-top: 0.2rem; }
.keu-asisten-pesan strong { font-weight: 600; }
.keu-asisten-gagal { border-color: var(--keu-merah); }
.keu-asisten-info { border-color: var(--keu-emas); }
.keu-asisten-menu { margin-top: 0.6rem; }
html .fi-body .keu-asisten-menu .fi-btn { max-width: 100%; white-space: normal; text-align: start; }
.keu-asisten-tertunda { display: flex; flex-direction: column; gap: 0.6rem; }

.keu-asisten-contoh { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; }
html .fi-body .keu-asisten-contoh-tombol { max-width: 100%; white-space: normal; text-align: start; justify-content: flex-start; }

/* "Sedang mengetik": tiga titik */
.keu-asisten-mengetik { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.8rem 0.95rem; }
.keu-asisten-mengetik span { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background-color: var(--keu-teks-redup); opacity: 0.6; }

.keu-asisten-form {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.75rem 0.4rem 1rem;
    border-top: 1px solid var(--keu-garis); background-color: var(--keu-kartu);
}
.keu-asisten-isian { flex: 1; min-width: 0; }
.keu-asisten-kaki { padding: 0 1rem 0.7rem; font-size: 0.72rem; line-height: 1.35; color: var(--keu-teks-redup); text-align: center; background-color: var(--keu-kartu); }

/* Transisi panel (Alpine x-transition): naik 12px + pudar, ≤ 200ms */
.keu-asisten-trans { transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.keu-asisten-awal { opacity: 0; transform: translateY(12px) scale(0.98); }
.keu-asisten-akhir { opacity: 1; transform: none; }

@keyframes keu-ketik { 0%, 80%, 100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    html .fi-body .keu-asisten-gelembung { animation: keu-naik 0.35s ease-out backwards; }
    .keu-asisten-mengetik span { animation: keu-ketik 1s ease-in-out infinite; }
    .keu-asisten-mengetik span:nth-child(2) { animation-delay: 0.15s; }
    .keu-asisten-mengetik span:nth-child(3) { animation-delay: 0.3s; }
    .keu-asisten-pesan { animation: keu-muncul 0.25s ease-out backwards; }
}
@media (prefers-reduced-motion: reduce) {
    .keu-asisten-trans { transition: none; }
    html .fi-body .keu-asisten-gelembung:hover { transform: none; }
}

/* HP: panel layar penuh, gelembung sedikit lebih kecil */
@media (max-width: 767px) {
    html .fi-body .keu-asisten-gelembung { right: 1rem; bottom: 1rem; width: 3.25rem; height: 3.25rem; }
    .keu-asisten-panel { inset: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; }
    .keu-asisten-pesan { max-width: 92%; }
    .keu-asisten-form { padding-bottom: max(0.4rem, env(safe-area-inset-bottom)); }
}

/* ===== Tabel nyaman: tinggi maks. sebatas layar (gulir sendiri, penggeser horizontal selalu terlihat), header menempel,
   kolom pertama menempel saat digeser, baris total terakhir menempel di bawah; penggeser tambahan di atas (keuangan.js).
   Sel yang menempel wajib berlatar tak tembus pandang: warna baris (grup/total/Mr. X/hover) ditumpuk sebagai background-image. ===== */
.keu-tabel-scroll,
html .fi-body .fi-ta-content { max-height: calc(100dvh - 9rem); overflow: auto; overscroll-behavior-x: contain; }
.fi-modal .keu-tabel-scroll { max-height: 60vh; }
.keu-tabel-scroll > table > thead,
html .fi-body .fi-ta-content > .fi-ta-table > thead { position: sticky; top: 0; z-index: 3; }
.keu-tabel-scroll > table > thead th { background-color: var(--keu-kartu-2); }
html .fi-body .fi-ta-content > .fi-ta-table > thead th { background-color: var(--keu-kartu-2); box-shadow: inset 0 -1px 0 var(--keu-garis); }
.keu-tabel-scroll > table > :is(thead, tbody) > tr > :first-child,
html .fi-body .fi-ta-content > .fi-ta-table > :is(thead, tbody) > tr > :first-child { position: sticky; left: 0; z-index: 2; box-shadow: inset -1px 0 0 var(--keu-garis); }
.keu-tabel-scroll > table > tbody > tr > :first-child,
html .fi-body .fi-ta-content > .fi-ta-table > tbody > tr > :first-child { background-color: var(--keu-kartu); }
.keu-tabel-scroll > table > thead > tr > :first-child,
html .fi-body .fi-ta-content > .fi-ta-table > thead > tr > :first-child { z-index: 4; background-color: var(--keu-kartu-2); }
/* Warna baris pada sel pertama yang menempel */
.keu-tabel-scroll tr.keu-grup > td:first-child,
.keu-tabel-scroll tr.keu-resume-l1 > td:first-child { background-image: linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)); }
.dark .keu-tabel-scroll tr.keu-grup > td:first-child,
.dark .keu-tabel-scroll tr.keu-resume-l1 > td:first-child { background-image: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)); }
.keu-tabel-scroll tr.keu-subtotal > td:first-child { background-image: linear-gradient(var(--keu-tint-navy), var(--keu-tint-navy)); }
.keu-tabel-scroll tr.keu-total > td:first-child { background-image: linear-gradient(var(--keu-tint-navy-kuat), var(--keu-tint-navy-kuat)); }
.keu-tabel-scroll tr.keu-baris-belum > td:first-child { background-image: linear-gradient(var(--keu-oranye-latar), var(--keu-oranye-latar)); }
.keu-tabel-scroll tr.keu-mrx > td:first-child,
html .fi-body .fi-ta-content .fi-ta-row.keu-mrx > td:first-child { background-image: linear-gradient(var(--keu-mrx-latar), var(--keu-mrx-latar)); }
.keu-tabel-scroll tbody tr:hover > td:first-child,
html .fi-body .fi-ta-content .fi-ta-row:hover > td:first-child { background-image: linear-gradient(var(--keu-hover), var(--keu-hover)); }
/* Baris total terakhir menempel di bawah wadah */
.keu-tabel-scroll > table > tbody > tr.keu-total:last-child > td {
    position: sticky; bottom: 0; z-index: 2; background-color: var(--keu-kartu);
    background-image: linear-gradient(var(--keu-tint-navy-kuat), var(--keu-tint-navy-kuat)); box-shadow: inset 0 1px 0 var(--keu-garis);
}
.keu-tabel-scroll > table > tbody > tr.keu-total:last-child > td:first-child { z-index: 3; }
/* Penggeser horizontal di atas tabel (dibuat keuangan.js, disembunyikan bila tabel muat) */
.keu-gulir-atas { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.keu-gulir-atas > div { height: 1px; }
.keu-gulir-atas[hidden] { display: none; }
.keu-tabel-scroll,
html .fi-body .fi-ta-content { scrollbar-width: thin; }

/* HP (<768px): tabel Filament berkartu tetap kartu (tanpa tinggi maks./menempel); tabel lebar (Resume) tetap bisa digeser,
   kolom label menempel tetapi dipersempit supaya ada ruang untuk angka */
@media (max-width: 767px) {
    html .fi-body .fi-ta-content:has(td.keu-k-uraian) { max-height: none; }
    html .fi-body .fi-ta-table:has(td.keu-k-uraian) :is(thead, th, td) { position: static; box-shadow: none; }
    html .fi-body .fi-ta-content .fi-ta-table:has(td.keu-k-uraian) > tbody > tr > td:first-child { background-color: transparent; background-image: none; }
    .keu-resume .keu-resume-label { min-width: 9.5rem; max-width: 11rem; white-space: normal; }
}

/* ===== Halaman masuk: Google = tombol utama paling atas, sandi = cadangan di bawah pemisah ===== */
.keu-masuk-google { display: flex; flex-direction: column; gap: 0.6rem; }
html .fi-body .keu-tombol-google { width: 100%; justify-content: center; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.keu-tombol-google-isi { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; font-weight: 600; }
.keu-logo-google { width: 1.35rem; height: 1.35rem; flex: none; }
.keu-masuk-catatan { margin: 0; font-size: 0.8rem; line-height: 1.45; text-align: center; color: var(--keu-teks-redup); }
.keu-masuk-pemisah { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0.25rem; font-size: 0.78rem; color: var(--keu-teks-redup); }
.keu-masuk-pemisah::before, .keu-masuk-pemisah::after { content: ''; flex: 1; height: 1px; background-color: var(--keu-garis); }
.keu-masuk-pemisah > span { white-space: nowrap; }
.keu-masuk-pesan {
    padding: 0.7rem 0.9rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.45;
    background-color: var(--keu-merah-latar); color: var(--keu-merah); border: 1px solid color-mix(in srgb, var(--keu-merah) 30%, transparent);
}