/* ============================================================
   Global mobile-responsiveness baseline.
   Loaded last (after every other stylesheet) on every shell — admin
   dashboard, customer dashboard, login, and signup — so these fixes
   apply app-wide without duplicating them per page. Individual pages
   still carry their own deeper responsive work (grid breakpoints,
   condensed card content, etc.) on top of this.
   ============================================================ */

/* Prevent iOS Safari's auto-zoom-on-focus. It triggers on any text
   input/select/textarea rendered under 16px, which is most of this
   app's form fields (13-15px reads fine on desktop) — on a phone that
   shows up as the whole page suddenly jumping/zooming the instant
   someone taps into a field. */
@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="search"],
  textarea,
  select,
  .form-control,
  .select2-container--default .select2-selection--single .select2-selection__rendered,
  .select2-search--dropdown .select2-search__field {
    font-size: 16px !important;
  }

  /* Last-resort safety net — every table/report already scrolls
     internally via its own overflow-x:auto wrapper; this just makes
     sure nothing can force the whole page to scroll sideways. */
  html, body { overflow-x: hidden; }
}

/* Every dashboard page (admin and customer alike) nests a second
   .container-fluid inside #dynamic-content — each page fragment wraps
   itself in one — on top of the shell's own
   .container-fluid > .row > .col-lg-* chain around #dynamic-content.
   That's invisible on desktop (there's width to spare), but on a phone
   it stacks two lots of Bootstrap's ~24px gutter back to back, eating a
   big chunk of an already-narrow screen. Collapse the shell's own
   contribution to zero so only the page's own container controls the
   gutter — one gutter instead of two. */
@media (max-width: 767.98px) {
  .content-wrapper > .content > .container-fluid,
  .content-wrapper > .content > .container-fluid > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
}

/* That single remaining gutter is still Bootstrap's default ~24px —
   tighten it on phones so content sits closer to the edge without
   touching it outright. */
@media (max-width: 480px) {
  .container-fluid { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 481px) and (max-width: 767.98px) {
  .container-fluid { padding-left: 16px; padding-right: 16px; }
}

/* Bootstrap modals: a bit more breathing room, and let footer button
   rows wrap onto a second line instead of clipping or squeezing. */
@media (max-width: 576px) {
  .modal-dialog { margin: 10px auto; max-width: calc(100% - 20px); }
  .modal-body { padding: 16px; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
}