/* The quote/invoice page. Same rules for the PDF (WeasyPrint) and the on-screen preview. */
@page {
  size: Letter;
  margin: 14mm 14mm 16mm;
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt Helvetica, Arial, "Liberation Sans", sans-serif; color: #8a93a3; }
}

.paper {
  --ink: #1d2433;
  --soft: #5b6475;
  --line: #dfe3ea;
  --navy: #13294f;     /* logo background colour */
  --brand: #0a8a9c;    /* logo teal, darkened to read on white */
  --band: #eef8f9;
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-size: 10pt;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
}
.paper .num { text-align: right; white-space: nowrap; }
/* Drafts: a big diagonal DRAFT so a draft PDF can never pass for the real document. */
.paper.is-draft { position: relative; }
.p-watermark { position: absolute; top: 38%; left: 0; right: 0; text-align: center; transform: rotate(-30deg);
  font-size: 110pt; font-weight: 800; letter-spacing: 12px; color: rgba(194, 59, 50, 0.13); pointer-events: none;
  z-index: 0; }
.paper .pre { white-space: pre-line; }

.p-band { display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: var(--navy); border-radius: 6px; padding: 14px 20px; }
.p-logo { height: 46px; width: auto; display: block; }
.p-band h1 { margin: 0; font-size: 22pt; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: #fff; }
.p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 12px 2px 12px; border-bottom: 2px solid var(--brand); }
.p-company-lines { color: var(--soft); font-size: 9pt; }
.p-company-lines b { color: var(--ink); font-size: 10pt; }
.p-meta { border-collapse: collapse; font-size: 9.5pt; }
.p-meta th { text-align: right; color: var(--soft); font-weight: normal; padding: 1px 10px 1px 0; }
.p-meta td { text-align: right; font-weight: 600; padding: 1px 0; }

.p-parties { display: flex; gap: 24px; margin: 18px 0; align-items: flex-start; }
.p-parties > div { flex: 1; }
.p-label { font-size: 7.5pt; text-transform: uppercase; letter-spacing: 1px; color: var(--soft); margin-bottom: 3px; }
.p-due { flex: 0 0 auto !important; text-align: right; background: var(--band); border-radius: 6px; padding: 10px 14px; }
.p-due-amount { font-size: 16pt; font-weight: 700; color: var(--brand); }
.p-paid { display: inline-block; margin-top: 4px; padding: 1px 8px; border: 1.5px solid #1e8e4f; color: #1e8e4f;
  border-radius: 4px; font-weight: 700; font-size: 8.5pt; letter-spacing: 1px; }

.p-lines { width: 100%; border-collapse: collapse; margin-top: 6px; }
.p-lines thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: 8.5pt; text-transform: uppercase;
  letter-spacing: .5px; padding: 6px 8px; text-align: left; }
.p-lines thead th.num { text-align: right; }
.p-lines th:nth-child(2) { width: 9%; }
.p-lines th:nth-child(3), .p-lines th:nth-child(4) { width: 15%; }
.p-lines td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.p-lines tbody tr { page-break-inside: avoid; }
.p-lines tbody tr:nth-child(even) td { background: #fafbfd; }
.p-desc { color: var(--soft); font-size: 9pt; white-space: pre-line; margin-top: 1px; }
.p-taxtag { display: inline-block; margin-top: 2px; font-size: 7pt; color: var(--soft); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 4px; }

.p-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 14px; page-break-inside: avoid; }
.p-notes { flex: 1; font-size: 9pt; }
.p-notes .p-label { margin-top: 6px; }
.p-totals { border-collapse: collapse; min-width: 240px; }
.p-totals th { text-align: left; font-weight: normal; color: var(--soft); padding: 3px 16px 3px 0; }
.p-totals td { text-align: right; padding: 3px 0; white-space: nowrap; }
.p-grand th, .p-grand td { border-top: 2px solid var(--ink); padding-top: 7px; font-size: 12pt; font-weight: 700;
  color: var(--ink); }

.p-foot { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--soft); font-size: 8.5pt;
  text-align: center; }

/* On screen: show it as a sheet of paper. */
body:not(.pdf) .paper { max-width: 816px; margin: 0 auto; padding: 40px 44px; box-shadow: 0 2px 14px rgba(20, 30, 60, .12);
  border-radius: 4px; }
@media (max-width: 700px) {
  body:not(.pdf) .paper { padding: 18px 14px; font-size: 9pt; }
  body:not(.pdf) .p-head, body:not(.pdf) .p-parties, body:not(.pdf) .p-bottom { flex-direction: column; }
  body:not(.pdf) .p-logo { height: 26px; }
  body:not(.pdf) .p-band h1 { font-size: 14pt; letter-spacing: 1px; }
  body:not(.pdf) .p-due { text-align: left; }
}