/* ── Mobile baseline ─────────────────────────────────────────────
   Low-risk, high-ROI fixes that apply site-wide at phone widths.
   Rules only kick in at ≤ 768px (Bootstrap md breakpoint) unless
   noted otherwise. Load AFTER bootstrap/style/custom so we win
   any specificity ties.

   Fixes here (in order):
     1. Kill horizontal page scroll — the #1 mobile bug source
     2. Cap images / videos / iframes at 100% container width
     3. Wrap long unbreakable strings (URLs, hashes, phone numbers)
     4. Ensure form inputs are 16px+ so iOS doesn't zoom on focus
     5. Enforce minimum 44×44 tap targets on interactive elements
     6. Make un-wrapped tables scroll horizontally instead of pushing
        the page wider than the viewport
     7. Modal/dropdown width caps

   Add rules to this file BEFORE inventing bespoke mobile queries
   inside individual view files — one place to reason about.
   ────────────────────────────────────────────────────────────── */

/* ── 1. Kill horizontal scroll ─────────────────────────────────
   `overflow-x: hidden` on html+body catches any child that
   accidentally exceeds viewport width. Applied everywhere (not
   media-query-scoped) because it's harmless on desktop and can't
   be worked around at smaller widths. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── 2. Media caps ────────────────────────────────────────────
   Any raw <img>, <video>, or <iframe> without an explicit width
   still respects its container. `height: auto` preserves aspect. */
img, video, iframe, canvas, svg:not([width]) {
  max-width: 100%;
  height: auto;
}

/* ── 3. Long-string wrapping ──────────────────────────────────
   URLs, JWT tokens, hashes, phone numbers, file paths — any
   long unbreakable string that would push a card off-screen. */
.wrap-anywhere,
.text-break,
.long-string {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Common places these show up in the app — apply automatically
   so we don't have to remember to add a class. */
.message-body,
.notification-body,
.chat-bubble,
.listing-description,
.listing-title,
.address,
.token,
.email,
code, pre, kbd, samp {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── 4. Form input font-size (prevents iOS zoom on focus) ─────
   iOS Safari zooms the viewport when a focused input's computed
   font-size is < 16px. Force 16px minimum on all inputs — the
   only place bumping this hurts visually is a really tight
   layout, and 16px is the browser default anyway. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
}

/* ── 5. Tap target minimum (44×44, per Apple HIG) ─────────────
   Applied ONLY to clearly-interactive elements at mobile widths.
   Skips inline links inside prose (they'd bloat body text) —
   those are covered by `padding: 8px` on their parent .tap-safe
   class if needed. */
@media (max-width: 768px) {
  .btn,
  button,
  .icon-btn,
  .nav-link,
  .dropdown-toggle,
  .page-link,
  a.btn,
  input[type="submit"],
  input[type="button"],
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    /* Vertical padding fills the 44px without shifting text baseline. */
    padding-top: max(0.5rem, var(--tap-padding-y, 0.5rem));
    padding-bottom: max(0.5rem, var(--tap-padding-y, 0.5rem));
  }

  /* Icon-only buttons: centre content in the 44×44 box. */
  .btn-icon,
  .icon-btn,
  .btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── 6. Auto-scroll unwrapped tables ──────────────────────────
   Any bare <table class="table"> not wrapped in .table-responsive
   becomes scrollable on mobile instead of pushing the page wider.
   The `-webkit-overflow-scrolling: touch` gives momentum scrolling
   on iOS. */
@media (max-width: 768px) {
  table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ── 7. Modals and dropdowns ──────────────────────────────────
   Cap widths so they can never exceed viewport, and add a small
   inset so they don't slam against the screen edges. */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }
  .dropdown-menu {
    max-width: calc(100vw - 1rem);
  }
}

/* ── 8. Prevent .container padding stealing from small screens ─
   Bootstrap's default .container has 12px side padding by default;
   that's fine, but some legacy custom CSS re-adds 15–24px. Reset
   to a single sane value at the smallest widths. */
@media (max-width: 420px) {
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg {
    padding-left: 12px;
    padding-right: 12px;
  }
}