/*
 * Stijl van de app volgens het CORE design system. Mobile first: de basisregels zijn voor
 * de telefoon; vanaf 40rem (640px) en 64rem (1024px) komt er ruimte en indeling bij.
 * Kleuren, lettertypen en maten komen uit tokens.css.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: var(--font-tekst);
  font-size: var(--tekst-body);
  line-height: var(--regelafstand-lopend);
  letter-spacing: var(--spatiering);
  font-kerning: normal;
  overflow-wrap: break-word;
  overflow-x: hidden; /* nooit zijwaarts schuiven op een telefoon */
}
h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: var(--gewicht-kop);
  line-height: var(--regelafstand);
  letter-spacing: var(--spatiering);
  margin: 0 0 .6em;
}
h1 { font-size: var(--tekst-kop-1); }
h2 { font-size: var(--tekst-kop-2); }
h3 { font-size: var(--tekst-kop-3); }
.titel { font-family: var(--font-titel); font-weight: 500; font-size: var(--tekst-titel); line-height: 1; letter-spacing: 0; }
p { margin: 0 0 .8em; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--schaduw-focus); border-radius: var(--radius-klein); }
::selection { background: var(--kleur-accent); color: var(--core-zwart); }
img { max-width: 100%; height: auto; }
.zacht { color: var(--kleur-tekst-zacht); }
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Kop, menu en voet ─────────────────────────────────────────────── */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--kleur-lijn);
}
.logo { display: inline-flex; border-radius: var(--radius-pil); }
.logo svg { height: 1.75rem; width: auto; display: block; }
.menu-knop { margin: 0; min-height: 2.5rem; padding: 0 1rem; font-size: var(--tekst-klein); }
.site-header nav {
  flex-basis: 100%;
  display: flex; flex-direction: column;
}
/* Met JavaScript klapt het menu op mobiel in achter de menuknop. */
.js .site-header nav { display: none; }
.js .menu-knop[aria-expanded="true"] + nav { display: flex; }
.site-header nav a, .site-header nav button.link {
  display: block; padding: .8rem 0; border-top: 1px solid var(--kleur-lijn);
  font-weight: var(--gewicht-kop); font-size: var(--tekst-body); color: var(--kleur-tekst-zacht); text-decoration: none;
}
.site-header nav form { margin: 0; }
.site-header nav button.link { width: 100%; text-align: left; }
.site-header nav a[aria-current="page"] { color: var(--kleur-tekst); }
.site-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.5rem 1rem 5rem; margin-top: 2rem; /* ruimte onderaan voor de feedbackknop */
  border-top: 1px solid var(--kleur-lijn); color: var(--kleur-tekst-zacht); font-size: var(--tekst-klein);
}
.site-footer svg { height: 1.25rem; width: auto; }

main { max-width: var(--max-breedte); margin: 0 auto; padding: 1.5rem 1rem 2rem; }

/* ── Kaarten, lijsten en koppen ─────────────────────────────────────── */
.kaart {
  background: var(--kleur-vlak);
  border-radius: var(--radius-klein); padding: 1.25rem; margin-bottom: 1rem;
}
.kaart > h1:first-child, .kaart > h2:first-child { margin-top: 0; }
.kaart-kop, .paginakop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.kaart-kop h2 { margin: 0; font-size: var(--tekst-kop-3); }
.kaart-kop .knop, .paginakop .knop { margin-top: 0; }
.paginakop { margin-bottom: 1rem; }
.paginakop h1 { margin: 0; }
.labels { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--kleur-lijn);
}
.lijst li:last-child { border-bottom: 0; }
.lijst form { margin: 0; flex-shrink: 0; }
.knoppenrij { display: flex; flex-wrap: wrap; gap: .5rem; }
.knoppenrij button { margin-top: 0; }

/* Gegevens (label + waarde): onder elkaar op mobiel, naast elkaar vanaf 40rem */
table.gegevens, table.gegevens tbody, table.gegevens tr, table.gegevens th, table.gegevens td { display: block; }
table.gegevens th { padding: .8rem 0 .1rem; border: 0; }
table.gegevens td { padding: 0 0 .8rem; }

/* ── Formulieren ────────────────────────────────────────────────────── */
label { display: block; font-weight: var(--gewicht-kop); font-size: var(--tekst-klein); margin: 1.1rem 0 .4rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], input[type=file], textarea, select {
  width: 100%; min-height: 3rem; padding: .7rem 1rem;
  font: inherit; font-size: max(16px, 1rem); /* 16px voorkomt inzoomen op iPhone */
  letter-spacing: inherit; color: var(--kleur-tekst);
  border: 1px solid var(--kleur-lijn); border-radius: var(--radius-klein); background: var(--core-wit);
  transition: border-color var(--overgang);
}
input:hover, textarea:hover, select:hover { border-color: rgb(0 0 0 / 0.4); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--kleur-tekst); }
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--kleur-actie); flex-shrink: 0; }
label.vinkje { display: flex; align-items: center; gap: .6rem; font-weight: 500; font-size: var(--tekst-body); cursor: pointer; }
.helptekst { color: var(--kleur-tekst-zacht); font-size: var(--tekst-klein); margin: .35rem 0 0; }
.errorlist { color: var(--kleur-fout); list-style: none; padding: 0; margin: .35rem 0 0; font-size: var(--tekst-klein); font-weight: 500; }
.verplicht { color: var(--kleur-fout); }
fieldset.vraag { border: 1px solid var(--kleur-lijn); border-radius: var(--radius-klein); margin: 1rem 0; padding: 0 1rem 1rem; min-width: 0; }

/* Lange formulieren: velden in groepen, en een vaste rij met knoppen onderaan */
.veld { min-width: 0; }
.kop-klein { font-size: var(--tekst-kop-3); margin: 0 0 .25rem; }
.twee-kolommen { display: grid; gap: 0 1rem; }
.vinkjes-rij { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.gevaar-tekst { color: var(--kleur-fout); }
fieldset.vraag legend { font-weight: var(--gewicht-kop); font-size: var(--tekst-klein); padding: 0 .5rem; color: var(--kleur-tekst-zacht); }
.acties { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.acties button, .acties .knop { margin: 0; width: 100%; }

/* Link kopiëren */
.link-kopie { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 0; }
.link-kopie input { flex: 1 1 100%; min-height: 2.75rem; font-size: var(--tekst-klein); color: var(--kleur-tekst-zacht); background: var(--kleur-achtergrond); }
.link-kopie .knop, .link-kopie button { margin: 0; min-height: 2.75rem; flex: 1 1 auto; }

/* Werktijden */
.werkdagen { display: grid; gap: .5rem; margin-top: 1rem; }
.werkdag { border: 1px solid var(--kleur-lijn); border-radius: var(--radius-klein); margin: 0; padding: .75rem 1rem; min-width: 0; /* fieldset krimpt anders niet mee */ }
.werkdag .dagnaam { margin: 0 0 .6rem; }
.werkdag .tijden { display: flex; align-items: center; gap: .5rem; }
.werkdag .tijden input { flex: 1 1 0; min-width: 0; width: 0; padding-inline: .6rem; }
.werkdag details { margin-top: .6rem; }
.werkdag summary { cursor: pointer; font-size: var(--tekst-klein); color: var(--kleur-tekst-zacht); }
.werkdag details .tijden { margin-top: .5rem; }
.werkdag:has(input[data-aan]:not(:checked)) .tijden,
.werkdag:has(input[data-aan]:not(:checked)) details { opacity: .45; }

/* ── Knoppen: pil, zwart met crème ──────────────────────────────────── */
button, .knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; margin-top: 1.5rem; padding: 0 1.5rem;
  font: inherit; font-weight: var(--gewicht-kop); letter-spacing: var(--spatiering); text-decoration: none; cursor: pointer;
  background: var(--kleur-actie); color: var(--kleur-op-actie);
  border: 1px solid var(--kleur-actie); border-radius: var(--radius-pil);
  transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}
/* Op mobiel vullen hoofdknoppen in formulieren de hele breedte: makkelijk te raken met de duim. */
form > button[type=submit] { width: 100%; }
button:hover, .knop:hover { background: rgb(0 0 0 / 0.85); }
.knop.secundair, button.secundair { background: transparent; color: var(--kleur-tekst); border-color: rgb(0 0 0 / 0.4); }
.knop.secundair:hover, button.secundair:hover { border-color: var(--kleur-tekst); background: rgb(0 0 0 / 0.05); }
button.link {
  background: none; color: inherit; border: 0; min-height: 2.75rem; padding: 0; margin: 0; font-weight: 400;
  text-decoration: underline; text-underline-offset: .25em; width: auto;
}
button.link:hover { background: none; text-decoration-thickness: 2px; }
button.gevaar { background: var(--kleur-fout); border-color: var(--kleur-fout); color: var(--core-wit); }
button:disabled { opacity: .4; pointer-events: none; }
button[hidden] { display: none; }

/* ── Meldingen en tabellen ──────────────────────────────────────────── */
.melding {
  padding: .9rem 1.1rem; border-radius: var(--radius-klein); margin-bottom: 1rem;
  background: var(--kleur-vlak); border-left: 4px solid var(--kleur-lijn);
}
.melding.success { border-left-color: var(--kleur-succes); }
.melding.error { border-left-color: var(--kleur-fout); }
table { width: 100%; border-collapse: collapse; font-size: var(--tekst-klein); }
th, td { text-align: left; padding: .7rem .5rem .7rem 0; border-bottom: 1px solid var(--kleur-lijn); vertical-align: top; }
th { color: var(--kleur-tekst-zacht); font-weight: var(--gewicht-kop); }
.profielfoto { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.label { display: inline-block; padding: .15rem .6rem; border-radius: var(--radius-pil); font-size: .8rem; font-weight: var(--gewicht-kop); border: 1px solid var(--kleur-lijn); }
.label.nieuw { background: var(--kleur-accent); color: var(--core-zwart); border-color: var(--kleur-accent); }

/* ── Publieke pagina's ──────────────────────────────────────────────── */
.intro { display: grid; gap: 1rem; margin-bottom: 2rem; }
.intro .titel { margin: 0 0 .75rem; }
.intro p { color: var(--kleur-tekst-zacht); max-width: 28rem; }
.intro .knop { width: 100%; }
.bol { width: 5rem; height: auto; order: -1; animation: ademen 9s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes ademen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .bol { animation: none; } * { transition: none !important; } }

.trainer-kaart { display: flex; gap: 1rem; align-items: center; }
.trainer-kaart h1, .trainer-kaart h3 { margin: 0 0 .4rem; }
.trainer-kaart p:last-child { margin-bottom: 0; }
.keuze-kaart {
  display: flex; flex-direction: column; gap: .35rem; text-decoration: none;
  border: 1px solid transparent; transition: border-color var(--overgang);
}
.keuze-kaart strong { font-size: var(--tekst-kop-3); }
.keuze-kaart:hover { border-color: var(--kleur-tekst); }

.weeknavigatie { display: flex; justify-content: space-between; align-items: center; margin: 1.25rem 0 .75rem; gap: .5rem; font-size: var(--tekst-klein); }
.weeknavigatie a { font-weight: var(--gewicht-kop); display: inline-flex; min-height: 2.75rem; align-items: center; }
.weeknavigatie strong { text-align: center; }
.dag { margin: 0 0 1rem; font-size: var(--tekst-kop-3); }
.dag::first-letter { text-transform: uppercase; }

/* Tijdsloten: op mobiel een raster van gelijke knoppen */
.slots { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.slots li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.slots-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.slots-raster li, .slots-raster form { margin: 0; display: block; }
.slots-raster .slot { width: 100%; justify-content: center; }
.slot-tijd { font-weight: var(--gewicht-kop); min-width: 3.5rem; font-variant-numeric: tabular-nums; }
.slot, button.slot {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; margin: 0; padding: 0 1.1rem;
  background: transparent; color: var(--kleur-tekst); border: 1px solid rgb(0 0 0 / 0.4);
  border-radius: var(--radius-pil); text-decoration: none; font-weight: var(--gewicht-kop);
  font-variant-numeric: tabular-nums; transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}
.slot:hover, .slot:focus-visible, button.slot:hover { background: var(--kleur-actie); color: var(--kleur-op-actie); border-color: var(--kleur-actie); }

/* Tijdzone: op de achtergrond, alleen open als iemand wil wisselen */
.tijdzone { margin-top: 1rem; font-size: var(--tekst-klein); color: var(--kleur-tekst-zacht); }
.tijdzone summary { cursor: pointer; display: inline-block; padding: .25rem 0; }
.tijdzone summary::after { content: " · wijzigen"; text-decoration: underline; text-underline-offset: .25em; }
.tijdzone[open] summary::after { content: ""; }
.tijdzone label { font-weight: 400; margin: .5rem 0 .3rem; }
.tijdzone select { min-height: 2.75rem; }

/* Lessen en rooster */
.les-regel {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center;
  padding: .9rem 0; border-bottom: 1px solid var(--kleur-lijn); text-decoration: none;
}
.les-regel:last-of-type { border-bottom: 0; }
.les-regel:hover .les-naam { text-decoration: underline; }
.les-tijd { font-weight: var(--gewicht-kop); font-variant-numeric: tabular-nums; white-space: nowrap; }
.les-naam { grid-column: 1 / -1; grid-row: 2; }
.les-plekken {
  font-size: var(--tekst-klein); font-weight: var(--gewicht-kop); padding: .3rem .8rem;
  border: 1px solid var(--kleur-tekst); border-radius: var(--radius-pil); white-space: nowrap; justify-self: end;
}
.les-regel.vol { color: var(--kleur-tekst-zacht); }
.les-regel.vol .les-plekken { border-color: var(--kleur-lijn); }
.plekken { font-weight: var(--gewicht-kop); }
.plekken.vol { color: var(--kleur-fout); }
.filter-chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: .5rem; scrollbar-width: none; }
.filter-chips a {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem;
  border: 1px solid rgb(0 0 0 / 0.4); border-radius: var(--radius-pil);
  text-decoration: none; font-size: var(--tekst-klein); font-weight: var(--gewicht-kop); white-space: nowrap;
}
.filter-chips a[aria-current] { background: var(--kleur-actie); color: var(--kleur-op-actie); border-color: var(--kleur-actie); }
details.annuleren { margin-top: 1.5rem; }
details.annuleren summary { cursor: pointer; color: var(--kleur-fout); font-weight: var(--gewicht-kop); padding: .5rem 0; }

/* ── Dashboard ──────────────────────────────────────────────────────── */
.filters { display: grid; gap: .75rem; }
.filters label { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.filters button { margin: 0; }
.reeks { border-bottom: 1px solid var(--kleur-lijn); padding: 1rem 0; }
.reeks strong { display: block; }
.inline-form { display: grid; gap: .5rem; }
.inline-form label { margin: 0; font-weight: 400; }
.inline-form button { margin: 0; }

/* ── Feedback ───────────────────────────────────────────────────────── */
.feedback-knop {
  position: fixed; right: .75rem; bottom: .75rem; z-index: 10; margin: 0;
  min-height: 2.75rem; padding: 0 1rem; font-size: var(--tekst-klein); box-shadow: 0 4px 16px rgb(0 0 0 / .15);
}
dialog.feedback {
  width: min(32rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); padding: 0; border: 0;
  border-radius: var(--radius-klein); background: var(--kleur-vlak); color: var(--kleur-tekst);
}
dialog.feedback::backdrop { background: rgb(0 0 0 / .45); }
dialog.feedback header, dialog.feedback footer { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; }
dialog.feedback header { justify-content: space-between; border-bottom: 1px solid var(--kleur-lijn); }
dialog.feedback header h2 { margin: 0; font-size: var(--tekst-kop-3); }
dialog.feedback .sluiten { background: none; color: inherit; border: 0; margin: 0; padding: .25rem; min-height: 2.75rem; width: auto; }
.feedback-inhoud { padding: 0 1.25rem; }
.feedback-soorten { border: 0; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.feedback-soorten label {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; cursor: pointer;
  padding: .8rem .25rem; border: 1px solid var(--kleur-lijn); border-radius: var(--radius-klein);
  font-size: .8rem; text-align: center; color: var(--kleur-tekst-zacht);
}
.feedback-soorten input { position: absolute; opacity: 0; }
.feedback-soorten label:has(input:checked) { border-color: var(--kleur-tekst); color: var(--kleur-tekst); background: var(--kleur-achtergrond); }
.feedback-soorten label:has(input:focus-visible) { box-shadow: var(--schaduw-focus); }
.feedback-inhoud > label { text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; color: var(--kleur-tekst-zacht); }
.inspreken {
  display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: .5rem; margin: .4rem 0; padding: .6rem 1rem; min-height: 2.75rem;
  background: none; color: var(--kleur-tekst-zacht); font-weight: 400;
  border: 1px dashed var(--kleur-lijn); border-radius: var(--radius-klein);
}
.inspreken:hover { background: none; border-color: var(--kleur-tekst-zacht); }
.inspreken.actief { color: var(--kleur-fout); border-color: var(--kleur-fout); }
.feedback-contact { margin-top: .75rem; font-size: var(--tekst-klein); }
.feedback-contact summary { cursor: pointer; color: var(--kleur-tekst-zacht); }
.feedback-pagina { color: var(--kleur-tekst-zacht); font-size: .8rem; margin: .5rem 0 0; word-break: break-all; }
.feedback-status { min-height: 1.25rem; margin: .25rem 0 0; font-size: var(--tekst-klein); }
dialog.feedback footer { border-top: 1px solid var(--kleur-lijn); margin-top: .75rem; }
dialog.feedback footer button { flex: 1; margin: 0; }
.feedback-lijst .melding-kop { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }

/* Ingebed op de eigen website: geen eigen achtergrond en minder witruimte */
body.embed { background: transparent; }
body.embed main { padding-top: 0; padding-bottom: 4rem; }

/* ── Vanaf 40rem (640px): tablet en groter ──────────────────────────── */
@media (min-width: 40rem) {
  .site-header { padding: 1rem clamp(1rem, 0.4rem + 2.6vw, 3rem); }
  .logo svg { height: 2rem; }
  main { padding: 2rem 1.5rem 3rem; }
  .kaart { border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 1vw, 2rem); }
  .site-footer { padding: 1.5rem clamp(1rem, 0.4rem + 2.6vw, 3rem) 5rem; }
  form > button[type=submit] { width: auto; }
  .twee-kolommen { grid-template-columns: 1fr 1fr; }
  .acties { flex-direction: row; align-items: center; }
  .acties button, .acties .knop { width: auto; }
  .intro { grid-template-columns: 1fr auto; align-items: center; }
  .intro .knop { width: auto; }
  .bol { order: 0; width: clamp(8rem, 18vw, 11rem); }
  .profielfoto { width: 96px; height: 96px; }
  .link-kopie input { flex-basis: 14rem; }
  .link-kopie .knop, .link-kopie button { flex: 0 0 auto; }
  .les-regel { grid-template-columns: minmax(7rem, auto) 1fr auto; }
  .les-naam { grid-column: auto; grid-row: auto; }
  .filters { display: flex; flex-wrap: wrap; align-items: end; }
  .filters select, .filters input { width: auto; }
  .inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
  .inline-form input { width: auto; }
  .werkdag { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: .25rem 1rem; }
  .werkdag .dagnaam { margin: 0; }
  .werkdag details { grid-column: 2; margin-top: 0; }
  table.gegevens { display: table; }
  table.gegevens tbody { display: table-row-group; }
  table.gegevens tr { display: table-row; }
  table.gegevens th, table.gegevens td { display: table-cell; padding: .7rem .5rem .7rem 0; border-bottom: 1px solid var(--kleur-lijn); }
  table.gegevens th { width: 35%; }
  dialog.feedback { border-radius: var(--radius); }
  .feedback-knop { right: 1rem; bottom: 1rem; }
}

/* ── Vanaf 64rem (1024px): desktop, menu naast het logo ─────────────── */
@media (min-width: 64rem) {
  .menu-knop { display: none; }
  .site-header nav, .js .site-header nav { display: flex; flex-direction: row; flex-basis: auto; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }
  .site-header nav a, .site-header nav button.link {
    padding: .25rem 0; border: 0; font-size: var(--tekst-klein); min-height: 0;
    transition: color var(--overgang);
  }
  .site-header nav a:hover { color: var(--kleur-tekst); }
  .site-header nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .5em; }
}
.kaart form + p { margin-top: 1.25rem; }