/* 018 Sales Report Design — the reference design system.
 *
 * Semantic classes for the reusable primitive vocabulary (P1–P8) plus the directional
 * colour system. Token values are decoded from the 53-page reference template (see
 * context/technical-plan.md "Design tokens decoded from the reference").
 *
 * Served by Propshaft; linked from BOTH layouts/report.html.erb (screen) and
 * layouts/report_print.html.erb (PDF), AFTER the app stylesheet, so these rules win.
 * Deliberate departure from the inline-Tailwind convention (ADR D5): this design is
 * systematic and heavily reused, so it lives in one semantic sheet keyed off a single
 * `--accent` custom property rather than four hard-coded copies of every directional rule.
 *
 * Colours apply on screen AND in print — the coloured bands/tints carry
 * `print-color-adjust: exact` so headless Chrome keeps them in the PDF. */

:root {
  --rpt-ink:            #2B3A4B; /* section H1, field label/value, band text */
  --rpt-hairline:       #D7DEE6; /* H1 rules, photo-slot border */
  --rpt-band-bg:        #E9ECEF; /* grey subsection band */
  --rpt-chip-bg:        #EDF0F2; /* chip cell */
  --rpt-value-underline:#C9D6E5; /* thin rule under a field value */
  --rpt-photo-bg:       #EEF2F6; /* photo slot fill */
  --rpt-caption:        #6B7280; /* photo caption */

  /* Directional accents. A section wrapper sets --accent to one of these; every
     directional primitive reads var(--accent) and never hard-codes a colour. */
  --rpt-accent-front:   #2F6BF0; /* blue  */
  --rpt-accent-right:   #D6453C; /* red   */
  --rpt-accent-back:    #E8A400; /* amber */
  --rpt-accent-left:    #2E9E52; /* green */

  --accent:             var(--rpt-ink); /* default when no direction is set */
}

/* Directional accent as a single custom property on the section wrapper. Set the class
   OR an inline `style="--accent:#…"`; primitives below inherit it. */
.rpt-accent-front { --accent: var(--rpt-accent-front); }
.rpt-accent-right { --accent: var(--rpt-accent-right); }
.rpt-accent-back  { --accent: var(--rpt-accent-back); }
.rpt-accent-left  { --accent: var(--rpt-accent-left); }

/* Section H1 — the per-page section title. */
.rpt-h1 {
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--rpt-hairline);
  border-bottom: 1px solid var(--rpt-hairline);
  padding: 10px 0;
  margin: 0 0 16px;
}

/* P1 — grey subsection band. */
.rpt-band {
  background: var(--rpt-band-bg);
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  margin: 16px 0 12px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* P2 — chip row: N equal cells. */
.rpt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.rpt-chips__cell {
  flex: 1 1 0;
  min-width: 140px;
  background: var(--rpt-chip-bg);
  padding: 8px 12px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.rpt-chips__label {
  display: block;
  color: var(--rpt-caption);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rpt-chips__value {
  display: block;
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}

/* P3 — field group: label / underlined value pairs. */
.rpt-fields__title {
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.rpt-fields__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.rpt-fields__item {
  flex: 1 1 180px;
  min-width: 160px;
}
.rpt-fields__label {
  display: block;
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rpt-fields__value {
  display: block;
  color: var(--rpt-ink);
  font-size: 13px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rpt-value-underline);
}

/* P4 — the UNIFIED row-with-photo (018). THE most-reused primitive, shared by the P4
   `_row` primitive AND the generic `_field_group`. A three-zone CSS grid:

     [ label column (fixed) | details (1fr, nested 2-col grid) | photo column (fixed, right) ]

   The three tracks are FIXED, and each zone is placed on its own track, so the photo
   always holds the right column even when the details zone is empty, and every row's
   photo is the same size regardless of how much text sits beside it. Rows never split
   across a page. */
.rpt-row {
  display: grid;
  grid-template-columns: 150px 1fr 140px;
  gap: 6px 14px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px solid var(--rpt-hairline);
  break-inside: avoid;
}
.rpt-row__label {
  grid-column: 1;
  align-self: stretch;
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 8px;
  background: var(--rpt-band-bg);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* Directional tint on the label column (elevations, fencing): the accent at ~8% alpha.
   `color-mix` degrades to the flat band background where unsupported. */
.rpt-row--accent .rpt-row__label {
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border-left: 3px solid var(--accent);
}

/* Details zone — a nested 2-column grid. Each normal field is ONE cell; a Notes field
   spans BOTH columns (full width). */
.rpt-row__details {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  align-content: start;
  min-width: 0;
}
.rpt-row__cell { min-width: 0; }
.rpt-row__cell--wide { grid-column: 1 / -1; }
.rpt-row__cell-label {
  display: block;
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rpt-row__cell-value {
  display: block;
  color: var(--rpt-ink);
  font-size: 13px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rpt-value-underline);
}
.rpt-row__cell--wide .rpt-row__cell-value {
  border-bottom: none;
  white-space: pre-line;
}
.rpt-row__cell-notes {
  display: block;
  color: var(--rpt-caption);
  font-size: 11px;
  margin-top: 2px;
}

/* Photo zone — the fixed right column. A single photo fills the column at a fixed 4:3;
   multiple photos render as uniform 2-up tiles (equal size), so photos are consistent
   across every row. */
.rpt-row__photo {
  grid-column: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  align-content: start;
}
.rpt-row__photo > * { min-width: 0; }
.rpt-row__photo--single > * { grid-column: 1 / -1; }

/* Legacy spanning fields column — the manual signature rows (interior overviews /
   measurements, fencing) still nest a P3 `.rpt-fields` block here; span it across the
   details + photo tracks. */
.rpt-row__fields {
  grid-column: 2 / -1;
  min-width: 0;
}

/* P5 — photo grid / thumbnails, N-up. */
.rpt-photos {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.rpt-photos--1 { grid-template-columns: 1fr; }
.rpt-photos--2 { grid-template-columns: repeat(2, 1fr); }
.rpt-photos--3 { grid-template-columns: repeat(3, 1fr); }
.rpt-photos--4 { grid-template-columns: repeat(4, 1fr); }
.rpt-photos--6 { grid-template-columns: repeat(6, 1fr); }
.rpt-photos__fig { margin: 0; }

/* Photo slot — the shared filled/bordered image cell used everywhere. */
.rpt-photo-slot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--rpt-photo-bg);
  border: 1px solid var(--rpt-hairline);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.rpt-photo-caption {
  display: block;
  color: var(--rpt-caption);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 3px;
}

/* P6 — Before / During / Result triptych. */
.rpt-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0;
}
.rpt-triptych__cell { margin: 0; }

/* P7 — directional banner. Reads var(--accent). */
.rpt-dirbanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  margin: 16px 0 12px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.rpt-dirbanner__photo {
  flex: 0 0 auto;
  max-height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- Signature sections (018): cover, TOC, claim details ------------------------- */

/* Cover — the large front-overview photo, bordered in the Front accent (blue). */
.rpt-cover-front { margin: 0 0 8px; }
.rpt-cover-front__img {
  display: block;
  width: 100%;
  /* T-021 — tuned empirically so the whole cover (H1 + chips + generated stamp +
     Front Overview band + hero + Property Details grid) fits ONE US-Letter page. */
  max-height: 290px;
  object-fit: cover;
  border: 3px solid var(--rpt-accent-front);
  background: var(--rpt-photo-bg);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Cover — PROPERTY DETAILS: property photo | field list | inspector photo. */
.rpt-cover-details {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 8px;
}
.rpt-cover-details__side { text-align: center; }
.rpt-cover-details__side .rpt-photo-slot { aspect-ratio: 1 / 1; }
.rpt-cover-details__caption {
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 8px;
}
/* Middle column stacks its fields one per row (reference layout). */
.rpt-cover-details__fields .rpt-fields__item { flex: 1 1 100%; }

/* Claim & Inspection Details — two field groups with a centre divider. */
.rpt-claim-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 8px;
}
.rpt-claim-cols__col + .rpt-claim-cols__col { border-left: 1px solid var(--rpt-hairline); padding-left: 40px; }
.rpt-claim-cols .rpt-fields__item { flex: 1 1 100%; }

/* Table of Contents. */
.rpt-toc-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--rpt-band-bg);
  padding: 12px 16px;
  margin: 4px 0 16px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.rpt-toc-band__label {
  display: block;
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rpt-toc-band__value { display: block; color: var(--rpt-ink); font-size: 13px; margin-top: 2px; }
.rpt-toc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.rpt-toc-chapter { margin-bottom: 18px; }
.rpt-toc-chapter__title {
  color: var(--rpt-ink);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rpt-hairline);
  margin-bottom: 6px;
}
.rpt-toc-list { list-style: none; margin: 0; padding: 0; }
.rpt-toc-entry { color: var(--rpt-ink); font-size: 13px; margin: 3px 0; }
.rpt-toc-entry__link { display: flex; align-items: baseline; color: inherit; text-decoration: none; }
.rpt-toc-entry__title { white-space: nowrap; }
.rpt-toc-entry__dots {
  flex: 1 1 auto;
  margin: 0 6px;
  border-bottom: 1px dotted var(--rpt-hairline);
  transform: translateY(-3px);
}
.rpt-toc-entry__num { font-weight: 700; }
.rpt-toc-note { color: var(--rpt-caption); font-size: 10px; font-style: italic; margin-top: 8px; }

/* P8 — parties table: Role | Name/Company | business-card slot. */
.rpt-parties {
  width: 100%;
  border-collapse: collapse;
}
.rpt-parties th,
.rpt-parties td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rpt-hairline);
  font-size: 12px;
  color: var(--rpt-ink);
}
.rpt-parties th {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rpt-caption);
}
.rpt-parties__role {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--rpt-band-bg);
  width: 26%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.rpt-parties__card {
  width: 120px;
  max-width: 120px;
  border: 1px solid var(--rpt-hairline);
}

/* --- AC8 Roof System Overview ----------------------------------------------------- */

/* ROOF CONFIGURATION | EAVE / LADDER VERIFICATION — two banded columns, side by side. */
.rpt-roof-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 8px 0 4px;
}
/* Stack each column's field pairs one per row, like the reference. */
.rpt-roof-cols .rpt-fields__item { flex: 1 1 100%; }

/* Four directional slope-overview thumbnail columns. */
.rpt-slope-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 8px;
}
.rpt-slope-cols__col { --accent: var(--rpt-ink); }
.rpt-slope-cols__head {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 8px 6px;
  margin-bottom: 8px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* The slope column's stacked thumbnails carry a thin accent border (reference look). */
.rpt-slope-cols__col .rpt-photo-slot { border-color: var(--accent); }

/* --- AC10 Roof Findings ------------------------------------------------------------ */

/* BRITTLE TEST — an accent-coloured sub-heading (reads var(--accent) on the wrapper). */
.rpt-accent-subhead {
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 0;
  margin: 14px 0 8px;
  border-bottom: 1px solid var(--rpt-hairline);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* Hail / Wind field pairs laid out two-up, like the reference. */
.rpt-findings-fields { margin-top: 12px; }
.rpt-findings-fields .rpt-fields__item { flex: 1 1 45%; min-width: 220px; }

/* --- AC12 Exterior Elevations ----------------------------------------------------- */

/* The accent-tinted item rows read their side's --accent. The label column's TEXT also
   takes the accent (reference: "DOORS" in blue on the Front side). */
.rpt-row--accent .rpt-row__label { color: var(--accent); }
/* Keep a captured side's rows visually grouped under its banner. */
.rpt-elevation-side { margin-bottom: 20px; }
/* The banner's overview thumbnail is a proper photo slot, not a thin strip. */
.rpt-elevation-side .rpt-dirbanner__photo,
.rpt-fencing .rpt-dirbanner__photo { max-height: 84px; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- AC13 Fencing ----------------------------------------------------------------- */

/* A fence side is a full-width accent row whose fields column stacks the six-field
   summary above the four-up inside/outside grid. The label column spans the whole row. */
/* A fence side has no photo column (its photos live in the four-up grid inside the
   fields zone), so collapse the row to two tracks: label | fields. */
.rpt-fence-side { grid-template-columns: 150px 1fr; }
.rpt-fence-side > .rpt-row__label { display: flex; align-items: center; }
/* The four photo cells carry the side's accent border (reference look). */
.rpt-fence-side .rpt-photos .rpt-photo-slot { border-color: var(--accent); }

/* --- AC16 Interior Damages -------------------------------------------------------- */

/* The OVERVIEWS and MEASUREMENTS rows reuse the P4 frame with a grey (non-accent) label
   column that vertically centres, matching the reference's tall label cell. They have no
   photo column, so collapse to two tracks: label | fields. */
.rpt-interior-overviews,
.rpt-interior-measurements { grid-template-columns: 160px 1fr; }
.rpt-interior-overviews > .rpt-row__label,
.rpt-interior-measurements > .rpt-row__label { display: flex; align-items: center; }
/* Spread the measurement fields across the row rather than wrapping them narrow. */
.rpt-interior-measurements .rpt-fields__item { flex: 1 1 120px; min-width: 100px; }

/* --- 019/B2 Full-screen photo viewer (lightbox) ----------------------------------- *
 * SCREEN-ONLY. The controller (report_lightbox_controller.js) is mounted on the report
 * root for #show/#shared but never in the print render; the @media print rule below is a
 * belt-and-suspenders guard in case the overlay node is ever present in a printed page. */

/* The report photo slots are clickable affordances on screen. */
.rpt-photo-slot { cursor: zoom-in; }

.rpt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding: 24px;
  /* The dark chrome mirrors the native photo_review view. */
  color: #fff;
}
.rpt-lightbox[hidden] { display: none; }

.rpt-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.rpt-lightbox__img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.rpt-lightbox__caption {
  max-width: 90vw;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: #E5E7EB;
  padding: 4px 8px;
}
.rpt-lightbox__caption[hidden] { display: none; }

/* Close + prev/next controls: dark round buttons on the overlay. */
.rpt-lightbox__close,
.rpt-lightbox__nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
  transition: background 0.15s ease;
}
.rpt-lightbox__close:hover,
.rpt-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.rpt-lightbox__close:focus-visible,
.rpt-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.rpt-lightbox__close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 28px;
}

.rpt-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 34px;
}
.rpt-lightbox__nav--prev { left: 16px; }
.rpt-lightbox__nav--next { right: 16px; }
.rpt-lightbox__nav[hidden] { display: none; }

@media (max-width: 640px) {
  .rpt-lightbox__nav { width: 42px; height: 42px; font-size: 26px; }
  .rpt-lightbox__img { max-width: 96vw; max-height: 76vh; }
}

/* 019/A5 — Send-report form (screen only; the share box carries print:hidden). */
.rpt-send__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.rpt-send__label {
  display: block;
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1f2a44;
  margin-bottom: 4px;
}
.rpt-send__input {
  flex: 1 1 16rem;
  min-width: 12rem;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 0.875rem;
  background: #fff;
}
.rpt-send__submit {
  padding: 12px 20px;
  background: #1f2a44;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rpt-send__submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.rpt-send__error {
  color: #b91c1c;
  font-size: 0.875rem;
  margin-bottom: 8px;
}
.rpt-send__sent {
  color: #166534;
  font-weight: 600;
  font-size: 0.875rem;
}

@media print {
  .rpt-lightbox { display: none; }
  .rpt-send { display: none; }
}