/* =======================================================
   MOBILE RESPONSIVE — v2 FINAL
   Aturan: 2-kolom konsisten, no clipping, portfolio scroll
   ======================================================= */

/* -------------------------------------------------------
   BREAKPOINT 768px — Smartphone & Small Tablet
   ------------------------------------------------------- */
@media (max-width: 768px) {

  /* === WRAPPER === */
  .apw {
    padding: 10px 10px 70px;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    box-sizing: border-box;
  }

  /* === HEADER: single compact row, no overflow === */
  .hdr {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 12px;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .hdr > div:first-child { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .hdr h1 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdr .sub { display: none; }
  .hr { flex-shrink: 0; flex-wrap: nowrap; gap: 4px; align-items: center; }

  /* === TABS === */
  .tabs { padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 10px 9px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }

  /* ================================================
     GRID CARD RULES: WAJIB 2 KOLOM, SAMA BESAR
     ================================================ */

  /* --- Generic summary cards --- */
  .mrow,
  .mrow3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .mrow > *,
  .mrow3 > * { min-width: 0; }

  .mc {
    padding: 10px 11px;
    min-width: 0;
    box-sizing: border-box;
    height: 100%;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .ml { font-size: 9px; }
  .mv {
    font-size: 13px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .ms { font-size: 10px; }

  /* --- DASHBOARD: Row 1 & 2 summary (ds-card) — 2 kolom, sama tinggi --- */
  #sec-d .dash-sum-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    align-items: stretch !important;
  }
  #sec-d .dash-sum-row > * { min-width: 0; }
  #sec-d .ds-card {
    padding: 10px 11px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 76px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  #sec-d .ds-card .ds-label {
    font-size: 9px !important;
    margin-bottom: 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #sec-d .ds-card .ds-val {
    font-size: 14px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  #sec-d .ds-card .ds-sub {
    font-size: 10px !important;
    margin-top: 3px !important;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
  }

  /* --- DASHBOARD CHARTS: 2 kolom --- */
  #sec-d .dash-charts-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  #sec-d .dc-card {
    padding: 12px 10px !important;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  #sec-d .dc-card .dc-title {
    font-size: 9px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- DASHBOARD DETAIL (Saldo & Hutang): 1 kolom --- */
  #sec-d .dash-detail-row,
  #dash-acc-debt-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* --- DASHBOARD HEADER --- */
  #sec-d .dash-header {
    padding: 12px 14px !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  #sec-d .dash-header .dh-greet h2 { font-size: 14px !important; }
  #sec-d .dash-header .dh-greet p { font-size: 10px !important; }
  #sec-d .dash-month-bar { padding: 8px 10px !important; gap: 6px !important; }

  /* --- DASHBOARD Tabungan & Investasi: 2 kolom --- */
  #sec-d .tabinv-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* --- PORTFOLIO SUMMARY: 2 kolom --- */
  #sec-p .mrow,
  #sec-p .mrow3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #sec-p .mc { min-height: 74px; }
  #sec-p .mv { font-size: 12px !important; }

  /* --- PORTFOLIO CHART PAIR (donut): 2 kolom --- */
  #sec-p .g2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ================================================
     PORTFOLIO HOLDINGS TABLE
     Solusi: scroll horizontal per cat-group.
     Tabel tetap full desktop style (min-width 700px),
     user swipe kanan untuk lihat kolom tersembunyi.
     TIDAK ada column yang di-hide atau di-truncate parah.
     ================================================ */
  #sec-p .cat-group {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
  }
  #sec-p .tbl-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100%;
  }
  #sec-p .tbl-scroll table,
  #sec-p .htbl,
  #sec-p .htbl-cat {
    /* Reset any fixed table layout */
    table-layout: auto !important;
    min-width: 700px !important;
    width: auto !important;
  }
  /* Setiap td: normal overflow, wrapping dinonaktifkan */
  #sec-p .htbl td,
  #sec-p .htbl-cat td {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    padding: 7px 5px !important;
  }
  #sec-p .htbl th,
  #sec-p .tbl th {
    font-size: 9px !important;
    padding: 5px 5px 8px !important;
    white-space: nowrap !important;
  }
  /* Drag handle sembunyikan di mobile (tidak ada mouse) */
  #sec-p .drag-handle { display: none !important; }

  /* Cat group header */
  .cat-header { padding: 8px 10px; }
  .cat-header-left { gap: 7px; }
  .cat-header-right { gap: 8px; }
  .cat-name { font-size: 11px; white-space: nowrap; }
  .cat-subtotal { font-size: 10px; white-space: nowrap; }
  .cat-pl { font-size: 10px; white-space: nowrap; }
  .cat-count { font-size: 9px; }

  /* Scrollbar tipis untuk tabel portfolio */
  #sec-p .tbl-scroll::-webkit-scrollbar { height: 3px; }
  #sec-p .tbl-scroll::-webkit-scrollbar-thumb {
    background: rgba(167,139,250,0.35);
    border-radius: 2px;
  }

  /* ================================================
     SECTION LAINNYA
     ================================================ */

  /* Yearly */
  #yr-sum {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .yr-charts-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Data Transaksi summary */
  #dt-sum {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Budget table */
  #bg-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Input forms */
  .in-row3 { grid-template-columns: 1fr 1fr !important; }
  .in-row21,
  .in-row2 { grid-template-columns: 1fr !important; }
  input[type='date'] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* Pindah Dana */
  .tf-layout { grid-template-columns: 1fr !important; }
  /* TASK 4: Mobile Pindah Dana — mirror struktur Input Transaksi */
  #sec-tf .card { padding: 16px !important; }
  #sec-tf .card > div[style*="flex-direction:column"],
  #sec-tf .card > div[style*="flex-direction: column"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  /* Tanggal + Deskripsi: 2 kolom seperti in-row21 */
  #sec-tf .fg:has(#tf-dt),
  #sec-tf .fg:has(#tf-ds) { width: 100%; }
  /* Dari + Ke: 2 kolom setara seperti in-row2 */
  #sec-tf .fg:has(#tf-from),
  #sec-tf .fg:has(#tf-to) { width: 100%; }
  /* Nominal: full width seperti Input Transaksi */
  #sec-tf .fg:has(#tf-amt) { width: 100%; }
  /* Label style identik fl */
  #sec-tf .fl { font-size: 11px !important; font-weight: 600 !important; color: var(--tx2) !important; margin-bottom: 5px !important; display: block !important; }
  /* Input/select style identik */
  #sec-tf input, #sec-tf select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
  }
  /* Tombol simpan: full width, identik bts */
  #tf-save {
    width: 100% !important;
    margin-top: 4px !important;
    padding: 12px !important;
    font-size: 13px !important;
  }
  /* Convert info box: compact */
  #tf-convert-info {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  /* Rate toggle: compact */
  #tf-rate-toggle { padding: 10px 12px !important; }
  #tf-manual-rate-row { padding: 12px !important; }

  /* Rekening & Saldo: 1 kolom */
  .acc-grid-2,
  .acc-grid-3 { grid-template-columns: 1fr !important; }

  /* Modal */
  .ov { padding: 8px !important; }
  .ovbox { padding: 16px 14px !important; max-height: 95vh !important; width: 100% !important; box-sizing: border-box !important; }

  /* Rate bar */
  .rate-bar { padding: 7px 10px; font-size: 11px; gap: 6px; flex-wrap: wrap; }

  /* Toast */
  .toast { bottom: 10px; right: 10px; left: 10px; max-width: none; font-size: 12px; }
}

/* -------------------------------------------------------
   BREAKPOINT 440px — Layar sangat kecil
   ------------------------------------------------------- */
@media (max-width: 440px) {
  .apw { padding: 8px 8px 70px; }
  .hdr { padding: 7px 10px; border-radius: 10px; }
  .hdr h1 { font-size: 13px; }
  .tab { padding: 9px 7px; font-size: 10px; }

  /* Semua summary cards: TETAP 2 kolom */
  .mrow, .mrow3 { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  #sec-d .dash-sum-row { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  #sec-p .mrow, #sec-p .mrow3 { grid-template-columns: 1fr 1fr !important; }
  /* Donut charts: stack 1 kolom di layar ≤440px agar tidak terpotong */
  #sec-p .g2.p-donut-row { grid-template-columns: 1fr !important; }
  #yr-sum { grid-template-columns: 1fr 1fr !important; }
  #dt-sum { grid-template-columns: 1fr 1fr !important; }

  /* Nilai nominal: font lebih kecil agar muat */
  .mv { font-size: 11px !important; }
  #sec-d .ds-card .ds-val { font-size: 12px !important; }

  /* Charts: dashboard 1 kolom, yearly 1 kolom */
  #sec-d .dash-charts-row { grid-template-columns: 1fr !important; }
  .yr-charts-row { grid-template-columns: 1fr !important; }

  /* Input forms: 1 kolom di layar sangat kecil */
  .in-row3 { grid-template-columns: 1fr !important; }
}