/* SPPG JBB V10.3.44 — peningkatan kenyamanan HP/layer sentuh.
   HANYA presentasi; tidak mengubah nilai formulir, kalender, izin atau data.
   Aturan ini dibatasi untuk layar sempit dan tidak aktif saat mencetak.
*/
@media screen and (max-width: 800px) {
  /* Batasi lebar komponen, tanpa memotong tabel panjang. */
  #app .app-shell, #app .app-main, #app .page-view,
  #app .page-view > .card, #app .card > .row > div,
  #app .page-title > div:first-child { min-width: 0; max-width: 100%; }
  #app .page-title, #app .page-view .row { column-gap: 10px; row-gap: 10px; }
  #app #pageHeading, #app #who, #app .mobile-bar strong { overflow-wrap: anywhere; }
  /* Browser mengelola gerakan diagonal; geser vertikal tetap bisa lanjut
     ke halaman, sementara gerakan horizontal dipakai tabel. */
  #app :is(.tablewrap, .audit42-scroll, .monitor-table, .sched20calendar) {
    max-width: 100%;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* Biarkan konten modal panjang bergulir tanpa ikut menggeser halaman. */
  dialog.dialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 16px;
    overscroll-behavior-y: contain;
  }
  #editDialog > .row:first-child,
  #passwordDialog > .row:first-child {
    position: sticky;
    top: -16px;
    z-index: 1;
    background: #fff;
    padding: 8px 0 10px;
  }
  #app .side-nav { padding-bottom: max(26px, env(safe-area-inset-bottom)); }
  #app .mobile-bar button,
  #app .page-view .actions button,
  #app .page-view form button[type=submit] { min-height: 44px; }
  /* Safari iOS: cegah zoom otomatis ketika mulai mengetik. */
  #app input:not([type=checkbox]):not([type=radio]),
  #app textarea, #app select,
  dialog.dialog input:not([type=checkbox]):not([type=radio]),
  dialog.dialog select { font-size: 16px; }
  /* Layar HP pendek saat keyboard ditampilkan. */
  #app .sppg-notif-panel { overscroll-behavior-y: contain; }
}
@media screen and (max-width: 480px) {
  #app .page-title > div:first-child { flex: 1 1 160px; }
  #app .page-title #logout { flex: 0 0 auto; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .side-nav { transition: none; }
}