/* Stats2Pitch v1.7.6 — scroll + mobile/Z Fold hardening */

/*
 * SCROLL SAFETY
 * Older brand/auth layers use overflow:hidden in places. Dashboard pages must
 * always be allowed to grow beyond the viewport and use normal document scroll.
 */
html{
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
}
body{
  width:100%!important;
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  position:static!important;
  touch-action:pan-y pinch-zoom!important;
  -webkit-overflow-scrolling:touch;
}
#root{
  width:100%!important;
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
.app-shell,
.s2p-shell-v173{
  width:100%!important;
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:calc(40px + env(safe-area-inset-bottom))!important;
}
.auth-page{
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}
.prediction-panel,.table-wrap,.priority-compact,.priority-compact-v17{
  max-height:none!important;
}

/* Prevent any child from widening the page. */
.app-shell *{min-width:0}
img,svg,video,canvas{max-width:100%;height:auto}
input,select,button{max-width:100%}

/* Better tablet shell. */
@media (max-width:1100px){
  .app-shell,.s2p-shell-v173{padding:10px!important;padding-bottom:calc(34px + env(safe-area-inset-bottom))!important}
  .control-grid,.s2p-controls-v173 .control-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .control-grid .refresh,.s2p-controls-v173 .refresh{grid-column:1/-1!important;width:100%!important}
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .pred-table tbody{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Phones, unfolded narrow foldables and small tablets. */
@media (max-width:820px){
  body{min-width:0!important}
  .app-shell,.s2p-shell-v173{padding:8px!important;padding-bottom:calc(34px + env(safe-area-inset-bottom))!important}

  /* Header becomes two clean rows without sideways overflow. */
  .topbar,.s2p-topbar-v173{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
    min-height:0!important;
    padding:7px 2px 10px!important;
  }
  .topbar-brand,.s2p-topbar-v173 .topbar-brand{
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
  }
  .brand-inline{grid-column:1;display:flex!important;align-items:center!important;gap:6px!important}
  .brand-inline .mark{width:48px!important;height:30px!important}
  .brand-inline .wordmark{width:auto!important;max-width:126px!important;height:26px!important;object-fit:contain!important}
  .topbar .s2p-brand-lockup{grid-column:1;gap:6px!important}
  .topbar .s2p-brand-lockup svg{width:52px!important;height:30px!important}
  .topbar .s2p-wordmark{display:block!important;font-size:17px!important}
  .title-divider{display:none!important}
  .page-title,.s2p-topbar-v173 .page-title{
    grid-column:2!important;
    justify-self:end!important;
    text-align:right!important;
    font-size:17px!important;
    line-height:1.1!important;
    white-space:normal!important;
  }
  .top-actions-inline,.s2p-topbar-v173 .top-actions-inline{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:8px 0 0!important;
    margin:0!important;
    border-top:1px solid #142432!important;
    overflow:hidden!important;
  }
  .top-actions-inline>span,.s2p-topbar-v173 .top-actions-inline>span{
    display:block!important;
    max-width:70%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
  }
  .top-actions-inline button{flex:0 0 auto!important;padding:7px 0 7px 10px!important;font-size:12px!important}

  /* Controls remain readable; no tiny six-column toolbar. */
  .controls{padding:9px!important;margin-top:8px!important}
  .control-grid,.s2p-controls-v173 .control-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .control-grid label,.s2p-controls-v173 label{grid-column:auto!important}
  .control-grid label:nth-child(3),.control-grid label:nth-child(4),
  .s2p-controls-v173 label:nth-child(3),.s2p-controls-v173 label:nth-child(4){grid-column:auto!important}
  .control-grid select,.control-grid input,.filter-trigger,.refresh,
  .s2p-controls-v173 select,.s2p-controls-v173 input,.s2p-controls-v173 button{min-height:46px!important;height:46px!important;font-size:14px!important}
  .control-grid .refresh,.s2p-controls-v173 .refresh{grid-column:1/-1!important}
  .selected-filter-bar{min-height:44px!important;padding:8px!important;gap:6px!important}
  .selected-chip{font-size:12px!important;padding:7px 9px!important}

  /* Tabs: 2x2 grid. No sideways swiping and no sticky element blocking content. */
  .s2p-board-tabs{
    position:static!important;
    top:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    margin:10px 0 9px!important;
    padding:6px!important;
    overflow:visible!important;
    border-radius:10px!important;
  }
  .s2p-board-tab{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:7px 8px!important;
    font-size:12px!important;
    white-space:normal!important;
    line-height:1.15!important;
  }

  /* Summary cards stay compact but legible. */
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .summary-card{min-height:68px!important;padding:9px!important;gap:8px!important}
  .summary-icon{width:38px!important;height:38px!important;font-size:19px!important;flex:0 0 38px!important}
  .summary-card span{font-size:10px!important;line-height:1.2!important}
  .summary-card strong{font-size:19px!important;overflow-wrap:anywhere}
  .summary-card:last-child strong{font-size:13px!important}

  /* One prediction card per row on foldables and phones. */
  .prediction-panel{overflow:visible!important;background:transparent!important;border:0!important}
  .prediction-panel-title{border:1px solid #1d3343!important;border-radius:8px!important;margin-bottom:7px!important}
  .table-wrap{overflow:visible!important;width:100%!important}
  .pred-table,.pred-table tbody{display:block!important;width:100%!important;max-width:100%!important}
  .pred-table thead{display:none!important}
  .pred-table tbody{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .pred-table tr{
    display:grid!important;
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:'league league' 'match match' 'time odds' 'prediction prediction' 'confidence details'!important;
    gap:0!important;
    border:1px solid #1d3445!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,#07131f,#050d15)!important;
    padding:9px!important;
    overflow:hidden!important;
  }
  .pred-table td{display:block!important;width:auto!important;max-width:100%!important;border:0!important;padding:6px!important;font-size:13px!important;overflow-wrap:anywhere!important}
  .pred-table td::before{display:block!important;color:#748897!important;font-size:9px!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin-bottom:3px!important}
  .pred-table td[data-label='League']{grid-area:league!important}
  .pred-table td[data-label='League']::before{content:'Competition'}
  .pred-table td[data-label='Match']{grid-area:match!important;border-top:1px solid #152a38!important;border-bottom:1px solid #152a38!important;padding-top:9px!important;padding-bottom:9px!important}
  .pred-table td[data-label='Match']::before{content:'Match'}
  .pred-table td[data-label='Time']{grid-area:time!important;text-align:left!important}
  .pred-table td[data-label='Time']::before{content:'Kickoff'}
  .pred-table td[data-label='Prediction']{grid-area:prediction!important}
  .pred-table td[data-label='Prediction']::before{content:'Prediction'}
  .pred-table td[data-label='Odds']{grid-area:odds!important;text-align:right!important}
  .pred-table td[data-label='Odds']::before{content:'Odd'}
  .pred-table td[data-label='Confidence']{grid-area:confidence!important}
  .pred-table td[data-label='Confidence']::before{content:'Confidence'}
  .pred-table td[data-label='Details']{grid-area:details!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important}
  .pred-table td[data-label='Details']::before{display:none!important}
  .details-cell .details-btn{width:100%!important;max-width:none!important;min-height:44px!important}
  .competition-cell{justify-content:flex-start!important}
  .competition-cell>div:last-child{text-align:left!important}
  .competition-cell strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .match-team span{white-space:normal!important;overflow-wrap:anywhere!important}
  .confidence{white-space:normal!important;flex-wrap:wrap!important}

  /* Priority rows become genuine cards. */
  .priority-compact-v17{overflow:visible!important;background:transparent!important;border:0!important}
  .priority-v17-row{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    grid-template-areas:'league odd' 'match match'!important;
    gap:7px 9px!important;
    margin-bottom:7px!important;
    padding:10px!important;
    border:1px solid #1d3445!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  .priority-v17-competition{grid-area:league!important}
  .priority-compact-match{grid-area:match!important}
  .priority-compact-match strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important}
  .priority-compact-odd{grid-area:odd!important;justify-self:end!important}
  .priority-compact-star{display:none!important}

  /* Bottom-sheet details still scroll independently. */
  .modal-backdrop.s2p17-modal{padding:0!important;align-items:end!important;overflow:hidden!important}
  .detail-modal,.detail-modal-v17{width:100%!important;max-width:100%!important;max-height:92dvh!important;overflow-y:auto!important;overscroll-behavior:contain!important;border-radius:16px 16px 0 0!important}
  .detail-body{padding:14px!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))!important}
}

/* Real phones + Z Fold cover screen. */
@media (max-width:600px){
  .app-shell,.s2p-shell-v173{padding:6px!important;padding-bottom:calc(32px + env(safe-area-inset-bottom))!important}
  .control-grid,.s2p-controls-v173 .control-grid{grid-template-columns:1fr!important}
  .control-grid label,.control-grid>label,
  .s2p-controls-v173 label,.s2p-controls-v173 label:nth-child(3),.s2p-controls-v173 label:nth-child(4){grid-column:1!important}
  .control-grid .refresh,.s2p-controls-v173 .refresh{grid-column:1!important;width:100%!important}
  .filter-panel{padding:10px!important}.filter-options{grid-template-columns:1fr!important}.filter-groups{grid-template-columns:1fr!important}
  .section-title{font-size:18px!important;margin:9px 2px!important}
}

@media (max-width:390px){
  .app-shell,.s2p-shell-v173{padding:5px!important}
  .topbar .s2p-wordmark{font-size:15px!important}.topbar .s2p-brand-lockup svg{width:46px!important;height:27px!important}
  .brand-inline .wordmark{max-width:104px!important}.page-title,.s2p-topbar-v173 .page-title{font-size:14px!important}
  .top-actions-inline>span,.s2p-topbar-v173 .top-actions-inline>span{max-width:58%!important;font-size:10px!important}
  .s2p-board-tabs{gap:5px!important;padding:5px!important}.s2p-board-tab{min-height:42px!important;font-size:11px!important;padding:6px!important}.s2p-board-tab b{min-width:20px!important;height:20px!important;font-size:10px!important}
  .summary-card{padding:8px!important}.summary-icon{width:34px!important;height:34px!important;flex-basis:34px!important;font-size:17px!important}.summary-card strong{font-size:17px!important}
  .pred-table tr{padding:8px!important;grid-template-areas:'league league' 'match match' 'time odds' 'prediction prediction' 'confidence confidence' 'details details'!important}
  .pred-table td[data-label='Details']{justify-content:stretch!important}.details-cell .details-btn{width:100%!important}
  .stars{font-size:13px!important}.confidence-pct{font-size:11px!important}
}

@media (max-width:330px){
  .summary-grid{grid-template-columns:1fr!important}
  .top-actions-inline>span{display:none!important}.top-actions-inline{justify-content:flex-end!important}
  .page-title,.s2p-topbar-v173 .page-title{font-size:13px!important}
}

/* Landscape phones: allow document scrolling; don't trap users in one viewport. */
@media (orientation:landscape) and (max-height:600px){
  html,body,#root,.app-shell,.auth-page{height:auto!important;max-height:none!important;overflow-y:visible!important}
  .auth-page{place-items:start center!important;padding-top:12px!important;padding-bottom:24px!important}
  .s2p-board-tabs{position:static!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}