/* The customer invoice (brief 32): #/invoice/<job>. One document for the screen and the printer: white paper, dark ink,
   one restrained accent (the owner's saved accent, else the Ratchet green) on the title rule and job names only, so it reads
   the same in monochrome. Print: US Letter or A4 (named pages), page numbers, column headings repeated on every page,
   each job's heading kept with its first line, the summary kept together, nothing but the document printed. */
.ivc-doc { --ivc-accent: var(--accent, #1d5b3d); --ivc-ink: #15181d; --ivc-ink-2: #4b515a; --ivc-hair: #d5d9df;
  box-sizing: border-box; max-width: 860px; margin: 0 auto 32px; padding: 40px 44px 28px; background: #fff; color: var(--ivc-ink);
  font: 400 14px/1.45 var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
  border-radius: 8px; box-shadow: 0 0 0 .5px var(--hair, #d5d9df), 0 8px 28px rgba(16, 24, 40, .06); }
.ivc-doc * { box-sizing: border-box; }
.ivc-doc h1, .ivc-doc h2, .ivc-doc h3, .ivc-doc p, .ivc-doc dl, .ivc-doc dd, .ivc-doc ul { margin: 0; }
.ivc-bar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; max-width: 860px; margin: 0 auto 12px; flex-wrap: wrap; }
body.shop-on .ivc-bar button { min-height: 44px; }

/* header: the shop on the left, INVOICE with its number, date and status on the right */
.ivc-head { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 3px solid var(--ivc-accent); }
.ivc-shop { display: flex; gap: 14px; align-items: flex-start; min-width: 0; color: var(--ivc-ink-2); font-size: 13px; }
.ivc-logo { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }
.ivc-shopname { font-size: 18px; font-weight: 700; color: var(--ivc-ink); margin-bottom: 2px; overflow-wrap: anywhere; }
.ivc-legal { margin-top: 4px; font-size: 12px; }
.ivc-title { text-align: right; flex: 0 0 auto; }
.ivc-title h1 { font-size: 26px; letter-spacing: .14em; font-weight: 800; color: var(--ivc-ink); }
.ivc-meta { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 2px 12px; margin-top: 6px; font-size: 13px; }
.ivc-meta .ivc-kv { display: contents; }
.ivc-meta dt { color: var(--ivc-ink-2); }
.ivc-meta dd { font-weight: 600; text-align: right; }
.ivc-status { display: inline-block; margin-top: 10px; padding: 3px 10px; border: 1.5px solid var(--ivc-ink); border-radius: 4px; font-weight: 700; font-size: 13px; }
.ivc-status.is-paid, .ivc-status.is-no_charge { border-color: var(--ivc-accent); color: var(--ivc-accent); }

/* customer and vehicle */
.ivc-parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--ivc-hair); }
.ivc-parties h2, .ivc-notes h3, .ivc-deferred h2, .ivc-terms h2 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ivc-ink-2); margin-bottom: 4px; }
.ivc-parties p { overflow-wrap: anywhere; }
.ivc-vdl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin-top: 4px; font-size: 13px; }
.ivc-vdl .ivc-kv { display: contents; }
.ivc-vdl dt { color: var(--ivc-ink-2); }
.ivc-vdl dd { overflow-wrap: anywhere; }

/* the work: one table, a heading row per job, its lines, and the job's total */
.ivc-work { padding-top: 14px; }
.ivc-lines { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ivc-lines col, .ivc-lines th:nth-child(1) { width: auto; }
.ivc-lines thead th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ivc-ink-2); text-align: left; padding: 6px 8px; border-bottom: 1.5px solid var(--ivc-ink); }
.ivc-lines thead th:nth-child(2) { width: 13%; } .ivc-lines thead th:nth-child(3), .ivc-lines thead th:nth-child(4) { width: 15%; }
.ivc-lines td { padding: 5px 8px; vertical-align: top; border-bottom: 1px solid #eef0f3; overflow-wrap: anywhere; }
.ivc-lines .ivc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ivc-jobhead th { text-align: left; padding: 14px 8px 4px; border-bottom: 1px solid var(--ivc-hair); font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ivc-ink); }   /* not the app's table-heading style */
.ivc-jobname { display: block; font-size: 15px; font-weight: 700; color: var(--ivc-accent); overflow-wrap: anywhere; }
.ivc-jobdesc { display: block; color: var(--ivc-ink-2); font-size: 13px; margin-top: 2px; }
.ivc-sub td { padding-top: 8px; font-weight: 600; }
.ivc-disc { display: block; text-indent: 0; font-size: 12px; font-weight: 400; color: var(--ivc-ink-2); }
.ivc-kind { display: inline-block; width: 54px; text-indent: 0; color: var(--ivc-ink-2); font-size: 12px; font-weight: 400; }
.ivc-desc { padding-left: 62px !important; text-indent: -54px; }   /* a wrapped description lines up under itself, not under its kind */
.ivc-one th { padding: 8px 8px 6px; border-bottom: 1px solid var(--ivc-hair); }
.ivc-one .ivc-jobname { display: inline; font-size: 14px; }
.ivc-one td { padding-top: 8px; border-bottom: 1px solid var(--ivc-hair); font-weight: 600; }
.ivc-jobtotal td { font-weight: 600; border-bottom: 0; padding-bottom: 8px; }
.ivc-jobtotal td:first-child { text-align: right; color: var(--ivc-ink-2); font-weight: 400; }

/* the summary: one aligned column, total and balance emphasised */
.ivc-totals { display: flex; justify-content: flex-end; padding: 16px 0; border-top: 1.5px solid var(--ivc-ink); margin-top: 6px; }
.ivc-totals dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(110px, max-content); gap: 4px 0; min-width: 300px; font-variant-numeric: tabular-nums; }
.ivc-totals dt { color: var(--ivc-ink-2); padding-right: 28px; }   /* the space is padding, not a gap, so the total's rule runs unbroken */
.ivc-totals dd { text-align: right; white-space: nowrap; }
.ivc-totals .ivc-total { font-weight: 700; color: var(--ivc-ink); font-size: 15px; padding-top: 6px; border-top: 1px solid var(--ivc-hair); }
.ivc-totals .ivc-balance { font-weight: 800; color: var(--ivc-ink); font-size: 17px; padding-top: 6px; border-top: 1.5px solid var(--ivc-ink); }
.ivc-dim { color: var(--ivc-ink-2); }

/* notes, approval, recommendations, warranty, footer */
.ivc-notes, .ivc-deferred, .ivc-terms { padding: 14px 0; border-top: 1px solid var(--ivc-hair); display: grid; gap: 10px; }
.ivc-note p, .ivc-terms p { white-space: pre-line; overflow-wrap: anywhere; }
.ivc-auth { font-size: 13px; color: var(--ivc-ink-2); }
.ivc-deferred ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.ivc-deferred li { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px dashed var(--ivc-hair); }
.ivc-foot { padding-top: 14px; border-top: 1px solid var(--ivc-hair); color: var(--ivc-ink-2); font-size: 12px; text-align: center; }

.ivc-card .btn { margin-top: 6px; }

@media (max-width: 640px) {
  .ivc-doc { padding: 22px 16px 18px; border-radius: 0; font-size: 13px; }
  .ivc-head { flex-direction: column; gap: 14px; }
  .ivc-title { text-align: left; }
  .ivc-meta { justify-content: start; }
  .ivc-meta dd { text-align: left; }
  .ivc-parties { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ivc-lines { table-layout: auto; }
  .ivc-lines thead th:nth-child(n) { width: auto; }
  /* the unit price: the amount carries it on a phone. Collapsed, not removed: a removed cell would shift the amount into its column */
  .ivc-lines tr:not(.ivc-jobtotal) > td:nth-child(3), .ivc-lines thead th:nth-child(3) { width: 0; max-width: 0; padding: 0 !important; font-size: 0; overflow: hidden; border-left: 0; border-right: 0; }
  .ivc-lines .ivc-num { width: 1%; }
  .ivc-desc, .ivc-lines thead th:first-child { width: 100%; padding-left: 6px !important; text-indent: 0; }   /* the description takes the room the hidden price column leaves (job headings span all four) */
  .ivc-kind { display: block; width: auto; }
  .ivc-totals dl { min-width: 0; width: 100%; }
}

/* ---------- print ---------- */
@page ivc-letter { size: letter; margin: 0.6in 0.6in 0.75in;
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9pt Helvetica, Arial, sans-serif; color: #4b515a; } }
@page ivc-a4 { size: A4; margin: 15mm 15mm 19mm;
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9pt Helvetica, Arial, sans-serif; color: #4b515a; } }
@media print {
  /* only the invoice prints: everything that neither holds it nor sits inside it is hidden; what holds it lays out as plain blocks */
  body.ivc-mode *:not(.ivc-doc):not(.ivc-doc *):not(:has(.ivc-doc)) { display: none !important; }
  body.ivc-mode, body.ivc-mode *:has(.ivc-doc) { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    box-shadow: none !important; background: #fff !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; overflow: visible !important; }
  .ivc-noprint { display: none !important; }
  .ivc-doc { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; font-size: 10pt; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ivc-doc.is-letter { page: ivc-letter; }
  .ivc-doc.is-a4 { page: ivc-a4; }
  .ivc-lines thead { display: table-header-group; }   /* the column headings on every page */
  .ivc-lines tr, .ivc-parties, .ivc-head, .ivc-note, .ivc-auth, .ivc-deferred li { break-inside: avoid; }
  .ivc-jobhead { break-after: avoid; }   /* a job's name never sits alone at the bottom of a page */
  .ivc-totals, .ivc-terms, .ivc-foot { break-inside: avoid; }
  .ivc-parties h2, .ivc-notes h3, .ivc-deferred h2, .ivc-terms h2 { break-after: avoid; }
  .ivc-doc a { color: inherit; text-decoration: none; }
  /* compact on paper: a one-page job stays one page */
  .ivc-head { padding-bottom: 12px; }
  .ivc-parties { padding: 10px 0; }
  .ivc-work { padding-top: 6px; }
  .ivc-lines td { padding: 3px 6px; }
  .ivc-jobhead th { padding: 9px 6px 3px; }
  .ivc-one th, .ivc-one td { padding: 5px 6px 4px; }
  .ivc-jobtotal td { padding-bottom: 4px; }
  .ivc-totals { padding: 10px 0; }
  .ivc-notes, .ivc-deferred, .ivc-terms { padding: 8px 0; gap: 6px; }
  .ivc-foot { padding-top: 8px; }
}