/* NMS — status
 *
 * Bron: nimo-nms-app-system/components/status/
 * Componenten: StatusMark · SeverityMark · DateChip
 * Mapping: components/status/status-map.md, plus besluit B5 uit het bouwplan.
 *
 * Betekenis zit in de VORM, nooit in de kleur: het merk kent geen semantische kleur.
 * Tien tekens dekken alle statusfamilies. Vier zijn een Lucide-glyph via CSS mask,
 * vier zijn een eigen vierkante vorm, en twee glyphs dienen de datumchip.
 * Geen losse px-, hex- of fontwaarde in dit bestand: alles via var(--...).
 */

/* ---------------------------------------------------------------------------
 * StatusMark — teken plus woord
 * ------------------------------------------------------------------------- */
.nms-status {
  display: inline-flex;
  align-items: center;
  gap: var(--nms-mark-gap);
  font-family: var(--font-body);
  font-size: var(--nms-status-size);
  font-weight: var(--nms-status-weight);
  line-height: 1;
  color: var(--nms-status-fg);
  white-space: nowrap;
}

/* Het teken zelf. Vaste maat, krimpt nooit mee met de cel. */
.nms-status__mark {
  flex: none;
  box-sizing: border-box;
  width: var(--nms-mark-shape-size);
  height: var(--nms-mark-shape-size);
}

/* --- vier eigen vormen: vierkant, want cirkels zijn voorbehouden aan
       social-icons en radiobuttons (readme applicatielaag) --- */
.nms-status--open    .nms-status__mark { border: var(--nms-mark-stroke) solid currentColor; }
.nms-status--concept .nms-status__mark { border: var(--nms-mark-stroke) dashed currentColor; }
.nms-status--vast    .nms-status__mark { background: currentColor; }
.nms-status--half    .nms-status__mark {
  border: var(--nms-mark-stroke) solid currentColor;
  background: linear-gradient(135deg, currentColor 50%, transparent 50%);
}

/* --- zes Lucide-glyphs via mask, zodat currentColor het teken kleurt.
       Pad is relatief aan dit stylesheet (besluit B3): geen url in JavaScript. --- */
.nms-status--lopend   .nms-status__mark,
.nms-status--inorde   .nms-status__mark,
.nms-status--attentie .nms-status__mark,
.nms-status--verlopen .nms-status__mark,
.nms-status--nvt      .nms-status__mark,
.nms-status--nieuwer  .nms-status__mark {
  width: var(--nms-mark-size);
  height: var(--nms-mark-size);
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.nms-status--lopend   .nms-status__mark { -webkit-mask-image: url("../icons/clock.svg");          mask-image: url("../icons/clock.svg"); }
.nms-status--inorde   .nms-status__mark { -webkit-mask-image: url("../icons/check.svg");          mask-image: url("../icons/check.svg"); }
.nms-status--attentie .nms-status__mark { -webkit-mask-image: url("../icons/circle-alert.svg");   mask-image: url("../icons/circle-alert.svg"); }
.nms-status--verlopen .nms-status__mark { -webkit-mask-image: url("../icons/x.svg");              mask-image: url("../icons/x.svg"); }
.nms-status--nvt      .nms-status__mark { -webkit-mask-image: url("../icons/minus.svg");          mask-image: url("../icons/minus.svg"); }
.nms-status--nieuwer  .nms-status__mark { -webkit-mask-image: url("../icons/arrow-up-right.svg"); mask-image: url("../icons/arrow-up-right.svg"); }

/* --- attentie is het enige zware teken: 600 plus een kopstreep als border,
       nooit een inset shadow (het systeem kent geen inner shadows) --- */
.nms-status--attentie {
  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);
}

/* --- buiten gebruik: gearchiveerd, inactief, onbekend, vervallen voertuig --- */
.nms-status--nvt { color: var(--nms-status-fg-muted); }

/* Zonder label geeft de kolomkop de betekenis; title blijft dan verplicht. */
.nms-status--zonder-label { gap: 0; }

/* ---------------------------------------------------------------------------
 * SeverityMark — ernst als telbare streepjes
 * ------------------------------------------------------------------------- */
.nms-severity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--nms-status-size);
  font-weight: var(--nms-status-weight);
  line-height: 1;
  color: var(--text-body);
  white-space: nowrap;
}
.nms-severity__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--nms-severity-gap);
  flex: none;
}
.nms-severity__bar {
  width: var(--nms-severity-bar-w);
  height: var(--nms-severity-bar-h);
  background: var(--nms-severity-off);
}
.nms-severity--1 .nms-severity__bar:nth-child(-n + 1),
.nms-severity--2 .nms-severity__bar:nth-child(-n + 2),
.nms-severity--3 .nms-severity__bar:nth-child(-n + 3) { background: var(--nms-severity-on); }

/* ---------------------------------------------------------------------------
 * DateChip — een datum die zelf de toestand is
 * ------------------------------------------------------------------------- */
/* Meerdere chips naast elkaar. DateChip.prompt.md: "Vijf chips passen met 8px
   tussenruimte in een kolom van 300px." */
.nms-datechips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.nms-datechip {
  display: inline-flex;
  align-items: center;
  gap: var(--nms-chip-gap);
  height: var(--nms-chip-h);
  padding: 0 var(--space-2);
  border: var(--nms-hairline-w) solid var(--nms-table-line-strong);
  font-family: var(--font-body);
  font-size: var(--nms-text-11);
  font-weight: var(--nms-status-weight);
  line-height: 1;
  font-variant-numeric: var(--nms-numeric);
  color: var(--nms-status-fg);
  white-space: nowrap;
}
.nms-datechip__mark {
  flex: none;
  width: var(--nms-mark-shape-size);
  height: var(--nms-mark-shape-size);
  background: currentColor;
  -webkit-mask: url("../icons/check.svg") center / contain no-repeat;
          mask: url("../icons/check.svg") center / contain no-repeat;
}
.nms-datechip--vervallen {
  border-color: var(--nms-accent-rule);
  border-bottom: var(--nms-chip-underline-w) solid var(--nms-accent-rule);
  font-weight: var(--nms-status-weight-attention);
}
.nms-datechip--vervallen .nms-datechip__mark {
  -webkit-mask-image: url("../icons/x.svg");
          mask-image: url("../icons/x.svg");
}

/* ---------------------------------------------------------------------------
 * Focus — geen van de drie is bedienbaar, dus geen focus-state. Staan ze ooit
 * in een knop of link, dan draagt dat element de ring (bouwplan §4 en B2).
 * ------------------------------------------------------------------------- */