/* Tema buku catatan: nyaman dibaca seperti diary, rapi seperti buku besar akuntansi.
   Warna HANYA dari referensi: navy #0F1A29 · arang #36454F · teal #1B4F55 · abu #C2C9CC (plus tint/shade-nya).
   Satu-satunya warna di luar palet: merah bata redup untuk uang keluar/galat agar tetap jelas.
   Font: Source Serif 4 (judul, tanggal) · Source Sans 3 (isi, angka tabular) · IBM Plex Mono (teks asli bank). */
:root {
  --font: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --fs-xs: 12.5px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 19px; --fs-xl: 26px;
  --lh: 1.55;
  --r-sm: 5px; --r-md: 8px; --r-lg: 12px;
  --fill: #1B4F55; --on-fill: #E6EAEB;
  /* terang: abu #C2C9CC sebagai kertas, teks navy, aksen teal */
  --bg: #C2C9CC; --surface: #E3E7E8; --surface-sunk: #D2D8DA;
  --line: #AAB4B8; --line-strong: #7D8B92;
  --ink: #0F1A29; --ink-2: #36454F; --ink-3: #46555F;
  --accent: #1B4F55; --accent-bg: #B5C7C9; --on-accent: #E6EAEB;
  --blue-soft: #D2D8DA; --blue-line: #AAB4B8;
  --sun: #1B4F55; --sun-soft: #B5C7C9; --sun-ink: #0F1A29;
  --c-masuk: #1B4F55; --c-neg: #8E3B30; --c-masuk-bg: #B5C7C9; --c-neg-bg: #DCCBC8;
  --c-transfer: #1B4F55; --c-transfer-bg: #B5C7C9;
  --c-titipan: #36454F; --c-titipan-bg: #CBD1D4;
  --c-putuskan: #0F1A29; --c-putuskan-bg: #A9B4B8;
  --c-tabung: #1B4F55; --c-tabung-bg: #B5C7C9;
  --c-utang: #36454F; --c-utang-bg: #BFC7CA;
  --c-sementara: #46555F; --c-sementara-bg: #D2D8DA;
  --c-piutang: #1B4F55; --c-piutang-bg: #B5C7C9;
  --glow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* gelap: navy #0F1A29 sebagai halaman, arang untuk garis, abu untuk teks, teal sebagai isian */
:root[data-theme="dark"] {
  --bg: #0F1A29; --surface: #152231; --surface-sunk: #0B141F;
  --line: #2A3945; --line-strong: #36454F;
  --ink: #DDE2E3; --ink-2: #C2C9CC; --ink-3: #8F9CA4;
  --accent: #6FA5AA; --accent-bg: #1B4F55; --on-accent: #E6EAEB;
  --blue-soft: #152231; --blue-line: #2A3945;
  --sun: #1B4F55; --sun-soft: #1B4F55; --sun-ink: #E6EAEB;
  --c-masuk: #8FC3C7; --c-neg: #E0958A; --c-masuk-bg: #1B4F55; --c-neg-bg: #3A2523;
  --c-transfer: #8FC3C7; --c-transfer-bg: #1B4F55;
  --c-titipan: #C2C9CC; --c-titipan-bg: #36454F;
  --c-putuskan: #E6EAEB; --c-putuskan-bg: #36454F;
  --c-tabung: #8FC3C7; --c-tabung-bg: #1B4F55;
  --c-utang: #C2C9CC; --c-utang-bg: #2F3E49;
  --c-sementara: #8F9CA4; --c-sementara-bg: #1D2B38;
  --c-piutang: #8FC3C7; --c-piutang-bg: #1B4F55;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1A29; --surface: #152231; --surface-sunk: #0B141F;
    --line: #2A3945; --line-strong: #36454F;
    --ink: #DDE2E3; --ink-2: #C2C9CC; --ink-3: #8F9CA4;
    --accent: #6FA5AA; --accent-bg: #1B4F55; --on-accent: #E6EAEB;
    --blue-soft: #152231; --blue-line: #2A3945;
    --sun: #1B4F55; --sun-soft: #1B4F55; --sun-ink: #E6EAEB;
    --c-masuk: #8FC3C7; --c-neg: #E0958A; --c-masuk-bg: #1B4F55; --c-neg-bg: #3A2523;
    --c-transfer: #8FC3C7; --c-transfer-bg: #1B4F55;
    --c-titipan: #C2C9CC; --c-titipan-bg: #36454F;
    --c-putuskan: #E6EAEB; --c-putuskan-bg: #36454F;
    --c-tabung: #8FC3C7; --c-tabung-bg: #1B4F55;
    --c-utang: #C2C9CC; --c-utang-bg: #2F3E49;
    --c-sementara: #8F9CA4; --c-sementara-bg: #1D2B38;
    --c-piutang: #8FC3C7; --c-piutang-bg: #1B4F55;
    color-scheme: dark;
  }
}

/* ---------- tipografi: besar, lapang, tenang ---------- */
body { font-family: var(--font); font-size: 16px; line-height: 1.55; font-weight: 400; letter-spacing: 0; background: var(--bg); background-image: none; }
h1, h2, h3, .topbar__title, .section-heading h2, .modal .h2, .money-card h3, .wallet-tile__name { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; }
.topbar__title { font-size: 27px; font-weight: 600; letter-spacing: -.015em; }
.topbar__meta { font-size: 13px; }
.btn, .chip { font-weight: 500; letter-spacing: 0; }
.field__label, .sidebar__group, .label, .card-type, .table thead th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sidebar__group { font-size: 12px; letter-spacing: .02em; }
.sidebar__item { font-size: 15px; font-weight: 500; }
.sidebar__item[aria-current="page"] { font-weight: 600; }
.brand { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--ink); }
.brand__name { font-family: var(--font-serif); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.035em; white-space: nowrap; }
.brand__subtitle { font-family: var(--font); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .16em; color: var(--ink-3); }
.sidebar-brand-label.brand { max-width: none; }
.sidebar__brand { justify-content: flex-start; }
.brand--login { align-items: center; gap: 7px; margin-bottom: 8px; }
.brand--login .brand__name { font-size: clamp(38px, 9vw, 46px); }
.brand--login .brand__subtitle { font-size: 14px; letter-spacing: .2em; }
.badge { font-size: 12px; font-weight: 500; }
/* angka: tabular, rata kanan, seperti kolom buku besar */
.num, .money, .money-card__value, .rek__angka, .wallet-tile__amount, .modal__jumlah { font-family: var(--font); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum"; letter-spacing: 0; }
.num, .money { font-weight: 600; font-size: 1em; }
.modal__jumlah { font-size: 34px; font-weight: 600; }
.ket-asli, .mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; letter-spacing: 0; }
.ket-jenis { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: var(--accent); }

/* ---------- permukaan: kertas, garis halus, tanpa kilau ---------- */
.sidebar, .tabbar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card, .money-card, .wallet-tile, .rek, .ringkas, .dana-panel, .review-panel { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px #0F1A2910; }
.money-card--bank, .wallet-tile { background: var(--blue-soft); border-color: var(--blue-line); }
.money-card:after { display: none; }
.money-card:hover, .wallet-tile:hover { transform: none; border-color: var(--accent); box-shadow: 0 2px 8px #0F1A2914; }
.money-card--free { border: 1px solid var(--accent); box-shadow: none; }
.sidebar__item:hover { background: var(--surface-sunk); color: var(--ink); }
.sidebar__item[aria-current="page"] { background: var(--accent-bg); color: var(--ink); box-shadow: inset 3px 0 var(--fill); }
.tabbar__item[aria-current="page"]::before { box-shadow: none; }

.btn--primary { background: var(--fill); border-color: var(--fill); color: var(--on-fill); font-weight: 600; box-shadow: none; }
.btn--sun, .count, .tabbar__item[href="/catat"]>.lucide { color: var(--on-fill); background: var(--fill); }
.btn--sun { border-color: var(--fill); }
.btn--sun:hover { background: color-mix(in srgb, var(--fill) 85%, white); color: var(--on-fill); }
.count { font-family: var(--font); font-weight: 700; }
.input, .select, textarea { background: var(--surface); border-color: var(--line-strong); font-size: 15px; }
.select { padding-right: 34px; text-overflow: ellipsis; }
.input:focus, .select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--glow); }
.chip[aria-current="page"], .chip[aria-pressed="true"], .trx-tabs [aria-current="page"] { background: var(--fill); color: var(--on-fill); border-color: var(--fill); font-weight: 600; }
.trx-tabs [aria-current="page"] span { color: var(--fill); }

/* ---------- tabel seperti buku besar ---------- */
.table { font-size: 15px; }
.table thead th { background: var(--surface-sunk); color: var(--ink-2); border-bottom: 3px double var(--line-strong); padding-block: 10px; }
.table td { border-bottom: 1px solid var(--line); padding-block: 10px; }
.table tbody tr:hover td { background-color: var(--accent-bg); }
.table .num { text-align: right; }
.table tbody tr.tgl-row th { background: var(--surface-sunk); border-top: 1px solid var(--line-strong); padding: 9px 12px; font-family: var(--font-serif); font-size: 15px; font-weight: 600; font-style: italic; color: var(--ink); }
.table tbody tr.tgl-row .muted { font-family: var(--font); font-style: normal; font-weight: 400; }
.ket { font-weight: 500; }
.ket-meta { font-size: 13px; color: var(--ink-3); }
.ringkas { border-radius: 10px; }
.ringkas .money, .ringkas strong { font-weight: 700; }

/* modal: halaman buku yang terbuka */
.modal-backdrop { background: #0B1420B0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal, .sheet { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 20px 50px -20px #00000070; }
.opsi { background: var(--surface); font-weight: 500; font-size: 15px; }
.opsi:has(input:checked) { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.expense-bar-fill { background: var(--accent); }
.tema-switch[aria-checked="true"] .tema-thumb { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Dana lewat: tombol aksi selalu terlihat di bawah modal, tidak perlu menggulir mencarinya */
.dana-actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px -16px; padding: 12px 16px; background: var(--surface-sunk); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); }
.dana-actions .btn--primary:disabled { opacity: .5; cursor: not-allowed; }

/* Pilihan modern: kartu radio (perlakuan) dan chip centang (untuk siapa). Input asli disembunyikan tapi tetap bisa difokus dan digeser dengan panah. */
.opsi-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opsi-grid--rapat { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.opsi { position:relative; display:flex; align-items:center; gap:10px; min-width:0; min-height:52px; padding:var(--sp-2) var(--sp-3); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); color:var(--ink-2); font-size:var(--fs-sm); font-weight:550; cursor:pointer; user-select:none; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.opsi input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.opsi [data-lucide] { width:18px; height:18px; flex:none; color:var(--ink-3); }
.opsi span { min-width:0; overflow-wrap:anywhere; }
.opsi:hover { border-color:var(--accent); }
.opsi:has(input:checked) { color:var(--accent); background:var(--accent-bg); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.opsi:has(input:checked) [data-lucide] { color:var(--accent); }
.opsi:has(input:focus-visible) { outline:3px solid color-mix(in srgb,var(--accent) 24%,transparent); outline-offset:2px; }
.opsi:has(input:disabled) { opacity:.55; cursor:progress; }
.opsi--cek { min-height:44px; padding-left:38px; border-radius:var(--r-md); }
.opsi--cek::before { content:""; position:absolute; left:12px; top:50%; width:16px; height:16px; margin-top:-8px; border:1.5px solid var(--line-strong); border-radius:5px; background:var(--surface); transition:background .16s ease,border-color .16s ease; }
.opsi--cek:has(input:checked)::before { background:var(--accent); border-color:var(--accent); }
.opsi--cek:has(input:checked)::after { content:""; position:absolute; left:17px; top:50%; width:4px; height:8px; margin-top:-6px; border:solid var(--on-accent); border-width:0 2px 2px 0; transform:rotate(45deg); }
@media(max-width:380px) { .opsi-grid { grid-template-columns:1fr; } }

/* Tautan bergaya tombol tidak bergaris bawah; "Catat" jelas sebagai aksi utama, berbeda dari item menu aktif */
a.btn, a.btn:hover { text-decoration: none; }
.sidebar__item[href="/catat"] { background: var(--fill); color: var(--on-fill); font-weight: 600; }
.sidebar__item[href="/catat"]:hover { background: color-mix(in srgb, var(--fill) 85%, white); color: var(--on-fill); }
.sidebar__item[aria-current="page"]:not([href="/catat"]) { background: var(--accent-bg); color: var(--ink); box-shadow: inset 3px 0 var(--fill); }
.sidebar__item { line-height: 1.25; }

/* Pembagian nominal per orang */
.bagi { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunk); }
.bagi[hidden] { display: none; }
.bagi__kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.bagi__baris { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-weight: 500; }
.bagi__rp { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-weight: 400; }
.bagi__rp .input { width: 170px; text-align: right; font-variant-numeric: tabular-nums; }
.bagi__total { margin: 0; font-size: var(--fs-sm); text-align: right; }
.bagi__total.is-pas { color: var(--c-masuk); }
.bagi__total.is-salah { color: var(--c-neg); font-weight: 600; }

/* Urungkan di popup transaksi */
.modal__head .batal-semua { margin-left: auto; margin-right: var(--sp-2); }
.modal__head .batal-semua[hidden] { display: none; }
.undo-toast { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 14px; margin-top: var(--sp-2); border-radius: var(--r-md); background: var(--ink); color: var(--bg); font-size: var(--fs-sm); box-shadow: 0 8px 24px -8px #00000080; }
.undo-toast[hidden] { display: none; }
.undo-toast button { background: none; border: 0; color: var(--bg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 6px; }

/* Mutasi yang sudah dihubungkan ke catatan pengeluaran */
.catatan-terhubung { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--accent-bg); }
.catatan-terhubung__kepala { display: flex; gap: var(--sp-3); align-items: flex-start; }
.catatan-terhubung__kepala [data-lucide] { margin-top: 2px; color: var(--accent); }
.catatan-terhubung__kepala div { display: grid; gap: 2px; }
.catatan-terhubung__kepala span { color: var(--ink-2); font-size: var(--fs-sm); }
.catatan-terhubung__rincian { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.catatan-terhubung__rincian li { display: flex; justify-content: space-between; gap: var(--sp-3); padding-top: 8px; border-top: 1px dashed var(--line-strong); }
.catatan-terhubung__rincian li span { display: grid; }
.catatan-terhubung__rincian small { color: var(--ink-3); }
.catatan-terhubung__aksi { display: flex; flex-wrap: wrap; gap: 8px; }

/* Editor catatan pengeluaran */
.modal-backdrop--atas { z-index: 60; }
.modal--catatan { width: min(820px, calc(100vw - 32px)); max-width: none; }
.ce-catatan { margin: 0; font-size: var(--fs-sm); }
.ce-mutasi { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--accent-bg); }
.ce-mutasi > div { display: grid; flex: 1; min-width: 0; }
.ce-mutasi span { color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ce-dua { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ce-list { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.ce-baris { display: grid; grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunk); }
.ce-rp { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.ce-rp .input { text-align: right; font-variant-numeric: tabular-nums; }
.ce-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; justify-content: flex-end; font-size: var(--fs-md); }
.ce-total b { font-variant-numeric: tabular-nums; }
.ce-total small { flex-basis: 100%; text-align: right; font-size: var(--fs-sm); }
.ce-total.is-pas small { color: var(--c-masuk); }
.ce-total.is-salah small { color: var(--c-neg); font-weight: 600; }
.ce-galat { margin: 0; color: var(--c-neg); font-size: var(--fs-sm); }
.ce-aksi { display: flex; justify-content: flex-end; gap: var(--sp-2); position: sticky; bottom: 0; padding-top: var(--sp-2); background: var(--surface); }
@media (max-width: 720px) { .ce-baris { grid-template-columns: 1fr 1fr; } .ce-baris [data-k] { grid-column: 1 / -1; } .ce-dua { grid-template-columns: 1fr; } }

/* Passkey enrollment and device management. */
.security-page { max-width: 760px; }
.security-card { padding: 24px; margin-bottom: 20px; }
.security-card p { color: var(--ink-2); }
.security-form { display: grid; gap: 16px; max-width: 440px; }
.security-form .field { display: grid; gap: 6px; }
.security-actions { display: flex; justify-content: flex-end; gap: 12px; }
.passkey-message { margin: 0; font-size: 14px; color: var(--ink-2); }
.passkey-message:empty { display: none; }
.security-card .passkey-message { margin-top: 16px; }
.passkey-list { list-style: none; margin: 0; padding: 0; }
.passkey-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.passkey-list li:last-child { border-bottom: 0; }
.passkey-list li > div { min-width: 0; overflow-wrap: anywhere; }
.passkey-list small { display: block; color: var(--ink-3); margin-top: 4px; }
.passkey-dialog { width: min(440px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); }
.passkey-dialog::backdrop { background: #0F1A2980; }
.masuk [data-passkey-login][hidden] { display: none; }