/*
 * Repair Opportunity Report — the customer-facing printout of an estimate scrub.
 *
 * An admin opens this from the estimate-review toolbar and hands the result to a
 * shop or a prospect, so it is designed as a report first and a screen second:
 * one clean flow of findings rather than one finding per page, no app chrome,
 * no run telemetry.
 *
 * THIS FILE IS LOADED BY defenses/estimate_review_print ONLY, via that view's
 * content_for(:print_stylesheets). layouts/print.html.erb is shared with
 * rebuttal_print, customer_print and customer_explainer_runs/print, which still
 * rely on the legacy .print-* rules in estimate_review_print.css — so those rules
 * must keep working and nothing here may leak into them.
 *
 * Everything is namespaced under .ror for the same reason, plus the layout loads
 * customer_explainer.css after this file. The .print-logo rules are the one
 * exception: print_brand_logo_tag emits those class names, and the widths below
 * deliberately override the shared file's for this report only.
 */

:root {
  --ror-orange: #f97316;
  --ror-orange-deep: #ea580c;
  --ror-ink: #0f172a;
  --ror-slate: #475569;
  --ror-slate-2: #64748b;
  --ror-line: #e2e8f0;
  --ror-line-soft: #f1f5f9;
  --ror-wash: #f8fafc;
}

body.print-body {
  margin: 0;
  background: #f4f4f5;
  color: var(--ror-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ror {
  box-sizing: border-box;
  max-width: 8.5in;
  margin: 0 auto;
  padding: 40px 48px 44px;
  background: #fff;
  color: var(--ror-ink);
  font-size: 15px;
  line-height: 1.55;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 12px 40px rgba(15, 23, 42, 0.1);
}

.ror * {
  box-sizing: border-box;
}

/* ---------- masthead ---------- */

.ror-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ror-ink);
}

/* Emitted by print_brand_logo_tag. Reclaimr's mark is ~2.3:1; a horizontal
   lockup (Truck Hero's is ~8:1) needs the wider rule or it renders as a smudge.
   Sized by width with height auto so both stay proportional. */
.print-logo {
  width: 132px;
  height: auto;
}

.print-logo--wide {
  width: 210px;
}

/* Rendered only when the brand asset is missing, so the printout still names the
   product instead of showing an empty box. */
.print-brand-fallback {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ror-ink);
}

.ror-masthead-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.ror-contact {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ror-slate);
  white-space: nowrap;
}

.ror-dot {
  margin: 0 5px;
  color: var(--ror-slate-2);
}

.ror-link {
  color: var(--ror-orange-deep);
  text-decoration: none;
}

.ror-link:hover { text-decoration: underline; }

.ror-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ror-slate-2);
  text-align: right;
}

/* ---------- hero ---------- */

.ror-hero { padding: 32px 0 4px; }

.ror-prepared {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ror-slate-2);
}

.ror-prepared b { color: var(--ror-ink); font-weight: 700; }

/* Vehicle / RO / date sit under the shop name rather than trailing it — the
   single run made the line who-and-what-and-when with no hierarchy. */
.ror-caseline {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ror-slate-2);
}

.ror-headline {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ror-ink);
}

.ror-amount { color: var(--ror-orange-deep); }

.ror-subline {
  margin: 0;
  font-size: 15px;
  color: var(--ror-slate);
}

.ror-stats-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* The one deliberately loud element on an otherwise quiet sheet: a dark, centered
   panel so the number a shop cares about is the first thing the eye lands on.
   Sized to its content rather than the column so it reads as a badge, not a bar. */
.ror-stats {
  display: inline-flex;
  align-items: stretch;
  background: var(--ror-ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
}

.ror-stat {
  padding: 20px 34px;
  text-align: center;
}

.ror-stat + .ror-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.ror-stat-v {
  display: block;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
}

.ror-stat-v--hl { color: var(--ror-orange); }

.ror-stat-k {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* ---------- meta ---------- */

.ror-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--ror-wash);
  border: 1px solid var(--ror-line);
  border-radius: 10px;
}

.ror-meta-k {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ror-slate-2);
}

.ror-meta-v {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ror-ink);
}

/* ---------- findings ---------- */

.ror-findings { margin-top: 38px; }

.ror-section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ror-orange-deep);
}

/* Rule runs from the label to the right margin — gives the section a spine
   without adding another boxed element. */
.ror-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ror-line);
}

.ror-finding {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--ror-line-soft);
}

.ror-finding:first-of-type { border-top: 0; }

/* A quiet ordinal gives 16 findings a rhythm to scan by and keeps the eye on a
   left edge that the wrapped body copy would otherwise lose. */
.ror-finding-no {
  flex: 0 0 26px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ror-orange);
  font-variant-numeric: tabular-nums;
}

.ror-finding-main { flex: 1 1 auto; min-width: 0; }

.ror-finding-amt {
  flex: 0 0 auto;
  min-width: 74px;
  padding-left: 20px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ror-ink);
}

.ror-finding-amt--neg { color: #b91c1c; }

.ror-finding-amt--none { color: var(--ror-slate-2); font-weight: 600; }

.ror-finding-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ror-ink);
}

.ror-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.ror-pill--high { background: #fef2f2; color: #b91c1c; }
.ror-pill--medium { background: #fffbeb; color: #b45309; }

.ror-finding-sub {
  margin: 0 0 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ror-orange-deep);
}

.ror-finding-why {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ror-slate);
}

/* Single-figure math reads as one line rather than a two-row table. */
.ror-calc {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ror-slate);
}

.ror-calc-k {
  font-weight: 600;
  color: var(--ror-ink);
  margin-right: 8px;
}

/* ---------- per-finding sub-blocks ---------- */

.ror-sub { margin-top: 8px; }

.ror-sub-title {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ror-slate-2);
}

.ror-list {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--ror-slate);
}

.ror-list strong { color: var(--ror-ink); }

.ror-breakdown { border-collapse: collapse; font-size: 12.5px; }

.ror-breakdown th,
.ror-breakdown td {
  padding: 3px 14px 3px 0;
  text-align: left;
  font-weight: 400;
  color: var(--ror-slate);
  background: transparent;
  border: 0;
}

.ror-breakdown th { font-weight: 600; color: var(--ror-ink); }

.ror-breakdown tfoot th,
.ror-breakdown tfoot td {
  padding-top: 5px;
  border-top: 1px solid var(--ror-line);
  font-weight: 700;
  color: var(--ror-ink);
}

.ror-sources {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ror-slate);
}

.ror-sources > li + li { margin-top: 8px; }

.ror-source-head strong { color: var(--ror-ink); font-weight: 600; }
.ror-source-head span { margin-left: 8px; color: var(--ror-slate-2); }

.ror-source-url {
  word-break: break-all;
  color: var(--ror-slate-2);
  font-size: 11.5px;
}

.ror-quote {
  margin: 4px 0 0;
  padding-left: 11px;
  border-left: 2px solid var(--ror-line);
  font-style: italic;
  line-height: 1.55;
  color: var(--ror-slate-2);
}

.ror-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px solid var(--ror-ink);
}

.ror-total-k { font-size: 15px; font-weight: 700; }

.ror-total-v {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ror-orange-deep);
}

.ror-empty {
  margin: 0;
  padding: 22px 0;
  font-size: 15px;
  color: var(--ror-slate);
}

/* ---------- footer ---------- */

.ror-foot {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--ror-line);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ror-slate-2);
}

.ror-foot-contact {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ror-slate);
}

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

@page { size: letter; margin: 14mm 13mm; }

@media print {
  body.print-body { background: #fff; }

  .ror {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    font-size: 10.5pt;
  }

  .ror-headline { font-size: 22pt; }
  /* Without this the dark stat panel prints as white-on-white. */
  .ror-stats {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .ror-stat-v { font-size: 22pt; }
  .ror-total-v { font-size: 22pt; }
  .ror-masthead { padding-bottom: 10px; }
  .ror-hero { padding-top: 20px; }

  /* Keep a finding, the stat row, the meta block and the total from splitting
     across a page break — a half-printed finding reads as a missing one. */
  .ror-section-title { break-after: avoid; page-break-after: avoid; }

  .ror-finding,
  .ror-stat,
  .ror-stats,
  .ror-stats-wrap,
  .ror-meta,
  .ror-total {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* "You may already be billing this" caution, carried over from the on-screen
   card so the printed sheet cannot quietly invite a double-bill. */
.ror-check {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 2px solid #f59e0b;
  background: #fffbeb;
  font-size: 12.5px;
  font-weight: 600;
  color: #92400e;
}