/* NMS — forms
 *
 * Bron: nimo-nms-app-system/components/forms-app/
 * Componenten: SectionCard · FieldRow · ErrorSummary · AutosaveIndicator · TypeAhead ·
 *              LongSelect · RepeatableRows · FileUploadWithCaption · AssessmentRow
 *
 * Geen opslaanknop: elk veld slaat op bij wijziging en dat wordt op precies één plek
 * zichtbaar (AutosaveIndicator, nooit per veld). Verplicht staat in woorden, nooit als
 * sterretje. Elke invulcomponent heeft een alleen-lezen variant met dezelfde bladspiegel.
 *
 * Geen losse px-, hex- of fontwaarde in dit bestand: alles via var(--...).
 */

/* ---------------------------------------------------------------------------
 * SectionCard — sectie van een lang formulier
 * ------------------------------------------------------------------------- */
.nms-sectie {
  background: var(--surface-card);
  border: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-sectie + .nms-sectie { margin-top: var(--space-4); }
.nms-sectie__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nms-gap-14);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-sectie__titelblok { display: flex; align-items: baseline; gap: var(--nms-cell-pad-x); min-width: 0; }
.nms-sectie__nr,
.nms-sectie__teller {
  font-size: var(--nms-text-11);
  line-height: 1;
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-muted);
}
.nms-sectie__titel {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--nms-text-13);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-heading);
}
.nms-sectie__rechts { display: flex; align-items: center; gap: var(--nms-cell-pad-x); flex: none; }
.nms-sectie__alleenlezen { font-size: var(--nms-text-11); line-height: 1; color: var(--text-muted); }
.nms-sectie__noot { padding: var(--nms-gap-14) var(--space-5) 0; }
.nms-sectie__body {
  padding: var(--nms-gap-18) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Een sectie die alleen naslag is, staat ingeklapt: het hoort in het record en in de
   export, maar niet permanent in beeld tijdens het invullen. */
.nms-sectie--dicht .nms-sectie__body { display: none; }
.nms-sectie--dicht .nms-sectie__kop { border-bottom: none; }

/* ---------------------------------------------------------------------------
 * FieldRow — label, verplichtheid in woorden, hulptekst, inline fout
 * ------------------------------------------------------------------------- */
.nms-veldrij { display: flex; flex-direction: column; gap: var(--nms-gap-6); min-width: 0; }
/* De bestaande markup is <label class="nms-veldrij">Label<input …><span class="small muted">hint</span></label>:
   het label is een kale tekstregel. De labelopmaak staat daarom op de rij zelf, en
   het veld zet zijn eigen gewicht terug. */
label.nms-veldrij, .nms-veldrij > span:first-child {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-heading);
}
label.nms-veldrij :where(input, select, textarea) { font-weight: var(--weight-regular); }
.nms-veldrij .small, .nms-veldrij .muted {
  font-size: var(--nms-text-11);
  font-weight: var(--weight-regular);
  line-height: 1.45;
  color: var(--text-muted);
}
.nms-veldrij + .nms-veldrij { margin-top: var(--space-4); }
/* In een raster zorgt de gap al voor de tussenruimte. De marge hierboven geldt
   alleen voor gestapelde rijen; binnen een raster duwt hij de tweede kolom een
   regel omlaag, waardoor de kolomkoppen niet meer op dezelfde lijn staan. */
.grid > .nms-veldrij + .nms-veldrij { margin-top: 0; }
.nms-veldrij__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-heading);
}
/* Verplicht en optioneel staan in woorden, nooit als sterretje. */
.nms-veldrij__verplicht,
.nms-veldrij__optioneel {
  font-size: var(--nms-text-11);
  font-weight: var(--weight-regular);
  line-height: 1;
}
.nms-veldrij__verplicht { color: var(--text-body); }
.nms-veldrij__optioneel { color: var(--text-muted); }
.nms-veldrij__hint { font-size: var(--nms-text-11); line-height: 1.45; color: var(--text-muted); }
.nms-veldrij__fout {
  display: inline-flex;
  align-items: center;
  gap: var(--nms-gap-6);
  font-size: var(--nms-text-11);
  font-weight: var(--nms-status-weight-attention);
  line-height: 1.4;
  color: var(--nms-status-fg);
}
.nms-veldrij__fout::before {
  content: "";
  width: var(--nms-icon-sm);
  height: var(--nms-icon-sm);
  flex: none;
  background: currentColor;
  -webkit-mask: url("../icons/circle-alert.svg") center / contain no-repeat;
          mask: url("../icons/circle-alert.svg") center / contain no-repeat;
}
/* Alleen-lezen houdt dezelfde bladspiegel: de waarde staat op een hairline. */
.nms-veldrij__waarde {
  min-height: var(--nms-veld-h);
  display: flex;
  align-items: center;
  padding: 0 0 var(--nms-gap-6);
  border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
  font-size: var(--nms-text-13);
  line-height: 1.5;
  color: var(--text-body);
  font-variant-numeric: var(--nms-numeric);
}
.nms-veldrij__leeg { color: var(--nms-status-fg-muted); }

/* ---------------------------------------------------------------------------
 * ErrorSummary — tientallen ontbrekende punten, gegroepeerd per sectie
 * ------------------------------------------------------------------------- */
.nms-fouten {
  background: var(--surface-card);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  border-left: var(--nms-row-rule-w) solid var(--nms-accent-rule);
}
.nms-fouten__kop {
  display: flex;
  align-items: center;
  gap: var(--nms-gap-10);
  padding: var(--nms-gap-14) var(--nms-gap-18);
  border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-fouten__teken {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  background: var(--nms-status-fg);
  -webkit-mask: url("../icons/circle-alert.svg") center / contain no-repeat;
          mask: url("../icons/circle-alert.svg") center / contain no-repeat;
}
.nms-fouten__titel {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-heading);
}
.nms-fouten__aantal {
  font-size: var(--text-micro);
  line-height: 1;
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-muted);
}
.nms-fouten__lijst { max-height: var(--nms-samenvatting-max-h); overflow-y: auto; }
.nms-fouten__groep { border-bottom: var(--nms-hairline-w) solid var(--nms-table-line); }
.nms-fouten__groepkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nms-cell-pad-x);
  padding: var(--nms-gap-10) var(--nms-gap-18);
  background: var(--surface-subtle);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-heading);
}
.nms-fouten__groepkop span:last-child {
  font-weight: var(--weight-regular);
  font-size: var(--nms-text-11);
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-muted);
}
.nms-fouten__punten { list-style: none; margin: 0; padding: var(--nms-gap-6) 0; }
.nms-fouten__punt {
  display: block;
  width: 100%;
  padding: var(--nms-gap-6) var(--nms-gap-18);
  background: none;
  border: none;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--text-micro);
  line-height: 1.45;
  color: var(--text-link);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: var(--nms-gap-2);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * AutosaveIndicator — de enige plek waar het opslaan zichtbaar wordt
 * ------------------------------------------------------------------------- */
.nms-autosave {
  display: inline-flex;
  align-items: center;
  gap: var(--nms-mark-gap);
  font-size: var(--nms-text-11);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}
.nms-autosave::before {
  content: "";
  width: var(--nms-icon-sm);
  height: var(--nms-icon-sm);
  flex: none;
  background: currentColor;
  -webkit-mask: url("../icons/check.svg") center / contain no-repeat;
          mask: url("../icons/check.svg") center / contain no-repeat;
}
.nms-autosave--bezig::before {
  -webkit-mask-image: url("../icons/clock.svg");
          mask-image: url("../icons/clock.svg");
}
.nms-autosave--klaar { color: var(--nms-status-fg); }
.nms-autosave--fout {
  color: var(--nms-status-fg);
  font-weight: var(--nms-status-weight-attention);
  padding-block: var(--nms-attention-pad-block);
  padding-inline-end: var(--nms-attention-pad-inline-end);
  border-inline-end: var(--nms-attention-rule);
}
.nms-autosave--fout::before {
  -webkit-mask-image: url("../icons/circle-alert.svg");
          mask-image: url("../icons/circle-alert.svg");
}

/* ---------------------------------------------------------------------------
 * TypeAhead — typen filtert, kiezen zet één waarde
 * ------------------------------------------------------------------------- */
.nms-typeahead { position: relative; }
/* Een gekozen waarde is geen invoerveld meer maar een regel met een wisknop. */
.nms-typeahead__keuze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nms-gap-10);
  min-height: var(--nms-veld-h);
  padding: 0 var(--nms-veld-pad-x);
  background: var(--surface-card);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  font-size: var(--nms-text-13);
  line-height: 1.3;
  color: var(--text-body);
}
.nms-typeahead__lijst {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  position: absolute;
  top: calc(100% + var(--nms-gap-2));
  left: 0;
  right: 0;
  max-height: var(--nms-lijst-max-h);
  overflow-y: auto;
  z-index: 20;
  background: var(--surface-card);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  box-shadow: var(--shadow-raised);
}
.nms-typeahead__treffer {
  display: flex;
  flex-direction: column;
  gap: var(--nms-gap-2);
  width: 100%;
  min-height: var(--nms-row-h-comfortable);
  padding: var(--nms-gap-6) var(--nms-cell-pad-x);
  background: none;
  border: none;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}
.nms-typeahead__treffer:hover { background: var(--nms-row-bg-hover); }
.nms-typeahead__treffer strong { font-size: var(--nms-text-13); font-weight: var(--weight-regular); line-height: 1.3; color: var(--text-body); }
.nms-typeahead__treffer span { font-size: var(--nms-text-11); line-height: 1.3; color: var(--text-muted); }
.nms-typeahead__leeg {
  padding: var(--nms-gap-10) var(--nms-cell-pad-x);
  font-size: var(--text-micro);
  line-height: 1.3;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
 * LongSelect — keuzelijst met veel opties, met zoekregel boven de vijftien
 * ------------------------------------------------------------------------- */
.nms-longselect { display: flex; flex-direction: column; gap: var(--nms-gap-6); }
.nms-longselect__zoek { height: var(--nms-knop-h-xs); font-size: var(--text-micro); }
/* Meerkeuze blijft een select met meerdere regels; de hoogte volgt het aantal opties. */
.nms-longselect select[multiple] { height: auto; padding: var(--nms-gap-6) var(--nms-veld-pad-x); }

/* ---------------------------------------------------------------------------
 * RepeatableRows — toevoegen onderaan, verwijderen per rij
 * ------------------------------------------------------------------------- */
.nms-repeater {
  border: var(--nms-hairline-w) solid var(--border-hairline);
  background: var(--surface-card);
}
.nms-repeater__leeg {
  padding: var(--space-5);
  font-size: var(--text-micro);
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.nms-repeater__voet { padding: var(--nms-cell-pad-x); }
.nms-repeater__grens {
  padding: 0 var(--nms-cell-pad-x) var(--nms-cell-pad-x);
  font-size: var(--nms-text-11);
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
 * FileUploadWithCaption — op mobiel opent de fotoknop de camera
 * ------------------------------------------------------------------------- */
.nms-upload { display: flex; flex-direction: column; gap: var(--nms-gap-10); }
.nms-upload__knoppen { display: flex; flex-wrap: wrap; gap: var(--nms-gap-10); }
.nms-upload__teken {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  background: currentColor;
  -webkit-mask: url("../icons/camera.svg") center / contain no-repeat;
          mask: url("../icons/camera.svg") center / contain no-repeat;
}
.nms-upload__reden { font-size: var(--nms-text-11); line-height: 1.5; color: var(--text-muted); }
.nms-upload__bestand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--nms-cell-pad-x);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  background: var(--surface-subtle);
}

/* ---------------------------------------------------------------------------
 * AssessmentRow — de beoordelingsregel van het inspectieformulier.
 * De schaal is een radiogroep: de enige plek waar dit systeem cirkels gebruikt.
 * ------------------------------------------------------------------------- */
.nms-beoordeling {
  display: grid;
  grid-template-columns: 1fr var(--nms-beoordeling-kol);
  gap: var(--nms-cell-pad-x) var(--space-4);
  align-items: start;
  padding: var(--nms-cell-pad-x);
  border-bottom: var(--nms-hairline-w) solid var(--nms-table-line);
  border-left: var(--nms-row-rule-w) solid transparent;
}
.nms-beoordeling--datum { grid-template-columns: 1fr var(--nms-beoordeling-kol) var(--nms-beoordeling-datum); }
.nms-beoordeling--compact { padding-block: var(--space-2); }
.nms-beoordeling--onbeoordeeld { border-left-color: var(--nms-accent-rule); }

.nms-beoordeling__punt { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nms-beoordeling__label { display: flex; align-items: baseline; gap: var(--space-2); }
.nms-beoordeling__nr {
  font-size: var(--nms-text-11);
  line-height: 1.4;
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-muted);
  flex: none;
}
.nms-beoordeling__tekst { font-size: var(--nms-text-13); line-height: 1.5; color: var(--text-body); }

.nms-beoordeling__keuzes { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nms-beoordeling__schaal { display: flex; flex-wrap: wrap; gap: var(--nms-gap-14); }
.nms-beoordeling__optie {
  display: inline-flex;
  align-items: center;
  gap: var(--nms-gap-6);
  min-height: var(--nms-scale-h);
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--text-body);
  cursor: pointer;
  white-space: nowrap;
}
.nms-beoordeling__optie input {
  width: var(--nms-vinkje);
  height: var(--nms-vinkje);
  margin: 0;
  accent-color: var(--nms-control-accent);
}
.nms-beoordeling__optie:has(input:checked) { font-weight: var(--weight-semibold); }
.nms-beoordeling__datumlabel {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--nms-text-11);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-heading);
}
.nms-beoordeling__datumveld { display: flex; flex-direction: column; gap: var(--nms-gap-5); }

/* Onder 860px stapelen de beoordelingsregels: invullen in het veld op de telefoon
   is de enige functie die daar bewust voor is ontworpen (breekpunt-860.md). */
@media (max-width: 860px) {
  .nms-beoordeling,
  .nms-beoordeling--datum { grid-template-columns: 1fr; }
  .nms-sectie__body { padding-inline: var(--space-4); }
}