/* A4-documenten (offertes en facturen), opgemaakt zoals de CMedia-offerte. Alle maten in mm. */
.docs { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.docs-meet { position: absolute; left: -10000px; top: 0; visibility: hidden; }

.a4 {
  width: 210mm; height: 297mm; flex: none;
  position: relative; overflow: hidden;
  background: #fff; color: #1b1b1b; text-align: left;
  font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 300; font-size: 9.6pt; line-height: 1.5;
  zoom: var(--zoom, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 24px rgba(0, 0, 0, 0.08);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.a4 *, .a4 *::before, .a4 *::after { box-sizing: border-box; }
.a4 b, .a4 strong { font-weight: 500; }
.a4 p:not([class]) { margin: 0; }
.a4 img { display: block; }
.a4-logo { position: absolute; top: 15mm; right: 20mm; width: 53mm; height: auto; }
/* rechts 12 mm padding: het kostenoverzicht loopt daar met een negatieve marge in door tot 200 mm */
.a4-body { position: absolute; top: 42mm; left: 20mm; right: 10mm; padding-right: 12mm; bottom: 25mm; overflow: hidden; }
.a4-pnr { position: absolute; right: 20mm; bottom: 19.6mm; font-size: 9pt; color: #333; }
.a4-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18.6mm;
  background: #000; border-top: 1.6mm solid #ff5733; color: #fff;
  font: 400 7.4pt/1.45 Helvetica, Arial, sans-serif;
}
.a4-foot > div { position: absolute; top: 4.3mm; white-space: nowrap; }
.a4-foot .f1 { left: 14mm; }
.a4-foot .f2 { left: 72.7mm; }
.a4-foot .f3 { left: 149.6mm; }
.a4-foot b { font-weight: 700; }
.a4-foot .f2 b { display: inline-block; min-width: 8.5mm; }
.a4-foot a { color: #fff; text-decoration: underline; }
.a4-concept {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 500 96pt/1 Roboto, Arial, sans-serif; letter-spacing: 4mm; color: rgba(0, 0, 0, 0.045); transform: rotate(-32deg);
}

/* omslag */
.a4-cover-logo { position: absolute; left: 40mm; top: 104mm; width: 128mm; height: auto; }
.a4-cover-title { position: absolute; left: 20mm; right: 20mm; top: 208mm; font-weight: 400; font-size: 25pt; line-height: 1.2; }
.a4-cover-sub { font-weight: 300; font-size: 12.5pt; color: #333; margin-top: 1.2mm; }

/* brief */
.d-adres { margin-top: 4.6mm; font-size: 9.8pt; line-height: 4.85mm; }
.d-bar { margin: 12mm 0 0 -2mm; width: 170mm; height: 8.8mm; padding-left: 2mm; background: #000; color: #fff; font-weight: 400; font-size: 15pt; line-height: 8.8mm; }
.d-bar.first { margin-top: 2mm; }
.d-meta { display: grid; grid-template-columns: 52.5mm 55mm 1fr; margin-top: 9.5mm; }
.d-meta.vier { grid-template-columns: 40mm 40mm 40mm 1fr; }
.d-meta .l { font-weight: 500; font-size: 7.4pt; line-height: 1.35; color: #111; }
.d-meta .v { font-size: 9.8pt; line-height: 1.45; padding-right: 3mm; }
.d-p { margin: 0 0 4.9mm; font-size: 9.8pt; white-space: pre-wrap; }
.d-p.eerst { margin-top: 7mm; }
.d-sig { height: 24mm; margin: 1mm 0 2mm; }
.d-sig img { height: 100%; width: auto; max-width: 70mm; object-fit: contain; object-position: left center; }
.d-naam { font-size: 9.8pt; line-height: 1.45; }

/* omschrijving */
.d-kop { font-weight: 500; font-size: 7.6pt; letter-spacing: 0.15pt; text-transform: uppercase; margin: 4.5mm 0 3mm; }
.d-kv { display: grid; grid-template-columns: 23mm 1fr; margin: 0; font-size: 9pt; line-height: 1.5; }
.d-kv dt { font-weight: 500; font-size: 7.6pt; line-height: 1.95; }
.d-kv dd { margin: 0; }
.d-rule { border-bottom: 0.3mm solid #222; margin: -1.5mm 0 2.5mm; }
.d-tekst { font-size: 9.3pt; line-height: 1.5; }
.d-tekst.leeg { height: 3.4mm; }
.d-tekst u { text-decoration: underline; text-underline-offset: 0.6mm; }

/* kostenoverzicht */
.d-h1 { font-weight: 400; font-size: 19pt; line-height: 1.2; margin: 2mm 0 3.6mm; }
.k-row { display: grid; grid-template-columns: 92mm 27.5mm 27.5mm 33mm; align-items: start; margin-right: -12mm; font-size: 9.4pt; line-height: 1.5; }
.k-oms { padding-right: 4mm; min-width: 0; overflow-wrap: anywhere; }
.k-n { text-align: right; white-space: nowrap; }
.k-head { background: #000; color: #fff; font-weight: 500; font-size: 8.2pt; text-transform: uppercase; min-height: 6.2mm; align-items: center; }
.k-post { margin-top: 0; }
.k-post .k-oms span { display: block; width: 87mm; background: #d9d9d9; font-weight: 500; padding-left: 0.6mm; }
.k-post .k-n { font-weight: 500; }
.k-txt .k-oms { white-space: pre-wrap; }
.k-toel { font-size: 7.6pt; line-height: 1.4; color: #8a8a8a; margin-bottom: 0.6mm; }
.k-nac { font-style: italic; font-size: 7.4pt; color: #444; margin-left: 2mm; }
.k-gap { height: 7mm; }
.k-gap.klein { height: 2.5mm; }

/* totaal en ondertekening */
.d-totaal { display: flex; justify-content: flex-end; gap: 7mm; margin: 6mm -10mm 17mm 0; font-weight: 500; font-size: 9.4pt; }
.d-sign { display: grid; grid-template-columns: 86mm 1fr; margin-top: 9mm; font-size: 9.4pt; line-height: 1.5; }
.d-sign .d-sig { margin: 3mm 0 2mm; }
.d-getekend { font-size: 7.4pt; color: #8a8a8a; margin-top: 1mm; }

/* factuur */
.f-ref { display: grid; grid-template-columns: 30mm 1fr; margin: 6mm 0 0; font-size: 9pt; line-height: 1.55; }
.f-ref dt { font-weight: 500; font-size: 7.4pt; line-height: 2; }
.f-ref dd { margin: 0; }
.f-tot { margin: 5mm -12mm 0 auto; width: 93mm; font-size: 9.4pt; }
.f-tot > div { display: flex; justify-content: space-between; padding: 0.8mm 0; }
.f-tot .tot { background: #000; color: #fff; font-weight: 500; padding: 1.6mm 0 1.6mm 2mm; margin-top: 1.4mm; }
.f-tot .tot span:last-child, .f-tot > div span:last-child { text-align: right; }
.f-betaal { margin-top: 10mm; font-size: 9.4pt; }

#print-root { display: none; }
@media print {
  /* ook gewoon Ctrl+P op een detailpagina geeft nette pagina's */
  .docs { gap: 0; display: block; }
  .docs .a4 { zoom: 1 !important; box-shadow: none; break-after: page; page-break-after: always; }
  .docs .a4:last-child { break-after: auto; page-break-after: auto; }
}
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; }
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  #print-root .a4 { zoom: 1 !important; box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  #print-root .a4:last-child { break-after: auto; page-break-after: auto; }
}