/* ==========================================================================
   DICHATAT — responsive.css
   Lapisan tampilan terpisah, dimuat SETELAH styles.css. Tidak mengubah logika.
   - HP / tablet kecil (< 1024px): navigasi bawah melayang, satu kolom,
     target sentuh besar, aman untuk notch / gesture bar.
   - Desktop sedang (1024-1279px): navigasi ada di menu 3 garis pojok kiri atas
     (panel geser), konten lebar dua kolom, tombol "Kembali" disembunyikan.
   - Desktop lebar (>= 1280px): panel menu yang sama menjadi SIDEBAR TETAP
     (selalu terbuka), tombol 3 garis disembunyikan. Hanya setelah login.
   ========================================================================== */

/* Progress tabungan di kartu habit (Beranda) */
.savings-progress{margin-top:12px;padding-top:11px;border-top:1px solid #26262c;min-width:0}
.sv-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sv-row .focus-label{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-row b{color:#f6d34b;font-size:13px;font-weight:800;flex:none}
.sv-bar{height:7px;border-radius:99px;background:#3a382c;overflow:hidden;margin:8px 0 6px}
.sv-bar span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#c9a92f,#f6d34b);transition:width .6s cubic-bezier(.2,.55,.35,1)}
.sv-meta{font-size:10.5px;color:#8d8d96;line-height:1.3}
@media (min-width:1024px){
  .savings-progress{margin-top:16px;padding-top:14px}
  .sv-row b{font-size:15px}
  .sv-bar{height:9px}
  .sv-meta{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.sv-bar span{transition:none}}

/* Riwayat tabungan di kartu Tabungan & investasi */
.note-subhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:16px 0 8px;padding-top:14px;border-top:1px solid #25252b}
.note-subhead h4{margin:0;font-size:12px;color:#c9c9d0}
.note-subhead small{color:#777;font-size:10px}

/* Ubah & hapus riwayat transaksi */
.tx-actions{display:flex;gap:6px;flex:none;margin-left:2px}
.tx-ic{
  flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;
  background:transparent;border:1px solid #303038;border-radius:10px;color:#8d8d96;
}
.tx-ic svg,.tx-lock svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tx-ic:hover,.tx-ic:focus-visible{color:#f6d34b;border-color:#75651f;background:#201d0f}
.tx-ic.del:hover,.tx-ic.del:focus-visible{color:#ff9292;border-color:#ff929255;background:#ff92920f}
.tx-lock{flex:none;width:34px;height:34px;display:grid;place-items:center;color:#55555e}
@media (max-width:767px){.tx-ic,.tx-lock{width:38px;height:38px}.tx-actions{gap:4px}}
.simple-row .sr-main{min-width:0;flex:1}
.simple-row .sr-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.simple-row .tx-ic,.simple-row .tx-lock{width:32px;height:32px}
@media (max-width:767px){.simple-row .tx-ic,.simple-row .tx-lock{width:36px;height:36px}}
.et-badge{display:inline-block;font-size:11px;font-weight:800;padding:4px 10px;border-radius:99px;margin-bottom:6px}
.et-badge.income{background:#123321;color:#8ee5a2;border:1px solid #1e6b3f}
.et-badge.expense{background:#3a1414;color:#ff9292;border:1px solid #7a2626}
#editTxDialog .dialog{max-height:calc(100dvh - 24px);overflow-y:auto}

/* Sub modul Tabungan */
.sv-layout{display:block}
.sv-right h2{margin-top:26px}
.sv-thead{display:none}
.sv-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"name act" "prog prog" "amt amt";
  gap:8px 10px;align-items:center;
  background:#151519;border:1px solid #27272e;border-radius:15px;padding:13px;margin:8px 0;
}
.sv-name{grid-area:name;min-width:0}
.sv-name b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-name small,.sv-amt small,.sv-prog small{display:block;color:#8d8d96;font-size:11px;margin-top:3px}
.sv-prog{grid-area:prog;display:flex;align-items:center;gap:10px}
.sv-prog .sv-bar{flex:1;margin:0;height:8px}
.sv-prog small{margin:0;color:#f6d34b;font-weight:800;min-width:34px;text-align:right}
.sv-amt{grid-area:amt;display:flex;align-items:baseline;gap:6px}
.sv-amt b{font-size:13px}
.sv-amt small{margin:0}
.sv-act{grid-area:act;display:flex;align-items:center;gap:8px}
.sv-btn{
  border:1px solid #75651f;background:#201d0f;color:#f6d34b;border-radius:10px;
  padding:0 14px;height:36px;font-size:12px;font-weight:800;
}
.sv-btn:hover{background:#2a2612}
@media (max-width:767px){.sv-btn{height:42px}}
@media (min-width:1024px){
  #finTabTabungan .sv-layout{
    display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);
    column-gap:36px;align-items:start;
  }
  .sv-right h2{margin-top:0}
  .sv-thead{
    display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1fr) 96px;gap:14px;
    padding:0 14px 6px;color:#666;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  }
  .sv-item{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1fr) 96px;
    grid-template-areas:"name prog amt act";gap:14px;
  }
  .sv-amt{display:block}
  .sv-amt small{margin-top:3px}
  .sv-act{justify-content:flex-end}
}

/* Tombol hapus habit */
.habit-del{
  flex:none;width:36px;height:36px;display:grid;place-items:center;
  background:transparent;border:1px solid #303038;border-radius:10px;
  color:#8d8d96;padding:0;
}
.habit-del svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.habit-del:hover,.habit-del:focus-visible{color:#ff9292;border-color:#ff929255;background:#ff92920f}
@media (max-width:767px){.habit-del{width:42px;height:42px}}

/* Elemen khusus desktop disembunyikan di HP */
.dk-only{display:none}

/* --------------------------------------------------------------------------
   HP & TABLET  (< 1024px)
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  header{padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .global-nav{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .global-nav button{-webkit-tap-highlight-color:transparent}
}

@media (max-width:767px){
  /* 16px mencegah iOS zoom otomatis saat fokus ke input */
  input,select,textarea,
  #chatForm input,#chatForm textarea{font-size:16px}
  input,select{min-height:46px}

  /* tombol simpan menempel di atas navigasi bawah, mudah dijangkau jempol */
  .dc-form .dc-btn-save{
    position:sticky;
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
    z-index:5;
    box-shadow:0 10px 30px #000c;
  }

  /* daftar transaksi & habit: baris lebih tinggi agar mudah disentuh */
  .listitem{min-height:56px}
  .habit{min-height:56px}
}

/* Tablet: catatan dua kolom, tetap dengan navigasi bawah */
@media (min-width:768px) and (max-width:1023px){
  .note-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .note-panel>.note-toolbar,
  .note-panel>.note-period-label,
  .note-panel>.note-stat-grid{grid-column:1/-1}
  .note-section-card{margin:0}
  .note-stat-grid{grid-template-columns:repeat(3,1fr)}
  .note-stat:last-child{grid-column:auto}
}

/* --------------------------------------------------------------------------
   DESKTOP  (>= 1024px)
   -------------------------------------------------------------------------- */
@media (min-width:1024px){

  body{
    background:
      radial-gradient(1100px 600px at 78% -10%, #f6d34b0d, transparent 60%),
      #0b0b0d;
  }

  /* ---------- Navigasi: masuk ke menu 3 garis (kiri atas) ---------- */
  nav.global-nav.home-nav{display:none!important}     /* navbar bawah tidak dipakai di desktop */

  .side-menu-item.dk-only{display:flex}
  .dk-sep{display:block;height:1px;background:#24242a;margin:6px 8px}
  .side-menu{width:290px}
  .side-menu-item.active{
    background:#201d0f;color:#f6d34b;
    box-shadow:inset 3px 0 0 #f6d34b;
  }
  .side-menu-item.active .menu-icon{color:#f6d34b}

  /* ---------- Kerangka halaman ---------- */
  .app{max-width:none;margin:0 auto}
  header{
    padding:18px max(44px,calc((100vw - 1180px)/2 + 44px));
    background:#0b0b0dd9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  header .user-area{margin-left:auto}

  main{max-width:1180px;margin:0 auto;padding:8px 44px 56px}

  /* tombol kembali tidak dibutuhkan: menu 3 garis selalu ada di pojok kiri atas */
  #chat .back,#finance .back,#habits .back,#catatan .back,
  .chat-home-fab{display:none}
  .title{margin:8px 0 18px}
  .title h2,#chat .title h2{font-size:24px}

  /* ---------- Beranda: dashboard dua kolom ---------- */
  #home{
    height:auto;min-height:calc(100dvh - 120px);overflow:visible;
    display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
    gap:36px;align-items:stretch;
  }
  #home .home-top{display:none}
  #home .ai-home-stage{
    min-height:0;height:auto;padding:40px;
    border:1px solid #24242a;border-radius:28px;
    background:radial-gradient(520px 320px at 50% 38%, #f6d34b14, transparent 70%), #111114;
  }
  #home .home-wordmark{font-size:60px}
  #home .home-tagline{font-size:13px}
  /* Kolom kanan: dua kartu dibagi rata setinggi panel kiri (tinggi halaman penuh) */
  #home .home-bottom-cards{
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) minmax(0,1fr);
    gap:16px;margin:0;align-self:stretch;height:auto;min-height:0;contain:size;
  }
  #home .home-bottom-cards .compact-balance,
  #home .home-bottom-cards .compact-today{min-height:0;height:100%;padding:24px 26px;box-sizing:border-box}
  #home .home-bottom-cards .compact-balance{justify-content:center;overflow:hidden}
  #home .home-bottom-cards .compact-today{justify-content:center}
  /* daftar akun tumbuh sesuai isi; bila lebih tinggi dari kartu, scroll di dalamnya */
  #home .compact-balance .balance-details-scroll{
    flex:0 1 auto;min-height:0;max-height:none;margin-top:16px;padding-top:8px;
  }
  #home .compact-balance .balance-detail-row{min-height:40px}
  #home .compact-today .today-summary{margin-bottom:6px}
  #home .compact-today .savings-progress{margin-top:14px;padding-top:16px}
  #home .compact-total{font-size:44px!important}
  #home .compact-split span{font-size:12px!important}
  #home .compact-split b{font-size:16px!important}

  /* ---------- Keuangan: form kiri, riwayat kanan ---------- */
  #finance .account-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:6px}
  #finance .account-grid .card strong{font-size:26px}

  #finTabCatat{
    display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);
    column-gap:36px;align-items:start;
  }
  #finTabCatat>.dc-segmented{grid-column:1;grid-row:1}
  #finTabCatat>#txForm{grid-column:1;grid-row:2}
  #finTabCatat>h2{grid-column:2;grid-row:1;margin:0;align-self:center}
  #finTabCatat>#txList{grid-column:2;grid-row:2}

  #debtSubPayable,#debtSubReceivable{
    display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);
    column-gap:36px;align-items:start;
  }
  #debtSubPayable>form,#debtSubReceivable>form{grid-column:1;grid-row:1 / span 2}
  #debtSubPayable>h2,#debtSubReceivable>h2{grid-column:2;grid-row:1;margin:0 0 12px}
  #debtSubPayable>div[id^="debtList"],#debtSubReceivable>div[id^="debtList"]{grid-column:2;grid-row:2}

  /* ---------- Habit: daftar dua kolom ---------- */
  #habits>.card:first-of-type{max-width:none}
  #habitList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  #habits .card.add{max-width:520px}

  /* ---------- Chat AI: lebar nyaman dibaca ---------- */
  #chat{max-width:880px;margin:0 auto}
  #chatLog{min-height:calc(100dvh - 250px)}
  #chatLog .bubble{max-width:72%;font-size:14px}
  #chatForm{bottom:18px}

  /* ---------- Catatan & Progress: kartu dua kolom ---------- */
  .note-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .note-panel>.note-toolbar,
  .note-panel>.note-period-label,
  .note-panel>.note-stat-grid{grid-column:1/-1}
  .note-section-card{margin:0;padding:20px}
  .note-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:0}
  .note-stat:last-child{grid-column:auto}
  .note-stat{min-height:104px;padding:18px}
  .note-stat strong{font-size:24px}

  /* ---------- Dialog lebih lega ---------- */
  #aboutDialog .dialog,#creatorDialog .dialog{width:min(92vw,640px)}

  /* ---------- Interaksi pointer ---------- */
  .listitem,.card,.habit{transition:border-color .18s ease,background .18s ease}
  .listitem:hover,.habit:hover{border-color:#3a3a44}
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-thumb{background:#2a2a31;border-radius:8px;border:2px solid #0b0b0d}
}

/* Layar sangat lebar */
@media (min-width:1600px){
  main{max-width:1320px}
}

/* --------------------------------------------------------------------------
   DESKTOP LEBAR  (>= 1280px): panel menu = sidebar tetap yang selalu terbuka.
   Dikunci dengan :has(...) agar TIDAK muncul di layar login / onboarding.
   Saat jendela mengecil (< 1280px) aturan ini lepas dan panel kembali menjadi
   menu geser yang dibuka lewat tombol 3 garis.
   -------------------------------------------------------------------------- */
@media (min-width:1280px){
  body:has(.global-nav:not(.hide)) #sideMenu.side-menu,
  body:has(.global-nav:not(.hide)) #sideMenu.side-menu.hide,
  body:has(.global-nav:not(.hide)) #sideMenu.side-menu.open{
    display:flex!important;
    transform:none!important;
    transition:none;
    width:290px;
    background:#101013;
    border-right:1px solid #24242a;
    box-shadow:none;
    z-index:30;
    overflow-y:auto;
    padding:22px 14px 18px;
  }
  body:has(.global-nav:not(.hide)) .menu-overlay{display:none!important}
  body:has(.global-nav:not(.hide)) #menuClose{display:none}
  body:has(.global-nav:not(.hide)) .side-menu-item.danger{margin-top:auto}

  body:has(.global-nav:not(.hide)) .app{margin:0 0 0 290px}
  body:has(.global-nav:not(.hide)) header .brand{display:none}
  body:has(.global-nav:not(.hide)) header{
    padding-left:max(44px,calc((100vw - 290px - 1180px)/2 + 44px));
    padding-right:max(44px,calc((100vw - 290px - 1180px)/2 + 44px));
  }
}

/* --------------------------------------------------------------------------
   FIX LAYAR SEMPIT (HP): riwayat transaksi di Catatan & navbar tidak melebar
   -------------------------------------------------------------------------- */
/* kolom grid tidak boleh melebar mengikuti teks panjang */
.simple-note-list{grid-template-columns:minmax(0,1fr)}
.note-panel,.note-section-card,.note-section-card>div{min-width:0}
.simple-row{min-width:0;max-width:100%}
.simple-row .sr-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* navbar: 5 kolom sama lebar, isi mengecil bukan membuat navbar melebar */
.home-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
.global-nav button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:520px){
  .global-nav{max-width:calc(100vw - 20px)}
  .global-nav button{font-size:11px;padding-left:2px;padding-right:2px}
  .simple-row{gap:8px;padding:10px}
  .simple-row .tx-actions{gap:4px}
}

/* DICHATAT V31 - Riwayat Catatan selalu selebar panel, tanpa memaksa satu baris */
#noteTransactionNotes{width:100%;min-width:0}
.note-tx-row{max-width:100%;box-sizing:border-box}
@media(min-width:1024px){
  #noteFinance .note-section-card:has(#noteTransactionNotes){min-width:0}
  #noteTransactionNotes{min-width:0}
}

/* ==========================================================================
   v82 — KERAPIAN ANTARMUKA
   1) Atur saldo & builder E-Wallet   2) Kolom nominal lurus di semua riwayat
   3) Nama tabungan kuning            4) Pemilih tahun & bulan di Catatan
   ========================================================================== */
:root{--amt-w:100px;--act-w:82px;--row-gap:10px}
@media (min-width:768px){:root{--amt-w:124px;--act-w:82px}}

/* ---------- 1) Atur saldo ---------- */
#balanceDialog .dialog{max-height:calc(100dvh - 24px);overflow-y:auto}
.wb-card{background:#0f0f12;border:1px solid #25252b;border-radius:14px;padding:12px;margin:12px 0 0}
.wb-field{display:grid;gap:6px;margin:0!important;min-width:0;color:#a9a9b2;font-size:12px;line-height:1.3}
.wb-lab{font-weight:650;color:#a9a9b2}
.wb-field select,.wb-field input{width:100%;height:46px;margin:0;box-sizing:border-box}
.wb-amount{position:relative;display:block}
.wb-amount i{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;font-weight:800;color:#f6d34b;pointer-events:none}
.wb-amount input{padding-left:40px}
.wb-amount input[type=number]{-moz-appearance:textfield;appearance:textfield}
.wb-amount input::-webkit-outer-spin-button,.wb-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.wallet-builder{margin-top:18px}
.wallet-builder-head{display:block;margin-bottom:10px}
.wallet-builder-head b{display:block;font-size:14px}
.wallet-builder-head span{display:block;margin-top:2px;font-size:12px;opacity:.65}
.wallet-builder-row{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 44px;
  grid-template-areas:"plat bal rem" "cust cust cust";
  gap:10px;align-items:end;
  background:#0f0f12;border:1px solid #25252b;border-radius:14px;padding:12px;margin:0 0 10px;
}
.wallet-builder-row .wb-platform{grid-area:plat}
.wallet-builder-row .wb-balance{grid-area:bal}
.wallet-builder-row .wallet-custom-name{grid-area:cust;margin:0;height:46px;width:100%;box-sizing:border-box}
.wallet-builder-row .wallet-custom-name.hide{display:none}
.wallet-builder-row .wallet-remove{
  grid-area:rem;width:44px;height:46px;padding:0;display:grid;place-items:center;
  border-radius:12px;border:1px solid #303038;background:transparent;color:#8d8d96;
}
.wallet-builder-row .wallet-remove svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wallet-builder-row .wallet-remove:hover{color:#ff9292;border-color:#ff929255;background:#ff92920f}
#addSettingsWallet,#addOnboardWallet{height:46px;border-radius:13px;border-style:dashed}
@media (max-width:520px){
  .wallet-builder-row{
    grid-template-columns:minmax(0,1fr) 44px;
    grid-template-areas:"plat rem" "bal bal" "cust cust";
  }
}

/* ---------- 2) Nominal satu garis lurus di semua riwayat ---------- */
.recent-item strong,.simple-row>strong,.note-tx-amount,.debt-amount b,.sv-amt b,.category-main b{
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* Keuangan: transaksi terakhir */
.recent-item{
  display:grid;grid-template-columns:34px minmax(0,1fr) var(--amt-w) var(--act-w);
  column-gap:var(--row-gap);align-items:center;
}
.recent-item>strong{text-align:right;font-size:13px}
.recent-item>.tx-actions,.recent-item>.tx-lock,.note-tx-row>.tx-actions,.note-tx-row>.tx-lock{justify-self:end}

/* Catatan: riwayat transaksi */
.note-tx-row{grid-template-columns:42px minmax(0,1fr) var(--amt-w) var(--act-w);column-gap:var(--row-gap)}
.note-tx-amount{text-align:right}
@media (max-width:767px){.note-tx-row{grid-template-columns:38px minmax(0,1fr) var(--amt-w) var(--act-w);column-gap:8px}}

/* Catatan: tabungan & investasi, riwayat tabungan, utang & piutang */
.simple-row{
  display:grid;grid-template-columns:minmax(0,1fr) var(--amt-w) var(--act-w);
  column-gap:var(--row-gap);align-items:center;
}
.simple-row>strong{text-align:right;font-size:12.5px}
.simple-row .note-row-actions{justify-content:flex-end}
.category-main b{text-align:right}
.category-main b i{display:inline-block;min-width:42px;text-align:right}

/* Keuangan: utang & piutang */
.debt-item{
  display:grid;grid-template-columns:36px minmax(0,1fr) var(--amt-w) 150px;
  column-gap:var(--row-gap);align-items:center;flex-wrap:nowrap;
}
.debt-item .debt-main{min-width:0}
.debt-amount{text-align:right;margin-left:0!important}
.debt-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.debt-actions .pay-btn{margin-left:0}
@media (max-width:767px){
  .debt-item{
    grid-template-columns:36px minmax(0,1fr) var(--amt-w);
    grid-template-areas:"av main amt" "act act act";
    row-gap:8px;
  }
  .debt-item>.debt-avatar{grid-area:av}
  .debt-item>.debt-main{grid-area:main}
  .debt-item>.debt-amount{grid-area:amt}
  .debt-item>.debt-actions{grid-area:act;width:auto}
}

/* Keuangan: Tabungan saya */
.sv-amt{text-align:right}
.sv-thead span:nth-child(3){text-align:right}
@media (max-width:1023px){.sv-amt{justify-content:flex-end}}

/* ---------- 3) Nama tabungan kuning ---------- */
.simple-row b.sv-name-y{color:#f6d34b}

/* ---------- 4) Pemilih tahun & bulan (Catatan) ---------- */
.note-panel>.period-picker,.period-picker{grid-column:1/-1}
.period-picker{display:grid;gap:12px;margin:2px 0 10px;padding:12px;background:#111114;border:1px solid #25252b;border-radius:16px}
.period-picker.hide{display:none}
.pp-block{display:grid;gap:7px;min-width:0}
.pp-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#777}
.pp-row{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pp-row.wrap{flex-wrap:wrap;overflow:visible}
.pp-chip{
  flex:none;min-width:54px;height:38px;padding:0 14px;border-radius:11px;
  border:1px solid #303038;background:#151519;color:#c9c9d0;font-size:12px;font-weight:700;
}
.pp-chip:hover:not(:disabled){border-color:#75651f;color:#f6d34b}
.pp-chip.active{background:#201d0f;color:#f6d34b;border-color:#75651f}
.pp-chip:disabled{opacity:.3;cursor:default}
.pp-months{animation:ppIn .25s ease}
@keyframes ppIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pp-months{animation:none}}
@media (max-width:520px){.pp-row.wrap .pp-chip{min-width:calc((100% - 21px)/4)}}


/* ==========================================================================
   v83b — Kartu tabungan di beranda: daftar per tujuan (ubah / hapus), bisa di-scroll
   ========================================================================== */
.savings-progress{display:flex;flex-direction:column;min-height:0}
.sv-home-list{
  display:grid;gap:10px;margin-top:8px;
  max-height:118px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#3a382c transparent;padding-right:4px;
}
.sv-home-list::-webkit-scrollbar{width:4px}
.sv-home-list::-webkit-scrollbar-thumb{background:#3a382c;border-radius:4px}
.sv-home-item{min-width:0}
.sv-home-item+.sv-home-item{padding-top:10px;border-top:1px solid rgba(255,255,255,.055)}
.sv-home-top{display:flex;align-items:center;gap:6px;min-width:0}
.sv-home-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#a9a9b2}
.sv-home-pct{flex:none;color:#f6d34b;font-size:13px;font-weight:800}
.sv-home-act{flex:none;display:inline-flex;gap:2px;margin-left:2px}
.sv-ico{
  width:26px;height:26px;padding:0;display:inline-grid;place-items:center;
  border:0;border-radius:8px;background:transparent;color:#8d8d96;cursor:pointer;
}
.sv-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sv-ico:hover,.sv-ico:focus-visible{color:#f6d34b;background:#f6d34b14}
.sv-ico-del:hover,.sv-ico-del:focus-visible{color:#ff9292;background:#ff92920f}
@media (max-width:1023px){
  /* layar sempit: nama + persen di atas, nominal + tombol ubah/hapus di bawah bar */
  .sv-home-item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name pct" "bar bar" "meta act";align-items:center;column-gap:6px}
  .sv-home-top{display:contents}
  .sv-home-name{grid-area:name}.sv-home-pct{grid-area:pct}
  .sv-home-item .sv-bar{grid-area:bar}.sv-home-item>.sv-meta{grid-area:meta}
  .sv-home-act{grid-area:act;margin:0}
  .sv-ico{width:30px;height:30px}.sv-ico svg{width:16px;height:16px}
}
.sv-home-item .sv-bar{margin:6px 0 4px}
@media (min-width:1024px){
  #home .compact-today{overflow:hidden}
  #home .compact-today .savings-progress{flex:0 1 auto}
  #home .compact-today .sv-home-list{max-height:none;flex:1 1 auto;min-height:0;margin-top:10px}
  .sv-home-name{font-size:13px}
}

/* Dialog ubah tabungan mengikuti gaya dialog form yang ada */
#editSavingDialog .dc-field{margin-top:12px}

/* Tombol "Simpan saldo" (Atur saldo) — kuning */
#balanceDialog .actions button.primary{
  background:#f6d34b;color:#151515;font-weight:800;border-color:#f6d34b;
}
#balanceDialog .actions button.primary:hover{background:#ffe07a;box-shadow:0 8px 20px #f6d34b33}
#balanceDialog .actions button.primary:disabled{opacity:.6}

/* Desktop lebar: garis pemisah tipis antara navigasi halaman dan menu bawaan sidebar (Tentang aplikasi, dll) */
@media (min-width:1024px){
  .dk-sep{height:1px;background:rgba(255,255,255,.16);margin:10px 10px}
}

/* --------------------------------------------------------------------------
   v85 — Catatan: riwayat tabungan & utang/piutang memakai kartu yang sama
   dengan riwayat transaksi (.note-tx-row): tinggi di HP karena teks turun
   baris, dan otomatis menyesuaikan di desktop lebar.
   -------------------------------------------------------------------------- */
#noteSavingsHistory,#noteDebtList{width:100%;min-width:0;display:grid;gap:9px}
.note-tx-main>b.sv-name-y{color:#f6d34b}

/* --------------------------------------------------------------------------
   v86 — Logo e-wallet (ShopeePay, DANA, GoPay, LinkAja, OVO) & ikon Tunai
   -------------------------------------------------------------------------- */
.wlogo{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;object-fit:cover;flex:none;vertical-align:middle;background:#fff;overflow:hidden}
.wlogo.sm{width:20px;height:20px;border-radius:6px}
.wlogo-generic{background:#211f15;color:#f6d34b;border:1px solid #3d3925}
.wlogo-cash{background:#123321;color:#8ee5a2;border:1px solid #1e6b3f}
.wlogo svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.balance-detail-row>span{display:inline-flex;align-items:center;gap:8px}
.lbl-ic{display:inline-flex;align-items:center;gap:7px}
.wlogo-stack{display:inline-flex;align-items:center;margin-left:2px}
.wlogo-stack .wlogo+.wlogo{margin-left:-6px}
.wlogo-stack .wlogo{box-shadow:0 0 0 2px #151519}
.dc-method-toggle button .wlogo{flex:none}
.txp-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.wb-select{position:relative;display:block}
.wb-select .wb-logo{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;display:grid}
.wb-select select{padding-left:44px}
.bal-line{display:flex;align-items:center;gap:8px;margin:6px 0}
.bal-ic{display:inline-flex;align-items:center}
.bal-ic .wlogo+.wlogo{margin-left:-6px;box-shadow:0 0 0 2px #17171b}
.bal-name{flex:1;min-width:0}
.bal-amt{white-space:nowrap}


/* --------------------------------------------------------------------------
   v87 — Ukuran logo seragam + 2 metode utama (Tunai / E-Wallet) + pilihan platform
   -------------------------------------------------------------------------- */
.wlogo{width:22px;height:22px;border-radius:6px;object-fit:contain;outline:1px solid rgba(255,255,255,.14);outline-offset:-1px}
.wlogo.sm{width:20px;height:20px;border-radius:6px}
.dc-method-toggle button .wlogo,.dc-plat .wlogo,.txp-chip .wlogo,.txp-plat-btn .wlogo{width:20px;height:20px;flex:none}
.dc-method-toggle button .wlogo svg,.dc-plat .wlogo svg{width:62%;height:62%}
.dc-method-toggle button{min-height:44px;gap:8px}
.dc-method-toggle button.hide{display:none!important}
.dc-platform{margin-top:10px}
.dc-platform-lab{font-size:11.5px;font-weight:700;color:#8b8b95;margin-bottom:6px}
.dc-platform-list{display:flex;flex-wrap:wrap;gap:8px}
.dc-plat{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border-radius:11px;border:1px solid #303038;background:#0e0e11;color:#a9a9b2;font-size:12.5px;font-weight:700;cursor:pointer}
.dc-plat span:last-child{white-space:nowrap}
.dc-plat.active{border-color:#f6d34b;background:#1c1a0e;color:#f6d34b}
.txp-plat{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.txp-plat-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 10px;border-radius:10px;border:1px solid #303038;background:#0f0f12;color:#a9a9b2;font-size:12px;font-weight:750}
.txp-plat-btn.active{border-color:#f6d34b;background:#1c1a0e;color:#f6d34b}
.txp-plat.hide{display:none!important}


/* --------------------------------------------------------------------------
   v88 — Rapikan riwayat tabungan, utang/piutang, tabungan & investasi (Catatan)
   dan kartu Tunai / E-Wallet (Keuangan)
   -------------------------------------------------------------------------- */

/* Keterangan baris riwayat: pill jenis, tanggal, catatan di baris sendiri */
#noteSavingsHistory .note-tx-meta,#noteDebtList .note-tx-meta{gap:6px 8px;align-items:center;margin-top:7px;font-size:11.5px;line-height:1.5}
#noteSavingsHistory .note-tx-meta span+span::before,#noteDebtList .note-tx-meta span+span::before{content:none;margin:0}
.nt-kind,.nt-status{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap;background:#292515;color:#f6d34b}
.nt-kind.in{background:#173323;color:#8ee5a2}
.nt-kind.out{background:#341719;color:#ff9292}
.nt-status{background:#202026;color:#a9a9b2;font-weight:700}
.nt-status.paid{background:#173323;color:#8ee5a2}
.nt-status.partial{background:#292515;color:#f6d34b}
.nt-date{color:#8d8d96;white-space:nowrap}
.nt-note{flex:1 1 100%;color:#b4b4bd;line-height:1.55;margin-top:1px}

/* HP / layar sempit: teks selebar kartu, nominal + tombol di baris bawah */
@media (max-width:600px){
  #noteSavingsHistory .note-tx-row,#noteDebtList .note-tx-row{
    grid-template-columns:40px minmax(0,1fr) auto;
    grid-template-areas:"icon main main" "icon amt act";
    column-gap:12px;row-gap:12px;align-items:center;padding:14px;
  }
  #noteSavingsHistory .note-tx-icon,#noteDebtList .note-tx-icon{grid-area:icon;align-self:start;width:40px;height:40px;border-radius:12px}
  #noteSavingsHistory .note-tx-main,#noteDebtList .note-tx-main{grid-area:main}
  #noteSavingsHistory .note-tx-main>b,#noteDebtList .note-tx-main>b{font-size:15px;line-height:1.35}
  #noteSavingsHistory .note-tx-amount,#noteDebtList .note-tx-amount{
    grid-area:amt;text-align:left;font-size:16px;font-weight:800;align-self:center;
    padding-top:12px;border-top:1px solid rgba(255,255,255,.07);
  }
  #noteSavingsHistory .tx-actions,#noteDebtList .tx-actions{
    grid-area:act;justify-self:stretch;justify-content:flex-end;align-self:stretch;align-items:flex-end;
    padding-top:0;
  }
  #noteSavingsHistory .tx-actions .tx-ic,#noteDebtList .tx-actions .tx-ic{width:36px;height:36px}
}

/* Tabungan & investasi: baris 2 kolom + progress bar */
#noteWealthList .simple-row.wealth-row{
  grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:9px;padding:13px 14px;
}
#noteWealthList .wealth-row .sr-main{min-width:0}
#noteWealthList .wealth-row b{font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
#noteWealthList .wealth-row small{font-size:11px;line-height:1.5;margin-top:4px}
#noteWealthList .wealth-row>strong{font-size:14px;color:#f6d34b;text-align:right}
#noteWealthList .wealth-bar{grid-column:1/-1;margin:0}

/* Keuangan: kartu Tunai & E-Wallet — ubin ikon + label, nominal di bawah, chip platform */
.account-grid .card.acct{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  column-gap:11px;row-gap:12px;padding:16px;
}
.account-grid .card.acct small{margin:0;font-size:12.5px;font-weight:700;color:#a9a9b2}
.account-grid .card.acct strong{grid-column:1/-1;font-size:22px;line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
.acct-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}
.acct-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.acct-ic-cash{background:#123321;color:#8ee5a2;border:1px solid #1e6b3f}
.acct-ic-ew{background:#211f15;color:#f6d34b;border:1px solid #3d3925}
.acct-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.acct-chips.hide{display:none}
.acct-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:99px;background:#0f0f12;border:1px solid #2a2a31;color:#d8d8de;font-size:11.5px;font-weight:700;max-width:100%}
.acct-chip>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-chip .wlogo{width:20px;height:20px;border-radius:6px}
@media (min-width:1024px){
  #finance .account-grid .card.acct{padding:20px 22px}
  #finance .account-grid .card.acct strong{font-size:28px}
  .acct-ic{width:42px;height:42px;border-radius:13px}
}

/* v88b — tidak ada teks terpotong titik-titik: nama & keterangan boleh turun baris */
#noteWealthList .wealth-row .sr-main b,
#noteWealthList .wealth-row .sr-main small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
#noteSavingsHistory .note-tx-main>b,#noteDebtList .note-tx-main>b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
@media (max-width:600px){
  /* garis pemisah selebar kolom teks, di antara keterangan dan baris nominal */
  #noteSavingsHistory .note-tx-main,#noteDebtList .note-tx-main{padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07)}
  #noteSavingsHistory .note-tx-amount,#noteDebtList .note-tx-amount{padding-top:0;border-top:0}
  #noteSavingsHistory .tx-actions,#noteDebtList .tx-actions{align-items:center}
}
.account-grid .card.acct{align-content:start}