/* NMS — states
 *
 * Bron: nimo-nms-app-system/components/states/
 * Componenten: EmptyState · SkeletonRows · ErrorState
 *
 * Alle drie komen IN de plaats van de rijen, binnen het tabelkader, met kop, tabs
 * en filterbalk zichtbaar. Zo blijft duidelijk waar je bent en wat het filter doet.
 * Geen illustratie: het merk heeft er geen. Geen rood bij een fout: het
 * attentieteken en het woord doen het werk.
 *
 * Geen losse px-, hex- of fontwaarde in dit bestand: alles via var(--...).
 */

/* ---------------------------------------------------------------------------
 * Gedeelde bladspiegel van de drie staten
 * ------------------------------------------------------------------------- */
.nms-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nms-gap-10);
  padding: var(--nms-state-pad) var(--space-6);
  text-align: center;
  background: var(--surface-card);
}
.nms-state__kop {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-heading);
}
.nms-state__tekst {
  margin: 0;
  max-width: var(--nms-measure);
  font-size: var(--nms-text-13);
  line-height: var(--leading-body);
  color: var(--text-body);
  text-wrap: pretty;
}
.nms-state__verwijzing {
  margin: 0;
  max-width: var(--nms-measure);
  font-size: var(--text-micro);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.nms-state__actie { padding-top: var(--nms-gap-6); }

/* ---------------------------------------------------------------------------
 * EmptyState — twee soorten, en het verschil is belangrijk: bestaat er niets,
 * of bestaat er wel iets maar niet binnen dit filter.
 * ------------------------------------------------------------------------- */
.nms-empty--filter { padding-block: var(--nms-state-pad-filter); }

/* ---------------------------------------------------------------------------
 * ErrorState — attentieteken en woorden, geen rood
 * ------------------------------------------------------------------------- */
.nms-error { padding-block: var(--nms-state-pad-error); }
.nms-error__teken {
  width: var(--nms-icon-lg);
  height: var(--nms-icon-lg);
  background: var(--text-heading);
  -webkit-mask: url("../icons/circle-alert.svg") center / contain no-repeat;
          mask: url("../icons/circle-alert.svg") center / contain no-repeat;
}
/* De technische verwijzing is er om door te geven aan beheer: links uitgelijnd en
   met tabular-nums, zodat een tijdstip te kopiëren is. */
.nms-error__detail {
  margin: 0;
  max-width: var(--nms-measure-wide);
  padding: var(--nms-gap-6) var(--space-2);
  background: var(--surface-subtle);
  border: var(--nms-hairline-w) solid var(--nms-table-line-strong);
  font-size: var(--nms-text-11);
  line-height: 1.5;
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-muted);
  text-align: start;
}

/* ---------------------------------------------------------------------------
 * SkeletonRows — balken op de plaats van de tekst. Fade, geen puls, geen
 * schuiver: het merk kent geen speelse beweging.
 * ------------------------------------------------------------------------- */
.nms-skeleton__rij {
  display: flex;
  align-items: center;
  height: var(--nms-row-h-comfortable);
  padding-block: var(--nms-cell-pad-y-comfortable);
  border-bottom: var(--nms-hairline-w) solid var(--nms-table-line);
  border-left: var(--nms-row-rule-w) solid transparent;
}
.nms-table--compact .nms-skeleton__rij {
  height: var(--nms-row-h-compact);
  padding-block: var(--nms-cell-pad-y-compact);
}
.nms-skeleton__cel {
  display: flex;
  flex-direction: column;
  gap: var(--nms-gap-5);
  flex: 1 1 0;
  min-width: 0;
  padding: 0 var(--nms-cell-pad-x);
}
.nms-skeleton__balk {
  display: block;
  height: var(--nms-skeleton-h);
  width: 68%;
  background: var(--nms-skeleton-bar);
}
.nms-skeleton__cel:first-child .nms-skeleton__balk { width: 42%; }
.nms-skeleton__balk--sub {
  height: var(--nms-skeleton-h-soft);
  width: 82%;
  background: var(--nms-skeleton-bar-soft);
}
.nms-table--compact .nms-skeleton__balk--sub { display: none; }

/* De rijen verlopen naar achteren, zodat de lijst niet als inhoud leest. */
.nms-skeleton__rij:nth-child(1) { opacity: 1; }
.nms-skeleton__rij:nth-child(2) { opacity: .88; }
.nms-skeleton__rij:nth-child(3) { opacity: .76; }
.nms-skeleton__rij:nth-child(4) { opacity: .64; }
.nms-skeleton__rij:nth-child(5) { opacity: .52; }
.nms-skeleton__rij:nth-child(n + 6) { opacity: .4; }

/* Alleen voor schermlezers: de laadmelding. */
.nms-visueel-verborgen {
  position: absolute;
  width: var(--nms-hairline-w);
  height: var(--nms-hairline-w);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}