/* ======================
   BASE (DESKTOP)
   ====================== */

.table-wrap {
  overflow-x: auto; /* safety for small screens */
}

table.league-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.league-table th,
.league-table td {
  padding: 6px 8px;
  border: 1px solid #ccc;
  text-align: center;
  white-space: nowrap;
}

.league-table th {
  background: #1f2933;
  color: #fff;
}

.league-table td.team {
  text-align: left;
  font-weight: 600;
}

.team-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-wrap img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* zone colours */
tr.promotion  { background-color: #d1fae5; }
tr.playoffs   { background-color: #e0e7ff; }
tr.relegation { background-color: #fee2e2; }

tr.focused {
  background: #fff7ed;
  font-weight: 700;
}

tr.focused td:first-child {
  border-left: 6px solid #f97316;
}

.form {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.form span {
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  border-radius: 3px;
  color: white;
}

.form .W { background: #16a34a; }
.form .D { background: #64748b; }
.form .L { background: #dc2626; }


/* ======================
   TABLET (<= 1024px)
   Hide W / D / L
   ====================== */

@media (max-width: 1024px) {
  .league-table th:nth-child(4),
  .league-table td:nth-child(4), /* W */
  .league-table th:nth-child(5),
  .league-table td:nth-child(5), /* D */
  .league-table th:nth-child(6),
  .league-table td:nth-child(6)  /* L */
  {
    display: none;
  }
}

/* ======================
   MOBILE (<= 600px)
   Show essentials only
   ====================== */

@media (max-width: 600px) {
  .league-table th:nth-child(5),
  .league-table td:nth-child(5), 
  .league-table th:nth-child(6),
  .league-table td:nth-child(6),
    .league-table th:nth-child(8),
   .league-table td:nth-child(8) 
  {
    display: none;
  }

  table.league-table {
    font-size: 12px;
  }

  .league-table th,
  .league-table td {
    padding: 4px;
  }

  /* Sticky team column */
  .league-table td.team,
  .league-table th:nth-child(2) {
    position: sticky;
    left: 0;
    background: white;
    z-index: 2;
  }
}