/* NMS — dashboard
 *
 * Bron: nimo-nms-app-system/components/dashboard/  (MetricTile · SeriesChart)
 *
 * Wit vlak met hairline, geen schaduw: depth komt van navy en lijnen, want dit is
 * een print-eerst identiteit. Grafiekreeksen komen uitsluitend uit de navy-ramp en
 * worden onderscheiden aan VULLING — vlak, arcering, omlijnd — nooit aan kleur.
 *
 * Geen losse px-, hex- of fontwaarde in dit bestand: alles via var(--...).
 */

/* ---------------------------------------------------------------------------
 * MetricTile — één kerncijfer, drie naast elkaar en niet meer
 * ------------------------------------------------------------------------- */
.nms-tegel {
  display: flex;
  flex-direction: column;
  gap: var(--nms-cell-pad-x);
  padding: var(--nms-tegel-pad-y) var(--space-5);
  background: var(--surface-card);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  min-width: 0;
}
.nms-tegel__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nms-cell-pad-x);
}
.nms-tegel__label {
  font-size: var(--nms-text-11);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.nms-tegel__cijferregel { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.nms-tegel__cijfer {
  font-size: var(--nms-text-32);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-heading);
}
.nms-tegel__eenheid { font-size: var(--nms-text-13); line-height: 1.3; color: var(--text-muted); }
.nms-tegel__noot { font-size: var(--nms-text-11); line-height: 1.5; color: var(--text-muted); }
.nms-tegel__link {
  display: inline-flex;
  align-items: center;
  gap: var(--nms-gap-6);
  font-size: var(--text-micro);
  line-height: 1.3;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: var(--nms-gap-2);
}
.nms-tegel__link::after {
  content: "";
  width: var(--nms-icon-sm);
  height: var(--nms-icon-sm);
  background: currentColor;
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
          mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
 * SeriesChart — hoogstens drie reeksen, onderscheiden aan vulling
 * ------------------------------------------------------------------------- */
.nms-grafiek { display: flex; flex-direction: column; gap: var(--nms-gap-14); }
.nms-grafiek__legenda { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.nms-grafiek__reeks {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--nms-text-11);
  line-height: 1;
  color: var(--text-body);
}
.nms-grafiek__blok {
  width: var(--nms-legenda-blok);
  height: var(--nms-legenda-blok);
  flex: none;
  box-sizing: border-box;
}

.nms-grafiek__vlak { display: grid; gap: var(--nms-cell-pad-x); align-items: end; position: relative;
  height: var(--nms-grafiek-h);
  border-bottom: var(--nms-hairline-w) solid var(--nms-table-line-strong);
}
.nms-grafiek__doel {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: var(--nms-hairline-w) dashed var(--nms-accent-rule);
}
.nms-grafiek__categorie {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--nms-staaf-gap);
  height: 100%;
}
.nms-grafiek__staaf { width: var(--nms-staaf-w); box-sizing: border-box; }
.nms-grafiek__assen { display: grid; gap: var(--nms-cell-pad-x); }
.nms-grafiek__aslabel {
  font-size: var(--nms-text-11);
  line-height: 1.3;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: var(--nms-numeric);
}

/* De drie vullingen, in deze volgorde. Arcering is hier een DATAVULLING en niet het
   hoekwatermerk — vastgelegde uitzondering (bouwplan §8). Nooit achter tekst. */
.nms-grafiek__vulling--1 { background: var(--nimo-navy); }
.nms-grafiek__vulling--2 { background: var(--nms-hatch); border: var(--nms-hairline-w) solid var(--nimo-navy); }
.nms-grafiek__vulling--3 { background: transparent; border: var(--nms-hairline-w) solid var(--nimo-navy); }

/* Op donker is navy geen inkt meer; de vullingen keren mee via de tokens. */
[data-theme="night"] .nms-grafiek__vulling--1 { background: var(--nimo-blauwtint); }
[data-theme="night"] .nms-grafiek__vulling--2,
[data-theme="night"] .nms-grafiek__vulling--3 { border-color: var(--nimo-blauwtint); }