.prewrap { white-space: pre-wrap; }

@page { size: A4; margin: 0; }

body { background: #f2f2f2; }

/* A4 op scherm, maar ook flex zodat content netjes verdeeld wordt */
.doc-a4{
  width: 210mm;
  height: 297mm;
  margin: 12px auto;
  background: #fff;
  border: 1px dotted #bdbdbd;
  box-sizing: border-box;

  padding: 12mm 12mm 1mm 12mm;   /* onder niet extra, footer regelt zichzelf */
  color: #111;
  font-family: Arial, Helvetica, sans-serif;

  display: flex;                  /* <- belangrijk */
  flex-direction: column;         /* <- belangrijk */
}

/* Contentdeel krijgt de ruimte */
.doc-content{
  flex: 1;                         /* <- duwt footer naar onder */
  min-height: 0;
}

/* Header */
.doc-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
}
.doc-logo{ height: 48px; width:auto; object-fit:contain; }
.doc-header-right{
  text-align:right;
  font-size: 11px;
  line-height: 1.2;
}
.doc-company{ font-weight:700; letter-spacing:.3px; margin-bottom:3px; }
.doc-right-gap{ height: 6px; }

.doc-title{ margin-top: 10px; font-size: 16px; font-weight: 700; }

/* 2 kolommen */
.doc-topcols{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.doc-subtitle{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 6px;
}
.doc-text{ font-size: 11px; line-height: 1.2; }
.doc-text-strong{ font-size: 11px; font-weight: 700; line-height: 1.2; }

.kv2{
  display:grid;
  grid-template-columns: 110px 10px 1fr;
  row-gap: 4px;
  font-size: 11px;
}
.k{ color:#111; }
.sep{ text-align:center; color:#111; }
.v{ font-weight: 600; }

/* Tabel */
.doc-lines-wrap{ margin-top: 12px; }

.doc-lines{
  width:100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.doc-lines thead th{
  font-weight:700;
  padding: 4px 4px;
  border-bottom: 2px solid #111;
  border-top: 2px solid #111;
  text-align: left;
}

/* vaste breedtes */
.doc-lines thead th:nth-child(1){ width: 42px; }
.doc-lines thead th:nth-child(3){ width: 120px; }
.doc-lines thead th:nth-child(4){ width: 70px; }
.doc-lines thead th:nth-child(5){ width: 70px; }
.doc-lines thead th:nth-child(6){ width: 70px; }
.doc-lines thead th:nth-child(7){ width: 170px; }

.doc-lines tbody td{
  padding: 4px 4px;
  border-bottom: 1px solid #d0d0d0;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tc{ text-align:center; }
.tr{ text-align:right; }

/* FIX: Aantal kolom netjes */
.doc-lines thead th:nth-child(5){ text-align:right; }
.doc-lines tbody td:nth-child(5){ text-align:right; }

.print-only{ display:none; }

/* Footer zit onderaan door flex */
.doc-footer{
  margin-top: auto;              /* <- duwt naar onder */
  font-size: 9px;
  color:#333;
  padding-top: 6px;
  border-top: 1px solid #bdbdbd;

  display:flex;
  flex-direction: column;
  gap: 4px;
}

.footer-disclaimer{ line-height: 1.2; }
.footer-meta{
  display:flex;
  justify-content: space-between;
  gap: 6mm;
  line-height: 1.1;
  white-space: nowrap;
}
.footer-page{ text-align:right; color:#666; margin-top: 2px; }

@media print{
  body { background:#fff !important; }
  nav, .d-print-none { display:none !important; }

  .container{ max-width:none !important; margin:0 !important; padding:0 !important; }

  .doc-a4{
    border: none !important;
    margin: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    padding: 0 !important;               /* marges via @page */
  }

  /* binnen print moeten we de padding als “inner margin” terugzetten */
  .doc-a4 > *{
    padding-left: 12mm;
    padding-right: 12mm;
  }
  /* boven marge */
  .doc-header{ padding-top: 12mm; }
  /* footer krijgt ook padding onder */
  .doc-footer{ padding-bottom: 12mm; }

  a{ color:#000; text-decoration:none; }
  .print-only{ display:table-cell; }
}

@media print {
  .no-print { display: none !important; }
}