/* Printblad: codekaartjes om op te hangen + spiekbriefje voor de ouder.
   Dit stylesheet is met media="print" gekoppeld en doet op het scherm niets. */

body > *:not(#printgebied) {
  display: none !important;
}

#printgebied {
  display: block !important;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #000;
}

@page {
  size: A4 portrait;
  margin: 10mm;
}

.print-pagina {
  break-after: page;
}

/* ---------- kaartjes ---------- */

.print-kaart {
  position: relative;
  height: 125mm;
  border: 2mm dashed #444;
  border-radius: 8mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  break-inside: avoid;
  padding: 6mm;
}

.pk-titel {
  font-size: 13pt;
  color: #333;
}

.pk-stop {
  font-size: 42pt;
  font-weight: 900;
  margin: 1mm 0 4mm;
}

.pk-code-label {
  font-size: 13pt;
  letter-spacing: 0.4em;
  color: #333;
}

.pk-code {
  font-size: 64pt;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.pk-voet {
  font-size: 11pt;
  margin-top: 5mm;
  color: #333;
}

.pk-hoek {
  position: absolute;
  font-size: 18pt;
}

.pk-hoek--lb { top: 4mm; left: 5mm; }
.pk-hoek--rb { top: 4mm; right: 5mm; }

.print-knip {
  text-align: center;
  color: #777;
  font-size: 10pt;
  margin: 3mm 0;
}

/* ---------- spiekbriefje ---------- */

.print-spiek {
  break-before: page;
  font-size: 11pt;
}

.print-spiek h1 {
  font-size: 16pt;
  margin: 0 0 2mm;
}

.print-spiek .spiek-sub {
  margin: 0 0 5mm;
  color: #333;
}

.print-spiek table {
  width: 100%;
  border-collapse: collapse;
}

.print-spiek th,
.print-spiek td {
  border: 1pt solid #999;
  padding: 2mm 2.5mm;
  text-align: left;
  vertical-align: top;
}

.print-spiek th {
  background: #eee;
}

.print-spiek tr {
  break-inside: avoid;
}

.spiek-eind {
  margin-top: 5mm;
  font-size: 12pt;
}