:root {
  --quick-blue: #0b3d91;
  --quick-blue-light: #eaf0fb;
  --warning-bg: #fff3cd;
  --warning-border: #e6a700;
  --border: #d9dee6;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0;
  background: #f5f7fb;
  color: #1a1f2b;
  /* Safari op iOS vergroot anders bij het draaien naar liggend eigenhandig de
     tekst, waardoor de layout na een draai anders oogt dan ervoor. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

header {
  background: var(--quick-blue);
  color: #fff;
  padding: 1.25rem 1.5rem;
}

header h1 { margin: 0; font-size: 1.4rem; }
.kop-waarschuwing { font-size: 1.25em; margin-right: 0.15rem; }

.badge {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 0.4rem;
  font-size: 0.85rem;
}

.warning {
  background: var(--warning-bg);
  border-bottom: 3px solid var(--warning-border);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}
.warning ul { margin: 0.3rem 0 0; padding-left: 1.2rem; font-weight: normal; }

.hidden { display: none !important; }

main { padding: 1rem 1.5rem 3rem; max-width: 950px; margin: 0 auto; }

section { margin-bottom: 2rem; }
h2 { color: var(--quick-blue); border-bottom: 2px solid var(--quick-blue-light); padding-bottom: 0.3rem; }

.tabs { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.tab-btn {
  border: 1px solid var(--quick-blue);
  background: #fff;
  color: var(--quick-blue);
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.tab-btn.active { background: var(--quick-blue); color: #fff; }

table { width: 100%; max-width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
/* Lange teksten (tegenstandernamen) mogen afbreken in plaats van de tabel
   breder maken dan het scherm - maar alleen als een woord echt niet past,
   anders knipt de browser ook korte woorden als "Vertrek" doormidden. */
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; overflow-wrap: break-word; }
th { background: var(--quick-blue-light); color: var(--quick-blue); white-space: nowrap; }
tr.flag-row { background: #fdeaea; }

.coach-card {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.coach-card h3 { margin: 0 0 0.5rem; color: var(--quick-blue); }
.coach-meta { font-size: 0.85rem; color: #555; margin-bottom: 0.5rem; }

/* Zelfde kaartopmaak als de coaches, maar met de waarschuwingskleur zodat een
   niet-ingeplande wedstrijd niet wegvalt tussen de wel geregelde ritten. */
.not-planned-card {
  background: var(--warning-bg);
  border-left: 4px solid var(--warning-border);
}
.not-planned-card table { background: #fffdf5; }

/* Groot genoeg om de haan te herkennen, klein genoeg om op de regel te passen. */
.club-logo { height: 1.8rem; width: auto; vertical-align: middle; display: block; }

.not-playing-row td { color: #777; font-style: italic; }

footer { text-align: center; font-size: 0.8rem; color: #777; padding: 1rem; }

/* --------------------------------------------------------------------------
   Smalle schermen (telefoon rechtop, o.a. iPhone 13 mini op 375px).
   De brede tabellen - uitgebreid overzicht, coachplanning, niet ingepland -
   hebben 5 tot 8 kolommen en passen daar niet op. Die klappen om naar een
   lijst per wedstrijd: de kolomkop uit data-label komt dan voor de waarde te
   staan. De smalle tabellen (detail, samenvatting) blijven gewone tabellen.
   De grens ligt op 900px en niet op orientatie: de coachtabel heeft met een
   lange tegenstandernaam ongeveer 830px nodig, dus een telefoon in liggende
   stand (812px) stapelt nog op. Vanaf een tablet in liggende stand passen de
   volledige tabellen wel, en dan komen ze vanzelf terug.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  header { padding: 0.9rem 1rem; }
  header h1 { font-size: 1.15rem; }
  .warning { padding: 0.6rem 1rem; }
  main { padding: 0.75rem 1rem 2rem; }
  h2 { font-size: 1.05rem; }
  .tabs { flex-wrap: wrap; }
  /* Groot genoeg om met een duim te raken. */
  .tab-btn { font-size: 0.85rem; padding: 0.35rem 0.8rem; min-height: 2.5rem; }
  .coach-card { padding: 0.75rem; }
  th, td { padding: 0.45rem 0.5rem; font-size: 0.85rem; }

  /* De smalle tabellen blijven tabellen, maar met vaste kolombreedtes: zonder
     dit duwt een lange sportparknaam de kolom Afstand van het scherm af. */
  #detailView table, #samenvattingView table { table-layout: fixed; }
  #detailView th:nth-child(1) { width: 21%; }
  #detailView th:nth-child(2) { width: 16%; }
  #detailView th:nth-child(3) { width: 42%; }
  #detailView th:nth-child(4) { width: 21%; }

  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { padding: 0.45rem 0; border-bottom: none; }
  table.stack tr + tr { border-top: 2px solid var(--quick-blue-light); }
  /* Het label staat absoluut geplaatst, niet als flex-item. Met flex werd elk
     element in de cel een los item, waardoor bijvoorbeeld "Geen coach!" in een
     eigen smalle kolom werd geperst en letter voor letter afbrak. */
  table.stack td {
    display: block;
    position: relative;
    border: none;
    padding: 0.12rem 0.6rem 0.12rem 7.1rem;
    min-height: 1.35rem;
  }
  table.stack td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.6rem;
    top: 0.12rem;
    width: 6.2rem;
    color: #5a6274;
    font-weight: 600;
  }
}