/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, module gebruikers: de sleutel om over te tikken, de herstelcodes, het codevak in een venster en de
 * rechtenmatrix (klassen m-gebruikers-...; het inlogscherm gebruikt er een paar). Alleen indeling en tokens van de laag
 * betekenis (PrimaPress 2.0, docs/DESIGNSYSTEEM.md 8.4); de letter in de mono-letter van de tokens. Geen kleurcode en
 * geen getal voor een rand of een letter. De rest komt uit app.css. */

/* de sleutel van de app en het tijdelijke wachtwoord: in een keer te kiezen, in de mono-letter */
.m-gebruikers-sleutel {
  font: var(--pp-gewicht-half) var(--pp-maat-l)/var(--pp-regel) var(--pp-letter-mono);
  letter-spacing: .06em; word-spacing: .25em; color: var(--pp-tekst);
  background: var(--pp-vlak-2); border-radius: var(--pp-straal-m); padding: var(--pp-r-3) var(--pp-r-4);
  margin: var(--pp-r-1) 0 var(--pp-r-3); overflow-wrap: anywhere; user-select: all;
}
.m-gebruikers-sleutelvak { margin: var(--pp-r-1) 0 var(--pp-r-3); }
.m-gebruikers-uri { margin: 0 0 var(--pp-r-3); }
.m-gebruikers-uri summary { cursor: pointer; color: var(--pp-link); }
.m-gebruikers-uri code {
  display: block; overflow-wrap: anywhere; word-break: break-all; background: var(--pp-vlak-2); color: var(--pp-tekst);
  padding: var(--pp-r-2); border-radius: var(--pp-straal-s); user-select: all; font-family: var(--pp-letter-mono);
}
.m-gebruikers-codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pp-r-1) var(--pp-r-5);
  margin: var(--pp-r-2) 0 var(--pp-r-3); padding-left: var(--pp-r-6);
  font: var(--pp-gewicht-half) var(--pp-maat-l)/var(--pp-regel) var(--pp-letter-mono); color: var(--pp-tekst); user-select: all;
}
/* een herstelcode op het inlogscherm (inloggen.js): een veld in de mono-letter */
input.m-gebruikers-code {
  font: var(--pp-gewicht-half) var(--pp-maat-l)/var(--pp-regel) var(--pp-letter-mono); letter-spacing: .3em; text-align: center;
  max-width: 260px;
}
input.m-gebruikers-code.herstel { letter-spacing: .08em; }
/* het codevak van het inlogscherm (div.codevak) in het venster App koppelen */
.m-gebruikers-koppel .codevak { max-width: 360px; margin: 0 0 var(--pp-r-2); }
.m-gebruikers-stapknoppen { margin-top: var(--pp-r-4); }
.m-gebruikers-stapvenster h1 { margin: 0 0 var(--pp-r-2); }

/* het invoervenster: rollen onder elkaar, Team en Tonen als naast elkaar */
.m-gebruikers-rollen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pp-r-1); }
.m-gebruikers-teams, .m-gebruikers-toon { display: flex; flex-wrap: wrap; gap: var(--pp-r-1) var(--pp-r-4); }

/* Mijn account: de keuze licht, donker of zoals de computer (besluit B-07) */
.m-gebruikers-weergave { margin: 0 0 var(--pp-r-2); }

/* de rechtenmatrix: de kolom Wat breekt af, zodat alle zeven rollen (ook Management en Beheer) op 1280 passen */
.m-gebruikers-matrix th[scope=row] {
  text-align: left; white-space: normal; max-width: 28em; min-width: 14em; vertical-align: top;
  background: var(--pp-vlak); color: var(--pp-tekst); font-weight: var(--pp-gewicht);
}
.m-gebruikers-matrix td { vertical-align: top; }
.m-gebruikers-matrix th.m-gebruikers-rol { text-align: center; white-space: normal; }
.m-gebruikers-cel { text-align: center; white-space: nowrap; }
.m-gebruikers-cel.ja { color: var(--pp-ok-tekst); font-weight: var(--pp-gewicht-vet); }
/* nee in de tekstkleur voor uitleg (een streepje, niet alleen kleur); een gekozen regel blijft wit */
.m-gebruikers-cel.nee { color: var(--sub); }
.zoektabel tr.m-gebruikers-uit:not(.gekozen) td { color: var(--sub); }