/* responsive-fixes.css — perbaikan responsif lintas-device (dari DEVICE_AUDIT.md).
   Dimuat SETELAH style.css di base.html & base_admin.html. Hanya layout/struktur
   (font-size, overflow, breakpoint, safe-area) — TIDAK menyentuh warna/token. */

/* ───────────────────────────────────────────────────────────────────────────
   [HIGH] iOS input-zoom. Safari iOS auto-zoom halaman saat user fokus ke input
   ber-font-size < 16px lalu tidak zoom-out → layout "lompat". Banyak input app
   pakai 13–14.5px. Paksa 16px HANYA di mobile (desktop tak berubah). !important
   untuk menang atas rule komponen ber-specificity tinggi (mis. #chatInput).
   Checkbox/radio/range dikecualikan (font-size tak relevan).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   [MED] Tabel data tanpa wrapper overflow → seluruh halaman ikut horizontal-
   scroll di HP. Pengaman: bila kelas tabel ini tidak terbungkus, jadikan blok
   yang bisa scroll sendiri. (Wrapper eksplisit di template tetap lebih baik;
   ini jaring pengaman tambahan, tidak merusak yang sudah dibungkus.)
   ─────────────────────────────────────────────────────────────────────────── */
/* CATATAN: .history-table-v2 SENGAJA TIDAK disentuh — shell.css sudah membuatnya
   layout kartu responsif (thead disembunyikan, tr → grid) di semua lebar; menambah
   display:block/overflow malah merusaknya. (Audit keliru di titik ini.) */
@media (max-width: 768px) {
  .audit-table,
  .ad-table,
  .bm-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Tabel admin yang SUDAH dibungkus .table-scroll-wrap: biarkan wrapper yang
     scroll (table tetap display:table + min-width:900px-nya), jangan dobel. */
  .table-scroll-wrap > .ad-table {
    display: table;
    overflow-x: visible;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   [HIGH/owner] Admin shell di mobile. Section-nav (.admin-tabs) sudah flex-wrap
   (fungsional), tapi 10+ tab jadi banyak baris. Jadikan strip scroll horizontal
   (pola yang sama dipakai filter-tabs app). Dan kembalikan tombol logout yang
   ke-hidden di ≤640px (base_admin.css menyembunyikan semua .admin-topbar__nav a).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* !important: admin___layout.css (di-load SETELAH file ini) menetapkan
     .admin-tabs{flex-wrap:wrap} sebagai rule dasar — tanpa !important override
     kita kalah urutan-sumber. */
  .admin-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-tabs a { flex-shrink: 0; }
}
@media (max-width: 640px) {
  .admin-topbar__nav a[href="/auth/logout"] { display: inline-flex !important; }
}

/* Catatan: fix safe-area (#9) dilakukan presisi di komponen masing-masing
   (qda-stage-chat-dock.css .stage-dock-fab, qda-tour-menu.css .qda-tour-toast)
   agar menghormati nilai mobile yang sudah ada, bukan override broad. */