/* LastWar web: tampilan HP (lebar <= 760px). Dipasang build.py di semua halaman versi web, SESUDAH <style> halaman.
   Layar PC tidak terpengaruh. Desain halaman di PC: satu layar penuh, hanya tabel yang bergulir; di HP itu membuat
   kotak info + filter menghabiskan layar dan tabel tinggal beberapa baris -> di HP halaman digulir biasa. */
/* Browser tanpa akses folder lokal (kelas dari lw-mobile.js): fitur yang butuh Python/folder laptop disembunyikan */
.lw-nolocal [id^="btnShot"], .lw-nolocal #btnCapture, .lw-nolocal label.direct, .lw-nolocal #lwLocal { display: none !important; }

@media (max-width: 760px) {
  html, body { height: auto !important; }
  body { display: block !important; font-size: 14px; }

  /* Header: judul + info folder + tombol tema di atas, menu turun ke beberapa baris (tidak terpotong ke samping) */
  header { gap: 6px 8px !important; padding: 8px 10px !important; }
  header h1 { font-size: 16px !important; margin: 0 !important; }
  nav.tabs { order: 10; flex: 1 1 100%; flex-wrap: wrap; gap: 4px !important; margin: 0 !important; }
  nav.tabs a { padding: 6px 10px !important; font-size: 13px !important; background: var(--panel-2); }
  nav.tabs a.active { background: var(--sel); }
  nav.tabs .ddmenu { min-width: 170px; }
  nav.tabs .ddmenu a { background: transparent; padding: 9px 12px !important; }
  #fileInfo { flex: 1 1 auto; min-width: 0; font-size: 12px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Isi: tinggi mengikuti isi, halaman yang bergulir */
  main, main:not([hidden]) { display: block !important; overflow: visible !important; padding: 8px !important; max-width: none !important; }
  main .panel, .panel { display: block !important; padding: 10px !important; margin-bottom: 10px !important; }
  .page-title, .intro { font-size: 13px; }
  #startScreen { margin: 16px 8px !important; }

  /* Kartu angka: 2 kolom sama lebar */
  .stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
  .stat { min-width: 0 !important; padding: 8px 10px !important; }
  .stat b { font-size: 18px !important; }
  .stat span { display: block; line-height: 1.25; }

  /* Filter & paging: kontrol memenuhi lebar, mudah disentuh */
  .filters, .pager-bar, .actions, .tables, .filehead, .form-foot { flex-wrap: wrap !important; gap: 8px !important; }
  .filters input[type=search], .filters input[type=text], .filters select { flex: 1 1 100%; width: auto !important; min-width: 0; }
  .filters > *, .pager-bar > * { min-width: 0; }
  .filehead input { width: auto !important; flex: 1 1 140px; }
  .pager { flex-wrap: wrap; }
  input, select, button { font-size: 14px; }
  .pager button { min-width: 36px; height: 34px; }
  .page-size { flex: 1 1 100%; }

  /* Tabel: tinggi mengikuti jumlah baris, lebar lebih dari layar bisa digeser ke samping */
  .table-wrap { flex: none !important; height: auto !important; max-height: none !important; min-height: 0 !important;
                overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; }
  th { position: static !important; padding: 8px !important; }
  td { padding: 5px 8px !important; }
  th.fit, td.fit { padding-right: 12px !important; }

  /* Grid 1 kolom (mis. .work di UploadThumbnail): kolom 1fr tanpa minmax(0,..) melebar mengikuti isi -> lewat layar */
  .work { grid-template-columns: minmax(0, 1fr) !important; }
  .work > *, .side, .preview { min-width: 0; max-width: 100%; }
  input[type=file] { max-width: 100%; }

  /* Popup & menu aksi tidak boleh lebih lebar dari layar */
  dialog, #form, form, .actmenu, #dlgPic { max-width: calc(100vw - 16px) !important; }
  dialog { width: calc(100vw - 16px); }
  table.prev img, .cmp img { max-width: 100%; height: auto; }
}