/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, module orderformulier: de eigen stijlen (klassen m-orderformulier-...). Verder de klassen van app.css
   (printvak, printlinks, printrechts, controlelijst, merkje, knop, tabel).
   Het voorbeeld van het formulier is een stuk van Xerox: wit papier, zwarte letter en het Xerox-logo, in de maten van
   de PDF in pt (1 pt is hier 1 px: A4 is 595 bij 842; tekst van 28 tot 567, zoals 10 tot 200 mm).
   PrimaPress 2.0 (W8-ui): het voorbeeld is PAPIER (docs/DESIGNSYSTEEM.md 8.4): het blijft wit, ook in de donkere modus, met de
   papiertokens van tokens.css (--pp-papier, --pp-papier-tekst, --pp-papier-schaduw); de maten van de PDF blijven. Het venster
   eromheen gebruikt alleen tokens. */

/* het venster */
.m-orderformulier-printvak { margin-top: var(--pp-r-1); }
.m-orderformulier-suborders { display: flex; flex-direction: column; gap: var(--pp-r-2); margin-top: var(--pp-r-1); }
.m-orderformulier-sub { display: flex; flex-direction: column; gap: 2px; }
.m-orderformulier-sub .sub { margin-left: 26px; }
.m-orderformulier-teksten textarea { width: 100%; }
.m-orderformulier-conflict .invoerlijst { margin: var(--pp-r-1) 0 0; }
.m-orderformulier-conflict .knoppen { margin-top: var(--pp-r-2); }
.m-orderformulier-logboek { margin-top: var(--pp-r-3); }

/* het voorbeeld van het formulier */
.m-orderformulier-bladen { display: flex; flex-direction: column; align-items: center; }
.m-orderformulier-blad {
  position: relative; flex: none; width: 595px; min-height: 842px; padding: 31px 28px 48px 28px;
  background: var(--pp-papier); color: var(--pp-papier-tekst); box-shadow: var(--pp-papier-schaduw);
  font-family: Helvetica, Arial, sans-serif; font-size: 9px; line-height: 10.5px;
}
.m-orderformulier-blad strong, .m-orderformulier-blad th { color: var(--pp-papier-tekst); }
.m-orderformulier-kopregel { display: grid; grid-template-columns: 1fr auto 70px 1fr; align-items: end; gap: 10px; margin-bottom: 6px; }
.m-orderformulier-titel { font-size: 15px; line-height: 17px; font-weight: 700; }
.m-orderformulier-barcode { display: flex; flex-direction: column; align-items: center; }
/* de streepjescode (0.1.3): de strepen in de maat van de PDF (6,5 mm hoog), het nummer eronder in 7 pt */
.m-orderformulier-strepen { display: block; fill: var(--pp-papier-tekst); }
.m-orderformulier-barcodetekst { font-size: 7px; line-height: 9px; }
.m-orderformulier-logo { width: 53px; height: auto; }
.m-orderformulier-nummer { font-size: 14px; line-height: 17px; font-weight: 700; text-align: right; }

.m-orderformulier-kopblok { border: .6px solid var(--pp-papier-tekst); margin-bottom: 7px; }
.m-orderformulier-koprij, .m-orderformulier-kopkolommen { display: grid; grid-template-columns: 210px 153px 1fr; }
.m-orderformulier-koprij { border-bottom: .6px solid var(--pp-papier-tekst); }
.m-orderformulier-koprij > div, .m-orderformulier-kopkolom { padding: 2px 4px; min-width: 0; }
/* zoals de PDF: elke waarde op een regel (de PDF zet een te lange waarde kleiner, tot 6 pt, en kort hem dan in; de
   server geeft die maat mee, zie de klassen m-orderformulier-pt..); wat dan nog niet past, eindigt op ... */
.m-orderformulier-koprij > div, .m-orderformulier-kopwaarde { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-orderformulier-koprij > div + div, .m-orderformulier-kopkolom + .m-orderformulier-kopkolom { border-left: .6px solid var(--pp-papier-tekst); }
/* de waarde op 26, 20 en 25 mm van de kolom, zoals de PDF (1 mm is 2,83 pt) */
.m-orderformulier-kopveld { display: grid; grid-template-columns: 70px minmax(0, 1fr); min-height: 10.5px; }
.m-orderformulier-kopkolom:nth-child(2) .m-orderformulier-kopveld { grid-template-columns: 54px minmax(0, 1fr); }
.m-orderformulier-kopkolom:nth-child(3) .m-orderformulier-kopveld { grid-template-columns: 67px minmax(0, 1fr); }
.m-orderformulier-kopveld .m-orderformulier-l { white-space: nowrap; }
.m-orderformulier-l { padding-right: 4px; }
.m-orderformulier-koprij .m-orderformulier-l { padding-right: 6px; }
.m-orderformulier-tussen { margin-left: 8px; }
.m-orderformulier-vet { font-weight: 700; }
.m-orderformulier-pt85 { font-size: 8.5px; }
.m-orderformulier-pt80 { font-size: 8px; }
.m-orderformulier-pt75 { font-size: 7.5px; }
.m-orderformulier-pt70 { font-size: 7px; }
.m-orderformulier-pt65 { font-size: 6.5px; }
.m-orderformulier-pt60 { font-size: 6px; }

.m-orderformulier-blok { margin-bottom: 6px; }
.m-orderformulier-kopje { margin: 0 0 3px; font-size: 11.5px; line-height: 13px; font-weight: 700; color: var(--pp-papier-tekst); }
.m-orderformulier-kader { border: .6px solid var(--pp-papier-tekst); padding: 2px 4px; min-height: 15px; margin-bottom: 5px; }
.m-orderformulier-regel { white-space: pre-wrap; overflow-wrap: anywhere; }
.m-orderformulier-checklist { display: grid; grid-template-columns: 18px minmax(0, 1fr); }
.m-orderformulier-veld { display: grid; grid-template-columns: 82px minmax(0, 1fr); }
.m-orderformulier-waarde { white-space: pre-line; overflow-wrap: anywhere; }

.m-orderformulier-inproef { display: grid; grid-template-columns: 96px 68px; margin-left: auto; width: 164px; border: .6px solid var(--pp-papier-tekst); border-bottom: 0; }
.m-orderformulier-inproef > * { padding: 1px 4px; }
.m-orderformulier-inproef > * + * { border-left: .6px solid var(--pp-papier-tekst); }

.m-orderformulier-tabel { width: 100%; border-collapse: collapse; table-layout: auto; margin: 0; }
.m-orderformulier-tabel th, .m-orderformulier-tabel td {
  border: .6px solid var(--pp-papier-tekst); padding: 1px 3px; text-align: left; vertical-align: top; font-size: 9px; line-height: 10.5px;
  overflow-wrap: anywhere; white-space: pre-line; background: var(--pp-papier);
}
.m-orderformulier-tabel th { font-weight: 700; white-space: nowrap; }
/* app.css haalt de onderrand van de laatste rij van een tabel weg (tbody tr:last-child td); op de PDF staat hij er wel */
.m-orderformulier-tabel tbody tr:last-child td { border-bottom: .6px solid var(--pp-papier-tekst); }
/* het drukformaat ("450,0 x 320,0 mm") op een regel, zoals de PDF */
.m-orderformulier-digitaal td:nth-child(4) { white-space: nowrap; }
.m-orderformulier-tabel tbody tr:only-child td { height: 11px; }
.m-orderformulier-proeftabel td + td, .m-orderformulier-proeftabel th + th { width: 68px; text-align: center; }
.m-orderformulier-proeftabel th + th { font-weight: 400; }
.m-orderformulier-papier td:nth-child(3), .m-orderformulier-papier td:nth-child(6) { text-align: right; }

.m-orderformulier-voet {
  position: absolute; left: 28px; right: 28px; bottom: 22px; display: flex; justify-content: space-between; font-size: 9px;
}