/* =========================================================
   GRUNDLAYOUT
========================================================= */

.stats-page{
  position: relative;
  min-height: 100vh;
  padding: 28px 18px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Bakgrund */
.stats-page::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("/static/img/live_thl-bg.png") center / cover no-repeat;
  opacity: 0.75;
  z-index: -2;
  pointer-events: none;
}

.stats-page::after{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.50);
  z-index: -1;
  pointer-events: none;
}

/* Innehåll ovanför bakgrunden */
.stats-page > *{
  position: relative;
  z-index: 2;
}


/* =========================================================
   TOPPSEKTION
   - .stats-top
   - .stats-title
   - .stats-sub
========================================================= */

.stats-top{
  display:flex;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.stats-title{
  position: relative;
  padding-bottom: 12px;
}

.stats-title h1{
  margin:0;
  font-family: "EurostileExtended", Arial, sans-serif;
  letter-spacing: 1px;
}

.stats-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: #63ace8;
  border-radius: 2px;
}

.stats-sub{
  margin-top: 6px;
  min-height: 42px;
  line-height: 1.2;
  text-align: left;
}

.subtitle-main{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
  text-align: left;
}

.subtitle-sub{
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}


/* =========================================================
   TABS
   - .stats-tabs
   - .tab-btn
   - .tab
========================================================= */

.stats-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tab-btn{
  border:1px solid #ddd;
  background:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}

.tab-btn:hover{
  filter: brightness(0.96);
}

.tab-btn.active{
  border-color:#9ecc71;
  background:#63ace8;
  color:#fff;
}

.tab-btn.active:hover{
  filter: brightness(0.96);
}

.tab{
  display:none;
}

.tab.active{
  display:block;
}


/* =========================================================
   GEMENSAMMA KORT / FILTER / KNAPPAR / NOTER
========================================================= */

.card{
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:14px;
  padding:14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  margin-bottom:14px;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Kort-rubriker */
.card h3{
  margin: 0 0 10px 0;
  font-family: "EurostileExtended", Arial, sans-serif;
  letter-spacing: .5px;
  text-align: center;
}

/* Noter längst ner i kort */
.note{
  margin-top: 10px;
  font-size: 12px;
  color: #555;
  text-align: center;
}

.filters{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin: 8px 0 12px 0;
}

.filters label{
  font-size: 13px;
  color:#222;
  display:flex;
  gap:8px;
  align-items:center;
}

.filters select{
  padding:6px 8px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
}

.filters .chk{
  gap:6px;
}

.btn{
  padding:7px 10px;
  border-radius:10px;
  border:1px solid #63ace8;
  background:#63ace8;
  color:#fff;
  cursor:pointer;
}

.btn:hover{
  filter: brightness(0.96);
}


/* =========================================================
   ÅTERSTÄLL-KNAPPAR – HÖGERSTÄLLDA
========================================================= */

#resetAll,
#resetPlayers,
#resetPositions{
  margin-left: auto;
}


/* =========================================================
   GEMENSAMMA TABELLER
========================================================= */

.table-wrap{
  overflow:auto;
}

.stats-table{
  width:100%;
  border-collapse:collapse;
  table-layout: fixed;
}

.stats-table th,
.stats-table td{
  border-bottom:1px solid #eee;
  padding:8px 10px;
  text-align:left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-table thead th{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing: .6px;
  color: #6b7280;
  font-weight: 400;
}

/* Rank / placering */
.stats-table th:first-child,
.stats-table td:first-child{
  width: 5ch;
  min-width: 5ch;
  max-width: 5ch;
  text-align: left;
  padding-right: 8px;
  font-variant-numeric: tabular-nums;
}

.stats-table thead tr{
  background: rgba(195, 183, 166, 0.2);
  border-bottom: 2px solid rgba(0,0,0,0.05);
}

.stats-table tbody tr:hover{
  background: rgba(99,172,232,0.08);
}

.stats-table td:first-child{
  color:#000000;
  font-weight:500;
}

/* Positiva / negativa värden */
.neg{
  color: #d93025;
  font-weight: 500;
}

.pos{
  color: #17823b;
  font-weight: 500;
}


/* =========================================================
   GLOBAL FILTERBAR
   - .stats-filters
========================================================= */

/* Ingen egen klassreglering ännu.
   Filterbaren använder .card + .filters + .note */


/* =========================================================
   TAB: STANDINGS
   - #tab-standings
   - #standingsTable
========================================================= */

#standingsTable{
  table-layout: fixed;
}

/* # */
#standingsTable th:nth-child(1),
#standingsTable td:nth-child(1){
  width: 42px;
}

/* TEAM */
#standingsTable th:nth-child(2),
#standingsTable td:nth-child(2){
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Övriga kolumner */
#standingsTable th:nth-child(n+3),
#standingsTable td:nth-child(n+3){
  width: auto;
  text-align: center;
}

/* Sektion 2: mål */
#standingsTable th:nth-child(7),
#standingsTable td:nth-child(7){
  padding-left: 30px;
  border-left: 1px solid #eee;
}

/* Sektion 3: skott */
#standingsTable th:nth-child(10),
#standingsTable td:nth-child(10){
  padding-left: 30px;
  border-left: 1px solid #eee;
}

/* Sektion 4: poäng */
#standingsTable th:nth-child(13),
#standingsTable td:nth-child(13){
  padding-left: 30px;
  border-left: 1px solid #eee;
}

/* Centrera allt utom teamkolumn */
#standingsTable th:not(:nth-child(2)),
#standingsTable td:not(:nth-child(2)){
  text-align: center;
}


/* =========================================================
   TAB: SPELARSTATISTIK
   - #tab-players
   - #playersTable
========================================================= */

#playersTable th:nth-child(3),
#playersTable td:nth-child(3){
  width: 22%;
}

#playersTable th:nth-child(4),
#playersTable td:nth-child(4){
  width: 14%;
}

/* Centrera från POS och framåt */
#playersTable th:nth-child(n+5),
#playersTable td:nth-child(n+5){
  text-align: center;
}

/* =========================================================
   TAB: MÅLVAKTSLIGA
   - #tab-goalies
   - #goaliesTable
========================================================= */

#goaliesTable th:nth-child(3),
#goaliesTable td:nth-child(3){
  width: 22%;
}

#goaliesTable th:nth-child(4),
#goaliesTable td:nth-child(4){
  width: 14%;
}

/* Centrera från POS och framåt */
#goaliesTable th:nth-child(n+5),
#goaliesTable td:nth-child(n+5){
  text-align: center;
}


/* =========================================================
   TAB: MÅLFARLIGASTE LAG
   - #tab-danger
   - #dangerTable
========================================================= */

#dangerTable{
  table-layout: fixed;
}

/* Sortering */
#dangerTable th.sortable:hover{
  text-decoration: underline;
}

#dangerTable th.sortable.is-active{
  font-weight: 700;
}

#dangerTable th.sortable::after{
  content: " ⇅";
  opacity: 0.45;
}

#dangerTable th.sortable.is-active.is-desc::after{
  content: " ▼";
  opacity: 0.85;
}

#dangerTable th.sortable.is-active.is-asc::after{
  content: " ▲";
  opacity: 0.85;
}

/* # */
#dangerTable th:nth-child(1),
#dangerTable td:nth-child(1){
  width: 5ch;
  text-align: center;
}

/* Lag */
#dangerTable th:nth-child(2),
#dangerTable td:nth-child(2){
  width: 125px;
  text-align: left;
}

/* MP */
#dangerTable th:nth-child(3),
#dangerTable td:nth-child(3){
  width: 55px;
  text-align: center;
}

/* S+ */
#dangerTable th:nth-child(4),
#dangerTable td:nth-child(4){
  width: 65px;
  text-align: center;
}

/* M+ */
#dangerTable th:nth-child(5),
#dangerTable td:nth-child(5){
  width: 65px;
  text-align: center;
}

/* M- */
#dangerTable th:nth-child(6),
#dangerTable td:nth-child(6){
  width: 65px;
  text-align: center;
}

/* M/Match */
#dangerTable th:nth-child(7),
#dangerTable td:nth-child(7){
  width: 95px;
  text-align: center;
}

/* M-/Match */
#dangerTable th:nth-child(8),
#dangerTable td:nth-child(8){
  width: 95px;
  text-align: center;
}

/* S/Match */
#dangerTable th:nth-child(9),
#dangerTable td:nth-child(9){
  width: 95px;
  text-align: center;
}

/* Skott/Mål */
#dangerTable th:nth-child(10),
#dangerTable td:nth-child(10){
  width: 95px;
  text-align: center;
}

/* Skotteff % */
#dangerTable th:nth-child(11),
#dangerTable td:nth-child(11){
  width: 105px;
  text-align: center;
}


/* =========================================================
   TAB: POSITIONER
   - #tab-positions
   - .grid-2
   - #goalsPosTable
   - #assistsPosTable
========================================================= */

/* POSITIONER – matcha historiksidan */
.grid-2{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 80px;
  align-items: start;
}

.grid-2 h4{
  text-align: center;
}

#goalsPosTable,
#assistsPosTable{
  table-layout: fixed;
  width: 350px;
}

#goalsPosTable th:nth-child(1),
#goalsPosTable td:nth-child(1),
#assistsPosTable th:nth-child(1),
#assistsPosTable td:nth-child(1){
  width: 18%;
  text-align: left;
}

#goalsPosTable th:nth-child(2),
#goalsPosTable td:nth-child(2),
#assistsPosTable th:nth-child(2),
#assistsPosTable td:nth-child(2){
  width: 22%;
  text-align: center;
}

#goalsPosTable th:nth-child(3),
#goalsPosTable td:nth-child(3),
#assistsPosTable th:nth-child(3),
#assistsPosTable td:nth-child(3){
  width: 20%;
  text-align: center;
  font-weight: 600;
}