/* ---------------------------------------------------------------------------
   Kirajade Document Engine — print styling
   ---------------------------------------------------------------------------
   Deliberately NOT theme-tokenized (doesn't use brand.css's --var tokens or
   respond to the dark/light toggle). A client-facing branded document (a
   Proposal, an Invoice, an SWMS) has ONE fixed brand look regardless of what
   theme Kira happens to be viewing the app in — this is the same reasoning
   as a real letterhead: it doesn't have a "dark mode." Colors below are
   lifted directly from the approved paper mockup.
--------------------------------------------------------------------------- */

.doc-page {
  background: #F9F6F0;
  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 800px;
  margin: 32px auto;
  padding: 48px 56px 40px 56px;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(30,28,20,0.08), 0 24px 48px -24px rgba(30,28,20,0.30);
  border-radius: 4px;
}

.doc-letterhead { margin-bottom: 20px; }
.doc-wordmark { font-family: 'Merriweather', Georgia, serif; font-weight: 800; font-size: 28px; color: #1a3026; letter-spacing: 0.01em; }
.doc-wordmark-suffix { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #1a3026; }
.doc-tagline { font-family: 'Merriweather', Georgia, serif; font-weight: 700; font-size: 13px; color: #a6894c; letter-spacing: 0.04em; margin-top: 2px; }
.doc-rule { height: 2px; background: #1a3026; margin: 8px 0 10px 0; }
.doc-contact { font-size: 11px; color: #555555; }

/* var(--doc-accent, <original>) on the rules below (and .doc-block-heading,
   .doc-table thead th, .doc-totals-row-emphasize further down) lets a
   per-block accent color (Document Builder -> a block's Spacing & Color
   section) override just that block's look, without touching any other
   block or the default brand palette. The custom property is only ever set
   on the thin wrapper div documentEngine.js's wrapBlockStyle() puts around a
   block that actually has one configured — every other block still falls
   back to the plain hardcoded color exactly as before this existed. */
.doc-title { font-family: 'Merriweather', Georgia, serif; font-weight: 800; font-size: 16px; color: var(--doc-accent, #1a3026); letter-spacing: 0.03em; margin: 22px 0 12px 0; }
.doc-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 12px; margin-bottom: 20px; }
.doc-meta-row { }
.doc-meta-label { font-weight: 700; color: #333; }
.doc-meta-value { color: #333; margin-left: 4px; }
.doc-meta-value-gold { color: #a6894c; font-weight: 700; }

.doc-block-heading { font-family: 'Merriweather', Georgia, serif; font-weight: 700; font-size: 12px; color: var(--doc-accent, #a6894c); letter-spacing: 0.05em; margin: 22px 0 8px 0; text-transform: uppercase; }
.doc-richtext { font-size: 12px; line-height: 1.6; color: #333; }
.doc-richtext p { margin: 0 0 8px 0; }
.doc-richtext p:last-child { margin-bottom: 0; }
.doc-richtext-quote { font-style: italic; padding-left: 14px; border-left: 3px solid #a6894c; color: #555; }
.doc-richtext-note { font-style: italic; }

.doc-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 12px; }
.doc-table thead th { background: var(--doc-accent, #1a3026); color: #fff; text-align: left; padding: 9px 12px; font-size: 11px; letter-spacing: 0.03em; }
.doc-table tbody td { padding: 10px 12px; border-bottom: 1px solid #e6e2d8; vertical-align: top; }
.doc-table tbody tr:nth-child(even) td { background: #f4f4f4; }
.doc-table-total-row td { font-weight: 700; background: #f4f4f4 !important; border-top: 2px solid #1a3026; color: #1a3026; }
.doc-td-right { text-align: right; white-space: nowrap; }

.doc-signature { display: flex; align-items: center; gap: 14px; margin: 26px 0 10px 0; }
.doc-signature-badge {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid #a6894c;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Merriweather', Georgia, serif; font-weight: 800; font-size: 13px; color: #a6894c;
  flex-shrink: 0;
}
.doc-signature-name { font-weight: 700; font-size: 13px; color: #1a3026; }
.doc-signature-title { font-size: 10px; letter-spacing: 0.08em; color: #555; }

.doc-block-heading-terms { margin-top: 28px; }
.doc-terms-item { font-size: 11px; line-height: 1.6; color: #555; margin-bottom: 10px; }
.doc-terms-item-label { font-weight: 700; color: #333; margin-bottom: 2px; }

/* Subtotal/GST/Total breakdown (Invoice, Variation) */
.doc-totals-block { width: 260px; margin: 4px 0 18px auto; }
.doc-totals-row { display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0; color: #333; }
.doc-totals-row-emphasize { border-top: 2px solid var(--doc-accent, #1a3026); margin-top: 4px; padding-top: 10px; font-weight: 700; font-size: 14px; color: var(--doc-accent, #1a3026); }

/* Side-by-side layout (Document Builder "Columns" block). No forced height —
   a very tall column just makes that row taller, and on screen it's left
   free to flow like any other content. In PRINT specifically, though, a
   column row is kept off the page-break boundary (see @media print below,
   "Page Break Guillotine" reasoning) — the alternative is Chrome's print
   engine shearing straight through the middle of a paragraph or image where
   a column happens to straddle two pages, which reads as broken output, not
   a stylistic choice; see documentEngine.js's renderColumns() for the full
   layout reasoning. */
.doc-columns { display: flex; gap: 24px; align-items: flex-start; margin: 14px 0; }
.doc-column { flex: 1 1 0; min-width: 0; }
.doc-column .doc-block-heading:first-child,
.doc-column .doc-richtext:first-child,
.doc-column .doc-image-wrap:first-child { margin-top: 0; }

/* Static image block (logo variant, stamp, photo). object-fit: contain is a
   defensive no-op today (height: auto means the element is never sized off
   its own aspect ratio, so there's nothing for object-fit to do yet) — it's
   here so a future fixed-height image slot (e.g. a letterhead logo box)
   can't silently distort or overflow a source image that's the wrong
   aspect ratio; max-width: 100% is what actually keeps a large upload from
   blowing out the column/flex boundary today. */
.doc-image-wrap { margin: 14px 0; }
.doc-image-wrap img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.doc-image-left img { margin-right: auto; }
.doc-image-center { text-align: center; }
.doc-image-center img { margin-left: auto; margin-right: auto; }
.doc-image-right img { margin-left: auto; }

/* Client acceptance / approval status (Variation) */
.doc-approval { margin: 18px 0; padding: 12px 16px; border-radius: 6px; font-size: 12px; }
.doc-approval-accepted { background: #eef4ee; border: 1px solid #1a3026; color: #1a3026; }
.doc-approval-rejected { background: #f7eceb; border: 1px solid #a63d3d; color: #7a2c2c; }
.doc-approval-pending { background: #f4f0e4; border: 1px solid #a6894c; color: #6b5626; }

/* On screen this sits in normal document flow, right after whatever content
   precedes it — no forced page height, so a short document (few line items)
   doesn't leave a big empty gap before it. It only becomes a page-pinned,
   repeating footer once actually printed (see @media print below), which is
   the only context where "one footer per physical page" means anything. */
.doc-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-family: Georgia, 'Times New Roman', serif; font-size: 10px; color: #a6894c;
  margin-top: 36px; padding-top: 14px; border-top: 1px solid #e6e2d8;
}
.doc-footer-badge {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid #a6894c;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700;
}

@media print {
  html, body { background: #fff; }
  .doc-page {
    box-shadow: none; margin: 0 auto; max-width: none; border-radius: 0;
    padding: 24mm 20mm 30mm 20mm;
  }
  /* position:fixed repeats this element on every printed page in Chrome —
     that's what "Version 01 · Date ... · KJ badge on every page" actually
     needs, as opposed to the single in-flow footer used on screen above. */
  .doc-footer { position: fixed; bottom: 10mm; left: 20mm; right: 20mm; margin-top: 0; padding-top: 0; border-top: none; }
  .doc-table-total-row, .doc-signature, .doc-block-heading, .doc-columns, .doc-image-wrap { break-inside: avoid; }
  .doc-table tr { break-inside: avoid; }
  .noprint { display: none !important; }
}