/* Certificate sheet — matches TemplatedPdfRenderer (A4 + CONTENT_MARGIN_* mm) */

:root {
  --cert-accent: #2c6e91;
  --cert-primary: #4a90e2;
  --cert-text: #1a2433;
  --cert-muted: #718096;
  --cert-table-label-bg: #2c6e91;
  --cert-table-row-alt: #eef5fb;
  --cert-table-border: #b8d0e4;
  --cert-font: Helvetica, Arial, sans-serif;
  --cert-page-w: 210mm;
  --cert-page-h: 297mm;
  --cert-margin-h: 24mm;
  --cert-margin-top: 48mm;
  --cert-margin-bottom: 65mm;
  --cert-qr-size: 30mm;
  --cert-signature-w: 45mm;
  --cert-signature-h: 18mm;
  --cert-corner-base-y: 22mm;
  --cert-viewer-bg: #c8cdd3;
  --cert-page-border: #b0b8c0;
  --cert-scale: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.certificate-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px;
  background: var(--cert-viewer-bg);
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.certificate-page[hidden] {
  display: none !important;
}

.certificate-toolbar {
  width: min(var(--cert-page-w), calc(100vw - 48px));
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.cert-download-btn {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: var(--cert-primary);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.28);
}

.cert-download-btn:hover {
  background: #357abd;
}

.cert-download-btn:active {
  background: #2a5d91;
}

.cert-download-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}

.certificate-viewport {
  width: calc(var(--cert-page-w) * var(--cert-scale));
  height: calc(var(--cert-page-h) * var(--cert-scale));
  flex-shrink: 0;
  position: relative;
}

/* True A4 sheet — letterhead PNG is full-page background */
.certificate-sheet {
  width: var(--cert-page-w);
  height: var(--cert-page-h);
  min-width: var(--cert-page-w);
  min-height: var(--cert-page-h);
  max-width: var(--cert-page-w);
  max-height: var(--cert-page-h);
  color: var(--cert-text);
  font-family: var(--cert-font);
  border: 1px solid var(--cert-page-border);
  box-shadow: 0 2px 10px rgba(26, 36, 51, 0.14);
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--cert-margin-top) var(--cert-margin-h) var(--cert-margin-bottom);
  overflow: hidden;
  transform: scale(var(--cert-scale));
  transform-origin: top left;
  background: #ffffff;
}

.cert-template-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.cert-content {
  position: relative;
  z-index: 1;
}

/* ── Title block (matches build_separation_story / custom _build_story) ── */

.cert-title-block {
  margin: 0;
  padding: 0;
}

.cert-title {
  margin: 0 0 3mm;
  font-size: 19pt;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: var(--cert-text);
}

.cert-rule {
  border: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.cert-rule--accent-thick {
  height: 1.8px;
  background: var(--cert-accent);
  margin: 0;
}

.cert-rule--accent-thin {
  height: 1px;
  background: var(--cert-accent);
  margin: 1px 0 4px;
}

.cert-issue-date {
  margin: 0;
  font-size: 9.5pt;
  line-height: 14px;
  text-align: center;
  color: var(--cert-muted);
}

.cert-issue-date strong {
  font-weight: 700;
  color: var(--cert-muted);
}

/* ── Body ───────────────────────────────────────────────────────────────── */

.cert-body {
  margin-top: 5mm;
}

.cert-salutation {
  margin: 0 0 3mm;
  font-size: 10.5pt;
  font-style: italic;
  line-height: 15px;
  color: var(--cert-text);
}

.cert-paragraph {
  margin: 0 0 3mm;
  font-size: 10.5pt;
  line-height: 17px;
  color: var(--cert-text);
  text-align: left;
}

.cert-paragraph:last-child {
  margin-bottom: 0;
}

.cert-paragraph strong {
  font-weight: 700;
}

/* ── Details table ───────────────────────────────────────────────────────── */

.cert-details {
  width: 100%;
  margin-top: 5mm;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--cert-table-border);
}

.cert-details th,
.cert-details td {
  border: 0.5px solid var(--cert-table-border);
  padding: 6px 10px;
  vertical-align: middle;
  text-align: left;
}

.cert-details th {
  width: 52mm;
  background: var(--cert-table-label-bg);
  color: #ffffff;
  font-size: 8.5pt;
  font-weight: 700;
  line-height: 12px;
}

.cert-details td {
  font-size: 10.5pt;
  line-height: 15px;
  color: var(--cert-text);
  background: #ffffff;
}

.cert-details tr.cert-details__row--alt td {
  background: var(--cert-table-row-alt);
}

/* ── Signature corner (PDF bottom-left) ─────────────────────────────────── */

.cert-signature-block {
  position: absolute;
  left: var(--cert-margin-h);
  bottom: calc(var(--cert-corner-base-y) + 14px);
  width: var(--cert-signature-w);
  height: var(--cert-signature-h);
  z-index: 2;
}

.cert-signature-img {
  display: block;
  width: var(--cert-signature-w);
  height: var(--cert-signature-h);
  object-fit: contain;
  object-position: left bottom;
}

/* ── QR corner (PDF bottom-right) ─────────────────────────────────────────── */

.cert-qr-block {
  position: absolute;
  right: var(--cert-margin-h);
  bottom: var(--cert-corner-base-y);
  width: var(--cert-qr-size);
  text-align: center;
  z-index: 2;
}

.cert-qr-host {
  width: var(--cert-qr-size);
  height: var(--cert-qr-size);
  margin: 0 auto 14px;
  line-height: 0;
}

.cert-qr-host img,
.cert-qr-host canvas {
  display: block;
  width: var(--cert-qr-size) !important;
  height: var(--cert-qr-size) !important;
  margin: 0 auto;
}

.cert-qr-caption {
  margin: 0;
  line-height: 1.25;
}

/* White on dark footer band — matches ReportLab _draw_qr_corner */
.cert-qr-caption--primary {
  margin-top: 0;
  font-size: 8pt;
  font-weight: 700;
  color: #ffffff;
  text-shadow:
    -0.3px 0 0 #000000,
    0.3px 0 0 #000000,
    0 -0.3px 0 #000000,
    0 0.3px 0 #000000,
    -0.3px -0.3px 0 #000000,
    0.3px -0.3px 0 #000000,
    -0.3px 0.3px 0 #000000,
    0.3px 0.3px 0 #000000;
}

/* ── Custom document rich text body ─────────────────────────────────────── */

.cert-custom-body {
  font-family: var(--cert-font);
  font-size: 10.5pt;
  line-height: 1.55;
  color: var(--cert-text);
}

.cert-custom-body p {
  margin: 0 0 0.75rem;
}

.cert-custom-body p:last-child {
  margin-bottom: 0;
}

@media print {
  :root {
    --cert-scale: 1 !important;
  }

  .certificate-toolbar {
    display: none;
  }

  .certificate-page {
    padding: 0;
    background: #ffffff;
    overflow: visible;
  }

  .certificate-viewport {
    width: var(--cert-page-w);
    height: var(--cert-page-h);
  }

  .certificate-sheet {
    position: static;
    transform: none;
    border: none;
    box-shadow: none;
    width: 100%;
    height: auto;
    min-height: auto;
    max-width: none;
    max-height: none;
  }
}