/* ══════════════════════════════════════════════════════════════════════════
   gebruikers.css — Beheer → Gebruikers, in dezelfde vormtaal als de rest
   van Beheer (Activiteiten, Arrangementen, Modules).

   Waarom een eigen bestand en geen regel in theme.css: theme.css is bewust
   ongemoeid gelaten. Dit blad laadt ALS LAATSTE (ná theme.css én ná de
   tenant-override), dus het wint op cascade-volgorde zonder één !important
   nodig te hebben.

   Alle kleuren, radii en fonts komen uit de bestaande tokens (--panel,
   --border, --surface, --text, --text-muted, --text-faint, --accent,
   --danger, --font). Niets hardgecodeerd, dus licht én grijs thema volgen
   vanzelf.

   DE BUG (Nick, schermafdruk): de knop "✉ Welkomstmail" liep dwars door het
   e-mailveld. Oorzaak: er staan twéé .gb-email-save-regels in theme.css.
   De oude (r3377) tekende een 28×28 ICOON-knop: `width:28px; height:28px;
   display:grid; place-items:center`. De nieuwe (r5077) maakte er een
   TEKST-knop van — maar zette alleen border/padding/font, niet de maten.
   Resultaat: "✉ Welkomstmail" met white-space:nowrap gecentreerd in een
   doosje van 28px, dus de tekst stak links en rechts ~55px buiten haar eigen
   kader en werd over het buurveld heen geschilderd. De border-box botste
   niet (daarom viel het met een kale rect-meting niet op), de inkt wél.
   Reparatie hieronder is structureel: de knop krijgt de maat van haar eigen
   inhoud terug. Geen marge eroverheen.
   ══════════════════════════════════════════════════════════════════════════ */

.gb-shell {
  /* Eén kolom, dezelfde breedte als de andere Beheer-panelen. */
  max-width: 1080px;
  margin: 0 auto;
  min-width: 0;
}

/* ── Kop ─────────────────────────────────────────────────────────────── */
.gb-shell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 12px;
  border-bottom: 0; /* de kaarten eronder doen de scheiding al */
}
.gb-shell-title {
  font-family: var(--font);
  font-size: calc(15px * var(--type-scale, 1.2));
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 2px;
}
.gb-shell-hint {
  font-family: var(--font);
  font-size: calc(11.5px * var(--type-scale, 1.2));
  color: var(--text-muted);
  margin: 0;
  max-width: 560px;
  line-height: 1.45;
}

/* ── Eén eiland: matrix, lijst en contactgegevens zijn secties van
      hetzelfde blok, niet drie losse kaarten met eigen vormen. ────────── */
.gb-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.gb-sec {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
  margin: 0; /* de gap van .gb-stack bepaalt het ritme */
  padding: 0;
}
.gb-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.gb-sec-titel {
  font-family: var(--font);
  font-size: calc(12.5px * var(--type-scale, 1.2));
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin: 0;
}
.gb-sec-body { padding: 12px; min-width: 0; }
.gb-sec-body--flush { padding: 0; min-width: 0; }
.gb-sec .pmatrix-note,
.gb-sec .gb-sec-note {
  font-family: var(--font);
  font-size: calc(11.5px * var(--type-scale, 1.2));
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 10px;
}

/* De rechtenmatrix zat in een eigen kaart met een eigen radius (14px) en een
   eigen padding; nu is het een sectie van hetzelfde blok. */
.gb-sec.pmatrix-card {
  padding: 0;
  border-radius: 8px;
  margin-bottom: 0;
}
.gb-sec .pmatrix-wrap { overflow-x: auto; }
.gb-sec .pmatrix { min-width: 0; }
/* De rol-onderschriften in de matrixkop stonden op 10,5px — kleiner dan waar
   dit scherm mee wegkomt. Terug naar de kleinste maat die de rest van Beheer
   ook gebruikt (10 × type-scale = 12px). */
.gb-sec .pmatrix .rolehead small {
  font-size: calc(10px * var(--type-scale, 1.2));
}
/* De matrixvakjes waren 22×22 — net onder een fatsoenlijk raakdoel. 24×24 is
   de ondergrens; verder verandert er niets aan hun gedrag of betekenis. */
.gb-sec .cbx {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

/* ── Zoek/filter zit in de sectiekop, niet als losse balk erboven ─────── */
.gb-filterbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap; /* zoekveld en statusfilter horen op één regel */
  margin: 0;
  min-width: 0;
}
.gb-filterbar input[type="search"],
.gb-filterbar select {
  font-family: var(--font);
  font-size: calc(11.5px * var(--type-scale, 1.2));
  padding: 5px 9px;
  min-height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}
.gb-filterbar input[type="search"] { flex: 0 1 210px; min-width: 110px; max-width: 260px; }
.gb-filterbar select { flex: 0 0 auto; }
/* Zoekveld en statusfilter even hoog. Via het id, want de gedeelde
   formulierlaag (`.app-main input:not(…)`, 0,5,1) is met klassen niet te
   verslaan — een id wel, en dat blijft netjes tot dit ene veld beperkt. */
#gb-zoek, #gb-filter {
  height: 30px;
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: calc(11px * var(--type-scale, 1.2));
}

/* ── De tabel ────────────────────────────────────────────────────────────
   table-layout:fixed + colgroup = één raster. Elke rij krijgt exact
   dezelfde kolombreedtes, ongeacht wat erin staat. Dat is wat rol-selects,
   statuskolom en acties op één lijn houdt. ──────────────────────────── */
.gb-tbl-wrap {
  /* De kaart eromheen levert de rand al; geen dubbele lijnen. */
  background: none;
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  min-width: 0;
}
.gb-tbl {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  /* Was 'Lekton', monospace — dát was de grootste reden dat dit scherm
     "van een ander systeem" leek. */
  font-family: var(--font);
  font-size: calc(11.5px * var(--type-scale, 1.2));
  font-variant-numeric: tabular-nums;
}
.gb-col-naam   { width: auto; }
.gb-col-rol    { width: 224px; }
.gb-col-status { width: 100px; }
/* Gemeten: Welkomstmail 110 + Wachtwoord 100 + prullenbak 30 + 2×6 gap = 252px
   inhoud, plus 24px celpadding. Op 176px (en zelfs 244) vielen ze op twee
   regels en werden de rijen ongelijk hoog. */
.gb-col-acties { width: 280px; }

.gb-tbl thead th {
  font-family: var(--font);
  font-size: calc(10px * var(--type-scale, 1.2)); /* = 12px bij scale 1.2 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface);
  text-align: left;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.gb-tbl thead th.gb-th-acties { text-align: right; }
.gb-tbl tbody td {
  /* Compact met hairline-scheiding, zoals .beheer-table. */
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
  background: none;
}
.gb-tbl tbody tr:last-child td { border-bottom: 0; }
.gb-tbl tbody tr:hover td { background: var(--hover); }

/* ── Naam + e-mail ───────────────────────────────────────────────────── */
.gb-c-naam { min-width: 0; }
.gb-naam {
  font-family: var(--font);
  font-size: calc(11.5px * var(--type-scale, 1.2));
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Het e-mailadres is standaard een LEESREGEL. Pas na "Bewerken" wordt het
   een invoerveld — zie de toelichting in app.js bij renderInstellingen. */
.gb-email-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  min-height: 24px;
  min-width: 0;
}
.gb-email-lees {
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.gb-email-bewerk {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
  min-width: 24px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text-faint);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, border-color .12s;
}
/* De potloodknop verschijnt op hover/focus van de rij — rustig in ruststand,
   vindbaar zodra je er bent. Op aanraakschermen altijd zichtbaar. */
.gb-tbl tbody tr:hover .gb-email-bewerk,
.gb-tbl tbody tr:focus-within .gb-email-bewerk { opacity: 1; }
.gb-email-bewerk:hover,
.gb-email-bewerk:focus-visible {
  opacity: 1;
  color: var(--accent);
  border-color: var(--border-strong);
}
@media (hover: none) {
  .gb-email-bewerk { opacity: 1; }
}

/* Het bewerkveld zelf: dicht tenzij de rij open staat. */
.gb-email-veld {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.gb-email-edit[data-open="1"] .gb-email-lees,
.gb-email-edit[data-open="1"] .gb-email-bewerk { display: none; }
.gb-email-edit[data-open="1"] .gb-email-veld { display: flex; }

.gb-email-inp {
  flex: 1 1 190px;
  min-width: 0;
  max-width: 240px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  min-height: 26px;
  padding: 4px 8px;
}
.gb-email-inp:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ── ⚑ DE REPARATIE ⚑ ────────────────────────────────────────────────────
   De knop krijgt haar eigen breedte terug (auto i.p.v. de 28px van de oude
   icoon-regel) en wordt inline-flex i.p.v. grid. Daarmee valt de tekst weer
   bínnen het kader en kan hij per definitie niet meer over het buurveld
   heen liggen — de doos is nu net zo breed als de inkt.
   Twee selectors diep zodat ook een latere tenant-override hier niet
   onderuit komt. */
.gb-email-edit .gb-email-save,
.gb-email-veld .gb-email-save {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 24px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  place-items: initial;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.gb-email-edit .gb-email-save:hover,
.gb-email-edit .gb-email-save:focus-visible {
  background: var(--panel);
  border-color: var(--accent);
  color: var(--accent);
}
.gb-email-edit .gb-email-save:disabled { opacity: .5; cursor: default; }

.gb-email-annuleer {
  flex: 0 0 auto;
  min-height: 26px;
  min-width: 24px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text-faint);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  cursor: pointer;
}
.gb-email-annuleer:hover,
.gb-email-annuleer:focus-visible { color: var(--text); border-color: var(--border-strong); }
/* De bewerkregel bevat een tekstveld en volgt dus de formuliermaat: knoppen
   even hoog als het invoerveld ernaast, zodat het één groep is. */
.gb-email-veld .gb-email-save,
.gb-email-veld .gb-email-annuleer { height: 34px; min-height: 34px; }

/* ── Rol ─────────────────────────────────────────────────────────────────
   Elke select krijgt dezelfde linkerrand (de celpadding) en dezelfde vaste
   breedte, ook als er een legacy-chip naast staat. De chip komt ná de
   select; daarvóór duwde hij 'm opzij en dát maakte de kolom rommelig. */
.gb-c-rol { min-width: 0; }
.gb-rolwrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Bewust GEEN appearance:none met een eigen chevron-SVG. Dat is geprobeerd en
   ging mis: een latere regel zet de background-longhands terug op hun
   beginwaarde (repeat / 0% 0% / auto), waardoor het pijltje over de hele
   breedte van de select getegeld werd — drie pijlen dwars door de tekst, en
   alleen in het grijze thema zichtbaar. Bovendien is het een afwijking: geen
   enkele andere select in de backoffice (ook het statusfilter hiernaast niet)
   tekent een eigen pijl. Native arrow dus — één vorm, één gedrag. */
/* Twee duidelijke maten op dit scherm:
     · 28px — de besturing IN een tabelrij (rol, Wachtwoord, verwijderen).
              Een rij is een regel tekst; de knoppen erin horen die hoogte te
              volgen, niet die van een formulier.
     · 34/36px — een veld waar je in TYPT (e-mailadres, zoeken, contactadressen).
              Dat is de maat die de hele backoffice gebruikt
              (`.app-main input/select`, theme.css r3713) en die laten we staan.
   Let op de selector: `.app-main select` (0,1,1) is de gedeelde basislaag van
   alle 16 modules. Twee klassen (`.gb-rolwrap .gb-rol-sel`, 0,2,0) winnen daar
   netjes van — zonder !important, en zonder die basislaag ergens anders te
   raken. */
.gb-rolwrap .gb-rol-sel {
  flex: 0 0 var(--gb-rol-w, 152px);
  width: var(--gb-rol-w, 152px);
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  height: 28px;
  min-height: 28px;
  padding: 3px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-overflow: ellipsis;
}
.gb-rol-sel:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.gb-rol-sel:disabled { opacity: .55; cursor: default; }

/* Legacy-chip: dezelfde vorm als .beheer-badge — één badgevorm in Beheer. */
.gb-legacy {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: calc(10px * var(--type-scale, 1.2)); /* = 12px bij scale 1.2 */
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
  background: var(--warning-soft, rgba(217, 119, 6, .1));
  border: 1px solid rgba(217, 119, 6, .35);
  color: var(--warning);
  margin: 0;
  vertical-align: middle;
  cursor: help;
}

/* ── Status ──────────────────────────────────────────────────────────── */
.gb-c-actief { min-width: 0; }
.gb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  cursor: pointer;
  user-select: none;
}
.gb-toggle-slider { width: 32px; height: 18px; border-radius: 100px; flex-shrink: 0; }
.gb-toggle-slider::after { width: 14px; height: 14px; }
.gb-toggle input:checked + .gb-toggle-slider::after { transform: translateX(14px); }
.gb-toggle-lbl {
  /* Was Lekton-kapitalen met letterspacing; nu gewone zinsvorm, net als de
     rest van Beheer. */
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* ── Acties ──────────────────────────────────────────────────────────────
   Verwijderen is de zeldzaamste en gevaarlijkste handeling en heeft dus
   het mínste gewicht: een stil icoon dat pas rood wordt als je 'm aanwijst.
   "Wachtwoord" is de gewone secundaire knop. */
.gb-c-acties {
  text-align: right;
  white-space: normal;
  min-width: 0;
}
.gb-acties-rij {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.gb-rijknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  min-width: 26px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.gb-rijknop:hover,
.gb-rijknop:focus-visible { background: var(--hover); color: var(--text); }
.gb-rijknop:disabled { opacity: .5; cursor: default; }
/* Gelijk aan de rol-select ernaast: één regelhoogte per rij. */
.gb-acties-rij .gb-rijknop { height: 28px; min-height: 28px; }

.gb-rijknop-del {
  padding: 4px 7px;
  border-color: transparent;
  color: var(--text-faint);
}
.gb-rijknop-del svg { display: block; }
.gb-rijknop-del:hover,
.gb-rijknop-del:focus-visible {
  background: var(--danger-soft);
  border-color: rgba(192, 69, 59, .3);
  color: var(--danger);
}

/* De inline bevestiging mag de kolom niet uit elkaar trekken. */
.gb-c-acties .bh-confirm {
  white-space: normal;
  max-width: 100%;
  text-align: left;
  font-size: calc(10.5px * var(--type-scale, 1.2));
}

/* ── Lege staat ──────────────────────────────────────────────────────── */
.gb-leeg {
  padding: 20px 12px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: calc(11.5px * var(--type-scale, 1.2));
  font-style: normal;
}

/* ── Contactgegevens gast-app: zelfde sectievorm ─────────────────────── */
.gb-sec .cg-grid { display: grid; gap: 10px; margin: 0 0 12px; }
@media (min-width: 900px) {
  .gb-sec .cg-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.gb-sec .cg-veld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-muted);
}
.gb-sec .cg-veld input {
  padding: 6px 9px;
  min-height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: var(--font);
  font-size: calc(11.5px * var(--type-scale, 1.2));
  color: var(--text);
  background: var(--panel);
}
.gb-sec .cg-veld input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ── Smal scherm: de tabel wordt een kaartlijst, zonder dat de PAGINA
      horizontaal gaat schuiven. ─────────────────────────────────────── */
@media (max-width: 719px) {
  .gb-tbl-wrap { overflow-x: visible; }
  .gb-tbl { table-layout: auto; }
  .gb-tbl thead { display: none; }
  .gb-tbl, .gb-tbl tbody, .gb-tbl tr, .gb-tbl td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .gb-tbl tbody tr {
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
  }
  .gb-tbl tbody tr:last-child { border-bottom: 0; }
  .gb-tbl tbody td {
    padding: 3px 12px;
    border-bottom: 0;
  }
  .gb-tbl tbody td.gb-c-naam { padding-top: 6px; }
  .gb-tbl tbody td.gb-c-acties { text-align: left; padding-bottom: 6px; }
  .gb-acties-rij { justify-content: flex-start; }
  .gb-rol-sel { flex: 0 0 var(--gb-rol-w, 152px); }
  .gb-email-inp { flex: 1 1 150px; max-width: 100%; }
  .gb-filterbar { flex-wrap: wrap; width: 100%; }
  .gb-filterbar input[type="search"] { flex: 1 1 140px; min-width: 110px; max-width: none; }
  .gb-sec-head { padding: 9px 12px; }
}