/* =====================================================
   CUSTOM SELECT DROPDOWN — Glass Morphism + Search
   ===================================================== */
.cs-wrap{
  position:relative;
  display:inline-block;
  width:100%;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}
.cs-wrap select{
  position:absolute;
  width:1px;height:1px;
  opacity:0;pointer-events:none;
  left:0;top:0;
}
.cs-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  background:rgba(18,20,38,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(167,139,250,0.18);
  border-radius:var(--r,10px);
  padding:9px 12px;
  font-size:13px;
  color:var(--tx,#e8eaf6);
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s,background .2s;
  user-select:none;
  min-height:38px;
}
.cs-trigger:hover{
  border-color:rgba(167,139,250,0.4);
  background:rgba(28,24,58,0.65);
}
.cs-wrap.cs-open .cs-trigger{
  border-color:var(--pu,#a78bfa);
  box-shadow:0 0 0 3px rgba(167,139,250,0.12);
  background:rgba(28,24,58,0.7);
}
.cs-trigger.cs-empty .cs-label{
  color:var(--tx3,#5c6080);
}
.cs-label{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
.cs-arrow{
  flex-shrink:0;
  color:var(--tx3,#5c6080);
  font-size:11px;
  transition:transform .25s;
  line-height:1;
}
.cs-wrap.cs-open .cs-arrow{
  transform:rotate(180deg);
  color:var(--pu,#a78bfa);
}

/* Panel — fixed positioning, always on top */
.cs-panel{
  display:none;
  position:fixed;
  background:rgba(10,12,26,0.92);
  backdrop-filter:blur(28px) saturate(1.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);
  border:1px solid rgba(167,139,250,0.28);
  border-radius:14px;
  overflow:hidden;
  z-index:99999;
  box-shadow:0 20px 60px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.05) inset,0 1px 0 rgba(167,139,250,0.2) inset;
  animation:csDrop .16s cubic-bezier(.4,0,.2,1);
}
@keyframes csDrop{
  from{opacity:0;transform:translateY(-6px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Scrollable options area — full panel height */
.cs-panel .cs-options-scroll{
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(167,139,250,0.3) transparent;
  overscroll-behavior:contain;
}
.cs-panel .cs-options-scroll::-webkit-scrollbar{width:5px}
.cs-panel .cs-options-scroll::-webkit-scrollbar-track{background:rgba(167,139,250,0.04);border-radius:3px}
.cs-panel .cs-options-scroll::-webkit-scrollbar-thumb{background:rgba(167,139,250,0.3);border-radius:3px}
.cs-panel .cs-options-scroll::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,0.5)}

/* Group header */
.cs-group{
  padding:6px 13px 5px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(167,139,250,0.75);
  font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif;
  background:rgba(167,139,250,0.07);
  border-top:1px solid rgba(167,139,250,0.12);
  margin-top:2px;
}
.cs-group:first-child{
  margin-top:0;
  border-top:none;
}

/* Option item */
.cs-opt{
  padding:9px 14px;
  font-size:12.5px;
  color:var(--tx,#e8eaf6);
  cursor:pointer;
  transition:background .15s,color .15s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cs-opt:hover{
  background:rgba(167,139,250,0.12);
  color:#fff;
}
.cs-opt.cs-selected{
  background:rgba(167,139,250,0.18);
  color:var(--pu,#a78bfa);
  font-weight:600;
}
.cs-opt.cs-selected:hover{
  background:rgba(167,139,250,0.26);
}
.cs-opt.cs-placeholder{
  color:var(--tx3,#5c6080);
  font-style:italic;
}

/* =====================================================
   FIX: PORTFOLIO TAMBAH ASET — Mobile = Desktop
   Ticker autocomplete & platform dropdown tetap muncul
   ===================================================== */

/* Form tambah aset: pertahankan 3 kolom di semua ukuran layar */
@media(max-width:700px){
  #af .fr{
    grid-template-columns:1fr 1fr 1fr!important;
  }
}
@media(max-width:440px){
  #af .fr{
    grid-template-columns:1fr 1fr!important;
  }
  /* Nama/Ticker & Platform tetap terlihat, full width di kolom 1 */
  #af .fr > .fg:nth-child(1){
    grid-column:1 / -1;
  }
  #af .fr > .fg:nth-child(3){
    grid-column:1 / -1;
  }
}

/* Pastikan dropdown tidak ter-clip di mobile */
#af .fg,
#af .fr{
  overflow:visible!important;
}

/* ticker-dd dan platform-dd: z-index tinggi, posisi fixed jika perlu */
#ticker-dd,
#platform-dd,
#ea-platform-dd{
  z-index:9999!important;
  max-height:240px!important;
}

/* Dropdown position di mobile dihandle oleh JS (_posDD) */

/* Teks label di form tambah aset tetap terbaca di layar kecil */
@media(max-width:440px){
  #af .fl{
    font-size:10px!important;
  }
  #af input, #af select{
    font-size:12px!important;
    padding:6px 8px!important;
  }
}

/* SVG icon alignment in tabs and buttons */
.tab svg, .bts svg, .in-stab svg, .ct svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}
.tab { display: inline-flex; align-items: center; gap: 5px; }
.in-stab { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }



/* -------------------------------------------------------
   CARD ALIGNMENT — desktop & global
   Pastikan semua card dalam grid selalu sama tinggi
   ------------------------------------------------------- */
.mrow, .mrow3 { align-items: stretch; }
.mrow > *, .mrow3 > * { min-width: 0; }
#sec-d .dash-sum-row { align-items: stretch; }
#sec-d .dash-sum-row > * { min-width: 0; }

/* -------------------------------------------------------
   FIX: Holdings table scroll — .card overflow:hidden
   blokkir scroll horizontal di dalam .tbl-scroll
   ------------------------------------------------------- */
#sec-p .card {
  overflow: visible !important;
}
/* Tapi tetap clip particles dan decorative overflow lainnya */
#sec-p .card::before,
#sec-p .card::after {
  overflow: hidden;
}
/* cat-group sendiri handle clip border-radius */
#sec-p .cat-group {
  overflow: hidden;
}
/* tbl-scroll: scroll container utama */
#sec-p .tbl-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 var(--r) var(--r);
}
/* Tabel holdings: min-width sama dengan yang di-generate JS */
#sec-p .tbl-scroll table {
  min-width: 720px;
  width: 100%;
}
/* Hapus max-width:0 yang destroy kolom */
#sec-p .htbl-cat td,
#sec-p .tbl-scroll td {
  max-width: none;
}

/* -------------------------------------------------------
   FIX: Riwayat Pindah Dana — amount terpotong
   Beri ruang lebih pada .txa (amount column)
   ------------------------------------------------------- */
@media (max-width: 768px) {
  #tf-history .txr {
    gap: 8px;
    flex-wrap: nowrap;
    padding: 8px 0;
  }
  #tf-history .txi {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }
  #tf-history .txn {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #tf-history .txm {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Amount: flex-shrink:0 supaya tidak dipersempit, max-width longgar */
  #tf-history .txa {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    text-align: right;
    max-width: 55% !important;
    min-width: 0;
  }
  /* Delete button */
  #tf-history .dbt {
    flex-shrink: 0;
    width: 22px;
    min-width: 22px;
  }
}

/* -------------------------------------------------------
   FIX: Portfolio legend cards — pastikan card tidak clip legend text
   ------------------------------------------------------- */
.p-alloc-card {
  overflow: visible !important;
}
.p-leg-v {
  margin-top: 10px;
  overflow: hidden;
  width: 100%;
}
.p-leg-v > div {
  min-width: 0;
  width: 100%;
}

/* -------------------------------------------------------
   FIX: Holdings cat-header-right — Rp value tidak terpotong
   ------------------------------------------------------- */
.cat-header-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cat-subtotal {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cat-pl {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  .cat-header-right {
    gap: 6px;
  }
  .cat-subtotal {
    font-size: 10px;
  }
  .cat-pl {
    font-size: 10px;
  }
}

/* -------------------------------------------------------
   FIX: Portfolio g2 (donut pair) — overflow visible
   agar legend tidak ter-clip
   ------------------------------------------------------- */
#sec-p .g2 > .card {
  overflow: visible !important;
  display: flex;
  flex-direction: column;
}



/* ================================================================
   TARGETED FIXES v4 — Pindah Dana clipping, scroll, nominal spacing
   ================================================================ */

/* ── 1. PINDAH DANA: garis kanan simetris dengan kiri, bisa scroll ── */
@media (max-width: 768px) {
  #sec-tf {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* scroll up/down bebas */
    overflow-y: visible !important;
  }
  .tf-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Card Pindah Dana: padding simetris kiri = kanan */
  #sec-tf .card {
    padding: 16px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: visible !important;
  }
  /* Semua input/select: tidak melebihi card */
  #sec-tf input,
  #sec-tf select,
  #sec-tf .fg input,
  #sec-tf .fg select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    padding: 9px 12px !important;
  }
  #sec-tf .fg {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  #tf-save {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  /* Info box: full width */
  #tf-convert-info,
  #tf-rate-toggle,
  #tf-manual-rate-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Riwayat: tidak dibatasi tinggi, bisa scroll dengan halaman */
  #tf-history {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #tf-history li {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* ── 2. DASHBOARD SALDO & HUTANG: nominal tidak mepet, fleksibel ── */
/* Desktop + mobile */
#sec-d .dd-card .dd-body {
  padding: 10px 16px 14px !important;
}
#sec-d .dd-acc-item {
  padding: 9px 2px !important;
  gap: 12px !important;
}
#sec-d .dd-acc-item .dd-left {
  flex: 1;
  min-width: 0;
}
#sec-d .dd-acc-item .dd-acc-val {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding-left: 8px !important;
  text-align: right !important;
}
#sec-d .dd-debt-item {
  padding: 9px 2px !important;
}
#sec-d .dd-debt-row {
  gap: 12px !important;
}
#sec-d .dd-debt-val {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding-left: 8px !important;
  text-align: right !important;
}
/* Hutang/Piutang tabel — padding kolom cukup */
#d-debts-list table {
  width: 100% !important;
  table-layout: auto !important;
}
#d-debts-list table td,
#d-debts-list table th {
  padding: 9px 10px !important;
  white-space: nowrap !important;
}
#d-debts-list table td:not(:first-child),
#d-debts-list table th:not(:first-child) {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}
@media (max-width: 768px) {
  /* Pada mobile: dd-body boleh scroll horizontal jika tabel lebar */
  #d-accounts-list,
  #d-debts-list {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #sec-d .dd-acc-item .dd-acc-val {
    font-size: 12px !important;
  }
  #sec-d .dd-acc-item .dd-acc-name {
    font-size: 11px !important;
  }
  #sec-d .dd-acc-item .dd-acc-type {
    font-size: 9px !important;
  }
  #d-debts-list table td,
  #d-debts-list table th {
    font-size: 11px !important;
    padding: 8px 8px !important;
  }
}

/* ── 3. GLOBAL: card tidak memotong konten ── */
.card {
  overflow: visible !important;
}
/* Kecuali card yang memang harus clip (sparkle effects) */
#sec-d .ds-card {
  overflow: hidden !important;
}
#sec-d .dd-card {
  overflow: hidden !important;
}
#sec-d .dc-card {
  overflow: hidden !important;
}


/* ================================================================
   FIXES v5 — Portrait clipping, acc spacing, chart padding, no slashed-0
   ================================================================ */

/* ── 1. PINDAH DANA portrait: simetris kiri = kanan, tidak terpotong ── */
#sec-tf {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}
.tf-layout {
  width: 100%;
  box-sizing: border-box;
}
/* Semua elemen dalam form pindah dana tidak boleh melebihi parent */
#sec-tf * {
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .tf-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #sec-tf .card {
    padding: 16px !important;
    overflow: visible !important;
    width: 100% !important;
  }
  #sec-tf input,
  #sec-tf select {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  #tf-save {
    width: 100% !important;
    padding: 12px !important;
  }
  #tf-history {
    max-height: none !important;
    overflow-y: visible !important;
  }
  /* Prevent inline style width override */
  #sec-tf [style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── 2. SALDO REKENING: nama & nominal tidak mepet ── */
#sec-d .dd-acc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#sec-d .dd-acc-item .dd-left {
  flex: 1;
  min-width: 0;
}
#sec-d .dd-acc-item .dd-acc-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sec-d .dd-acc-item .dd-acc-type {
  font-size: 10px;
  color: var(--tx3);
}
#sec-d .dd-acc-item .dd-acc-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--pu);
  font-variant-numeric: normal;
  flex-shrink: 0;
  white-space: nowrap;
  padding-left: 12px;
  text-align: right;
}
/* Hutang & piutang item spacing */
#sec-d .dd-debt-item {
  padding: 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#sec-d .dd-debt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}
#sec-d .dd-debt-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
#sec-d .dd-debt-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--rd);
  font-variant-numeric: normal;
  flex-shrink: 0;
  white-space: nowrap;
  padding-left: 12px;
  text-align: right;
}
/* Hutang/piutang per-person tabel */
#d-debts-list table td,
#d-debts-list table th {
  padding: 9px 12px !important;
  white-space: nowrap !important;
}
#d-debts-list table td:not(:first-child),
#d-debts-list table th:not(:first-child) {
  text-align: right !important;
  font-variant-numeric: normal !important;
}
#d-debts-list table td:first-child,
#d-debts-list table th:first-child {
  padding-left: 12px !important;
}

/* ── 3. CHART CARDS: padding dalam dc-card proporsional ── */
#sec-d .dc-card {
  padding: 16px 18px;
}
#sec-d .dc-card .dc-title {
  margin-bottom: 14px;
  padding-bottom: 10px;
}
/* Income progress bar: margin kiri kanan seragam */
#sec-d #d-inc-progress > div {
  padding: 0 2px;
}
#sec-d #d-inc-progress > div > div:first-child {
  padding: 0;
}
/* Exp chart wrap: konsisten padding */
#sec-d #d-exp-chart-wrap {
  padding: 0;
  width: 100%;
}
/* Pie legend: padding simetris */
#sec-d #d-pie-leg > div,
#sec-d #d-inc-pie-leg > div {
  padding: 4px 2px;
}
/* Nominal di legend: tidak mepet ke kanan */
#sec-d #d-pie-leg > div span:last-child,
#sec-d #d-inc-pie-leg > div span:last-child {
  padding-right: 2px;
}

/* ── 4. HAPUS SLASHED ZERO — font-variant-numeric: normal di semua angka hutang ── */
/* Override .mn class untuk area hutang/piutang */
#d-debts-list .mn,
#d-debts-list td,
#d-debts-list th,
#d-debts-list tfoot td {
  font-variant-numeric: normal !important;
  font-family: -apple-system,'Segoe UI',system-ui,sans-serif !important;
}
/* Saldo rekening angka */
#d-accounts-list .dd-acc-val,
#d-accounts-list .dd-acc-type {
  font-variant-numeric: normal !important;
}
/* Global override untuk semua nominal di dashboard */
#sec-d .mn {
  font-variant-numeric: normal !important;
}


/* ================================================================
   FIXES v6 — Portrait clipping, grip removed, chart text aligned
   ================================================================ */

/* ── 1. PORTRAIT / MOBILE: dc-card tidak terpotong ── */
@media (max-width: 768px) {
  /* Wrapper row: 1 kolom, no overflow */
  #sec-d .dash-charts-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* Setiap card: full width, simetris */
  #sec-d .dc-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 16px !important;
    overflow: visible !important;
  }
  /* Konten dalam card: tidak terpotong */
  #sec-d .dc-card > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Canvas donut: tinggi proporsional, full width */
  #sec-d .dc-card > div[style*="height:160px"] {
    height: 180px !important;
    width: 100% !important;
    position: relative !important;
  }
  /* Exp chart: full width */
  #sec-d #d-exp-chart-wrap {
    width: 100% !important;
    min-height: 160px !important;
    max-height: 320px !important;
    position: relative !important;
  }
  /* Progress bars: tidak terpotong */
  #sec-d #d-inc-progress {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #sec-d #d-inc-progress > div {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 2. SALDO REKENING: hapus grip, nama mulai dari kiri ── */
/* Sembunyikan grip di mana saja — drag masih bisa lewat item drag */
.dd-grip { display: none !important; }

/* dd-acc-item: layout bersih tanpa grip */
#sec-d .dd-acc-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 4px !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
#sec-d .dd-acc-item > div:first-child {
  flex: 1 !important;
  min-width: 0 !important;
}
#sec-d .dd-acc-item .dd-acc-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  cursor: default !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#sec-d .dd-acc-item .dd-acc-val {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  text-align: right !important;
  padding-left: 10px !important;
  font-variant-numeric: normal !important;
}

/* ── 3. INCOME PROGRESS: label kiri, nominal kanan, konsisten ── */
#sec-d #d-inc-progress > div {
  width: 100%;
  box-sizing: border-box;
}
/* Flex row label + nominal: tidak pernah overlap */
#sec-d #d-inc-progress > div > div:first-child {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
}
/* Label nama kategori: truncate jika panjang */
#sec-d #d-inc-progress > div > div:first-child > span:first-child {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Nominal kanan: tidak wrap, tidak terpotong */
#sec-d #d-inc-progress > div > div:first-child > span:last-child {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  text-align: right !important;
}
/* Progress bar track: container full width, fill mengikuti JS width */
#sec-d #d-inc-progress div[style*="border-radius:99px"][style*="overflow:hidden"] {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Jarak antar kategori konsisten */
#sec-d #d-inc-progress > div {
  margin-bottom: 12px !important;
}
#sec-d #d-inc-progress > div:last-child {
  margin-bottom: 0 !important;
}

/* Mobile: font sedikit lebih kecil agar muat */
@media (max-width: 768px) {
  #sec-d #d-inc-progress > div > div:first-child > span:first-child {
    font-size: 10px !important;
  }
  #sec-d #d-inc-progress > div > div:first-child > span:last-child {
    font-size: 10px !important;
  }
}


/* ================================================================
   FIXES v7 — Riwayat below form, Rekening mobile, cat icons
   ================================================================ */

/* ── 1. PINDAH DANA: flex column, riwayat selalu di bawah ── */
.tf-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Form card: tidak overflow */
#sec-tf .card {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
#sec-tf input, #sec-tf select {
  width: 100% !important;
  box-sizing: border-box !important;
}
#tf-save { width: 100% !important; box-sizing: border-box !important; }

/* ── 2. REKENING & SALDO AWAL mobile: semua tabel tidak terpotong ── */
@media (max-width: 768px) {
  #sec-a {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Grid: 1 kolom */
  .acc-grid-2, .acc-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  /* Card: tidak overflow, padding simetris */
  #sec-a .card {
    overflow: hidden !important;
    padding: 14px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Wrapper tabel: scroll horizontal */
  #sec-a .card > div[style*="overflow"],
  #sec-a .tbl-wrapper,
  #sec-a .card > div:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
  /* Tabel rekening: scroll, tidak terpotong */
  #sec-a .tbl {
    display: table !important;
    width: 100% !important;
    min-width: 340px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Wrapper tabel: scrollable */
  #sec-a table {
    min-width: 340px !important;
    width: 100% !important;
  }
  /* thead > th, tbody > td: compact tapi readable */
  #sec-a .tbl th,
  #sec-a table th {
    font-size: 9px !important;
    padding: 7px 6px !important;
    white-space: nowrap !important;
  }
  #sec-a .tbl td,
  #sec-a table td {
    font-size: 11px !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }
  /* Kolom nama: bisa wrap */
  #sec-a table td:nth-child(2) {
    white-space: normal !important;
    min-width: 90px !important;
    max-width: 140px !important;
  }
  /* Tombol edit/hapus: compact */
  #sec-a .ebt, #sec-a .dbt {
    padding: 3px 6px !important;
    font-size: 11px !important;
  }
  /* Footer total: wrap jika perlu */
  #sec-a .card > div:last-child {
    font-size: 11px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Rate bar: wrap */
  .rate-bar {
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
}
@media (max-width: 440px) {
  #sec-a table {
    min-width: 300px !important;
  }
  #sec-a .tbl th,
  #sec-a table th { font-size: 8px !important; padding: 6px 5px !important; }
  #sec-a .tbl td,
  #sec-a table td { font-size: 10px !important; padding: 7px 5px !important; }
}

/* ── 3. PORTFOLIO CATEGORY ICONS — distinctive per type ── */
/* Base icon container */
.cat-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Saham US & ETF — biru */
.cat-icon-us {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.25);
}
/* Crypto — amber/oranye */
.cat-icon-crypto {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.25);
}
/* Saham IDX — hijau */
.cat-icon-idx {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.25);
}
/* Lainnya — ungu */
.cat-icon-other {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.25);
}
/* Emas — kuning/amber */
.cat-icon-emas {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
/* Reksa Dana — indigo */
.cat-icon-reksadana {
  background: rgba(129, 140, 248, 0.15);
  color: #818cf8;
  border: 1px solid rgba(129, 140, 248, 0.25);
}
/* Obligasi — biru muda */
.cat-icon-obligasi {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}
/* Deposito — teal/hijau */
.cat-icon-deposito {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25);
}
/* P2P Lending — pink */
.cat-icon-p2p {
  background: rgba(244, 114, 182, 0.15);
  color: #f472b6;
  border: 1px solid rgba(244, 114, 182, 0.25);
}
/* Properti — oranye */
.cat-icon-properti {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.25);
}
/* SVG di dalam icon: inherit color */
.cat-icon svg {
  stroke: currentColor !important;
}


/* ================================================================
   FIXES v8 — Datatable desktop/mobile, Budget mobile, Tabungan form
   ================================================================ */

/* ── 2. DATA TRANSAKSI DESKTOP — soft structured view ── */
/* Table container */
#sec-dt .card { overflow: hidden !important; }
#sec-dt #dt-tbl-wrap,
#sec-dt .card > div[style*="overflow"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
/* Table header */
#sec-dt .tbl th {
  background: var(--bg3) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  padding: 10px 10px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--tx3) !important;
  border-bottom: 1px solid var(--bd) !important;
  white-space: nowrap !important;
}
/* Table rows */
#sec-dt .tbl td {
  padding: 9px 10px !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.04) !important;
  font-size: 12px !important;
  vertical-align: middle !important;
}
#sec-dt .tbl tr:hover td { background: var(--tbl-hover) !important; }
/* Category dot column */
#sec-dt .tbl td span[style*="border-radius:50%"] {
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 0 5px currentColor;
}
/* Amount: tabular, right-aligned */
#sec-dt .tbl td .mn {
  font-variant-numeric: normal !important;
  white-space: nowrap !important;
}
/* Type badge: soft */
#sec-dt .tbl td span[style*="border-radius:4px"] {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
}

/* ── 3. DATA TRANSAKSI MOBILE CARDS — structured, soft view ── */
@media (max-width: 640px) {
  .dt-card {
    background: rgba(20,22,39,0.7) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    margin-bottom: 8px !important;
    transition: border-color .2s !important;
  }
  .dt-card:hover { border-color: rgba(167,139,250,0.15) !important; }
  .dt-card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  .dt-card-desc {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tx) !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
  }
  .dt-card-amount {
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-variant-numeric: normal !important;
  }
  .dt-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 8px !important;
    align-items: center !important;
  }
  .dt-card-date {
    font-size: 10px !important;
    color: var(--tx3) !important;
  }
  .dt-card-cat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    color: var(--tx2) !important;
  }
  .dt-card-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  .dt-card-pm {
    font-size: 10px !important;
    color: var(--tx3) !important;
    background: rgba(255,255,255,0.04) !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
  }
  .dt-card-type {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
  }
  .dt-card-actions {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
}

/* ── 4. TABUNGAN FORM: Tujuan Rekening field ── */
@media (max-width: 768px) {
  /* in-row2 di form tabungan: stack 1 kolom */
  #in-p-tab .in-row2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5. BUDGET MOBILE — structured, soft view ── */
@media (max-width: 768px) {
  /* Header controls: wrap, full width */
  #bc > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 0 0 12px !important;
  }
  #bc > div:first-child > * { width: 100% !important; }
  #bc > div:first-child > span { width: auto !important; }
  /* Selectors row: flex wrap */
  #bc > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }
  #bg-yr { width: 90px !important; flex-shrink: 0 !important; }
  #bg-view { flex: 1 !important; min-width: 120px !important; }
  /* Edit budget button: full width */
  #btn-toggle-bgt {
    width: 100% !important;
    text-align: center !important;
    font-size: 13px !important;
  }
  /* Summary cards: 2 kolom */
  #bc .mrow {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Budget edit panel: padding compact */
  #budget-edit-panel .card { padding: 14px !important; }
  #budget-edit-panel .ct { font-size: 13px !important; }
  /* Budget table: horizontal scroll */
  #sec-b #bc > div:last-child {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: var(--rl) !important;
  }
  #bg-tbl {
    min-width: 700px !important;
    font-size: 10px !important;
  }
  #bg-thead th {
    font-size: 8px !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }
  #bg-tbody td {
    font-size: 10px !important;
    padding: 7px 6px !important;
    white-space: nowrap !important;
  }
  /* Budget edit grid: compact */
  #budget-edit-grid { font-size: 11px !important; }
  #budget-edit-grid input { font-size: 12px !important; padding: 6px 8px !important; }
  /* Expand/collapse buttons */
  #budget-edit-panel button { font-size: 11px !important; }
}


/* ================================================================
   FIXES v9 — Budget toolbar, DT mobile cards, dots
   ================================================================ */

/* ── 1. BUDGET TOOLBAR — clean, structured, desktop + mobile ── */
.budget-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.budget-toolbar-left {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}
.budget-ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.budget-sel {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 10px;
  min-width: 100px;
  background: rgba(28,31,53,0.8);
  border: 1px solid var(--bd);
  color: var(--tx);
}
.budget-sel#bg-yr { width: 100px; }
.budget-sel#bg-view { width: 160px; }
.budget-toolbar-right {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
@media (max-width: 768px) {
  .budget-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
  }
  .budget-toolbar-left {
    flex-direction: row !important;
    gap: 10px !important;
  }
  .budget-ctrl-group { flex: 1; }
  .budget-sel { width: 100% !important; font-size: 14px !important; padding: 10px 12px !important; }
  .budget-toolbar-right { width: 100% !important; }
  #btn-toggle-bgt {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
  /* Summary cards: 2 col */
  #bm.mrow { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  /* Budget table wrapper */
  #bc > div:last-child {
    border-radius: var(--rl) !important;
    overflow: hidden !important;
  }
  /* Budget table scroll */
  #bg-tbl { min-width: 680px !important; font-size: 10px !important; }
}

/* ── 2. DATA TRANSAKSI MOBILE CARDS — complete redesign, soft view ── */
@media (max-width: 640px) {
  /* Container */
  #dt-cards { display: flex; flex-direction: column; gap: 6px; padding: 0; }

  /* Card base */
  .dt-card {
    background: rgba(18,20,36,0.85) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
    padding: 14px 14px 12px !important;
    transition: border-color .2s, box-shadow .15s !important;
    overflow: hidden !important;
  }
  .dt-card:active { border-color: rgba(167,139,250,0.2) !important; }

  /* Top row: description + amount + actions */
  .dt-card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 9px !important;
  }
  .dt-card-desc {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tx) !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.35 !important;
  }
  /* Right side: amount + actions stacked */
  .dt-card-top > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }
  .dt-card-amount {
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    font-variant-numeric: normal !important;
    letter-spacing: -0.01em !important;
  }
  .dt-card-actions {
    display: flex !important;
    gap: 4px !important;
  }
  .dt-card-actions .ebt,
  .dt-card-actions .dbt {
    padding: 3px 7px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* Meta row: date · category dot · badge · currency */
  .dt-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px 8px !important;
    padding-top: 2px !important;
  }
  /* Divider line above meta */
  .dt-card-meta::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(255,255,255,0.05) !important;
    margin-bottom: 5px !important;
  }
  .dt-card-date {
    font-size: 10px !important;
    color: var(--tx3) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }
  /* Category: dot + name */
  .dt-card-cat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    color: var(--tx2) !important;
    font-weight: 500 !important;
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .dt-card-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 4px currentColor !important;
  }
  /* Payment method badge */
  .dt-card-pm {
    font-size: 9px !important;
    color: var(--tx3) !important;
    background: rgba(255,255,255,0.05) !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    white-space: nowrap !important;
  }
  /* Type badge: Pemasukan/Pengeluaran/Hutang */
  .dt-card-type {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }
  /* Currency badge */
  .dt-card-meta .bdg {
    font-size: 8px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
  }
}

/* ── 3. DOTS: simple fixed colors, desktop + mobile ── */
/* Desktop table dot */
#sec-dt .tbl td span[style*="border-radius:50%"] {
  box-shadow: 0 0 5px rgba(255,255,255,0.3) !important;
}
/* Mobile dot */
.dt-card-dot {
  display: inline-block;
  box-shadow: 0 0 5px rgba(255,255,255,0.3);
}


/* ================================================================
   FIXES v10 — TabInv stacked layout
   ================================================================ */

/* ── Distribusi Tabungan & Investasi: stacked, bukan 2-kolom ── */
#sec-d .dash-tabinv .dt5-body {
  padding: 0 !important;
  overflow: visible !important;
}
.tabinv-section {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tabinv-section:last-child {
  border-bottom: none;
}
/* stacked bar: full width */
.tabinv-section > div[style*="display:flex;height:18px"] {
  margin: 10px 0 12px !important;
}
/* Legend rows: full width */
.tabinv-section > div:last-child > div {
  padding: 6px 0 !important;
}
/* Nominal in legend: right aligned */
.tabinv-section > div:last-child > div > span:last-child {
  min-width: 110px !important;
  text-align: right !important;
}
@media (max-width: 768px) {
  .tabinv-section { padding: 10px 12px !important; }
}


/* ================================================================
   FIXES v11 — Add Asset Form: structured, picker modal
   ================================================================ */

/* ── Form field rows ── */
.af-row {
  margin-bottom: 12px;
}
.af-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.af-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 10px;
}

/* ── Picker button (readonly display) ── */
.af-picker-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(28,31,53,0.8);
  border: 1px solid var(--bd);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  user-select: none;
  min-height: 42px;
}
.af-picker-btn:hover {
  border-color: var(--pu);
  background: rgba(167,139,250,0.06);
}
.af-picker-btn:active {
  background: rgba(167,139,250,0.1);
}
.af-picker-btn svg {
  flex-shrink: 0;
  opacity: 0.5;
}
.af-picker-btn span {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* ── Picker modals ── */
#ticker-picker-modal,
#platform-picker-modal {
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
}
/* Ticker list items */
#ticker-picker-list > div,
#platform-picker-list > div {
  transition: background .1s;
}
/* Search input inside modal */
#ticker-search {
  background: rgba(28,31,53,0.9) !important;
  border-color: rgba(167,139,250,0.2) !important;
}
#ticker-search:focus {
  border-color: var(--pu) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.1) !important;
}

/* Desktop: modal centered instead of bottom sheet */
@media (min-width: 769px) {
  #ticker-picker-overlay,
  #platform-picker-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #ticker-picker-overlay[style*="display:block"],
  #platform-picker-overlay[style*="display:block"] {
    display: flex !important;
  }
  #ticker-picker-modal,
  #platform-picker-modal {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 480px !important;
    max-width: 95vw !important;
    max-height: 70vh !important;
    border-radius: 16px !important;
  }
}

/* Mobile: bottom sheet  */
@media (max-width: 768px) {
  .af-row-2 { grid-template-columns: 1fr 1fr !important; }
  #ticker-picker-modal,
  #platform-picker-modal { max-height: 75vh !important; }
}

/* ===== BAGIAN 3: HOLDING LIST UI/UX IMPROVEMENTS ===== */

/* Asset color dot — subtle glow ring sesuai warna aset */
.asset-dot {
  transition: transform .2s;
}
tr:hover .asset-dot {
  transform: scale(1.3);
}

/* Table row hover lebih subtle dan clean */
.htbl-cat tr {
  transition: background .15s;
}
.htbl-cat tr:hover {
  background: rgba(255,255,255,0.025);
}

/* Asset type badge — lebih compact */
.bdg {
  font-size: 9px !important;
  padding: 2px 6px !important;
  letter-spacing: .02em;
}

/* Platform text — secondary hierarchy */
.htbl-cat td:nth-child(4) {
  color: var(--tx3) !important;
  font-size: 10px !important;
}

/* Qty column — monospace tabular */
.htbl-cat td:nth-child(5) {
  color: var(--tx2);
  font-size: 11px !important;
}

/* Buy price — muted, secondary */
.htbl-cat td:nth-child(6) {
  color: var(--tx2) !important;
  font-size: 11px !important;
}

/* Current price — slightly prominent */
.htbl-cat td:nth-child(7) {
  font-weight: 600;
  font-size: 11px !important;
}

/* Value (Nilai) — bold emphasis */
.htbl-cat td:nth-child(8) {
  font-weight: 700;
  font-size: 11px !important;
}

/* Allocation progress bar — taller, rounded */
.pbw {
  height: 4px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.05) !important;
}
.pbf {
  border-radius: 4px !important;
  transition: width .4s ease;
}

/* Cat group — slightly more prominent border */
.cat-group {
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(15,17,32,0.4) !important;
}

/* Cat header — cleaner vertical rhythm */
.cat-header {
  padding: 12px 16px !important;
  background: rgba(255,255,255,0.015);
}
.cat-header:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* Table header — cleaner */
.tbl th {
  padding: 7px 8px 10px 0 !important;
  font-size: 9px !important;
  color: var(--tx3) !important;
  letter-spacing: .1em !important;
}

/* Table cell — tighter vertical */
.tbl td {
  padding: 8px 8px 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}