/* =========================================================================
   27 Moments Portaal, stijlen van mod-gastenlijst
   Geladen door sites/index.html. Alleen --m27-* tokens gebruiken.

   Sinds september 2026 (docs/vereenvoudiging-2026-09.md) is de lijst een
   persoon per rij, gegroepeerd per gezelschap. De opbouw van het scherm:

   1. .gl-balk       een rij: zoekveld links, de filters (groep met een
                     potlood, moment, contact), de acties rechts.
   2. de lijst       tabel op een groot scherm, kaartjes op telefoon. De
                     eerste persoon van een gezelschap draagt de link en de
                     WhatsApp-schakelaar; de anderen staan ingesprongen.
   3. het venster    van een gast: twee velden per regel, de momenten als
                     vinkjes, het zoekveld "wie hoort erbij", de link.
   4. de groepen     het beheervenster achter het potlood.
   5. telefoon       dezelfde rijen als kaartjes.

   Het scherm RSVP leent hier sinds september 2026 niets meer: het draagt
   zijn eigen rs-klassen (sites/css/mod-rsvp.css). De tellerrij, de keuze
   .gl-rsvp-keuze en het bewerken in de cel (.gl-cel met zijn hover, zijn
   focus en zijn bewaaranimatie) zijn daarmee weg. Wat van .gl-cel overblijft
   zijn de drie modifiers die deze lijst zelf op vaste cellen zet:
   --leeg, --erft en --geen.
   ========================================================================= */

/* =========================================================================
   1. De balk
   ========================================================================= */

.gl-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.gl-zoek {
  flex: 1 1 200px;
  max-width: 300px;
  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);
}

.gl-zoek:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
}

/* Een filter: een klein opschrift en een keuzelijst. */
.gl-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #8a857e;
}

.gl-filter 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: 200px;
}

.gl-filter select:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
}

/* Het potlood naast het groepsfilter: instellen mag verstopt, gebruiken
   niet. Even groot als de icoonknoppen in de lijst. */
.gl-potlood {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  margin-left: -6px;
  border: 1.5px solid #e4dfd7;
  border-radius: 10px;
  background: #fff;
  color: var(--m27-paars);
  cursor: pointer;
  padding: 0;
}

.gl-potlood svg {
  width: 16px;
  height: 16px;
}

.gl-potlood:hover {
  border-color: var(--m27-lila);
  background: rgba(194, 177, 215, 0.12);
}

.gl-potlood:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
}

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

/* =========================================================================
   2. De lijst
   ========================================================================= */

.gl-tabelhoes th,
.gl-tabelhoes td {
  padding: 8px 9px;
}

/* De naam is de kop van de rij; een kind krijgt een klein merkteken. */
.gl-naam {
  font-weight: 400;
}

.gl-kind {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: var(--m27-radius-pill);
  background: var(--m27-lila);
  color: var(--m27-tekst);
  vertical-align: 2px;
}

/* De volgende personen van een gezelschap staan ingesprongen, met een
   klein hoekje dat zegt: dit hoort bij de rij erboven. */
.gl-rij--volgend td[data-veld="naam"] {
  padding-left: 30px;
  position: relative;
}

.gl-rij--volgend td[data-veld="naam"]::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  width: 10px;
  height: 55%;
  border-left: 1.5px solid #dad5cd;
  border-bottom: 1.5px solid #dad5cd;
  border-bottom-left-radius: 6px;
}

/* Tussen twee gezelschappen een iets dikkere lijn dan tussen de personen
   van een gezelschap, zodat je de groepjes ziet zonder te lezen. */
.gl-tabelhoes tbody tr.gl-rij--eerste td {
  border-top: 1px solid #e6e1d8;
}

.gl-tabelhoes tbody tr.gl-rij--eerste:first-child td {
  border-top: 0;
}

.gl-tabelhoes tbody tr.gl-rij--volgend td {
  border-bottom-color: #f4f1ec;
}

/* Een rij die nog onderweg is naar de server. */
.gl-rij--wacht td {
  opacity: 0.55;
}

.gl-cel--leeg {
  color: #b3aea6;
}

/* De momenten als rustige chips: hoogstens twee, dan een chip met drie
   puntjes en de volledige lijst als title op de cel. */
.gl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gl-chip {
  font-family: var(--m27-font-tekst);
  font-size: 10.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--m27-radius-pill);
  border: 1.5px solid var(--m27-lichtgroen);
  background: var(--m27-lichtgroen);
  color: var(--m27-donkergroen);
  white-space: nowrap;
  line-height: 1.5;
}

.gl-chip--meer {
  background: transparent;
  border-color: #dad5cd;
  color: #8a857e;
  padding: 3px 8px;
  cursor: help;
}

/* Contact: een icoontje voor e-mail en voor gsm, de waarde in de title. */
.gl-contact {
  display: inline-flex;
  gap: 4px;
}

.gl-contact__ikoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(194, 177, 215, 0.18);
  color: var(--m27-paars);
}

.gl-contact__ikoon svg {
  width: 15px;
  height: 15px;
}

.gl-contact__ikoon:hover {
  background: rgba(194, 177, 215, 0.4);
}

.gl-contact__ikoon:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
}

/* Een nummer dat wij niet kunnen lezen, in dezelfde tint als de
   WhatsApp-knop die dat ook zegt. */
.gl-contact__ikoon--nazien {
  background: #f8f2e2;
  color: #8a6d2f;
}

/* ---------------------- de WhatsApp-kolom (toestemming) ------------------
   Mag dit gezelschap een bericht van ons krijgen, namens het koppel? Dat is
   een vinkje en geen verhaal, dus de kolom is zo smal als haar inhoud. */
.gl-tabelhoes th.gl-kop-wa,
.gl-tabelhoes td[data-veld="wa"],
.gl-tabelhoes th.gl-kop-link,
.gl-tabelhoes td[data-veld="link"] {
  width: 1%;
  white-space: nowrap;
}

.gl-wa {
  font-family: var(--m27-font-tekst);
  font-size: 10.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--m27-radius-pill);
  border: 1.5px solid #dad5cd;
  background: transparent;
  color: #a8a39b;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
}

.gl-wa--aan {
  border-color: var(--m27-lichtgroen);
  background: var(--m27-lichtgroen);
  color: var(--m27-donkergroen);
}

.gl-wa--nazien {
  border-color: #ecdcb8;
  color: #8a6d2f;
}

.gl-wa--nazien.gl-wa--aan {
  background: #f8f2e2;
  color: #8a6d2f;
}

.gl-wa:hover {
  border-color: var(--m27-lila);
}

.gl-wa:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
}

/* De icoonknoppen: het potlood, de link. Nooit primair: een actie per rij
   is nooit de hoofdactie van het scherm. */
.gl-acties {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  white-space: nowrap;
}

.gl-ikoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1.5px solid #e4dfd7;
  border-radius: 10px;
  background: #fff;
  color: var(--m27-paars);
  cursor: pointer;
  padding: 0;
}

.gl-ikoon svg {
  width: 16px;
  height: 16px;
}

.gl-ikoon:hover {
  border-color: var(--m27-lila);
  background: rgba(194, 177, 215, 0.12);
}

.gl-ikoon:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
}

/* Rood, want onomkeerbaar: iets weghalen mag er niet uitzien als bewerken. */
.gl-ikoon--weg {
  color: var(--m27-rood);
}

.gl-ikoon--weg:hover {
  border-color: var(--m27-rood);
  background: rgba(164, 68, 46, 0.08);
}

.gl-ikoon--weg:focus-visible {
  outline-color: var(--m27-rood);
}

.gl-ikoon--link {
  color: var(--m27-paars);
}

/* Een rij is ook zelf tikbaar (ze opent het venster van die persoon). */
.gl-tabelhoes tbody tr[data-rij] {
  cursor: pointer;
}

.gl-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* De lege staat van de lijst: waarom is er niets te zien, en hoe vult het
   zich weer. Het scherm RSVP leent deze klasse. */
.gl-leegrij td {
  text-align: center;
  color: #8a857e;
  padding: 26px;
}

.gl-leegrij .m27-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

/* =========================================================================
   3. Het venster van een gast
   ========================================================================= */

/* Twee velden per regel op een breed scherm; op telefoon onder elkaar. */
.gl-veldrij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.gl-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 2px;
}

.gl-checks label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--m27-tekst);
}

.gl-checks input {
  accent-color: var(--m27-paars);
  width: 16px;
  height: 16px;
}

/* Het veld voor een nieuwe groep verschijnt onder de keuzelijst. */
#gl-groep-nieuw {
  margin-top: 8px;
}

/* Wie hoort erbij: een zoekveld, een lijstje met treffers, en daarna een
   chip met het gekozen gezelschap. */
.gl-gezelschap {
  position: relative;
}

.gl-gez-lijst {
  margin-top: 6px;
  border: 1.5px solid #dad5cd;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.gl-gez-lijst[hidden] {
  display: none;
}

.gl-gez-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid #f4f1ec;
  background: none;
  text-align: left;
  font: inherit;
  font-weight: 300;
  font-size: 14px;
  color: var(--m27-tekst);
  cursor: pointer;
}

.gl-gez-item:last-child {
  border-bottom: 0;
}

.gl-gez-item strong {
  font-weight: 400;
}

.gl-gez-item span {
  font-size: 12px;
  color: #8a857e;
}

.gl-gez-item:hover,
.gl-gez-item:focus-visible {
  background: rgba(194, 177, 215, 0.14);
  outline: none;
}

.gl-gez-geen {
  margin: 0;
  padding: 9px 14px;
  font-size: 13px;
  color: #8a857e;
}

.gl-gez-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  border-radius: var(--m27-radius-pill);
  background: var(--m27-lichtgroen);
  color: var(--m27-donkergroen);
  font-size: 14px;
}

.gl-gez-chip strong {
  font-weight: 400;
}

.gl-gez-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(90, 104, 80, 0.12);
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.gl-gez-chip button svg {
  width: 13px;
  height: 13px;
}

.gl-gez-chip button:hover {
  background: rgba(90, 104, 80, 0.24);
}

.gl-gez-chip button:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
}

/* Een knop die eruitziet als een zin, in de groene regel na het bewaren. */
.gl-tekstknop {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--m27-paars);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.gl-tekstknop:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------ de link van een gezelschap -------------------- */

.gl-linkadres {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--m27-donkergroen);
  background: var(--m27-lichtgroen);
  border-radius: 10px;
  padding: 9px 12px;
  overflow-wrap: anywhere;
}

.gl-linkadres--geen {
  color: #8a857e;
  background: #f4f1ec;
}

.gl-linkknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Een bevestiging die in het blok zelf verschijnt in plaats van in een
   venster (een venster zou het formulier eronder weggooien). Rood omlijnd,
   want wat hierna komt is onomkeerbaar. */
.gl-linkwaarschuwing {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  color: #a4432f;
  background: rgba(164, 68, 46, 0.07);
  border: 1px solid rgba(164, 68, 46, 0.25);
  border-radius: 10px;
  padding: 9px 12px;
}

/* Onderaan het venster: Verwijderen links, Annuleren en Bewaren rechts. */
.gl-modal-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.gl-modal-voet .modal__acties {
  margin-top: 0;
  margin-left: auto;
}

.gl-importfouten {
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  font-size: 13.5px;
  color: #6b665f;
  max-height: 220px;
  overflow: auto;
}

.gl-importfouten li {
  margin-bottom: 5px;
}

/* =========================================================================
   4. Het beheer van de groepen
   ========================================================================= */

.gl-groepen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.gl-groep-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gl-groep-rij input[type="text"] {
  flex: 1 1 160px;
  min-width: 0;
  font: inherit;
  font-weight: 300;
  font-size: 14.5px;
  color: var(--m27-tekst);
  padding: 8px 14px;
  border: 1.5px solid #dad5cd;
  border-radius: var(--m27-radius-pill);
  background: #fff;
}

.gl-groep-rij input[type="text"]:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
}

.gl-groep-telling {
  flex: none;
  font-size: 12px;
  color: #8a857e;
  white-space: nowrap;
}

.gl-groep-nieuw {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #efece6;
}

.gl-groep-nieuw input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 8px 14px;
  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);
}

.gl-groep-nieuw input:focus-visible {
  outline: 3px solid var(--m27-lila);
  outline-offset: 2px;
}

/* =========================================================================
   5. Telefoon: dezelfde rijen als kaartjes
   ========================================================================= */

@media (max-width: 768px) {
  /* Tikdoelen op telefoon zijn minstens 48px hoog, ook een icoonknop. */
  .gl-potlood,
  .gl-ikoon {
    width: 48px;
    height: 48px;
  }

  .gl-potlood {
    margin-left: 0;
  }

  .gl-balk {
    gap: 8px;
  }

  .gl-zoek {
    flex: 1 1 100%;
    max-width: none;
  }

  /* De filters met twee naast elkaar; onder de 148px valt er vanzelf een
     naar de volgende regel. */
  .gl-filter {
    flex: 1 1 40%;
    min-width: 148px;
    justify-content: space-between;
  }

  /* De keuzelijst zegt zelf al "Alle groepen" of "Alle momenten"; het
     opschrift ervoor kost op een telefoon de helft van de breedte. */
  .gl-filter {
    min-width: 120px;
  }

  .gl-filter span {
    display: none;
  }

  .gl-filter select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .gl-knoppen {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    justify-content: stretch;
    margin-left: 0;
  }

  .gl-knoppen .m27-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }

  /* De groene knop over de volle breedte, als laatste. */
  .gl-knoppen .m27-btn--green {
    grid-column: 1 / -1;
  }

  .gl-tabelhoes {
    overflow: visible;
  }

  .gl-tabelhoes table,
  .gl-tabelhoes tbody {
    display: block;
    width: auto;
  }

  /* Een kaartje is een flexrij die omslaat: naam, groep en momenten over
     de volle breedte, en daaronder de icoontjes van contact, WhatsApp, link
     en het potlood naast elkaar op een regel. Zes regels van 48px per
     persoon was geen compacte lijst. */
  .gl-tabelhoes tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    width: auto;
  }

  .gl-tabelhoes thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .gl-tabelhoes tr {
    background: #fff;
    border: 1px solid #efece6;
    border-radius: var(--m27-radius-kaart);
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  /* De volgende personen van een gezelschap: ingesprongen, met een groene
     rand die zegt dat ze bij het kaartje erboven horen. */
  .gl-tabelhoes tr.gl-rij--volgend {
    margin-left: 18px;
    margin-top: -4px;
    border-left: 3px solid var(--m27-lichtgroen);
  }

  .gl-tabelhoes tbody tr:hover td {
    background: none;
  }

  .gl-tabelhoes tbody tr.gl-rij--eerste td {
    border-top: 0;
  }

  .gl-tabelhoes td {
    flex: 1 1 100%;
    border-bottom: 1px solid #f4f1ec;
    padding: 9px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
  }

  .gl-tabelhoes td[data-veld="contact"],
  .gl-tabelhoes td[data-veld="wa"],
  .gl-tabelhoes td[data-veld="link"],
  .gl-tabelhoes td[data-label="Acties"] {
    flex: 0 0 auto;
    border-bottom: 0;
    padding: 6px 0 0;
  }

  .gl-tabelhoes td[data-veld="contact"]::before,
  .gl-tabelhoes td[data-veld="link"]::before,
  .gl-tabelhoes td[data-label="Acties"]::before {
    display: none;
  }

  .gl-tabelhoes td[data-veld="wa"]::before {
    width: auto;
  }

  /* Het potlood staat rechtsboven in het kaartje, naast de naam, zodat de
     icoontjes eronder op een regel passen. De naam laat er ruimte voor. */
  .gl-tabelhoes tr {
    position: relative;
  }

  .gl-tabelhoes td[data-label="Acties"] {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 0;
    min-height: 0;
  }

  .gl-tabelhoes td[data-veld="naam"] {
    padding-right: 56px;
  }

  .gl-contact {
    gap: 2px;
  }

  /* Een cel zonder waarde (geen groep, geen contact, geen nummer) toont op
     een telefoon ook geen streepje: dat is een regel voor niets. */
  .gl-tabelhoes td.gl-cel--geen {
    display: none;
  }

  .gl-tabelhoes td:last-child {
    border-bottom: 0;
  }

  .gl-tabelhoes td::before {
    content: attr(data-label);
    flex: none;
    width: 104px;
    font-size: 10.5px;
    letter-spacing: var(--m27-ls-label);
    text-transform: uppercase;
    color: #8a857e;
  }

  .gl-tabelhoes td > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* De cellen die een volgende persoon van zijn gezelschap erft (groep,
     momenten, WhatsApp, link) zijn leeg en tonen op telefoon ook geen
     opschrift: het staat al op het kaartje erboven. */
  .gl-tabelhoes td.gl-cel--erft {
    display: none;
  }

  /* De naam is de kop van het kaartje. */
  .gl-tabelhoes td[data-veld="naam"] {
    padding-top: 0;
    font-size: 16px;
  }

  .gl-tabelhoes td[data-veld="naam"]::before {
    display: none;
  }

  .gl-rij--volgend td[data-veld="naam"] {
    padding-left: 0;
  }

  .gl-rij--volgend td[data-veld="naam"]::before {
    display: none;
  }

  .gl-tabelhoes td[data-veld="wa"] {
    width: auto;
  }

  .gl-tabelhoes td[data-veld="wa"] .gl-wa {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    font-size: 11px;
  }

  .gl-tabelhoes td[data-veld="link"] {
    width: auto;
  }

  .gl-tabelhoes td[data-veld="link"] .gl-ikoon,
  .gl-tabelhoes td[data-veld="contact"] .gl-contact {
    flex: 0 0 auto;
  }

  .gl-contact__ikoon {
    width: 40px;
    height: 40px;
  }

  .gl-contact__ikoon svg {
    width: 18px;
    height: 18px;
  }

  .gl-tabelhoes .gl-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
  }

  .gl-tabelhoes td[data-veld="momenten"] {
    display: block;
  }

  .gl-tabelhoes td[data-veld="momenten"]::before {
    display: block;
    width: auto;
    margin-bottom: 6px;
  }

  /* Dezelfde sterkte als de regel hierboven, anders wint display: block van
     het verbergen en toont een volgende persoon een leeg opschrift. */
  .gl-tabelhoes td[data-veld="momenten"].gl-cel--erft {
    display: none;
  }

  .gl-acties {
    justify-content: flex-start;
  }

  .gl-leegrij td {
    display: block;
  }

  .gl-leegrij td::before {
    display: none;
  }

  .gl-leegrij .m27-btn {
    min-height: 48px;
  }

  /* In het venster: een veld per regel, en 16px zodat iOS niet inzoomt. */
  .gl-veldrij {
    grid-template-columns: 1fr;
  }

  .gl-linkknoppen .m27-btn,
  .gl-groep-nieuw .m27-btn,
  .gl-modal-voet .m27-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .gl-groep-rij input[type="text"],
  .gl-groep-nieuw input {
    min-height: 48px;
    font-size: 16px;
  }

  .gl-gez-item {
    min-height: 48px;
    justify-content: center;
  }

  .gl-gez-chip button {
    width: 36px;
    height: 36px;
  }
}