/* Global responsive overrides
 * Goal: improve mobile/tablet responsiveness without changing desktop UI.
 */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Tables: keep look, allow horizontal scroll on small screens */
@media (max-width: 768px) {
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table th,
  .table td {
    white-space: nowrap;
  }
}

/* Modals: better fit on small screens */
@media (max-width: 576px) {
  .modal-dialog {
    margin: .5rem;
    max-width: calc(100% - 1rem);
  }
}