/* ===== Finbase UI v3 — lapisan penyempurnaan (dimuat sesudah app.css) =====
   1) Huruf merek Plus Jakarta Sans (di-host sendiri; CSP font-src 'self').
   2) Tampilan HP (≤ 820px) seperti aplikasi native: ringkasan padat 2 kolom, aksi cepat berikon,
      filter & navigasi bulan ringkas, formulir dengan tombol simpan menempel, umpan balik sentuh. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/static/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/static/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
body,button,input,select,textarea{font-family:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.tile-value,.item .nilai,.trx-list .nilai,td.num,.uang{font-feature-settings:"tnum" 1}
h1,h2,.tile-value{letter-spacing:-.015em}

/* tombol tema di navbar: gelap → ikon matahari (ganti ke terang), terang → ikon bulan */
.topbar .tb-tema{background:transparent}
.tb-tema .ik-bulan{display:none}
[data-theme=light] .tb-tema .ik-bulan{display:block}[data-theme=light] .tb-tema .ik-matahari{display:none}

/* kata sandi: tombol mata */
.sandi-wrap{position:relative;display:block;width:100%}
.sandi-wrap input{padding-right:48px!important}
.sandi-lihat{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.sandi-lihat svg{width:20px;height:20px;fill:currentColor}.sandi-lihat.on{color:var(--accent)}
.sandi-lihat:focus-visible{outline:2px solid var(--accent)}

/* detail opsional di formulir transaksi */
details.opsi-lain{margin-top:14px;border:1px dashed var(--line);border-radius:12px;padding:0 14px}
details.opsi-lain>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 0;font-weight:600;font-size:14px}
details.opsi-lain>summary::-webkit-details-marker{display:none}
details.opsi-lain>summary::before{content:"+";width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);font-weight:800;flex:none}
details.opsi-lain[open]>summary::before{content:"−"}
details.opsi-lain>summary span{white-space:nowrap;flex:none}
details.opsi-lain>summary small{flex:1;font-weight:400;color:var(--ink-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
details.opsi-lain>.grid2{padding-bottom:14px}
.bulan-nav{display:inline-flex;align-items:center;gap:8px}.bulan-nav strong{font-size:18px;min-width:9.5em;text-align:center}
.ekspor{display:inline-flex;gap:8px}
.aksi-ik{display:inline-flex}.aksi-ik .ic{width:18px;height:18px}

/* plafon anggaran: ikut tema */
input.plafon{background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--ink);text-align:right}
input.plafon:focus{border-color:var(--accent);outline:none}

/* ===== HP ===== */
@media (max-width:820px){
  body{-webkit-tap-highlight-color:transparent}
  .sembunyi-hp{display:none!important}
  .btn{white-space:nowrap}
  .btn:active,.item:active,.trx-list a:active,.menu-laporan a:active,.sheet-grid a:active,.bottom-nav a:active{transform:scale(.97);transition:transform .08s}

  /* bilah atas: judul lebih lega, ikon tanpa bingkai */
  .topbar{padding:calc(8px + var(--sat)) 10px 8px;gap:4px;min-height:56px}
  .topbar h1{font-size:17px;font-weight:700}
  .topbar-back{width:36px;height:36px;font-size:26px;margin-right:-2px}
  .tb-ic{border:0;width:38px;height:38px;border-radius:12px;background:transparent}
  .tb-ic:active{background:var(--surface-2)}
  .tb-akun{border:0;padding:2px}.tb-ava{width:32px;height:32px;border-radius:10px}
  .tb-badge{top:0;right:0}

  /* ringkasan angka: kartu padat 2 kolom, angka tidak patah */
  .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .tile{padding:11px 12px;border-radius:14px;gap:1px}
  .tile-label{font-size:10.5px;letter-spacing:.05em;line-height:1.3}
  .tile-value{font-size:clamp(15px,4.6vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
  .tile-sub{font-size:11px;line-height:1.35}
  .tiles:not(:has(.tile-hero))>.tile:first-child:nth-last-child(odd),.tiles>.tile-hero{grid-column:1/-1}
  .tiles>.tile-hero .tile-value{font-size:26px}
  .tiles-5{grid-template-columns:1fr 1fr}

  /* aksi cepat dasbor: 4 ikon bulat seperti aplikasi dompet digital */
  .dasbor-aksi{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:2px 0 0}
  .dasbor-aksi .btn{flex:none;flex-direction:column;gap:6px;min-height:0;padding:4px 0;border:0;background:transparent;color:var(--ink-2);font-size:11.5px;font-weight:600;white-space:normal;text-align:center;line-height:1.25}
  .dasbor-aksi .aksi-ik{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
  .dasbor-aksi .aksi-ik .ic{width:22px;height:22px}
  .dasbor-aksi .aksi-masuk .aksi-ik{background:var(--accent);color:var(--accent-ink)}
  .dasbor-aksi .aksi-keluar .aksi-ik{background:var(--out-soft);color:var(--out)}
  .dasbor-aksi .aksi-transfer .aksi-ik{background:var(--info-soft);color:var(--info)}
  .dasbor-aksi .aksi-hp .aksi-ik{background:var(--warn-soft);color:var(--warn)}
  .card.perhatian .plain li{line-height:1.45}

  /* aksi cepat halaman transaksi: satu baris ringkas (FAB tetap ada) */
  .aksi-cepat:not(.dasbor-aksi){display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .aksi-cepat:not(.dasbor-aksi) .btn{min-height:40px;padding:6px 8px;font-size:13.5px}

  /* filter: kompak */
  .card.filter{padding:12px}
  .filter label{flex:1 1 calc(50% - 4px);font-size:12px;min-width:0}
  .filter input[type=date]{min-width:0;max-width:100%}
  .filter input,.filter select{min-height:40px;padding:7px 10px;font-size:16px}
  .filter .btn{flex:1 1 auto;min-height:40px}
  .filter .spacer{display:none}
  .filter-laporan .btn-tampil{flex:1 1 100%}
  .filter-laporan .ekspor{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filter-laporan .ekspor .btn{min-height:36px;font-size:13px}
  .filter-anggaran{justify-content:space-between}
  .filter-anggaran .bulan-nav{flex:1 1 100%;justify-content:space-between}
  .filter-anggaran .bulan-nav .btn{flex:none;width:44px;min-height:40px;font-size:20px;padding:0}
  .filter-anggaran .bulan-nav strong{font-size:16px;min-width:0}
  .filter-anggaran>.btn,.filter-anggaran>form .btn{flex:1 1 calc(50% - 4px);min-height:38px;font-size:13.5px}
  .filter-anggaran>form{flex:1 1 calc(50% - 4px);display:flex}.filter-anggaran>form .btn{flex:1}

  /* tab */
  .tabs{gap:6px;margin-bottom:12px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
  .tab{padding:8px 16px;font-size:14px;font-weight:600}
  .tab-ket{display:none}
  .tabs:has(.tab:nth-child(2):last-child){display:grid;grid-template-columns:1fr 1fr}
  .tabs:has(.tab:nth-child(3):last-child){display:grid;grid-template-columns:repeat(3,1fr)}
  .tabs .tab{text-align:center;justify-content:center}

  /* formulir halaman (transaksi, hutang-piutang baru): tanpa bilah bawah, tombol simpan menempel */
  body[data-halaman^="/transaksi/baru"] .bottom-nav,body[data-halaman^="/transaksi/koreksi"] .bottom-nav,body[data-halaman^="/hutang-piutang/baru"] .bottom-nav{display:none}
  body[data-halaman^="/transaksi/baru"] .content,body[data-halaman^="/transaksi/koreksi"] .content,body[data-halaman^="/hutang-piutang/baru"] .content{padding-bottom:calc(16px + var(--sab))}
  .form .uang.besar{font-size:30px;min-height:64px;font-weight:700}
  .aksi-lekat{position:sticky;bottom:0;z-index:4;margin:16px -14px -14px;padding:12px 14px calc(12px + var(--sab));background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 14px 14px;display:grid!important;grid-template-columns:1fr 1.4fr;gap:8px}
  .aksi-lekat .btn{min-height:50px!important;font-size:15px!important;flex:none!important}
  .aksi-lekat .btn-primary{order:2}
  details.opsi-lain{padding:0 12px}

  /* daftar */
  .item{border-radius:14px;padding:12px 14px}
  .item .judul{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .item .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .item .nilai{font-size:15px}
  .menu-laporan{grid-template-columns:1fr;gap:8px}.menu-laporan a{padding:12px 14px;border-radius:14px}

  /* laporan per akun (laba rugi, neraca): tanpa kolom kode di HP, tidak perlu geser */
  .tbl.lap-akun{margin:0;padding:0;width:auto}.tbl.lap-akun table{min-width:0}
  .tbl.lap-akun tr:not(.bagian)>td:first-child{display:none}.tbl.lap-akun td.num{white-space:nowrap}.tbl.lap-akun td{padding:9px 6px;font-size:14px}
  .tbl.lap-akun tr.total td,.tbl.lap-akun tr.bagian td{padding-left:6px!important}

  /* kartu judul */
  .card-head h2{font-size:15.5px}
  .card-head .btn-sm{min-height:30px}

  /* lembar menu Lainnya */
  .sheet-panel{padding-top:6px}
  .sheet-grid a{padding:12px 4px 10px;font-size:11.5px;line-height:1.25;border-radius:14px}
  .sheet-grid .ic{width:22px;height:22px}

  /* login */
  .login-body{align-items:start;padding-top:calc(12vh + var(--sat))}
  .login-card{border:0;background:transparent;box-shadow:none;padding:12px 8px}
}
@media (max-width:360px){.dasbor-aksi .btn{font-size:10.5px}.dasbor-aksi .aksi-ik{width:44px;height:44px}}