/* exec-report.css — the owner's one page, on screen and on paper.
 *
 * It is a SHEET, not a dashboard panel: white, bounded, and printable as it
 * stands. The print rules at the bottom are not an afterthought - this report
 * exists to be sent to somebody, and a page that needs a second design to
 * leave the screen is a page nobody sends.
 *
 * Colours come from the estate's own tokens where they exist, so dark mode and
 * a future palette change reach this file without it being edited. */

.crm-exec {
  --exec-ink: #101828;
  --exec-dim: #667085;
  --exec-line: #e4e7ec;
  --exec-wash: #f9fafb;
  --exec-good: #067647;
  --exec-goodbg: #ecfdf3;
  --exec-bad: #b42318;
  --exec-badbg: #fef3f2;
  --exec-flat: #344054;
  --exec-flatbg: #f2f4f7;
  --exec-brand: var(--crm-ink);

  background: #fff;
  color: var(--exec-ink);
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  padding: 28px 26px 22px;
  max-width: 980px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ---------- head ---------- */

.crm-exec__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--exec-ink);
  margin-bottom: 22px;
}

.crm-exec__kicker {
  font-size: 11px;
  color: var(--exec-brand);
  font-weight: 700;
  margin-bottom: 4px;
}

.crm-exec__title { font-size: 26px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.crm-exec__sub { margin: 0; color: var(--exec-dim); font-size: 13px; max-width: 46ch; }

.crm-exec__meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 14px;
  margin: 0;
  background: var(--exec-wash);
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  align-content: start;
}

.crm-exec__meta dt { color: var(--exec-dim); }
.crm-exec__meta dd { margin: 0; font-weight: 600; }

.crm-exec__print {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--exec-line);
  background: #fff;
  color: var(--exec-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.crm-exec__print:hover { background: var(--exec-wash); }

/* ---------- sections ---------- */

.crm-exec__sec { margin: 0 0 26px; }

.crm-exec__sechead {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 12px;
}

.crm-exec__no {
  font-size: 12px;
  font-weight: 800;
  color: var(--exec-brand);
  font-variant-numeric: tabular-nums;
}

.crm-exec__sectitle { font-size: 16px; font-weight: 700; margin: 0; }
.crm-exec__sechint { margin: 2px 0 0; font-size: 12px; color: var(--exec-dim); max-width: 74ch; }

.crm-exec__thin {
  margin: 0;
  font-size: 12.5px;
  color: var(--exec-dim);
  background: var(--exec-wash);
  border: 1px dashed var(--exec-line);
  border-radius: 8px;
  padding: 12px 14px;
}

/* ---------- the verdict ---------- */

.crm-exec__verdict {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--exec-wash);
}

.crm-exec__verdict.is-good { background: var(--exec-goodbg); border-color: #abefc6; }
.crm-exec__verdict.is-bad { background: var(--exec-badbg); border-color: #fecdca; }
.crm-exec__vbody { margin: 0; font-size: 13.5px; }

.crm-exec__pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--exec-flatbg);
  color: var(--exec-flat);
  white-space: nowrap;
}

.crm-exec__pill.is-good { background: #d1fadf; color: var(--exec-good); }
.crm-exec__pill.is-bad { background: #fee4e2; color: var(--exec-bad); }
.crm-exec__pill.is-muted { background: var(--exec-flatbg); color: var(--exec-dim); }

/* ---------- the number strip ---------- */

.crm-exec__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  overflow: hidden;
}

.crm-exec__kpi {
  padding: 13px 15px;
  border-inline-end: 1px solid var(--exec-line);
  min-width: 0;
}

.crm-exec__kpi:last-child { border-inline-end: 0; }
.crm-exec__kpilab { font-size: 11.5px; color: var(--exec-dim); margin-bottom: 4px; }

.crm-exec__kpiv {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.crm-exec__kpiv.is-up { color: var(--exec-good); }
.crm-exec__kpiv.is-down { color: var(--exec-bad); }

.crm-exec__kpifoot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--exec-dim);
  flex-wrap: wrap;
}

.crm-exec__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.crm-exec__delta i { font-size: 11px; line-height: 1; }
.crm-exec__delta.is-up { color: var(--exec-good); }
.crm-exec__delta.is-down { color: var(--exec-bad); }

/* ---------- the goal ---------- */

.crm-exec__goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.crm-exec__goal {
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  padding: 13px 15px;
}

.crm-exec__goal.is-met { border-color: #abefc6; background: var(--exec-goodbg); }
.crm-exec__goal.is-missed { border-color: #fecdca; background: var(--exec-badbg); }

.crm-exec__goaltop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.crm-exec__goallab { font-size: 12px; color: var(--exec-dim); font-weight: 600; }
.crm-exec__goalline { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.crm-exec__goalof { font-size: 13px; font-weight: 600; color: var(--exec-dim); }

.crm-exec__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(16, 24, 40, .1);
  overflow: hidden;
  margin: 9px 0 7px;
}

.crm-exec__barfill { height: 100%; background: currentColor; opacity: .75; }
.crm-exec__goal.is-met .crm-exec__barfill { background: var(--exec-good); }
.crm-exec__goal.is-missed .crm-exec__barfill { background: var(--exec-bad); }
.crm-exec__goalwhy { font-size: 11px; color: var(--exec-dim); }

.crm-exec__goalnone {
  border: 1px dashed var(--exec-line);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--exec-wash);
}

.crm-exec__goalnone p { margin: 0 0 10px; font-size: 12.5px; color: var(--exec-dim); }

.crm-exec__goalbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  margin-top: 12px;
  border-radius: 8px;
  border: 1px solid var(--exec-line);
  background: #fff;
  color: var(--exec-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.crm-exec__goalbtn:hover { background: var(--exec-wash); }
.crm-exec__goalnone .crm-exec__goalbtn { margin-top: 0; }

/* ---------- breakdowns ---------- */

.crm-exec__bd {
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  padding: 13px 15px;
  margin-bottom: 12px;
}

.crm-exec__bdhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.crm-exec__bdsay { margin: 0 0 10px; font-size: 13px; }

.crm-exec__bdnote {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--exec-dim);
  background: var(--exec-wash);
  border-radius: 8px;
  padding: 9px 11px;
}

.crm-exec__bdnote i { font-size: 12px; line-height: 1.4; flex: none; }

.crm-exec__scroll { overflow-x: auto; }

.crm-exec__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.crm-exec__table th {
  text-align: start;
  font-size: 11px;
  color: var(--exec-dim);
  font-weight: 700;
  padding: 6px 10px;
  border-bottom: 1px solid var(--exec-line);
  white-space: nowrap;
}

.crm-exec__table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--exec-line);
}

.crm-exec__table tbody tr:last-child td { border-bottom: 0; }
.crm-exec__table tr.is-best td { background: var(--exec-goodbg); font-weight: 700; }
.crm-exec__n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- what to do ---------- */

.crm-exec__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.crm-exec__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 13px;
}

.crm-exec__step.is-fix { border-color: #fecdca; background: var(--exec-badbg); }

.crm-exec__stepno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--exec-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex: none;
}

.crm-exec__step.is-fix .crm-exec__stepno { background: var(--exec-bad); }

/* ---------- the method ---------- */

.crm-exec__method {
  border-top: 1px solid var(--exec-line);
  padding-top: 14px;
  margin-top: 6px;
}

.crm-exec__method h3 {
  font-size: 11px;
  color: var(--exec-dim);
  margin: 0 0 8px;
}

.crm-exec__method ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 5px; }
.crm-exec__method li { font-size: 11.5px; color: var(--exec-dim); }

.crm-exec__sig {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--exec-dim);
  text-align: center;
}

/* ---------- narrow ---------- */

@media (max-width: 720px) {
  .crm-exec { padding: 18px 14px 16px; border-radius: 8px; }
  .crm-exec__head { grid-template-columns: 1fr; }
  .crm-exec__print { grid-column: 1; justify-self: start; }
  .crm-exec__title { font-size: 21px; }
  .crm-exec__kpi { border-inline-end: 0; border-bottom: 1px solid var(--exec-line); }
  .crm-exec__kpi:last-child { border-bottom: 0; }
}

/* ---------- paper ----------
 *
 * The sheet is the page: the app's chrome goes, the frame goes, and the
 * sections are told not to split across a page break. `print-color-adjust` is
 * load-bearing - a verdict that prints as white-on-white is worse than one
 * that does not print at all. */

@media print {
  body * { visibility: hidden !important; }
  .crm-exec, .crm-exec * { visibility: visible !important; }

  .crm-exec {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  .crm-exec__print { display: none !important; }
  .crm-exec__goalbtn { display: none !important; }
  .crm-exec__sec, .crm-exec__bd, .crm-exec__goal, .crm-exec__step { break-inside: avoid; }
  .crm-exec__method { break-before: auto; }

  .crm-exec, .crm-exec * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ---------- phase two: the money and what was lost ---------- */

.crm-exec__note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--exec-dim);
  background: var(--exec-wash);
  border-radius: 8px;
  padding: 9px 11px;
}

.crm-exec__asof { font-size: 11.5px; color: var(--exec-dim); }

.crm-exec__aging { display: grid; gap: 7px; }

.crm-exec__agerow {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}

.crm-exec__agelab { color: var(--exec-dim); }

.crm-exec__agetrack {
  height: 8px;
  border-radius: 999px;
  background: rgba(16, 24, 40, .07);
  overflow: hidden;
  min-width: 40px;
}

.crm-exec__agefill { display: block; height: 100%; background: #98a2b3; }
.crm-exec__agerow.is-late .crm-exec__agefill { background: var(--exec-bad); }
.crm-exec__agerow.is-late .crm-exec__agelab { color: var(--exec-bad); font-weight: 600; }

.crm-exec__agev {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .crm-exec__agerow { grid-template-columns: 1fr auto; }
  .crm-exec__agetrack { grid-column: 1 / -1; }
}

/* ---------- the ads and the broadcasts ---------- */

.crm-exec__headacts { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.crm-exec__gap {
  border: 1px solid var(--crm-alert-line, #f26b7b);
  background: var(--crm-alert-bg, #fff1f2);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
}

.crm-exec__gaphead {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  margin-bottom: 7px;
  color: #93370d;
}

.crm-exec__gaphead i { font-size: 13px; line-height: 1; }
.crm-exec__gap ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 5px; }
.crm-exec__gap li { font-size: 12px; color: #93370d; }
.crm-exec__gap li.is-strong { font-weight: 600; }

.crm-exec__table tr.is-warn td { background: var(--crm-alert-bg, #fff1f2); }

/* ---------- why a message failed ---------- */

.crm-exec__reasons { display: grid; gap: 9px; }

.crm-exec__reason {
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--exec-wash);
}

.crm-exec__reasontop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}

.crm-exec__reasonn {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--exec-bad);
}

.crm-exec__reasoncode { font-size: 10.5px; color: var(--exec-dim); margin-bottom: 5px; }
.crm-exec__reasonwhy { margin: 0 0 6px; font-size: 12px; }

.crm-exec__reasonfix {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 0;
  font-size: 12px;
  color: var(--exec-good);
  font-weight: 600;
}

.crm-exec__reasonfix i { font-size: 12px; line-height: 1.4; flex: none; }

/* ---------- one campaign ---------- */

.crm-exec__camp {
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  padding: 13px 15px;
  margin-top: 12px;
}

.crm-exec__camphead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.crm-exec__campwhen { font-size: 11.5px; color: var(--exec-dim); margin-top: 2px; }

.crm-exec__campfacts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0 0 10px;
  font-size: 12px;
}

.crm-exec__campfacts dt { color: var(--exec-dim); }
.crm-exec__campfacts dd { margin: 0; font-weight: 600; }

.crm-exec__media { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }

.crm-exec__mediaimg {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--exec-line);
  background: var(--exec-wash);
}

.crm-exec__medialink { font-size: 12px; color: var(--exec-brand); text-decoration: none; }
.crm-exec__medialink:hover { text-decoration: underline; }

.crm-exec__campcounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.crm-exec__campcount {
  border: 1px solid var(--exec-line);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  background: #fff;
}

.crm-exec__campcount.is-up { border-color: #abefc6; background: var(--exec-goodbg); }
.crm-exec__campcount.is-down { border-color: #fecdca; background: var(--exec-badbg); }

.crm-exec__campn {
  display: block;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.crm-exec__camplab { display: block; font-size: 10.5px; color: var(--exec-dim); margin-top: 1px; }
.crm-exec__phone { font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; }

@media print {
  /* A link is a dead end on paper, and the picture is the point. */
  .crm-exec__medialink { display: none !important; }
}