/* Shared mobile helpers + attendance kiosk tweaks */

/* Ensure Bootstrap table-responsive always scrolls on touch devices */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Attendance kiosk */
@media (max-width: 420px) {
  .as-shell { padding: 1rem 0.75rem 1.5rem; }
  .as-logo-hero { height: 56px; }
  .as-title-hero { font-size: 1.05rem; }
  .as-clock-time { font-size: 1.85rem; }
  .as-type-btn { padding: 0.9rem 0.35rem; }
  .as-type-btn .as-type-code { font-size: 0.78rem; }
  .as-fp { width: 110px; height: 110px; font-size: 2.6rem; }
}

@media (min-width: 768px) {
  .as-shell { max-width: 640px; padding-top: 2rem; }
  .as-clock-time { font-size: 2.6rem; }
}

/* Portal: prevent accidental horizontal page bounce; children may still scroll */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

.app-shell {
  max-width: 100vw;
}

/* Make long action columns scroll with the table, not push the page */
@media (max-width: 767.98px) {
  .table td.text-nowrap {
    white-space: nowrap;
  }

  /* Pagination stays usable */
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem;
  }

  .pagination .page-link {
    padding: 0.35rem 0.55rem;
    font-size: 0.85rem;
  }
}