/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, module orderbevestiging: de eigen stijlen (klassen m-orderbevestiging-...). Verder de componenten en
   klassen van app.css (venster, tabbladen, feitenbalk, printvak, printkeuzes, controlelijst, mail-voorbeeld,
   meldingen, merkjes, knoppen). PrimaPress 2.0: buiten het papier alleen indeling met de tokens voor ruimte en maat;
   geen kleurcode, geen lettergrootte, geen afronding, schaduw of rand met een getal.

   PAPIER (de uitzondering van docs/ARCHITECTUUR.md 3.3): het voorbeeld van de brief is een klantdocument van Xerox.
   Het blijft wit papier met een zwarte letter, ook in de donkere modus (de tokens --pp-papier-...), in de maten van
   de brief in pt (1 pt is hier 1 px; links 82,2, dubbele punt 153,2, waarde 166,2, Exclusief BTW tot 422,2 en
   Inclusief BTW tot 507,2, zoals de offertebrief). Alle regels van het papier staan onderaan, tussen de regels
   "PAPIER" en "einde PAPIER", en hun kiezers beginnen met .m-orderbevestiging-bladen of .m-orderbevestiging-blad. */

/* ---------------------------------------------------------------- het venster */
.m-orderbevestiging-plek { min-width: 0; }
.m-orderbevestiging-feiten { margin: 0 0 var(--pp-r-3); }
.m-orderbevestiging-printvak { margin-top: var(--pp-r-1); }
.m-orderbevestiging-keuzeknoppen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-r-2); margin: var(--pp-r-2) 0 var(--pp-r-3); }
.m-orderbevestiging-keuzeknoppen > p { margin: 0; }
.m-orderbevestiging-suborders { max-height: calc(var(--pp-hoogte-rij) * 12); overflow-y: auto; padding: var(--pp-r-1); }

/* ---------------------------------------------------------------- het tabblad in het Order basisvenster */
.m-orderbevestiging-tab { display: flex; flex-direction: column; gap: var(--pp-r-3); min-width: 0; }
.m-orderbevestiging-tab > .knoppen { margin: 0; }
.m-orderbevestiging-links a { margin-right: var(--pp-r-3); white-space: nowrap; }
/* op een telefoon de bestanden onder elkaar, zodat de kolom in beeld blijft */
@media (max-width: 760px) { .m-orderbevestiging-links a { display: block; margin-right: 0; } }
.m-orderbevestiging-versies td { vertical-align: top; }

/* ---------------------------------------------------------------- PAPIER: het voorbeeld van de brief */
/* safe center: is het vak smaller dan het blad, dan begint het blad links en schuift het vak (anders viel de linkerkant
   buiten bereik); op een telefoon kleiner, zodat het hele blad in het venster past */
.m-orderbevestiging-bladen { display: flex; flex-direction: column; align-items: safe center; }
@media (max-width: 760px) { .m-orderbevestiging-bladen { zoom: .8; } }
@media (max-width: 640px) { .m-orderbevestiging-bladen { zoom: .6; } }
@media (max-width: 480px) { .m-orderbevestiging-bladen { zoom: .5; } }
.m-orderbevestiging-blad {
  position: relative; flex: none; width: 595px; min-height: 842px; padding: 113px 72px 70px 82px;
  background: var(--pp-papier); color: var(--pp-papier-tekst); box-shadow: var(--pp-papier-schaduw);
  font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 12.65px;
}
.m-orderbevestiging-blad strong { color: var(--pp-papier-tekst); }
.m-orderbevestiging-blad .m-orderbevestiging-hoofd { position: absolute; top: 0; left: 0; right: 0; height: 130px; }
/* het logo: alleen het rode woordmerk (besluit B-78), zoals de PDF: het vak is de uitsnede offertebrief.LOGO_UITSNEDE
   (pixels 147 tot 391 en 46 tot 98 van het beeld van 420 x 145) op 463,38 / 38,76, 78,43 x 16,71 pt; het hele beeld
   staat erin, verschoven, en het beeldmerk valt buiten het vak */
.m-orderbevestiging-blad .m-orderbevestiging-logo {
  position: absolute; left: 463.38px; top: 38.76px; width: 78.43px; height: 16.71px; overflow: hidden;
}
.m-orderbevestiging-blad .m-orderbevestiging-logo img {
  position: absolute; left: -47.25px; top: -14.79px; width: 135px; height: 46.61px; max-width: none;
}
.m-orderbevestiging-blad .m-orderbevestiging-afzender {
  position: absolute; left: 463px; top: 84px; display: flex; flex-direction: column; font-size: 8px; line-height: 10px;
}
.m-orderbevestiging-blad .m-orderbevestiging-onderstreept { text-decoration: underline; }
.m-orderbevestiging-blad .m-orderbevestiging-adres div, .m-orderbevestiging-blad .m-orderbevestiging-regel { white-space: pre-wrap; }
.m-orderbevestiging-blad .m-orderbevestiging-vet { font-weight: 700; }
.m-orderbevestiging-blad .m-orderbevestiging-alinea { margin: 0; white-space: pre-wrap; }
.m-orderbevestiging-blad .m-orderbevestiging-w1 { margin-top: 12.65px; }
.m-orderbevestiging-blad .m-orderbevestiging-w2 { margin-top: 25.3px; }
.m-orderbevestiging-blad .m-orderbevestiging-w3 { margin-top: 37.95px; }
.m-orderbevestiging-blad .m-orderbevestiging-w4 { margin-top: 50.6px; }
.m-orderbevestiging-blad .m-orderbevestiging-w5 { margin-top: 63.25px; }
.m-orderbevestiging-blad .m-orderbevestiging-w6 { margin-top: 75.9px; }
.m-orderbevestiging-blad .m-orderbevestiging-w7 { margin-top: 88.55px; }
.m-orderbevestiging-blad .m-orderbevestiging-veld, .m-orderbevestiging-blad .m-orderbevestiging-prijs {
  display: grid; grid-template-columns: 71px 13px minmax(0, 1fr); align-items: start;
}
.m-orderbevestiging-blad .m-orderbevestiging-waarde { white-space: pre-line; overflow-wrap: anywhere; }
.m-orderbevestiging-blad .m-orderbevestiging-prijs { grid-template-columns: 71px 13px minmax(0, 1fr) 70px 85px; margin-right: 16px; }
.m-orderbevestiging-blad .m-orderbevestiging-bedrag { display: flex; justify-content: flex-end; white-space: nowrap; }
.m-orderbevestiging-blad .m-orderbevestiging-bedrag .m-orderbevestiging-euro { margin-right: auto; }
.m-orderbevestiging-blad .m-orderbevestiging-excl { padding-left: 12px; }
.m-orderbevestiging-blad .m-orderbevestiging-incl { padding-left: 30px; }
.m-orderbevestiging-blad .m-orderbevestiging-briefvoet {
  position: absolute; left: 79px; right: 60px; bottom: 30px; display: flex; justify-content: space-between;
  align-items: flex-end; font-size: 8px; line-height: 10px;
}
.m-orderbevestiging-blad .m-orderbevestiging-blad-nr { color: var(--pp-papier-grijs); font-size: 10px; }
/* ---------------------------------------------------------------- einde PAPIER */