:root {
  /* Huisstijl: donkerblauw #0F172A, helder blauw #2563EB, turquoise #06B6D4, wit. */
  --papier: #f1f5f9;
  --vlak: #ffffff;
  --inkt: #0f172a;
  --zacht: #5f6e82;
  --lijn: #e2e8f0;
  --accent: #2563eb;
  --turkoois: #06b6d4;
  --groen: #15803d;
  --oranje: #b45309;
  --rood: #dc2626;
  --vlak-2: #e8eef6;   /* iets dieper dan --vlak, voor accentblokjes */
  --knoptekst: #ffffff;
  color-scheme: light dark;
}

/* De donkere set staat er twee keer: één keer voor wie zijn computer op donker
   heeft staan en niets gekozen heeft, en één keer voor wie hem zelf aanzet. CSS
   kent geen manier om die twee in één regel te vangen. Pas ze dus samen aan. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --papier: #0f172a; --vlak: #1e293b; --inkt: #f8fafc;
    --zacht: #94a3b8; --lijn: #334155;
    --accent: #60a5fa; --turkoois: #22d3ee;
    --groen: #4ade80; --oranje: #fbbf24; --rood: #f87171;
    --vlak-2: #273549;
    --knoptekst: #0f172a;
  }
}

:root[data-thema="donker"] {
  --papier: #0f172a; --vlak: #1e293b; --inkt: #f8fafc;
  --zacht: #94a3b8; --lijn: #334155;
  --accent: #60a5fa; --turkoois: #22d3ee;
  --groen: #4ade80; --oranje: #fbbf24; --rood: #f87171;
  --vlak-2: #273549;
  --knoptekst: #0f172a;
}

/* Zodat ook de vakjes, schuifbalken en keuzelijsten van de browser meegaan. */
:root[data-thema="licht"] { color-scheme: light; }
:root[data-thema="donker"] { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header { background: var(--vlak); border-bottom: 1px solid var(--lijn); position: relative; }
/* Het verloop blauw naar turquoise komt uit het beeldmerk; twee pixels is genoeg. */
header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--turkoois));
}
/* Loopt gelijk met main, zodat merk en menu op één lijn staan met de inhoud.
   Niet afbreken maar schuiven: op een smal scherm veeg je het menu opzij, in
   plaats van dat de balk twee of drie regels hoog wordt. */
.kop {
  max-width: 1100px; margin: 0 auto; padding: 8px 20px;
  display: flex; flex-wrap: nowrap; gap: 18px; align-items: center;
}
.versie {
  margin-left: auto; font-size: 12px; color: var(--zacht); text-decoration: none;
  border: 1px solid var(--lijn); border-radius: 999px; padding: 2px 9px;
}
.versie:hover { color: var(--inkt); border-color: var(--zacht); }
.merk { display: inline-flex; line-height: 0; text-decoration: none; flex: 0 0 auto; }
.merk img { height: 56px; width: auto; display: block; }
nav {
  display: flex; gap: 2px; align-items: center;
  flex: 1 1 auto; min-width: 0;
  padding-left: 18px; border-left: 1px solid var(--lijn);
  overflow-x: auto; scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }
/* Op een smal scherm loopt het laatste menu-item weg in een vervaging, zodat je
   ziet dat er nog meer staat. Op een breed scherm past alles en zou de vervaging
   het laatste item onnodig grijzen. */
@media (max-width: 880px) {
  nav {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
}
nav a {
  padding: 7px 11px; border-radius: 7px; white-space: nowrap;
  color: var(--zacht); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background-color .12s, color .12s;
}
nav a:hover { color: var(--inkt); background: var(--vlak-2); }
/* De pagina waar je bent krijgt de accentkleur; het turquoise streepje eronder is
   hetzelfde verloop als onder de balk, zodat het bij elkaar hoort. */
nav a.actief {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  position: relative;
}
nav a.actief::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--turkoois));
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
footer {
  max-width: 1100px; margin: 0 auto; padding: 0 20px 40px;
  color: var(--zacht); font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  justify-content: space-between;
}
footer a { color: var(--zacht); text-decoration: none; }
footer a:hover { color: var(--inkt); }

h1 { font-size: 1.6rem; margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 32px 0 10px; }
.zacht { color: var(--zacht); font-size: 13px; }
code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.86em; }
pre {
  background: var(--vlak); border: 1px solid var(--lijn); padding: 12px 14px;
  overflow-x: auto; font-size: 13px;
}

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.tegel {
  background: var(--vlak); border: 1px solid var(--lijn); border-top: 3px solid var(--lijn);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.tegel.nadruk { border-top-color: var(--accent); }
.tegel.waarschuwing { border-top-color: var(--oranje); }
.getal { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.label { color: var(--zacht); font-size: 13px; }

.melding { background: var(--vlak); border: 1px solid var(--lijn); border-left: 3px solid var(--accent); padding: 12px 14px; margin: 16px 0; }
.melding.waarschuwing { border-left-color: var(--oranje); }

table { width: 100%; border-collapse: collapse; background: var(--vlak); border: 1px solid var(--lijn); margin-bottom: 8px; }
th { text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--zacht); padding: 9px 12px; border-bottom: 1px solid var(--lijn); }
td { padding: 9px 12px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.cijfer { text-align: right; font-variant-numeric: tabular-nums; }

.chip { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 2px; background: var(--lijn); color: var(--zacht); }
.chip.groen { background: color-mix(in srgb, var(--groen) 18%, transparent); color: var(--groen); }
.chip.rood { background: color-mix(in srgb, var(--rood) 18%, transparent); color: var(--rood); }
.chip.oranje { background: color-mix(in srgb, var(--oranje) 20%, transparent); color: var(--oranje); }

.regel { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 14px 0; }
/* Vinkjes horen op dezelfde regel als de rest van het filter; ze mogen alleen
   meebreken als het scherm echt te smal wordt. */
.vinkje { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; }
.vinkje input { margin: 0; }
input, select, button {
  font: inherit; padding: 6px 9px; border: 1px solid var(--lijn);
  background: var(--vlak); color: var(--inkt); border-radius: 3px;
}
button { background: var(--accent); color: var(--knoptekst); border-color: transparent; cursor: pointer; }
button:hover { filter: brightness(1.08); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 720px) {
  table, thead, tbody, tr, td, th { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--lijn); padding: 6px 0; }
  td { border: 0; padding: 4px 12px; }
  .cijfer { text-align: left; }
}

.koppellijst { display: flex; flex-direction: column; border: 1px solid var(--lijn); background: var(--vlak); }
.koppelrij {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end;
  padding: 12px 14px; border-bottom: 1px solid var(--lijn);
}
.koppelrij:last-child { border-bottom: 0; }
.koppelrij .wie { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.veld { display: flex; flex-direction: column; gap: 3px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.veld input, .veld select { text-transform: none; letter-spacing: 0; font-size: 14px; }


/* --- dienstenlijst ------------------------------------------------------- */
.dienstrij { align-items: center; }
.dienstrij .merken { display: flex; gap: 6px; flex-wrap: wrap; }
/* Zondag herken je aan een grijs datumblok, niet aan een streep - de meeste
   diensten zijn zondagen, dus een felle markering op bijna elke rij helpt niet.
   Het blok sluit rondom even strak om het invoerveld; vandaar inline-flex in
   plaats van een blok dat de volle breedte pakt. */
.datumblok {
  display: inline-flex;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.dienstrij.zondag .datumblok {
  background: var(--vlak-2);
  border-color: var(--lijn);
}
.dienstrij.zondag .datumblok input { background: var(--vlak); }
.dienstrij.genegeerd { opacity: .55; }
.dienstrij.genegeerd .wie strong { text-decoration: line-through; }
.veld.vink { flex-direction: row; align-items: center; gap: 6px; }
.veld.vink input { margin: 0; }

/* --- versiehistorie ------------------------------------------------------ */
.releases { display: flex; flex-direction: column; gap: 14px; }
.release {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-left: 3px solid var(--lijn); padding: 14px 16px;
}
.release.huidig { border-left-color: var(--accent); }
.release header { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; background: none; border: 0; padding: 0; margin-bottom: 8px; }
.release .nummer { font-weight: 600; font-variant-numeric: tabular-nums; }
.release .kopregel { color: var(--inkt); }
.release ul { margin: 0; padding-left: 1.1rem; }
.release li { font-size: 14px; }

.terug { font-size: 13px; text-decoration: none; }
.terug:hover { text-decoration: underline; }

/* Kleine linkknopjes naast een invoerveld (SongSelect openen). */
.knopje {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 13px; padding: 7px 10px; border: 1px solid var(--lijn);
  border-radius: 3px; text-decoration: none; color: var(--accent); background: var(--vlak);
}
.knopje:hover { border-color: var(--accent); }
.knopje.leeg { color: var(--zacht); opacity: .45; pointer-events: none; }

/* Opslaanbalk blijft in beeld terwijl je door de lijst scrolt. */
.opslaanbalk {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 12px 14px; margin-top: -1px;
  background: var(--vlak); border: 1px solid var(--lijn);
  box-shadow: 0 -6px 14px rgb(0 0 0 / 7%);
}
.opslaanbalk button { min-width: 150px; padding: 9px 16px; font-weight: 600; }

/* Tweede knop: wel aanklikbaar, maar niet de handeling die telt. */
button.tweede {
  background: var(--vlak); color: var(--accent); border-color: var(--lijn);
  font-weight: 400; min-width: 0;
}
button.tweede:hover { border-color: var(--accent); filter: none; }

/* --- inloggen en profiel -------------------------------------------------- */
/* Het profielmenu klapt open op hover en op toetsenbordfocus. Geen ruimte tussen
   knop en menu: de padding zit ín het menu, anders valt de muis onderweg in een gat
   en klapt het weer dicht. */
.profiel { position: relative; margin-left: auto; }
.avatar {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--turkoois)); color: var(--knoptekst);
  cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.avatar:hover { filter: brightness(1.08); }
.profielmenu { display: none; position: absolute; right: 0; top: 100%; padding-top: 8px; z-index: 20; }
.profiel:hover .profielmenu, .profiel:focus-within .profielmenu { display: block; }
.profielkaart {
  min-width: 210px; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; background: var(--vlak); border: 1px solid var(--lijn);
  box-shadow: 0 8px 22px rgb(0 0 0 / 14%);
}
.profielkaart a { text-decoration: none; font-size: 14px; }
.profielkaart a:hover { text-decoration: underline; }
.profielkaart button { width: 100%; }
.profielkaart hr { border: 0; border-top: 1px solid var(--lijn); margin: 2px 0; }

/* Drie knopjes tegen elkaar aan, als één schakelaar. */
.themakeuze { display: flex; gap: 0; }
.themakeuze button {
  flex: 1 1 0; min-width: 0; padding: 6px 4px; font-size: 12px; font-weight: 400;
  background: var(--vlak); color: var(--zacht);
  border: 1px solid var(--lijn); border-radius: 0; margin-left: -1px;
}
.themakeuze button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.themakeuze button:last-child { border-radius: 0 6px 6px 0; }
.themakeuze button:hover { color: var(--inkt); filter: none; }
.themakeuze button.actief {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); border-color: var(--accent); z-index: 1;
}

.kaart {
  max-width: 400px; margin: 40px auto; padding: 24px 26px;
  background: var(--vlak); border: 1px solid var(--lijn);
}
.kaart.breed { max-width: 640px; }
.kaart h1 { margin-bottom: 12px; }
.kaart form + form { margin-top: 10px; }
.staand { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.staand button { padding: 9px 16px; font-weight: 600; }
input.code { font-size: 20px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

.tweestapsblok { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 18px 0; }
.qr { background: #fff; padding: 8px; border: 1px solid var(--lijn); line-height: 0; }
.qr svg { width: 180px; height: 180px; display: block; }
.sleutel { font-size: 15px; letter-spacing: .08em; word-break: break-all; }

/* --- gebruikers ---------------------------------------------------------- */
/* Drie lagen onder elkaar in plaats van alles op één regel: wie het is, wat hij
   mag, en de handelingen die je zelden gebruikt maar wel moet kunnen vinden. */
.gebruikerblok {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--lijn);
}
.gebruikerblok:last-child { border-bottom: 0; }
.gebruikerblok.uit { opacity: .6; }
.gebruikerkop { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.gebruikerkop strong { font-size: 15px; }
.gebruikerform { display: flex; flex-direction: column; gap: 12px; }
.naamrij { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.rechtenraster {
  display: grid; gap: 8px 12px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.rechtenraster .veld select { width: 100%; }
.handelingen {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  padding-top: 10px; border-top: 1px dashed var(--lijn);
}
.handelingen form { display: flex; gap: 6px; align-items: center; }
.handelingen .duw { margin-left: auto; }
.mag-alles { color: var(--zacht); font-size: 13px; }

/* --- help ---------------------------------------------------------------- */
.uitleg { max-width: 760px; }
.uitleg h2 { margin-top: 30px; }
.uitleg dt { font-weight: 600; margin-top: 14px; }
.uitleg dd { margin: 2px 0 0; color: var(--zacht); }
.uitleg dd code { color: var(--inkt); }