/* NMS — matrix
 *
 * Bron: nimo-nms-app-system/components/matrix/
 * Componenten: RotatedColumnHeader (+ ColumnGroupHeader) · MatrixGrid (+ MatrixRow,
 *              MatrixRowHead, MatrixCheckCell, MatrixRowSave) · CheckboxList
 *
 * Het dichtste raster in het NMS: 23 rollen tegen 19 rechten, plus zeven domeinvakjes,
 * een Entra-veld en een opslaanknop per rij. Drie besluiten maken het leesbaar:
 *   1. koppen onder 45 graden in sentence case — gespatieerde kapitalen zijn schuin
 *      onleesbaar (guidelines/kolomkoppen.md, tweede plek waar de merkregel wijkt);
 *   2. de bewerkte rij blijft herkenbaar, óók op de vaste eerste kolom;
 *   3. opslaan per rij, niet per pagina: één fout houdt dan niet alles tegen.
 *
 * Dit is de enige plek in het NMS waar de tabel géén <table> is: een geroteerde
 * kopstrook die buiten zijn cel mag lopen, met een vaste eerste kolom, vraagt een
 * raster. Overal elders blijft <table> staan (zie de kop van data.css).
 *
 * Geen losse px-, hex- of fontwaarde in dit bestand: alles via var(--...).
 */

/* ---------------------------------------------------------------------------
 * MatrixGrid — kader, schuifgedrag en de twee sticky kopstroken
 * ------------------------------------------------------------------------- */
.nms-matrix {
  border: var(--nms-hairline-w) solid var(--nms-table-line-strong);
  background: var(--surface-card);
  overflow: auto;
  max-height: var(--nms-matrix-max-h);
}
.nms-matrix__binnen { min-width: var(--nms-matrix-min-w); }

.nms-matrix__groepen,
.nms-matrix__koppen {
  display: grid;
  position: sticky;
  z-index: 3;
  background: var(--nms-colhead-bg);
}
.nms-matrix__groepen { top: 0; height: var(--nms-matrix-groepkop-h); }
/* De strook klipt, niet de cel: een geroteerd label van ~110px moet buiten zijn
   eigen 44px kunnen lopen, over de lege ruimte boven de kolommen rechts ervan. */
.nms-matrix__koppen { top: var(--nms-matrix-groepkop-h); overflow: hidden; }

.nms-matrix__groepkop {
  padding: var(--nms-groepkop-pad) var(--nms-cell-pad-x);
  background: var(--nms-colhead-bg);
  border-bottom: var(--nms-hairline-w) solid var(--nms-table-line-strong);
  border-left: var(--nms-hairline-w) solid var(--nms-table-line-strong);
  font-size: var(--nms-text-11);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--nms-colhead-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
 * RotatedColumnHeader — 45 graden, sentence case
 * ------------------------------------------------------------------------- */
.nms-matrix__kop {
  position: relative;
  height: var(--nms-matrix-kop-h);
  overflow: visible;
  background: transparent;
  border-bottom: var(--nms-hairline-w) solid var(--nms-table-line-head);
}
.nms-matrix__kop--groepstart { border-left: var(--nms-hairline-w) solid var(--nms-table-line-strong); }
.nms-matrix__koplabel {
  position: absolute;
  bottom: var(--nms-matrix-kop-onder);
  left: 50%;
  z-index: 2;
  transform-origin: left bottom;
  transform: rotate(var(--nms-matrix-rotatie));
  white-space: nowrap;
  font-size: var(--nms-colhead-size);
  font-weight: var(--nms-colhead-weight);
  line-height: 1;
  color: var(--nms-colhead-color);
}

/* ---------------------------------------------------------------------------
 * MatrixRow — de bewerkte rij blijft herkenbaar, ook in de vaste kolom
 * ------------------------------------------------------------------------- */
.nms-matrix__rij {
  display: grid;
  align-items: center;
  min-height: var(--nms-row-h-comfortable);
  background: var(--nms-row-bg);
  border-bottom: var(--nms-hairline-w) solid var(--nms-table-line);
  border-left: var(--nms-row-rule-w) solid transparent;
}
/* Geen hover-achtergrond: bij 437 vakjes is een meebewegend vlak ruis. */
.nms-matrix__rij--bewerkt {
  background: var(--nms-row-bg-editing);
  border-left: var(--nms-row-rule-active);
}

.nms-matrix__rijkop {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--nms-gap-2);
  padding: var(--space-2) var(--nms-cell-pad-x);
  min-width: 0;
  background: var(--nms-row-bg);
  border-right: var(--nms-hairline-w) solid var(--nms-table-line-strong);
}
.nms-matrix__rij--bewerkt .nms-matrix__rijkop { background: var(--nms-row-bg-editing); }
/* Bekijken als rol staat in de vaste eerste kolom, bij de rolnaam: de matrix
   schuift horizontaal, en een actie helemaal rechts vind je nooit. */
.nms-matrix__bekijk {
  align-self: flex-start;
  background: none;
  border: none;
  border-radius: var(--radius-none);
  padding: var(--space-1) 0;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  line-height: 1;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: var(--nms-gap-2);
  white-space: nowrap;
  cursor: pointer;
}
.nms-matrix__bekijk:hover { color: var(--text-link-hover); }
.nms-matrix__bekijk:focus-visible { outline: var(--nms-focus-outline); outline-offset: var(--nms-focus-offset); }

.nms-matrix__rijkop strong {
  font-size: var(--nms-text-13);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nms-matrix__rijkop span {
  font-size: var(--nms-text-11);
  line-height: 1.3;
  color: var(--text-muted);
}

/* Het vakje is 16px, de cel 44px: de aanraakmaat zit in de cel, niet in het vakje. */
.nms-matrix__vakje {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.nms-matrix__vakje--groepstart { border-left: var(--nms-hairline-w) solid var(--nms-table-line-strong); }
.nms-matrix__vakje input {
  width: var(--nms-vinkje);
  height: var(--nms-vinkje);
  margin: 0;
  accent-color: var(--nms-control-accent);
  cursor: pointer;
}

.nms-matrix__cel { padding: 0 var(--nms-cell-pad-x); min-width: 0; }
.nms-matrix__bewaar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nms-gap-10);
  padding: 0 var(--nms-cell-pad-x);
}
.nms-matrix__stand { font-size: var(--nms-text-11); line-height: 1; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
 * CheckboxList — de 23 rollen bij een nieuwe gebruiker
 * ------------------------------------------------------------------------- */
.nms-vinklijst {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--nms-gap-10);
}
.nms-vinklijst__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nms-gap-10);
}
.nms-vinklijst__kop legend {
  padding: 0;
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-heading);
}
.nms-vinklijst__teller {
  font-size: var(--nms-text-11);
  line-height: 1;
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-muted);
}
.nms-vinklijst__lijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nms-gap-2) var(--space-5);
  max-height: var(--nms-lijst-max-h-lang);
  overflow-y: auto;
  padding: var(--space-2) var(--nms-gap-10);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  background: var(--surface-card);
}
.nms-vinklijst__optie {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--nms-lijst-rij-h);
  font-size: var(--text-micro);
  line-height: 1.3;
  color: var(--text-body);
  cursor: pointer;
  min-width: 0;
}
.nms-vinklijst__optie input {
  width: var(--nms-vinkje);
  height: var(--nms-vinkje);
  margin: 0;
  flex: none;
  accent-color: var(--nms-control-accent);
}
.nms-vinklijst__optie > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nms-vinklijst__meta { font-size: var(--nms-text-11); line-height: 1.3; color: var(--text-muted); flex: none; }

/* In een formulier zijn de keuzes hele zinnen (thema's uit de jaarkalender).
   Afkappen op een regel maakt twee thema's van elkaar niet te onderscheiden,
   dus daar loopt de tekst door en staat het vinkje bovenaan. */
.nms-vinklijst__lijst--ruim { grid-template-columns: 1fr; max-height: none; }
.nms-vinklijst__lijst--ruim .nms-vinklijst__optie {
  align-items: flex-start;
  min-height: 0;
  padding-block: var(--nms-gap-6);
}
.nms-vinklijst__lijst--ruim .nms-vinklijst__optie > span:first-of-type {
  overflow: visible;
  white-space: normal;
}
@media (min-width: 900px) {
  .nms-vinklijst__lijst--ruim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
 * Onder 860px is dit geen raster meer maar een lijst per rol met de toegekende
 * rechten als tekst: lezen en nalopen, geen bewerken. Beheerwerk hoort niet op
 * een telefoon (guidelines/breekpunt-860.md).
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .nms-matrix { max-height: none; }
  .nms-matrix__groepen,
  .nms-matrix__koppen { display: none; }
  .nms-matrix__binnen { min-width: 0; }
  .nms-matrix__rij { display: flex; flex-wrap: wrap; gap: var(--nms-gap-6); padding: var(--nms-cell-pad-x); }
  .nms-matrix__rijkop { position: static; border-right: none; padding: 0; flex: 1 1 100%; }
  .nms-matrix__vakje,
  .nms-matrix__cel,
  .nms-matrix__bewaar { display: none; }
  .nms-matrix__rechten { display: block; font-size: var(--text-micro); line-height: 1.5; color: var(--text-body); }
  .nms-vinklijst__lijst { grid-template-columns: 1fr; }
}
/* Op een breed scherm staat de tekstopsomming van rechten er niet: die is de
   smalle variant van hetzelfde raster. */
.nms-matrix__rechten { display: none; }