/* TeamAssist — stijl.
   Sober en leesbaar: dit is een werkscherm, geen etalage. Eén tekstfamilie,
   één accentkleur, en verder wit met haarlijnen. */
/* Sober en leesbaar: dit is een werkscherm, geen etalage. Eén tekstfamilie,
     één accentkleur, en verder wit met haarlijnen. */
  :root {
    --inkt: #17191c;
    --achtergrond: #ffffff;
    --gedempt: #6b7076;
    --lijn: #e3e5e8;
    --accent: #a4232b;
    --vlak: #f6f7f8;
    --fout-vlak: #fdf2f2;
    --radius: 6px;
  }

  /* Mijn voorkeuren (T6) — 'donkere_modus' op de persoon, drie standen:
     systeem (volgt prefers-color-scheme), licht, donker. Enkel de kleuren
     wisselen; niets van de opbouw. De accentkleur zelf blijft wat de club
     instelde (kleur.js keurt enkel tegen wit goed, met opzet — zie daar) en
     wordt in donkere modus enkel nog als achtergrond gebruikt, nooit als
     tekst- of randkleur op de donkere pagina: dat zou voor een kleur als het
     clubrood te weinig contrast geven. */
  [data-modus="donker"] {
    --inkt: #eceef0;
    --achtergrond: #17191c;
    --gedempt: #9a9fa5;
    --lijn: #33363a;
    --vlak: #202226;
    --fout-vlak: #3a2020;
  }
  @media (prefers-color-scheme: dark) {
    [data-modus="systeem"] {
      --inkt: #eceef0;
      --achtergrond: #17191c;
      --gedempt: #9a9fa5;
      --lijn: #33363a;
      --vlak: #202226;
      --fout-vlak: #3a2020;
    }
  }

  * { box-sizing: border-box; }

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

  main { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }

  /* De kopstrook van YOAssist (I1): een donkere strook over de volle breedte,
     appnaam met de club eronder links, naam met de rol(len) eronder rechts.
     Blijft bovenaan staan bij het scrollen, met ruimte voor de inkeping van
     een iPhone (safe-area-inset-top).

     --topbalk-achtergrond en --topbalk-tekst komen van huisstijl.js, enkel
     wanneer een beheerder een topbalkkleur instelde: dan wint de clubkleur.
     Zonder die instelling de donkere YOAssist-strook met witte tekst. Alles
     wat erop staat, rekent met currentColor, zodat het ook op een lichte
     clubkleur leesbaar blijft. */
  .topbalk {
    background: var(--topbalk-achtergrond, #12161c);
    color: var(--topbalk-tekst, #ffffff);
    padding: calc(.9rem + env(safe-area-inset-top)) 1.25rem .9rem;
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 0 1.25rem;
  }
  /* align-items: center: de linkerkant (merk, club) en de rechterkant (naam,
     rollen) zijn elk twee regels, en het logo één blok — zo staan ze op
     dezelfde hoogte in plaats van bovenaan te hangen. */
  .topbalk-rij {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 41.5rem;
    margin: 0 auto;
    position: relative;
  }
  .topbalk-logo { height: 2.2rem; width: auto; max-width: 5rem; object-fit: contain; }
  .topbalk-merk { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
  .merk {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    display: flex;
    align-items: baseline;
    gap: .4rem;
  }
  /* Amber op de donkere strook, zoals in YOAssist; op een clubkleur zet
     huisstijl.js dit op de tekstkleur van de strook, want amber is daar niet
     gegarandeerd leesbaar. */
  .merk-accent { color: var(--merk-accent, #e8a317); }
  .versie {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .04em;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: .08rem .38rem;
    font-variant-numeric: tabular-nums;
    opacity: .55;
    position: relative;
    top: -.1rem;
  }
  .versie:empty { display: none; }
  .merk-club { font-size: .72rem; opacity: .7; letter-spacing: .01em; }
  .merk-club:empty { display: none; }

  /* De naam is zelf de menuknop: je eigen naam is de plek waar mensen hun
     eigen dingen verwachten. Het pijltje zegt dat er iets openklapt. */
  .topbalk-ik { position: relative; margin-left: auto; flex-shrink: 0; }
  .topbalk-ik-knop {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: .78rem;
    line-height: 1.3;
    text-align: right;
    cursor: pointer;
    padding: .3rem .5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: .4rem;
  }
  .topbalk-ik-knop:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .topbalk-ik-knop::after { content: '⌄'; font-size: .95em; line-height: 1; transition: transform .15s ease; }
  .topbalk-ik-knop[aria-expanded="true"]::after { transform: rotate(180deg); }
  .topbalk-ik-knop > span { display: block; text-align: right; }
  #topbalknaam { display: block; font-weight: 600; font-size: .85rem; }
  .topbalk-rollen { display: block; font-size: .7rem; letter-spacing: .04em; opacity: .75; }
  .topbalk-rollen.beheer { color: var(--merk-accent, #e8a317); opacity: 1; font-weight: 600; }

  .naammenu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: .4rem;
    background: var(--achtergrond);
    color: var(--inkt);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    min-width: 13rem;
    padding: .4rem 0;
    z-index: 10;
    text-align: left;
  }
  .naammenu-kop {
    font-size: .78rem;
    font-weight: 600;
    color: var(--gedempt);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .5rem .9rem .2rem;
  }
  .naammenu-scheiding { border-top: 1px solid var(--lijn); margin: .3rem 0; }
  .naammenu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--inkt);
    padding: .5rem .9rem;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    border-radius: 0;
  }
  .naammenu button:hover { background: var(--vlak); }

  h2 { font-size: 1rem; margin: 2rem 0 .6rem; }
  /* De titel van een beheerscherm: die opent uit het naammenu, er licht dus
     geen tabblad op dat zegt waar je bent. */
  h2.paneelkop { font-size: 1.2rem; margin-top: .5rem; }
  h3 { font-size: .92rem; margin: 1.5rem 0 .4rem; color: var(--gedempt); }

  details { margin: 1.5rem 0; border-top: 1px solid var(--lijn); padding-top: .75rem; }
  details:first-of-type { border-top: none; padding-top: 0; }
  summary {
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: .2rem 0;
    list-style-position: outside;
  }
  summary:hover { color: var(--gedempt); }
  details > *:not(summary) { margin-top: .8rem; }
  details[open] > summary { margin-bottom: .2rem; }

  .adres { color: var(--gedempt); margin: 0 0 .1rem; }

  .rollen { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
  .rollen li {
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: var(--radius);
    padding: .1rem .5rem;
    font-size: .85rem;
    font-weight: 600;
  }
  /* In donkere modus leest de clubaccentkleur vaak te weinig contrast als
     tekst of rand op de donkere pagina zelf (zie kleur.js: die kleur is enkel
     tegen wit getoetst, met opzet). Als achtergrond, met de apart berekende
     leesbare tekstkleur (--accent-tekst-op-vlak, gezet vanuit /api/branding),
     blijft het wel altijd leesbaar. */
  [data-modus="donker"] .rollen li {
    background: var(--accent);
    color: var(--accent-tekst-op-vlak, #ffffff);
    border-color: transparent;
  }
  @media (prefers-color-scheme: dark) {
    [data-modus="systeem"] .rollen li {
      background: var(--accent);
      color: var(--accent-tekst-op-vlak, #ffffff);
      border-color: transparent;
    }
  }

  /* Blokken bij Zaalbeheer (T17): per weekdag gegroepeerd, elk blok een los
     blokje in plaats van één regel doorlopende, komma-gescheiden tekst.
     Bewust neutrale kleuren, geen accentkleur — dit is roosterinformatie,
     geen rolbadge, en --vlak/--lijn zijn al zonder extra werk donker-veilig. */
  .dagblokken { display: flex; align-items: baseline; gap: .5rem; margin: .3rem 0; flex-wrap: wrap; }
  .dagblokken-label { font-size: .82rem; color: var(--gedempt); min-width: 5.5rem; }
  .blokjes { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
  .blokjes li {
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: .1rem .5rem;
    font-size: .82rem;
    white-space: nowrap;
  }
  .blokjes li button { margin-left: .3rem; }

  table { width: 100%; border-collapse: collapse; font-size: .92rem; }
  th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--lijn); }
  th { font-weight: 600; color: var(--gedempt); font-size: .82rem; }
  td.ploegen { color: var(--gedempt); }

  form { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 0; }
  input, select {
    background: var(--achtergrond);
    color: var(--inkt);
  }
  input[type=email] {
    flex: 1 1 16rem;
    padding: .55rem .7rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    font: inherit;
  }
  input[type=email]:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  button {
    padding: .55rem 1rem;
    border: 1px solid var(--inkt);
    background: var(--inkt);
    color: var(--achtergrond);
    border-radius: var(--radius);
    font: inherit;
    cursor: pointer;
  }
  button.stil { background: var(--achtergrond); color: var(--inkt); }

  .melding { padding: .7rem .85rem; border-radius: var(--radius); background: var(--vlak); margin-top: 1rem; white-space: pre-line; }
  .melding.fout { background: var(--fout-vlak); border-left: 3px solid var(--accent); }
  .melding p { margin: 0 0 .5rem; }
  .melding p:last-child { margin-bottom: 0; }
  .melding button { margin-top: .3rem; }

  .logovoorbeeld {
    max-height: 5rem;
    max-width: 12rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: .5rem;
  }

  input[type=color] {
    width: 2.6rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    vertical-align: middle;
    cursor: pointer;
  }

  pre {
    background: var(--vlak);
    padding: .8rem;
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: .8rem;
    line-height: 1.45;
    max-height: 28rem;
  }
  input[type=text] {
    flex: 1 1 16rem;
    padding: .55rem .7rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    font: inherit;
  }
  .klein { font-size: .82rem; color: var(--gedempt); margin: .4rem 0 0; }
  .veld { display: block; margin: .5rem 0; }
  .veld span { display: block; font-size: .82rem; color: var(--gedempt); }
  .veld input {
    width: 100%;
    padding: .45rem .6rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    font: inherit;
  }

  button.alslink {
    background: none;
    border: none;
    color: var(--inkt);
    padding: 0;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--lijn); color: var(--gedempt); font-size: .82rem; }
  [hidden] { display: none !important; }

/* Navigatie */
nav { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1.25rem 0 1.75rem; }
nav button {
  background: none;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--gedempt);
  padding: .4rem .7rem;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
}
nav button[aria-current='true'] {
  color: var(--inkt);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Balk die toont dat je met een andere rol kijkt. Permanent zichtbaar: zonder
   die stand vergeet je het en meld je een fout die er niet is. */
.testbalk {
  background: var(--accent);
  color: #fff;
  padding: .45rem .8rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  font-size: .9rem;
}
.testbalk button {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
  padding: .2rem .6rem;
  font-size: .85rem;
}

/* Het meldingenbolletje (0.28.0): een badge bovenop de naamknop, zoals een
   bolletje op een app-icoon. Geen apart element in de strook — dat brak in
   YOAssist af bij een lange naam. */
.berichtenbadge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  background: #b4231f;
  color: #ffffff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--topbalk-achtergrond, #12161c);
}

/* Belangrijk nieuws, bovenaan bij wie tot de doelgroep hoort. */
.mededeling {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  flex-wrap: wrap;
  background: #fdf4e0;
  color: #17191c;
  border: 1px solid #f0dcae;
  border-radius: var(--radius);
  padding: .7rem .9rem;
  margin: 0 0 1rem;
  font-size: .92rem;
}
.mededeling a { color: #8a5d00; font-weight: 600; }
.sluit-klein {
  margin-left: auto;
  background: none;
  border: 0;
  color: inherit;
  opacity: .6;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 .2rem;
}
.sluit-klein:hover { opacity: 1; }

/* Mijn berichten */
.bericht {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  margin: .5rem 0;
  cursor: pointer;
}
.bericht.ongelezen { background: var(--vlak); border-color: #e8a317; }
.bericht-kop { display: flex; align-items: baseline; gap: .5rem; }
.bericht-tijd { margin: 0 0 0 auto; white-space: nowrap; }
.bericht-stip { width: 8px; height: 8px; border-radius: 999px; background: #e8a317; flex-shrink: 0; align-self: center; }
.bericht-kort { margin: .25rem 0 0; }
.bericht-volledig { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bericht-meer { margin: .3rem 0 0; text-decoration: underline; }
.bericht-weg { font-size: 1.1rem; text-decoration: none; opacity: .5; }

textarea {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  font: inherit;
  background: var(--achtergrond);
  color: var(--inkt);
}
.vinkje { display: flex; gap: .4rem; align-items: center; margin: .5rem 0; font-size: .92rem; }

/* Module Officials (0.38.0): het scherm Aanduidingen, zoals in YOAssist —
   een kaart per wedstrijd met de datum links, en de rand die zegt wat je
   antwoordde. Enkel de bestaande kleurvariabelen, zodat donker vanzelf werkt. */
.teller { padding: .6rem .8rem; border-radius: var(--radius); background: var(--vlak); }
.teller.open b { color: #b45309; font-size: 1.2rem; }
.teller.klaar b { color: #15803d; }
.aantal { font-size: .8rem; color: var(--gedempt); font-weight: normal; }
.dag-kop { margin: 1rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gedempt); }
.wed { display: flex; gap: .8rem; padding: .7rem; margin: .5rem 0; border: 1px solid var(--lijn);
  border-left: 4px solid var(--lijn); border-radius: var(--radius); }
.wed[data-status="ja"] { border-left-color: #16a34a; }
.wed[data-status="nee"] { border-left-color: #9ca3af; }
.wed[data-toegewezen="1"] { border-left-color: #2563eb; }
.wed-datum { display: flex; flex-direction: column; align-items: center; min-width: 3rem; font-size: .8rem; color: var(--gedempt); }
.wed-datum b { font-size: 1.4rem; color: var(--inkt); line-height: 1.1; }
.wed-lijf { flex: 1; min-width: 0; }
.wed-ploegen { overflow-wrap: anywhere; }
.wed-meta a { color: inherit; }
.uitslag, .forfait-label, .cat { font-size: .78rem; padding: 0 .35rem; border-radius: 4px; background: var(--vlak); border: 1px solid var(--lijn); margin-left: .3rem; }
.forfait-label { border-color: #b45309; }
.wed-refs { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: .4rem 0; font-size: .88rem; }
.vbl-regel { width: 100%; color: var(--gedempt); }
.ref-plaats { padding: .1rem .45rem; border-radius: 4px; border: 1px solid var(--lijn); }
.ref-plaats.leeg { border-style: dashed; color: var(--gedempt); }
.ref-plaats.ik { font-weight: 600; }
.ref-nr { font-size: .72rem; margin-right: .3rem; color: var(--gedempt); }
.wed-acties { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
/* Klein en naast elkaar, en enkel de gekozen knop gevuld: zo zie je in één
   oogopslag wat je antwoordde. */
.wed-acties button { padding: .3rem .75rem; font-size: .88rem; width: auto; margin: 0; }
.keuze { background: transparent; color: var(--inkt); border: 1px solid var(--lijn); }
.keuze[data-keuze="ja"][aria-pressed="true"] { background: #16a34a; border-color: #16a34a; color: #fff; }
.keuze[data-keuze="nee"][aria-pressed="true"] { background: #6b7280; border-color: #6b7280; color: #fff; }
.aangeduid-merk { font-weight: 600; color: #2563eb; }
.gaat-niet-door { color: var(--gedempt); margin: .4rem 0 0; }
.maandblok { border-top: 1px solid var(--lijn); padding-top: .4rem; }

/* Cluboverzicht (0.39.0). Een kaart per wedstrijd, met links een kleur die
   zegt hoe het ervoor staat: aandacht nodig, compleet, of buiten de lijst. */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .4rem; margin: .5rem 0; }
.tegel { display: flex; flex-direction: column; align-items: flex-start; padding: .5rem .7rem; margin: 0;
  background: var(--vlak); color: var(--inkt); border: 1px solid var(--lijn); text-align: left; }
.tegel b { font-size: 1.3rem; }
.tegel span { font-size: .8rem; color: var(--gedempt); }
.tegel.let b { color: #b45309; }
.tegel[aria-pressed="true"] { border-color: var(--inkt); }
.ov { padding: .6rem .7rem; margin: .4rem 0; border: 1px solid var(--lijn); border-left: 4px solid var(--lijn); border-radius: var(--radius); }
.ov.probleem { border-left-color: #dc2626; }
.ov.compleet { border-left-color: #16a34a; }
.ov.buiten { opacity: .7; }
.ov.voorbij { background: var(--vlak); }
.ov-kop { overflow-wrap: anywhere; }
.ov-regel { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .3rem 0; }
.ov-label { min-width: 3.5rem; font-size: .75rem; text-transform: uppercase; color: var(--gedempt); }
.ov-actie { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.chip { display: inline-block; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--lijn);
  font-size: .85rem; background: var(--achtergrond); color: var(--inkt); margin: 0; width: auto; }
.chip.ja { border-color: #16a34a; }
.chip.nee { border-color: #9ca3af; color: var(--gedempt); }
.chip.geen { border-style: dashed; color: var(--gedempt); }
.chip.klik { cursor: pointer; }
button.mini { padding: .1rem .5rem; font-size: .8rem; width: auto; margin: 0; background: transparent; color: var(--inkt); border: 1px solid var(--lijn); }
.probleem-melding { padding: .4rem .6rem; margin: .3rem 0; border-left: 3px solid #dc2626; background: var(--vlak); }
.voorstel { padding: .6rem .8rem; border: 1px solid var(--lijn); border-radius: var(--radius); margin: .5rem 0; }