/* The invoice or quote document: one real page, at real page size, so the
   preview on screen is what the browser prints. Everything the design
   controls change is a class or a custom property on .doc:

     .tpl-*        the layout        .docfont-*   the font pairing
     .docsize-*    A4 or US Letter   --doc-accent the accent color

   The type is set in system fonts on purpose: a PDF made from this page
   should look the same on a machine that never loaded a web font. */

.doc-frame { position: sticky; top: 1rem; }
.doc-scale { transform-origin: top left; }
[dir="rtl"] .doc-scale { transform-origin: top right; }

.doc {
  --doc-accent: #b4552d;
  --doc-w: 794px;
  --doc-h: 1123px;
  --doc-pad: 48px;
  --doc-gap: 1.8rem;
  --doc-fs: 14px;
  --doc-bg: #ffffff;
  --doc-ink: #23201b;
  --doc-muted: #55503f;
  --doc-line: #ddd7c8;
  --doc-body-font: Georgia, "Times New Roman", serif;
  --doc-head-font: Georgia, "Times New Roman", serif;
  width: var(--doc-w);
  min-height: var(--doc-h);
  box-sizing: border-box;
  padding: var(--doc-pad);
  background: var(--doc-bg);
  color: var(--doc-ink);
  font-family: var(--doc-body-font);
  font-size: var(--doc-fs);
  line-height: 1.5;
  overflow-wrap: break-word;
  box-shadow: 0 4px 18px rgba(47, 42, 36, 0.22);
}
.doc * { box-sizing: border-box; }
.doc.docsize-letter { --doc-w: 816px; --doc-h: 1056px; }

/* font pairings */
.doc.docfont-serif { --doc-body-font: Georgia, "Times New Roman", serif; --doc-head-font: Georgia, "Times New Roman", serif; }
.doc.docfont-sans { --doc-body-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --doc-head-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.doc.docfont-mixed { --doc-body-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --doc-head-font: Georgia, "Times New Roman", serif; }
.doc.docfont-duo { --doc-body-font: Georgia, "Times New Roman", serif; --doc-head-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* ---------- the parts, shared by every template ---------- */

.doc-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.doc-brand { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.doc-logo { max-width: 120px; max-height: 78px; object-fit: contain; }
.doc-from { display: grid; gap: 0.1rem; min-width: 0; }
.doc-from strong { font-family: var(--doc-head-font); font-size: 1.2em; line-height: 1.25; }
.doc-from span { color: var(--doc-muted); font-size: 0.9em; }
.doc-meta { text-align: right; min-width: 0; }
.doc-meta h2 { font-family: var(--doc-head-font); font-size: 2em; margin: 0 0 0.4rem; letter-spacing: 0.02em; line-height: 1.1; }
.doc-meta dl { margin: 0; display: grid; gap: 0.15rem; }
.doc-meta dl div { display: flex; justify-content: flex-end; gap: 0.6rem; font-size: 0.9em; }
.doc-meta dt { color: var(--doc-muted); }
.doc-meta dd { margin: 0; font-weight: 600; }

.doc-to { margin: var(--doc-gap) 0 1.1rem; }
.doc-to h3, .doc-foot h3 {
  font-family: var(--doc-head-font); font-size: 0.8em; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--doc-muted); margin: 0 0 0.3rem; font-weight: 700;
}
.doc-to p { margin: 0; }

.doc-items { width: 100%; border-collapse: collapse; margin-top: 0.7rem; }
.doc-items th, .doc-items td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--doc-line); vertical-align: top; }
.doc-items thead th {
  border-bottom: 2px solid var(--doc-ink); text-align: left; font-family: var(--doc-head-font);
  font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.06em;
}
.doc-items .doc-num { text-align: right; white-space: nowrap; }
/* a discount taken off a line, so it reads as money going the other way */
.doc-items .doc-off { color: var(--doc-muted); }
.doc-items tbody tr { break-inside: avoid; page-break-inside: avoid; }
.doc-empty { color: #8a8271; font-style: italic; text-align: center; padding: 1.4rem 0; }

.doc-totals { display: flex; justify-content: flex-end; margin-top: 1.1rem; break-inside: avoid; }
.doc-totals dl { margin: 0; min-width: 16rem; display: grid; gap: 0.25rem; }
.doc-totals div { display: flex; justify-content: space-between; gap: 1.5rem; }
.doc-totals dt { color: var(--doc-muted); }
.doc-totals dd { margin: 0; font-weight: 600; }
.doc-grand { border-top: 2px solid var(--doc-ink); margin-top: 0.4rem; padding-top: 0.5rem; }
.doc-grand dt, .doc-grand dd { font-family: var(--doc-head-font); font-size: 1.2em; font-weight: 700; color: var(--doc-ink); }

.doc-foot { display: grid; gap: 1rem; margin-top: var(--doc-gap); border-top: 1px solid var(--doc-line); padding-top: 1rem; break-inside: avoid; }
.doc-foot p { margin: 0; }

/* ---------- templates ---------- */

/* Classic: the plain paper document, rules in ink. */
.tpl-classic .doc-meta h2 { color: var(--doc-accent); }
.tpl-classic .doc-grand dd { color: var(--doc-accent); }

/* Modern: a thick accent rule under the header and quiet uppercase labels. */
.tpl-modern .doc-head { padding-bottom: 1rem; border-bottom: 4px solid var(--doc-accent); }
.tpl-modern .doc-meta h2 { text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.5em; color: var(--doc-accent); }
.tpl-modern .doc-items thead th { border-bottom-color: var(--doc-accent); }
.tpl-modern .doc-grand { border-top-color: var(--doc-accent); }

/* Minimal: hairlines, wide air, nothing shouting. */
.tpl-minimal { --doc-gap: 2.4rem; --doc-line: #eae5d9; }
.tpl-minimal .doc-meta h2 { font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; font-size: 1.15em; color: var(--doc-muted); }
.tpl-minimal .doc-items thead th { border-bottom: 1px solid var(--doc-ink); }
.tpl-minimal .doc-grand { border-top: 1px solid var(--doc-ink); }
.tpl-minimal .doc-grand dt, .tpl-minimal .doc-grand dd { font-size: 1.1em; }
.tpl-minimal .doc-grand dd { color: var(--doc-accent); }

/* Bold: a solid accent block across the top of the page. */
.tpl-bold .doc-head {
  background: var(--doc-accent); color: #fff; align-items: flex-end;
  margin: calc(var(--doc-pad) * -1) calc(var(--doc-pad) * -1) 0;
  padding: var(--doc-pad) var(--doc-pad) calc(var(--doc-pad) * 0.7);
}
.tpl-bold .doc-from span, .tpl-bold .doc-meta dt { color: rgba(255, 255, 255, 0.82); }
.tpl-bold .doc-meta h2 { font-size: 2.4em; text-transform: uppercase; letter-spacing: 0.04em; }
.tpl-bold .doc-logo { background: #fff; padding: 6px; border-radius: 6px; }
.tpl-bold .doc-items thead th { background: #f2efe6; border-bottom-color: var(--doc-accent); }
.tpl-bold .doc-grand { border-top: 3px solid var(--doc-accent); }
.tpl-bold .doc-grand dd { color: var(--doc-accent); }

/* Compact: for documents with many lines; smaller type, tighter rows. */
.tpl-compact { --doc-fs: 12.5px; --doc-pad: 38px; --doc-gap: 1.2rem; }
.tpl-compact .doc-meta h2 { font-size: 1.6em; }
.tpl-compact .doc-items th, .tpl-compact .doc-items td { padding: 0.33rem 0.35rem; }
.tpl-compact .doc-grand dt, .tpl-compact .doc-grand dd { font-size: 1.05em; }
.tpl-compact .doc-meta h2, .tpl-compact .doc-grand dd { color: var(--doc-accent); }

/* Letterhead: the business centered at the top, like printed stationery. */
.tpl-letterhead .doc-head { display: block; text-align: center; padding-bottom: 1rem; border-bottom: 1px solid var(--doc-line); }
.tpl-letterhead .doc-brand { display: block; }
.tpl-letterhead .doc-logo { margin: 0 auto 0.5rem; display: block; }
.tpl-letterhead .doc-meta { text-align: center; margin-top: 1.2rem; }
.tpl-letterhead .doc-meta h2 { font-size: 1.5em; text-transform: uppercase; letter-spacing: 0.3em; color: var(--doc-accent); }
.tpl-letterhead .doc-meta dl div { justify-content: center; }
.tpl-letterhead .doc-to { text-align: center; }
.tpl-letterhead .doc-grand dd { color: var(--doc-accent); }

/* Stripe: an accent edge down the left of the page. */
.tpl-stripe { padding-left: calc(var(--doc-pad) + 14px); border-left: 14px solid var(--doc-accent); }
[dir="rtl"] .tpl-stripe { padding-left: var(--doc-pad); padding-right: calc(var(--doc-pad) + 14px); border-left: 0; border-right: 14px solid var(--doc-accent); }
.tpl-stripe .doc-meta h2 { color: var(--doc-accent); font-size: 2.2em; }
.tpl-stripe .doc-items thead th { border-bottom-color: var(--doc-accent); }
.tpl-stripe .doc-grand { border-top-color: var(--doc-accent); }

/* Panel: the document details in a tinted box beside the business. */
.tpl-panel .doc-meta {
  background: color-mix(in srgb, var(--doc-accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--doc-accent) 35%, #fff);
  border-radius: 8px; padding: 0.9rem 1.1rem; min-width: 13rem;
}
.tpl-panel .doc-meta h2 { color: var(--doc-accent); font-size: 1.55em; }
.tpl-panel .doc-to h3 { color: var(--doc-accent); }
.tpl-panel .doc-items thead th { background: color-mix(in srgb, var(--doc-accent) 10%, #fff); border-bottom-color: var(--doc-accent); }
.tpl-panel .doc-totals dl { background: color-mix(in srgb, var(--doc-accent) 8%, #fff); border-radius: 8px; padding: 0.8rem 1rem; }
.tpl-panel .doc-grand { border-top-color: var(--doc-accent); }

/* ---------- the design toolbar ---------- */

.doc-tools { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-end; margin-top: 0.4rem; }
.doc-ctl { display: grid; gap: 0.3rem; }
.doc-ctl > label { font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; }
.doc-ctl select { min-width: 9rem; }
.doc-swatches { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.doc-swatch {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--ink);
  padding: 0; cursor: pointer;
}
.doc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper-bright), 0 0 0 5px var(--ink); }
.doc-accent-custom { width: 2.4rem; height: 1.9rem; padding: 0; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper-bright); cursor: pointer; }

/* ---------- print ---------- */

/* the print copy of the document lives at the end of <body> so the print
   sheet can hide everything else with one rule */
#print-area { display: none; }

@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  /* the page box comes from @page (margin 0, written by invoice.js so the
     paper size follows the picker); the document's own padding is the margin */
  /* the vertical margin now comes from @page so that it lands on every
     sheet; the horizontal one is still the document's own padding */
  #print-area .doc {
    width: auto !important; min-height: 0 !important; box-shadow: none !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
  }
  /* a template with a bleeding header still reaches the paper edge, and its
     own top padding comes back so the text does not sit on the trim */
  #print-area .tpl-bold .doc-head { margin-top: 0 !important; padding-top: calc(var(--doc-pad) * 0.6) !important; }
  #print-area .doc-scale { transform: none !important; width: auto !important; height: auto !important; }
}

/* the delivery address, when it is not the billing one */
.doc-shipto { margin-top: 0.9rem; }
/* the total, when a deposit means it is not the last word */
.doc-sum { border-top: 1px solid var(--doc-line); margin-top: 0.4rem; padding-top: 0.4rem; }
.doc-sum dt, .doc-sum dd { font-weight: 700; }