/* ===========================================================================
   docprint.css — HALCYON CLEARANCE — printable documents (invoices + WTN)  ·  W4
   ---------------------------------------------------------------------------
   ONE shared stylesheet for every printable business document the back office
   and driver app produce:
     • the customer INVOICE (itemised, deposit-as-paid-line, balance due)
     • the WASTE TRANSFER NOTE (full NRW duty-of-care field set, D8)

   Loaded by staff.html + driver.html (after styles.css, so the shared design
   tokens --ink-900/--amber/--ink/--line are in scope). It carries BOTH:
     • the on-SCREEN document preview (a .doc-modal overlay + A4 .doc-sheet), and
     • the @media print rules that isolate the sheet for a clean A4 print.

   WATERMARK STRIPPED (operator ruling, 2026-07-26 — Halcyon is REAL and
   TRADING; Plans/2026-07-26-book-a-collection-programme.md #17 + Digression
   Log): the old CONCEPT-DRAFT/SANDBOX diagonal watermark is stripped on every
   generated document, invoice AND waste transfer note, no exceptions — see
   the `.doc-wm { display:none !important }` rule below, kept as the
   authoritative kill switch. This does NOT touch the licence line: the NRW
   waste-carrier registration number is still unsupplied, so that line still
   reads "number to follow" — never invent a number, never assert "registered
   waste carrier" bare.
   ========================================================================= */

/* ---- screen: modal overlay hosting the A4 sheet ------------------------- */
.doc-modal {
  position: fixed; inset: 0; z-index: 180; display: flex; flex-direction: column;
  background: rgba(17,24,32, .55); backdrop-filter: blur(2px);
}
.doc-modal[hidden] { display: none; }
.doc-toolbar {
  flex: none; display: flex; gap: 10px; align-items: center; justify-content: center;
  padding: 12px; background: var(--ink-900, #111820); color: #fff;
}
.doc-toolbar .doc-tb-label { margin-right: auto; font-weight: 800; font-size: .9rem; letter-spacing: .02em; }
.doc-scroll { flex: 1; overflow: auto; padding: 22px 14px 60px; display: flex; justify-content: center; }

/* ---- the A4 sheet ------------------------------------------------------- */
.doc-sheet {
  position: relative; width: 210mm; max-width: 100%; min-height: 297mm;
  background: #fff; color: #131A22; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
  padding: 18mm 16mm 20mm; font-size: 11.5pt; line-height: 1.5; overflow: hidden;
}

/* CONCEPT-DRAFT/SANDBOX watermark — STRIPPED (operator ruling 2026-07-26,
   Plans/2026-07-26-book-a-collection-programme.md #17 + Digression Log: strip
   everywhere, both documents, no exceptions — supersedes the earlier
   invoice-only split). account.js and staff.js no longer emit a `.doc-wm`
   node at all as of that same wave; demo.js still emits one (its own
   DEMO — SAMPLE marker on sample-dataset documents). This rule is kept as a
   belt-and-braces kill switch rather than deleted — nothing with this class
   can ever render, screen or print, regardless of what markup lands inside
   it or what emits it in future. Rule body kept commented for provenance;
   do not re-enable. */
.doc-wm {
  display: none !important;
}

/* EXCEPTION — the DEMO page's own "NOT A REAL RECORD" marker.
   Regression caught 2026-07-26 (third checker pass): the blanket kill switch
   above also suppressed demo.js's sample-document watermark, so demo paperwork
   rendered looking like a genuine issued record. The operator ruling that
   stripped the watermark was about REAL invoices and waste transfer notes; it
   was never about the demo's sample data. This class is emitted ONLY by
   demo.js and only on demo.html. */
.doc-wm.demo-sample {
  display: flex !important;
  position: absolute; inset: 0; z-index: 0;
  align-items: center; justify-content: center;
  transform: rotate(-28deg);
  font-family: var(--display, system-ui), sans-serif;
  font-weight: 800; font-size: 46pt; line-height: 1.1; text-align: center;
  color: rgba(17, 24, 32, .10);
  letter-spacing: .04em; pointer-events: none; user-select: none;
}
@media print {
  .doc-wm.demo-sample { color: rgba(17, 24, 32, .16); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.doc-sheet > *:not(.doc-wm) { position: relative; z-index: 1; }

/* draft rail across the top of every document */
.doc-draftbar {
  background: var(--status-danger-bg, #fbe7e5); color: var(--status-danger-ink, #8a2018); border: 1px solid var(--status-danger-line, #f2c4bf); border-radius: 8px;
  padding: 8px 12px; font-size: .78rem; font-weight: 700; margin-bottom: 16px; line-height: 1.45;
}

/* ---- document header (company + doc title) ------------------------------ */
.doc-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 2px solid var(--ink-900, #111820); padding-bottom: 12px; margin-bottom: 16px; }
.doc-brand { display: flex; align-items: center; gap: 10px; }
.doc-brand svg { width: 34px; height: 30px; flex: none; }
.doc-brand .dn { font-weight: 900; font-size: 1.35rem; color: var(--ink-900, #111820); letter-spacing: -.01em; }
.doc-brand .dn small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--status-warn-ink, #7a5600); }
.doc-issuer { font-size: .74rem; color: #4a5a6a; line-height: 1.5; margin-top: 4px; }
.doc-title { text-align: right; }
.doc-title h1 { font-size: 1.5rem; color: var(--ink-900, #111820); letter-spacing: .02em; margin: 0; text-transform: uppercase; }
.doc-title .doc-no { font-weight: 800; font-size: .96rem; color: #131A22; margin-top: 4px; }
.doc-title .doc-date { font-size: .78rem; color: #4a5a6a; margin-top: 2px; }

/* ---- parties (bill-to / transferor-transferee) -------------------------- */
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.doc-party h3 { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--status-warn-ink, #7a5600); margin: 0 0 5px; }
.doc-party p { margin: 0; font-size: .86rem; line-height: 1.5; }
.doc-party .pn { font-weight: 800; color: #131A22; }

/* ---- line-items table --------------------------------------------------- */
.doc-lines { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.doc-lines th { text-align: left; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: #4a5a6a; border-bottom: 1.5px solid #cfd8e2; padding: 7px 8px; }
.doc-lines th.num, .doc-lines td.num { text-align: right; white-space: nowrap; }
.doc-lines td { padding: 8px; border-bottom: 1px solid #EEF2F6; font-size: .9rem; }

/* ---- totals ------------------------------------------------------------- */
.doc-totals { margin-left: auto; width: 62%; }
.doc-totals .tr { display: flex; justify-content: space-between; padding: 5px 8px; font-size: .9rem; }
.doc-totals .tr.paid { color: var(--status-ok-ink, #145c2b); }
.doc-totals .tr.paid .paidtag { font-size: .6rem; font-weight: 800; letter-spacing: .06em; background: var(--status-ok-bg, #e3f6e8); color: var(--status-ok-ink, #145c2b); border: 1px solid var(--status-ok-line, #bfe6c9); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.doc-totals .tr.grand { border-top: 2px solid var(--ink-900, #111820); margin-top: 6px; padding-top: 9px; font-weight: 900; font-size: 1.08rem; color: var(--ink-900, #111820); }

/* ---- WTN field grid ----------------------------------------------------- */
.doc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #cfd8e2; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.doc-field { padding: 9px 12px; border-bottom: 1px solid #EEF2F6; }
.doc-field:nth-child(odd) { border-right: 1px solid #EEF2F6; }
.doc-field.full { grid-column: 1 / -1; }
.doc-field dt { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--status-warn-ink, #7a5600); margin-bottom: 2px; }
.doc-field dd { margin: 0; font-size: .88rem; color: #131A22; font-weight: 600; }
.doc-sectitle { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-900, #111820); font-weight: 800; margin: 4px 0 8px; border-bottom: 1px solid #cfd8e2; padding-bottom: 4px; }

/* ---- signatures --------------------------------------------------------- */
.doc-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.doc-sig { border-top: 1.5px solid #131A22; padding-top: 6px; font-size: .74rem; color: #4a5a6a; min-height: 46px; }
.doc-sig .sg-line { display: block; height: 22px; }

/* ---- footer ------------------------------------------------------------- */
.doc-foot { margin-top: 22px; border-top: 1px solid #cfd8e2; padding-top: 10px; font-size: .68rem; color: #6a7887; line-height: 1.5; }

/* =========================================================================
   PRINT — isolate the sheet, drop the chrome, keep the watermark. Everything
   that is NOT the document is hidden; the sheet prints edge-to-edge at A4.
   ========================================================================= */
@media print {
  /* hide the whole app; the doc-modal (a direct child of body) is force-shown */
  body > *:not(.doc-modal) { display: none !important; }
  .concept-ribbon, .site-header, .dv-header, #sr-announcer { display: none !important; }

  /* only an OPEN modal takes over the page; a closed one stays hidden so a stray
     Ctrl+P on the app chrome doesn't print a blank isolated modal */
  .doc-modal:not([hidden]) { position: static !important; inset: auto !important; background: #fff !important; backdrop-filter: none !important; display: block !important; }
  .doc-toolbar { display: none !important; }
  .doc-scroll { overflow: visible !important; padding: 0 !important; display: block !important; }

  .doc-sheet {
    width: auto !important; max-width: none !important; min-height: auto !important;
    box-shadow: none !important; margin: 0 !important; padding: 12mm 10mm !important;
    font-size: 10.5pt !important;
  }
  /* watermark stripped (see the .doc-wm rule above) — no print colour-adjust
     needed for it anymore; `display:none` already wins in print. */
  .doc-draftbar, .doc-totals .tr.paid .paidtag, .doc-totals .tr.paid { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  @page { size: A4; margin: 8mm; }
}

/* small screens — let the sheet scale down but keep proportions */
@media (max-width: 560px) {
  .doc-sheet { padding: 10mm 8mm; font-size: 10pt; }
  .doc-parties, .doc-fields, .doc-sigs { grid-template-columns: 1fr; }
  .doc-field:nth-child(odd) { border-right: none; }
  .doc-totals { width: 100%; }
  .doc-wm { font-size: 34pt; }
}