/* Knoppen: geen vh (iOS adressebalk kan layout laten schommelen) */
.knoppen {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  row-gap: 0.5rem;
}

/* Print-area: reserveer ruimte en isoleer layout & paint */
#print-area {
  /* fallback voor browsers zonder svh */
  min-height: 40vh;
  max-height: 70vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  contain: layout paint;
  /* voorkomt herflow buiten dit blok */
  backface-visibility: hidden;
  transform: translateZ(0);
  /* forceert compositing (stabieler in iOS) */
  will-change: contents;
  padding-bottom: 0.5rem;
}

/* Prefer dynamic/small viewport units op moderne iOS Safari */
@supports (height: 1svh) {
  #print-area {
    min-height: clamp(220px, 40svh, 520px);
    max-height: 70svh;
  }
}

/* Scroll-wrapper voor tabellen */
#print-area .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabel: liever horizontaal scrollen dan proppen */
#print-area table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  /* niet fixed op smal */
  min-width: 700px;
  /* zodat kolommen lucht houden */
  font-size: 0.95rem;
}

#print-area th,
#print-area td {
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#print-area th:first-child,
#print-area td:first-child {
  text-align: left;
}

@media (max-width: 576px) {
  #print-area table {
    font-size: 0.9rem;
  }

  #print-area th,
  #print-area td {
    padding: 4px 6px;
  }
}

/* Print: alleen schema tonen, volle pagina */
@media print {
  body * {
    visibility: hidden !important;
  }

  #print-area,
  #print-area * {
    visibility: visible !important;
  }

  #print-area {
    position: absolute;
    inset: 0;
  }

  #print-area table {
    min-width: 100%;
  }
}

/* Compacte "Uitgangspunten" – smaller en gecentreerd */
#print-area .facts-wrap {
  /* override van algemene table-wrap */
  overflow-x: visible;
  /* geen horizontale scrollbar nodig hier */
  max-width: 420px;
  /* zichtbaar smaller op desktop/tablet */
  margin: 0.25rem auto 0;
  /* centreren onder de kop */
}

#print-area table.facts {
  min-width: 0;
  /* <— override van globale min-width:700px */
  width: 100%;
  table-layout: fixed;
  /* compacte kolommen */
}

#print-area table.facts td {
  white-space: nowrap;
  /* labels/waarden op één regel */
}

/* Iets compacter op iPhone */
@media (max-width: 576px) {
  #print-area .facts-wrap {
    max-width: 340px;
  }

  /* nog wat smaller */
  #print-area table.facts {
    font-size: 0.95rem;
  }
}

/* Print: mag gewoon weer volle breedte */
@media print {
  #print-area table.facts {
    min-width: 100%;
  }
}