/* The printed estimate, shared by the office app and the customer portal. */

#doc {
  --sheet-font: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  font-family: var(--sheet-font);
  color: #000;
  transform-origin: top left;
}
#doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.page {
  width: 8.5in;
  min-height: 11in;
  padding: 0.25in;
  margin: 0 0 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.page.first { height: 11in; display: flex; flex-direction: column; }
.sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 4px solid #000;
  background: #fff;
}
.lines-wrap { flex: 1; display: flex; flex-direction: column; }
.lines-wrap table { flex: 1; height: 100%; }
.sheet .bar { height: 0.22in; }
.sheet .bar-dark { background: linear-gradient(#6b6b6b, #1d1d1d); }
.sheet .bar-blue { height: 0.2in; background: linear-gradient(#c9d6f1, #5b7cc7 55%, #8fa7da); }
.sheet .bar-navy { height: 0.2in; background: linear-gradient(#35507f, #16284d); }

.sheet-head { display: grid; grid-template-columns: 51% 49%; border-top: 3px solid #000; border-bottom: 3px solid #000; background: #1d1d1d; }
.sheet-brand {
  display: flex;
  align-items: center;
  gap: 0.15in;
  padding: 0.08in 0.12in;
  background: #fff;
  margin: 3px 0 3px 3px;
}
.sheet-brand img { height: 1.75in; width: auto; display: block; }
.sheet-contact { flex: 1; text-align: center; font-size: 11pt; line-height: 1.35; }
.sheet-contact .email { font-size: 9.5pt; }

.cust-box { display: flex; flex-direction: column; margin: 3px 3px 3px 3px; background: #fff; }
.cust-box > div {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 0.05in;
  min-height: 0.2in;
  font-size: 11pt;
  line-height: 1.15;
  background: linear-gradient(#eef2fa, #c5d3ee);
  border-bottom: 1px solid #fff;
}
.cust-box .sm { font-size: 10pt; }
.cust-box .meta { display: grid; grid-template-columns: 1fr 1fr; padding: 0; gap: 0; border-top: 2px solid #1d1d1d; }
.cust-box .meta > span { display: flex; justify-content: space-between; align-items: center; padding: 0 0.06in; border-left: 2px solid #1d1d1d; }
.cust-box .meta > span:first-child { border-left: 0; }
.cust-box .meta b { font-weight: 400; }
.cust-box .meta .big { font-size: 12pt; }

table.sheet-lines { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 11pt; }
table.sheet-lines th {
  font-weight: 400;
  font-size: 12pt;
  padding: 1px 4px;
  background: linear-gradient(#f3f6fc, #bccbeb);
  border: 1px solid #000;
  border-width: 0 0 2px 2px;
}
table.sheet-lines th:first-child, table.sheet-lines td:first-child { border-left: 0; }
table.sheet-lines td {
  height: 0.235in;
  padding: 0 4px;
  border: 1px solid #000;
  border-width: 0 0 2px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.sheet-lines tr.a td { background: linear-gradient(#ffffff, #cbd6ee); }
table.sheet-lines tr.b td { background: linear-gradient(#ffffff, #f6cfb2); }
table.sheet-lines tr.dep-a td { background: linear-gradient(#f4fbef, #cfe9c2); }
table.sheet-lines tr.dep-b td { background: linear-gradient(#fff4fa, #f6cde3); }
table.sheet-lines tr.dep-c td { background: linear-gradient(#fffbea, #f3e3a6); }
table.sheet-lines tr.dep td { font-size: 10.5pt; }
table.sheet-lines .c-item { width: 0.8in; text-align: center; }
table.sheet-lines .c-desc { text-align: center; }
table.sheet-lines td.c-desc.left { text-align: left; }
table.sheet-lines .c-unit { width: 0.6in; text-align: center; }
table.sheet-lines .c-cost { width: 0.9in; text-align: right; }
table.sheet-lines .c-qty { width: 0.5in; text-align: center; }
table.sheet-lines .c-total { width: 1.0in; text-align: right; }
.sheet .gap { height: 0.2in; background: linear-gradient(#ffffff, #dfe6f5); border-bottom: 2px solid #000; }

.sheet-foot { display: grid; grid-template-columns: 1fr 2.4in; align-items: stretch; }
.disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.1in;
  border: 3px solid #f00;
  background: linear-gradient(#f2fbef, #8ff08a 60%, #18e418);
  color: #e0120f;
  font-weight: 700;
  font-size: 12pt;
}
table.sheet-totals { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
table.sheet-totals td { padding: 1px 4px; height: 0.24in; border-bottom: 2px solid #000; }
table.sheet-totals td.v { width: 1.0in; text-align: right; border-left: 2px solid #000; background: linear-gradient(#fff, #dde5f4); }
table.sheet-totals .strong td.k { font-weight: 700; font-size: 12pt; }
table.sheet-totals .due td.k { font-weight: 700; font-size: 8.5pt; }
table.sheet-totals .due td.v { color: #e0120f; }

.thanks {
  text-align: center;
  font-weight: 700;
  font-size: 15pt;
  color: #1111dd;
  padding: 0.14in 0 0.2in;
  background: linear-gradient(#b8c7e8, #dfe5f3 45%, #f7d7c1);
  border-top: 2px solid #000;
}

/* terms */
.terms h3 { text-align: center; text-decoration: underline; font-size: 12pt; margin: 0 0 8px; }
.terms p { margin: 0 0 6px; font-size: 11pt; line-height: 1.32; }
.terms p.num { text-indent: 0.9in; }
.terms p.sub { text-indent: 1.0in; margin-top: -4px; }
.terms p.dep { text-align: center; margin: 0; }
.terms p.dep.total { margin-bottom: 8px; }
.terms p.gap-top { margin-top: 8px; }
.agreement {
  margin-top: 0.25in;
  padding: 0.18in 0.25in;
  border: 2px solid #000;
  font-size: 11pt;
  break-inside: avoid;
}
.agreement h4 { text-align: center; text-decoration: underline; margin: 0 0 6px; font-size: 12pt; }
.agreement p { margin: 0 0 12px; }
.agreement .who { text-align: center; text-decoration: underline; margin: 14px 0 12px; }
.agreement .signer { margin: -8px 0 0 1.15in; }

/* breakdown */
table.breakdown { width: 100%; border-collapse: collapse; border: 3px solid #000; font-size: 11pt; }
table.breakdown td, table.breakdown th { border: 1px solid #000; padding: 1px 5px; height: 0.24in; }
table.breakdown th { font-size: 11pt; }
table.breakdown .sec td { font-weight: 700; font-size: 11pt; }
table.breakdown .c-unit { width: 0.65in; text-align: center; }
table.breakdown .c-cost { width: 0.95in; text-align: right; }
table.breakdown .c-qty { width: 0.5in; text-align: center; }
table.breakdown .c-total { width: 1.05in; text-align: right; }
table.breakdown .sec .c-total { font-size: 10pt; }

/* invoice */
.sheet .bar-label { height: auto; color: #fff; font-weight: 700; letter-spacing: 0.3em; text-align: center; font-size: 11pt; padding: 1px 0; }
table.sheet-lines .c-date { width: 0.65in; text-align: center; }
table.sheet-lines tr.notes td { white-space: normal; height: auto; padding: 6px 10px; text-align: center; font-size: 10pt; line-height: 1.35; background: linear-gradient(#fdf1e7, #f6d9c2); }
table.sheet-totals .k.sm { font-size: 8.5pt; }
table.sheet-totals .due-big td.v { color: #e0120f; font-weight: 700; }
.pay-band { text-align: center; padding: 6px 0 8px; background: linear-gradient(#b8c7e8, #dfe5f3 45%, #f7d7c1); border-top: 2px solid #000; font-size: 11.5pt; line-height: 1.45; }
.pay-band .lbl { color: #3d5a2a; }
.pay-band .ty { font-weight: 700; font-size: 14pt; color: #1111dd; text-decoration: underline; margin-top: 2px; }

.agreement .esig { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 15pt; border-bottom: 1px solid #000; padding: 0 12px; }
.agreement .esig-note { font-size: 9pt; color: #333; margin-top: -4px; }

@page { size: letter; margin: 0.25in; }

@media print {
  .preview { overflow: visible; height: auto !important; }
  #doc { transform: none !important; width: auto !important; }
  .page { width: auto; min-height: 0; padding: 0; margin: 0; box-shadow: none; break-after: page; }
  .page.first { height: 10.45in; }
  .page:last-child { break-after: auto; }
}