/* ============================================================================
   mobile-polish.css — global small-screen hardening for older pages.
   Pairs with assets/js/mobile-polish.js (which wraps bare .table elements in
   a scroll container). Only affects narrow viewports; desktop is untouched.
   ========================================================================== */

/* Tables auto-wrapped by mobile-polish.js scroll smoothly on touch. */
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
  /* Tighter gutters so cards use the full width. */
  .container, .container-fluid { padding-inline: 12px; }
  .container, .container-fluid, .card, .table-responsive, .row { max-width: 100%; }

  /* Denser, readable tables. */
  .table { font-size: .86rem; }
  .table > :not(caption) > * > * { padding: .5rem .55rem; }

  /* Header/toolbar rows wrap instead of overflowing. */
  .card-header .d-flex,
  .d-flex.justify-content-between,
  .d-flex.justify-content-end { flex-wrap: wrap; gap: .5rem; }

  /* Oversized gradient heroes shrink their padding. */
  .ps-hero, .emr-hero, .dash-welcome, .coa-page-header,
  .page-header, .hero, .card-body.p-4, .card-body.p-5 { padding: 16px !important; }

  /* Modals use more of the small screen. */
  .modal-dialog { margin: .5rem; }
  .modal-body { padding: 16px; }

  /* Stat/KPI grids that hard-code many equal columns collapse to two. */
  .coa-stats-row, .stats-row, .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Buttons in a flex toolbar don't get squeezed to unusable widths. */
  .btn-toolbar .btn, .card-header .btn { white-space: nowrap; }

  /* Long inputs/selects fill the row rather than overflowing it. */
  .form-control, .form-select { max-width: 100%; }
}

@media (max-width: 479.98px) {
  /* On very small phones, single-column KPI grids. */
  .coa-stats-row, .stats-row, .kpi-grid { grid-template-columns: 1fr !important; }
}