/* POTENSI PRESTASI PTAC — HOTFIX V1.6.3an
   Global responsive guard for HP / tablet / laptop.
   Only presentation rules. No changes to data, routes, permissions or actions.
   Loaded from index.html and deliberately scoped to stable PTAC containers.
*/

/* Keep flex/grid tracks within the device viewport. */
html { max-width: 100%; }
html body,
html body #app,
html body .shell,
html body .main,
html body .content,
html body #page {
  min-width: 0;
  max-width: 100%;
}
html body { overflow-x: clip; }
html body .content,
html body #page { width: 100%; }
html body .card,
html body .twocol,
html body .stats,
html body .pagehead,
html body .toolbar,
html body .att-filters,
html body .potential-dir,
html body .student-table-wrap {
  min-width: 0;
  max-width: 100%;
}
html body .twocol > *,
html body .stats > *,
html body .form-grid > *,
html body .card > *,
html body .pagehead > *,
html body .toolbar > * {
  min-width: 0;
}

/* Report-detail modal: its inner CSS grid must not enlarge the outer dialog.
   The Tahfizh history table is horizontally scrollable inside its own wrapper. */
html body .modal-backdrop {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 12px;
}
html body .modal-backdrop > .modal {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: min(825px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
html body .modal .stack,
html body .modal #report-detail-content {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
html body .modal :is(.stack, .report-standard, .report-standard-grid,
  .ptac-tahfizh-card, #ptac-tahfizh-student-panel,
  .ptac-tahfizh-scroll, .report-builder-row, .report-builder-grid,
  .ptac-report-block, .report-progress, .report-step, .student-detail-view) {
  min-width: 0;
  max-width: 100%;
}
html body .modal .stack > *,
html body .modal #report-detail-content > *,
html body .modal .report-standard-grid > *,
html body .modal .ptac-tahfizh-form > * {
  min-width: 0;
  max-width: 100%;
}
html body .modal .report-standard,
html body .modal .ptac-tahfizh-card {
  box-sizing: border-box;
  width: 100%;
}
html body .modal .report-standard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html body .modal .report-standard-grid span,
html body .modal .report-standard-grid strong,
html body .modal .callout,
html body .modal .ptac-tahfizh-hint,
html body .modal h2,
html body .modal h3,
html body .modal h4,
html body .modal p,
html body .modal label {
  overflow-wrap: anywhere;
}
html body .modal :is(input, textarea, select) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
html body .modal .modal-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
  min-width: 0;
  gap: 12px;
}
html body .modal .modal-head h2 { min-width: 0; }
html body .modal .modal-head .iconbtn { flex: 0 0 auto; }
html body .modal .actions,
html body .modal .ptac-tahfizh-buttons,
html body .modal .ptac-report-actions {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

/* Only tables travel sideways; do not force the page or the modal to do so. */
html body :is(.table-scroll, .ptac-tahfizh-scroll,
  .import-table, .table-mobile-scroll, .ptac-responsive-table-scroll,
  .monitor-table-wrap, .staff-perf-table) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
html body .table-scroll > table,
html body .ptac-tahfizh-scroll > table,
html body .table-mobile-scroll > table,
html body .monitor-table-wrap > table,
html body .staff-perf-table > table,
html body .ptac-responsive-table-scroll > table {
  width: max-content;
  min-width: 100%;
  max-width: none;
}
html body :is(.table-scroll, .ptac-tahfizh-scroll, .table-mobile-scroll,
  .monitor-table-wrap, .staff-perf-table)
  :is(th, td) { white-space: nowrap; }
html body :is(.table-scroll, .ptac-tahfizh-scroll, .table-mobile-scroll,
  .monitor-table-wrap, .staff-perf-table)
  :is(th, td) :is(button, .btn) { white-space: nowrap; }

/* Tablet / narrow laptop. Keep the sidebar behavior supplied by PTAC. */
@media (max-width: 850px) {
  html body .main,
  html body .shell.is-collapsed .main { margin-left: 0; }
  html body .content { box-sizing: border-box; width: 100%; padding: 14px; }
  html body .topbar { min-width: 0; }
  html body .topbar > * { min-width: 0; }
  html body .pagehead { flex-wrap: wrap; }
  html body .pagehead .actions { flex-wrap: wrap; }
  html body .modal-backdrop > .modal { padding: 16px; }
}

/* Phone portrait and small landscape: single-column forms / metadata. */
@media (max-width: 600px) {
  html body .content { padding: 12px; }
  html body .modal-backdrop {
    align-items: center;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }
  html body .modal-backdrop > .modal {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 14px 12px;
    border-radius: 14px;
  }
  html body .modal .report-standard-grid,
  html body .modal .report-builder-grid,
  html body .modal .form-grid,
  html body .modal .ptac-tahfizh-form,
  html body .modal .potential-dir-kv {
    grid-template-columns: minmax(0, 1fr);
  }
  html body .modal .ptac-tahfizh-card { padding: 10px; }
  html body .modal .report-standard { padding: 12px; }
  html body .modal .report-standard-grid { gap: 12px; }
  html body .modal :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px; /* avoid automatic zoom on iPhone */
  }
  html body .modal .actions > .btn,
  html body .modal .ptac-tahfizh-buttons > .btn { flex: 1 1 auto; }
  html body .toolbar, html body .card-title { flex-wrap: wrap; }
  html body .toast { max-width: calc(100vw - 24px); left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Smaller phones: 320–390 CSS px. */
@media (max-width: 390px) {
  html body .modal-backdrop > .modal { padding: 12px 10px; }
  html body .modal .modal-head h2 { font-size: 1.08rem; line-height: 1.35; }
  html body .card { padding: 12px; }
  html body .content { padding: 10px; }
  html body .report-standard-grid { gap: 9px; }
}

/* Respect the application's original PDF/print layout. */
@media print {
  html body { overflow-x: visible; }
  html body .modal-backdrop,
  html body .modal-backdrop > .modal { max-width: none; max-height: none; overflow: visible; }
  html body :is(.table-scroll, .ptac-tahfizh-scroll) { overflow: visible; }
}