/* FranchiseHQ — Mobile Responsive Supplement
 *
 * Supplements tokens.css and nav-styles.css.
 * Load order: tokens.css → [page styles] → mobile.css
 *
 * Breakpoints (px values must be literals — CSS vars don't work in @media):
 *   xs  ≤ 414 px  (iPhone SE/Pro Max portrait, tight layout)
 *   sm  ≤ 480 px  (phones, 1-column)
 *   md  ≤ 768 px  (tablet portrait, modals full-screen)
 *   lg  ≤ 900 px  (mirrors nav-styles.css hamburger breakpoint)
 */

/* ── Utility: horizontal-scroll table wrapper ────────────────────── */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #1A2E50) transparent;
}
.tbl-scroll::-webkit-scrollbar           { height: 4px; }
.tbl-scroll::-webkit-scrollbar-track     { background: transparent; }
.tbl-scroll::-webkit-scrollbar-thumb     { background: var(--border, #1A2E50); border-radius: 2px; }

/* ── Prevent body-level horizontal overflow ──────────────────────── */
body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════════════════════ */
/*  Touch targets ≥ 44 × 44 px  (Apple HIG / WCAG 2.5.5)           */
/* ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Tap-target minimums are an accessibility floor (#253). mobile.css is linked
   * before each page's inline <style> on most pages, so equal-specificity page
   * rules win the cascade and shrink these controls below 44px — !important
   * keeps the touch floor authoritative regardless of per-page load order. */

  /* Primary button class used across all pages */
  .btn {
    min-height: var(--tap-min, 44px) !important;
  }

  /* Small button variant: still needs 44px tap area on touch.
   * Double-class selector (.btn.btn-sm) beats single-class page rules. */
  .btn.btn-sm {
    min-height: var(--tap-min, 44px) !important;
  }

  /* Filter pills (standings.html) + generic pills */
  .filter-pill,
  .pill {
    min-height: var(--tap-min, 44px) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Tab toggles (pickem.html) */
  .tab {
    min-height: var(--tap-min, 44px) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Pick'em team-pick buttons (pickem.html) */
  .team-pick {
    min-height: var(--tap-min, 44px) !important;
  }

  /* Trade-builder asset add button (trades.html) */
  .add-asset {
    min-height: var(--tap-min, 44px) !important;
  }

  /* View-toggle / tablist links (dashboard, me) */
  [role="tablist"] a,
  .view-toggle a {
    min-height: var(--tap-min, 44px) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Form inputs: 16px prevents iOS Safari auto-zoom */
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    min-height: var(--tap-min, 44px) !important;
    font-size: max(1em, 16px);
  }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  Modals: full-screen or bottom-sheet on mobile (≤ 768 px)         */
/* ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Full-screen dialog — removes corner radius, fills viewport */
  .modal-overlay {
    padding: 0 !important;
  }
  .modal-overlay .modal,
  .modal-overlay > .modal-dialog {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
  }

  /* Generic <dialog> element */
  dialog:not([class*="sheet"]) {
    position: fixed !important;
    inset: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Bottom-sheet modal variant */
  .modal-sheet,
  dialog.sheet {
    position: fixed !important;
    inset: auto 0 0 !important;
    width: 100% !important;
    max-height: 85dvh !important;
    border-radius: var(--r-xl, 14px) var(--r-xl, 14px) 0 0 !important;
    margin: 0 !important;
    overflow-y: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  Small-phone layout adjustments (≤ 480 px)                        */
/* ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Tighter horizontal padding on .container and main */
  .container,
  main.container {
    padding-left:  var(--space-3, 12px);
    padding-right: var(--space-3, 12px);
  }

  /* Top-bar: reduce lateral padding so nav links don't crowd */
  .top-bar {
    padding-left:  var(--space-3, 12px);
    padding-right: var(--space-3, 12px);
  }

  /* Headings must never overflow their container */
  h1, h2, .page-title {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Pick'em game cards: guaranteed single column at narrow widths */
  .games-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  Narrowest phones (≤ 414 px — iPhone SE / Pro Max portrait)       */
/* ══════════════════════════════════════════════════════════════════ */
@media (max-width: 414px) {

  /* Pick'em history list: drop week column to prevent overflow */
  .hist-row {
    grid-template-columns: auto 1fr auto;
    gap: 0.4rem;
  }
  .hist-week { display: none; }
}