/* mobile.css — Comprehensive mobile optimization for AllandaleSports
   Target: 390px iPhone screen. Breakpoint: max-width 768px.
   Desktop styles are NOT affected. */

@media (max-width: 768px) {

  /* ── GLOBAL ──────────────────────────────────────────────── */
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; -webkit-overflow-scrolling: touch; }

  /* Buttons: minimum 48px tall, full width where appropriate */
  button, .btn, .btn-gold, .btn-outline, .btn-primary,
  [class*="btn"], input[type="submit"] {
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Forms: single column */
  .form-row, .s-row, .form-grid, .name-row, .inline-form .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Tables: horizontally scrollable */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  thead, tbody, tr { display: table; width: 100%; table-layout: auto; }

  /* M-5 consolidation: 16px text inputs everywhere so iOS never zooms on focus.
     Excludes checkboxes/radios/range so they keep their native size. This is
     loaded on every page by nav.js, so pages no longer need to repeat it. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px; }

  /* ── TEAM ROSTER PAGES ──────────────────────────────────── */

  /* Hero section compact */
  .team-hero {
    padding: 14px 16px !important; min-height: auto !important;
    position: relative;
  }
  .team-hero .hero-logo { width: 36px !important; height: 36px !important; }
  .team-hero .team-name-title { font-size: 20px !important; max-width: calc(100% - 40px) !important; }
  .team-hero .team-eyebrow { font-size: 10px !important; }

  /* Team dropdown + palette button */
  #cifl-team-dropdown {
    position: relative !important; top: auto !important; right: auto !important;
    margin-top: 8px; justify-content: flex-start !important;
  }
  #cifl-team-dropdown select {
    font-size: 12px !important; padding: 6px 8px !important; max-width: 180px;
  }

  /* Stats bar horizontal scroll */
  .stats-grid {
    display: flex !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; gap: 0 !important;
    padding: 0 !important; flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .stats-grid::-webkit-scrollbar { display: none; }
  .stats-grid .stat-block {
    min-width: 90px; flex-shrink: 0; padding: 10px 12px !important;
  }

  /* Roster row layout on mobile:
     [SWAP 60px] [Player(logo+name+detail) 1fr] [PROJ 48px] [FPTS 56px]
     POS badge hidden. All extra stat cols hidden. */

  /* Force the base (pre-roster-stats.js) rows to our mobile grid */
  .slot-row, .starter-row {
    min-height: 48px !important;
    grid-template-columns: 60px 1fr 48px 56px !important;
    gap: 4px !important;
    padding: 4px 6px !important;
  }

  /* Hide POS badge column — redundant with section headers */
  .pos-col { display: none !important; }

  /* Hide ALL stat columns except PROJ and FPTS.
     This catches every column roster-stats.js injects:
     CMP/ATT, PASS YDS, PASS TD, RUSH YDS, REC, REC YDS, RUSH/REC TD, INT,
     TKL, AST, SACK, PD, FF, FR, TD, SAFETY,
     FG brackets, FG%, LONG, PAT */
  .stat-col:not(.proj):not(.fpts) { display: none !important; }
  .pts-col { display: none !important; } /* legacy pts-col from HTML */

  /* 7th-column desktop spacer */
  .slot-row > *:nth-child(7):not(.stat-col),
  .starter-row > *:nth-child(7):not(.stat-col) { display: none !important; }

  /* PROJ + FPTS visible, right-aligned */
  .stat-col.proj { font-size: 12px !important; text-align: right !important; }
  .stat-col.fpts { font-size: 13px !important; text-align: right !important; font-weight: 800 !important; }

  /* Column headers match the 4-column grid */
  .col-headers {
    grid-template-columns: 60px 1fr 48px 56px !important;
    gap: 4px !important; padding: 4px 6px !important;
  }
  .col-headers > .pos-col,
  .col-headers > *:nth-child(2) { display: none !important; }
  .col-headers > *:nth-child(n+6) { display: none !important; }

  /* rs-off/rs-def/rs-kick grids from roster-stats.js — override to mobile */
  .starter-row.rs-off, .slot-row.rs-off, .rs-header.rs-off,
  .starter-row.rs-def, .slot-row.rs-def, .rs-header.rs-def,
  .starter-row.rs-kick, .slot-row.rs-kick, .rs-header.rs-kick {
    grid-template-columns: 60px 1fr 48px 56px !important;
    gap: 4px !important;
  }

  /* SWAP / drag button — 60px column, button compact */
  .drag-col { max-width: 60px !important; }
  .rs-swap-label, .swap-btn {
    min-height: 32px !important; max-width: 56px !important;
    font-size: 9px !important; padding: 2px 4px !important;
    white-space: nowrap; overflow: hidden;
  }
  .move-btn, .rd-btn {
    min-height: 32px !important; min-width: 32px !important;
  }

  /* Player column — flex:1, never compressed */
  .player-col {
    gap: 6px !important; min-width: 0 !important; overflow: hidden !important;
    flex: 1 !important;
  }
  .player-info { min-width: 0 !important; overflow: hidden !important; flex: 1 !important; }

  /* Player avatar */
  .player-avatar {
    width: 28px !important; height: 28px !important; font-size: 9px !important;
    flex-shrink: 0 !important;
  }

  /* Player name — 14px, min-width ensures it never collapses */
  .player-name {
    font-size: 14px !important; font-weight: 600 !important;
    line-height: 1.2 !important; min-width: 100px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }

  /* Player detail — one line: 'QB · LAR' at 11px */
  .player-detail {
    font-size: 11px !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
  }

  /* Roster wrap + page */
  .roster-wrap { padding: 0 !important; overflow-x: hidden !important; }
  .page { padding: 88px 4px 0 !important; overflow-x: hidden !important; }
  /* The generic .page rule above supplies 88px of top clearance for the fixed
     nav on pages that do NOT set body{padding-top} (myteam, join, dfs-optimizer,
     commissioner, accept-invite, players, teams). Pages that DO set
     body{padding-top:88px} (the LEI league surfaces) were getting that gap
     twice. Those pages give their container id="page", so this more-specific
     rule zeroes the container's own top padding (the body still clears the nav).
     It does NOT change the generic .page rule, so the id-less reliant pages keep
     their 88px. Verified: every id="page" page sets body{padding-top:88px}. */
  #page { padding-top: 0 !important; }

  /* Section title bars */
  .section-title-bar { padding: 6px 6px !important; font-size: 11px !important; }

  /* ── MOCK DRAFT ─────────────────────────────────────────── */

  /* Mobile draft tab bar */
  .mdraft-tabs {
    display: flex !important; gap: 0; background: rgba(12,35,64,0.98);
    border-bottom: 1px solid rgba(201,151,0,0.2);
  }
  .mdraft-tab {
    flex: 1; padding: 10px 4px; font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    text-align: center; color: rgba(250,250,248,0.4); background: transparent;
    border: none; border-bottom: 2px solid transparent; cursor: pointer;
  }
  .mdraft-tab.active { color: #C99700; border-bottom-color: #C99700; }

  /* Live pick feed */
  .live-feed {
    display: block !important; padding: 6px 10px; background: rgba(201,151,0,0.08);
    border-bottom: 1px solid rgba(201,151,0,0.12);
    font-size: 11px; color: rgba(250,250,248,0.6); overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
  }
  .live-feed strong { color: #C99700; font-weight: 700; }

  /* All Picks list */
  .picks-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
  .pick-entry {
    display: grid; grid-template-columns: 44px 1fr 32px; gap: 6px;
    padding: 8px 12px; border-bottom: 1px solid rgba(201,151,0,0.06);
    font-size: 13px; align-items: center;
  }
  .pick-entry.user-pick { background: rgba(201,151,0,0.08); }
  .pick-entry .pe-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(250,250,248,0.35); }
  .pick-entry .pe-name { font-weight: 600; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pick-entry.user-pick .pe-name { color: #C99700; }
  .pick-entry .pe-team { font-size: 10px; color: rgba(250,250,248,0.35); }
  .pick-entry .pe-pos { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; color: rgba(250,250,248,0.4); text-align: center; }
  /* M-2: on phones the 12-wide board grid becomes unreadable, so hide it and
     show the per-round picks list (renderPicksList) instead. */
  .board-grid { display: none !important; }
  .pick-round-h {
    padding: 6px 12px; background: rgba(12,35,64,0.6);
    font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase; color: #C99700;
    border-bottom: 1px solid rgba(201,151,0,0.15);
  }

  /* Settings panel */
  .setup { padding: 100px 16px 40px !important; }
  .setup h1 { font-size: 28px !important; }
  .setup .s-row { grid-template-columns: 1fr !important; }
  .setup .s-toggle button { padding: 10px 8px !important; font-size: 11px !important; }
  .start-btn { min-height: 56px !important; font-size: 16px !important; }

  /* Hub landing */
  .hub { padding: 100px 16px 40px !important; }
  .hub-title { font-size: 30px !important; }

  /* Draft room: stack panels */
  .draft-wrap.active {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important;
  }
  /* Mobile: show one panel at a time, controlled by JS */
  .player-panel, .board-panel, .team-panel {
    border: none !important; max-height: none !important;
  }
  .player-panel { display: flex; flex-direction: column; }
  .board-panel { display: none; flex-direction: column; overflow-y: auto; }
  .team-panel { display: none; }
  .player-panel.m-active { display: flex !important; }
  .board-panel.m-active { display: flex !important; }
  .team-panel.m-active { display: block !important; }

  /* Draft header */
  .draft-header { padding: 8px 12px !important; flex-wrap: wrap; gap: 6px !important; }
  .dh-pick { font-size: 14px !important; }
  .dh-clock { font-size: 18px !important; }

  /* Player rows in draft */
  .pp-row { min-height: 56px; padding: 10px !important; }
  .pp-row:hover .pp-pick-btn { opacity: 1; }
  .pp-pick-btn { opacity: 1 !important; min-height: 36px !important; padding: 6px 14px !important; }
  .pp-search input { min-height: 44px; font-size: 16px !important; }

  /* Back button (now inline in header, hide old floating one) */
  .back-hub { display: none !important; }

  /* ── LEAGUE HUB ─────────────────────────────────────────── */

  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  /* 11px was too small to read on a phone; 13px stays compact but legible. The
     row scrolls (above) so a slightly larger label does not cause clipping. */
  .tab { white-space: nowrap; flex-shrink: 0; padding: 10px 12px !important; font-size: 13px !important; }

  .home-grid, .rules-grid { grid-template-columns: 1fr !important; }
  .matchup-grid { grid-template-columns: 1fr !important; }
  .teams-grid { grid-template-columns: 1fr !important; }

  /* Sticky first columns in standings */
  .card table th:first-child, .card table td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }

  /* ── LEAGUES PAGE ───────────────────────────────────────── */

  .view-toggle button { font-size: 14px !important; padding: 14px 10px !important; }
  .filters {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important; padding: 12px !important;
  }
  .filter-group { flex-shrink: 0; }
  .filter-group select { min-width: 80px; min-height: 40px; }

  /* League table → card layout */
  .lt thead { display: none; }
  .lt-row {
    display: flex !important; flex-wrap: wrap; gap: 8px;
    padding: 14px !important; border-bottom: 1px solid rgba(201,151,0,0.1) !important;
  }
  .lt-row td { padding: 0 !important; border: none !important; }
  .lt-row td:first-child { width: 100%; }
  .lt-row td:last-child { width: 100%; margin-top: 4px; }
  .lt-row td:last-child .join-btn { width: 100%; min-height: 48px; text-align: center; display: block; }
  .lt-detail td { padding: 0 !important; }
  .detail-inner { grid-template-columns: 1fr !important; padding: 14px !important; }

  /* My Leagues cards */
  .ml-card { flex-direction: column !important; align-items: flex-start !important; padding: 16px !important; }
  .ml-right { width: 100%; justify-content: space-between; margin-top: 8px; }
  .ml-go { width: 100%; text-align: center; padding: 12px !important; min-height: 48px; display: flex; align-items: center; justify-content: center; }

  /* Roster panel slide-in */
  .roster-panel { width: 100% !important; }

  /* ── LEI PAGES ──────────────────────────────────────────── */

  .lei-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .lei-nav a { white-space: nowrap; flex-shrink: 0; }

  .grid { grid-template-columns: 1fr !important; }
  .card { margin-bottom: 12px; }

  /* LEI lobby cards */
  .card.highlighted { margin: 0 -10px; border-radius: 0; }

  /* Waiting room */
  .countdown .cd-num { font-size: 28px; }
  .countdown { gap: 8px; }

  /* ── RESEARCH & ANALYTICS ───────────────────────────────── */

  .card-grid { grid-template-columns: 1fr !important; }

  /* Zone intel field visualizations */
  .field-wrap, .field-container, #field-svg, .zone-field {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 300px;
  }
  .controls-panel, .analysis-panel {
    width: 100% !important; max-width: 100% !important;
  }
  .zone-controls, .field-controls {
    display: flex; flex-direction: column; width: 100%;
  }

  /* Stats tables */
  .stats-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Player profile */
  .player-hero { flex-direction: column !important; text-align: center; }
  .player-stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── HOMEPAGE ───────────────────────────────────────────── */

  .hero-section h1, .page-title { font-size: 28px !important; }
  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons a, .hero-buttons button { width: 100%; min-height: 56px; }
  .stat-strip { grid-template-columns: 1fr 1fr !important; }

  /* ── MYTEAM ─────────────────────────────────────────────── */

  .league-card {
    flex-direction: column !important; gap: 12px !important;
    padding: 16px !important;
  }
  .league-card-arrow { display: none; }
  .league-card-meta { flex-direction: row; gap: 12px; }
  .invite-card { padding: 16px !important; }

  /* LEI badges */
  .lei-badges { margin-bottom: 2px; }

  /* ── COMMISSIONER ───────────────────────────────────────── */

  .admin-grid { grid-template-columns: 1fr !important; }
  .admin-card { padding: 16px !important; }
  .status-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .inline-form .form-row { gap: 8px; }

  /* ── JOIN PAGE ──────────────────────────────────────────── */

  .page { max-width: 100% !important; }

  /* ── STANDINGS ──────────────────────────────────────────── */

  .podium { grid-template-columns: 1fr !important; }
  .standings-head, .standings-row, .division-line {
    grid-template-columns: 36px 1fr 70px 60px 60px !important;
  }
  .standings-head span:nth-child(n+6),
  .standings-row > *:nth-child(n+6),
  .division-line > *:nth-child(n+6) { display: none; }
  .stat-highlights { grid-template-columns: 1fr 1fr !important; }
  .legend { flex-wrap: wrap; gap: 12px; }

  /* ── SCHEDULE ───────────────────────────────────────────── */

  .schedule-grid { grid-template-columns: 1fr !important; }
  .game-card { padding: 12px !important; }

  /* ── CHOOSE THEME ───────────────────────────────────────── */

  .cust-layout { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* ── GLOBAL UTILITIES ───────────────────────────────────── */

  /* Only override the side and bottom padding on mobile; do NOT force a top
     padding. The old `padding: 100px ...` forced 100px of top clearance on every
     .page-wrap page, but 8 of the 9 (all except stats.html) already set
     body{padding-top:88px} for the fixed nav, so they were getting the nav gap
     TWICE (88px + 100px = a ~188px dead band before the first section). Letting
     each page keep its own top padding makes mobile match desktop: the
     body-padded pages clear the nav via the body and add only their small own
     top, and stats.html (no body padding) still clears the nav via its own 120px
     .page-wrap top. Same double-gap pattern the #page rule fixes above. */
  .page-wrap { padding-left: 16px !important; padding-right: 16px !important; padding-bottom: 40px !important; }
  .page-title { font-size: 28px !important; }
  .features { grid-template-columns: 1fr 1fr !important; }

  /* Prevent any horizontal overflow */
  *, *::before, *::after { max-width: 100vw; }
  img, svg, video, iframe { max-width: 100%; height: auto; }

  /* M-5: notched-phone safe areas. nav.js loads mobile.css after its own nav
     styles, so these win. The fixed nav keeps clear of a landscape notch, and
     the full-screen mobile menu keeps its last link above the home indicator. */
  nav { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .mobile-menu-overlay { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}