/* All Storm invoice document — the ONE look for invoices everywhere.
   Used by invoice.html (customer page) AND the CRM's invoice editor
   (linked cross-origin from the hub), so the editor is true WYSIWYG:
   what you type on is exactly what the customer opens.
   Modeled on the company's JobNimbus invoice (black INVOICE banner,
   company block + logo, boxed meta tables, bordered item rows,
   totals box with payments + balance). Scoped under .inv. */

.inv {
  --inv-ink: #17202e;
  --inv-sub: #47536b;
  --inv-mute: #8b96a9;
  --inv-line: #d7dce4;
  --inv-cell: #f2f4f7;
  --inv-blue: #2e6db8;
  --inv-green: #1e7d4f;
  --inv-amber: #b45309;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--inv-ink);
  background: #fff;
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid var(--inv-line);
  border-radius: 6px;
  box-shadow: 0 16px 40px -18px rgba(23, 32, 46, .25);
  font-size: 13.5px;
  line-height: 1.45;
}
.inv * { box-sizing: border-box; }

/* ============ top line (was a full black banner — owner 7-25: too heavy).
   A quiet letter-spaced INVOICE label + status chip over a hairline. ====== */
.inv-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--inv-mute);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5em;
  padding: 14px 28px 10px;
  border-bottom: 1px solid var(--inv-line);
}
.inv-banner .inv-status {
  letter-spacing: .06em;
  text-indent: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.inv-status.due     { background: #fff3e0; color: var(--inv-amber); }
.inv-status.paid    { background: #e3f6ec; color: var(--inv-green); }
.inv-status.partial { background: #e8effc; color: var(--inv-blue); }
.inv-status.draft   { background: #e6e9ee; color: #5b6572; }

/* ============ company header ============ */
.inv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px 6px;
  flex-wrap: wrap;
}
.inv-co { font-size: 12.5px; color: var(--inv-sub); }
.inv-co b { display: block; font-size: 15px; color: var(--inv-ink); margin-bottom: 2px; }
.inv-co a { color: var(--inv-blue); text-decoration: none; }
.inv-creds { text-align: center; padding-top: 4px; }
.inv-creds .inv-trade { font-weight: 700; font-size: 14px; }
.inv-creds .inv-lbi { font-size: 11px; font-style: italic; color: var(--inv-sub); margin-top: 2px; }
.inv-creds .inv-roc { font-weight: 700; color: var(--inv-blue); font-size: 12.5px; margin-top: 6px; }
.inv-logo { height: 92px; max-width: 130px; object-fit: contain; }

/* ============ bill-to + info table ============ */
.inv-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 26px 28px 8px;
  flex-wrap: wrap;
}
.inv-billto { font-size: 13px; color: var(--inv-sub); font-style: italic; }
.inv-billto b { display: block; font-size: 14px; color: var(--inv-ink); }
/* The info table and the top pay button share one right-hand column so the
   button lines up with "Amount Due" instead of floating beside it. */
.inv-metaright { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 280px; }
.inv-metaright .inv-info { min-width: 0; width: 100%; }
.inv-info { border-collapse: collapse; min-width: 280px; }
.inv-info td {
  border: 1px solid var(--inv-line);
  padding: 6px 12px;
  font-size: 12.5px;
}
.inv-info td:first-child {
  background: var(--inv-cell);
  font-weight: 700;
  width: 42%;
}
.inv-info .inv-due-big { font-weight: 700; }

/* ============ items table ============ */
.inv-items-wrap { padding: 22px 28px 4px; }
.inv-items { width: 100%; border-collapse: separate; border-spacing: 0 5px; }
.inv-items th {
  background: var(--inv-cell);
  border: 1px solid var(--inv-line);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}
.inv-items th.r, .inv-items td.r { text-align: right; }
.inv-items td {
  border: 1px solid var(--inv-line);
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--inv-sub);
  vertical-align: top;
  background: #fff;
}
.inv-items td:first-child { color: var(--inv-ink); }
.inv-items td.r { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============ totals ============ */
.inv-totals-wrap { display: flex; justify-content: flex-end; padding: 14px 28px 4px; }
.inv-totals { border-collapse: collapse; min-width: 300px; }
.inv-totals td { border: 1px solid var(--inv-line); padding: 6px 12px; font-size: 12.5px; }
.inv-totals td:first-child { background: var(--inv-cell); font-weight: 700; width: 55%; }
.inv-totals td.r { text-align: right; font-variant-numeric: tabular-nums; }
.inv-totals tr.inv-balance td { font-weight: 700; font-size: 13.5px; }
.inv-totals .inv-pay-date { display: block; font-weight: 400; font-size: 11px; color: var(--inv-mute); }
.inv-fee-note { text-align: right; font-size: 11px; color: var(--inv-mute); padding: 6px 28px 0; }

/* ============ pay button ============ */
.inv-payrow { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding: 12px 28px 0; }
.inv-paybtn {
  display: inline-block;
  background: var(--inv-green);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 22px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 8px 18px -8px rgba(30, 125, 79, .55);
}
.inv-paybtn:active { transform: translateY(1px); }
.inv-paysub { font-size: 11px; color: var(--inv-green); }
/* Print-only typable pay URL (see @media print) */
.inv-pay-url { display: none; }

/* Top pay button (owner 8-14) — the same link as the button at the bottom,
   sitting under "Amount Due" so a customer who opens the invoice on a phone
   can pay without scrolling past the photos and the line items. Hidden in
   print: paper already carries the bottom button and its typable URL, and
   two identical buttons on one sheet reads as a mistake. */
.inv-paytop {
  display: block;
  background: var(--inv-green);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 9px 14px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 8px 18px -8px rgba(30, 125, 79, .55);
}
.inv-paytop:active { transform: translateY(1px); }
.inv-paytop-sub { font-size: 10.5px; color: var(--inv-mute); text-align: center; margin-top: -3px; }

/* ============ project photos (CompanyCam imports + device uploads) ======
   Same treatment as the proposal page's inspection grid — rounded cells,
   hover zoom, tap to enlarge — restyled to sit inside the invoice document.
   Renders above the line items or below the notes (inv.media.position). */
.inv-photos { padding: 20px 28px 8px; }
.inv-photos h3 {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .45em;
  text-indent: .45em;
  text-transform: uppercase;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--inv-line);
  padding-bottom: 8px;
}
.inv-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 560px) { .inv-photo-grid { grid-template-columns: 1fr 1fr 1fr; } }
.inv-photo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--inv-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--inv-cell);
  cursor: zoom-in;
}
.inv-photo img { width: 100%; height: 140px; object-fit: cover; display: block; transition: transform .2s; }
@media (min-width: 560px) { .inv-photo img { height: 160px; } }
.inv-photo:hover img { transform: scale(1.03); }
/* The fold (owner 8-14): past a handful of photos the grid buried the line
   items and the pay button under a wall of roof shots. Only the first six
   render on screen; the rest stay in the DOM, hidden, so "Show all" is a
   class flip — and so PRINT can un-hide every one of them (@media print
   below). Nothing is ever dropped from the page, only from the first look. */
.inv-photo-more { display: none; }
.inv-photos-open .inv-photo-more { display: block; }
.inv-photo-toggle {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--inv-sub);
  background: #fff;
  border: 1px solid var(--inv-line);
  border-radius: 8px;
  width: 100%;
  padding: 9px 12px;
  margin-top: 10px;
  cursor: pointer;
}
.inv-photo-toggle:hover { background: var(--inv-cell); color: var(--inv-ink); }
.inv-lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 11, 22, .93);
  display: none; align-items: center; justify-content: center;
  padding: 20px; cursor: zoom-out;
}
.inv-lightbox.open { display: flex; }
.inv-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 10px; }

/* ============ special instructions ============ */
.inv-notes { padding: 26px 28px 8px; }
.inv-notes h3 {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .45em;
  text-indent: .45em;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--inv-line);
  padding-bottom: 8px;
}
.inv-notes p { font-size: 12.5px; color: var(--inv-sub); white-space: pre-wrap; margin: 0; }

/* ============ footer ============ */
.inv-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 22px 28px 24px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--inv-mute);
  font-weight: 600;
}
.inv-printbtn {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-size: 12.5px;
  font-weight: 700;
  background: #0c1320;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  cursor: pointer;
}

/* ============ editor affordances (CRM only — invisible until touched) ==== */
.inv-input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px dashed transparent;
  padding: 0;
  width: 100%;
  outline: none;
  resize: none;
}
.inv-input:hover { border-bottom-color: var(--inv-line); }
.inv-input:focus { border-bottom-color: var(--inv-blue); }
.inv-input::placeholder { color: var(--inv-mute); opacity: .8; }
.inv-input.r { text-align: right; }
/* per-line tools strip — .inv-line is a per-line <tbody> so hover/focus on
   either row keeps the tools visible; appears only for the active line */
.inv-line-tools { display: none; }
.inv-line:hover .inv-line-tools,
.inv-line:focus-within .inv-line-tools { display: table-row; }
.inv-line-tools td {
  background: #f7f9fb !important;
  border-style: dashed !important;
  color: var(--inv-mute);
  font-size: 11px;
  padding: 4px 12px;
  white-space: nowrap;
}
.inv-line-tools label { cursor: pointer; user-select: none; margin-right: 12px; }
.inv-line-tools input[type="number"] {
  font: inherit; width: 64px; border: 1px solid var(--inv-line);
  border-radius: 3px; padding: 1px 5px; margin: 0 10px 0 3px;
}
.inv-line-tools .inv-line-x {
  font: inherit; color: #b3413d; background: none; border: none; cursor: pointer; float: right;
}
.inv-addline {
  font: inherit;
  font-size: 12.5px;
  color: var(--inv-mute);
  background: transparent;
  border: 1px dashed var(--inv-line);
  border-radius: 4px;
  width: 100%;
  padding: 7px 12px;
  text-align: left;
  cursor: pointer;
  margin-top: 5px;
}
.inv-addline:hover { color: var(--inv-ink); border-color: var(--inv-mute); }

/* ============ print / mobile ============ */
@media print {
  /* Full-sheet invoices (owner 7-24): a 1-line invoice must not print as a
     half strip. Flex column + min-height fills the page and margin-top:auto
     pins the ROC footer to the bottom edge; invoices long enough to
     overflow just flow onto extra pages as before. 98vh (not 100) so
     rounding never spits out a blank second page. */
  .inv {
    box-shadow: none; border: none; border-radius: 0; max-width: none;
    min-height: 98vh;
    display: flex;
    flex-direction: column;
  }
  .inv-foot { margin-top: auto; }
  /* Never split the money block or the pay button across a page break. */
  .inv-totals-wrap, .inv-payrow, .inv-fee-note { break-inside: avoid; }
  /* Photos print as the grid; each cell stays whole across page breaks.
     The lightbox is screen furniture only. A printed invoice is the
     PERMANENT copy — it carries every photo whether or not the reader ever
     expanded the fold on screen (owner 8-14). invoice.html force-loads the
     hidden images before printing; a lazy image nobody scrolled to would
     otherwise print as an empty cell. */
  .inv-photo { break-inside: avoid; }
  .inv-photo-more { display: block !important; }
  .inv-photo-toggle { display: none; }
  .inv-paytop, .inv-paytop-sub { display: none; }
  .inv-lightbox { display: none !important; }
  /* The pay button STAYS in print (JobNimbus parity): PDFs saved from the
     browser keep <a> links clickable, so an emailed PDF pays online too.
     Paper readers get the typable URL line under it. Only the Print button
     itself has no business on paper. */
  .inv-printbtn { display: none; }
  .inv-pay-url {
    display: block;
    font-size: 9.5px;
    color: var(--inv-mute);
    text-decoration: none;
    word-break: break-all;
    max-width: 360px;
    text-align: right;
  }
  .inv-banner, .inv-info td:first-child, .inv-items th, .inv-totals td:first-child, .inv-paybtn {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}
@media (max-width: 560px) {
  .inv-banner { padding: 12px 14px 8px; letter-spacing: .35em; }
  .inv-head { justify-content: center; text-align: center; }
  .inv-logo { height: 72px; }
  /* editor tools strip wraps instead of forcing horizontal scroll */
  .inv-line-tools td { white-space: normal; }
  .inv-line-tools .inv-line-x { float: none; display: block; margin-top: 4px; }
  .inv-meta { flex-direction: column; }
  .inv-info { width: 100%; }
  .inv-items-wrap, .inv-totals-wrap, .inv-notes, .inv-photos, .inv-head, .inv-meta, .inv-foot { padding-left: 14px; padding-right: 14px; }
}