:root {
  /* Donkerblauw + donkerrood, strak en modern i.p.v. de vorige Romeinse
     paletkeuze. Navy voor structuur/oppervlaktes, rood als enige accent
     (actieve tab, badges, verlies, eigen team). */
  --navy-900: #101A2E;
  --navy-700: #16233D;
  --navy-500: #35507A;
  --red-700: #7A1522;
  --red-600: #9E1B2E;
  --red-400: #E5536A;
  --ink: #10151F;
  --ink-soft: #5A6270;
  --green: #1E8E4F;
  --stone: #8B93A3;
  --line: #DCE0E7;
  --paper: #F2F3F6;
  --paper-dim: #E6E8ED;
  --card: #FFFFFF;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(16,21,34,0.06), 0 8px 20px -10px rgba(16,21,34,0.22);
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

button, input, select {
  font-family: inherit;
}

/* ---------- Topbar ---------- */

.topbar {
  background: var(--navy-900);
  border-bottom: 2px solid var(--red-600);
}
.topbar__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand__logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--red-600);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.tabs {
  display: flex;
  gap: 4px;
}
.tab {
  background: transparent;
  border: none;
  color: rgba(243,244,246,0.65);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab:hover { color: var(--paper); }
.tab.is-active {
  background: var(--red-600);
  color: var(--paper);
}
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--red-400);
  color: var(--navy-900);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

.lock-btn {
  background: rgba(243,244,246,0.08);
  border: 1px solid rgba(243,244,246,0.18);
  color: var(--paper);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lock-btn:hover { background: rgba(243,244,246,0.16); }

.competition-bar {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.competition-bar select {
  background: rgba(243,244,246,0.08);
  color: var(--paper);
  border: 1px solid rgba(243,244,246,0.25);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  max-width: 100%;
}
/* De geopende optielijst wordt door de browser met een lichte achtergrond
   getekend, dus daar hebben de opties donkere tekst nodig (los van de
   lichte tekstkleur van de gesloten select zelf op de donkere topbar). */
.competition-bar select option {
  color: var(--ink);
  background: var(--card);
  font-weight: 500;
}
.competition-bar__type {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red-400);
  background: rgba(229,83,106,0.16);
  padding: 4px 8px;
  border-radius: var(--radius);
}
.btn--small { padding: 6px 10px; font-size: 0.8rem; }
.competition-bar .icon-btn { color: var(--paper); opacity: 0.75; }
.competition-bar .icon-btn:hover { opacity: 1; }

.standings-group + .standings-group { margin-top: 24px; }

.admin-only { display: none; }
body.is-unlocked .admin-only { display: revert; }
body.is-unlocked td.row-actions.admin-only { display: flex; }

.modal__hint {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 14px;
  line-height: 1.4;
}

/* ---------- Layout ---------- */

.app {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}
.view { display: none; }
.view.is-active { display: block; animation: fade-in 0.2s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.view__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.view__header h1 { font-size: 1.5rem; font-weight: 600; }
.view__sub { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.92rem; }

.section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
}
.section-title--tight { margin: 20px 0 10px; }

/* ---------- Buttons ---------- */

.btn {
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--navy-700); color: var(--paper); }
.btn--primary:hover { filter: brightness(1.2); }
.btn--ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--paper-dim); }
.btn--danger { background: transparent; color: var(--red-700); border: 1px solid rgba(122,21,34,0.35); }
.btn--danger:hover { background: rgba(122,21,34,0.08); }
.icon-btn {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

/* ---------- Match tickets ---------- */

.match-group { margin-bottom: 28px; }
.match-group__title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.ticket-list { display: flex; flex-direction: column; gap: 10px; }

.ticket {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s;
}
.ticket:hover { transform: translateY(-1px); }
.ticket__bar { background: var(--navy-500); }
.ticket.is-win .ticket__bar { background: var(--green); }
.ticket.is-draw .ticket__bar { background: var(--stone); }
.ticket.is-loss .ticket__bar { background: var(--red-600); }
.ticket.is-cancelled .ticket__bar { background: var(--ink-soft); }

.ticket__main {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ticket__date {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ticket__opponent {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.ticket__meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.ticket__score {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-left: 1px dashed var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--navy-900);
  min-width: 76px;
}
.ticket__score--pending {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.empty-state {
  color: var(--ink-soft);
  font-size: 0.9rem;
  padding: 18px 0;
}

/* ---------- Player table ---------- */

.player-table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow);
}
.player-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.player-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 10px 14px;
  background: var(--paper-dim);
  border-bottom: 1px solid var(--line);
}
.player-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--paper-dim);
  font-size: 0.92rem;
}
.player-table tr:last-child td { border-bottom: none; }
.player-table .num, .player-table th.num { text-align: center; }
.col-num { width: 44px; }
.col-actions { width: 70px; }
.jersey-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--paper);
  font-weight: 700;
  font-size: 0.76rem;
  font-family: var(--font-display);
}
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 0.95rem;
  padding: 2px 4px;
}
.row-actions button:hover { color: var(--navy-700); }

.player-name-cell {
  cursor: pointer;
}
.stats-table td.player-name-cell:hover,
.stats-table td.player-name-cell:focus-visible {
  background: rgba(53,80,122,0.07);
}
.player-name-cell:focus-visible {
  outline: 2px solid var(--navy-500);
  outline-offset: -2px;
}
.player-name-link {
  display: block;
  font-weight: 600; color: var(--navy-700);
}
.player-name-cell:hover .player-name-link,
.player-name-cell:focus-visible .player-name-link {
  text-decoration: underline;
}
.player-name-hint {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* Houdt de identificerende eerste kolom(men) in beeld bij horizontaal scrollen. */
.stats-table th:first-child,
.stats-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
  box-shadow: 4px 0 6px -4px rgba(16,21,34,0.18);
}
.stats-table thead th:first-child {
  background: var(--paper-dim);
  z-index: 2;
}

.standings-table th:first-child,
.standings-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
}
/* --pos-col-width wordt via JS gezet op de werkelijk gerenderde breedte van de
   #-kolom, zodat deze offset nooit uit de pas loopt met de echte layout
   (wat eerder een kier veroorzaakte waar gescrolde inhoud doorheen piepte). */
.standings-table th:nth-child(2),
.standings-table td:nth-child(2) {
  position: sticky;
  left: var(--pos-col-width, 44px);
  z-index: 1;
  background: var(--card);
  box-shadow: 4px 0 6px -4px rgba(16,21,34,0.18);
}
.standings-table thead th:first-child,
.standings-table thead th:nth-child(2) {
  background: var(--paper-dim);
  z-index: 2;
}

/* ---------- Standings ---------- */

.standings-table tr.is-own-team td {
  background: rgba(53,80,122,0.10);
  font-weight: 700;
}
.standings-table tr.is-own-team td:first-child,
.standings-table tr.is-own-team td:nth-child(2) {
  background: #E9EDF4;
}
.standings-table td.pos {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.standings-table .num { font-variant-numeric: tabular-nums; }
.standings-table td:nth-child(10) {
  font-weight: 700;
  color: var(--navy-700);
}

/* ---------- Knockout-bracket ---------- */

.bracket-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  padding: 20px 16px;
  margin-bottom: 24px;
}
.bracket {
  position: relative;
  display: flex;
  gap: 44px;
  width: max-content;
  min-width: 100%;
}
.bracket-round {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 168px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.bracket-round__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: center;
}
.bracket-round .bracket-match {
  background: var(--paper);
  padding: 8px 10px;
  font-size: 0.82rem;
  align-items: flex-start;
}
.bracket-match__team {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.bracket-match__team span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bracket-match__team span:last-child {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.bracket-match__team.is-winner {
  font-weight: 700;
  color: var(--navy-700);
}
.bracket-lines {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.bracket-lines path {
  fill: none;
  stroke: var(--stone);
  stroke-width: 1.5;
}

.team-chip-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.team-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 6px 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}
.team-chip.is-own {
  border-color: var(--navy-500);
  background: rgba(53,80,122,0.10);
}
.team-chip button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 0.9rem;
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.team-chip button:hover { background: var(--paper-dim); color: var(--red-600); }

.quick-add-form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.quick-add-form input[type="text"] {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 0.92rem;
  flex: 1;
  min-width: 160px;
}
.checkbox-field {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
}

.results-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.results-round__title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 18px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.results-round__title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.result-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.9rem;
}
.result-row.is-clickable { cursor: pointer; }
.result-row.is-clickable:hover { background: var(--paper-dim); }
.result-row[data-synced="true"] {
  border-style: dashed;
  background: rgba(53,80,122,0.06);
}
body.is-unlocked .row-actions.admin-only { display: flex; }
.result-row__score {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---------- Scoreboard (team record) ---------- */
.scoreboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  background: var(--navy-900);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.scoreboard__stat {
  padding: 16px 10px;
  text-align: center;
  border-right: 1px solid rgba(243,244,246,0.1);
}
.scoreboard__stat:last-child { border-right: none; }
.scoreboard__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--red-400);
  font-variant-numeric: tabular-nums;
}
.scoreboard__label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(243,244,246,0.65);
  margin-top: 2px;
}

/* ---------- Modal ---------- */

body.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(16,21,34,0.55);
  display: flex; align-items: flex-end;
  justify-content: center;
  z-index: 50;
  padding: 0;
}

/* Zorgt dat het HTML `hidden`-attribuut altijd wint van andere display-regels
   (voorkomt dat elementen per ongeluk toch zichtbaar blijven/worden). */
[hidden] {
  display: none !important;
}
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; padding: 20px; }
}
.modal {
  background: var(--card);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  border-radius: 12px 12px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-top: 3px solid var(--red-600);
}
@media (min-width: 640px) {
  .modal { border-radius: 8px; border-top: 3px solid var(--red-600); }
}
.modal--small { max-width: 420px; }
.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal__header h2 { font-size: 1.15rem; }
.modal__body {
  padding: 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.modal__footer-right { display: flex; gap: 8px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-soft);
  min-width: 0; /* voorkomt dat een lang placeholder (bijv. bij competitienaam) de grid-kolom breder duwt dan de modal */
}
.field input, .field select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper);
}
.field input:focus, .field select:focus {
  outline: 2px solid var(--navy-500);
  outline-offset: 1px;
}
.field input:disabled, .field select:disabled,
.stats-input-table input:disabled {
  background: var(--paper-dim);
  color: var(--ink-soft);
  cursor: default;
}
.score-field { grid-column: span 1; }

.stats-input-table input {
  width: 56px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 6px;
  text-align: center;
  font-size: 0.88rem;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: var(--navy-900);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 100;
  border-bottom: 2px solid var(--red-600);
}

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .ticket__opponent { font-size: 0.92rem; }
  .tabs { flex-wrap: wrap; gap: 2px; }
  .tab { padding: 8px 10px; font-size: 0.85rem; }

  /* Spelers- en standentabel passen op mobiel binnen het scherm i.p.v. te
     moeten horizontaal scrollen — alles wat kleiner opgemaakt. */
  .player-table { min-width: 0; width: 100%; }
  .player-table th { padding: 6px 3px; font-size: 0.6rem; }
  .player-table td { padding: 6px 3px; font-size: 0.74rem; }
  .player-table th:first-child,
  .player-table td:first-child { overflow-wrap: break-word; }
  .col-num { width: 20px; }
  .col-actions { width: 32px; }
  .standings-table th:nth-child(2),
  .standings-table td:nth-child(2) { width: 76px; }
  .row-actions { gap: 2px; }
  .row-actions button { font-size: 0.8rem; padding: 1px 2px; }
}

:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}