/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, module tweerichting: het blok Ook in Prindustry, het venster na ENTER en het tabblad Prindustry.
 * PrimaPress 2.0 (W8-ui): alleen indeling van de eigen schermen, met de tokens van tokens.css (de laag betekenis en de
 * oude namen; docs/DESIGNSYSTEEM.md 8.4). De keuzes zijn de printkeuzes van app.css (zoals het printvenster na ENTER), de
 * stand in Prindustry is de feitenbalk, wat uit Prindustry komt het paarse merkje (m-paars). Geen kleurcode, geen
 * lettermaat, geen afronding, schaduw of rand met een getal. Eigen klassen beginnen met m-tweerichting-. */

/* het blok (ook in het printvenster van de module printen) */
.m-tweerichting-blok { margin-top: var(--pp-r-4); padding-top: var(--pp-r-2); border-top: thin solid var(--pp-rand); }
.m-tweerichting-blok h3.blokkop { margin-top: var(--pp-r-2); }
.m-tweerichting-lijst { margin: var(--pp-r-2) 0 var(--pp-r-3); }
.m-tweerichting-item .naam { min-width: 0; }
.m-tweerichting-item .naam strong { font-weight: var(--pp-gewicht-half); }
.m-tweerichting-item.m-tweerichting-uit { cursor: default; }
/* een regel die nu niet kan: een pictogram op de plek van het vinkje */
.m-tweerichting-pictogram { grid-row: 1 / 3; display: inline-flex; padding-top: var(--pp-r-1); color: var(--pp-tekst-3); }
.m-tweerichting-tekst { display: flex; flex-direction: column; gap: var(--pp-r-1); min-width: 0; }
.m-tweerichting-wijziging { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-r-1) var(--pp-r-2); overflow-wrap: anywhere; }
.m-tweerichting-pijl { color: var(--pp-tekst-3); }
.m-tweerichting-reden { color: var(--pp-tekst-2); }
.m-tweerichting-letop ul { margin: var(--pp-r-1) 0 0; padding-left: var(--pp-r-4); }
/* de keuze uit de kandidaten (MP Status, Ordermanager): de ordermanager kiest, PrimaPress nooit */
.m-tweerichting-keuze { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-r-2); }
.m-tweerichting-keuze select { max-width: 100%; }
.m-tweerichting-grijs { margin-top: var(--pp-r-3); }
.m-tweerichting-grijs summary { cursor: pointer; color: var(--pp-tekst-2); }
.m-tweerichting-grijs > .printkeuzes { margin-top: var(--pp-r-2); }
.m-tweerichting-zelf { margin: var(--pp-r-2) 0 var(--pp-r-3); }

/* het tabblad Prindustry: feitenbalk, wat er gebeurde als tijdlijn */
.m-tweerichting-tab .feitenbalk { margin: 0 0 var(--pp-r-3); }
.m-tweerichting-tab .knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-r-2); margin: var(--pp-r-2) 0 var(--pp-r-3); }
.m-tweerichting-staatal ul { margin: var(--pp-r-1) 0 0; padding-left: var(--pp-r-4); }
.m-tweerichting-staatal li { margin: var(--pp-r-1) 0; }
.m-tweerichting-tijdlijn { list-style: none; margin: var(--pp-r-3) 0 0; padding: 0; }
.m-tweerichting-tijdstap {
  position: relative; display: grid; grid-template-columns: var(--pp-r-6) minmax(0, 1fr) auto; align-items: start;
  gap: var(--pp-r-1) var(--pp-r-3); padding: 0 0 var(--pp-r-4);
}
.m-tweerichting-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-tweerichting-tijdstap:last-child { padding-bottom: 0; }
.m-tweerichting-tijdstap:last-child::before { content: none; }
.m-tweerichting-punt {
  display: inline-grid; place-items: center; width: var(--pp-r-6); height: var(--pp-r-6); border-radius: var(--pp-straal-rond);
  border: thin solid var(--pp-neutraal-rand); background: var(--pp-neutraal-vlak); color: var(--pp-neutraal-tekst);
}
.m-tweerichting-punt.m-tweerichting-goed { border-color: var(--pp-ok-rand); background: var(--pp-ok-vlak); color: var(--pp-ok-tekst); }
.m-tweerichting-punt.m-tweerichting-fout { border-color: var(--pp-fout-rand); background: var(--pp-fout-vlak); color: var(--pp-fout-tekst); }
.m-tweerichting-punt.m-tweerichting-open { border-color: var(--pp-info-rand); background: var(--pp-info-vlak); color: var(--pp-info-tekst); }
.m-tweerichting-punt.m-tweerichting-let { border-color: var(--pp-let-rand); background: var(--pp-let-vlak); color: var(--pp-let-tekst); }
.m-tweerichting-tijdinhoud { display: flex; flex-direction: column; gap: var(--pp-r-1); min-width: 0; }
.m-tweerichting-tijdkop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-r-1) var(--pp-r-2); }
.m-tweerichting-tijdrechts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--pp-r-1); text-align: right; }
.m-tweerichting-tijdrechts .sub { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* het scherm met de koppeltabel */
.m-tweerichting-mp { display: flex; flex-wrap: wrap; gap: var(--pp-r-1); }

@media (max-width: 760px) {
  .m-tweerichting-tijdstap { grid-template-columns: var(--pp-r-6) minmax(0, 1fr); }
  .m-tweerichting-tijdrechts { grid-column: 2; align-items: flex-start; text-align: left; }
}