/* ==========================================================================
   MASCO Official Training Passport, and the optional Pocket QR Card.

   NAMESPACES
   ----------
   .pp-*  the A4 official passport document
   .pk-*  the CR80 pocket card
   The older employee passport card already owns .pc-*; these deliberately do
   not touch it, so both can exist on the same page without interfering.

   PHYSICAL FORMAT — MEASURED, NOT ASSUMED
   ---------------------------------------
   The client's own workbook was audited before any of this was drawn
   (scripts/passport-audit.mjs against "Att sample.xlsx" sheets P1-P5):

       paperSize 9 .............. A4
       orientation .............. portrait
       scale .................... 65%
       margins .................. 0 on all four sides
       print area ............... A1:BJ78, four passports per sheet

   So the Training Passport is an A4 PORTRAIT document, not a CR80 card, and
   this stylesheet does not pretend otherwise. The pocket card below is a
   separate, optional template at true CR80.

   PRINT-FIRST
   -----------
   This document exists to be printed and carried. The screen view is a
   preview of the page, at the page's own proportions, rather than a web
   layout that happens to be printable. Dimensions are in millimetres
   throughout for that reason: a card that measures 85.6mm on screen measures
   85.6mm on paper.
   ========================================================================== */

/* ---- page ---------------------------------------------------------------- */
@page {
  size: A4 portrait;
  margin: 8mm;
}

.pp-doc {
  /* A4 minus the page margins. Fixed so the on-screen preview is the page. */
  width: 194mm;
  min-height: 281mm;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  color: #11223a;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 8.4pt;
  line-height: 1.35;
  box-sizing: border-box;
  /* Fills the sheet edge to edge without letting a category straddle a break. */
  display: flex;
  flex-direction: column;
}

/* On screen only: show it as a sheet of paper. */
.pp-stage {
  background: var(--slate-50, #f1f2f5);
  padding: 24px;
  overflow: auto;
}
.pp-stage .pp-doc {
  box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
  border-radius: 2px;
}

/* ---- masthead ------------------------------------------------------------ */
.pp-head {
  display: flex;
  align-items: center;
  gap: 6mm;
  padding: 4mm 5mm;
  background: linear-gradient(100deg, #16335a 0%, #1d3f6b 55%, #2c5f9e 100%);
  color: #fff;
  border-radius: 2mm 2mm 0 0;
}
.pp-logo {
  width: 22mm; height: 14mm;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 1.2mm; padding: 1mm;
  flex: 0 0 auto;
}
.pp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-logo-fallback { font-weight: 800; font-size: 9pt; color: #16335a; letter-spacing: .04em; text-align: center; }
.pp-head-text { flex: 1 1 auto; min-width: 0; }
.pp-org { font-size: 12.5pt; font-weight: 800; letter-spacing: .01em; line-height: 1.15; }
.pp-title {
  font-size: 9pt; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; opacity: .9; margin-top: .8mm;
}
.pp-head-meta { text-align: right; font-size: 7pt; opacity: .88; flex: 0 0 auto; }
.pp-head-meta strong { display: block; font-size: 8.4pt; opacity: 1; }

/* ---- identity ------------------------------------------------------------ */
.pp-identity {
  display: flex; gap: 5mm; align-items: stretch;
  padding: 4mm 5mm; border: .3mm solid #d9dfe8; border-top: 0;
  background: #f7f9fc;
}
.pp-fields { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2mm 6mm; align-content: center; }
.pp-field { display: flex; gap: 2mm; align-items: baseline; min-width: 0; }
.pp-field dt {
  font-size: 6.6pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #6a7789; flex: 0 0 26mm; margin: 0;
}
.pp-field dd {
  margin: 0; font-size: 9.5pt; font-weight: 700; color: #11223a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-field.is-blank dd { color: #9aa5b4; font-weight: 500; font-style: italic; }

.pp-photo {
  width: 24mm; height: 30mm; flex: 0 0 auto;
  border: .3mm solid #d9dfe8; border-radius: 1mm; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pp-photo img { width: 100%; height: 100%; object-fit: cover; }

.pp-qr {
  flex: 0 0 auto; width: 30mm; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm;
}
.pp-qr canvas, .pp-qr img { width: 24mm; height: 24mm; display: block; }
.pp-qr-caption {
  font-size: 5.8pt; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #244f85; line-height: 1.25;
}
.pp-qr-missing {
  width: 24mm; height: 24mm; border: .3mm dashed #b8c2d0; border-radius: 1mm;
  display: flex; align-items: center; justify-content: center;
  font-size: 5.6pt; color: #8b96a6; text-align: center; padding: 1mm;
}

/* ---- completeness -------------------------------------------------------- */
.pp-progress {
  display: flex; align-items: center; gap: 3mm;
  padding: 2.4mm 5mm; border: .3mm solid #d9dfe8; border-top: 0; background: #fff;
}
.pp-progress-bar { flex: 1 1 auto; height: 2.4mm; background: #e8ecf2; border-radius: 1.2mm; overflow: hidden; }
.pp-progress-fill { height: 100%; background: linear-gradient(90deg, #1a9d63, #148253); }
.pp-progress-text { font-size: 7pt; font-weight: 700; color: #4d5768; white-space: nowrap; }
.pp-progress-text b { color: #11223a; }

/* ---- training record ----------------------------------------------------- */
.pp-section-title {
  font-size: 9.5pt; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 2.6mm 5mm 1.6mm; color: #16335a;
}
.pp-category { break-inside: avoid; page-break-inside: avoid; padding: 0 5mm 2mm; }
.pp-category-head {
  font-size: 7.4pt; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: #244f85; padding: 1.4mm 2.5mm; border-radius: 1mm 1mm 0 0;
}
.pp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: .3mm solid #d9dfe8; border-top: 0;
}
/* A single-column family (Critical Task Observer has four items) reads better
   full width than as two ragged columns. */
.pp-grid.is-single { grid-template-columns: 1fr; }

.pp-row {
  display: flex; align-items: center; gap: 2mm;
  padding: 1.5mm 2.5mm; border-bottom: .25mm solid #eaeef4;
  break-inside: avoid;
}
.pp-grid > .pp-row:nth-child(odd) { border-right: .25mm solid #eaeef4; }
.pp-num {
  flex: 0 0 5mm; font-size: 6.6pt; font-weight: 700; color: #8b96a6; text-align: right;
}
.pp-course { flex: 1 1 auto; font-size: 8pt; font-weight: 600; min-width: 0; }
.pp-date { flex: 0 0 20mm; font-size: 7.4pt; text-align: right; color: #4d5768; font-variant-numeric: tabular-nums; }
.pp-state {
  flex: 0 0 17mm; text-align: center; font-size: 5.9pt; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: .7mm 0; border-radius: 3mm;
}
.pp-state.completed   { background: #eaf7f0; color: #0f6a44; }
.pp-state.due_soon    { background: #fdf3e4; color: #7d5309; }
.pp-state.expired     { background: #fbecec; color: #832121; }
.pp-state.not_trained { background: #f1f2f5; color: #8b96a6; }

.pp-row.is-expired  { background: #fdf6f6; }
.pp-row.is-due_soon { background: #fffbf4; }
.pp-row.is-not_trained .pp-course { color: #6a7789; font-weight: 500; }

/* ---- verification + emergency ------------------------------------------- */
.pp-footer { margin-top: auto; padding: 0 5mm 4mm; }

.pp-verify {
  display: flex; align-items: center; justify-content: space-between; gap: 4mm;
  padding: 2.2mm 3mm; margin-bottom: 2.5mm;
  border: .3mm solid #b3caea; border-radius: 1mm; background: #eef3fb;
}
.pp-verify-label { font-size: 7pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1d3f6b; }
.pp-verify-phone { font-size: 11pt; font-weight: 800; color: #16335a; font-variant-numeric: tabular-nums; }

.pp-emergency { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; break-inside: avoid; }
.pp-contact-group { border: .3mm solid #d9dfe8; border-radius: 1mm; overflow: hidden; }
.pp-contact-head {
  font-size: 6.8pt; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: #832121; color: #fff; padding: 1.3mm 2.5mm;
}
.pp-contact {
  display: flex; align-items: baseline; gap: 2mm;
  padding: 1.2mm 2.5mm; border-bottom: .25mm solid #eaeef4; font-size: 7.2pt;
}
.pp-contact:last-child { border-bottom: 0; }
.pp-contact-name { flex: 1 1 auto; font-weight: 700; min-width: 0; }
.pp-contact-role { flex: 0 0 auto; color: #6a7789; font-size: 6.6pt; }
.pp-contact-tel { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.pp-procedure {
  margin-top: 2.5mm; padding: 2.4mm 3mm;
  border: .3mm solid #d9dfe8; border-left: 1mm solid #832121; border-radius: 1mm;
  background: #fff; break-inside: avoid;
}
.pp-procedure h4 {
  margin: 0 0 1mm; font-size: 6.8pt; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: #832121;
}
.pp-procedure p { margin: 0 0 1.2mm; font-size: 7.2pt; white-space: pre-line; }
.pp-procedure p:last-child { margin-bottom: 0; }
.pp-procedure .pp-ar { direction: rtl; text-align: right; font-size: 8pt; line-height: 1.6; }

/* An unapproved Arabic draft is visible in the preview and never printed. */
.pp-draft-flag {
  display: inline-block; margin-bottom: 1mm; padding: .6mm 2mm; border-radius: 3mm;
  background: #fdf3e4; color: #7d5309;
  font-size: 5.8pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
@media print { .pp-draft, .pp-draft-flag { display: none !important; } }

.pp-issued {
  margin-top: 2.5mm; padding-top: 1.6mm; border-top: .25mm solid #e8ecf2;
  display: flex; justify-content: space-between; gap: 4mm;
  font-size: 6.2pt; color: #8b96a6;
}

/* ==========================================================================
   Pocket QR Card — true CR80, 85.60 x 53.98 mm.

   Printed at actual size or not at all: a "shrink to fit" card does not go in
   a cardholder. The @page below sizes the sheet to the card itself so a card
   printer receives exactly one card per page, and the multi-up sheet lays
   them out on A4 for a normal office printer and scissors.
   ========================================================================== */
.pk-card {
  width: 85.6mm; height: 53.98mm;
  box-sizing: border-box; overflow: hidden; position: relative;
  background: #fff; color: #11223a;
  font-family: 'Inter', system-ui, sans-serif;
  border-radius: 3mm;
  display: flex; flex-direction: column;
  break-inside: avoid; page-break-inside: avoid;
}
.pp-stage .pk-card { box-shadow: 0 6px 18px rgba(16, 24, 40, .18); }

.pk-front .pk-head {
  display: flex; align-items: center; gap: 2mm;
  padding: 2mm 3mm; background: linear-gradient(100deg, #16335a, #2c5f9e); color: #fff;
}
.pk-head .pk-logo { width: 12mm; height: 7mm; background: #fff; border-radius: .8mm; padding: .6mm;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pk-head .pk-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pk-head-org { font-size: 7.6pt; font-weight: 800; line-height: 1.1; }
.pk-head-title { font-size: 5.4pt; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }

.pk-body { flex: 1 1 auto; display: flex; gap: 2mm; padding: 2mm 3mm; min-height: 0; }
.pk-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .8mm; }
.pk-name { font-size: 9.5pt; font-weight: 800; line-height: 1.1; }
.pk-line { font-size: 6.4pt; color: #4d5768; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-line b { color: #11223a; }
.pk-blood {
  display: inline-block; margin-top: .6mm; padding: .5mm 2mm; border-radius: 3mm;
  background: #fbecec; color: #832121; font-size: 6.4pt; font-weight: 800;
}
.pk-qr { flex: 0 0 auto; width: 20mm; text-align: center; }
.pk-qr canvas, .pk-qr img { width: 18mm; height: 18mm; }
.pk-qr-caption { font-size: 4.6pt; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #244f85; }

.pk-foot {
  padding: 1.2mm 3mm; background: #f1f4f9; border-top: .25mm solid #e2e7ef;
  font-size: 5.4pt; color: #6a7789; display: flex; justify-content: space-between; gap: 2mm;
}

/* back */
.pk-back .pk-back-head {
  padding: 1.6mm 3mm; background: #832121; color: #fff;
  font-size: 6.4pt; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.pk-back-body { flex: 1 1 auto; padding: 1.8mm 3mm; display: flex; flex-direction: column; gap: 1mm; min-height: 0; }
.pk-contact { display: flex; align-items: baseline; gap: 1.5mm; font-size: 6.2pt; }
.pk-contact-name { flex: 1 1 auto; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-contact-tel { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.pk-note { font-size: 5.6pt; color: #4d5768; line-height: 1.3; }
.pk-more {
  margin-top: auto; padding-top: 1mm; border-top: .25mm solid #e2e7ef;
  font-size: 5.2pt; color: #6a7789;
}

/* ---- print modes --------------------------------------------------------- */
@media print {
  .pp-stage { background: #fff; padding: 0; overflow: visible; }
  .pp-stage .pp-doc, .pp-stage .pk-card { box-shadow: none; border-radius: 0; }
  .no-print { display: none !important; }
  body { background: #fff; }
  /* Colour is meaning here — an expired course must not print as grey. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* One CR80 card per page, on a card printer. */
@media print {
  .print-mode-card @page { size: 85.6mm 53.98mm; margin: 0; }
}
body.print-card { }
@page card { size: 85.6mm 53.98mm; margin: 0; }

/* Multi-up: CR80 cards on a plain A4 sheet, with cut guides. */
.pk-sheet {
  display: grid; grid-template-columns: repeat(2, 85.6mm);
  gap: 6mm; justify-content: center; align-content: start;
  padding: 10mm 0;
}
.pk-sheet .pk-card { border: .25mm dashed #b8c2d0; }
@media print {
  .pk-sheet { padding: 0; gap: 5mm; }
  .pk-sheet .pk-card { border: .2mm dashed #c9d2dd; }
}

/* The pocket card reuses the passport's logo fallback and QR caption markup,
   both of which are sized for an A4 document. At 85.6x53.98mm they have to be
   much smaller or they burst the card open. */
.pk-logo .pp-logo-fallback { font-size: 4.4pt; line-height: 1.05; letter-spacing: 0; }
.pk-qr-caption { font-size: 4.4pt; line-height: 1.15; }
.pk-qr .pp-qr-missing { width: 18mm; height: 18mm; font-size: 4pt; padding: .6mm; }

/* ==========================================================================
   Client 4-Up / Booklet Cut Sheet  (.pf-*)

   Four passports to an A4 sheet, cut apart — the client's own operational
   habit, reproduced as its own layout rather than the full page shrunk.

   THE ARITHMETIC
   --------------
   A4 portrait, 8mm page margins  ->  194 x 281mm of content
   four strips                    ->  194 x 70mm each, 1mm cut gutter

   That is the client's proportion: their strips are 19 rows of a 62-column
   sheet, which is the same wide, short shape.

   Type is small here on purpose and it is bounded: 5.4pt for a course name is
   about the smallest that stays legible on a laser printer, and a printed
   course list is scanned for a name somebody already knows rather than read
   as prose. Anything that could not stay legible — the ten-name emergency
   directory — moved behind the QR instead of being shrunk further.
   ========================================================================== */
.pf-sheet {
  width: 194mm;
  height: 281mm;
  margin: 0 auto;
  background: #fff;
  color: #11223a;
  font-family: 'Inter', system-ui, sans-serif;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  box-sizing: border-box;
  break-after: page;
  page-break-after: always;
}
.pf-sheet:last-child { break-after: auto; page-break-after: auto; }
.pp-stage .pf-sheet { box-shadow: 0 10px 30px rgba(16, 24, 40, .16); }

.pf-panel {
  display: flex;
  gap: 3mm;
  padding: 2.4mm 3mm;
  box-sizing: border-box;
  overflow: hidden;
  /* The cut line. Dashed on screen and in print: the operator cuts here. */
  border-bottom: .25mm dashed #9aa5b4;
  break-inside: avoid; page-break-inside: avoid;
}
.pf-panel:last-child { border-bottom: 0; }
.pf-panel.is-empty { border-bottom: .25mm dashed #d9dfe8; }

/* ---- left: identity + QR ---- */
.pf-left {
  flex: 0 0 52mm; display: flex; flex-direction: column; gap: 1.4mm;
  border-right: .25mm solid #e2e7ef; padding-right: 3mm; min-width: 0;
}
.pf-brand { display: flex; align-items: center; gap: 1.6mm; }
.pf-logo {
  width: 11mm; height: 6.5mm; flex: 0 0 auto; padding: .5mm;
  background: #16335a; border-radius: .8mm;
  display: flex; align-items: center; justify-content: center;
}
.pf-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pf-logo .pp-logo-fallback { font-size: 3.9pt; line-height: 1.02; color: #fff; letter-spacing: 0; }
.pf-org { font-size: 7pt; font-weight: 800; line-height: 1.1; }
.pf-title { font-size: 4.5pt; letter-spacing: .1em; text-transform: uppercase; color: #4d5768; }

.pf-ident { flex: 1 1 auto; min-height: 0; }
.pf-name { font-size: 8.6pt; font-weight: 800; line-height: 1.12; margin-bottom: .8mm; }
.pf-line {
  display: flex; justify-content: space-between; gap: 1.5mm;
  font-size: 5.2pt; line-height: 1.5; border-bottom: .2mm dotted #e8ecf2;
}
.pf-line span { color: #6a7789; text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto; }
.pf-line b { font-size: 5.8pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pf-foot { display: flex; gap: 2mm; align-items: flex-end; }
.pf-qr { flex: 0 0 auto; text-align: center; }
.pf-qr canvas, .pf-qr img { width: 14mm; height: 14mm; display: block; }
.pf-qr-caption { font-size: 3.4pt; line-height: 1.1; font-weight: 700; text-transform: uppercase; color: #244f85; }
.pf-qr .pp-qr-missing { width: 14mm; height: 14mm; font-size: 3.2pt; padding: .4mm; }
.pf-foot-text { flex: 1 1 auto; font-size: 4.8pt; line-height: 1.35; color: #4d5768; min-width: 0; }
.pf-foot-text b { color: #11223a; }
.pf-warn { color: #832121; }
.pf-verify { margin-top: .8mm; font-size: 4.4pt; text-transform: uppercase; letter-spacing: .03em; }
.pf-verify b { font-size: 6.4pt; letter-spacing: 0; }
.pf-more { margin-top: .6mm; font-size: 4.2pt; font-style: italic; color: #8b96a6; }

/* ---- right: the 23 courses, three families side by side ---- */
.pf-right { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm; min-width: 0; }
.pf-col { min-width: 0; display: flex; flex-direction: column; }
.pf-col-head {
  font-size: 4.3pt; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: #244f85; padding: .7mm 1.2mm; border-radius: .6mm;
  margin-bottom: .5mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-row {
  display: flex; align-items: center; gap: .7mm;
  padding: .3mm .8mm; border-bottom: .18mm solid #f0f3f7; min-width: 0;
  flex: 1 1 0; /* the eight rows share the column's height evenly */
}
.pf-n { flex: 0 0 2.4mm; font-size: 4pt; color: #a5aebc; text-align: right; }

/* A course name must be READABLE, which means it must not be cut off.
   "Hand/Power Tools & Manual Handling" does not fit one line of a 47mm
   column, so it wraps to two rather than becoming "Hand/Power Tools & ...".
   There is room: eight rows share ~65mm, so each has about 8mm and the text
   is under 2mm a line. Beyond two lines it does clamp — a course name that
   long is a configuration problem, not a layout one. */
.pf-c {
  flex: 1 1 auto; font-size: 5.5pt; font-weight: 600; line-height: 1.08;
  min-width: 0; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pf-d { flex: 0 0 8mm; font-size: 4.6pt; text-align: right; color: #4d5768; font-variant-numeric: tabular-nums; }
.pf-s {
  flex: 0 0 5.4mm; text-align: center; font-size: 4pt; font-weight: 800;
  padding: .3mm 0; border-radius: 2mm; letter-spacing: .02em;
}
.pf-s.completed   { background: #eaf7f0; color: #0f6a44; }
.pf-s.due_soon    { background: #fdf3e4; color: #7d5309; }
.pf-s.expired     { background: #fbecec; color: #832121; }
.pf-s.not_trained { background: transparent; color: #b8c2d0; }
.pf-row.is-expired  { background: #fdf6f6; }
.pf-row.is-due_soon { background: #fffbf4; }
.pf-row.is-not_trained .pf-c { color: #8b96a6; font-weight: 500; }

@media print {
  .pp-stage .pf-sheet { box-shadow: none; }
  .pf-sheet { margin: 0; }
}