/* print.css — DPP print styles (A4 portrait) */
/* Keep colors, tidy layout, and produce a table-like structure for rows.
   This file is additive: it doesn't require removing existing CSS. */

/* 1) Page + color fidelity */
@page {
  size: A4 portrait;
  margin: 12mm;
}
html, body {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
body {
  background: #fff !important;
  color: #111827;
  font-size: 11pt;
  line-height: 1.45;
}

/* 2) Hide interactive / non-print UI that might slip through */
.menu,
#backToTop,
.notice:not(.ok),
.tools-panel,
.reveal,
.reveal-btn,
.overlay,
.video-embed iframe {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

/* Keep footer but lighten it for print readability */
footer.site-footer {
  border-top: 0.5pt solid #e5e7eb !important;
  background: #fff !important;
}

/* 3) Header adjustments */
.preheader {
  position: static !important;
  background: #fff !important;
  border: 0 !important;
  margin-bottom: 6mm;
}
.preheader .wrap {
  padding: 0 !important;
}
.preheader img {
  max-width: 220px !important;
}
.preheader h1 {
  font-size: 20pt !important;
  margin: 0 0 2mm !important;
}
.pid-lens {
  border: 0.5pt solid #e5e7eb !important;
  background: #fff !important;
  padding: 4px 8px !important;
}

/* 4) Hero image + QR */
.hero .img {
  height: 60mm !important;
  border: 0.5pt solid #e5e7eb !important;
  background-color: #f3f4f6 !important;
}
#qrcode {
  max-width: 30mm !important;
  padding: 4mm !important;
  border-radius: 6mm !important;
  border: 0.5pt solid #e5e7eb !important;
  float: right !important;
}

/* 5) Cards and sections become print-friendly blocks */
.card {
  background: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 8mm !important;
}
.card h2 {
  font-size: 14pt !important;
  margin: 0 0 3mm !important;
}
details.section {
  border: 0.5pt solid #e5e7eb !important;
  border-radius: 6px !important;
  overflow: visible !important;
  page-break-inside: avoid !important;
}
details.section summary {
  font-weight: 800 !important;
  padding: 6px 8px !important;
  border-bottom: 0.5pt solid #e5e7eb !important;
}
details.section summary::after {
  /* remove disclosure glyph so it doesn't print as a big box */
  content: "" !important;
  display: none !important;
}

/* 6) Table-like rows */
.rows {
  padding: 0 !important;
}
/* mini rows (overview) */
.minirow,
.row {
  display: grid !important;
  grid-template-columns: 38% 62% !important;
  gap: 6px 10px !important;
  border-bottom: 0.5pt solid #e5e7eb !important;
  background: #fff !important;
  border-radius: 0 !important;
  padding: 6px 4px !important;
  page-break-inside: avoid !important;
}
/* Remove top border on the very first row in a section */
.rows .row:first-child,
.minirows .minirow:first-child {
  border-top: 0.5pt solid #e5e7eb !important;
}
.row label,
.minirow label {
  font-size: 9pt !important;
  color: #374151 !important;
  margin: 0 !important;
  align-self: start !important;
}
.row .val,
.minirow .val {
  font-weight: 600 !important;
  color: #111827 !important;
  word-break: break-word !important;
}
.val img.dpp-image {
  max-width: 100% !important;
  height: auto !important;
  border: 0.5pt solid #e5e7eb !important;
  border-radius: 4px !important;
  background: #f3f4f6 !important;
  page-break-inside: avoid !important;
}
/* Progress bars: draw a thin bar with width retained */
.bar {
  height: 6px !important;
  border-radius: 3px !important;
  border: 0.5pt solid #e5e7eb !important;
  background: #f9fafb !important;
}
.bar > i {
  height: 100% !important;
  /* gradient prints well thanks to color-adjust above */
}

/* 7) Links: show URL after text for the PDF */
a[href^="http"]:after {
  content: " (" attr(href) ")";
  font-weight: 400;
  font-size: 8pt;
  color: #6b7280;
  word-break: break-all;
}

/* 8) STEP viewer: ensure it doesn't overflow page */
.step-viewer {
  height: auto !important;
  min-height: 24mm !important;
  border: 0.5pt solid #e5e7eb !important;
}
.step-viewer canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* 9) Pagination control */
h2, details.section summary {
  break-after: avoid !important;
}
.row, .minirow, .rows, .minirows, .card {
  break-inside: avoid !important;
}
footer.site-footer {
  break-inside: avoid !important;
  margin-top: 8mm !important;
}

/* Optional: landscape variant for wide tables
@page { size: A4 landscape; }
*/