* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f5f5;
  color: #333;
  line-height: 1.5;
}

header {
  background: #000;
  color: white;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

header h1 {
  font-size: 1.3rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.brand-logo {
  height: 36px;
  width: auto;
  display: block;
}
.brand-logo-right {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Header-Filter (Geschlecht, Saison, Jahre, Cup, Jugend) — mittig im Header */
.header-filters {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.header-filters .hf {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  font-weight: 600;
}
.header-filters .hf-label {
  padding: 0 0.2rem;
}
.header-filters .hf-select {
  appearance: none;
  -webkit-appearance: none;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 0.3rem 1.6rem 0.3rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: normal;
  text-transform: none;
  /* Custom Pfeil-Icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23bbb' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  transition: border-color 0.15s, background-color 0.15s;
}
.header-filters .hf-select:hover {
  border-color: #444;
  background-color: #222;
}
.header-filters .hf-select:focus {
  outline: none;
  border-color: #5b8def;
  box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.25);
}
.header-filters .hf-select option {
  background: #1a1a1a;
  color: #fff;
}

/* PNG-Export-Button im schwarzen Header (sitzt zwischen Filtern und rechtem Logo) */
.hf-btn {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 0.15s, background-color 0.15s;
  align-self: end;
}
.hf-btn:hover { background: #222; border-color: #444; }
.hf-btn:focus { outline: none; border-color: #5b8def; box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.25); }

/* Toggle-Button für den Header. Sitzt nach dem <header> im normalen Flow,
   wird per negativem Margin am unteren Header-Rand zentriert "eingehängt".
   Wenn der Header collapsed ist (display: none), rutscht der Button automatisch
   an den oberen Bildschirmrand. */
.header-toggle {
  display: block;
  margin: -1px auto 0;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 0 0 6px 6px;
  padding: 0.15rem 1rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 1000;
}
.header-toggle:hover { background: #222; }
body.header-collapsed #site-header { display: none; }

nav {
  display: flex;
  gap: 0.5rem;
}

.tab {
  background: transparent;
  color: #aaa;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: all 0.2s;
}
.tab:hover { color: white; background: rgba(255,255,255,0.1); }
.tab.active { color: white; background: rgba(255,255,255,0.2); font-weight: 600; }

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Versus nutzt die ganze Bildschirmbreite */
main { max-width: 100%; }

.admin-link {
  margin-left: auto;
  color: #aaa;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid #444;
  border-radius: 4px;
}
.admin-link:hover { color: white; background: rgba(255,255,255,0.1); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* --- Versus --- */
.versus-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.versus-toolbar > .versus-middle-controls {
  justify-self: center;
}
.versus-toolbar > .versus-toolbar-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.versus-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.versus-btn {
  background: #1a1a2e;
  color: #fff;
  border: none;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}
.versus-btn:hover { background: #2a2a4e; }
.versus-dev-toggle {
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
  user-select: none;
}
.versus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.versus-col {
  background: white;
  border-radius: 6px;
  padding: 1rem;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vs-col-top-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.vs-season-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: 0.02em;
  padding-bottom: 0.4rem;
}
.versus-team-selector label,
.versus-middle-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  font-weight: 700;
  align-items: flex-start;
}
.versus-middle-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Team 1 / Team 2 — prominent, weil zentrale Steuerung */
.versus-team-selector input {
  min-width: 240px;
  padding: 0.55rem 0.75rem;
  border: 1px solid #e0e0e6;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a2e;
  background: #fafafc;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.versus-team-selector input::placeholder {
  color: #aaa;
  font-weight: 400;
}
.versus-team-selector input:hover {
  border-color: #ccc;
  background: #fff;
}
.versus-team-selector input:focus {
  outline: none;
  border-color: #5b8def;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.2);
}

/* Scorerpunkte/Tore/Assists-Dropdown — kompakter Pill mit custom Pfeil */
.vs-scorer-mode select,
.versus-middle-controls select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.4rem 1.7rem 0.4rem 0.7rem;
  border: 1px solid #e0e0e6;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a2e;
  background-color: #fafafc;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23888' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.vs-scorer-mode select:hover,
.versus-middle-controls select:hover {
  border-color: #ccc;
  background-color: #fff;
}
.vs-scorer-mode select:focus,
.versus-middle-controls select:focus {
  outline: none;
  border-color: #5b8def;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.2);
}
.versus-metrics,
.versus-compare {
  flex: 1;
}
.versus-placeholder {
  color: #999;
  font-style: italic;
  font-size: 0.85rem;
}

/* Team metrics tiles */
.vs-metrics-group {
  margin-bottom: 0.75rem;
}
.vs-metrics-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.vs-metrics-grid {
  display: grid;
  gap: 0.4rem;
}
.vs-metrics-grid-2x2 { grid-template-columns: repeat(2, 1fr); }
.vs-metrics-grid-1x2 { grid-template-columns: repeat(2, 1fr); }

/* Metrics container: top row (stack + donut) + bottom season histogram */
.versus-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.vs-metrics-top {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.vs-metrics-stack {
  flex: 0 0 38%;
  max-width: 38%;
  min-width: 0;
}
.vs-metrics-donut-wrap {
  flex: 1 1 62%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
}
.vs-season-hist-wrap {
  width: 100%;
}
.vs-season-hist-mount {
  width: 100%;
}
.vs-season-hist-svg {
  display: block;
  width: 100%;
  height: auto;
}
.vs-season-hist-axis {
  font-size: 6px;
  fill: #777;
  font-variant-numeric: tabular-nums;
}
.vs-period-balances {
  display: flex;
  justify-content: space-around;
  gap: 0.75rem;
  margin: 0.2rem 0 0.35rem;
  font-size: 0.75rem;
  color: #555;
  flex-wrap: wrap;
}
.vs-period-item {
  display: inline-flex;
  gap: 0.3rem;
  align-items: baseline;
}
.vs-period-lbl {
  color: #888;
}
.vs-period-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1a1a2e;
}
.vs-period-val.pos { color: #2e7d3c; }
.vs-period-val.neg { color: #c43434; }

.vs-season-pen-wrap {
  margin-top: 0.75rem;
}
.vs-season-pen-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.vs-season-pen-row .vs-metric-tile {
  flex: 1 1 70px;
  min-width: 0;
}

.vs-roster-wrap {
  margin-top: 0.75rem;
}
.vs-roster-mount {
  overflow-x: auto;
}
.vs-roster-table {
  width: 100%;
  min-width: 820px;
  font-size: 0.8rem;
  border-collapse: collapse;
}
.vs-roster-table th {
  text-align: left;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #ccc;
  color: #555;
  font-weight: 600;
  white-space: nowrap;
  background: #f7f7fa;
}
.vs-roster-table th.vs-roster-sortable {
  cursor: pointer;
  user-select: none;
}
.vs-roster-table th.vs-roster-sortable:hover { background: #eee; }
.vs-roster-table td {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}
.vs-roster-table tr.clickable { cursor: pointer; }
.vs-roster-table tr.clickable:hover td { background: #f5f5fa; }
.vs-roster-table tr.youth-row td { background: #fffbec; }
.vs-roster-table tr.youth-row:hover td { background: #fff4d8; }
.vs-season-hist-grid {
  stroke: #eee;
  stroke-width: 0.4;
}
.vs-season-hist-zero {
  stroke: #666;
  stroke-width: 0.6;
}
.vs-metrics-side-right .vs-metrics-group-title {
  text-align: right;
}

.vs-donut-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
}
.vs-donut-center {
  font-size: 36px;
  font-weight: 700;
  fill: #333;
}
.vs-donut-leader {
  fill: none;
  stroke: #888;
  stroke-width: 1;
}
.vs-donut-slice-label {
  font-size: 22px;
  fill: #333;
}
.vs-donut-slice-pct {
  font-weight: 700;
  fill: #1a1a2e;
}
.vs-metric-tile {
  background: #f7f7fa;
  border-radius: 5px;
  padding: 0.45rem 0.5rem;
  text-align: center;
}
.vs-metric-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vs-metric-label {
  font-size: 0.7rem;
  color: #666;
  margin-top: 0.15rem;
}
.vs-metric-sub {
  font-size: 0.7rem;
  font-weight: 500;
  color: #888;
  margin-left: 0.2rem;
}
.vs-metric-pct {
  padding-bottom: 0.3rem;
}
.vs-metric-bar {
  margin-top: 0.3rem;
  height: 4px;
  background: #e5e5ec;
  border-radius: 2px;
  overflow: hidden;
}
.vs-metric-bar-fill {
  height: 100%;
  background: #4a6fa5;
  border-radius: 2px;
  transition: width 0.2s;
}
.vs-pct-foreign .vs-metric-bar-fill { background: #c04d4d; }
.vs-pct-own .vs-metric-bar-fill { background: #4a9b61; }
.vs-pct-other .vs-metric-bar-fill { background: #8a6fc4; }

/* Head-to-head summary + game list */
.vs-h2h-summary {
  margin-bottom: 1rem;
}
.vs-h2h-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.vs-h2h-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.vs-h2h-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.vs-h2h-logo-missing {
  background: #eee;
  border-radius: 4px;
}
.vs-h2h-side .vs-h2h-wins {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1;
}
.vs-h2h-side .vs-h2h-name {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.25rem;
}
.vs-h2h-vs {
  font-size: 1rem;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vs-h2h-meta {
  font-size: 0.75rem;
  color: #888;
  text-align: center;
  margin-top: 0.5rem;
}
.vs-h2h-games {
  width: 100%;
  font-size: 0.8rem;
  border-collapse: collapse;
}
.vs-h2h-games th {
  text-align: left;
  color: #666;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  padding: 0.25rem 0.4rem;
}
.vs-h2h-games td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #f0f0f0;
}
.vs-h2h-games .vs-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.vs-h2h-games tr.vs-cup-row td {
  background: #f0f0f0;
}
.vs-cup-badge {
  display: inline-block;
  background: #f4a640;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.vs-end-mark {
  font-size: 0.7rem;
  font-weight: 600;
  color: #888;
  margin-left: 0.25rem;
}
.vs-top-scorers {
  margin-top: 1rem;
}
.vs-top-scorers h4 {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.5rem;
}
.vs-top-scorers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.vs-scorer-col {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 0.5rem;
}
.vs-scorer-team {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a1a2e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.vs-scorer-table {
  width: 100%;
  font-size: 0.8rem;
  border-collapse: collapse;
}
.vs-scorer-table th {
  text-align: left;
  font-size: 0.7rem;
  color: #888;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  padding: 0.2rem 0.3rem;
}
.vs-scorer-table td {
  padding: 0.2rem 0.3rem;
  border-bottom: 1px solid #f0f0f0;
}
.vs-scorer-table .vs-rank {
  color: #999;
  width: 1.2em;
}
.vs-scorer-table .vs-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 2em;
}
.vs-scorer-table .vs-pts {
  font-weight: 700;
}
.vs-scorer-table tr.vs-not-in-roster td {
  background: #fde8e8;
}
.vs-scorer-col .vs-scorer-extra { display: none; }
.vs-scorer-col.vs-scorer-col-open .vs-scorer-extra { display: table-row; }
.vs-expand {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.2rem 0.4rem;
  background: transparent;
  border: none;
  border-top: 1px dashed #ddd;
  color: #666;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.vs-expand:hover { color: #1a1a2e; background: #f3f3f7; }
.vs-goals-total {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
  text-align: center;
}
.vs-goals-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1;
}
.vs-goals-lbl {
  font-size: 0.7rem;
  color: #666;
  margin-top: 0.2rem;
}
.vs-goals-sep {
  font-size: 1.2rem;
  color: #999;
  font-weight: 600;
}
.vs-hist {
  margin-top: 1rem;
}
.vs-hist h4 {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.5rem;
}
.vs-hist-mount {
  width: 100%;
  overflow: hidden;
}
.vs-hist-svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-family: inherit;
}
.vs-hist-team-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.vs-hist-minute-label {
  font-size: 10px;
  fill: #777;
  font-variant-numeric: tabular-nums;
}
.vs-hist-count-label {
  font-size: 10px;
  fill: #333;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vs-hist-axis {
  stroke: #d0d0d0;
  stroke-width: 1;
}
.vs-hist-period-line {
  stroke: #b0b0b0;
  stroke-width: 0.4;
  stroke-dasharray: 2 2;
}
.vs-hist-ot-band {
  fill: #f6f6f9;
}
.vs-hist-ot-label {
  font-size: 9px;
  fill: #999;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vs-penalty-stats {
  margin-top: 1rem;
}
.vs-penalty-stats h4 {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.5rem;
}
.vs-pen-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.vs-pen-table td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #f0f0f0;
}
.vs-pen-table .vs-pen-val {
  width: 38%;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #1a1a2e;
}
.vs-pen-table .vs-pen-lbl {
  text-align: center;
  font-size: 0.75rem;
  color: #777;
  font-weight: 500;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
.vs-pen-sub {
  font-size: 0.7rem;
  font-weight: 500;
  color: #888;
  margin-left: 0.2rem;
}

/* Dev container visualization: einen Umriss + Label pro Container mit data-dev-name */
body.versus-dev-visible [data-dev-name] {
  outline: 2px dashed #00bcd4;
  outline-offset: -2px;
  position: relative;
}
body.versus-dev-visible [data-dev-name]::before {
  content: attr(data-dev-name);
  position: absolute;
  top: 0;
  left: 0;
  background: #00bcd4;
  color: #000;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-bottom-right-radius: 4px;
  pointer-events: none;
  z-index: 5;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

h2 { margin-bottom: 1rem; color: #1a1a2e; }
h3 { margin-bottom: 0.5rem; }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

th, td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 0.85rem;
}

th {
  background: #f8f8f8;
  font-weight: 600;
  color: #555;
  position: sticky;
  top: 0;
}

tr:hover { background: #f0f7ff; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #eaeaea; }
th.sortable::after { content: " \2195"; color: #ccc; font-size: 0.7rem; }
th.sortable.asc::after { content: " \2191"; color: #333; }
th.sortable.desc::after { content: " \2193"; color: #333; }

/* Status Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-matched { background: #d4edda; color: #155724; }
.badge-unmatched { background: #f8d7da; color: #721c24; }
.badge-ambiguous { background: #fff3cd; color: #856404; }
.badge-manual { background: #d1ecf1; color: #0c5460; }
.badge-nla { background: #28a745; color: white; }
.badge-nlb { background: #17a2b8; color: white; }
.badge-1l { background: #6c757d; color: white; }
.badge-retired { background: #dc3545; color: white; }
.badge-abroad { background: #6f42c1; color: white; }
.badge-junior { background: #fd7e14; color: white; }
.badge-injured { background: #fd7e14; color: white; }
.badge-unknown { background: #e9ecef; color: #495057; }

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  text-align: center;
}

.stat-card .number {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
}

.stat-card .label {
  font-size: 0.8rem;
  color: #777;
  margin-top: 0.25rem;
}

/* Controls */
.controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

select, input[type="text"], input[type="number"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.85rem;
}

textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
}

button {
  padding: 0.4rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  background: white;
  transition: all 0.2s;
}
button:hover { background: #f0f0f0; }
button.primary { background: #1a1a2e; color: white; border-color: #1a1a2e; }
button.primary:hover { background: #2a2a4e; }
button.small { padding: 2px 8px; font-size: 0.75rem; }

/* Panel */
.panel {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.panel-header button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
}

/* Player detail modal */
.modal-player { min-width: 900px; max-width: 1300px; width: 95vw; }

.detail-badges { margin-bottom: 0.75rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1.5rem;
}

.detail-main { overflow-x: auto; }
.detail-main h4 { margin: 0 0 0.5rem; color: #555; }
#detail-career { margin-bottom: 0.5rem; }

.detail-sidebar {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 0.75rem;
}
.detail-sidebar h4 { margin: 0 0 0.5rem; color: #555; font-size: 0.85rem; }
.detail-sidebar h4:not(:first-child) { margin-top: 0.75rem; }

.detail-field {
  margin-bottom: 0.4rem;
}
.detail-field label {
  display: block;
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 0.15rem;
}
.detail-field input[type="text"],
.detail-field select,
.detail-field textarea { width: 100%; }
.detail-field textarea { resize: vertical; }

/* Inline season edit */
.season-edit {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  background: #fff3cd;
  border-radius: 4px;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.season-edit select { width: 140px; }
.season-edit input { flex: 1; }

/* Clickable career rows */
#detail-career tr { cursor: pointer; }
#detail-career tr:hover { background: #e8f4ff; }
#detail-career tr.editing { background: #fff3cd; }
#detail-career .override-cell { max-width: 200px; }
#detail-career .override-reason { font-size: 0.7rem; color: #888; }

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-content {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  min-width: 400px;
  max-width: 600px;
  max-height: 92vh;
  overflow-y: auto;
}

.modal-content h3 { margin-bottom: 1rem; }
.modal-content p { margin-bottom: 0.5rem; }
.modal-content select,
.modal-content input { width: 100%; margin-bottom: 0.5rem; }

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.hidden { display: none !important; }

/* Import */
.import-form { margin-bottom: 1rem; }
.import-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.import-group {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 6px;
}
.import-group h4 { margin-bottom: 0.5rem; }
.import-group.matched { background: #d4edda; }
.import-group.ambiguous { background: #fff3cd; }
.import-group.unmatched { background: #f8d7da; }

.import-item {
  padding: 0.25rem 0;
  font-size: 0.85rem;
}

/* Sync */
.sync-section {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

.sync-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.danger { background: #dc3545; color: white; border-color: #dc3545; }
.danger:hover { background: #c82333; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.hint { font-size: 0.8rem; color: #777; margin-bottom: 0.75rem; }

.sync-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.sync-col h4 { margin-bottom: 0.5rem; color: #555; }

.checkbox-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0.25rem 0;
}

.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.checkbox-list label:hover { background: #f0f7ff; }
.checkbox-list label input { margin: 0; }

.checkbox-list .season-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.checkbox-list .season-counts {
  font-size: 0.7rem;
  color: #999;
  white-space: nowrap;
}
.checkbox-list .season-counts .has-data { color: #28a745; }
.checkbox-list .season-counts .no-data { color: #dc3545; }

.steps-list { max-height: none; }
.steps-list label { padding: 0.4rem 0.6rem; font-size: 0.85rem; }

.season-select-actions {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.sync-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.sync-actions button { flex: 1; padding: 0.6rem; font-size: 0.9rem; }

#sync-status-indicator {
  margin: 0.5rem 0;
  font-weight: 600;
  font-size: 0.9rem;
}
#sync-status-indicator.running { color: #28a745; }
#sync-status-indicator.idle { color: #6c757d; }

/* Progress bar */
#sync-progress-container {
  margin-bottom: 0.75rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.75rem;
}

.progress-header, .progress-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #555;
}
.progress-header { font-weight: 600; margin-bottom: 0.4rem; }
.progress-footer { margin-top: 0.3rem; font-size: 0.75rem; color: #888; }

.progress-bar-track {
  width: 100%;
  height: 20px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1a1a2e, #3a3a6e);
  border-radius: 10px;
  transition: width 0.3s ease;
  min-width: 0;
}

#sync-log {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 0.75rem;
  background: #1a1a2e;
  color: #ccc;
  padding: 0.75rem;
  border-radius: 4px;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
}

#sync-log .err { color: #ff6b6b; }
#sync-log .info { color: #69db7c; }

.db-stat {
  display: inline-block;
  margin: 0.25rem 0.5rem;
  padding: 0.25rem 0.75rem;
  background: #e9ecef;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* Match modal */
.modal-wide { min-width: 700px; max-width: 900px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.modal-header h3 { margin: 0; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #999; padding: 0; }

.match-info {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  background: #f0f7ff;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}

/* Match candidate cards */
.match-candidate {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: border-color 0.2s;
}
.match-candidate:hover { border-color: #007bff; }

.match-candidate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  cursor: pointer;
}
.match-candidate-header:hover { background: #e8f4ff; }
.match-candidate-name { font-weight: 600; }
.match-candidate-meta { font-size: 0.75rem; color: #777; }

.match-candidate-career {
  padding: 0.25rem 0.75rem 0.5rem;
  font-size: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
}
.match-candidate-career table { margin: 0; box-shadow: none; font-size: 0.75rem; }
.match-candidate-career th, .match-candidate-career td { padding: 0.2rem 0.4rem; }

.match-select-btn {
  background: #1a1a2e;
  color: white;
  border: none;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
}
.match-select-btn:hover { background: #3a3a6e; }

/* Clickable row */
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #e8f4ff; }

.action-cell { white-space: nowrap; }
.delete-nom-btn {
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.delete-nom-btn:hover { color: #dc3545; }

/* Dashboard */
.dash-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dash-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dash-card h3 { font-size: 0.9rem; margin-bottom: 0.75rem; color: #555; }

/* Bar chart */
.bar-chart { display: flex; flex-direction: column; gap: 3px; }
.bar-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; }
.bar-label { width: 140px; text-align: right; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 18px; background: #eee; border-radius: 3px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.bar-value { width: 40px; font-size: 0.7rem; color: #777; flex-shrink: 0; }

/* Stacked bar */
.bar-stack { display: flex; height: 100%; }
.bar-stack > div { height: 100%; }

/* Level colors */
.fill-NLA { background: #28a745; }
.fill-NLB { background: #17a2b8; }
.fill-1L { background: #6c757d; }
.fill-JUNIOR { background: #fd7e14; }
.fill-OTHER { background: #dee2e6; }
.fill-ABROAD { background: #6f42c1; }
.fill-RETIRED { background: #dc3545; }
.fill-INJURED { background: #fd7e14; }
.fill-LOWER { background: #adb5bd; }

.chart-legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-size: 0.7rem;
}
.chart-legend-item { display: flex; align-items: center; gap: 0.25rem; }
.chart-legend-swatch { width: 12px; height: 12px; border-radius: 2px; }

/* Year sections collapsible */
.year-section {
  margin-bottom: 0.5rem;
}
.year-section h3 {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: #1a1a2e;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  user-select: none;
}
.year-section h3::after { content: "\25B6"; font-size: 0.7rem; transition: transform 0.2s; }
.year-section.open h3::after { transform: rotate(90deg); }
.year-section h3:hover { background: #2a2a4e; }
.year-section .year-content { display: none; }
.year-section.open .year-content { display: block; }
.year-section table { border-radius: 0 0 4px 4px; }

/* NLA tab */
.nla-team {
  margin-bottom: 0.5rem;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: hidden;
}
.nla-team-header {
  padding: 0.6rem 1rem;
  background: #1a1a2e;
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  user-select: none;
}
.nla-team-header:hover { background: #2a2a4e; }
.nla-team-header img { width: 24px; height: 24px; margin-right: 0.5rem; vertical-align: middle; }
.nla-team-header::after { content: "\25B6"; font-size: 0.7rem; transition: transform 0.2s; }
.nla-team.open .nla-team-header::after { transform: rotate(90deg); }
.nla-team-body { display: none; }
.nla-team.open .nla-team-body { display: block; }
.nla-team-stats {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  font-size: 0.75rem;
  color: #555;
}
.nla-team-stats strong { color: #1a1a2e; }
th.sortable-comp { cursor: pointer; user-select: none; }
th.sortable-comp:hover { background: #eaeaea; }
th.sortable-comp::after { content: " \2195"; color: #ccc; font-size: 0.7rem; }
th.sortable-comp.asc::after { content: " \2191"; color: #333; }
th.sortable-comp.desc::after { content: " \2193"; color: #333; }

th.sortable-team { cursor: pointer; user-select: none; }
th.sortable-team:hover { background: #eaeaea; }
th.sortable-team::after { content: " \2195"; color: #ccc; font-size: 0.7rem; }
th.sortable-team.asc::after { content: " \2191"; color: #333; }
th.sortable-team.desc::after { content: " \2193"; color: #333; }

.nla-team table { font-size: 0.78rem; border-radius: 0; box-shadow: none; }
.nla-team td { padding: 0.25rem 0.5rem; }
.nla-team th { padding: 0.3rem 0.5rem; font-size: 0.72rem; }

.flag-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  background: #e9ecef;
  color: #555;
}
.flag-CH { background: #d4edda; color: #155724; }
.flag-foreign { background: #fff3cd; color: #856404; }
.hav-match { color: #28a745; font-weight: 600; }
.hav-other { color: #6c757d; }

.youth-row { background: #f0f7ff; }
.youth-row:hover { background: #dbeeff !important; }
.youth-tag {
  display: inline-block;
  background: #17a2b8;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0 3px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 3px;
}

/* Print styles */
@media print {
  @page { size: A4 landscape; margin: 8mm; }

  * { overflow: visible !important; }
  body { background: white; }
  header, nav, .no-print, .tab:not(.active),
  .tab-content:not(.printing), .modal { display: none !important; }

  .tab-content.printing { display: block !important; }
  .controls.no-print { display: none !important; }

  /* Stats + comparison on first page */
  #nla-stats, #nlb-stats { page-break-after: avoid; }
  #nla-comparison, #nlb-comparison { page-break-after: always; }
  #nla-comparison .nla-team-body, #nlb-comparison .nla-team-body { display: block !important; }
  .nla-team-header::after { display: none; }

  /* Each team on its own page */
  .nla-team { page-break-inside: avoid; page-break-after: always; box-shadow: none; }
  .nla-team .nla-team-body { display: block !important; }
  .nla-team .nla-team-header { background: #333; color: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Fit table to page width */
  main { max-width: 100%; padding: 0; }
  table { width: 100%; table-layout: fixed; }
  .nla-team table, #nla-comparison table, #nlb-comparison table { font-size: 5pt; }
  td, th { padding: 0.5px 1.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat-card { box-shadow: none; border: 1px solid #ddd; padding: 0.3rem; }
  .stat-card .number { font-size: 1rem; }
  .stat-card .label { font-size: 0.5rem; }
  .stats-grid { gap: 0.25rem; margin-bottom: 0.4rem; }
  .nla-team-stats { font-size: 0.5rem; padding: 0.15rem 0.4rem; }
  h2 { font-size: 0.9rem; margin-bottom: 0.2rem; }

  /* Badges + pills smaller */
  .badge, .flag-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 4.5pt; padding: 0 2px; }
  .club-pill { font-size: 4.5pt; padding: 0 1px; }
  .club-pill img { width: 8px; height: 8px; }
  .youth-tag { font-size: 3.5pt; }
}

/* Werdegang table */
#werdegang-table { font-size: 0.8rem; }
#werdegang-table th { font-size: 0.75rem; }
#werdegang-table td { padding: 0.3rem 0.5rem; vertical-align: middle; }

.club-pills { display: flex; gap: 2px; flex-wrap: wrap; }
.club-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #f0f0f0;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.7rem;
  white-space: nowrap;
}
.club-pill img { width: 16px; height: 16px; object-fit: contain; }
.club-pill .pill-count { font-weight: 600; }

th.sortable-wd { cursor: pointer; user-select: none; }
th.sortable-wd:hover { background: #eaeaea; }
th.sortable-wd::after { content: " \2195"; color: #ccc; font-size: 0.7rem; }
th.sortable-wd.asc::after { content: " \2191"; color: #333; }
th.sortable-wd.desc::after { content: " \2193"; color: #333; }

/* Sub-tabs (By Club / By League) */
.sub-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sub-tab {
  padding: 0.4rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f8f8;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.sub-tab:hover { background: #eaeaea; }
.sub-tab.active { background: #1a1a2e; color: white; border-color: #1a1a2e; }
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }

/* League view (By League) */
.league-view-info {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.league-table-scroll {
  overflow-x: auto;
  max-height: 75vh;
  overflow-y: auto;
}
.league-view-table { font-size: 0.8rem; }
.league-view-table th { white-space: nowrap; }
.league-view-table td { padding: 0.3rem 0.5rem; }
.league-view-table th { padding: 0.35rem 0.5rem; font-size: 0.75rem; }

th.sortable-league { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable-league:hover { background: #eaeaea; }
th.sortable-league.col-filtered { background: #e8f0fe; }

/* Column filter button */
.col-filter-btn {
  cursor: pointer;
  font-size: 0.55rem;
  color: #bbb;
  margin-left: 2px;
  vertical-align: middle;
}
.col-filter-btn:hover { color: #333; }
.col-filter-btn.active { color: #1a73e8; font-weight: 700; }

/* Column filter dropdown */
.col-filter-dropdown {
  position: fixed;
  z-index: 200;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  width: 210px;
  font-size: 0.8rem;
}
.col-filter-search {
  padding: 0.4rem;
  border-bottom: 1px solid #eee;
}
.col-filter-search-input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 0.78rem;
  box-sizing: border-box;
}
.col-filter-actions {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #eee;
}
.col-filter-list {
  max-height: 250px;
  overflow-y: auto;
  padding: 0.15rem 0;
}
.col-filter-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  font-size: 0.78rem;
}
.col-filter-item:hover { background: #f0f7ff; }
.col-filter-item input { margin: 0; }
.col-filter-footer {
  display: flex;
  gap: 0.25rem;
  padding: 0.4rem;
  border-top: 1px solid #eee;
  justify-content: flex-end;
}

/* --- Jahrgangs-Vergleich --- */
.jg-nominated { background: #e8f5e9; }
.jg-nominated:hover { background: #c8e6c9; }
#jg-table { border-collapse: collapse; }
#jg-table th { cursor: pointer; font-size: 0.7rem; padding: 0.25rem 0.3rem; white-space: nowrap; }
#jg-table td { white-space: nowrap; font-size: 0.8rem; padding: 0.2rem 0.3rem; }
#jg-table .jg-name { font-weight: 600; }
.jg-filter-btn { color: #aaa; cursor: pointer; font-size: 0.7rem; }
.jg-filter-btn:hover { color: #333; }
.jg-col-filtered { background: #fff3e0; }
.jg-col-filtered .jg-filter-btn { color: #e65100; }
.jg-season-header { font-size: 0.6rem !important; width: 24px; text-align: center; color: #888; }
.jg-cell { width: 24px; height: 24px; text-align: center; padding: 1px !important; }
img.jg-logo { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
.jg-cell .jg-abbr { font-size: 0.5rem; font-weight: 600; display: block; }
.jg-nla { background: #e8eaf6; }
.jg-nlb { background: #e3f2fd; }
.jg-1l { background: #f3e5f5; }
.jg-u21 { background: #e8f5e9; }
.jg-u18 { background: #f1f8e9; }
.jg-u16 { background: #fff8e1; }
.jg-other { background: #fafafa; }
.badge-nlb { background: #283593; color: white; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; }
.badge-1l { background: #5c6bc0; color: white; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; }

.season-select {
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  font-weight: normal;
  vertical-align: middle;
}


/* --- Unresolved player rows (ID konnte nicht gematcht werden) --- */
.vs-unresolved-player {
  background: #fde2e2 !important;
}
.vs-unresolved-player td {
  color: #7a2020;
}

/* --- Admin SPA --- */
/* hidden attribute respektieren (überschreibt display: flex unten) */
[hidden] { display: none !important; }

.admin-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}
.admin-login-card {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 360px;
}
.admin-login-card h1 {
  font-size: 1.2rem;
  color: #1a1a2e;
  margin-bottom: 0.5rem;
}
.admin-login-card label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: #555;
  font-weight: 600;
}
.admin-login-card input {
  padding: 0.5rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}
.admin-login-card .versus-btn {
  align-self: flex-start;
  padding: 0.5rem 1.1rem;
}
.admin-login-error {
  color: #b00020;
  font-size: 0.85rem;
  margin: 0;
}

.admin-header {
  background: #1a1a2e;
  color: white;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.admin-header h1 {
  font-size: 1.1rem;
  white-space: nowrap;
}
.admin-nav {
  display: flex;
  gap: 0.4rem;
}
.admin-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.admin-user-label {
  font-size: 0.85rem;
  color: #aaa;
}

.admin-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}
.admin-tab-content h2 {
  font-size: 1.1rem;
  color: #1a1a2e;
  margin-bottom: 0.8rem;
}
.admin-placeholder {
  background: white;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  color: #555;
  font-size: 0.9rem;
}
.admin-placeholder code {
  background: #f0f0f0;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.85rem;
}

/* --- Sync-Tab --- */
.sync-card {
  background: white;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.sync-card h3 {
  font-size: 0.95rem;
  color: #1a1a2e;
  margin-bottom: 0.7rem;
}
.sync-modes {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 140px 130px 160px;
  gap: 0.8rem;
  row-gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.sync-modes label.sync-force { grid-column: span 2; }
.sync-modes label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #555;
  font-weight: 600;
}
.sync-modes label small {
  font-weight: 400;
  color: #888;
}
.sync-modes select,
.sync-modes input[type="text"] {
  padding: 0.4rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}
.sync-force {
  flex-direction: row !important;
  align-items: center;
  gap: 0.4rem !important;
  align-self: end;
  padding-bottom: 0.5rem;
}
.sync-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sync-btn-cancel { background: #6c2020; }
.sync-btn-cancel:hover { background: #8a2e2e; }
.sync-btn-cancel:disabled { background: #aaa; cursor: not-allowed; }
.sync-status-label {
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  background: #eee;
  color: #555;
  font-weight: 600;
}
.sync-status-label[data-state="running"]   { background: #e6f3ff; color: #1a4f8a; }
.sync-status-label[data-state="done"]      { background: #e6ffe9; color: #1a6b2c; }
.sync-status-label[data-state="error"]     { background: #ffe6e6; color: #8a1a1a; }
.sync-status-label[data-state="cancelled"] { background: #fff3e0; color: #8a5a1a; }
.sync-error {
  margin-top: 0.5rem;
  color: #b00020;
  font-size: 0.85rem;
}

.sync-progress { margin-bottom: 0.7rem; }
.sync-progress-line {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.sync-progress-bar {
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  height: 8px;
}
#sync-progress-bar-fill {
  background: #1a1a2e;
  height: 100%;
  width: 0%;
  transition: width 0.3s ease;
}
.sync-progress-message {
  font-size: 0.8rem;
  color: #888;
  margin-top: 0.3rem;
  font-style: italic;
}

.sync-steps-details, .sync-errors-details {
  margin-top: 0.6rem;
  font-size: 0.85rem;
}
.sync-steps-details summary, .sync-errors-details summary {
  cursor: pointer;
  color: #555;
  font-weight: 600;
}
.sync-steps-list, .sync-errors-list {
  margin-top: 0.4rem;
  padding-left: 1.4rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  color: #444;
}
.sync-step-running { color: #1a4f8a; }
.sync-step-done    { color: #1a6b2c; }
.sync-step-error   { color: #8a1a1a; }

/* --- U19-Nominations-Tab --- */
.nom-card {
  background: white;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.nom-card h3 { font-size: 0.95rem; color: #1a1a2e; margin-bottom: 0.7rem; }

.nom-import-row, .nom-filter-row {
  display: flex;
  gap: 0.8rem;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.nom-import-row label, .nom-filter-row label, .nom-textarea-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #555;
  font-weight: 600;
}
.nom-import-row input, .nom-import-row select,
.nom-filter-row input, .nom-filter-row select {
  padding: 0.35rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}
.nom-textarea-label textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.nom-actions {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.5rem;
}
.nom-summary { font-size: 0.85rem; color: #555; }

.nom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.nom-table th, .nom-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.nom-table th { background: #f5f5f5; font-weight: 600; }
.nom-table td .versus-btn { padding: 0.2rem 0.6rem; font-size: 0.75rem; margin-right: 0.3rem; }

.nom-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
}
.nom-status-matched   { background: #e6ffe9; color: #1a6b2c; }
.nom-status-manual    { background: #e0f0ff; color: #1a4f8a; }
.nom-status-ambiguous { background: #fff3e0; color: #8a5a1a; }
.nom-status-unmatched { background: #ffe6e6; color: #8a1a1a; }

/* Match-Picker (Modal-light) */
.nom-picker {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.nom-picker-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.nom-picker-card input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}
.nom-picker-results {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 320px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.nom-picker-results .versus-btn { width: 100%; text-align: left; }
.nom-picker-empty { color: #888; font-size: 0.85rem; padding: 0.5rem; }
.nom-picker-actions { display: flex; justify-content: flex-end; }

/* --- Spieler-Overrides-Tab --- */
.player-card {
  background: white;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.player-card h3 { font-size: 0.95rem; color: #1a1a2e; margin-bottom: 0.7rem; }

.player-search-row {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.player-search-row input {
  flex: 1;
  padding: 0.5rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}
.player-search-row select {
  padding: 0.4rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}
.player-search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 240px;
  overflow: auto;
}
.player-search-results .versus-btn {
  width: 100%;
  text-align: left;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}

.player-meta {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.7rem;
}
.player-meta code { background: #f0f0f0; padding: 0.05rem 0.3rem; border-radius: 3px; }

.player-section {
  margin-top: 0.8rem;
  border-top: 1px solid #eee;
  padding-top: 0.7rem;
}
.player-section summary {
  cursor: pointer;
  font-weight: 600;
  color: #1a1a2e;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.player-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.player-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #555;
  font-weight: 600;
}
.player-form-grid input {
  padding: 0.4rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}
.player-hav-info { font-size: 0.85rem; color: #555; margin: 0.4rem 0; }
.player-actions { display: flex; gap: 0.7rem; align-items: center; }

.player-career-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 0.4rem;
}
.player-career-table th, .player-career-table td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.player-career-table th { background: #f5f5f5; font-weight: 600; font-size: 0.78rem; }
.player-career-table input, .player-career-table select {
  padding: 0.2rem 0.4rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.8rem;
  width: 100%;
}
.player-career-table .versus-btn { padding: 0.2rem 0.5rem; font-size: 0.75rem; margin-right: 0.25rem; }
.po-row-override td:first-child::before { content: "● "; color: #1a4f8a; }
.po-row-retired   td:first-child::before { content: "■ "; color: #8a1a1a; }
.po-row-retired { background: #fff3f3; }

.player-retire-row {
  display: flex;
  align-items: end;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #eee;
}
.player-retire-row label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #555;
  font-weight: 600;
}
.player-retire-row input {
  padding: 0.35rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  width: 120px;
}

/* --- Ligen & Saisons-Tab --- */
.cfg-card {
  background: white;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.cfg-card h3 { font-size: 0.95rem; color: #1a1a2e; margin-bottom: 0.4rem; }
.cfg-help {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.7rem;
  line-height: 1.4;
}
.cfg-help code { background: #f0f0f0; padding: 0.05rem 0.3rem; border-radius: 3px; }
.cfg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.cfg-table th, .cfg-table td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.cfg-table th { background: #f5f5f5; font-weight: 600; font-size: 0.78rem; }
.cfg-table input[type="text"], .cfg-table input[type="number"], .cfg-table select {
  padding: 0.2rem 0.4rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.8rem;
  width: 100%;
}
.cfg-table input[type="number"] { width: 90px; }
.cfg-table .versus-btn { padding: 0.2rem 0.5rem; font-size: 0.75rem; margin-right: 0.25rem; }
.cfg-table tfoot { background: #fafafa; }
.cfg-available { margin-top: 0.8rem; }
.cfg-available summary {
  cursor: pointer;
  color: #1a4f8a;
  font-size: 0.85rem;
  padding: 0.3rem 0;
}