/* ============================================================
   Soluna Agenda — de schermen van deze applicatie

   De grote app heeft screens.css: 63 kB voor drieëntwintig schermen. Die is niet
   meegekomen, want hier zijn er vijf en negentig procent daarvan zou dode regels
   zijn die wél elke eerste weergave vertragen.

   tokens.css, base.css en components.css komen wél mee: dat zijn de kleuren, het
   ritme en de knoppen, en die horen er in beide hetzelfde uit te zien.
   ============================================================ */

/* ---------- De schil ---------- */

.outlet { padding-bottom: calc(var(--safe-bottom) + 72px); }

.screen--smal { max-width: 34rem; margin-inline: auto; }

/* Een scherm met de vaste balk onderin heeft ruimte nodig die die balk niet
   afdekt — anders staat de reserveerknop over de laatste regel tekst heen. */
.screen--met-balk { padding-bottom: calc(var(--safe-bottom) + 104px); }

.agenda__head { padding-top: calc(var(--safe-top) + var(--sp-6)); }
.agenda__head .lede { margin-top: var(--sp-3); max-width: 42ch; }

/* ---------- De tabbalk ---------- */

.tabbalk {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--gutter) calc(var(--safe-bottom) + var(--sp-2));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-top: 1px solid var(--line);
  /* Achter de balk blijft de pagina zichtbaar doorschemeren. Valt backdrop-filter
     weg, dan is de achtergrond hierboven dekkend genoeg om leesbaar te blijven. */
  backdrop-filter: blur(12px);
}

.tab {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-decoration: none;
  /* 44 px aanraakvlak, ook als het label kort is. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.tab--actief { background: var(--bg-elevated); color: var(--text); font-weight: 500; }

/* De maan is één beeld. Een balk met tabbladen eroverheen maakt er een pagina
   van, en dan is het gebaar weg. */
body.is-immersief .tabbalk { display: none; }
body.is-immersief .outlet { padding-bottom: 0; }

/* ---------- De agenda ---------- */

.agenda__lijst { margin-top: var(--sp-6); }
.agenda__maand + .agenda__maand { margin-top: var(--sp-8); }

.leskaart {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4);
  margin-top: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  /* Zonder dit houdt iOS de tweede tik binnen 300 ms tegen om op dubbeltikzoom te
     controleren, en verdwijnt een snelle tweede tik op een andere kaart. */
  touch-action: manipulation;
}

.leskaart__wanneer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: var(--sp-2) 0;
  border-radius: var(--r-md);
  background: var(--bg);
}
.leskaart__dag {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.leskaart__weekdag {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: lowercase;
}

.leskaart__inhoud { flex: 1 1 auto; min-width: 0; }
.leskaart__titel { font-size: var(--fs-md); font-weight: 500; }
.leskaart__thema {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.leskaart__regel {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.leskaart__punt { margin-inline: 6px; color: var(--text-tertiary); }

.leskaart__staat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}
.leskaart__vrij { color: var(--text-secondary); }
.leskaart__vol { color: var(--text-tertiary); }
.leskaart__mijn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--terra-600);
  font-weight: 500;
}
/* Nooit afbreken: '€' en '22,50' op twee regels leest als twee getallen. De
   status links mag wél wijken — die is een zin en geen bedrag. */
.leskaart__prijs {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
.leskaart__vrij,
.leskaart__vol,
.leskaart__mijn { min-width: 0; }

@media (prefers-color-scheme: dark) {
  .leskaart__mijn { color: var(--accent); }
}

/* ---------- Eén les ---------- */

.terugbalk { padding-top: calc(var(--safe-top) + var(--sp-2)); }
.les__head { padding-top: var(--sp-4); }
.les__thema { font-size: var(--fs-sm); color: var(--text-secondary); }
.les__head .lede { margin-top: var(--sp-2); }
.les__kop { font-size: var(--fs-md); font-weight: 500; margin-bottom: var(--sp-3); }

.detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
}
.detail-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.detail-row__icon { color: var(--text-tertiary); line-height: 0; padding-top: 2px; }
.detail-row__value { font-size: var(--fs-sm); }
.detail-row__label { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }

/* Overgenomen uit screens.css van de grote app: 'Inbegrepen' is de enige plek
   hier die een opsomming toont, en zonder deze regels staan de bolletjes er
   niet — dan leest het als drie losse zinnen onder elkaar. */
.bullet-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.55;
}
.bullet__mark {
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--clay-400);
}

/* ---------- De balk onderin ---------- */

.action-bar {
  position: fixed;
  inset-inline: 0;
  /* Boven de tabbalk, niet eroverheen. */
  bottom: calc(var(--safe-bottom) + 64px);
  z-index: 15;
  padding: var(--sp-3) var(--gutter);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.action-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 34rem;
  margin-inline: auto;
}
/* Niet laten afbreken: '€' en '22,50' op twee regels leest als twee getallen. */
.action-bar__prijs { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.action-bar__bedrag { font-size: var(--fs-md); font-weight: 500; font-variant-numeric: tabular-nums; }
.action-bar__eenheid { font-size: var(--fs-xs); color: var(--text-tertiary); }
.action-bar .btn { flex: 1 1 auto; }

/* ---------- Mijn plekken ---------- */

.plekkaart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  margin-top: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.plekkaart__titel { font-size: var(--fs-md); font-weight: 500; }
.plekkaart__wanneer { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-secondary); }
.plekkaart__wachtlijst { margin-top: 4px; font-size: var(--fs-xs); color: var(--text-tertiary); }

/* ---------- Inloggen ---------- */

/* De ruimte onder de kop is geen smaak maar leesbaarheid.
   Zonder deze regel plakt het eerste veldlabel (E-MAILADRES) tegen de laatste
   regel van de uitleg aan, en dan lijkt dat label bij de zin te horen in plaats
   van bij het invoerveld. Op de agenda valt het niet op omdat daar een kaart
   volgt; hier volgt een formulier en is de afstand het enige dat de twee uit
   elkaar houdt. */
.login__head { padding-top: calc(var(--safe-top) + var(--sp-8)); margin-bottom: var(--sp-6); }
.login__head .lede { margin-top: var(--sp-3); max-width: 38ch; }
.login__melding { min-height: 1.6em; margin-top: var(--sp-3); }
.login__fout { font-size: var(--fs-sm); color: var(--terra-600); }
.login__wissel { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.login__voet { margin-top: var(--sp-8); text-align: center; }

@media (prefers-color-scheme: dark) {
  .login__fout { color: var(--accent); }
}

/* Dezelfde kleur als .login__fout, inclusief de omslag in het donker: een
   foutmelding hoort er overal in de app hetzelfde uit te zien. */
.field__hint--fout { font-size: var(--fs-sm); color: var(--terra-600); }
@media (prefers-color-scheme: dark) {
  .field__hint--fout { color: var(--accent); }
}

/* ---------- Beheer ---------- */

.beheerrij {
  margin-top: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* Een afgezegde les is dof, maar niet onleesbaar: je moet hem nog kunnen
   terugvinden om hem weer aan te zetten. */
.beheerrij--cancelled { opacity: 0.65; }

.beheerrij__knop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: var(--sp-4);
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.beheerrij__titel { font-size: var(--fs-md); font-weight: 500; }
.beheerrij__wanneer { font-size: var(--fs-sm); color: var(--text-secondary); }
.beheerrij__staat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.beheerrij__tellers { font-variant-numeric: tabular-nums; }
.beheerrij__prijs { margin-left: auto; font-variant-numeric: tabular-nums; }

.beheerrij__acties {
  display: flex;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}

.staatje {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--line);
}
.staatje--published { color: var(--terra-600); border-color: currentColor; }
.staatje--cancelled { text-decoration: line-through; }

@media (prefers-color-scheme: dark) {
  .staatje--published { color: var(--accent); }
}

/* ---------- Deelnemers ---------- */

.deelnemer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg);
}
.deelnemer__naam { font-size: var(--fs-sm); }
.deelnemer__contact { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.deelnemer__gast {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}