/* ============================================================================
   FantasyEdge — mobile responsiveness layer (mobile-only)
   ----------------------------------------------------------------------------
   Adds phone/tablet responsiveness on top of the ORIGINAL desktop design:
   a slide-out nav drawer, single-column collapses, contained table scroll,
   safe-area insets, and iOS-zoom-safe inputs. Nothing here changes the
   desktop appearance — every layout rule is inside @media (max-width:768px);
   only the drawer toggle/backdrop base styles sit outside, and they are
   display:none until the media query shows them. Uses the app's existing
   :root tokens (with literal fallbacks).
   ============================================================================ */

/* Drawer toggle button + backdrop — hidden on desktop. */
.nav-toggle{display:none;position:fixed;top:10px;left:10px;z-index:1100;width:44px;height:44px;align-items:center;justify-content:center;background:var(--dark2,#1A1A1A);border:1px solid rgba(212,160,23,0.4);border-radius:8px;cursor:pointer;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:20px;height:2px;background:var(--gold,#D4A017);border-radius:2px;}
.nav-toggle span{position:relative;}
.nav-toggle span::before{content:'';position:absolute;top:-6px;}
.nav-toggle span::after{content:'';position:absolute;top:6px;}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:900;}

@media (max-width:768px){
  /* ---- App shell: fixed sidebar -> slide-out drawer ---- */
  .sidebar{position:fixed !important;top:0;left:0;bottom:0;transform:translateX(-100%);transition:transform .25s ease;width:min(84vw,300px) !important;min-width:0 !important;z-index:1000;overflow-y:auto;padding-top:env(safe-area-inset-top);}
  body.nav-open .sidebar{transform:translateX(0);box-shadow:0 0 48px rgba(0,0,0,.7);}
  /* min-width:0 lets the flex main shrink below content width (prevents page overflow). */
  .main{margin-left:0 !important;min-width:0;}
  .nav-toggle{display:flex;top:calc(10px + env(safe-area-inset-top));}
  body.nav-open .nav-backdrop{display:block;}
  /* Comfortable drawer touch targets. */
  .sidebar-nav li a{padding-top:12px;padding-bottom:12px;}

  /* ---- Cross-cutting safety ---- */
  body{overflow-wrap:anywhere;padding-bottom:env(safe-area-inset-bottom);}
  img,svg,video,canvas,table{max-width:100%;}
  input,select,textarea{font-size:16px;} /* >=16px stops iPhone Safari zoom-on-focus */

  /* ---- Title/topbar clears the fixed toggle ---- */
  .topbar{padding-left:64px !important;}      /* pages with a sticky .topbar (dashboard, brackets) */
  .top-header{padding-top:calc(58px + env(safe-area-inset-top));} /* clears the fixed toggle (10 + 44px) */

  /* ---- Dashboard ---- */
  .content{padding:20px 16px;}
  .topbar{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:8px;}
  .topbar-left h1{font-size:20px;}
  .topbar-right{gap:6px;width:100%;}
  .sport-filter-mini{flex-wrap:wrap;}
  .summary-strip{grid-template-columns:repeat(2,1fr);}
  .two-col,.three-col{grid-template-columns:1fr;}
  .hero-performer{grid-template-columns:1fr;gap:12px;}
  .hero-big-num{display:none;}
  .section-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .stab{white-space:nowrap;flex:0 0 auto;}

  /* ---- Rankings top controls ---- */
  .stats-strip{flex-wrap:wrap;}
  .sport-tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;}
  .sport-tab{white-space:nowrap;flex:0 0 auto;}
  .pos-filters,.search-row,.stats-strip{padding-left:16px;padding-right:16px;}

  /* ---- Rankings: compact stacked player CARDS (replaces the wide scrolling
     table on phones). Scoped to #rankingsTable so nothing else is affected. In
     the default ALL view each stat cell carries its own inline label, so the
     grid reads clearly. ---- */
  .table-wrap{padding-left:12px;padding-right:12px;overflow-x:hidden;}
  #rankingsTable{min-width:0;width:100%;max-width:100%;display:block;table-layout:fixed;}
  #rankingsTable thead{display:none;}                 /* header row not needed once rows stack */
  #rankingsTable tbody{display:block;}
  #rankingsTable tbody tr td{border:none;padding:0;}  /* reset the table cell box model */

  /* Each player row becomes a card. */
  #rankingsTable tbody tr:not(.row-detail):not(.loading-row):not(.error-row){
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
    background:var(--dark2,#1A1A1A);border:1px solid rgba(255,255,255,0.07);
    border-radius:8px;padding:12px 14px;margin:0 0 8px;
  }
  /* Line 1: rank + player (avatar over which sit name / team). The player cell
     grows to fill the line, so the position + stats wrap onto the rows below. */
  #rankingsTable td.td-rank{order:0;flex:0 0 auto;font-size:18px;line-height:1;}
  #rankingsTable tbody tr>td:nth-child(2){order:1;flex:1 1 auto;min-width:0;}
  #rankingsTable .player-avatar{width:34px;height:34px;font-size:16px;flex-shrink:0;}
  #rankingsTable .player-name{white-space:normal;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;} /* name + badges wrap below */
  #rankingsTable .player-meta{white-space:normal;}

  /* Position chip rides onto the stat rows; the standalone team column is a
     duplicate of the player-meta team, so hide it on mobile. */
  #rankingsTable tbody tr>td:nth-child(3){order:2;flex:0 0 auto;}
  #rankingsTable tbody tr>td:nth-child(4){display:none;}

  /* Stats: GP + the stat columns + stars/trend/own wrap into a compact 2-col grid. */
  #rankingsTable td.gp-col,
  #rankingsTable tbody tr>td:nth-child(n+5){order:3;flex:1 1 42%;min-width:0;font-size:13px;color:var(--gray-light);}
  /* Reveal the normally-hidden extra stat columns so every category shows on the card. */
  #rankingsTable td.extra-col{display:block;}

  /* Every value gets its category label directly beside it, sourced from the
     row's real per-player data-label (position-specific: hitter vs SP vs RP).
     The inline ALL-view label is hidden so it isn't shown twice. Cells with no
     value ("—") are dropped so only categories that exist render. */
  #rankingsTable tbody tr td[data-label]:not([data-label=""]) .td-stat-label{display:none;}
  #rankingsTable tbody tr td[data-label]:not([data-label=""])::before{
    content:attr(data-label);margin-right:6px;color:var(--gray,#8C8C8C);
    font-weight:600;font-size:11px;letter-spacing:.3px;text-transform:uppercase;
  }
  #rankingsTable tbody tr td[data-label]:has(> .td-stat.muted){display:none;}

  /* Expandable detail row + status rows stay full width. */
  #rankingsTable tr.row-detail{display:block;}
  #rankingsTable tr.row-detail>td{display:block;padding:0;}
  #rankingsTable tr.loading-row,#rankingsTable tr.error-row{display:block;text-align:center;}
  #rankingsTable tr.loading-row>td,#rankingsTable tr.error-row>td{display:block;padding:24px 8px;}

  /* ---- Brackets ---- */
  .mode-tabs{flex-direction:column;width:100%;}
  .mode-tab{width:100%;text-align:center;letter-spacing:1.5px;overflow-wrap:anywhere;}
  .mode-tab:not(:last-child){border-right:none;border-bottom:1px solid rgba(212,160,23,0.15);}
  .bracket-intro,.regions-grid,.nfl-rails{grid-template-columns:1fr;}

  /* ---- Home / landing (index / fantasyedge) ---- */
  /* Page shell: contain any stray horizontal overflow (layout is fixed below;
     this is only a safety net, scoped to the home page). */
  body.home{overflow-x:hidden;max-width:100%;}

  /* 1. Compact header — logo stays fully visible; links + CTA never overlap it. */
  nav{padding:10px 14px;gap:10px;}
  .nav-logo{font-size:18px;white-space:nowrap;}
  .nav-links{gap:14px;align-items:center;}
  .nav-links a{font-size:11px;letter-spacing:.5px;white-space:nowrap;padding:12px 2px;} /* ~44px tap target */
  .nav-cta{padding:12px 14px !important;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;}

  /* 2. Hero — top padding clears the fixed header; bottom padding clears the
     absolute ticker. Headline scales with clamp(); actions stack vertically. */
  .hero{
    min-height:100svh;justify-content:flex-start;
    padding:calc(84px + env(safe-area-inset-top)) 20px calc(78px + env(safe-area-inset-bottom));
  }
  .hero-title{font-size:clamp(40px,12vw,88px);}
  .hero-sub{font-size:15px;}
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px;}
  .btn-primary{width:100%;max-width:420px;padding:16px 20px;}   /* full-width CTA, capped, never wider than viewport */
  .btn-secondary{width:100%;max-width:420px;}                   /* secondary link stays visible below the CTA */

  /* 3. Ticker — full-width but contained; the marquee is clipped inside it. */
  .ticker{max-width:100%;overflow:hidden;}

  /* 4. Below-the-fold — single column; natural wrapping; reduced gutters. */
  .sports-grid,.pricing-grid{grid-template-columns:1fr;}
  .stats-section{grid-template-columns:repeat(2,1fr);}
  .sports-section,.pricing-section,.cta-section,.stats-section{padding-left:20px;padding-right:20px;}
  .section-title{font-size:clamp(30px,8vw,52px);}
  .cta-title{font-size:clamp(34px,10vw,64px);}
  .cta-actions{flex-direction:column;align-items:stretch;}
  .cta-actions>*{width:100%;max-width:420px;text-align:center;justify-content:center;}

  /* 5. Footer — stack logo / links / copyright; links wrap, never per-letter. */
  footer{flex-direction:column;gap:18px;text-align:center;padding:40px 20px calc(40px + env(safe-area-inset-bottom));}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:14px 20px;}
  .footer-links a{white-space:nowrap;padding:6px 2px;}
}