/* ── JLukeSports responsive layout ─────────────────────────────────────── */

/* Pitch-type tables: freeze first column while scrolling horizontally */
.jl-pitch-type-section .jl-pitch-type-desktop {
  -webkit-overflow-scrolling: touch;
}

.jl-pitch-type-section .jl-pitch-type-table th.jl-pitch-type-sticky-col,
.jl-pitch-type-section .jl-pitch-type-table td.jl-pitch-type-sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 92px;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.35);
}

.jl-pitch-type-section .jl-pitch-type-table thead th.jl-pitch-type-sticky-col {
  z-index: 3;
  background-color: #2e2e2e !important;
}

.jl-pitch-name-abbr {
  display: none;
}

/* Phone-only blocks hidden unless mobile layout is active */
.jl-metric-strip-cards,
.jl-splits-cards,
.jl-mobile-plot-switcher,
.jl-mobile-plot-view {
  display: none;
}

/* ── Shared tablet tweaks (iPad — keep mostly as-is) ───────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .jl-site-root {
    padding: 16px 14px 28px !important;
  }
}

/* ── Desktop: restore multi-plot layouts, hide phone UI ──────────────────── */
@media (min-width: 769px) {
  .jl-mobile-plot-switcher,
  .jl-metric-strip-cards,
  .jl-splits-cards,
  .jl-mobile-plot-view {
    display: none !important;
  }

  .jl-pitch-type-desktop,
  .jl-metric-strip-table {
    display: block !important;
  }

  .jl-pitcher-plots-top .jl-mobile-plot-panel.jl-plot-shapes,
  .jl-pitcher-plots-top .jl-mobile-plot-panel.jl-plot-usage {
    display: inline-block !important;
    width: calc(50% - 8px) !important;
    vertical-align: top !important;
    margin-bottom: 16px !important;
  }

  .jl-pitcher-plots-top .jl-mobile-plot-panel.jl-plot-shapes {
    margin-right: 8px !important;
  }

  .jl-pitcher-plots-bottom .jl-mobile-plot-panel {
    display: block !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .jl-pitcher-plots-bottom .jl-plot-location .js-plotly-plot {
    max-width: 1200px;
    margin: 0 auto;
  }

  .jl-hitter-plots-row {
    display: grid !important;
    grid-template-columns: minmax(240px, 0.95fr) minmax(320px, 1.2fr) minmax(300px, 1.25fr) !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    align-items: start !important;
  }

  .jl-hitter-mid-wrap {
    display: contents !important;
  }

  .jl-hitter-spray-col {
    display: block !important;
  }

  .jl-player-charts > .jl-mobile-plot-panel.jl-plot-spray,
  .jl-pitcher-plots-top .jl-mobile-plot-panel.jl-plot-spray {
    display: none !important;
  }
}

/* ── Phone layout (iPhone) ─────────────────────────────────────────────── */
@media (max-width: 768px), (max-device-width: 768px) {
  .jl-site-root {
    padding: 12px 10px 24px !important;
    overflow-x: hidden !important;
  }

  .jl-site-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .jl-site-header h1 {
    font-size: 22px !important;
  }

  .jl-site-header > div:last-child {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .jl-league-status {
    text-align: center !important;
    font-size: 10px !important;
  }

  #main-tabs > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow-x: visible !important;
  }

  #main-tabs .tab {
    flex: 1 1 auto !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    text-align: center !important;
  }

  .jl-teams-league-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  .jl-teams-league-label {
    text-align: left !important;
    min-width: 0 !important;
  }

  .jl-teams-league-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .jl-teams-league-row > div[style*="width: 1px"] {
    display: none !important;
  }

  .jl-roster-columns {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .jl-player-bio h2 {
    font-size: 22px !important;
  }

  .jl-player-bio img {
    width: 72px !important;
    height: 72px !important;
  }

  /* ── Summary strip cards + compact desktop-style pitch tables ───────── */
  .jl-metric-strip-table,
  .jl-splits-desktop {
    display: none !important;
  }

  .jl-metric-strip-cards,
  .jl-splits-cards {
    display: block !important;
  }

  .jl-pitch-type-section .jl-pitch-type-desktop {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .jl-pitch-type-section table {
    min-width: 620px !important;
    width: 100%;
  }

  .jl-pitch-type-section .jl-pitch-name-full {
    display: none !important;
  }

  .jl-pitch-type-section .jl-pitch-name-abbr {
    display: inline !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
  }

  .jl-pitch-type-section .jl-pitch-type-table th.jl-pitch-type-sticky-col,
  .jl-pitch-type-section .jl-pitch-type-table td.jl-pitch-type-sticky-col {
    min-width: 44px !important;
    padding: 5px 4px !important;
    font-size: 10px !important;
  }

  .jl-pitch-type-section th:not(.jl-pitch-type-sticky-col),
  .jl-pitch-type-section td:not(.jl-pitch-type-sticky-col) {
    padding: 5px 6px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .jl-metric-strip-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .jl-metric-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .jl-metric-card-label {
    font-size: 10px;
    color: #aaa;
    font-weight: 600;
    text-align: center;
  }

  .jl-metric-card-value {
    border-radius: 5px;
    padding: 10px 6px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .jl-splits-card {
    background: #15151b;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
  }

  .jl-splits-card-title {
    font-weight: 700;
    font-size: 14px;
    color: #f0f0f0;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2a2a;
  }

  .jl-splits-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .jl-splits-card-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .jl-splits-card-col {
    font-size: 10px;
    color: #888;
    font-weight: 600;
    text-align: center;
  }

  .jl-splits-card-val {
    border-radius: 5px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* ── One plot at a time (dedicated host above tables) ───────────────── */
  .jl-mobile-plot-switcher,
  .jl-mobile-plot-view {
    display: block !important;
  }

  .jl-mobile-plot-view {
    margin-bottom: 12px !important;
    min-height: 320px;
  }

  .jl-mobile-plot-view .js-plotly-plot,
  .jl-mobile-plot-view .plot-container {
    width: 100% !important;
    height: 340px !important;
    min-height: 300px !important;
  }

  .jl-player-charts .jl-pitcher-plots-top,
  .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-shapes,
  .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-usage,
  .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-location,
  .jl-player-charts > .jl-mobile-plot-panel {
    display: none !important;
  }

  .jl-player-charts .jl-pitcher-plots-bottom {
    display: contents !important;
  }

  .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-rolling {
    display: none !important;
  }

  .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-rolling.jl-mobile-plot-active {
    display: block !important;
    order: -1;
    margin-bottom: 12px !important;
  }

  .jl-player-charts {
    display: flex !important;
    flex-direction: column !important;
  }

  .jl-pitch-type-section {
    order: 0;
  }

  .jl-mobile-plot-view:not(:has(.js-plotly-plot)) {
    display: none !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  .jl-mobile-plot-switcher {
    margin: 8px 0 12px !important;
    padding: 8px !important;
    background: #14141a;
    border: 1px solid #222;
    border-radius: 10px;
  }

  .jl-mobile-plot-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  .jl-mobile-plot-tab-label {
    display: inline-block !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid #333 !important;
    background: #1a1a20 !important;
    color: #ccc !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  .jl-mobile-plot-tab-input {
    display: none !important;
  }

  .jl-mobile-plot-tab-label:has(.jl-mobile-plot-tab-input:checked),
  .jl-mobile-plot-tab-label:has(input:checked) {
    background: var(--jl-accent) !important;
    color: var(--jl-on-accent) !important;
    border-color: var(--jl-accent) !important;
  }

  .jl-mobile-plot-panel {
    display: none !important;
    margin-bottom: 12px !important;
  }

  .jl-mobile-plot-panel.jl-mobile-plot-active {
    display: block !important;
  }

  .jl-hitter-plots-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
  }

  .jl-hitter-mid-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .jl-hitter-spray-col {
    display: none !important;
  }

  .jl-player-charts > .jl-mobile-plot-panel.jl-plot-spray,
  .jl-player-charts > .jl-mobile-plot-panel.jl-plot-xwoba,
  .jl-player-charts > .jl-mobile-plot-panel.jl-plot-shapes,
  .jl-player-charts > .jl-mobile-plot-panel.jl-plot-usage,
  .jl-player-charts > .jl-mobile-plot-panel.jl-plot-rolling,
  .jl-player-charts > .jl-mobile-plot-panel.jl-plot-location {
    width: 100% !important;
  }

  .jl-mobile-plot-panel .js-plotly-plot,
  .jl-mobile-plot-panel .plot-container {
    width: 100% !important;
  }

  #player-pitch-shapes-graph,
  .jl-pitch-shapes-graph,
  .jl-mobile-plot-panel .js-plotly-plot {
    height: 320px !important;
    min-height: 300px !important;
  }

  #player-rolling-pitch-graph {
    height: 280px !important;
  }

  .jl-rolling-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .jl-rolling-controls {
    margin-left: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .jl-rolling-controls > div {
    width: 100% !important;
  }

  .jl-rolling-controls .Select,
  .jl-rolling-controls .Select-control,
  .jl-rolling-controls .Select__control {
    width: 100% !important;
  }

  #player-actions {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
  }

  #player-actions button {
    width: 100% !important;
  }

  #roster-type-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    justify-content: center;
  }

  #roster-type-selector label {
    margin-right: 0 !important;
    font-size: 12px !important;
  }
}

/* Phone device class (from JS) — reinforce plot/table rules */
html[data-device="phone"] .jl-roster-columns {
  grid-template-columns: 1fr !important;
}

html[data-device="phone"] .jl-metric-strip-table,
html[data-device="phone"] .jl-splits-desktop {
  display: none !important;
}

html[data-device="phone"] .jl-pitch-type-section .jl-pitch-name-full {
  display: none !important;
}

html[data-device="phone"] .jl-pitch-type-section .jl-pitch-name-abbr {
  display: inline !important;
}

html[data-device="phone"] .jl-pitch-type-section .jl-pitch-type-table th.jl-pitch-type-sticky-col,
html[data-device="phone"] .jl-pitch-type-section .jl-pitch-type-table td.jl-pitch-type-sticky-col {
  min-width: 44px !important;
  padding: 5px 4px !important;
}

html[data-device="phone"] .jl-pitch-type-section .jl-pitch-type-desktop {
  display: block !important;
}

html[data-device="phone"] .jl-metric-strip-cards,
html[data-device="phone"] .jl-splits-cards {
  display: block !important;
}

html[data-device="phone"] .jl-mobile-plot-switcher,
html[data-device="phone"] .jl-mobile-plot-view {
  display: block !important;
}

html[data-device="phone"] .jl-mobile-plot-view:not(:has(.js-plotly-plot)) {
  display: none !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
}

html[data-device="phone"] .jl-player-charts .jl-pitcher-plots-top,
html[data-device="phone"] .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-shapes,
html[data-device="phone"] .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-usage,
html[data-device="phone"] .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-location,
html[data-device="phone"] .jl-player-charts > .jl-mobile-plot-panel {
  display: none !important;
}

html[data-device="phone"] .jl-player-charts .jl-pitcher-plots-bottom {
  display: contents !important;
}

html[data-device="phone"] .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-rolling {
  display: none !important;
}

html[data-device="phone"] .jl-player-charts .jl-pitcher-plots-bottom .jl-mobile-plot-panel.jl-plot-rolling.jl-mobile-plot-active {
  display: block !important;
  order: -1;
  min-height: 300px;
}

html[data-device="phone"] .jl-mobile-plot-panel {
  display: none !important;
}

html[data-device="phone"] .jl-mobile-plot-panel.jl-mobile-plot-active {
  display: block !important;
  min-height: 300px;
}

html[data-device="phone"] .jl-mobile-plot-panel.jl-mobile-plot-active .js-plotly-plot {
  width: 100% !important;
  min-height: 300px !important;
}

html[data-device="phone"] .jl-hitter-spray-col {
  display: none !important;
}

/* Testing badge */
html[data-device="phone"] body::before {
  content: "Mobile layout";
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jl-accent);
  background: rgba(11, 11, 15, 0.88);
  border: 1px solid var(--jl-accent-border);
  border-radius: 999px;
  padding: 4px 10px;
  pointer-events: none;
}