/* ── Gridiron 5 — Mobile Responsive Styles ── */

/* ── Bottom nav bar (hidden on desktop) ── */
.g5-bottom-nav {
  display: none;
}

/* Hamburger button: hidden on desktop, shown on mobile via media query */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  padding: 0;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
  margin-right: 0.5rem;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.1); }

/* Mobile nav overlay (dim backdrop behind the open sidebar drawer) */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: 140;
}
.mobile-overlay.open { display: block; }

/* ── Mobile breakpoint ── */
@media (max-width: 768px) {

  /* Never let the page body scroll horizontally: otherwise fixed elements (the
     bottom nav bar) size to the overflowing layout viewport and run off-screen.
     overflow-x:clip clips without creating a scroll container, so it does NOT
     break the sticky top nav (unlike overflow-x:hidden). Wide tables/grids still
     scroll inside their own overflow-x:auto wrappers. */
  html, body { overflow-x: clip; max-width: 100%; }

  /* Show hamburger */
  .hamburger-btn { display: flex !important; }

  /* ── Bottom nav bar ── */
  .g5-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #111210;
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 120;
    align-items: stretch;
  }
  .g5-bn-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.15s;
  }
  .g5-bn-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
  }
  .g5-bn-item.active { color: #1a7c3e; }
  .g5-bn-item:active { color: rgba(255,255,255,0.8); }

  /* Push page content up so bottom nav doesn't overlap it */
  .main { padding-bottom: 72px !important; }
  .subbar { bottom: 56px !important; }

  /* Topnav: always stay above the drawer */
  .topnav { z-index: 200 !important; }

  /* Sidebar becomes a slide-in drawer (works for both .sidebar and .sidenav)
     Override any existing `display: none` from page-level media queries */
  .sidebar,
  .sidenav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 260px !important;
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 150 !important;
    overflow-y: auto !important;
    padding-top: 1rem !important;
  }
  .sidebar.open,
  .sidenav.open {
    transform: translateX(0);
    box-shadow: 6px 0 32px rgba(0,0,0,0.45);
  }

  /* Prevent background scroll while drawer is open */
  body.nav-open { overflow: hidden; }

  /* Layout grid: sidebar is now out of flow, main takes full width */
  .layout {
    display: block !important;
    grid-template-columns: unset !important;
  }

  /* Main content: full width, tighter horizontal padding */
  .main {
    margin-left: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Inner content wrapper (notifications, profile) */
  .main-inner { padding: 1.5rem 0 !important; }

  /* My Picks submit bar: stretch full width, not just right of sidebar */
  .subbar { left: 0 !important; }

  /* My Picks: pool/player selector header row */
  .hdr-right { flex-wrap: wrap; gap: 0.5rem !important; }

  /* Summary pill bar: allow wrapping */
  .smry { flex-wrap: wrap; gap: 0.5rem !important; }

  /* Pool cards grid: single column */
  .pools-grid { grid-template-columns: 1fr !important; }

  /* Hero/welcome section */
  .hero { padding: 1.5rem 0 0.5rem !important; }

  /* Tables: enable touch-friendly horizontal scroll */
  .pool-wrap,
  .matchup-wrap,
  .lb-wrap,
  .tbl-wrap,
  .scores-wrap { -webkit-overflow-scrolling: touch; }

  /* Pool picks + games/scores tables: pin the wrapper to viewport width and force it to
     own its horizontal scroll, so the body's `overflow-x: clip` can never clip the table
     off-screen (a real-device sticky/clip failure mode that blanks the table). The pinned
     first column (Player / Game label) then stays put while the game columns scroll. */
  .pool-wrap,
  .matchup-wrap {
    max-width: 100%;
    overflow-x: auto;
    display: block;
  }

  /* Week tab bar: touch scroll */
  .wkbar { -webkit-overflow-scrolling: touch; }

  /* Modals: full-width with breathing room on small screens */
  .modal {
    max-width: calc(100vw - 2rem) !important;
    padding: 1.25rem !important;
  }

  /* Page title + subtitle */
  .pg-title,
  .page-title { font-size: 1.6rem !important; }

  /* Admin table wrappers */
  .admin-table-wrap,
  .tbl-scroll { -webkit-overflow-scrolling: touch; overflow-x: auto; }

  /* Form rows: stack on narrow screens */
  .field-row { grid-template-columns: 1fr !important; }

  /* Week management games table */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Pool spread grid info row: allow wrapping */
  .pool-info { flex-wrap: wrap; gap: 0.5rem !important; }

  /* Leaderboard header row */
  .lb-hdr { flex-wrap: wrap; gap: 0.5rem !important; }

  /* ── Sidebar drawer: ensure text is visible on dark background ── */
  .sidebar .na,
  .sidenav .sidenav-item {
    color: rgba(255,255,255,0.78) !important;
  }
  .sidebar .nlbl,
  .sidenav .sidenav-section {
    color: rgba(255,255,255,0.38) !important;
  }
  .sidebar .na svg,
  .sidenav .sidenav-item svg {
    color: rgba(255,255,255,0.55) !important;
    stroke: rgba(255,255,255,0.55) !important;
  }
  .sidebar .na.on,
  .sidenav .sidenav-item.active {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
  }

  /* ── Pool page: stats pills compact row ── */
  .stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .stat-pill {
    padding: 0.45rem 0.75rem !important;
  }
  .stat-n { font-size: 1.1rem !important; }
  .stat-l { font-size: 0.6rem !important; }

  /* ── Leaderboard: summary pills compact ── */
  .smry {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem !important;
  }
  /* My Picks has four pills, and four across a phone squeezes each label onto two
     lines. Two-by-two instead — the same shape the Pool page uses for its stats. */
  .smry-4 { grid-template-columns: 1fr 1fr !important; }
  /* ...and each pill stays a single line, number then label, the way it reads on the
     desktop. The rule above stacks them because three-across leaves no room to sit
     side by side; at two-across there is, so undo it here. */
  .smry-4 .sp {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }
  .sp { padding: 0.4rem 0.6rem !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.1rem !important; }
  .spn { font-size: 1.1rem !important; }
  .spl { font-size: 0.58rem !important; }

  /* ── Leaderboard: podium — horizontal single row ── */
  .podium {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    margin-bottom: 1.25rem !important;
  }
  .podium-card {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0.65rem 0.6rem !important;
  }
  .podium-av { width: 26px !important; height: 26px !important; font-size: 0.62rem !important; margin: 0 auto 0.25rem !important; }
  .podium-name { font-size: 0.72rem !important; margin-bottom: 0.2rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .podium-wins { font-size: 0.72rem !important; }
  .podium-stat { font-size: 0.72rem !important; margin-bottom: 0.1rem !important; }
  .podium-stat strong { font-size: 0.72rem !important; }
  .podium-rank { font-size: 0.55rem !important; margin-bottom: 0.2rem !important; }
}

/* ── My Picks: touch targets ───────────────────────────────────────────────────
   The "Playing as" switcher, its rename pencil and "+ Add Player" rendered at
   18-25px tall — well under the ~44px comfortable tap size, and the pencil was
   only 19x13. Enlarged on touch widths only; the desktop layout is unchanged. */
@media (max-width: 768px) {
  /* ONE height for all three header controls: the Pool pill, the Playing-as pill and
     "+ Add Player".
     Do NOT go back to deriving the height from `.psel select { min-height }`. That measured
     identical in desktop Chrome (Blink) but not on iOS, whose WebKit ignores min-height on
     a native <select> — so the Pool pill, whose only tall child IS the select, collapsed to
     its intrinsic ~30px while the Playing-as pill was sized by its pencil button and Add
     Player by its own rule. The result was three controls at three different heights on a
     phone and no way to see it from a desktop browser.
     The CONTAINERS carry the height now, and the controls stretch to fill it — so the row
     agrees on every engine and the whole pill stays a 44px tap target. */
  .psel {
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 .6rem;            /* height comes from min-height, not padding */
  }
  .psel select {
    align-self: stretch;         /* fill the pill instead of setting its height */
    /* A floor for the tap area on engines that ignore `stretch` on a native select. Kept
       safely BELOW the pill's 41px content box so it can never push the pill taller and
       reintroduce the mismatch this block exists to prevent. */
    min-height: 36px;
    font-size: .9rem;
    padding-right: .2rem;
  }
  /* the rename pencil — an icon button with no text to give it size */
  .psel button {
    min-width: 40px;
    align-self: stretch;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .psel button svg { width: 15px; height: 15px; }
  .bxs {
    min-height: 44px;            /* same 44px as the pills beside it */
    box-sizing: border-box;
    padding: 0 1rem;
    font-size: .8rem;
  }
}

/* ── iOS input auto-zoom ───────────────────────────────────────────────────────
   Safari on iOS zooms the whole viewport in when you focus a form control whose
   font-size is under 16px — and it does NOT zoom back out afterwards. With inputs
   at 13-14px across the app, every tap into a field left the page wider than the
   screen until the user pinched back out.

   16px on touch widths is the standard fix. Deliberately NOT solved with
   maximum-scale/user-scalable=no on the viewport tag, which would stop the zoom by
   banning pinch-zoom entirely — an accessibility regression. */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="tel"], input[type="url"], input[type="search"], input[type="date"],
  input[type="time"], input[type="datetime-local"], input:not([type]),
  select, textarea {
    font-size: 16px !important;
  }
}