/* =====================================================================
   gebruikers.css — module 6.3 · Gebruikers & toegang (RBAC 0.2).
   Uitsluitend tokens; module-wortel-marge volgens de vaste norm.
===================================================================== */

.pm { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.pm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.pm-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.pm-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.pm-hint { font-size: .7rem; color: var(--c-ink-3); display: block; }
.pm-balk { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pm-rek { flex: 1; }
.pm-tabelvoet { padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }

.pm-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
}
.pm-knop:hover { border-color: var(--c-ink-3); }
.pm-knop--donker { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.pm-knop--groen { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.pm-knop--rood { border-color: var(--c-rood-t); color: var(--c-rood); }
.pm-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; }
.pm-flt {
  padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .72rem var(--font-ui); color: var(--c-ink-2);
}
.pm-flt.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }
.pm-zoek {
  flex: 1; min-width: 180px; padding: 9px 13px; border-radius: 10px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff;
  font: 500 .78rem var(--font-ui); color: var(--c-ink);
}
.pm-selectveld select {
  padding: 9px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; font: 600 .74rem var(--font-ui); color: var(--c-ink); cursor: pointer;
}
.visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

.pm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.pm-dot.is-groen { background: var(--c-groen); } .pm-dot.is-terra { background: var(--c-terra); }
.pm-dot.is-sage { background: var(--c-sage); } .pm-dot.is-oker { background: var(--c-oker); }
.pm-dot.is-blush { background: var(--c-blush); } .pm-dot.is-ink { background: var(--c-ink); }
.pm-streng {
  font: 600 .56rem var(--font-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-terra-d); background: var(--c-terra-t); padding: 2px 7px; border-radius: 5px;
}
.pm-bg {
  font: 600 .58rem var(--font-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-rood); background: var(--c-rood-t); padding: 2px 6px; border-radius: 4px;
}

/* ---- layout: module-nav links ---- */
.pm-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.pm-nav { padding: 9px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.pm-nav .kicker { padding: 8px 11px 5px; }
.pm-navitem {
  text-align: left; padding: 9px 11px; border-radius: 9px; border: 0; background: none; cursor: pointer;
  font: 600 .76rem var(--font-ui); color: var(--c-ink-2);
}
.pm-navitem:hover { background: var(--c-creme); }
.pm-navitem.is-actief { background: var(--c-ink); color: #fff; font-weight: 700; }
.pm-inhoud { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pm-tweekolom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.pm-blokkop { padding: 14px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-blokkop strong { font-size: .88rem; }
.pm-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.pm-blok > strong { font-size: .86rem; }

/* ---- gebruikers ---- */
.pm-urij {
  display: grid; grid-template-columns: 1.7fr 1.6fr .7fr .9fr .8fr .9fr 30px;
  gap: 12px; align-items: center; padding: 11px 18px; width: 100%;
  border: 0; border-top: var(--lijndikte) solid var(--c-lijn);
  background: none; text-align: left; cursor: pointer; font: 500 .76rem var(--font-ui); color: var(--c-ink);
}
.pm-urij:hover:not(.pm-urij--kop) { background: var(--c-creme); }
.pm-urij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); cursor: default; background: var(--c-creme); border-top: 0; }
.pm-uwie { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pm-uwie i {
  width: 32px; height: 32px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-paneel); color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: center; font: 700 .68rem var(--font-ui);
}
.pm-uwie strong { display: block; font-size: .8rem; }
.pm-uwie em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.pm-uprofs { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---- profielen ---- */
.pm-profgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.pm-profkaart { padding: 15px 17px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.pm-profkaart:hover { border-color: var(--c-ink-3); }
.pm-profkaart__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-profkaart__kop strong { font-size: .88rem; }
.pm-profkaart p { margin: 0; font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; min-height: 34px; }
.pm-profkaart__voet { display: flex; align-items: center; gap: 14px; font-size: .68rem; color: var(--c-ink-3); }
.pm-profkaart__voet strong { font-size: .9rem; color: var(--c-ink); }
.pm-kloon {
  margin-left: auto; font-style: normal; font: 600 .68rem var(--font-ui); color: var(--c-ink-2);
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 6px 11px;
}
.pm-kloon:hover { border-color: var(--c-ink-3); }

/* ---- editor ---- */
.pm-picker { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.pm-editkop { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pm-editkop__naam { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.pm-editkop__naam strong { font-size: 1.05rem; }
.pm-editkop > div > span:last-child { font-size: .76rem; color: var(--c-ink-2); }
.pm-editacties { display: flex; gap: 8px; align-items: center; }
.pm-dirty { font-style: normal; font: 600 .7rem var(--font-ui); color: var(--c-terra-d); }
.pm-sod {
  display: flex; gap: 11px; padding: 12px 16px; border-radius: 11px;
  background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-oker);
}
.pm-sod i { font-style: normal; color: var(--c-amber); font-weight: 700; }
.pm-sod strong { display: block; font-size: .78rem; color: var(--c-amber); }
.pm-sod span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }

.pm-mrij {
  display: grid; grid-template-columns: 200px repeat(6, 1fr);
  gap: 6px; align-items: center; padding: 5px 16px;
  border-top: var(--lijndikte) solid var(--c-lijn);
}
.pm-mrij--kop { font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); text-align: center; border-top: 0; padding: 12px 16px 10px; }
.pm-mrij--kop span:first-child { text-align: left; }
.pm-mgroep {
  display: grid; grid-template-columns: 200px repeat(6, 1fr); gap: 6px; align-items: center;
  padding: 7px 16px; background: var(--c-creme); border-top: var(--lijndikte) solid var(--c-lijn);
}
.pm-mgroep__naam { display: flex; align-items: center; gap: 8px; font: 700 .72rem var(--font-ui); }
.pm-groepschakel {
  border: 0; background: none; cursor: pointer; color: var(--c-ink-3);
  font-size: .7rem; padding: 2px; border-radius: 6px;
}
.pm-groepschakel:hover { color: var(--c-ink); background: #fff; }
.pm-mlabel { font: 500 .76rem var(--font-ui); }
.pm-eigen { font-style: normal; font-size: .54rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-groen-d); background: var(--c-groen-t); padding: 2px 5px; border-radius: 4px; }
.pm-cel {
  height: 26px; border-radius: 7px; border: 0; cursor: pointer; font: 800 .74rem var(--font-mono);
  display: flex; align-items: center; justify-content: center; background: var(--c-creme);
}
.pm-cel.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.pm-cel.is-sage { background: var(--c-sage-t); color: var(--c-groen-d); }
.pm-cel.is-leeg { color: var(--c-lijn-2); }
.pm-cel.is-vast { cursor: default; }
.pm-legenda { display: flex; gap: 16px; padding: 10px 16px; border-top: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); font: 500 .68rem var(--font-ui); color: var(--c-ink-2); flex-wrap: wrap; }
.pm-legenda .is-groen { color: var(--c-groen-d); } .pm-legenda .is-sage { color: var(--c-groen-d); } .pm-legenda .is-leeg { color: var(--c-lijn-2); }
.pm-legenda em { font-style: normal; color: var(--c-ink-3); }

.pm-scopewaarde { font: 600 .8rem var(--font-ui); }
.pm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-limietrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .76rem; }
.pm-limietrij input {
  width: 120px; padding: 7px 11px; text-align: right;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px;
  font: 600 .74rem var(--font-mono); color: var(--c-ink); background: #fff;
}
.pm-sensrij { display: flex; align-items: flex-start; gap: 12px; }
.pm-sensrij--rand { padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); align-items: center; }
.pm-sensrij > div { flex: 1; min-width: 0; }
.pm-sensrij strong { display: block; font-size: .78rem; }
.pm-sensrij span { font-size: .68rem; color: var(--c-ink-3); }
.pm-toggle {
  width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--c-lijn-2); position: relative; transition: background 160ms;
}
.pm-toggle i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left 160ms; font-style: normal;
}
.pm-toggle.is-aan { background: var(--c-groen); }
.pm-toggle.is-aan i { left: 21px; }
.pm-maskpreview {
  padding: 12px 14px; border-radius: 11px; background: var(--c-paneel);
  display: flex; flex-direction: column; gap: 4px; font: 500 .74rem var(--font-ui); color: var(--c-ink-2);
}

/* ---- effectieve rechten ---- */
.pm-effgrid { display: grid; grid-template-columns: 190px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.pm-effpick { padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 560px; overflow-y: auto; }
.pm-effpick .kicker { padding: 8px 10px 6px; }
.pm-effuser {
  text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.pm-effuser.is-actief { background: var(--c-ink); color: #fff; }
.pm-effmidden { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pm-effkop { padding: 15px 18px; display: flex; gap: 11px; align-items: flex-start; }
.pm-effkop i {
  width: 38px; height: 38px; flex: none; border-radius: 10px; font-style: normal;
  background: var(--c-paneel); color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: center; font: 700 .78rem var(--font-ui);
}
.pm-effkop strong { display: block; font-size: .92rem; }
.pm-effkop span { font-size: .7rem; color: var(--c-ink-3); display: block; margin-bottom: 6px; }
.pm-effzij { display: flex; flex-direction: column; gap: 12px; }
.pm-grensrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .74rem; color: var(--c-ink-3); }
.pm-grensrij b { font-weight: 600; color: var(--c-ink); text-align: right; }
.pm-grensrij--top { margin-top: 12px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); }
/* FT-8.1c · 2FA-methode-keuze */
.pm-2fa { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.pm-2fa .pm-knop.is-actief { background: var(--c-groen-t); border-color: var(--c-groen-d); color: var(--c-groen-d); }
.pm-preset {
  border: 0; cursor: pointer; font: 500 .66rem var(--font-ui);
  color: var(--c-terra-d); background: var(--c-terra-t); padding: 4px 9px; border-radius: 12px;
}
.pm-testuit { display: flex; gap: 10px; padding: 11px 13px; border-radius: 10px; font: 500 .74rem/1.5 var(--font-ui); }
.pm-testuit.is-ok { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.pm-testuit.is-nee { background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); }
.pm-testuit i { font-style: normal; font-weight: 800; }
.pm-testuit.is-ok i { color: var(--c-groen-d); }
.pm-testuit.is-nee i { color: var(--c-rood); }

/* ---- teams / verzoeken / audit ---- */
.pm-teamrij {
  display: grid; grid-template-columns: 1.2fr 1fr 2fr .6fr;
  gap: 12px; align-items: center; padding: 12px 18px; font-size: .78rem;
  border-top: var(--lijndikte) solid var(--c-lijn);
}
.pm-teamrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); border-top: 0; }
.pm-teamrij .mono { font-size: .68rem; color: var(--c-ink-3); }
.pm-verzoek { padding: 14px 18px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 5px; }
.pm-verzoek__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-verzoek__kop em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.pm-verzoek strong { font-size: .82rem; }
.pm-verzoek strong em { font-style: normal; font-weight: 500; color: var(--c-ink-3); font-size: .74rem; }
.pm-verzoek__recht { font: 600 .76rem var(--font-ui); color: var(--c-terra-d); }
.pm-verzoek p { margin: 0 0 6px; font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }
.pm-afgehandeld { font: 600 .74rem var(--font-ui); color: var(--c-groen-d); }
.pm-tot { font-style: normal; font: 600 .7rem var(--font-ui); color: var(--c-amber); }
.pm-tijdbalk { display: block; height: 6px; border-radius: 4px; background: var(--c-creme); overflow: hidden; font-style: normal; margin-bottom: 6px; }
.pm-tijdbalk b { display: block; height: 100%; background: var(--c-oker); border-radius: 4px; }
.pm-auditrij {
  display: grid; grid-template-columns: 120px 1.1fr 1.5fr 1.6fr 90px;
  gap: 12px; align-items: center; padding: 12px 18px; font-size: .76rem;
  border-top: var(--lijndikte) solid var(--c-lijn);
}
.pm-auditrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); border-top: 0; }
.pm-auditrij .mono { font-size: .66rem; color: var(--c-ink-3); }
.pm-auditrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); display: block; }
.pm-sodrij { display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-top: var(--lijndikte) solid var(--c-lijn); }
.pm-sodrij i {
  width: 34px; height: 34px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-creme); color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: center;
}
.pm-sodrij > div { flex: 1; min-width: 0; }
.pm-sodrij strong { display: block; font-size: .8rem; }
.pm-sodrij span:not(.chip) { font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; }
.pm-bgblok { border-color: var(--c-rood); display: flex; flex-direction: column; }
.pm-bgblok .pm-knop { margin: 0 18px 16px; align-self: flex-start; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .pm-grid, .pm-effgrid, .pm-tweekolom { grid-template-columns: 1fr; }
  .pm-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .pm-mrij, .pm-mgroep { grid-template-columns: 130px repeat(6, 1fr); }
  .pm-urij, .pm-teamrij, .pm-auditrij { grid-template-columns: 1fr; gap: 4px; }
  .pm-urij--kop, .pm-teamrij--kop, .pm-auditrij--kop { display: none; }
}

/* F3-lat (16-07-2026): gebruiker bewerken — profielkeuze in de modal */
.pm-profkeuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: 8px 0 12px; }
.pm-profvink { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }

/* F3 a/b/c (16-07-2026) */
.pm-inactblok { padding: 12px 16px; margin-bottom: 12px; border-color: var(--c-amber); }
.pm-inactrij { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--c-lijn); font-size: 13px; }
.pm-inactrij em { display: block; font-size: 11px; color: var(--c-ink-2); font-style: normal; }

.pm-attestrij { display: grid; grid-template-columns: 1.5fr 1.6fr .8fr .9fr 1.2fr; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--c-lijn); font-size: 13px; }
.pm-attestrij--kop { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); background: var(--c-creme); border-top: 0; }
.pm-attestrij.is-beoordeeld { opacity: .75; }
.pm-attestrij em { display: block; font-size: 11px; color: var(--c-ink-2); font-style: normal; }
.pm-attestacties { display: flex; gap: 6px; }
.pm-attestvoortgang { display: flex; gap: 10px; align-items: center; min-width: 160px; }
.pm-attestvoortgang .pm-tijdbalk { flex: 1; }
.pm-attestok { border: 1px solid var(--c-groen-d); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--c-groen-d); font-weight: 700; margin-bottom: 12px; }

.pm-simbanner { display: flex; gap: 10px; align-items: center; border: 1px solid var(--c-terra); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.pm-simbanner i { font-style: normal; color: var(--c-terra); font-size: 16px; }
.pm-simrij { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--c-lijn); font-size: 13px; }
.pm-simrij.is-weg { opacity: .45; }
.pm-simrij .pm-dot { margin-right: 6px; }
.pm-masked { color: var(--c-ink-2); letter-spacing: 2px; }
.pm-inactblok.is-rustig { border-color: var(--c-lijn); opacity: .85; }

/* B13 · sessies & apparaten */
.pm-sessies { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pm-sessierij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; background: var(--c-creme); }
.pm-sessierij > div { display: flex; flex-direction: column; gap: 2px; }
.pm-sessierij strong { font-size: .8rem; }
.pm-sessierij span { font-size: .66rem; color: var(--c-ink-2); }
.pm-sessierij em { font-style: normal; color: var(--c-ink-3); }