/*
 * Global standings table.
 *
 * One source of truth for template-parts/standings-table.php.
 * Used by tournament pages, team pages and category/news hubs.
 *
 * IMPORTANT:
 * Page-specific spacing around the component belongs to page CSS.
 * This file contains only the reusable standings component itself.
 */


/* =========================================================
   Base block
   ========================================================= */

.sp-standings-block{
  width:100%;
  max-width:100%;
  min-width:0;
  scroll-margin-top:96px;
  margin-top:22px;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.sp-standings-block.sp-standings-block--single{
  margin-top:0 !important;
}

.sp-standings-block__title{
  margin:0 0 12px !important;
  color:var(--sp-text);
  font-size:clamp(20px,2vw,28px);
  line-height:1.15;
}

.sp-standings-block__hint{
  margin:8px 0 14px;
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  line-height:1.5;
}


/* =========================================================
   Table
   ========================================================= */

.sp-standings-table-wrap{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-md);
  background:var(--sp-bg-soft);
  -webkit-overflow-scrolling:touch;
}

.sp-standings-table{
  width:100%;
  min-width:920px;
  border-collapse:separate;
  border-spacing:0;
}

.sp-standings-table th,
.sp-standings-table td{
  padding:10px 9px;
  border-bottom:1px solid var(--sp-card-border);
  color:var(--sp-text);
  font-size:var(--sp-fs-sm);
  text-align:center;
  vertical-align:middle;
}

.sp-standings-table th{
  position:relative;
  color:var(--sp-muted);
  font-size:var(--sp-fs-xs);
  font-weight:var(--sp-fw-bold);
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:help;
}

.sp-standings-table th[title]{
  text-decoration:underline dotted var(--sp-accent-alpha-34);
  text-underline-offset:4px;
}

.sp-standings-table tbody tr:hover{
  background:var(--sp-white-04);
}

.sp-standings-table__num{
  color:var(--sp-muted);
  font-weight:var(--sp-fw-bold);
}

.sp-standings-table__team{
  min-width:230px;
  text-align:left !important;
}

.sp-standings-table__team a,
.sp-standings-table__team > span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--sp-text);
  font-weight:400 !important;
  text-decoration:none;
}

.sp-standings-table__team,
.sp-standings-table__team a,
.sp-standings-table__team a *,
.sp-standings-table__team > span,
.sp-standings-table__team > span *{
  font-weight:400 !important;
}

.sp-standings-table__team a:hover{
  color:var(--sp-accent);
}

.sp-standings-table__logo{
  width:30px;
  height:30px;
  flex:0 0 30px;
  object-fit:contain;
}

.sp-standings-table__team span span,
.sp-standings-table__team a span{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.sp-standings-table__team em{
  color:var(--sp-accent);
  font-size:var(--sp-fs-xs);
  font-style:normal;
  font-weight:var(--sp-fw-bold);
}


/* =========================================================
   Desktop / mobile column variants
   ========================================================= */

.sp-standings-table__mobile-only,
.sp-standings-table__label-mobile{
  display:none;
}


/* =========================================================
   Highlighted teams
   ========================================================= */

.sp-standings-table tbody tr.is-highlighted > td{
  background:var(--sp-accent-alpha-08);
  border-bottom-color:var(--sp-accent-alpha-24);
}

.sp-standings-table tbody tr.is-highlighted:hover > td{
  background:var(--sp-accent-alpha-12);
}

.sp-standings-table tbody tr.is-highlighted > td:first-child{
  box-shadow:inset 3px 0 0 var(--sp-accent);
}

.sp-standings-table tbody tr.is-highlighted .sp-standings-table__team strong{
  color:var(--sp-accent-text);
}


/* =========================================================
   Mobile standings
   ========================================================= */

@media (max-width:767px){

  .sp-standings-block{
    margin-top:18px;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .sp-standings-block.sp-standings-block--single{
    margin-top:0 !important;
  }

  /*
   * Horizontal scroll is intentional.
   * The full table remains in server-rendered HTML.
   */
  .sp-standings-table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-right:0;
    margin-left:0;
    overflow-x:auto;
    overflow-y:hidden;
    border:1px solid var(--sp-card-border);
    border-radius:var(--sp-radius-md);
    background:var(--sp-bg-soft);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
  }

  /*
   * On phones detailed desktop columns are replaced by
   * compact totals (games / wins / losses / points).
   * The table stays wider than the viewport and can be swiped.
   */
  .sp-standings-table{
    display:table;
    width:max-content;
    min-width:650px;
    max-width:none;
    border-collapse:separate;
    border-spacing:0;
  }

  .sp-standings-table thead{
    display:table-header-group;
  }

  .sp-standings-table tbody{
    display:table-row-group;
  }

  .sp-standings-table tr{
    display:table-row;
  }

  .sp-standings-table th,
  .sp-standings-table td{
    display:table-cell;
    width:auto;
    padding:8px 7px;
    border-bottom:1px solid var(--sp-card-border);
    font-size:13px;
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
  }

  .sp-standings-table td::before{
    content:none !important;
  }

  /*
   * Sticky position + team columns.
   */
  .sp-standings-table th:first-child,
  .sp-standings-table td:first-child{
    position:sticky;
    left:0;
    z-index:4;
    width:38px;
    min-width:38px;
    max-width:38px;
    background:var(--sp-bg-soft);
    isolation:isolate;
  }

  .sp-standings-table th:nth-child(2),
  .sp-standings-table td:nth-child(2){
    position:sticky;
    left:38px;
    z-index:4;
    width:158px;
    min-width:158px;
    max-width:158px;
    background:var(--sp-bg-soft);
    box-shadow:8px 0 14px rgba(0,0,0,.22);
    isolation:isolate;
  }

  .sp-standings-table thead th:first-child,
  .sp-standings-table thead th:nth-child(2){
    z-index:6;
  }

  .sp-standings-table__team{
    text-align:left !important;
  }

  .sp-standings-table__team a,
  .sp-standings-table__team > span{
    max-width:148px;
    gap:7px;
  }

  .sp-standings-table__logo{
    width:24px;
    height:24px;
    flex:0 0 24px;
  }

  .sp-standings-table__team strong,
  .sp-standings-table__team em{
    display:block;
    max-width:108px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .sp-standings-table__team strong{
    font-size:13px;
    line-height:1.2;
  }

  .sp-standings-table__team em{
    font-size:11px;
    line-height:1.15;
  }

  /*
   * Hide detailed desktop statistics.
   */
  .sp-standings-table .sp-standings-table__desktop-detail{
    display:none !important;
  }

  /*
   * Show compact mobile totals.
   */
  .sp-standings-table .sp-standings-table__mobile-only{
    display:table-cell !important;
  }

  .sp-standings-table__label-desktop{
    display:none !important;
  }

  .sp-standings-table__label-mobile{
    display:inline !important;
  }

  .sp-standings-table th{
    cursor:default;
  }

  .sp-standings-table th[title]{
    text-decoration:none;
  }

  .sp-standings-table__col-games{
    min-width:66px;
  }

  .sp-standings-table__col-wins-total{
    min-width:88px;
  }

  .sp-standings-table__col-losses-total{
    min-width:104px;
  }

  .sp-standings-table__col-points{
    min-width:72px;
  }

  /*
   * Opaque highlighted sticky cells.
   * Prevents scrolling statistics from showing through.
   */
  .sp-standings-table tbody tr.is-highlighted > td:first-child,
  .sp-standings-table tbody tr.is-highlighted > td:nth-child(2){
    background:
      linear-gradient(
        var(--sp-accent-alpha-12),
        var(--sp-accent-alpha-12)
      ),
      var(--sp-bg-soft) !important;
  }

  .sp-standings-table tbody tr.is-highlighted:hover > td:first-child,
  .sp-standings-table tbody tr.is-highlighted:hover > td:nth-child(2){
    background:
      linear-gradient(
        var(--sp-accent-alpha-18),
        var(--sp-accent-alpha-18)
      ),
      var(--sp-bg-soft) !important;
  }

  .sp-standings-table tbody tr.is-highlighted > td:first-child{
    box-shadow:inset 3px 0 0 var(--sp-accent);
  }
}