/* ==========================================================================
   A4 print styling shared by Training Reports, Receipts and Quotations.

   On screen, #<doc>PrintRoot stays empty/hidden — the app chrome is what's
   visible. When Print Now / Print Preview runs, JS fills the root with the
   document markup and calls window.print(); @media print then hides the app
   chrome and shows only the root, exactly like the existing certificate and
   passport print pages.
   ========================================================================== */
.doc-print-root { display: none; }

.doc-page {
  width: 210mm;
  min-height: 297mm;
  padding: 18mm 16mm;
  background: #fff;
  color: #1a1f2b;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  box-sizing: border-box;
  /* A pasted long reference/URL/company name with no spaces must still wrap
     inside the page rather than overflow it. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.doc-letterhead {
  border-bottom: 2px solid #16335a;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
/* Sits above the org name. When no logo is configured the image is hidden
   and the letterhead closes up with no reserved gap. */
.doc-org-logo { max-height: 64px; max-width: 260px; margin-bottom: 8px; object-fit: contain; object-position: left center; }
/* An uploaded logo has no .brand-logo-img class and so is not gated by the
   probe — it shows as soon as it loads, and hides itself if it cannot. */
.doc-org-logo:not(.brand-logo-img) { display: block; }
.doc-org-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 800; color: #16335a; }
.doc-org-tagline { font-size: 11px; color: #626d81; margin-top: 2px; }
.doc-org-contact { font-size: 10.5px; color: #4b5568; margin-top: 6px; }

.doc-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: #101828; margin-bottom: 14px;
}

.doc-meta-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 12px; }
.doc-meta-table td { padding: 5px 8px; border: 1px solid #dde1e8; }
.doc-meta-table td:nth-child(1), .doc-meta-table td:nth-child(3) { font-weight: 700; color: #4b5568; width: 16%; background: #f7f8fa; }

.doc-section { margin-bottom: 14px; }
.doc-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #626d81; margin-bottom: 4px; }
.doc-section p { margin: 0; }

.doc-line-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 12px; table-layout: fixed; }
.doc-line-table th, .doc-line-table td { border: 1px solid #dde1e8; padding: 7px 9px; text-align: left; }
.doc-line-table th { background: #16335a; color: #fff; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
/* Numbers/currency must never break mid-value — the page-wide word-break
   rule (for long pasted descriptions/URLs) would otherwise wrap "1,800.00"
   into "1,800." / "00" whenever a long description squeezes this column. */
.doc-line-table td.num, .doc-line-table th.num { text-align: right; white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.doc-line-table td:first-child, .doc-line-table th:first-child { width: 40%; }

.doc-totals-table { width: 45%; margin-left: auto; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.doc-totals-table td { padding: 6px 9px; }
.doc-totals-table td:first-child { color: #4b5568; }
.doc-totals-table td:last-child { text-align: right; font-weight: 600; }
.doc-totals-table tr.grand-total td { border-top: 2px solid #16335a; font-size: 14px; font-weight: 800; color: #16335a; padding-top: 9px; }

.doc-sign-table { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 11.5px; break-inside: avoid; }
.doc-sign-table td { padding-top: 30px; width: 33%; color: #4b5568; vertical-align: bottom; }
.doc-sign-line { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid #626d81; font-weight: 600; color: #101828; min-height: 14px; }

/* A multi-item quotation/receipt table may span more than one A4 page — a
   long list of trainings shouldn't be unusual for this document type. Rows
   just must not visually split across the page break, and the header
   should repeat so a continued page is still readable on its own. */
.doc-line-table thead { display: table-header-group; }
.doc-line-table tr { break-inside: avoid; }
.doc-meta-table, .doc-totals-table { break-inside: avoid; }

.doc-status-stamp {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  border: 1.5px solid currentColor; margin-bottom: 10px;
}

.doc-print-footer { margin-top: 24px; padding-top: 10px; border-top: 1px solid #dde1e8; font-size: 10px; color: #8891a1; text-align: center; }

@media print {
  @page { size: A4; margin: 0; }
  body > .app-shell, body > .lp-stage,
  .modal-overlay, .cmdk-overlay, .sidebar-overlay { display: none !important; }
  .doc-print-root { display: block !important; }
  .doc-page { box-shadow: none; }
}

/* ==========================================================================
   Orientation Checklist & SSE Record — the two per-employee HSE documents.

   These print as a RECORD of what was answered, not as a blank form: a ticked
   response is filled in solid, and the unchosen options stay as empty boxes
   so the page still reads like the paper original it replaces.
   ========================================================================== */
.doc-subject {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  border: 1px solid #dde1e8; border-left: 4px solid #16335a;
  background: #f7f8fa; padding: 10px 12px; margin-bottom: 14px;
}
.doc-subject-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 800; color: #16335a; }
.doc-subject-meta { font-size: 11px; color: #4b5568; margin-top: 3px; }

/* Outcome stamp. Deliberately flat and printer-safe — no gradients, no
   colour that turns to mud on a mono office printer. */
.doc-stamp {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 5px 12px; border: 2px solid currentColor; border-radius: 3px; white-space: nowrap;
}
.doc-stamp.completed { color: #1c6b45; }
.doc-stamp.incomplete { color: #8a6100; }
.doc-stamp.follow-up { color: #a3341c; }

.doc-check-group { break-inside: avoid; page-break-inside: avoid; }
.doc-check-group-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px; font-weight: 800; color: #16335a;
  background: #eef1f6; border: 1px solid #dde1e8; border-bottom: none;
  padding: 6px 9px; margin-top: 12px;
}
.doc-check-table { width: 100%; border-collapse: collapse; font-size: 11.5px; table-layout: fixed; }
.doc-check-table th, .doc-check-table td { border: 1px solid #dde1e8; padding: 6px 9px; text-align: left; vertical-align: top; }
.doc-check-table th { background: #16335a; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.doc-check-table td.tick { text-align: center; font-size: 13px; word-break: normal; }
/* The chosen answer. A filled box reproduces reliably in mono print, where a
   colour fill would not. */
.doc-check-table td.tick.on { font-weight: 800; color: #101828; }
.doc-check-comment { display: block; font-size: 10.5px; color: #4b5568; font-style: italic; margin-top: 3px; }

.doc-fields-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 4px; }
.doc-fields-table td { border: 1px solid #dde1e8; padding: 6px 9px; }
.doc-fields-table td.label { font-weight: 700; color: #4b5568; width: 26%; background: #f7f8fa; }

.doc-declaration {
  border: 1px solid #dde1e8; background: #fbfcfd; padding: 10px 12px;
  font-size: 11.5px; margin: 14px 0; break-inside: avoid;
}
.doc-declaration-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #626d81; margin-bottom: 4px; }

/* Set where a session recorded a signature bypass. Never says "Signed". */
.doc-not-required { font-style: italic; color: #626d81; }