/* CrewEmber — document template styles. Scoped under .doc so the app UI (styles.css) is untouched.
   Three visual designs share one content structure. --doc-accent is set inline per document. */

.doc {
  --doc-ink: #1c1a17;
  --doc-soft: #6b665f;
  --doc-line: #e7e3dc;
  --doc-bg: #fff;
  background: var(--doc-bg);
  color: var(--doc-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}
.doc * { box-sizing: border-box; }
.doc h1, .doc h3 { margin: 0; }
.doc .doc-logo { object-fit: contain; display: block; }
.doc .doc-co-name { font-weight: 800; letter-spacing: -.01em; }
.doc .doc-co-lines { color: var(--doc-soft); font-size: 12.5px; line-height: 1.55; }
.doc .doc-creds { color: var(--doc-ink); }
.doc .doc-kind { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--doc-accent); }
.doc .doc-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 4px; }
.doc .doc-meta { color: var(--doc-soft); font-size: 12.5px; }
.doc .doc-for { margin-top: 8px; font-size: 13px; }

.doc .doc-items { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.doc .doc-items td { padding: 10px 0; border-bottom: 1px solid var(--doc-line); vertical-align: top; }
.doc .doc-item-amt { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 16px; }
.doc .doc-qty { color: var(--doc-soft); font-size: 12px; font-weight: 500; }
.doc .doc-subhead td { padding-top: 16px; border-bottom: none; font-weight: 700; font-size: 12.5px; color: var(--doc-accent); }
.doc .doc-opt-cb { width: 18px; height: 18px; accent-color: var(--doc-accent); }

.doc .doc-totals { width: 100%; border-collapse: collapse; margin-top: 6px; }
.doc .doc-totals td { padding: 6px 0; }
.doc .doc-totals td:last-child { text-align: right; white-space: nowrap; }
.doc .doc-adj td { color: var(--doc-soft); font-size: 13px; }
.doc .doc-total-row td { font-size: 19px; font-weight: 800; padding-top: 10px; border-top: 2px solid var(--doc-ink); }

.doc section { margin-top: 22px; }
.doc .doc-scope h3, .doc section > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--doc-soft); margin-bottom: 6px; }
.doc .doc-note p { margin: 0; font-size: 13px; }
.doc .doc-legal ol { margin: 6px 0 0; padding-left: 18px; }
.doc .doc-legal li { font-size: 12px; color: var(--doc-soft); margin-bottom: 5px; }

.doc .doc-paid { }
.doc .doc-paid-badge { display: inline-block; background: #1c8a4e; color: #fff; font-weight: 800; font-size: 12px; padding: 3px 12px; border-radius: 999px; letter-spacing: .05em; }
.doc .doc-sig { margin-top: 26px; padding-top: 14px; }
.doc .doc-sig-signed .doc-sig-line { font-family: 'Georgia', serif; font-size: 24px; font-style: italic; border-bottom: 1px solid var(--doc-ink); padding-bottom: 4px; display: inline-block; min-width: 220px; }
.doc .doc-sig-meta { color: var(--doc-soft); font-size: 11.5px; margin-top: 6px; }
.doc .doc-foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--doc-line); color: var(--doc-soft); font-size: 11px; text-align: center; }

/* ---------- BRANDED ORANGE (current signature look) ---------- */
.doc.tpl-branded_orange { padding: 8px; }
.tpl-branded_orange .doc-head { text-align: center; padding: 14px 0 10px; }
.tpl-branded_orange .doc-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tpl-branded_orange .doc-logo { width: 64px; height: 64px; border-radius: 16px; }
.tpl-branded_orange .doc-co-name { font-size: 20px; }
.tpl-branded_orange .doc-head-body { margin-top: 14px; text-align: left; background: #faf8f5; border: 1px solid var(--doc-line); border-radius: 14px; padding: 16px; }
.tpl-branded_orange .doc-body > .doc-scope,
.tpl-branded_orange .doc-body > section { background: #fff; border: 1px solid var(--doc-line); border-radius: 14px; padding: 16px; margin-top: 12px; }
.tpl-branded_orange .doc-total-row td { border-top-color: var(--doc-accent); color: var(--doc-accent); }

/* ---------- CLASSIC PRO (dashboard document style — matched to the dashboard estimate PDF) ---------- */
.doc.tpl-classic_pro {
  padding: 6px 8px; font-size: 12px; line-height: 1.4;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;   /* match the dashboard PDF (jsPDF helvetica) */
  --doc-ink: #1a1a1a; --doc-soft: #7a7a7a; --doc-line: #e5e5e5;  /* cool neutrals, like the dashboard */
}
.tpl-classic_pro .cp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tpl-classic_pro .cp-brand { display: flex; align-items: center; gap: 12px; }
.tpl-classic_pro .doc-logo { width: 50px; height: 50px; border-radius: 6px; }
.tpl-classic_pro .cp-coname { font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: #4a4a4a; line-height: 1.1; }
.tpl-classic_pro .cp-tag { color: var(--doc-soft); font-size: 11px; margin-top: 2px; }
.tpl-classic_pro .cp-kind { text-align: right; }
.tpl-classic_pro .cp-kindword { color: var(--doc-accent); font-weight: 800; font-size: 24px; letter-spacing: .02em; }
.tpl-classic_pro .cp-meta { color: #4a4a4a; font-size: 10px; line-height: 1.55; }
.tpl-classic_pro .cp-trust { border-top: 3px solid var(--doc-accent); margin-top: 9px; padding: 6px 1px; font-size: 10px; color: #4a4a4a; border-bottom: 1px solid var(--doc-line); }
/* the dashboard prints these one shade darker than the accent rules — derive it from the TENANT's
   accent instead of hardcoding Ed's orange, so every tenant stays on its own brand colour */
.tpl-classic_pro .cp-trust-hot { color: color-mix(in srgb, var(--doc-accent) 85%, #000); font-weight: 700; }
.tpl-classic_pro .cp-parties { display: flex; gap: 14px; margin-top: 11px; }
.tpl-classic_pro .cp-party { flex: 1; background: #fafafa; border-left: 3px solid #4a4a4a; padding: 8px 11px; font-size: 10.5px; line-height: 1.5; }
.tpl-classic_pro .cp-party.cp-acc { border-left-color: var(--doc-accent); }
.tpl-classic_pro .cp-party b { font-size: 11px; color: #1a1a1a; }
.tpl-classic_pro .cp-plabel { font-size: 8px; letter-spacing: .07em; color: var(--doc-soft); font-weight: 700; margin-bottom: 3px; }
.tpl-classic_pro .cp-scope { background: #fafafa; border-left: 3px solid #4a4a4a; padding: 8px 11px; margin-top: 11px; font-size: 10.5px; }
.tpl-classic_pro .cp-table { margin-top: 12px; font-size: 10.5px; }
.tpl-classic_pro .cp-table thead th { background: #4a4a4a; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .05em; padding: 6px 6px; text-align: left; }
.tpl-classic_pro .cp-table td { padding: 5px 6px; border-bottom: 1px solid var(--doc-line); }
.tpl-classic_pro .cp-table .doc-item-name { color: #1a1a1a; }
.tpl-classic_pro .cp-c { text-align: center; } .tpl-classic_pro .cp-r { text-align: right; }
.tpl-classic_pro .cp-sub td, .tpl-classic_pro td.cp-sub { border-bottom: none; padding: 3px 6px; color: #1a1a1a; font-size: 10.5px; }
.tpl-classic_pro .cp-total td { border-top: 2px solid var(--doc-accent); border-bottom: none; color: color-mix(in srgb, var(--doc-accent) 85%, #000); font-weight: 800; font-size: 15px; padding-top: 8px; }
.tpl-classic_pro .cp-remain { color: var(--doc-soft); font-size: 10px; border-bottom: none; }
.tpl-classic_pro .cp-optag { font-size: 9px; color: var(--doc-accent); border: 1px solid var(--doc-accent); border-radius: 999px; padding: 0 6px; }
.tpl-classic_pro .cp-termsbox { background: #fafafa; border-left: 3px solid #4a4a4a; padding: 9px 12px; margin-top: 13px; font-size: 10.5px; }
.tpl-classic_pro .cp-term { margin: 3px 0; }
.tpl-classic_pro .cp-term b { color: #4a4a4a; }
.tpl-classic_pro .cp-notes { margin: 3px 0 0; padding-left: 16px; }
.tpl-classic_pro .cp-sigrow { display: flex; gap: 40px; margin-top: 22px; }
.tpl-classic_pro .cp-sig { flex: 1; }
.tpl-classic_pro .cp-sigline { border-bottom: 1px solid #4a4a4a; height: 20px; }
.tpl-classic_pro .cp-siglabel { font-size: 8px; letter-spacing: .05em; color: var(--doc-soft); margin-top: 4px; }
.tpl-classic_pro .doc-foot { border-top: 1.5px solid var(--doc-accent); margin-top: 16px; padding-top: 8px; font-size: 9px; color: #4a4a4a; }
@media screen and (max-width: 560px) {
  /* SCREEN-ONLY (never print): iOS «Print/Save as PDF» keeps the phone viewport width, so an
     unscoped max-width block used to stack line items into cards WHILE the print block below
     restored the thead — dark header chips over stacked rows (owner PDF 07-22). */
  /* Phones: the company name stays one modest line instead of a three-line banner (owner 07-22) */
  .tpl-classic_pro .cp-coname { font-size: 16px; letter-spacing: 0; }
  .tpl-classic_pro .cp-tag { font-size: 10.5px; }
  .tpl-classic_pro .cp-head .doc-logo { max-width: 40px; max-height: 40px; }
  .doc .doc-co-name { font-size: 15px; }
  .tpl-branded_orange .doc-co-name { font-size: 16px; }
  .tpl-modern .doc-band .doc-co-name { font-size: 15px; }
  .tpl-classic_pro .cp-parties { flex-direction: column; }
  /* Phone layout: each line item becomes a small block — description full-width, then
     qty · unit · rate small underneath with the amount bold on the right. Totals rows
     (label + sum) keep label left / sum right. Print/desktop keep the classic table. */
  .tpl-classic_pro .cp-table { display: block; }
  .tpl-classic_pro .cp-table thead { display: none; }
  .tpl-classic_pro .cp-table tbody { display: block; }
  .tpl-classic_pro .cp-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--doc-line); }
  .tpl-classic_pro .cp-table td { border: none; padding: 0; }
  .tpl-classic_pro .cp-table td.doc-item-name { flex: 1 1 100%; font-size: 12px; }
  .tpl-classic_pro .cp-table td.cp-c, .tpl-classic_pro .cp-table td.cp-r { font-size: 10.5px; color: var(--doc-soft); text-align: left; }
  .tpl-classic_pro .cp-table td.cp-c:empty { display: none; }
  .tpl-classic_pro .cp-table td.doc-item-amt { margin-left: auto; font-weight: 700; font-size: 12.5px; color: var(--doc-ink); }
  .tpl-classic_pro .cp-table td[colspan] { flex: 1 1 auto; }
  .tpl-classic_pro .cp-table tr:has(td[colspan]) { border-bottom: none; padding: 3px 0; }
  .tpl-classic_pro .cp-table td.cp-sub:last-child { margin-left: auto; }
  .tpl-classic_pro .cp-table tr.cp-total { border-top: 2px solid var(--doc-accent); margin-top: 4px; padding-top: 8px; }
  .tpl-classic_pro .cp-table tr.cp-total td { font-size: 15px; font-weight: 800; color: var(--doc-ink); }
  .tpl-classic_pro .cp-table tr.cp-total td:last-child { margin-left: auto; color: var(--doc-accent); }
}
@media print {
  .tpl-classic_pro .cp-table thead th, .tpl-classic_pro .cp-trust { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tpl-classic_pro .cp-sigrow, .tpl-classic_pro .cp-termsbox { break-inside: avoid; page-break-inside: avoid; }
  /* Long estimates paginate safely: the column header repeats on every page (like the dashboard redraws
     its table head after a page break), rows never split, and the totals stay together. */
  .tpl-classic_pro .cp-table thead { display: table-header-group; }
  .tpl-classic_pro .cp-table tr { break-inside: avoid; page-break-inside: avoid; }
  .tpl-classic_pro .cp-total td, .tpl-classic_pro .cp-sub td { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- MODERN (accent band header) ---------- */
.doc.tpl-modern { padding: 0; }
.tpl-modern .doc-band { background: var(--doc-accent); color: #fff; padding: 22px 24px; display: flex; align-items: center; gap: 16px; border-radius: 14px 14px 0 0; }
.tpl-modern .doc-band .doc-logo { width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,.15); padding: 4px; }
.tpl-modern .doc-band-co { flex: 1; }
.tpl-modern .doc-band .doc-co-name { font-size: 19px; color: #fff; }
.tpl-modern .doc-band .doc-co-lines { color: rgba(255,255,255,.85); }
.tpl-modern .doc-band .doc-creds { color: #fff; }
.tpl-modern .doc-band-kind { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; opacity: .9; }
.tpl-modern .doc-head-body { padding: 20px 24px 0; }
.tpl-modern .doc-kind { display: none; }
.tpl-modern .doc-body { padding: 0 24px 24px; }
.tpl-modern .doc-body > .doc-scope, .tpl-modern .doc-body > section { background: #fbfaf9; border: 1px solid var(--doc-line); border-radius: 12px; padding: 16px; margin-top: 16px; }
.tpl-modern .doc-total-row td { border-top-color: var(--doc-accent); background: color-mix(in srgb, var(--doc-accent) 8%, transparent); }
.tpl-modern .doc-total-row td:first-child { border-radius: 8px 0 0 8px; padding-left: 10px; }
.tpl-modern .doc-total-row td:last-child { border-radius: 0 8px 8px 0; padding-right: 10px; color: var(--doc-accent); }

/* ---------- MINIMAL (ink on paper) ---------- */
.doc.tpl-minimal { padding: 12px 6px; }
.tpl-minimal .doc-min-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tpl-minimal .doc-logo { width: 40px; height: 40px; border-radius: 6px; }
.tpl-minimal .doc-co-name { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.tpl-minimal .doc-rule { border: none; border-top: 2px solid var(--doc-ink); margin: 14px 0; }
.tpl-minimal .doc-kind { color: var(--doc-ink); }
.tpl-minimal .doc-title { font-weight: 600; }
.tpl-minimal .doc-body > section, .tpl-minimal .doc-body > .doc-scope { margin-top: 26px; }
.tpl-minimal .doc-items td { border-bottom: 1px solid var(--doc-line); }
.tpl-minimal .doc-subhead td { color: var(--doc-ink); }
.tpl-minimal .doc-total-row td { border-top: 1px solid var(--doc-ink); }
.tpl-minimal .doc-foot { border-top: 1px solid var(--doc-ink); }

/* ---------- print / PDF ---------- */
@media print {
  @page { size: letter; margin: 14mm; }
  html, body { background: #fff !important; }
  .doc { max-width: 100%; font-size: 12px; }
  .doc-opt-cb { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tpl-modern .doc-band, .doc-paid-badge, .doc-total-row td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* keep sections and the totals/signature intact across page breaks */
  .doc section, .doc .doc-head, .doc-total-row, .doc-sig, .doc-legal { break-inside: avoid; page-break-inside: avoid; }
  .doc-item { break-inside: avoid; }
  .doc-foot { break-inside: avoid; }
}

/* Scope-of-work paragraph (dashboard-style document: plain homeowner description above the table) */
.doc-scopetext { margin: 2px 0 12px; line-height: 1.5; }

/* Drawn e-signature images (dashboard parity) */
.doc-sig-img { display: block; max-height: 64px; max-width: 240px; margin: 0 0 2px; }
.doc-sig-contractor { margin-top: 14px; }
@media print { .doc-sig-img { max-height: 56px; } }

/* Item descriptions & scope print/read at full strength (owner 07-22: «дескрипшин слабенький») */
.tpl-classic_pro .cp-table td.doc-item-name { color: var(--doc-ink); font-weight: 600; }
.tpl-classic_pro .cp-scope { color: var(--doc-ink); }
.doc .doc-item-name { color: var(--doc-ink); }
@media print {
  .doc, .doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Paper carries no interactive hints: no «tap to add», no checkboxes (owner: «без нічого лишнього», 07-22) */
  .doc-screenonly, .doc-opt-cb { display: none !important; }
}