/* ================================================================
   RUMAHKU — Tata Letak Layar Besar                          [v18]
   Dimuat PALING AKHIR, sesudah style.css & responsive.css.
   ----------------------------------------------------------------
   SEMUA aturan di berkas ini ada di dalam @media (min-width:700px).
   Tampilan HP (di bawah 700px) tidak tersentuh sama sekali.

   1. MENU BAWAH TIDAK LAGI HILANG SAAT DI-SCROLL
      Penyebabnya: #app-frame memakai min-height:100vh (bukan tinggi
      tetap), dan #views sebagai anak flex punya min-height:auto —
      artinya ia tidak boleh menyusut di bawah tinggi isinya. Jadi
      overflow-y:auto miliknya tidak pernah aktif; yang menggulir
      justru seluruh halaman, dan menu ikut tergulir keluar layar.
      Perbaikannya: tinggi frame dikunci 100dvh dan #views diberi
      min-height:0 supaya benar-benar menggulir sendiri.

   2. DI ATAS 1024px: menu pindah jadi SIDEBAR kiri, isi halaman
      memakai ruang yang tersisa. Aturan column-count bawaan
      (yang memecah kartu jadi dua kolom dan membuatnya terpotong)
      dimatikan, diganti grid yang rapi.
   ================================================================ */

/* ================================================================
   TABLET & LAYAR SEDANG — 700px ke atas
   ================================================================ */
@media (min-width: 700px) {

  /* Halaman tidak lagi menggulir; yang menggulir hanya isi konten. */
  html, body { height: 100%; min-height: 0; overflow: hidden; }
  body { background: #cfc8b8; align-items: center; padding: 0; }

  #app-frame {
    height: 100vh; height: 100dvh;
    min-height: 0;
    max-width: 720px;
    border-radius: 0;
    box-shadow: 0 0 60px rgba(0, 0, 0, .18);
  }

  /* Inilah kuncinya: tanpa min-height:0, overflow-y:auto tidak aktif. */
  #views {
    min-height: 0;
    flex: 1 1 auto;
    padding: 12px 26px 96px;   /* sisakan ruang untuk tombol + */
    overscroll-behavior: contain;
  }

  /* Menu bawah kini di luar area gulir, jadi selalu terlihat. */
  .bottomnav { flex: none; position: relative; bottom: auto; }

  .fab { bottom: 92px; }

  /* Batang gulir yang lebih halus */
  #views::-webkit-scrollbar { width: 10px; }
  #views::-webkit-scrollbar-thumb { background: #d6cebb; border-radius: 20px; border: 3px solid var(--cream); }
  #views::-webkit-scrollbar-thumb:hover { background: #c4bba6; }
  #views::-webkit-scrollbar-track { background: transparent; }
}

/* Di atas 700px layarnya cukup tinggi, frame boleh punya sudut membulat
   dan jarak dari tepi layar. */
@media (min-width: 700px) and (min-height: 640px) {
  body { padding: 20px 0; }
  #app-frame { height: calc(100vh - 40px); border-radius: 22px; }
}

/* ================================================================
   LAYAR LEBAR — 900px ke atas: daftar jadi dua kolom
   ================================================================ */
@media (min-width: 900px) {
  #app-frame { max-width: 880px; }

  #taskList,
  #belanjaList,
  .journal-list,
  #goalProgress,
  .link-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  /* elemen yang harus melebar penuh di dalam grid di atas */
  .pg, .sg-bar, .kp-warn, .iv-note, .tg-ask, .lg-empty { grid-column: 1 / -1; }

  /* #linksBody dipakai bergantian: berisi SATU .link-list (tab Link) atau
     BANYAK .vendor-card (tab Vendor). Kalau dijadikan grid, .link-list akan
     terjepit di satu kolom lalu kartunya saling tumpuk. Flex-wrap menangani
     kedua bentuk itu: satu anak melebar penuh, banyak anak jadi dua kolom. */
  #linksBody { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  #linksBody > * { flex: 1 1 calc(50% - 6px); min-width: 0; }
  #linksBody > .link-list, #linksBody > .pg, #linksBody > .empty { flex: 1 1 100%; }
  .link-list > *, #taskList > *, #belanjaList > *, .journal-list > * { margin-bottom: 0; }
  .vendor-card, .task-card, .belanja-card, .j-card { margin-bottom: 0; }
}

/* ================================================================
   DESKTOP — 1024px ke atas: menu jadi sidebar kiri
   ================================================================ */
@media (min-width: 1024px) {

  #app-frame {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "side top"
      "side main";
  }

  /* --- sidebar --- */
  .bottomnav {
    grid-area: side;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3px;
    background: #f3ede1;
    border-top: none;
    border-right: 1px solid var(--line);
    padding: 20px 14px;
    overflow-y: auto;
  }
  .bottomnav::before {
    content: "Rumahku";
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink2);
    opacity: .7;
    padding: 2px 14px 14px;
  }
  .nav-btn {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 14px;
    text-align: left;
    transition: background .15s, color .15s;
  }
  .nav-btn .ni { font-size: 19px; width: 22px; text-align: center; }
  .nav-btn:hover { background: rgba(0, 0, 0, .045); }
  .nav-btn.active { background: var(--gold); color: #fff; box-shadow: 0 4px 12px rgba(201, 162, 39, .35); }
  .nav-btn.active:hover { background: var(--gold-d); }

  /* --- topbar --- */
  .topbar {
    grid-area: top;
    position: static;
    padding: 16px 30px 14px;
    border-bottom: 1px solid var(--line);
  }
  .topbar .brand-logo { width: 30px; height: 30px; }
  .topbar .brand-text strong { font-size: 17px; }

  /* --- isi halaman --- */
  #views {
    grid-area: main;
    /* ruang bawah disisakan agar isi terakhir tidak tertutup tombol + */
    padding: 20px 30px 96px;
  }
  #views > .view.active { max-width: 1000px; margin: 0 auto; }

  .fab { right: 30px; bottom: 30px; }

  /* --- matikan pemecahan kolom bawaan yang membuat kartu terpotong --- */
  #view-home, #view-finance, #view-report, #view-more,
  #view-belanja, #view-tasks, #view-links {
    column-count: initial; -webkit-column-count: initial; column-gap: normal;
  }
  #view-home > .card, #view-finance > #finBody > .card,
  #view-report > .card, #view-more > .card, #belanjaList > .belanja-card,
  #taskList > .task-card, #linksBody > .vendor-card {
    display: block; width: auto;
  }
  /* quick-grid harus TETAP grid — jangan ikut direset jadi block */
  #view-home > .quick-grid { display: grid; width: auto; }
  #view-home .page-title, #view-home > .hero-card, #view-finance .page-title,
  #view-finance > .balance-card, #view-finance > .seg, #view-report .page-title,
  #view-more .page-title, #view-belanja .page-title, #view-belanja > p,
  #view-tasks .page-title, #view-tasks > p, #view-tasks > .seg,
  #view-links .page-title, #view-links > .seg {
    column-span: none; -webkit-column-span: none;
  }

  /* --- Beranda jadi dasbor dua kolom --- */
  #view-home.active {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  #view-home.active > .hero-card,
  #view-home.active > .quick-grid { grid-column: 1 / -1; }
  #view-home.active > .card { margin-bottom: 0; }

  .hero-card { padding: 20px 24px; }
  .hero-weather { padding: 14px 12px; }
  .quick-grid { grid-template-columns: repeat(5, 1fr); gap: 16px 12px; }
  .q-ico { width: 60px; height: 60px; font-size: 25px; }
  .q-item { font-size: 12px; }

  /* --- Laporan: grafik berdampingan --- */
  #view-report.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  #view-report.active > .page-title { grid-column: 1 / -1; }
  #view-report.active > .card { margin-bottom: 0; }
  #cardProjection, #cardPattern { grid-column: 1 / -1; }

  /* --- Lainnya: dua kolom --- */
  #view-more.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  #view-more.active > .page-title, #view-more.active > p.center { grid-column: 1 / -1; }
  #view-more.active > .card { margin-bottom: 0; }

  /* --- Kalender: bulan di kiri, acara harian di kanan --- */
  #view-calendar.active { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  #view-calendar.active > .page-title { grid-column: 1 / -1; }
  #view-calendar.active > .card { margin-bottom: 0; }
  .cal-cell { font-size: 14px; }

  /* --- Keuangan & Log: satu kolom, lebarnya dibatasi biar enak dibaca --- */
  #view-finance.active, #view-log.active { max-width: 880px; }
  .tx-col h4 { font-size: 13px; }
  .txc-t { font-size: 13.5px; } .txc-d { font-size: 11.5px; } .txc-a { font-size: 14px; }

  /* --- sentuhan kecil --- */
  .card, .balance-card, .vendor-card, .task-card, .belanja-card, .j-card, .goal-card, .bud-card, .lg-row {
    transition: box-shadow .18s, transform .18s;
  }
  .vendor-card:hover, .task-card:hover, .belanja-card:hover, .j-card:hover, .lg-row:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .11);
  }
  .link-item:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .11); }
  .btn, .nav-btn, .seg-btn, .icon-btn, .q-item, .u-edit, .mini-add, .pg-b, .lg-chip { cursor: pointer; }
  .q-item:hover .q-ico { transform: translateY(-2px); }
  .q-ico { transition: transform .15s; }
  .modal { max-width: 620px; }
  .j-gallery { grid-template-columns: repeat(4, 1fr); }
}

/* ================================================================
   LAYAR SANGAT LEBAR — 1400px ke atas
   ================================================================ */
@media (min-width: 1400px) {
  #app-frame { max-width: 1340px; grid-template-columns: 264px minmax(0, 1fr); }
  #views { padding: 24px 40px 96px; }
  #views > .view.active { max-width: 1140px; }
  .quick-grid { grid-template-columns: repeat(6, 1fr); }
  #view-links.active #linksBody,
  #view-tasks.active #taskList,
  .journal-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}