/* =========================================================
   Aluvia Theme — keuangan.discoveryaluvia.org
   Lapisan tampilan di atas Tabler + guest.css.
   Token sama dengan discoveryaluvia.org: paper, toska, lime,
   garis tebal 2px, bayangan toska, Bricolage + Plus Jakarta + JetBrains Mono.
   Hapus <link> file ini di layouts/guest.blade.php untuk kembali ke tampilan lama.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");

:root{
  --al-paper:#ffffff; --al-tint:#eef8f6; --al-ink:#0a1f2a; --al-muted:#4d6670; --al-line:#d7e6e3;
  --al-toska:#00a396; --al-toska-strong:#008a7f; --al-toska-soft:#d2f1ec;
  --al-lime:#d4ff3a; --al-sun:#ffc93c; --al-coral:#e8435f; --al-coral-soft:#ffe3e8; --al-sky:#0b84b8; --al-sky-soft:#dff3fb;
  --al-display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  --al-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --al-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --tblr-font-sans-serif:var(--al-body);
  --tblr-body-font-family:var(--al-body);
  --tblr-primary:#00a396; --tblr-primary-rgb:0,163,150;
  --tblr-teal:#00a396; --tblr-teal-rgb:0,163,150;
  --tblr-body-color:#0a1f2a; --tblr-border-radius:14px;
}

/* ---------- Dasar ---------- */
body{font-family:var(--al-body)!important;color:var(--al-ink);background:var(--al-paper)!important;-webkit-font-smoothing:antialiased;letter-spacing:0}
.bg-white{background:var(--al-paper)!important}
.text-dark{color:var(--al-ink)!important}
.text-black-50{color:var(--al-muted)!important}
a{color:var(--al-toska-strong)}
::selection{background:var(--al-lime);color:var(--al-ink)}
.fw-bold,.fw-bolder,h1,h2,h3,.fs-1,.fs-2{font-family:var(--al-display);letter-spacing:-.02em}

/* ---------- Navigasi atas ---------- */
.nav-public{
  height:72px!important;padding:0 max(24px,calc((100vw - 1140px)/2))!important;
  background:rgba(255,255,255,.88)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid var(--al-line)!important;box-shadow:none!important;position:sticky!important;top:0;z-index:1030}
.nav-public>a:first-child{font-family:var(--al-display);font-weight:800;font-size:20px;color:var(--al-ink)!important;text-decoration:none;display:flex;align-items:center;gap:10px}
.nav-public>a:first-child::before{content:"DA";display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--al-toska);color:#fff;font-size:14px;border:2px solid var(--al-ink);box-shadow:3px 3px 0 var(--al-lime)}
.nav-desktop{background:transparent!important;box-shadow:none!important;border:0!important;position:static!important;transform:none!important;margin:0!important}
.nav-desktop .nav{gap:4px;flex-wrap:nowrap}
.nav-desktop .nav-item{padding:0!important}
.nav-desktop .nav-link{font-weight:600;font-size:15px;color:var(--al-muted)!important;padding:8px 16px!important;border-radius:999px;transition:background .15s,color .15s}
.nav-desktop .nav-link:hover{color:var(--al-ink)!important;background:var(--al-tint)}
.nav-desktop .nav-link.active,.nav-desktop .nav-link[aria-current]{color:var(--al-ink)!important;background:var(--al-toska-soft)}
.nav-public .text-end a{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;border-radius:999px;background:var(--al-ink);color:var(--al-lime)!important;font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s}
.nav-public .text-end a:hover{transform:translateY(-1px)}

/* Navigasi HP */
.d-sm-none>.row{align-items:center;border-bottom:2px solid var(--al-line)}
.d-sm-none>.row a{font-family:var(--al-display);font-weight:800;font-size:18px;color:var(--al-ink)!important;text-decoration:none}
.d-sm-none .btn{width:44px;height:44px;padding:0;border:2px solid var(--al-ink)!important;border-radius:12px;background:transparent!important;color:var(--al-ink)!important}
.offcanvas{border-right:2px solid var(--al-ink)!important}
.sidebar-menu ul{padding:0;list-style:none}
.sidebar-menu li{border-color:var(--al-line)!important}
.sidebar-menu a{font-family:var(--al-display);font-weight:800;color:var(--al-ink)!important;text-decoration:none}

/* ---------- Hero ---------- */
.section-hero{padding-top:40px!important;padding-bottom:96px!important}
.home-bottom{top:-56px!important}
.section-hero .fs-1{font-size:clamp(40px,5.6vw,68px)!important;font-weight:800!important;line-height:1.02!important;letter-spacing:-.03em;color:var(--al-ink)!important}
.section-hero .fs-5{font-size:16px!important;color:var(--al-muted)!important;line-height:1.6}
.section-hero img{border-radius:16px}

/* ---------- Area bawah (abu-abu → tint toska) ---------- */
.section-bottom{background:var(--al-tint)!important;border-top:2px solid var(--al-line)}
.section-bottom .fs-4,.section-bottom .fs-3{font-family:var(--al-display);font-weight:800!important;letter-spacing:-.02em;color:var(--al-ink)}
.badge.bg-cyan-lt,.badge.bg-light{background:var(--al-lime)!important;color:var(--al-ink)!important;border:2px solid var(--al-ink);border-radius:999px;font-family:var(--al-mono);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px}

/* ---------- Kartu angka (Saldo awal / masuk / keluar / akhir) ---------- */
.el>.card{
  background:#fff!important;border:2px solid var(--al-ink)!important;border-radius:22px!important;
  box-shadow:6px 6px 0 var(--al-toska)!important;transition:transform .15s,box-shadow .15s;overflow:hidden}
.el>.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--al-toska)!important}
.el>.card .date{font-family:var(--al-mono);font-size:11px!important;color:var(--al-muted)!important}
.el>.card .fw-bolder,.el>.card h1,.el>.card .fs-1,.el>.card .fs-2{font-family:var(--al-display)!important;font-weight:800!important;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.el>.card>div:first-child,.el>.card .fs-3{font-family:var(--al-display)}
/* kartu Saldo Akhir: gelap, sebagai sorotan */
.el:last-child>.card{background:var(--al-ink)!important;color:#e6f2ef!important;box-shadow:6px 6px 0 var(--al-lime)!important}
.el:last-child>.card *{color:#e6f2ef}
.el:last-child>.card .bm-txt-netral,.el:last-child>.card .fw-bolder{color:var(--al-lime)!important}
.el:last-child>.card .date,.el:last-child>.card small{color:#9ab3b0!important}
.el:last-child>.card .bm-bg-netral-soft{background:rgba(212,255,58,.14)!important}
.el:last-child>.card .btn{border-color:var(--al-lime)!important;color:var(--al-lime)!important}

/* ---------- Warna angka ---------- */
.bm-txt-primary{color:var(--al-toska-strong)!important}
.bm-txt-out{color:var(--al-coral)!important}
.bm-txt-netral{color:var(--al-sky)!important}
.bm-txt-dark{color:var(--al-ink)!important}
.bm-bg-primary-soft{background:var(--al-toska-soft)!important;border-radius:14px!important}
.bm-bg-out-soft{background:var(--al-coral-soft)!important;border-radius:14px!important}
.bm-bg-netral-soft{background:var(--al-sky-soft)!important;border-radius:14px!important}

/* ---------- Tombol ---------- */
.btn{font-family:var(--al-body);font-weight:700;border-radius:999px!important;border-width:2px!important;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-teal,.bm-bg-primary,.btn.bm-bg-primary{background:var(--al-ink)!important;border-color:var(--al-ink)!important;color:var(--al-lime)!important}
.btn-teal .badge,.bm-bg-primary .badge{background:var(--al-lime)!important;color:var(--al-ink)!important;border:0}
.btn-outline-cyan,.btn-ghost-cyan,.bm-btn{background:transparent!important;border:2px solid var(--al-ink)!important;color:var(--al-ink)!important}
.btn-outline-cyan:hover,.btn-ghost-cyan:hover,.bm-btn:hover{background:var(--al-lime)!important}
.btn-teal.bm-btn,.bm-btn.bm-bg-primary{background:var(--al-ink)!important;border-color:var(--al-ink)!important;color:var(--al-lime)!important}
.btn-light{background:#fff!important;border:2px solid var(--al-line)!important;color:var(--al-ink)!important}
.btn-group>.btn{border-radius:12px!important}
.btn-group>.btn:not(:first-child){margin-left:6px}
.form-control,.form-select,select{border:2px solid var(--al-line)!important;border-radius:12px!important;font-weight:600;min-height:40px}
.form-control:focus,.form-select:focus{border-color:var(--al-toska)!important;box-shadow:0 0 0 3px rgba(0,163,150,.18)!important}

/* ---------- Tab laporan (Laporan / Per Bulan / Per Kategori / Rincian) ---------- */
.list-group-horizontal-md{gap:8px;flex-wrap:wrap}
.list-group-horizontal-md .list-group-item{
  flex:0 0 auto!important;width:auto!important;border:2px solid var(--al-ink)!important;border-radius:999px!important;margin:0!important;
  padding:8px 18px!important;background:transparent!important;color:var(--al-ink)!important;
  font-weight:600;font-size:14px;text-transform:none!important;letter-spacing:0}
.list-group-horizontal-md .list-group-item:hover{background:var(--al-lime)!important}
.list-group-horizontal-md .list-group-item.active,.list-group-horizontal-md .list-group-item.bg-teal,.list-group-horizontal-md .bg-teal{
  background:var(--al-toska)!important;border-color:var(--al-toska)!important;color:#fff!important}
.list-group-horizontal-md .list-group-item.bg-teal *{color:#fff!important}

/* ---------- Daftar transaksi per pekan ---------- */
.accordion-item{background:#fff!important;border:2px solid var(--al-line)!important;border-radius:18px!important;margin-bottom:12px;overflow:hidden}
.accordion-button{font-family:var(--al-display);font-weight:800;font-size:18px;letter-spacing:-.01em;background:#fff!important;color:var(--al-ink)!important;box-shadow:none!important}
.accordion-button:not(.collapsed){background:var(--al-tint)!important;border-bottom:2px dashed var(--al-line)}
.accordion-button::after{background-color:var(--al-tint);border-radius:8px;background-position:center;width:28px;height:28px;background-size:14px}
.accordion-body,.accordion-collapse{font-size:15px}
.accordion-body .row{border-bottom:1px dashed var(--al-line);padding-top:10px;padding-bottom:10px}
.accordion-body .row:last-child{border-bottom:0}
.accordion .small,.accordion small{font-family:var(--al-mono);color:var(--al-muted)}

/* ---------- Ringkasan & tabel ---------- */
.summary{font-variant-numeric:tabular-nums}
.summary hr,.section-bottom hr{border-top:2px dashed var(--al-line);opacity:1}
.table{--tblr-table-bg:transparent;font-variant-numeric:tabular-nums}
.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--al-muted);border-bottom:2px solid var(--al-ink)!important;background:transparent}
.table td{border-color:var(--al-line)!important}
.table td.text-end,.table th.text-end{font-family:var(--al-mono);font-weight:500}

/* Halaman program & kontak */
.card:not(.el){border:2px solid var(--al-line);border-radius:22px;box-shadow:none}
.card-img-top{border-radius:20px 20px 0 0}

/* Footer */
footer,.footer{background:var(--al-tint)!important;border-top:2px solid var(--al-line)!important;color:var(--al-muted)}

@media (max-width:575.98px){
  .el>.card{box-shadow:4px 4px 0 var(--al-toska)!important}
  .section-hero{padding-top:24px!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Rincian dalam pekan */
.accordion-item .border{border-color:var(--al-line)!important;border-radius:12px!important}