/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, module portaalschrijven: alleen de indeling van de eigen schermen (PrimaPress 2.0, W8-ui). Kleuren, maten en
 * afrondingen alleen met de tokens van tokens.css (docs/DESIGNSYSTEEM.md 8.4); knoppen, merkjes, meldingen en tabellen zijn
 * de componenten van de kern. Het plan van een handeling is een tijdlijn: paars wat de brug uit Prindustry leest, navy wat
 * hij naar Prindustry schrijft. */

/* Een adres of veld van het portaal in een plan: vaste letterbreedte, mag overal afbreken. */
.m-portaalschrijven-adres { font-family: var(--pp-letter-mono); word-break: break-all; }

/* Het vak met het vinkje voor het akkoord of de bevestiging van de ordermanager. */
.m-portaalschrijven-akkoord .vinkje { display: flex; margin-top: var(--pp-r-2); }
.m-portaalschrijven-plan h3.blokkop { margin-top: var(--pp-r-4); }
.m-portaalschrijven-voorbeeld, .m-portaalschrijven-voortgang { margin-top: var(--pp-r-3); }

/* De knoppen van de handelingen: een raster, met de reden (of de uitleg) onder elke knop. */
.m-portaalschrijven-handelingen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--pp-r-2) var(--pp-r-4);
  list-style: none; margin: var(--pp-r-2) 0 var(--pp-r-3); padding: 0;
}
.m-portaalschrijven-handelingen li { min-width: 0; }
.m-portaalschrijven-uitvoering { margin-bottom: var(--pp-r-4); }

/* De stappen van de brug als tijdlijn: een punt met het nummer, een lijn naar de volgende stap. */
.m-portaalschrijven-tijdlijn { list-style: none; margin: var(--pp-r-2) 0 0; padding: 0; }
.m-portaalschrijven-tijdstap {
  position: relative; display: grid; grid-template-columns: var(--pp-r-6) minmax(0, 1fr); gap: var(--pp-r-1) var(--pp-r-3);
  padding: 0 0 var(--pp-r-4);
}
.m-portaalschrijven-tijdstap::before {
  content: ""; position: absolute; left: calc(var(--pp-r-6) / 2); top: var(--pp-r-6); bottom: 0; border-left: thin solid var(--pp-rand);
}
.m-portaalschrijven-tijdstap:last-child { padding-bottom: 0; }
.m-portaalschrijven-tijdstap:last-child::before { content: none; }
.m-portaalschrijven-punt {
  display: inline-grid; place-items: center; width: var(--pp-r-6); height: var(--pp-r-6); border-radius: var(--pp-straal-rond);
  font-weight: var(--pp-gewicht-vet); font-variant-numeric: tabular-nums;
}
.m-portaalschrijven-leest .m-portaalschrijven-punt {
  border: thin solid var(--pp-portaal-rand); background: var(--pp-portaal-vlak); color: var(--pp-portaal-tekst);
}
.m-portaalschrijven-schrijft .m-portaalschrijven-punt { border: thin solid var(--pp-navy); background: var(--pp-navy); color: var(--pp-op-navy); }
.m-portaalschrijven-tijdinhoud { display: flex; flex-direction: column; gap: var(--pp-r-1); min-width: 0; }
.m-portaalschrijven-tijdkop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-r-1) var(--pp-r-2); }