:root {
  --accent: #2563eb;
  --accent-donker: #1d4ed8;
  --accent-licht: #eff6ff;
  --rood: #b91c1c;
  --rood-licht: #fee2e2;
  --grijs: #777777;
  --lijn: #e2e2e2;
  --lijn-sterk: #cfcfcf;
  --tekst: #333333;
  --vlak: #ffffff;
  --achtergrond: #f4f5f7;

  /* Scorekleuren van de kaart. Ze staan alleen op de holes, nergens anders. */
  --eagle: #ffd84d;
  --birdie: #ed5b5b;
  --bogey: #a9d5e9;
  --dubbel: #3975a5;

  --cel: 30px;
}

@media (max-width: 700px) { :root { --cel: 27px; } }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 1rem;
  font: 400 16px/1.5 "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-text-size-adjust: 100%;
}

header {
  background: var(--accent);
  color: #fff;
  padding: 0.4rem 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
header a { color: #fff; }
header .titel { font-weight: 700; font-size: 1.05rem; }
header .sub { opacity: 0.85; font-size: 0.85rem; }
header .sub:empty { display: none; }

/* Rondekeuze in de kop. De links staan strak tegen elkaar in de HTML, dus de ruimte
   ertussen komt van `gap` en niet van een spatie in het sjabloon. */
header .ronden { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; }
header .ronden a { color: #fff; text-decoration: none; opacity: 0.7; }
header .ronden a:hover { text-decoration: underline; }
header .ronden a[aria-current] { font-weight: 600; opacity: 1; }

main { padding: 0.4rem; margin: 0 auto; }
main > .klein { margin: 0.35rem 0 0; }
h1 { font-size: 1.3rem; margin: 0 0 0.75rem; }
h2 { font-size: 1rem; margin: 0 0 0.4rem; letter-spacing: 0.01em; }
p { margin: 0.5rem 0; }
a { color: var(--accent); }

.kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 0.75rem;
  margin-bottom: 0.6rem;
}
.kaart > .klein:first-of-type { margin-top: 0; }
.kaart > form > button, .kaart > form > .rij + button { margin-top: 0.6rem; }
/* Acties die iets onomkeerbaars doen, krijgen een rode rand. */
.kaart.gevaarlijk { border-left: 3px solid var(--rood); }

/* Beheerscherm: links een vaste rail met alles wat je kunt doen, rechts één werkblad.
   Rustige haarlijnen en veel wit; de enige kleur is het blauw van het actieve item. */
.beheer {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
.rail { position: sticky; top: 0.75rem; padding: 0.25rem 0; }
.raillabel {
  margin: 1.1rem 0 0.3rem 0.7rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.raillabel:first-child { margin-top: 0; }
.railitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.7rem;
  border-radius: 7px;
  font-size: 0.88rem;
  color: #4a4a4a;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.railitem:hover { background: #ededf0; color: var(--tekst); }
.railitem b { font-weight: 500; font-size: 0.78rem; color: #9a9a9a; }
.railitem.nu {
  background: var(--vlak);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.railitem.nu b { color: var(--accent); }

.werkblad {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 1.5rem 1.6rem 1.75rem;
}
.werkblad h1 { font-size: 1.4rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.werkblad h1.gevaar { color: var(--rood); }
.werkblad .onder {
  margin: 0.3rem 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--lijn);
  color: var(--grijs);
  font-size: 0.92rem;
}
.werkblad h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; }
.werkblad h2 .klein { font-weight: 400; }
.werkblad > form { max-width: 30rem; }
.werkblad label { margin-top: 0.9rem; }
.werkblad > form > button { margin-top: 1.1rem; }
.leegstaat { color: var(--grijs); font-size: 0.92rem; }
.kortveld { max-width: 7rem; }
.codeveld { max-width: 8rem; text-transform: uppercase; letter-spacing: 0.14em; }

/* De stand van zaken: de getallen waar de wedstrijdleiding de hele dag op stuurt. */
.stand {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  margin: -0.4rem 0 1rem;
  font-size: 0.85rem;
  color: var(--grijs);
}
.stand b { font-size: 1.15rem; font-weight: 600; color: var(--tekst); margin-right: 0.25rem; }
.stand .alarm, .stand .alarm b { color: var(--rood); }

/* Voortgang per kaart: achttien streepjes, gevuld zodra speler en marker het eens zijn. */
.strip { display: inline-flex; gap: 1px; }
.strip i { width: 4px; height: 13px; border-radius: 1px; background: #e8e8e8; }
.strip i.vol { background: var(--accent); }

.uitleg { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid var(--lijn); }
.uitleg ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.uitleg li { margin-bottom: 0.3rem; }
.blok + .blok { border-top: 1px solid var(--lijn); margin-top: 1.4rem; padding-top: 1.2rem; }

/* Smal scherm: de rail wordt een rij chips boven het werkblad. */
@media (max-width: 800px) {
  .beheer { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .rail {
    position: static;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }
  .raillabel { display: none; }
  .railitem {
    flex: 0 0 auto;
    border: 1px solid var(--lijn);
    border-left-width: 1px;
    background: var(--vlak);
    white-space: nowrap;
  }
  .railitem.nu { border-color: var(--accent); }
  .werkblad { padding: 1.1rem 1rem 1.3rem; }
}

.knop, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.knop.groot { width: 100%; font-size: 1.1rem; min-height: 56px; }
.knop.secundair, button.secundair { background: #fff; color: var(--accent); border: 2px solid var(--accent); }
.knop.gevaar, button.gevaar { background: var(--rood); }
button:disabled, .knop.uit { background: var(--grijs); opacity: 0.6; pointer-events: none; }

label { display: block; font-weight: 600; font-size: 0.9rem; margin: 0.6rem 0 0.2rem; }
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.7rem;
  border: 2px solid var(--lijn);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--tekst);
}
textarea { min-height: 9rem; font-family: ui-monospace, monospace; font-size: 0.9rem; }

.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Kaartkop: de wedstrijd, de ronde en wie wie markeert. De speler leest dit één keer en
   werkt daarna alleen nog in het raster eronder, dus het staat klein en stil. De vorm komt
   van de papieren kaart: gedrukte labels in kleinkapitaal, de naam ernaast. */
.kaartkop {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 0.45rem 0.7rem 0.5rem;
  margin-bottom: 0.45rem;
}
.wedstrijdregel {
  margin: 0 0 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--lijn);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
}
.wedstrijdregel .punt { color: var(--lijn-sterk); margin: 0 0.3rem; }
.wedstrijdregel .ronde { font-weight: 400; color: var(--grijs); }

.rollen { display: grid; gap: 0.2rem 1.8rem; margin: 0; }
.rollen > div {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  align-items: baseline;
}
.rollen dt {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.rollen dd { margin: 0; font-size: 0.88rem; line-height: 1.35; }
/* Je eigen regel draagt de kleur, zodat je in één blik ziet welke naam van jou is. */
.rollen .ik dd { font-weight: 600; color: var(--accent); }
.rollen .leeg { color: var(--grijs); }

/* Ruimer scherm: de drie rollen naast elkaar, het label boven de naam. De kolommen mogen
   krimpen, anders duwen drie lange namen de pagina breder dan het scherm. */
@media (min-width: 680px) {
  .rollen { grid-auto-flow: column; grid-auto-columns: minmax(0, max-content); }
  .rollen > div { grid-template-columns: none; }
}

table.kaarttabel { border-collapse: collapse; }
table.kaarttabel th, table.kaarttabel td {
  border: 1px solid var(--lijn);
  text-align: center;
  padding: 0;
  min-width: 46px;
}
table.kaarttabel th.kop {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  min-width: 92px;
  padding: 0.35rem 0.5rem;
  text-align: left;
  font-size: 0.8rem;
}
table.kaarttabel tr.holes th { background: var(--accent); color: #fff; height: 34px; font-size: 0.85rem; }
table.kaarttabel tr.par td { background: #e2e8f0; color: var(--grijs); height: 28px; font-size: 0.8rem; }
table.kaarttabel td.uit { background: #f8fafc; }
/* Uit, In en Tot. `na-negen` zet een streep in de achtergrondkleur tussen hole 9 en 10,
   zodat de twee negens los van elkaar lezen zonder dat de tabel uit elkaar valt. */
table.kaarttabel .som { background: #cbd5e1; font-weight: 700; font-size: 0.9rem; }
table.kaarttabel tr.holes th.som { background: var(--accent-donker); }
table.kaarttabel .som.na-negen { border-right: 6px solid var(--achtergrond); }

td.cel { position: relative; }
td.cel input.score {
  width: 100%;
  min-width: 46px;
  height: 52px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 0;
  -moz-appearance: textfield;
}
td.cel input.score::-webkit-outer-spin-button,
td.cel input.score::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
td.cel input.score:focus { outline: 3px solid var(--accent); outline-offset: -3px; }
td.cel.conflict input.score { background: var(--rood-licht); color: var(--rood); }
td.readonly { height: 30px; font-size: 0.85rem; color: var(--grijs); }

.melding { padding: 0.75rem 1rem; border-radius: 8px; margin: 0.75rem 0; font-weight: 600; }
.melding.fout { background: var(--rood-licht); color: var(--rood); }
.melding.goed { background: var(--accent-licht); color: var(--accent); }
.melding.let-op { background: #fef3c7; color: #92400e; }

table.lijst { width: 100%; border-collapse: collapse; background: var(--vlak); }
table.lijst th, table.lijst td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--lijn); text-align: left; }
table.lijst th { background: var(--accent); color: #fff; font-size: 0.85rem; }
table.lijst td.getal, table.lijst th.getal { text-align: right; font-variant-numeric: tabular-nums; }
table.lijst tr.uitgevallen td { color: var(--grijs); text-decoration: line-through; }
table.lijst tr.klaar td:first-child::after { content: " ✓"; color: var(--accent); }

.rij { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.klein { font-size: 0.85rem; color: var(--grijs); }
.pil { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.pil.rood { background: var(--rood-licht); color: var(--rood); }
.pil.ok { background: var(--accent-licht); color: var(--accent); }

.stand {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

/* Leaderboard als scorekaart. Kleuren en tinten volgen de kaart van de club: de scores
   dragen de kleur, het raster blijft stil. Geen gaten tussen holes, dus zo smal mogelijk. */
.bord-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
}
table.bord {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
table.bord th, table.bord td {
  width: var(--cel);
  height: 28px;
  padding: 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 400;
  border-bottom: 1px solid var(--lijn);
}
table.bord tbody tr:last-child th, table.bord tbody tr:last-child td { border-bottom: 0; }

/* Kop: holenummers op een grijze band, daaronder de pars in lichter grijs. */
table.bord tr.holerij th {
  height: 24px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--grijs);
  background: #f7f7f7;
  letter-spacing: 0.02em;
}
table.bord tr.pars th, table.bord tr.pars td {
  height: 20px;
  font-size: 0.7rem;
  color: #999;
  background: #fcfcfc;
}
table.bord tr.pars { border-bottom: 1px solid var(--lijn); }

/* Vastgezette kolommen: plaats, naam en de stand tegen par blijven altijd in beeld. */
table.bord .pos {
  position: sticky; left: 0; z-index: 2;
  width: 26px; background: var(--vlak); color: #999; font-size: 0.72rem;
}
table.bord .speler {
  position: sticky; left: 26px; z-index: 2;
  width: 132px; background: var(--vlak);
  text-align: left; padding: 0 0.5rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.bord .topar {
  position: sticky; left: 158px; z-index: 2;
  width: 42px; background: var(--vlak); font-weight: 600;
  box-shadow: 1px 0 0 var(--lijn);
}
table.bord .topar.onder { color: var(--birdie); }
table.bord tr.holerij .pos, table.bord tr.holerij .speler { background: #f7f7f7; }
table.bord tr.holerij .topar { background: #f7f7f7; }
table.bord tr.pars .pos, table.bord tr.pars .speler, table.bord tr.pars .topar { background: #fcfcfc; }

/* Uit, In en de rondetotalen: rustig grijs, met een lijn die ze van de holes losmaakt. */
table.bord .som {
  width: 44px;
  font-weight: 500;
  color: #555;
  background: #f3f3f3;
  border-left: 1px solid #cfcfcf;
}
table.bord .som.uit { border-right: 1px solid #cfcfcf; }
table.bord .som.totaal { width: 50px; font-weight: 600; color: var(--tekst); }
table.bord tr.pars .som { background: #f3f3f3; }

/* De score zelf: een blokje van 26px, gekleurd naar het resultaat op die hole. */
table.bord td.vak { background: var(--vlak); }
.score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 3px;
  font-size: 0.8rem;
  line-height: 1;
  color: #222;
  background: var(--kleur);
}
.score.eagle  { --kleur: var(--eagle); }
.score.birdie { --kleur: var(--birdie); color: #fff; }
.score.par    { --kleur: transparent; }
.score.bogey  { --kleur: var(--bogey); }
.score.dubbel { --kleur: var(--dubbel); color: #fff; }

/* Voorlopig: pas één van beiden vulde deze hole in. Een ring in de scorekleur met een
   lichte vulling, zodat de kleur ook van een afstand leesbaar blijft; een ring alleen valt
   weg bij het geel en het lichtblauw. `inset` en geen `border`, anders wordt het blokje
   3px breder en verspringt de hele rij. Par heeft geen kleur en krijgt daarom grijs. */
.score.voorlopig {
  background: color-mix(in srgb, var(--kleur) 22%, #fff);
  box-shadow: inset 0 0 0 1.5px var(--kleur);
  color: var(--tekst);
}
.score.par.voorlopig { box-shadow: inset 0 0 0 1.5px var(--grijs); }

table.bord tr.uitgevallen .speler { color: var(--grijs); }
table.bord tr.uitgevallen .speler { text-decoration: none; }
table.bord td.leeg { color: var(--grijs); font-weight: 400; }

/* Onder de kaart: de kleursleutel links, de tijd rechts. */
.onderrand {
  display: flex;
  margin-bottom: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.2rem;
  margin-top: 0.5rem;
}
.legenda { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.sleutel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: #666;
  white-space: nowrap;
}
.sleutel i.score { width: 15px; height: 15px; border: 1px solid rgba(0, 0, 0, 0.08); }
.sleutel i.score.par { background: #fff; border-color: #ccc; }
.sleutel i.score.par.voorlopig { background: #fff; border-color: transparent; }
.onderrand .klein { margin: 0; }

/* Wedstrijdenlijst: één regel per wedstrijd, hairlines in plaats van kaders. */
.nieuw {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
}
.nieuw input[type="text"] { flex: 1; min-width: 12rem; }

ul.wedstrijden {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  overflow: hidden;
}
li.wedstrijd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
}
li.wedstrijd + li.wedstrijd { border-top: 1px solid var(--lijn); }
.wedstrijd-naam { font-weight: 700; line-height: 1.25; }
.wedstrijd-naam .klein { display: block; font-weight: 400; }
li.wedstrijd .knop { min-height: 38px; padding: 0 0.7rem; font-size: 0.9rem; }
.knop.plat { background: none; color: var(--grijs); font-weight: 600; }
.knop.plat:hover { color: var(--rood); }

details.verborgen-blok { margin-top: 0.75rem; }
details.verborgen-blok summary {
  cursor: pointer;
  color: var(--grijs);
  font-size: 0.9rem;
  padding: 0.35rem 0.15rem;
}
details.verborgen-blok ul.wedstrijden { margin-top: 0.4rem; opacity: 0.75; }

form.gevaarzone {
  border-top: 1px solid var(--lijn);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
}
/* Voordeur, inloggen, registreren en meldingen: één smalle kolom midden op de pagina.
   De kaart en de regel eronder staan in dezelfde kolom, dus ze lijnen aan beide kanten uit. */
.smal { max-width: 26rem; margin: 2.5rem auto 0; padding: 0 0.6rem; }
.smal > .kaart { padding: 1.5rem; margin-bottom: 0; }
.smal h1 { margin: 0; }
.smal h1 + .klein { margin: 0.25rem 0 1.4rem; }
.smal label { margin-top: 1rem; margin-bottom: 0.35rem; }
.smal button { margin-top: 1.5rem; }
.smal .voet { margin: 1.25rem 0 0; text-align: center; }
.naschrift { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--lijn); }

/* De voordeur: de naam, één regel eronder, één knop. */
.voordeur { margin-top: 4rem; text-align: center; }
.voordeur .naam { font-size: 2.4rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; }
.voordeur .tagline { margin: 0.75rem 0 0; font-size: 1.05rem; color: var(--grijs); }
.voordeur .knop { margin-top: 2rem; }
/* Het totaal op het tekenscherm is het getal waar het om gaat. */
.totaal { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.totaal .eenheid { font-size: 0.9rem; font-weight: 400; color: var(--grijs); }