/* ==========================================================================
   NASEF Arena — responsive overrides
   --------------------------------------------------------------------------
   Desktop view (≥ 1100px) is identical to the original build.
   Below that, layouts adapt for tablets and phones.

   Strategy: most layout is React inline styles. We override them inside
   media queries using:
     1. classNames added as hooks (e.g. .landing-hero, .page-header, .lobby-hero-grid)
     2. attribute substring selectors on inline grid-template-columns / font-size / padding
   …all with !important so we beat inline styles.

   Breakpoints:
     ≤ 1100px — tablet & landscape phone (sidebar off-canvas, 2-col → 1-col)
     ≤  900px — portrait tablet & large phone (hide landing match card, tighten hero)
     ≤  720px — phones (single column everywhere, full-width buttons)
     ≤  480px — small phones (most compact)
   ========================================================================== */

/* Hide mobile-only chrome on desktop by default */
.mobile-nav-toggle { display: none; }
.mobile-nav-backdrop { display: none; }
.app-topbar-brand { display: none; }

html, body { max-width: 100vw; }


/* ==========================================================================
   ≤ 1100px — Tablet & phone breakpoint
   Sidebar becomes off-canvas. Most 2-column layouts stack.
   ========================================================================== */
@media (max-width: 1100px) {

  html, body { overflow-x: hidden; }

  /* --- Shell layout: single column, sidebar overlays --- */
  .app-shell {
    grid-template-columns: 1fr !important;
  }
  .app-sidebar {
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh !important;
    width: 280px;
    max-width: 86vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: 12px 0 36px -8px rgba(0,0,0,0.6);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(7,9,15,0.6);
    backdrop-filter: blur(2px);
    z-index: 190;
    animation: fadeIn 0.18s ease both;
  }
  .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
  }

  /* --- Topbar --- */
  .app-topbar {
    padding: 0 14px !important;
    gap: 8px !important;
    height: 56px !important;
  }
  .app-search { max-width: none !important; flex: 1 !important; }
  .app-topbar-brand {
    display: flex;
    margin-left: 2px;
  }

  /* --- Main content padding --- */
  .app-main {
    padding: 20px 16px 80px !important;
  }

  /* --- Generic 2-column → 1-column collapses --- */
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns: 1fr 360px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 240px 1fr 360px"],
  [style*="grid-template-columns: 220px 1fr"],
  [style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Admin overview KPI strip: 4-col → 2-col */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 3-col & 4-col content grids tighten */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* PageHeader rows wrap on mobile */
  .row { flex-wrap: wrap; }

  /* PageHeader: title block above, actions below */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
  }
  .page-header-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Landing: hide secondary nav links (Platform / Games / For Coaches...) */
  .landing-nav { display: none !important; }
  .landing-header {
    padding: 14px 20px !important;
  }
  .landing-header-left { gap: 0 !important; }

  /* Landing hero: text centers when stacked above the (now hidden) visual */
  .landing-hero-text { text-align: center; }
  .landing-hero-text > h1,
  .landing-hero-text > p { margin-left: auto !important; margin-right: auto !important; }
  .landing-hero-text > .row { justify-content: center !important; flex-wrap: wrap; }

  /* Landing partner logos: smaller gap, allow more wrapping */
  .landing-partners > div:last-child { gap: 22px !important; }

  /* Lobby roster strip: stack home/away vertically */
  .lobby-roster-strip { grid-template-columns: 1fr !important; }

  /* Force horizontal scroll on raw tables (Standings, game support matrix) */
  .card > .table-wrap, .table { display: block; overflow-x: auto; max-width: 100%; }
  .table thead, .table tbody { display: table; width: 100%; min-width: 720px; }
  .table tr { display: table-row; }
  .table th, .table td { padding: 10px 12px; font-size: 12px; white-space: nowrap; }

  /* Prevent wide content (mostly the standings table with min-width: 720) from
     forcing its parent card and grid/flex ancestors to exceed the viewport.
     Flex/grid items default to min-width: auto, which propagates contents'
     min-content up through every ancestor — blowing out the layout. Setting
     min-width: 0 stops the propagation; wide tables still scroll inside their
     own .card via the overflow-x: auto rule above. */
  .card { min-width: 0; }
  .card > div { min-width: 0; }
  .home-page > div,
  .home-page > div > div { min-width: 0; }

  /* Lobby hero header: 3-col → centered stack */
  [style*="grid-template-columns: 1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    text-align: center;
    justify-items: center !important;
  }
  [style*="grid-template-columns: 1fr auto 1fr"] > div {
    justify-content: center !important;
  }
  /* Centered text in the away-team block (which was right-aligned on desktop) */
  .lobby-hero-away > div { text-align: center !important; }

  /* School teams row: `auto 1fr auto auto auto` — let it wrap */
  [style*="grid-template-columns: auto 1fr auto auto auto"] {
    grid-template-columns: auto 1fr auto !important;
    grid-auto-flow: row !important;
    gap: 6px 12px !important;
  }

  /* Teams page roster row: `auto auto 1fr auto auto auto auto` — collapse */
  [style*="grid-template-columns: auto auto 1fr auto auto auto auto"] {
    grid-template-columns: 1fr auto !important;
    grid-auto-flow: row !important;
    gap: 8px 10px !important;
  }

  /* Admin approvals: `1fr 1fr 2fr` */
  [style*="grid-template-columns: 1fr 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Audit log row: `60px 1fr 1fr` */
  [style*="grid-template-columns: 60px 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* Ruleset row: `140px 1fr` */
  [style*="grid-template-columns: 140px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* Cards with fixed heights — relax */
  [style*="height: 620px"] { height: 520px !important; }

  /* Modals: full width with side margin */
  [style*="position: fixed"][style*="inset: 0"] > .card {
    width: calc(100vw - 24px) !important;
    max-width: 460px !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
  }

  /* Big type scale down */
  [style*="font-size: 80px"] { font-size: 48px !important; gap: 20px !important; }
  [style*="font-size: 64px"] { font-size: 40px !important; line-height: 1.05 !important; }
  [style*="font-size: 56px"] { font-size: 36px !important; gap: 28px !important; }
  [style*="font-size: 52px"] { font-size: 34px !important; }
  [style*="font-size: 48px"] { font-size: 30px !important; }
  [style*="font-size: 44px"] { font-size: 30px !important; }
  [style*="font-size: 40px"] { font-size: 28px !important; }
  [style*="font-size: 38px"] { font-size: 26px !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size: 28px"] { font-size: 22px !important; }
  [style*="font-size: 26px"] { font-size: 20px !important; }
  [style*="font-size: 24px"] { font-size: 20px !important; }
  [style*="font-size: 22px"] { font-size: 18px !important; }

  /* Reduce massive padding on landing hero */
  [style*="padding: 80px 56px 60px"] { padding: 36px 18px 32px !important; }
  [style*="padding: 80px 56px 100px"] { padding: 48px 18px 56px !important; }
  [style*="padding: 60px 56px"]      { padding: 32px 18px !important; }
  [style*="padding: 40px 56px"]      { padding: 24px 14px !important; }  /* picker outer */
  [style*="padding: 20px 56px"]      { padding: 14px 16px !important; }  /* picker header */
  [style*="padding: 0 56px"]         { padding: 0 18px !important; }
  [style*="padding: 32px 56px"]      { padding: 24px 18px !important; }
  [style*="padding: 26px 24px 18px"] { padding: 18px 14px !important; }
  [style*="padding: 22px 28px"]      { padding: 16px 16px !important; }
  [style*="padding: 12px 28px"]      { padding: 12px 16px !important; }
  [style*="padding: 56px"]           { padding: 28px 20px !important; }

  /* Lobby hero band height */
  [style*="height: 220px"] { height: auto !important; min-height: 0 !important; }

  /* Sidebar nav tap targets */
  .app-sidebar nav button { padding: 12px 14px !important; font-size: 14px !important; }
}


/* ==========================================================================
   ≤ 900px — Portrait tablet & large phone
   Hide landing live-match card; tighten landing hero further.
   ========================================================================== */
@media (max-width: 900px) {

  /* Hide the marquee live-match card on the landing hero — too dense for mobile */
  .landing-hero-visual { display: none !important; }

  /* Now that the visual is gone, the hero is a single text block — tighten */
  .landing-hero {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 36px 18px 28px !important;
  }

  /* Persona picker: 3 → 2 columns. The cards stay full-height. */
  /* (already handled by repeat(3,1fr) → repeat(2, minmax(0,1fr)) above) */

  /* Lobby body 3-col already collapses via existing 240px 1fr 360px rule */
  /* Force chat to not be huge */
  [style*="height: 620px"] { height: 460px !important; }
}


/* ==========================================================================
   ≤ 720px — phones (the main mobile experience)
   Cards stack, buttons get full width, everything scrolls vertically.
   ========================================================================== */
@media (max-width: 720px) {

  /* --- Page chrome --- */
  .app-main { padding: 16px 12px 80px !important; }

  /* Card padding */
  .card-header { padding: 12px 14px; }
  .card-header h3 { font-size: 13px; }

  /* Tighter buttons but keep tap targets at 36px+ */
  .btn { font-size: 13px; padding: 9px 14px; min-height: 36px; }
  .btn.sm { padding: 6px 10px; font-size: 12px; min-height: 30px; }
  .btn.lg { padding: 12px 18px; font-size: 14px; }

  /* Inputs sized for touch */
  .input, .select, .textarea { padding: 11px 12px; font-size: 14px; min-height: 40px; }

  /* Even tighter big-type scale */
  [style*="font-size: 80px"] { font-size: 40px !important; gap: 18px !important; }
  [style*="font-size: 64px"] { font-size: 34px !important; }
  [style*="font-size: 56px"] { font-size: 32px !important; gap: 20px !important; }
  [style*="font-size: 52px"] { font-size: 30px !important; }
  [style*="font-size: 48px"] { font-size: 26px !important; }
  [style*="font-size: 44px"] { font-size: 26px !important; }
  [style*="font-size: 40px"] { font-size: 24px !important; }
  [style*="font-size: 38px"] { font-size: 24px !important; }
  [style*="font-size: 32px"] { font-size: 22px !important; }
  [style*="font-size: 28px"] { font-size: 20px !important; }
  [style*="font-size: 26px"] { font-size: 18px !important; }
  [style*="font-size: 24px"] { font-size: 18px !important; }
  [style*="font-size: 22px"] { font-size: 17px !important; }

  /* Hide topbar search; user opens the menu instead */
  .app-search { display: none !important; }

  /* Lobby chat panel: grow to fill, with a generous min-height */
  [style*="height: 620px"] {
    height: auto !important;
    min-height: 460px !important;
  }

  /* Crests downsized on narrow viewports */
  .crest.xl { width: 64px; height: 64px; font-size: 24px; }
  .crest.lg { width: 44px; height: 44px; font-size: 16px; }

  /* Reduce common large margins */
  [style*="margin-bottom: 32px"] { margin-bottom: 18px !important; }
  [style*="margin-bottom: 28px"] { margin-bottom: 16px !important; }
  [style*="margin-bottom: 24px"] { margin-bottom: 14px !important; }

  /* Wide gaps tighten */
  [style*="gap: 64px"]  { gap: 24px !important; }
  [style*="gap: 48px"]  { gap: 20px !important; }
  [style*="gap: 40px"]  { gap: 18px !important; }
  [style*="gap: 24px"]  { gap: 14px !important; }

  /* Modal padding tweak */
  [style*="position: fixed"][style*="inset: 0"] > .card > div {
    padding: 16px !important;
  }

  /* --- LANDING PAGE --- */

  /* Header: hide "Sign in" — the "Open the platform" button is enough on phones */
  .landing-signin { display: none !important; }
  .landing-header { padding: 12px 14px !important; }
  .landing-header-cta .btn { padding: 8px 12px !important; font-size: 12.5px !important; }

  /* Hero text & buttons stack and go full-width */
  .landing-hero { padding: 28px 14px 22px !important; }
  .landing-hero-text > h1 { font-size: 36px !important; line-height: 1.05 !important; margin-bottom: 16px !important; }
  .landing-hero-text > p { font-size: 15px !important; margin-bottom: 22px !important; }
  .landing-hero-text > .row {
    flex-direction: column !important;
    width: 100%;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .landing-hero-text > .row > .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  /* The trust-badges row (COPPA/data) — keep horizontal, wrap if needed */
  .landing-hero-text > .row:last-child {
    flex-direction: row !important;
    width: auto;
    margin-top: 28px !important;
    gap: 14px !important;
    justify-content: center !important;
    flex-wrap: wrap;
  }

  /* Partner logos: smaller, more wrap-friendly */
  .landing-partners { margin-bottom: 48px !important; }
  .landing-partners > div:last-child { gap: 16px 22px !important; row-gap: 12px !important; }
  .landing-partners > div:last-child > div { font-size: 11px !important; }

  /* Feature pillars: 1-col on phones */
  .landing-features { padding: 36px 14px !important; }
  .landing-features > div:first-child { margin-bottom: 28px !important; }
  .landing-features > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .landing-features .card { padding: 20px !important; }

  /* Games table */
  .landing-games { padding: 32px 14px !important; }

  /* CTA band */
  .landing-cta { padding: 40px 14px 56px !important; }
  .landing-cta .card { padding: 28px 18px !important; }

  /* Footer: stack and center */
  .landing-footer {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center;
    padding: 24px 16px !important;
  }
  .landing-footer > .row { flex-wrap: wrap; justify-content: center; gap: 12px !important; }

  /* --- PERSONA PICKER --- */
  /* Single column at this width — better card readability */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .persona-card { padding: 22px !important; }

  /* --- SHELL TOPBAR --- */
  .app-topbar { padding: 0 10px !important; }
  /* The persona dropdown trigger text gets crowded — hide the text labels, keep avatar + chev */
  .app-topbar > div:last-child .btn.ghost > div { display: none; }
  /* Notification dropdown was position:absolute right:0 relative to the bell
     button wrapper — but the bell wrapper sits ~80px from the viewport's right
     edge (the user menu is to its right), so even after shrinking the width
     the 360px dropdown still overflowed off the left. Re-anchor it to the
     viewport's right edge with position:fixed. */
  .app-topbar [style*="width: 360px"] {
    position: fixed !important;
    top: 64px !important;          /* mobile topbar height (56px) + 8px gap */
    right: 10px !important;
    left: auto !important;
    width: calc(100vw - 20px) !important;
    max-width: 360px !important;
  }
  /* Same safety net for the user-menu dropdown (min-width: 220) */
  .app-topbar [style*="min-width: 220px"] {
    max-width: calc(100vw - 24px) !important;
  }

  /* --- LOBBY --- */
  /* Score: home / score / away each centered, smaller crests */
  .lobby-hero-home, .lobby-hero-away {
    justify-content: center !important;
  }
  .lobby-hero-home > div, .lobby-hero-away > div {
    text-align: center !important;
  }
  /* Mascot subtitle is too long to fit alongside name — let it wrap */
  .lobby-hero-home > div > div,
  .lobby-hero-away > div > div { white-space: normal !important; }

  /* Match flow timeline + stage area + chat all stack — they already do via 240 1fr 360 rule */
  /* But the chat is now full-width: give it a comfortable height */
  .lobby-body { gap: 14px !important; }

  /* --- MATCH ROW --- */
  /* Drop the inline GameTag in any MatchRow (no GameTag rendered in compact mode anyway) */
  .match-row > .badge { display: none !important; }
  /* Non-compact MatchRow: tighter 3-col, smaller date column */
  [style*="grid-template-columns: 92px 1fr auto auto"] {
    grid-template-columns: 60px 1fr auto !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  [style*="grid-template-columns: 92px 1fr auto auto"] > div:first-child > span.mono { display: none !important; }
  [style*="grid-template-columns: 92px 1fr auto auto"] > div:first-child > span { font-size: 11px !important; }

  /* --- HOME PAGE LIVE MATCH CARD --- */
  /* The big 56px score with 56px gap is way too wide — already handled by font-size rule.
     Also tighten the gap. */
  [style*="font-size: 56px"][style*="gap: 56px"] { gap: 24px !important; }

  /* --- BRACKET PAGE --- */
  /* Bracket is intentionally wide; let it scroll horizontally inside its card */
  /* (already does via padding: 32px; min-width: fit-content on inner) */

  /* --- HOME PAGE --- */
  /* Hero band: tighter padding, title block + button stack */
  .home-hero { padding: 22px 18px !important; }
  .home-hero > div:last-child {  /* the inline flex row inside */
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }
  .home-hero .btn { width: 100%; justify-content: center; }
  .home-hero p { font-size: 13px !important; }

  /* Card headers wrap (h3 + badges + GameTag rows can overlap on phones) */
  .card-header { flex-wrap: wrap; gap: 8px; }

  /* "This match" card body: tighter padding so it doesn't waste space */
  .home-live-body { padding: 16px !important; }

  /* Score area: tighter gaps between team blocks when stacked */
  .home-live-score { gap: 16px !important; }

  /* Footer row: meta info on top, button full-width below */
  .home-live-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
  }
  .home-live-meta {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 10px 14px !important;
  }
  .home-live-footer > .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ==========================================================================
   ≤ 480px — small phones (iPhone SE, Galaxy A series, etc.)
   ========================================================================== */
@media (max-width: 480px) {

  .app-main { padding: 12px 10px 80px !important; }

  /* Persona picker: even tighter side padding so the (now 1-col) cards stretch
     close to the viewport edges with just a small gutter. */
  [style*="padding: 40px 56px"] { padding: 18px 10px !important; }
  [style*="padding: 20px 56px"] { padding: 12px 12px !important; }

  /* Picker, 3-col feature grids, 2-col grids all become 1-col here */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  /* Counterpick stages keep 2-col for visual density */
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Even smaller fonts */
  [style*="font-size: 64px"] { font-size: 30px !important; }
  [style*="font-size: 56px"] { font-size: 28px !important; gap: 16px !important; }
  [style*="font-size: 52px"] { font-size: 26px !important; }
  [style*="font-size: 48px"] { font-size: 22px !important; }
  [style*="font-size: 32px"] { font-size: 20px !important; }
  [style*="font-size: 28px"] { font-size: 19px !important; }
  [style*="font-size: 24px"] { font-size: 17px !important; }
  [style*="font-size: 22px"] { font-size: 16px !important; }
  [style*="font-size: 20px"] { font-size: 15px !important; }

  /* Landing hero h1 ultra-compact */
  .landing-hero-text > h1 { font-size: 30px !important; }
  .landing-hero-text > p { font-size: 14px !important; }

  /* Lobby hero score even smaller */
  [style*="font-size: 80px"] { font-size: 32px !important; gap: 14px !important; }

  /* Match row: stack date above teams when really narrow.
     Only target NON-COMPACT rows (4 children: date / teams / gametag / status)
     because compact-mode rows have only 2 children and would mis-route. */
  [style*="grid-template-columns: 92px 1fr auto auto"] {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "meta status"
      "teams status" !important;
    padding: 10px 12px !important;
  }
  [style*="grid-template-columns: 92px 1fr auto auto"] > div:first-child {
    grid-area: meta;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center;
    font-size: 10.5px !important;
  }
  [style*="grid-template-columns: 92px 1fr auto auto"] > div:first-child > span.mono { display: inline !important; }
  [style*="grid-template-columns: 92px 1fr auto auto"] > div:nth-child(2) { grid-area: teams; }
  [style*="grid-template-columns: 92px 1fr auto auto"] > div:last-child { grid-area: status; align-self: center; }
  /* Compact MatchRow (school page, "by week" view): leave the 720px 3-col layout */

  /* Persona card padding */
  .persona-card { padding: 20px !important; }

  /* Buttons: bigger touch targets at this size */
  .btn { min-height: 40px; }
}