/* ==========================================================
   ReaperCloud CRM — additions to reapercloud.css
   ----------------------------------------------------------
   Loaded after ReaperCloud's own stylesheet, which nginx serves
   unchanged from the ReaperCloud install. Only CRM-specific
   pieces live here, and they use ReaperCloud's variables, so
   dark mode and the palette come for free.
   ========================================================== */

/* ---------- header ---------- */
.crm-brand-tag {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.1rem 0.35rem;
  margin-left: 0.4rem;
  vertical-align: 0.2em;
}
.nav-auth { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nav-who, .crm-ws-name { font-size: 0.85rem; color: var(--ink-soft); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ws-name { color: var(--ink); font-weight: 550; }
.nav-signout, .crm-switch { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.nav-signout button, .crm-switch button { font: inherit; cursor: pointer; background: transparent; }
.crm-switch select {
  font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.3rem 0.5rem; max-width: 12rem;
}

/* ---------- layout ---------- */
/* ReaperCloud's hero is centred for marketing pages. A working tool reads
   better left-aligned, in line with the tables below it. */
.crm .hero { text-align: left; }
.crm .lede { margin-left: 0; margin-right: 0; max-width: 46rem; }
.crm .hero-compact { padding: 2.25rem 0 1.25rem; }
.panel.crm-tight { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.crm-gap { margin-top: 1rem; }
.crm-h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.9rem; }
.crm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.crm-hero-row .cta, .crm-actions .cta { flex: 0 0 auto; width: auto; }
.crm-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.crm-muted { color: var(--ink-soft); font-size: 0.85rem; }
.crm-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; }
.crm-link-quiet { font-size: 0.88rem; color: var(--ink-soft); }
.crm-flash { margin-bottom: 1rem; }
.crm .crm-eyebrow { color: var(--ink-soft); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.3rem; padding: 0; }

/* summary cards that are links */
a.card { color: inherit; text-decoration: none; }
a.card:hover { background: var(--paper); }
.crm-n { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.03em; }
.crm-n.bad  { color: var(--bad); }
.crm-n.warn { color: var(--warn); }

/* ---------- filter chips and bars ---------- */
.crm-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.crm-chip {
  font-size: 0.8rem; color: var(--ink-soft); text-decoration: none;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 0.2rem 0.75rem;
}
.crm-chip:hover { border-color: var(--ink-faint); text-decoration: none; }
.crm-chip.is-on { color: var(--ink); border-color: var(--ink); }

.crm-filterbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.9rem 1rem; margin: 0.5rem 0 0;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.crm-filterbar input, .crm-filterbar select {
  font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.45rem 0.6rem;
}
.crm-filterbar input[type=search] { flex: 1 1 14rem; min-width: 10rem; }
.crm-filterbar button,
button.crm-button {
  font: inherit; font-size: 0.88rem; font-weight: 550; cursor: pointer;
  color: var(--paper); background: var(--ink); border: 0; border-radius: var(--radius); padding: 0.5rem 1.1rem;
}

/* ---------- tables ---------- */
.crm-table { width: 100%; }
.crm-table td a strong { font-weight: 600; }
.crm-table tr.crm-current td { background: var(--info-bg); }
.crm-headline { max-width: 22rem; }

.crm-grade {
  display: inline-block; min-width: 2rem; text-align: center;
  font-weight: 650; font-size: 0.95rem; letter-spacing: -0.02em;
  padding: 0.05rem 0.4rem; border-radius: var(--radius); background: var(--info-bg); color: var(--chip-ink);
}
.crm-grade.tone-ok   { background: var(--ok-bg);   color: var(--chip-ok); }
.crm-grade.tone-warn { background: var(--warn-bg); color: var(--chip-warn); }
.crm-grade.tone-bad  { background: var(--bad-bg);  color: var(--chip-bad); }

.crm-stage {
  display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--chip-ink); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.05rem 0.4rem;
}
.crm-stage-opportunity { color: var(--chip-warn); border-color: var(--warn); }
.crm-stage-customer    { color: var(--chip-ok);   border-color: var(--ok); }
.crm-stage-lost        { color: var(--ink-faint); }

/* ---------- forms ---------- */
.build-form input[type=email],
.build-form input[type=url],
.build-form input[type=search] {
  width: 100%; padding: 0.6rem 0.8rem; font: inherit; font-size: 0.92rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.crm-form { max-width: 46rem; }
.crm-form textarea { font-family: var(--font); font-size: 0.92rem; }
.field-error { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--chip-bad); }
.crm-check-hint { margin: -0.7rem 0 1.2rem 1.6rem; max-width: 38rem; }
.crm-inline { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.crm-inline select { font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.3rem 0.4rem; }
.crm-inline button, .crm-rescan button {
  font: inherit; font-size: 0.88rem; font-weight: 550; cursor: pointer;
  color: var(--paper); background: var(--ink); border: 0; border-radius: var(--radius); padding: 0.55rem 1.2rem;
}
.crm-inline button.crm-button-small { font-size: 0.8rem; padding: 0.3rem 0.7rem; background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
.crm-rescan { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.crm-rescan button:disabled { opacity: 0.45; cursor: not-allowed; }

.crm-danger { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; border: 1px dashed var(--hairline); border-radius: var(--radius); }
.crm-danger .check { display: flex; gap: 0.5rem; align-items: center; font-size: 0.88rem; color: var(--ink-soft); }
button.crm-button-danger,
.crm-inline button.crm-button-danger {
  font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--chip-bad);
  background: transparent; border: 1px solid var(--bad); border-radius: var(--radius); padding: 0.45rem 1rem;
}
.crm-inline button.crm-button-small.crm-button-danger { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
button.crm-button-danger:hover { background: var(--bad-bg); }

.crm-notes {
  margin-top: 1rem; padding: 1rem 1.2rem; white-space: normal; font-size: 0.92rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.crm-activity { list-style: none; font-size: 0.86rem; color: var(--ink-soft); }
.crm-activity li { padding: 0.4rem 0; border-top: 1px solid var(--hairline); }
.crm-activity li:first-child { border-top: 0; }

/* ---------- risk report ---------- */
.crm-scoreline { display: flex; gap: 1.5rem; align-items: stretch; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.crm-score {
  flex: 0 0 auto; min-width: 9rem; padding: 1.1rem 1.4rem; text-align: center;
  background: var(--surface); border: 1px solid var(--hairline); border-left-width: 4px; border-radius: var(--radius);
}
.crm-score.tone-bad  { border-left-color: var(--bad); }
.crm-score.tone-warn { border-left-color: var(--warn); }
.crm-score.tone-ok   { border-left-color: var(--ok); }
.crm-score-n  { display: block; font-size: 3rem; font-weight: 650; line-height: 1; letter-spacing: -0.04em; }
.crm-score.tone-bad  .crm-score-n { color: var(--bad); }
.crm-score.tone-warn .crm-score-n { color: var(--warn); }
.crm-score-of { display: block; margin-top: 0.4rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.crm-score-text { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; }
.crm-score-band { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.crm-score-head { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }

.crm-talking { margin: 0 0 0.9rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.crm-talking li { padding-left: 0.3rem; font-size: 0.98rem; line-height: 1.55; }

.crm-findings { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.crm-finding {
  padding: 1rem 1.2rem; background: var(--surface);
  border: 1px solid var(--hairline); border-left-width: 3px; border-radius: var(--radius);
}
.crm-finding.bad  { border-left-color: var(--bad); }
.crm-finding.warn { border-left-color: var(--warn); }
.crm-finding.ok   { border-left-color: var(--ok); }
.crm-finding-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.crm-finding-head strong { font-size: 1rem; font-weight: 600; flex: 1 1 auto; }
.crm-points { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.crm-finding p { font-size: 0.92rem; }
.crm-finding-meta { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.3rem 0.8rem; margin-top: 0.7rem; font-size: 0.85rem; }
.crm-finding-meta dt { color: var(--ink-soft); }
.crm-finding-meta code { font-family: var(--mono); font-size: 0.8rem; overflow-wrap: anywhere; }

.crm-bars { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; max-width: 40rem; }
.crm-bars li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 2.5rem; gap: 0.8rem; align-items: center; font-size: 0.88rem; }
.crm-bar-track { height: 0.55rem; background: var(--info-bg); border-radius: 999px; overflow: hidden; }
.crm-bar-fill { display: block; height: 100%; background: var(--warn); border-radius: 999px; }
.crm-bar-n { text-align: right; color: var(--ink-soft); }
/* Widths in 5% steps — classes, because the CSP allows no inline style. */
.crm-w-0 { width: 0; } .crm-w-1 { width: 5%; } .crm-w-2 { width: 10%; } .crm-w-3 { width: 15%; }
.crm-w-4 { width: 20%; } .crm-w-5 { width: 25%; } .crm-w-6 { width: 30%; } .crm-w-7 { width: 35%; }
.crm-w-8 { width: 40%; } .crm-w-9 { width: 45%; } .crm-w-10 { width: 50%; } .crm-w-11 { width: 55%; }
.crm-w-12 { width: 60%; } .crm-w-13 { width: 65%; } .crm-w-14 { width: 70%; } .crm-w-15 { width: 75%; }
.crm-w-16 { width: 80%; } .crm-w-17 { width: 85%; } .crm-w-18 { width: 90%; } .crm-w-19 { width: 95%; }
.crm-w-20 { width: 100%; }

.posture-summary { margin-top: 0.45rem; font-size: 0.86rem; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ---------- dark mode: buttons ---------- */
/* ReaperCloud's buttons hover to #000, which in dark mode (light button,
   dark text) would turn the text unreadable. Hover with the accent instead. */
@media (prefers-color-scheme: dark) {
  .build-form button:hover,
  .crm-filterbar button:hover,
  .crm-inline button:hover,
  .crm-rescan button:hover,
  button.crm-button:hover { background: var(--accent-dk); color: var(--paper); }
  .crm-inline button.crm-button-small:hover { background: var(--info-bg); color: var(--ink); }
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .crm-table thead { display: none; }
  .crm-table, .crm-table tbody, .crm-table tr, .crm-table td { display: block; width: 100%; }
  .crm-table tr { padding: 0.6rem 0; border-top: 1px solid var(--hairline); }
  .crm-table td { padding: 0.2rem 1rem; }
  .crm-bars li { grid-template-columns: 7.5rem minmax(0, 1fr) 2rem; }
  .crm-rescan { align-items: flex-start; }
}

/* ---------- print: the report as a handout ---------- */
@media print {
  .masthead, .foot, .crm-rescan, .crm-danger, .crm-filterbar, .crm-flash, .crm-actions { display: none !important; }
  body { background: #fff; }
  .panel.crm-tight { padding: 0.8rem 0; break-inside: avoid-page; }
  .crm-finding { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}