/* ============ Global mobile tweaks (desktop untouched) ============ */
@media (max-width: 768px) {
  :root {
    --sbw: 200px;        /* sidebar width (vertical nav) */
    --pad-x: 28px;       /* total page horizontal padding on mobile */
    --toggle-size: 22px; /* tiny chevron button size */
  }

  html, body { overflow-x: hidden; }
  body { line-height: 1.45; }

  /* Content padding */
  .page-wrap { padding: 14px 14px 22px !important; }

  /* Panels/cards */
  .panel { padding: 12px 12px !important; border-radius: 10px; }

  /* Headings */
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.05rem; }

  /* Buttons/inputs */
  button, .btn, input[type="submit"] { width: 100%; min-height: 44px; }
  input[type="text"], input[type="email"], input[type="password"], select { width: 100%; }

  /* ===== Masthead: stack & pill nav ===== */
  .masthead {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px 14px 10px !important;
  }
  .brand { min-height: unset !important; gap: 10px !important; align-items: center !important; }
  .brand img { height: 52px !important; }
  .welcome-stack { padding-bottom: 0 !important; }
  .welcome { font-size: 16px !important; }
  .role-line { font-size: 12px !important; }

  .nav { order: 2; display: block !important; padding-bottom: 0 !important; }
  .nav::-webkit-scrollbar { display: none; }
  .nav {
    -ms-overflow-style: none; scrollbar-width: none;
    white-space: nowrap; overflow-x: auto; overflow-y: hidden;
    padding: 6px 2px 2px !important; margin: 0 -2px;
  }
  .nav .tab {
    display: inline-block !important; white-space: nowrap;
    margin: 0 8px 6px 0; padding: 8px 12px !important;
    font-size: 14px !important; border-radius: 18px !important; flex: 0 0 auto;
  }

  .league-switch { order: 3; padding-bottom: 0 !important; gap: 6px !important; }
  .league-switch .select-wrap { width: 100%; }
  .league-switch select { min-width: 0 !important; width: 100% !important; padding-right: 38px !important; }
  .select-wrap { display: block; }
  .select-wrap:after { right: 12px !important; }

  /* ===== Default page canvas (keeps desktop look when needed) ===== */
  main.page-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main.page-wrap > * { min-width: 980px; } /* unchanged for most pages */

  /* ===== League Picks two-pane (robust base classes added by JS) ===== */
  .two-pane-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0;
    min-width: 0 !important;
    position: relative;
    overflow: hidden; /* hides sidebar when sliding out */
  }

  /* Left vertical nav */
  .two-pane-container .ls-sidebar {
    flex: 0 0 var(--sbw) !important;
    max-width: var(--sbw) !important;
    background: var(--bg-panel, #0f1e2e);
    border-right: 1px solid var(--outline, #233a59);
    position: relative;
    z-index: 2;
    transition: transform 180ms ease, width 180ms ease;
  }

  /* Right content (picks board) – fills remaining width */
  .two-pane-container .ls-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100vw - var(--sbw) - var(--pad-x)) !important;
    max-width: calc(100vw - var(--sbw) - var(--pad-x)) !important;
    transition: width 180ms ease;
  }

  /* Open / Closed states toggled by JS */
  .two-pane-container.sidebar-open  .ls-sidebar { transform: translateX(0); width: var(--sbw); }
  .two-pane-container.sidebar-closed .ls-sidebar { transform: translateX(-100%); width: 0; }
  .two-pane-container.sidebar-open  .ls-content  { width: calc(100vw - var(--sbw) - var(--pad-x)) !important; max-width: calc(100vw - var(--sbw) - var(--pad-x)) !important; }
  .two-pane-container.sidebar-closed .ls-content  { width: calc(100vw - var(--pad-x)) !important;     max-width: calc(100vw - var(--pad-x)) !important; }

  /* Tiny arrow toggle (top-right of sidebar) */
  .two-pane-container > .mobile-sidebar-toggle {
    position: absolute;
    top: 6px;
    left: calc(var(--sbw) - var(--toggle-size) - 6px);
    width: var(--toggle-size);
    height: var(--toggle-size);
    padding: 0;
    border: 1px solid var(--outline, #233a59);
    border-radius: 999px;
    background: var(--btn-bg, #173050);
    color: var(--text, #e8f0ff);
    display: inline-grid;
    place-items: center;
    line-height: 1;
    z-index: 60;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .two-pane-container.sidebar-closed > .mobile-sidebar-toggle { left: 8px; }
  .two-pane-container > .mobile-sidebar-toggle::after { content: "«"; font-weight: 700; font-size: 13px; }
  .two-pane-container.sidebar-closed > .mobile-sidebar-toggle::after { content: "»"; }

  /* ===== My Picks: “Week X Games” full-width, no inner scroll ===== */
  .week-games-wide {
    width: calc(100vw - var(--pad-x)) !important;
    max-width: calc(100vw - var(--pad-x)) !important;
    overflow: visible !important;
    max-height: none !important;
  }
  .week-games-wide .scroll, .week-games-wide .scrollable,
  .week-games-wide .table-wrapper, .week-games-wide .list-scroll,
  .week-games-wide .inner-scroll, .week-games-wide [style*="overflow"] {
    overflow: visible !important;
    max-height: none !important;
  }

  /* ===== Mobile-friendly picks rows/chips (keeps desktop the same) ===== */
  .ls-content .pick-row, .ls-content .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .ls-content .pick-chip, .ls-content .chip { flex: 1 1 48%; min-width: 140px; }

  /* Generic fallbacks */
  .row, .grid, .columns { display: grid; grid-template-columns: 1fr !important; gap: 12px !important; }
  .col-2, .col-3, .left, .right, .sidebar { width: 100% !important; }

  /* Tables outside League Picks can still side-scroll if needed */
  table { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; }
  thead, tbody, tr, th, td { white-space: nowrap; }
  th, td { padding: 8px 10px; }
}

/* ============ Mobile Overrides (2025-09-09) ============ */
/* These rules apply only on small screens and do not affect desktop.
   They strengthen responsiveness, remove inner scrolls, and make primary
   content (like "Week X Games") span the usable width. */
@media (max-width: 768px) {

  /* Ensure viewport-filling width without horizontal scroll */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Primary layout: collapse any two-pane into stacked */
  .two-pane-container,
  .layout,
  .page,
  .page-wrap { display: block !important; width: 100% !important; }

  /* Sidebars -> off-canvas or stacked below content */
  .sidebar, [class*="side"], [id*="side"] {
    width: 100% !important;
    max-width: 100% !important;
    order: 2;
  }

  /* Content area first */
  .content, .main, [role="main"] {
    width: 100% !important;
    max-width: 100% !important;
    order: 1;
  }

  /* Week X Games: truly full width of the viewport minus page padding */
  .week-games-wide,
  .week-games,
  .week__games,
  .games-list,
  [data-section="week-games"] {
    display: block !important;
    width: calc(100vw - var(--pad-x)) !important;
    max-width: calc(100vw - var(--pad-x)) !important;
    margin-inline: calc(var(--pad-x) / 2 * -1) 0 !important; /* pull to the right edge */
    overflow: visible !important;
  }

  /* Make any grid/list of games wrap nicely */
  .games-grid, .games, .matchups, .fixtures, .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Prevent nested panels from adding double padding that causes clipping */
  .panel, .card {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Tables: enable horizontal scroll without breaking layout */
  table { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  thead, tbody, tr, th, td { white-space: nowrap; }

  /* Media: prevent overflow */
  img, video, canvas, svg { max-width: 100% !important; height: auto !important; }

  /* Forms/buttons: touch-friendly sizing */
  button, .btn, input[type="submit"] { min-height: 44px; }

  /* Navigation: wrap into a column and hide giant gaps */
  nav, .masthead, .navbar, .menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Utility: prevent any hard-coded widths from breaking mobile */
  [style*="width:"], [class*="width-"], [class*="w-"] { max-width: 100% !important; }
}

/* ============ My Picks: restore two-pane with fixed vertical nav (2025-09-09) ============ */
/* Keep the vertical navigation at its original width on mobile and place content to its right. */
@media (max-width: 768px) {

  /* Re-enable two-column grid for the My Picks two-pane container */
  .two-pane-container {
    display: grid !important;
    grid-template-columns: var(--sbw) 1fr !important;
    align-items: start !important;
    column-gap: 10px !important;
  }

  /* Sidebar: fixed width equal to --sbw */
  .two-pane-container .ls-sidebar,
  .two-pane-container .sidebar,
  .two-pane-container [class*="side"] {
    width: var(--sbw) !important;
    max-width: var(--sbw) !important;
    flex: 0 0 var(--sbw) !important;
    order: 0 !important;
  }

  /* Main content sits to the right of the nav */
  .two-pane-container .ls-content,
  .two-pane-container .content,
  .two-pane-container [role="main"] {
    width: auto !important;
    max-width: calc(100vw - var(--sbw) - var(--pad-x)) !important;
    margin: 0 !important;
    order: 0 !important;
  }

  /* Ensure our earlier generic mobile overrides don't expand the sidebar */
  .two-pane-container .sidebar,
  .two-pane-container [class*="side"] { max-width: var(--sbw) !important; }

  /* If your JS toggles open/closed states, default to 'open' look on mobile */
  .two-pane-container.sidebar-open  .ls-sidebar { transform: translateX(0) !important; width: var(--sbw) !important; }
  .two-pane-container.sidebar-closed .ls-sidebar { transform: translateX(-100%) !important; width: 0 !important; }

  /* Keep the great-looking Week X sections as-is; no changes needed beyond width cap above */
}