/* ===========================================================================
   Ntuthuko Biz Connect — formal document paper
   ---------------------------------------------------------------------------
   The look of the signed Generic Service Agreement: Arial on A4, a running
   letterhead and numbered footer on every page, green section headings,
   justified numbered clauses, and bordered label/value tables.

   Used by service agreements and client onboarding forms. Invoices and
   quotations keep their own design in documents.css — they are sales
   documents and are meant to look different.

   Geometry is taken from the source PDF:
     page          A4, content from 18mm left to 17mm right
     brand green   #0b4b3c      body ink   #202020      muted #5a5a5a
     table fill    #eaf3ef      borders    #b8c8c0
   Liberation Sans is metrically identical to Arial and is what the Linux PDF
   renderer has, so the emailed PDF paginates exactly like the printed one.
   =========================================================================== */

:root{
  --paper-brand:#0b4b3c; --paper-ink:#202020; --paper-muted:#5a5a5a;
  --paper-fill:#eaf3ef; --paper-line:#b8c8c0; --paper-rule:#e2e9e5;
  --paper-gold-bg:#fdf4e0; --paper-gold-line:#e6d3a4;
}

.paper-doc{
  font-family:Arial,'Liberation Sans','Helvetica Neue',Helvetica,sans-serif;
  color:var(--paper-ink); font-size:12pt; line-height:1.62;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.paper-doc *{box-sizing:border-box}
.paper-doc p,.paper-doc h1,.paper-doc h2,.paper-doc h3,.paper-doc table{margin:0;padding:0}

/* ------------------------------------------------------------- the page -- */
.paper{
  width:210mm; min-height:297mm; background:#fff; margin:0 auto 8mm;
  padding:12mm 17mm 12mm 18mm; display:flex; flex-direction:column;
  box-shadow:0 10px 34px rgba(11,75,60,.16);
}
.paper + .paper{break-before:page; page-break-before:always}

.paper-head{display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin-bottom:9mm; flex:none}
/* Height is stated, not left to the image. The paginator measures before the
   logo has loaded, and an auto-height image measures as zero — which silently
   under-counts every page and pushes content past the bottom of the sheet.
   logo.png is 1126x419. */
.paper-head img{width:42mm; height:15.63mm; display:block}
.paper-head .co{text-align:right; font-size:8.5pt; line-height:1.5; color:var(--paper-muted)}
.paper-head .co strong{display:block; font-size:11pt; font-weight:700;
  color:var(--paper-brand); margin-bottom:2px; line-height:1.3}

.paper-body{flex:1 1 auto; min-height:0}

.paper-foot{flex:none; margin-top:8mm; padding-top:5px; border-top:1px solid var(--paper-rule);
  display:flex; justify-content:space-between; gap:16px;
  font-size:9.5pt; line-height:1.4; color:var(--paper-muted)}

/* ---------------------------------------------------------------- cover -- */
.paper-cover-logo{display:block; width:78mm; height:29.02mm; margin:8mm auto 5mm}
h1.paper-title{text-align:center; font-size:22pt; font-weight:700;
  color:var(--paper-brand); letter-spacing:.01em; margin-bottom:7px}
.paper-subtitle{text-align:center; font-size:12.5pt; font-weight:700;
  color:var(--paper-muted); line-height:1.5; max-width:152mm; margin:0 auto 9mm}

/* ------------------------------------------------------------- headings -- */
h2.paper-h{font-size:12pt; font-weight:700; color:var(--paper-brand);
  text-transform:uppercase; margin:7mm 0 3mm; line-height:1.35}
h2.paper-h:first-child{margin-top:0}
h3.paper-sub{font-size:12pt; font-weight:700; color:var(--paper-brand);
  margin:6mm 0 2.5mm; line-height:1.35}
h3.paper-sub:first-child{margin-top:0}

/* -------------------------------------------------------------- clauses -- */
.paper-clause{font-size:12pt; line-height:1.62; text-align:justify;
  margin-bottom:3.2mm; padding-left:9mm; text-indent:-9mm}
.paper-clause > b:first-child{font-weight:700}
.paper-plain{font-size:12pt; line-height:1.62; text-align:justify; margin-bottom:3.2mm}
.paper-italic{font-size:12pt; line-height:1.62; font-style:italic;
  color:var(--paper-muted); margin-bottom:4mm; text-align:justify}

/* --------------------------------------------------------------- tables -- */
table.paper-table{width:100%; border-collapse:collapse; font-size:10.6pt;
  line-height:1.45; margin-bottom:5mm}
.paper-table td,.paper-table th{border:1px solid var(--paper-line);
  padding:5.5px 9px; vertical-align:top; text-align:left}
.paper-table td.label,.paper-table th{background:var(--paper-fill); width:31%; font-weight:400}
.paper-table thead th{font-weight:700; font-size:10pt}
.paper-table td.value{width:auto}
.paper-table .tick{width:16%; white-space:nowrap}
.paper-table .notes{width:26%}
/* Rows the client writes into keep a usable writing height. */
.paper-table.fill td{height:9.5mm}
.paper-table.sign td.label{width:28%}
.paper-doc .paper-table td em{font-style:normal; color:var(--paper-muted); font-size:9.4pt;
  display:block; margin-top:2px; line-height:1.4}

/* ------------------------------------------------------------- callouts -- */
.paper-callout{background:var(--paper-gold-bg); border:1px solid var(--paper-gold-line);
  padding:9px 12px; font-size:10.6pt; line-height:1.55; text-align:justify; margin-bottom:5mm}
.paper-callout b{color:var(--paper-brand); font-weight:700}
.paper-note{background:var(--paper-fill); border:1px solid var(--paper-line);
  padding:9px 12px; font-size:10.6pt; line-height:1.55; text-align:justify; margin-bottom:5mm}
.paper-note b{color:var(--paper-brand); font-weight:700}

.paper-initials{text-align:right; font-size:9.5pt; color:var(--paper-muted); margin-top:4mm}

/* Tick-box option runs inside a table cell. */
.paper-opts span{display:inline-block; margin-right:14px; white-space:nowrap}

/* ------------------------------------------------------------ CRM only -- */
/* The measuring pass renders off-screen at exact content width. */
.paper-probe{position:absolute; left:-10000px; top:0; visibility:hidden;
  width:175mm; background:#fff}

@media print{
  .paper{box-shadow:none; margin:0}
}
@media screen and (max-width:820px){
  .paper{width:100%; min-height:0; padding:16px}
  .paper-head img{width:34mm}
  .paper-cover-logo{width:56mm}
  h1.paper-title{font-size:18pt}
}