/* ============================================================================
   responsive-fix-v6.css — lapisan ADITIF, dimuat PALING AKHIR.
   ============================================================================
   Mengikuti pola yang sudah dipakai admin.bebasmendalam.com/assets/polish.css:
   menambah, tidak menimpa. Tidak ada satu pun aturan di sini yang mengubah
   selektor/kelas yang sudah dipakai halaman — semuanya kelas baru berawalan
   rw6- atau penajaman di dalam @media yang belum tercakup.

   Breakpoint yang SUDAH ada di main.css: 1024, 768, 520, 480 px.
   Yang BELUM tercakup: layar ≤ 400 px (Redmi/Infinix/Oppo entry level yang
   sangat umum di kalangan guru & orang tua) dan layar lebar > 1600 px.
   ============================================================================ */

/* --- 1. Pembungkus tabel (dipasang oleh responsive-fix-v6.js) ------------- */
.rw6-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  /* Inersia gulir ala native di iOS Safari — tanpa ini gulir horizontal terasa
     kaku dan orang tua/guru mengira tabelnya memang terpotong. */
  -webkit-overflow-scrolling: touch;
  /* overflow-x:auto membuat elemen jadi konteks scroll; overflow-y harus
     dibiarkan visible-setara agar dropdown/tooltip di dalam sel tidak terpotong. */
  overflow-y: visible;
  /* Petunjuk visual bahwa masih ada kolom di kanan: bayangan tepi yang muncul
     hanya saat konten benar-benar lebih lebar dari wadahnya. */
  background:
    linear-gradient(to right, var(--bg-card, #fff) 30%, rgba(0,0,0,0)),
    linear-gradient(to left,  var(--bg-card, #fff) 30%, rgba(0,0,0,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.rw6-table-wrap > table { margin-bottom: 0; }

/* --- 2. Jaring pengaman anti-meluber ------------------------------------- */
/* Kalau ada SATU elemen saja yang lebih lebar dari layar, seluruh halaman ikut
   bisa digeser ke samping dan header terlihat "putus". Ini penyebab paling
   sering dari laporan "tampilan di HP berantakan" yang tidak bisa dilacak ke
   satu komponen tertentu. */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 768px) {
  /* Elemen yang paling sering meluber: gambar/kanvas hasil generator, pratinjau
     kartu pelajar, dan blok <pre> berisi keluaran AI. */
  #app-content img,
  #app-content canvas,
  #app-content svg:not(.rw6-boleh-lebar) { max-width: 100%; height: auto; }
  #app-content pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
  /* URL panjang (link Google Drive/YouTube di Papan Cerita Kelas) memaksa lebar. */
  #app-content a { overflow-wrap: anywhere; }
}

/* --- 3. Target sentuh ---------------------------------------------------- */
/* WCAG 2.1 AA (2.5.5) menyarankan minimal 44x44 px. Hanya diterapkan pada
   perangkat sentuh — di desktop tombol kecil justru lebih rapi. */
@media (hover: none) and (pointer: coarse) {
  #app-content button,
  #app-content .btn,
  #app-content select,
  #app-content input[type="checkbox"] + label,
  #app-content .tab-item { min-height: 44px; }
  #app-content .btn-icon,
  #app-content .icon-btn { min-width: 44px; min-height: 44px; }
}

/* --- 4. iOS: cegah zoom otomatis saat fokus ke input ---------------------- */
/* Safari iOS MEMBESARKAN seluruh halaman kalau font input < 16px, dan tidak
   mengembalikannya setelah blur — halaman terlihat "melompat" lalu terpotong.
   Ini kelihatan seperti bug tata letak padahal murni perilaku Safari. */
@media (max-width: 768px) {
  #app-content input,
  #app-content select,
  #app-content textarea { font-size: 16px; }
}

/* --- 5. Layar sangat sempit (≤ 400 px) ----------------------------------- */
/* Belum tercakup breakpoint mana pun di main.css (terkecil: 480 px). */
@media (max-width: 400px) {
  #app-content .card { padding: 12px; }
  #app-content .stat-grid,
  #app-content .k-type-grid { grid-template-columns: 1fr !important; }
  #app-content table { font-size: 12px; }
  #app-content table th,
  #app-content table td { padding: 6px 8px; white-space: nowrap; }
  .page-title-header { font-size: 15px; }
}

/* --- 6. Safe area (HP berponi & gestur bar) ------------------------------ */
/* index.php sudah memakai viewport-fit=cover, tapi padding safe-area belum
   dipasang di mana pun — di iPhone 12+ dan Android bergestur, tombol paling
   bawah bisa tertimpa indikator home. */
@supports (padding: max(0px)) {
  #app-content { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .app-header  { padding-top: max(0px, env(safe-area-inset-top)); }
}

/* --- 7. Web desktop lebar ------------------------------------------------ */
/* Di monitor 1080p/1440p konten membentang penuh sehingga baris teks jadi
   sangat panjang dan melelahkan dibaca (ukuran baris nyaman: 60-80 karakter). */
@media (min-width: 1600px) {
  #app-content { max-width: 1480px; margin-left: auto; margin-right: auto; }
}

/* --- 8. Hormati preferensi gerak minimal --------------------------------- */
/* microinteractions.css & ui-refresh-v5.css sudah punya sebagian; ini menutup
   animasi yang belum tercakup, termasuk garis pemindai di Parents Hub. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}