/* Keuangan Masjid NH — tema hijau & putih, mobile-first */
:root {
    /* Dua warna utama tema — satu-satunya yang perlu diganti untuk mengubah tema (lihat Pengaturan Tampilan).
       Semua warna hijau lain di bawah & variabel Bootstrap diturunkan dari sini. */
    --nh-green: #15803d;
    --nh-green-dark: #14532d;

    --nh-green-soft: color-mix(in srgb, var(--nh-green) 16%, #fff);   /* latar ikon/lencana hijau muda */
    --nh-green-light: color-mix(in srgb, var(--nh-green) 75%, #fff);  /* ujung terang gradasi */
    --nh-border: color-mix(in srgb, var(--nh-green) 18%, #fff);       /* garis kotak pilihan & isian */
    --nh-line: color-mix(in srgb, var(--nh-green) 9%, #fff);          /* garis pemisah tipis */
    --nh-track: color-mix(in srgb, var(--nh-green) 6%, #eef0ef);      /* jalur progress/bar kosong */
    --nh-bg: color-mix(in srgb, var(--nh-green) 4%, #fff);            /* latar halaman (hijau sangat muda) */
    --nh-ring: color-mix(in srgb, var(--nh-green) 25%, transparent);  /* cincin fokus */
    --nh-shadow: color-mix(in srgb, var(--nh-green-dark) 7%, transparent);
    --nh-shadow-kuat: color-mix(in srgb, var(--nh-green-dark) 14%, transparent);
    --nh-red: #b91c1c;
    --nh-red-soft: #fee2e2;
    --nh-text: #1f2937;
    --nh-muted: #6b7280;

    /* Bootstrap memakai hijau yang sama (bukan biru/hijau bawaannya). */
    --bs-primary: var(--nh-green);
    --bs-success: var(--nh-green);
    --bs-link-color: var(--nh-green);
    --bs-link-hover-color: var(--nh-green-dark);
    --bs-success-text-emphasis: var(--nh-green-dark);
    --bs-success-bg-subtle: var(--nh-green-soft);
    --bs-success-border-subtle: var(--nh-border);
    --bs-focus-ring-color: var(--nh-ring);
    --bs-body-color: var(--nh-text);
}

/* Komponen Bootstrap yang warnanya ditulis langsung (tidak lewat variabel di atas). */
.text-success, .link-success { color: var(--nh-green) !important; }
.link-success:hover { color: var(--nh-green-dark) !important; }
.bg-success, .progress-bar.bg-success { background-color: var(--nh-green) !important; }
.text-success-emphasis { color: var(--nh-green-dark) !important; }
.bg-success-subtle { background-color: var(--nh-green-soft) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--nh-green); box-shadow: 0 0 0 .2rem var(--nh-ring); }
.btn:focus-visible { box-shadow: 0 0 0 .2rem var(--nh-ring); }
.nav-pills .nav-link.active, .dropdown-item.active, .dropdown-item:active { background-color: var(--nh-green); }
.btn-outline-success { --bs-btn-color: var(--nh-green); --bs-btn-border-color: var(--nh-green); --bs-btn-hover-bg: var(--nh-green);
    --bs-btn-hover-border-color: var(--nh-green); --bs-btn-active-bg: var(--nh-green-dark); }
.text-bg-success { background-color: var(--nh-green) !important; }

body {
    font-family: 'Poppins', system-ui, sans-serif;
    background: var(--nh-bg);
    color: var(--nh-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* Navbar */
.app-navbar { background: linear-gradient(135deg, var(--nh-green-dark), var(--nh-green)); }
.app-navbar .nav-link { border-radius: .5rem; padding: .5rem .9rem; white-space: nowrap; }
.app-navbar .nav-link.active { background: rgba(255, 255, 255, .18); }
.app-navbar .user-chip { color: rgba(255, 255, 255, .9); }
.brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: #fff; color: var(--nh-green);
}

/* Kartu */
.card { border: 0; border-radius: 1rem; box-shadow: 0 2px 10px var(--nh-shadow); }
.page-title { font-weight: 700; color: var(--nh-green-dark); }

.stat-card { padding: 1.1rem 1.25rem; }
.stat-card .stat-label { font-size: .85rem; color: #6b7280; }
.stat-card .stat-value { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
@media (min-width: 576px) { .stat-card .stat-value { font-size: 1.35rem; } }
.stat-icon {
    width: 2.75rem; height: 2.75rem; border-radius: .8rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.stat-masuk .stat-icon { background: var(--nh-green-soft); color: var(--nh-green); }
.stat-keluar .stat-icon { background: var(--nh-red-soft); color: var(--nh-red); }
.stat-saldo { background: linear-gradient(135deg, var(--nh-green-dark), var(--nh-green)); color: #fff; }
.stat-saldo .stat-label { color: rgba(255, 255, 255, .8); }
.stat-saldo .stat-icon { background: rgba(255, 255, 255, .18); color: #fff; }

.stat-pengeluaran { border-left: 4px solid var(--nh-red); }
.stat-card .stat-value-lg { font-size: 1.6rem; }
@media (min-width: 576px) { .stat-card .stat-value-lg { font-size: 1.9rem; } }
.saldo-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
    padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .2);
}
.icon-naik { background: var(--nh-green-soft); color: var(--nh-green); }
.icon-turun { background: var(--nh-red-soft); color: var(--nh-red); }

.text-masuk { color: var(--nh-green); }
.text-keluar { color: var(--nh-red); }

/* Tombol & form */
.btn-nh { background: var(--nh-green); border-color: var(--nh-green); color: #fff; }
.btn-nh:hover, .btn-nh:focus { background: var(--nh-green-dark); border-color: var(--nh-green-dark); color: #fff; }
.form-select, .form-control, .btn { min-height: 44px; border-radius: .7rem; }

/* Pemilih periode & total per kategori */
.periode-picker .form-select { min-width: 0; }
.periode-picker .periode-tahun { max-width: 6.5rem; }
@media (min-width: 768px) { .periode-picker select[name="bulan"] { min-width: 9.5rem; } }
.chart-box { position: relative; height: 260px; }
@media (min-width: 768px) { .chart-box { height: 320px; } }
.kategori-link, .stat-link { color: inherit; text-decoration: none; }
.kategori-link:hover .kategori-bar { outline: 2px solid var(--nh-green-soft); }
.stat-link { transition: transform .15s, box-shadow .15s; }
.stat-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--nh-shadow-kuat); }

/* Panel rincian */
#rincian { scroll-margin-top: 5rem; }
.nav-rincian .nav-link { color: var(--nh-green-dark); border-radius: 2rem; padding: .35rem .9rem; white-space: nowrap; }
.nav-rincian .nav-link.active { background: var(--nh-green); color: #fff; }
.rincian-hero { background: var(--nh-bg); }
.rincian-dl dt { font-weight: 500; color: #6b7280; }
.kategori-bar { height: .5rem; border-radius: 1rem; background: var(--nh-track); }

/* Tabel transaksi */
.table-transaksi th { font-size: .8rem; text-transform: uppercase; color: #6b7280; white-space: nowrap; }
.table-transaksi td { vertical-align: middle; }
.row-rincian { cursor: pointer; }
.row-batal td { color: #9ca3af; text-decoration: line-through; }
.row-batal td .badge { text-decoration: none; }

/* Halaman pencatatan */
.btn-catat { border-radius: 1rem; font-weight: 600; }
.sumber-chip {
    display: flex; flex-direction: column; padding: .6rem .8rem;
    border-radius: .8rem; background: var(--nh-bg);
}
.min-w-0 { min-width: 0; }
.btn-sumber {
    border: 1.5px solid var(--nh-border); border-radius: .9rem; background: #fff;
    color: var(--nh-text); font-size: .85rem; padding: .7rem .4rem; line-height: 1.2;
}
.btn-sumber i { color: var(--nh-green); }
.btn-sumber:hover { border-color: var(--nh-green); background: var(--nh-bg); }
.btn-check:checked + .btn-sumber { background: var(--nh-green); border-color: var(--nh-green); color: #fff; }
.btn-check:checked + .btn-sumber i { color: #fff; }
.btn-check:focus-visible + .btn-sumber { box-shadow: 0 0 0 .2rem var(--nh-ring); }
.btn-kategori-keluar { border-color: #f5d0d0; }
.btn-kategori-keluar i { color: var(--nh-red); }
.btn-kategori-keluar:hover { border-color: var(--nh-red); background: #fff7f7; }
.btn-check:checked + .btn-kategori-keluar { background: var(--nh-red); border-color: var(--nh-red); }
.sumber-pilih.is-invalid .btn-sumber { border-color: var(--bs-danger); }
.item-catatan { cursor: pointer; }
.item-sorot { animation: sorot 2.5s ease-out 1; }
@keyframes sorot {
    0%, 40% { background: #fef9c3; box-shadow: inset 4px 0 0 #eab308; }
    100% { background: #fff; box-shadow: inset 4px 0 0 transparent; }
}

/* Tombol catat menempel di bawah layar HP */
@media (max-width: 767.98px) {
    .catat-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; margin: 0 !important;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        background: linear-gradient(to top, var(--nh-bg) 70%, transparent);
    }
    .catat-bar .btn-catat { box-shadow: 0 6px 18px color-mix(in srgb, var(--nh-green-dark) 30%, transparent); }
    body:has(.catat-bar) .app-footer { padding-bottom: 5.5rem !important; }
    .flash-alert { position: sticky; top: 4.25rem; z-index: 1010; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
}
/* Riwayat perubahan (audit trail) */
.riwayat-item { position: relative; padding: 0 0 .75rem 1.1rem; border-left: 2px solid var(--nh-border); margin-left: .3rem; }
.riwayat-item:last-child { padding-bottom: 0; }
.riwayat-item::before {
    content: ''; position: absolute; left: -.42rem; top: .3rem; width: .7rem; height: .7rem;
    border-radius: 50%; background: var(--nh-green);
}
.riwayat-koreksi::before { background: #eab308; }
.riwayat-batal::before { background: var(--nh-red); }
.dampak-batal { background: #fef2f2; border: 1px solid #fecaca; }
.alasan-box { background: #fffbeb; border: 1px solid #fde68a; }
.item-batal .fw-semibold, .item-batal .jumlah { color: #9ca3af !important; text-decoration: line-through; }

.app-footer { color: #6b7280; }

/* Donasi Saya (jamaah) */
.progress-donasi { height: .5rem; background: rgba(255, 255, 255, .25); border-radius: 1rem; }
.progress-donasi .progress-bar { background: #fff; border-radius: 1rem; }
.donasi-bulan { background: var(--nh-bg); letter-spacing: .03em; }
.legend-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; }
.bulan-angka { min-width: 7.5rem; }

/* Bilah tab bawah (jamaah, layar HP) */
.nav-bawah {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex;
    background: #fff; border-top: 1px solid var(--nh-line); box-shadow: 0 -4px 16px var(--nh-shadow);
    padding-bottom: env(safe-area-inset-bottom);
}
.nav-bawah a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .55rem 0 .5rem; min-height: 56px; color: #6b7280; text-decoration: none; font-size: .75rem;
}
.nav-bawah a i { font-size: 1.25rem; }
.nav-bawah a.active { color: var(--nh-green); font-weight: 600; }
@media (max-width: 991.98px) { body.ada-nav-bawah .app-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important; } }
.kartu-tautan { color: inherit; text-decoration: none; }
.kartu-tautan:hover { color: inherit; box-shadow: 0 6px 18px var(--nh-shadow-kuat); }

/* Angka rupiah ringkas di layar sangat sempit (lihat rupiah_html()) */
.angka-ringkas { display: none; }
@media (max-width: 399.98px) {
    .angka-penuh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .angka-ringkas { display: inline; }
}

/* Halaman masuk & daftar (tata letak polos) */
body.layout-polos { background: #fff; }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.auth-hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .14) 0 6rem, transparent 6.05rem),
        radial-gradient(circle at 90% 85%, rgba(255, 255, 255, .10) 0 9rem, transparent 9.05rem),
        linear-gradient(150deg, var(--nh-green-dark), var(--nh-green) 60%, var(--nh-green-light));
    padding: 2.5rem 1.5rem 5rem; text-align: center;
}
/* Motif bintang-bulan halus di latar */
.auth-hero::after {
    content: '\F495'; font-family: 'bootstrap-icons'; position: absolute; right: -1.5rem; bottom: -2.5rem;
    font-size: 11rem; color: rgba(255, 255, 255, .07); line-height: 1; pointer-events: none;
}
.auth-logo {
    display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
    border-radius: 1.25rem; background: #fff; color: var(--nh-green); font-size: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18); margin-bottom: 1rem;
}
.auth-judul { font-size: 1.6rem; font-weight: 700; margin-bottom: .35rem; }
.auth-tagline { opacity: .9; margin-bottom: 0; }
.auth-poin li { display: flex; gap: .75rem; align-items: center; margin-top: 1rem; text-align: left; opacity: .95; }
.auth-poin i {
    flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: inline-flex;
    align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); font-size: 1.1rem;
}
.auth-panel { flex: 1; padding: 0 1rem 2rem; margin-top: -3.5rem; position: relative; z-index: 1; }
.auth-kartu { max-width: 26rem; margin: 0 auto; border-radius: 1.5rem; box-shadow: 0 16px 40px var(--nh-shadow-kuat); }
.auth-kartu .form-control, .auth-kartu .input-group-text, .auth-kartu .btn-outline-secondary { border-color: var(--nh-border); }
.btn-lihat-sandi { border-color: var(--nh-border); color: #6b7280; }
.btn-lihat-sandi:hover, .btn-lihat-sandi[aria-pressed="true"] { background: var(--nh-bg); border-color: var(--nh-border); color: var(--nh-green); }
.auth-kartu .btn-outline-secondary { color: #6b7280; }
.auth-kartu .btn-outline-secondary:hover { background: var(--nh-bg); color: var(--nh-green); }
.auth-kartu .btn-lg { min-height: 52px; border-radius: .9rem; }
.form-check-input:checked { background-color: var(--nh-green); border-color: var(--nh-green); }
.auth-pemisah { display: flex; align-items: center; gap: .75rem; color: #9ca3af; font-size: .85rem; }
.auth-pemisah::before, .auth-pemisah::after { content: ''; flex: 1; height: 1px; background: var(--nh-line); }

@media (min-width: 992px) {
    .auth-wrap { flex-direction: row; }
    .auth-hero { flex: 0 0 46%; display: flex; align-items: center; justify-content: center; padding: 3rem; text-align: left; }
    .auth-hero-isi { max-width: 26rem; }
    .auth-judul { font-size: 2.2rem; }
    .auth-hero::after { font-size: 20rem; right: -3rem; bottom: -4rem; }
    .auth-panel { display: flex; flex-direction: column; justify-content: center; margin-top: 0; padding: 3rem 2rem; background: var(--nh-bg); }
    .auth-kartu { width: 100%; }
}
.kekuatan-bar { height: .35rem; border-radius: 1rem; background: var(--nh-track); overflow: hidden; }
.kekuatan-bar span { display: block; height: 100%; width: 0; border-radius: 1rem; transition: width .2s, background .2s; }
.kekuatan-sandi.lemah .kekuatan-bar span { width: 33%; background: var(--nh-red); }
.kekuatan-sandi.sedang .kekuatan-bar span { width: 66%; background: #eab308; }
.kekuatan-sandi.kuat .kekuatan-bar span { width: 100%; background: var(--nh-green); }
.kekuatan-sandi.lemah small { color: var(--nh-red) !important; }
.menu-akun { min-width: 15rem; border-radius: .9rem; }
.menu-akun .dropdown-item { padding: .6rem 1rem; }
.menu-akun .dropdown-item.active, .menu-akun .dropdown-item:active { background: var(--nh-green); color: #fff; }
.app-navbar .user-chip.dropdown-toggle::after { vertical-align: .15em; }

/* Halaman akses ditolak (401/403) */
.ditolak-ikon {
    display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem;
    border-radius: 1.4rem; font-size: 2.1rem; background: var(--nh-red-soft); color: var(--nh-red);
}
.ditolak-ikon.ditolak-masuk { background: var(--nh-green-soft); color: var(--nh-green); }
.ditolak-info { background: var(--nh-bg); border: 1px solid var(--nh-line); }

/* Donasi Saya: sambutan akun baru */
.langkah-donasi li { display: flex; gap: .9rem; align-items: flex-start; padding: .65rem 0; }
.langkah-donasi li > span {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; background: var(--nh-green); color: #fff; font-weight: 600; font-size: .9rem;
}

/* Pengaturan Masjid */
.profil-logo {
    display: inline-flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem;
    border-radius: 1.1rem; background: #fff; color: var(--nh-green); font-size: 1.8rem;
}
.kartu-tautan.stat-link { display: flex; flex-direction: column; }
.pratinjau-wrap { top: 5rem; }
.pratinjau-bar { background: linear-gradient(135deg, var(--nh-green-dark), var(--nh-green)); }
.pratinjau-ket { white-space: pre-line; background: var(--nh-bg); border-radius: .7rem; padding: .6rem .75rem; }
.daftar-perubahan li { padding: .6rem .75rem; border-radius: .7rem; background: var(--nh-bg); margin-bottom: .5rem; word-break: break-word; }
.daftar-perubahan li:last-child { margin-bottom: 0; }
/* Kelola Kategori: HP = tab, desktop = dua kolom berdampingan (kedua tab-pane selalu tampil). */
@media (min-width: 992px) { .kategori-grup > .tab-pane { display: block; opacity: 1; } }
.kategori-nonaktif .fw-semibold, .kategori-nonaktif .stat-icon { opacity: .55; }
.nav-rincian .nav-link:not(.active) .badge { background: var(--nh-green-soft) !important; }
.pilih-ikon { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .4rem; }
.pilih-ikon .btn-sumber { padding: .55rem 0; font-size: 1.15rem; min-height: 44px; }
.pilih-ikon.is-invalid .btn-sumber { border-color: var(--bs-danger); }

/* Pengaturan Tampilan: pilihan warna & pratinjau HP mini */
.pilih-warna { padding: .6rem .4rem .7rem; }
.contoh-warna { display: block; height: 2.2rem; border-radius: .6rem; }
.hp-pratinjau {
    width: 100%; max-width: 19rem; padding: .55rem; border-radius: 2rem; background: #1f2937;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18); font-size: .8rem;
}
.hp-pratinjau.teks-besar { font-size: .95rem; }
.hp-layar { border-radius: 1.5rem; overflow: hidden; background: var(--nh-bg); min-height: 22rem; }
.hp-nav { color: #fff; padding: .7rem .8rem; background: linear-gradient(135deg, var(--nh-green-dark), var(--nh-green)); }
.hp-nav .brand-icon { width: 1.6rem; height: 1.6rem; font-size: .8rem; color: var(--nh-green); }
.hp-isi { padding: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.hp-judul { font-weight: 700; font-size: 1.15em; color: var(--nh-green-dark); }
.hp-saldo { color: #fff; border-radius: .9rem; padding: .8rem; background: linear-gradient(135deg, var(--nh-green-dark), var(--nh-green)); }
.hp-angka { font-weight: 700; font-size: 1.4em; }
.hp-kecil { font-size: .85em; opacity: .75; }
.hp-baris { display: flex; align-items: center; gap: .55rem; background: #fff; border-radius: .8rem; padding: .55rem .6rem; }
.hp-baris .stat-icon { width: 2em; height: 2em; font-size: 1em; border-radius: .6rem; }
.hp-pratinjau .text-masuk { color: var(--nh-green); }
.hp-tombol { pointer-events: none; font-size: 1em; min-height: 0; padding: .55rem; border-radius: .8rem; }
.pilih-warna { position: relative; }
.btn-check:checked + .pilih-warna {
    background: #fff; color: var(--nh-text); border-color: var(--nh-green); border-width: 2px;
    box-shadow: 0 0 0 .2rem var(--nh-ring); font-weight: 600;
}
.btn-check:checked + .pilih-warna::after {
    content: '\F633'; font-family: 'bootstrap-icons'; position: absolute; top: .9rem; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 1.1rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Ukuran teks "Besar" dari Pengaturan Tampilan (seluruh aplikasi). */
html.teks-besar { font-size: 112.5%; }
.auth-masjid { margin-top: 1rem; display: inline-block; padding: .5rem .9rem; border-radius: .9rem; background: rgba(255, 255, 255, .14); }

/* Ikon tabungan (kartu Selisih di Riwayat Donasi Masjid): buku tabungan putih di gradasi tema + koin emas jatuh. */
.stat-card .ikon-tabungan {
    position: relative; overflow: visible; color: #fff;
    background: linear-gradient(135deg, var(--nh-green-light), var(--nh-green) 55%, var(--nh-green-dark));
    box-shadow: 0 6px 14px var(--nh-shadow-kuat), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ikon-tabungan .bi-journal-bookmark-fill { font-size: 1.25rem; }
.ikon-tabungan .koin-jatuh {
    position: absolute; top: -.45rem; right: -.35rem; font-size: .95rem; line-height: 1;
    color: #f59e0b; background: #fef3c7; border-radius: 50%; padding: .12rem;
    box-shadow: 0 2px 6px rgba(180, 83, 9, .35);
    animation: koin-jatuh 2.8s ease-in-out infinite;
}
@keyframes koin-jatuh {
    0%, 55% { transform: translateY(0) rotate(0); opacity: 1; }
    75% { transform: translate(-.55rem, .55rem) rotate(-20deg) scale(.7); opacity: 0; }
    76% { transform: translateY(-.4rem); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ikon-tabungan .koin-jatuh { animation: none; } }

/* Logo aplikasi (assets/img/logo-nh.png, lingkaran hijau): mengisi penuh wadah ikon yang ada. */
.logo-app { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.brand-icon:has(.logo-app) { background: #fff; padding: 1px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.auth-logo:has(.logo-app), .profil-logo:has(.logo-app) { border-radius: 50%; padding: .2rem; }
.auth-logo:has(.logo-app) { width: 5.5rem; height: 5.5rem; }