/* =========================================================================
   27 Moments portaal, de opmaak van het onderdeel rsvp

   Sinds september 2026 (docs/vereenvoudiging-2026-09.md) is dit scherm de
   lijst met antwoorden en niets anders: de tellers, de toolbar, de tabel
   met per gezelschap een rij en per persoon per moment een vinkje, en drie
   vensters (het volledige antwoord, bewerken, overnemen, herinneren). De
   rs-klassen hieronder horen bij sites/js/modules/rsvp.js.

   DE WA-KLASSEN STONDEN HIER OOK, EN ZIJN WEG. Ze kwamen uit
   css/mod-uitnodigingen.css en werden gebruikt door dit scherm,
   dagcommunicatie.js en cadeaus.js. Sinds september 2026 vertrekt elk
   WhatsApp-bericht vanuit het onderdeel Communicatie, met zijn eigen
   com-klassen in css/mod-communicatie.css: dagcommunicatie.js bestaat niet
   meer, en op dit scherm en op de cadeaulijst is er geen wa-klasse over.
   Driehonderd regels die niets meer opmaakten, zijn dus verdwenen.

   Geen eigen lettertype en geen eigen kleuren: alles komt uit de --m27-*
   tokens en de bouwstenen van portaal.css (.kaart, .tabelhoes, .leeg,
   .veld, .modal__acties).
   ========================================================================= */

/* ------------------------------- de tellers ---------------------------- */

/* Een rij getallen, geen kaart per getal. De eerste drie komen van de
   server, daarna een per moment; het raster vult zich naar de breedte. */
.rs-tellers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  align-items: start;
  padding: 10px 4px;
}

.rs-teller {
  text-align: center;
  padding: 2px 6px;
  min-width: 0;
  border-left: 1px solid #efece6;
}

.rs-teller:first-child { border-left: 0; }

.rs-teller strong {
  display: block;
  font-family: var(--m27-font-titel);
  font-size: 22px;
  font-weight: 400;
  color: var(--m27-donkergroen);
  line-height: 1.2;
}

.rs-teller span {
  display: block;
  font-size: 10.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #8a857e;
  overflow-wrap: anywhere;
}

.rs-teller small {
  display: block;
  font-size: 10.5px;
  color: #b3aea6;
}

.rs-teller--moment strong { color: var(--m27-paars); }

/* ------------------------------- de toolbar ---------------------------- */

/* Zoekveld links, de filters erna, de acties rechts: dezelfde rij als op
   elke lijst van het portaal. */
.rs-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.rs-zoek {
  flex: 1 1 160px;
  max-width: 280px;
  min-width: 0;
  padding: 9px 16px;
  border: 1.5px solid #dad5cd;
  border-radius: var(--m27-radius-pill);
  font: inherit;
  font-weight: 300;
  font-size: 14px;
  background: #fff;
  color: var(--m27-tekst);
}
.rs-zoek:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

.rs-keuze {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #8a857e;
}

.rs-keuze select {
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  color: var(--m27-tekst);
  padding: 7px 12px;
  border: 1.5px solid #dad5cd;
  border-radius: 10px;
  background: #fff;
  max-width: 180px;
}
.rs-keuze select:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

.rs-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

/* -------------------------------- de tabel ----------------------------- */

.rs-tabelhoes th,
.rs-tabelhoes td { padding: 9px 10px; }

.rs-th-moment { text-align: center; }
.rs-th-actie { width: 1%; }

/* Tekst die er wel is voor een schermlezer, en niet in beeld. */
.rs-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rs-cel { overflow-wrap: anywhere; }

.rs-cel--naam strong {
  display: block;
  font-weight: 400;
  color: var(--m27-tekst);
}

.rs-cel--naam small {
  display: block;
  font-size: 12px;
  color: #8a857e;
  margin-top: 1px;
}

.rs-cel--komen { white-space: nowrap; color: var(--m27-tekst); }

/* Per persoon een vinkje, in de volgorde van de namen onder het gezelschap.
   Ja is groen, nee is bleek: wie de kolom van boven naar onder leest zoekt
   wie er wel is. */
.rs-cel--moment {
  display: flex;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
}

.rs-vink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.rs-vink--ja { background: var(--m27-lichtgroen); color: var(--m27-donkergroen); }
.rs-vink--nee { background: #f4f1ec; color: #b3aea6; }
.rs-vink--leeg { color: #b3aea6; }

.rs-leeg { color: #b3aea6; }

/* De status: komt, komt niet, geen antwoord, niet op de lijst. */
.rs-pil {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .4px;
  padding: 3px 10px;
  border-radius: var(--m27-radius-pill);
  white-space: nowrap;
}
.rs-pil--ja { background: var(--m27-lichtgroen); color: var(--m27-donkergroen); }
.rs-pil--nee { background: #f3ded9; color: #a4432f; }
.rs-pil--geen { background: #f4f1ec; color: #8a857e; }
.rs-pil--los { background: #f3ead5; color: #8a6d2f; }

.rs-cel--actie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

/* Het pijltje naar het volledige antwoord: een icoonknop in een dichte
   rij, dus 44 en niet 48 op telefoon (docs/portaal-standaard.md). */
.rs-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1.5px solid #e4dfd7;
  border-radius: 10px;
  background: #fff;
  color: var(--m27-paars);
  cursor: pointer;
  padding: 0;
}
.rs-chevron svg { width: 18px; height: 18px; }
.rs-chevron:hover { border-color: var(--m27-lila); background: rgba(194, 177, 215, 0.12); }
.rs-chevron:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

.rs-leegrij td {
  text-align: center;
  color: #8a857e;
  padding: 26px;
}
.rs-leegrij .m27-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

/* --------------------------- het volledige antwoord -------------------- */

.rs-detail__meta {
  font-size: 13px;
  color: #8a857e;
  margin: -8px 0 12px;
  overflow-wrap: anywhere;
}

.rs-detail__stand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.rs-detail__tijd { font-size: 12.5px; color: #8a857e; }

.rs-detail__personen {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.rs-detail__persoon {
  font-size: 14px;
  line-height: 1.5;
  padding: 7px 0;
  border-top: 1px solid #f4f1ec;
}
.rs-detail__persoon:first-child { border-top: 0; }
.rs-detail__persoon strong { font-weight: 400; }
.rs-detail__persoon--niet { color: #a8a29a; }
.rs-detail__delen { color: #7c776f; }

.rs-detail__veld {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.rs-detail__veld span {
  display: block;
  font-size: 10.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #8a857e;
}

/* De antwoorden op de eigen vragen: de vraag klein erboven, het antwoord in
   de leeskleur eronder. */
.rs-vraagantwoorden {
  list-style: none;
  margin: 4px 0 10px;
  padding: 0;
}
.rs-vraagantwoorden li {
  font-size: 13px;
  line-height: 1.45;
  padding: 2px 0;
}
.rs-vraagtekst {
  display: block;
  font-size: 10.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #8a857e;
}
.rs-vraagwaarde {
  display: block;
  color: var(--m27-tekst);
  overflow-wrap: anywhere;
}

/* De vorige versies van hetzelfde gezelschap, dichtgeklapt. Ze blijven
   leesbaar: die gast heeft dat antwoord wel degelijk gegeven, het geldt
   alleen niet meer. */
.rs-eerder { margin: 4px 0 8px; }
.rs-eerder summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--m27-paars);
  min-height: 28px;
  display: flex;
  align-items: center;
}
.rs-eerder summary:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; border-radius: 6px; }
.rs-eerder__rij {
  margin-top: 6px;
  padding: 8px 12px;
  background: #f8f6f2;
  border-radius: 10px;
  font-size: 13px;
}
.rs-eerder__rij .rs-detail__personen { margin-bottom: 0; }
.rs-eerder__rij .rs-detail__persoon { font-size: 13px; padding: 4px 0; }
.rs-eerder__tijd { display: block; color: #8a857e; font-size: 12px; }
.rs-eerder__bericht { margin: 6px 0 0; color: #7c776f; overflow-wrap: anywhere; }

/* ------------------------------- bewerken ------------------------------ */

.rs-bewerk .uitleg { font-size: 13px; color: #7c776f; margin: -6px 0 14px; }

.rs-bewerk__persoon {
  border: 1px solid #efece6;
  border-radius: var(--m27-radius-kaart);
  padding: 12px 14px;
  margin: 0 0 10px;
}

.rs-bewerk__komt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  cursor: pointer;
  min-height: 32px;
}
.rs-bewerk__komt input { accent-color: var(--m27-donkergroen); width: 18px; height: 18px; flex: none; }
.rs-bewerk__komt strong { font-weight: 400; }

/* De momenten als chips die je aan- en uitzet. */
.rs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}

.rs-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1.5px solid #dad5cd;
  border-radius: var(--m27-radius-pill);
  font-size: 13px;
  color: #7c776f;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.rs-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.rs-chip:has(input:checked) {
  background: var(--m27-lichtgroen);
  color: var(--m27-donkergroen);
  border-color: transparent;
}
.rs-chip:has(input:checked)::before { content: "\2713\00a0"; }
.rs-chip:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.rs-chip:has(input:focus-visible) { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

.rs-bewerk__persoon .veld { margin: 8px 0 0; }
.rs-bewerk__gezelschap { margin-top: 4px; }

.rs-fout {
  font-size: 13.5px;
  color: #8a6d2f;
  background: #f8f2e2;
  border: 1px solid #ecdcb8;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 0;
}
.rs-fout[hidden] { display: none; }

.rs-overnemen .uitleg,
.rs-herinner .uitleg { font-size: 13px; color: #7c776f; margin: -6px 0 14px; }

/* Het vinkje in de herinnerlijst: wij versturen naar wie aangevinkt staat. */
.rs-herinner__vink { flex: none; accent-color: var(--m27-donkergroen); width: 18px; height: 18px; }

/* --------------------------------- telefoon ---------------------------- */

@media (max-width: 768px) {
  .rs-tellers { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 2px; gap: 6px 0; }
  .rs-teller { padding: 2px 3px; }
  .rs-teller:nth-child(3n + 1) { border-left: 0; }
  .rs-teller strong { font-size: 18px; }
  .rs-teller span { font-size: 9px; letter-spacing: 0.2px; }
  .rs-teller small { font-size: 9px; }

  .rs-balk { gap: 8px; }
  .rs-zoek { flex: 1 1 100%; max-width: none; min-height: 48px; font-size: 16px; }
  .rs-keuze { flex: 1 1 45%; min-width: 140px; justify-content: space-between; }
  .rs-keuze select { flex: 1 1 auto; min-width: 0; max-width: none; min-height: 44px; font-size: 16px; }
  .rs-acties { flex: 1 1 100%; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rs-acties .m27-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
  .rs-acties .m27-btn:only-child { grid-column: 1 / -1; }

  /* Dezelfde rijen als kaartjes: de kop verdwijnt, elke cel toont haar
     label. Zo kan er op telefoon nooit een kolom ontbreken. */
  .rs-tabelhoes { overflow: visible; }
  .rs-tabelhoes table, .rs-tabelhoes tbody, .rs-tabelhoes tr, .rs-tabelhoes td { display: block; width: auto; }
  .rs-tabelhoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rs-tabelhoes tr {
    position: relative;
    background: #fff;
    border: 1px solid #efece6;
    border-radius: var(--m27-radius-kaart);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .rs-tabelhoes tbody tr:hover td { background: none; }
  .rs-tabelhoes td {
    border-bottom: 1px solid #f4f1ec;
    padding: 7px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
  }
  .rs-tabelhoes td::before {
    content: attr(data-label);
    flex: none;
    width: 96px;
    font-size: 10.5px;
    letter-spacing: var(--m27-ls-label);
    text-transform: uppercase;
    color: #8a857e;
  }
  .rs-tabelhoes td > * { flex: 1 1 auto; min-width: 0; }
  .rs-tabelhoes td.rs-td-actie { border-bottom: 0; padding-top: 10px; }
  .rs-tabelhoes td.rs-td-actie::before { display: none; }
  .rs-cel--moment { justify-content: flex-start; }
  .rs-cel--actie .m27-btn { flex: 1 1 auto; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .rs-chevron { width: 44px; height: 44px; flex: none; }
  .rs-tabelhoes .rs-leegrij td { display: block; }
  .rs-tabelhoes .rs-leegrij td::before { display: none; }

  .rs-chip { min-height: 44px; }
  .rs-bewerk__komt { min-height: 48px; }
  .rs-eerder summary { min-height: 48px; }
}