/* ============================================================
   Purchase Order Upload — User Training Guide
   Print stylesheet (A4, Chromium headless print-to-pdf)
   ============================================================ */

:root {
  --ink:        #1f2733;
  --ink-soft:   #48566a;
  --muted:      #6b7688;
  --line:       #d9dfe7;
  --line-soft:  #e8ecf2;
  --brand:      #1f4e79;   /* deep corporate blue */
  --brand-2:    #2f6db3;
  --brand-tint: #eef4fb;
  --accent:     #d97706;   /* amber for tips/warnings accents */

  --note-bg:    #eef4fb;  --note-bd:  #2f6db3;
  --tip-bg:     #ecf7ef;  --tip-bd:   #2f9e5a;
  --warn-bg:    #fdf2e4;  --warn-bd:  #d97706;
  --danger-bg:  #fdecec;  --danger-bd:#d1493f;

  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Page geometry ---------- */
/* Page geometry is driven by the CDP printToPDF call (paper size + margins).
   Header/footer + page numbers are supplied by the CDP header/footer templates
   in make-pdf.mjs — so NO @page margin-box content here, to avoid a duplicate
   header/footer (recent Chromium honors @page margin boxes). */
@page { size: A4; }

* { box-sizing: border-box; }

html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body {
  font-family: var(--font);
  color: var(--ink);
  font-size: 10.6pt;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4 { color: var(--brand); font-weight: 700; line-height: 1.25; }
h1 { font-size: 20pt; margin: 0 0 6pt; }
h2 {
  font-size: 15pt;
  margin: 0 0 8pt;
  padding-bottom: 5pt;
  border-bottom: 2.5px solid var(--brand);
}
h3 { font-size: 12.5pt; margin: 14pt 0 5pt; color: var(--brand-2); }
h4 { font-size: 11pt;  margin: 10pt 0 4pt; color: var(--ink); }

p { margin: 0 0 7pt; }
ul, ol { margin: 0 0 8pt; padding-left: 20pt; }
li { margin: 0 0 4pt; }
strong { color: var(--ink); }

a { color: var(--brand-2); text-decoration: none; }

/* ---------- Section wrapper: each top section starts on a new page ---------- */
.section { page-break-before: always; }
.section:first-of-type { page-break-before: avoid; }
h2, h3, h4 { break-after: avoid; }
figure, table, .callout { break-inside: avoid; }

/* ---------- Title page ---------- */
.title-page {
  height: 247mm;                 /* full printable area of A4 */
  display: flex;
  flex-direction: column;
  page-break-after: always;
  position: relative;
}
.tp-band {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  border-radius: 10px;
  padding: 26pt 28pt;
  margin-top: 34mm;
}
.tp-kicker {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 9.5pt;
  opacity: .9;
  margin-bottom: 10pt;
}
.tp-band h1 { color:#fff; font-size: 30pt; line-height:1.15; margin: 0 0 8pt; }
.tp-band .tp-sub { font-size: 13pt; opacity: .95; }
.tp-doc-icon {
  font-size: 30pt; margin-bottom: 6pt;
}
.tp-meta {
  margin-top: auto;
  border-top: 3px solid var(--brand);
  padding-top: 14pt;
}
.tp-meta table { width: 100%; border-collapse: collapse; }
.tp-meta td { padding: 5pt 0; font-size: 10.5pt; border: none; }
.tp-meta td.k { color: var(--muted); width: 34%; text-transform: uppercase; letter-spacing: 1px; font-size: 8.6pt; }
.tp-meta td.v { color: var(--ink); font-weight: 600; }
.tp-confidential {
  margin-top: 12pt; font-size: 8.5pt; color: var(--muted);
}

/* ---------- Table of contents ---------- */
.toc ol { list-style: none; padding-left: 0; counter-reset: toc; }
.toc > ol > li {
  counter-increment: toc;
  display: flex;
  align-items: baseline;
  padding: 5pt 0;
  border-bottom: 1px dotted var(--line);
  font-weight: 600;
  color: var(--ink);
}
.toc > ol > li::before {
  content: counter(toc);
  color: var(--brand-2);
  font-weight: 700;
  min-width: 22pt;
}
.toc .toc-title { flex: 1; }
.toc .toc-pg { color: var(--muted); font-weight: 600; }

/* ---------- Callout boxes ---------- */
.callout {
  border-left: 5px solid;
  border-radius: 6px;
  padding: 9pt 12pt 9pt 12pt;
  margin: 10pt 0;
  font-size: 10pt;
}
.callout .c-title {
  font-weight: 700; display: block; margin-bottom: 3pt;
  text-transform: uppercase; letter-spacing: .5px; font-size: 9pt;
}
.callout p:last-child { margin-bottom: 0; }
.callout.note   { background: var(--note-bg);   border-color: var(--note-bd); }
.callout.note   .c-title { color: var(--note-bd); }
.callout.tip    { background: var(--tip-bg);    border-color: var(--tip-bd); }
.callout.tip    .c-title { color: var(--tip-bd); }
.callout.warn   { background: var(--warn-bg);   border-color: var(--warn-bd); }
.callout.warn   .c-title { color: #a85d06; }
.callout.danger { background: var(--danger-bg); border-color: var(--danger-bd); }
.callout.danger .c-title { color: var(--danger-bd); }

/* ---------- Numbered step blocks ---------- */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 30pt;
  margin-bottom: 10pt;
  min-height: 22pt;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 21pt; height: 21pt;
  background: var(--brand); color: #fff;
  border-radius: 50%;
  font-weight: 700; font-size: 10.5pt;
  display: flex; align-items: center; justify-content: center;
}
ol.steps > li .step-h { font-weight: 700; color: var(--ink); }

/* ---------- Screenshots ---------- */
figure { margin: 12pt 0; }
img.screenshot {
  display: block; width: 100%; max-width: 100%; height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(31,39,51,.14);
}
figure.narrow img.screenshot { max-width: 78%; margin: 0 auto; }

/* ---------- Screenshot placeholder ---------- */
.shot {
  border: 2px dashed var(--brand-2);
  background:
    repeating-linear-gradient(45deg, #f7f9fc 0 14px, #eef3f9 14px 28px);
  border-radius: 8px;
  padding: 22pt 16pt;
  text-align: center;
  color: var(--brand);
}
.shot .shot-icon { font-size: 22pt; display:block; margin-bottom: 6pt; }
.shot .shot-label {
  font-weight: 700; font-size: 10.5pt; text-transform: uppercase; letter-spacing: 1px;
}
.shot .shot-desc { font-size: 9.3pt; color: var(--ink-soft); margin-top: 5pt; }
.shot .shot-anno { font-size: 8.8pt; color: var(--accent); margin-top: 6pt; font-weight:600; }
figcaption {
  font-size: 9pt; color: var(--muted); text-align: center;
  margin-top: 5pt; font-style: italic;
}
figcaption .fig-n { font-style: normal; font-weight: 700; color: var(--brand-2); }

/* ---------- Tables ---------- */
table.data {
  width: 100%; border-collapse: collapse; margin: 10pt 0; font-size: 9.5pt;
}
table.data th {
  background: var(--brand); color: #fff; text-align: left;
  padding: 6pt 8pt; font-weight: 600; font-size: 9.2pt;
  border: 1px solid var(--brand);
}
table.data td {
  padding: 6pt 8pt; border: 1px solid var(--line);
  vertical-align: top;
}
table.data tr:nth-child(even) td { background: #f6f8fb; }
table.data code, code {
  background: #eef1f5; border: 1px solid var(--line-soft);
  border-radius: 3px; padding: 0 3px; font-family: "Consolas", monospace;
  font-size: 8.8pt; color: #34405a;
}
.req  { color: #b23b30; font-weight: 700; }
.opt  { color: var(--muted); font-weight: 600; }
.badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.badge.m { background: #fdecec; color: #b23b30; border: 1px solid #f3c6c2; }
.badge.o { background: #eef1f5; color: #5a6577; border: 1px solid #d9dfe7; }

/* ---------- Checklist ---------- */
ul.checklist { list-style: none; padding-left: 0; }
ul.checklist li { padding-left: 26pt; position: relative; margin-bottom: 7pt; }
ul.checklist li::before {
  content: ""; position: absolute; left: 0; top: 1pt;
  width: 12pt; height: 12pt;
  border: 2px solid var(--brand-2); border-radius: 3px;
  background: #fff;
}

/* ---------- FAQ ---------- */
.faq-q { font-weight: 700; color: var(--brand-2); margin: 10pt 0 2pt; }
.faq-q::before { content: "Q: "; color: var(--brand); }
.faq-a { margin: 0 0 8pt; }
.faq-a::before { content: "A: "; font-weight: 700; color: var(--ink); }

/* ---------- Misc ---------- */
.lead { font-size: 11.2pt; color: var(--ink-soft); }
.section-num { color: var(--brand-2); }
hr { border: none; border-top: 1px solid var(--line); margin: 12pt 0; }
.small { font-size: 9pt; color: var(--muted); }