/* =========================================================
   TABELLEN PAGE STYLES
   ========================================================= */

/* sub-nav (tab switcher) */
.subnav {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 76px;
  z-index: 40;
}
.subnav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; gap: 0;
}
.subnav button {
  background: transparent;
  border: 0;
  color: var(--ink-dim);
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  padding: 18px 24px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.subnav button:hover { color: var(--ink); }
.subnav button.active { color: var(--ink); border-bottom-color: var(--blue-hi); }
.subnav button .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  margin-left: 6px;
  color: var(--ink-mute);
}

/* table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface);
}
table.bdl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.bdl thead th {
  text-align: left;
  padding: 14px 14px;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  white-space: nowrap;
}
table.bdl tbody td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  font-size: 15px;
}
table.bdl tbody td.num {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink);
  text-align: right;
}
table.bdl tbody td.pos {
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  color: var(--ink);
  width: 56px;
}
table.bdl tbody td.team {
  color: var(--ink);
  font-weight: 600;
}
table.bdl tbody tr.self {
  background: linear-gradient(90deg, rgba(108,140,255,0.12), transparent 80%);
}
table.bdl tbody tr.self td { color: var(--ink); }
table.bdl tbody tr.self td.pos { color: var(--blue-hi); }
table.bdl tbody tr:hover { background: var(--surface-2); }
.form-cell { display: inline-flex; gap: 4px; }
.form-cell span {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
.form-cell .S { background: rgba(74,222,128,0.18); color: var(--win); border: 1px solid rgba(74,222,128,0.4); }
.form-cell .N { background: rgba(239,94,94,0.15); color: var(--loss); border: 1px solid rgba(239,94,94,0.4); }
.form-cell .U { background: rgba(255,255,255,0.05); color: var(--ink-dim); border: 1px solid var(--line); }

/* match list */
.match-list { display: flex; flex-direction: column; gap: 12px; }
.match {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: center;
  transition: border-color .15s, transform .15s;
}
.match:hover { border-color: var(--navy-soft); }
.match.played:hover { border-color: var(--blue-hi); }
@media (max-width: 800px) {
  .match { grid-template-columns: 1fr auto; }
  .match .date-block { grid-column: 1 / -1; }
}
.date-block .day { font-family: 'Anton', sans-serif; font-size: 32px; line-height: 1; }
.date-block .month { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; color: var(--ink-dim); margin-top: 4px; }
.match-teams {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.match-teams .home,
.match-teams .away {
  flex: 1;
  min-width: 0;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-teams .home.us,
.match-teams .away.us { color: var(--blue-hi); font-weight: 600; }
.match-teams .home { text-align: right; }
.match-teams .away { text-align: left; }
.match-teams .vs-x {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
}
.match .score-x {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  line-height: 1;
  padding: 4px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.match .meta-right {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.match .meta-right .pill { margin-bottom: 6px; }

/* legend */
.legend {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.legend span strong { color: var(--ink-dim); font-weight: 500; margin-right: 4px; }

/* tab panels */
.panel { display: none; }
.panel.active { display: block; }

/* =========================================================
   MOBILE OVERRIDES
   ========================================================= */
@media (max-width: 600px) {
  /* subnav: scrollable horizontally, don't let buttons wrap/shrink */
  .subnav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 16px; }
  .subnav button { white-space: nowrap; font-size: 12px; padding: 16px 14px; flex-shrink: 0; }

  /* match cards: collapse to 2-column (date + meta-right) */
  .match { grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 16px; }
  .match-teams { grid-column: 1 / -1; gap: 8px; }
  .match-teams .home,
  .match-teams .away { font-size: 14px; }
  .date-block .day { font-size: 24px; }
}