/* NMS — feedback
 *
 * Bron: nimo-nms-app-system/components/feedback/
 * Componenten: InlineNotice · Toast · Modal · SidePanel · Tooltip · ProgressBar · BlockedAction
 *
 * Er is geen "gelukt"-toon: geslaagd werk is een zichtbare uitkomst, niet een groen vlak.
 * Alleen attentie wordt zwaar — teken, 600 gewicht, kopstreep. Drie plekken mogen zweven
 * (UserMenu, TypeAhead, Toast/Modal); al het andere blijft plat met hairline.
 *
 * Geen losse px-, hex- of fontwaarde in dit bestand: alles via var(--...).
 */

/* ---------------------------------------------------------------------------
 * InlineNotice — vaste melding in de bladspiegel
 * ------------------------------------------------------------------------- */
/* De bestaande markup is <div class="nms-notice"><strong>Kop</strong>tekst</div>.
   Het teken staat daarom absoluut, zodat de inhoud vrij mag blijven. */
.nms-notice {
  position: relative;
  padding: var(--nms-gap-14) var(--space-4) var(--nms-gap-14)
           calc(var(--space-4) + var(--space-4) + var(--nms-cell-pad-x));
  background: var(--surface-subtle);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  font-size: var(--text-micro);
  line-height: var(--leading-body);
  color: var(--text-body);
  text-wrap: pretty;
}
.nms-notice + .nms-notice { margin-top: var(--nms-cell-pad-x); }
.nms-notice::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: var(--nms-gap-14);
  width: var(--space-4);
  height: var(--space-4);
  background: var(--text-muted);
  -webkit-mask: url("../icons/file-text.svg") center / contain no-repeat;
          mask: url("../icons/file-text.svg") center / contain no-repeat;
}
.nms-notice strong {
  display: block;
  margin-bottom: var(--nms-gap-5);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-heading);
}

/* Attentie is het enige zware teken: kopstreep links en het waarschuwingsteken. */
.nms-notice--attentie { border-left: var(--nms-row-rule-w) solid var(--nms-accent-rule); }
.nms-notice--attentie::before {
  background: var(--nms-status-fg);
  -webkit-mask-image: url("../icons/circle-alert.svg");
          mask-image: url("../icons/circle-alert.svg");
}

/* ---------------------------------------------------------------------------
 * Toast — tijdelijke melding, fade, geen beweging
 * ------------------------------------------------------------------------- */
.nms-toast {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: var(--nms-cell-pad-x);
  min-width: var(--nms-toast-min-w);
  max-width: var(--nms-toast-max-w);
  padding: var(--nms-gap-14) var(--space-4);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  box-shadow: var(--shadow-raised);
  animation: nms-toast-in var(--duration-base) var(--ease-standard);
}
@keyframes nms-toast-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nms-toast { animation: none; } }

.nms-toast__teken {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  margin-top: var(--nms-hairline-w);
  background: currentColor;
  -webkit-mask: url("../icons/check.svg") center / contain no-repeat;
          mask: url("../icons/check.svg") center / contain no-repeat;
}
.nms-toast--attentie .nms-toast__teken {
  -webkit-mask-image: url("../icons/circle-alert.svg");
          mask-image: url("../icons/circle-alert.svg");
}
.nms-toast__tekst { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
.nms-toast__bericht { font-size: var(--nms-text-13); line-height: 1.45; }
.nms-toast__detail { font-size: var(--nms-text-11); line-height: 1.4; color: var(--nms-op-navy-fg-zacht); }
.nms-toast__sluit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nms-sluitknop);
  height: var(--nms-sluitknop);
  flex: none;
  background: none;
  border: none;
  border-radius: var(--radius-none);
  color: inherit;
  cursor: pointer;
}
.nms-toast__sluit::before {
  content: "";
  width: var(--nms-icon-sm);
  height: var(--nms-icon-sm);
  background: currentColor;
  -webkit-mask: url("../icons/x.svg") center / contain no-repeat;
          mask: url("../icons/x.svg") center / contain no-repeat;
}
/* Op navy is de focusring blauwtint (besluit B2). */
.nms-toast { --focus-ring: var(--nms-focus-ring-on-navy); }

/* ---------------------------------------------------------------------------
 * Modal — navy scrim op 55%, geen blur, vierkante hoeken
 * ------------------------------------------------------------------------- */
.nms-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--nms-scrim);
}
.nms-modal {
  width: 100%;
  max-width: var(--nms-modal-w);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  box-shadow: var(--shadow-raised);
}
.nms-modal__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nms-gap-14);
  padding: var(--nms-gap-18) var(--space-5);
  border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-modal__titelblok { display: flex; align-items: center; gap: var(--nms-gap-10); min-width: 0; }
.nms-modal__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);
}
/* Destructief: attentieteken in de kop. Geen rood — het werkwoord staat op de knop. */
.nms-modal__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-modal__body {
  padding: var(--nms-gap-18) var(--space-5);
  overflow-y: auto;
  font-size: var(--nms-text-13);
  line-height: var(--leading-body);
  color: var(--text-body);
  text-wrap: pretty;
}
.nms-modal__voet {
  display: flex;
  justify-content: flex-end;
  gap: var(--nms-gap-10);
  padding: var(--nms-gap-14) var(--space-5);
  border-top: var(--nms-hairline-w) solid var(--border-hairline);
  background: var(--surface-subtle);
}

/* ---------------------------------------------------------------------------
 * SidePanel — naast de inhoud, zonder de pagina te verlaten
 * ------------------------------------------------------------------------- */
.nms-scrim--paneel { justify-content: flex-end; align-items: stretch; padding: 0; z-index: 55; }
.nms-paneel {
  width: 100%;
  max-width: var(--nms-paneel-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-left: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-paneel__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nms-gap-14);
  padding: var(--space-5);
  border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-paneel__body { padding: var(--space-5); overflow-y: auto; flex: 1 1 auto; }

/* ---------------------------------------------------------------------------
 * Tooltip — korte verduidelijking, nooit de enige informatiedrager
 * ------------------------------------------------------------------------- */
.nms-tooltip { position: relative; display: inline-flex; }
.nms-tooltip__inhoud {
  position: absolute;
  z-index: 70;
  bottom: calc(100% + var(--nms-gap-6));
  left: 50%;
  transform: translateX(-50%);
  max-width: var(--nms-tooltip-max-w);
  padding: var(--nms-gap-6) var(--space-2);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  font-size: var(--nms-text-11);
  line-height: 1.45;
  text-wrap: pretty;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * ProgressBar — navy vulling, geen kleurverloop, geen tikkende cijfers
 * ------------------------------------------------------------------------- */
.nms-progress { display: flex; flex-direction: column; gap: var(--nms-gap-6); }
.nms-progress__regel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nms-gap-10); }
.nms-progress__label { font-size: var(--text-micro); line-height: 1.3; color: var(--text-body); }
.nms-progress__waarde {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-heading);
}
.nms-progress__balk { position: relative; height: var(--nms-balk-h); background: var(--nms-skeleton-bar); }
.nms-progress__vulling {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--nms-severity-on);
  transition: width var(--duration-base) var(--ease-standard);
}
.nms-progress__doel {
  position: absolute;
  top: calc(var(--nms-row-rule-w) * -1);
  bottom: calc(var(--nms-row-rule-w) * -1);
  width: var(--nms-hairline-w);
  background: var(--nms-accent-rule);
}

/* ---------------------------------------------------------------------------
 * BlockedAction — nooit een disabled knop zonder uitleg
 * ------------------------------------------------------------------------- */
.nms-blokkade { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nms-cell-pad-x); }
.nms-blokkade .nms-knop { padding-inline: var(--nms-knop-pad-x-blok); }
.nms-blokkade__reden {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--nms-status-weight-attention);
  line-height: 1.45;
  color: var(--nms-status-fg);
  padding-block: var(--nms-attention-pad-block);
  padding-inline-end: var(--nms-attention-pad-inline-end);
  border-inline-end: var(--nms-attention-rule);
}
.nms-blokkade__reden::before {
  content: "";
  width: var(--nms-mark-size);
  height: var(--nms-mark-size);
  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;
}
.nms-blokkade__aantal { font-variant-numeric: var(--nms-numeric); }