/*
 * Perbaikan tampilan mobile untuk SPA (/app) — 31 Agustus 2026.
 *
 * MASALAH YANG DIPERBAIKI: di lebar ponsel, halaman Dashboard melebar
 * sampai 923px pada layar 375px (2,5x lipat), sehingga seluruh halaman bisa
 * digeser ke samping dan sebagian isi terpotong. Halaman Laporan juga
 * meluber 8px. Diukur langsung di halaman live, bukan perkiraan.
 *
 * AKAR MASALAHNYA satu: "CSS grid blowout". Track `1fr` sebenarnya berarti
 * `minmax(auto, 1fr)`, dan minimum `auto` itu memakai lebar MIN-CONTENT
 * isinya. Jadi begitu ada kartu yang isinya tidak bisa menyusut (mis. kanvas
 * grafik atau baris teks nowrap), track-nya ikut melar melebihi wadahnya —
 * media query yang sudah benar pun kalah.
 *
 * KENAPA `min-width:0` PADA ANAK GRID, BUKAN MENIMPA grid-template-columns:
 * desain aslinya SUDAH punya tangga breakpoint sendiri yang rapi
 * (dash__grid--4: 4 kolom -> 2 kolom di <=1100px; dash__grid--3: 3 -> 2 di
 * <=900px -> 1 di <=640px; dash__split: 2 -> 1 kolom di <=1100px).
 * Menimpa grid-template-columns berarti mengganti keputusan desain mereka,
 * padahal yang rusak cuma minimum otomatisnya. `min-width:0` mematikan
 * minimum itu saja dan membiarkan seluruh tangga breakpoint asli utuh —
 * sudah diuji pada 375/414/600/760/1000/1280px: tidak ada yang meluber dan
 * jumlah kolom di tiap breakpoint tetap sama persis seperti sebelumnya.
 *
 * Dimuat lewat <link> di index.html SESUDAH stylesheet bundel SPA, supaya
 * aturan dengan kekhususan setara menang lewat urutan. PENTING: kalau SPA
 * di-build ulang dan menimpa index.html, baris <link>-nya ikut hilang —
 * pasang lagi (sama seperti skrip tempelan lain di file itu).
 */

/* 1. Blowout grid — penyebab utama halaman melebar 923px.
      Berlaku di semua lebar (tidak dibungkus media query) karena minimum
      auto tidak pernah diinginkan di sini, termasuk di desktop. */
.dash__grid > *,
.dash__split > *,
.conv-page__summary > *,   /* Laporan Percakapan: kartu ringkasan metrik */
.dev-list__grid > * { min-width: 0; }
/* Daftar di atas hasil pemindaian seluruh halaman /app pada lebar 345px:
   setiap wadah grid dibandingkan lebar total track-nya terhadap lebar
   wadahnya sendiri. Kalau nanti ada halaman baru yang melebar ke samping di
   ponsel, cari nama kelas wadah grid-nya lalu tambahkan satu baris di sini —
   bukan menimpa grid-template-columns-nya. */

/* 2. Kanvas Chart.js tidak ikut menyusut saat wadahnya mengecil — kanvas
      857px di dalam kolom 293px. Tanpa ini, grafik sendirian sudah cukup
      membuat halaman bisa digeser ke samping. */
.p-chart,
.p-chart canvas { max-width: 100%; }

/* 3. Baris filter Dashboard (tab periode + rentang tanggal + tombol Apply).
      Pembungkusnya `.app-hub-head__actions` tidak pernah turun baris, jadi
      ia melebar mengikuti isinya (513px) dan menembus layar. `.dash-filter`
      sendiri sebenarnya sudah `flex-wrap:wrap` sejak awal — ia tidak pernah
      terpakai karena induknya tak pernah menyempit. */
@media (max-width: 720px) {
  .app-hub-head__actions {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
  .dash-filter { width: 100%; }
  /* Rentang tanggal boleh menyusut, tapi tetap diberi ruang dasar 160px
     supaya tanggalnya masih terbaca utuh, bukan terpotong jadi "01 …". */
  .dash-filter__range-trigger {
    flex: 1 1 160px;
    min-width: 0;
    justify-content: flex-start;
  }
  .dash-filter__range-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 4. Header chat CRM: tombol "Tandai Berhasil" (disisipkan
      web/crm-mark-won.js) selebar 128px membuat blok aksi jadi 218px pada
      layar 360px. Karena `.thread-head` ber-flex-wrap:nowrap dan blok aksi
      `flex:0 0 auto`, yang menyusut adalah `.thread-head__info` — tersisa
      6px, sehingga nama dan nomor kontak tertimpa tombol. Di layar sempit
      tombolnya jadi ikon saja: aksinya tetap ada, nama kontak kembali
      terbaca. Judul (title) tombol tetap menjelaskan fungsinya. */
@media (max-width: 560px) {
  [data-mark-won-btn] .wecrm-mw__label { display: none; }
  [data-mark-won-btn] { padding: 6px 9px !important; }
}

/* 5. Di layar paling sempit, tab Daily/Weekly/Monthly mengambil satu baris
      penuh dan dibagi rata, sehingga rentang tanggal + Apply mendapat baris
      sendiri dan tidak lagi berdesakan. */
@media (max-width: 480px) {
  .dash-filter__tabs { flex: 1 1 100%; }
  .dash-filter__tabs .dash-filter__tab { flex: 1 1 0; }
}