/* sales-report.css — the sales block on the Reports page.
 *
 * It sits under Chatwoot's own report cards, so it takes their shape: one
 * bordered card, a heading, and figures that line up. The palette is the rest
 * of the CRM work's.
 */
.crm-sr {
  --sr-ink: #1d1b1c;
  --sr-muted: #55606c;
  --sr-faint: #606a76;
  --sr-line: #e8ebe4;
  --sr-card: #ffffff;
  --sr-soft: #fafbf8;
  --sr-brand: #d4fb08;
  --sr-warn: var(--crm-alert-ink, #c8243b);

  margin: 20px 0 8px;
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  background: var(--sr-card);
  padding: 18px 20px 20px;
  color: var(--sr-ink);
  font-size: 14px;
}

:root.dark .crm-sr,
.dark .crm-sr,
[data-theme="dark"] .crm-sr {
  --sr-ink: #e8eaed;
  --sr-muted: #98a1ad;
  --sr-faint: #78828e;
  --sr-line: #2c3138;
  --sr-card: #1b1e23;
  --sr-soft: #22262c;
  --sr-warn: var(--crm-alert-ink, #c8243b);
}

.crm-sr * { box-sizing: border-box; }

.crm-sr__head { margin-bottom: 16px; }
.crm-sr__h { margin: 0; font-size: 16px; font-weight: 600; }

/* The sentence that decides how much of the rest to believe. */
.crm-sr__cover { font-size: 12.5px; color: var(--sr-muted); margin-top: 3px; line-height: 1.55; max-width: 70ch; }

/* ---- the five figures ---------------------------------------------------- */

.crm-sr__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.crm-sr__stat {
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  padding: 11px 13px 12px;
  background: var(--sr-soft);
  min-width: 0;
}

.crm-sr__k { font-size: 11px; color: var(--sr-muted); }

.crm-sr__v {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.crm-sr__s { font-size: 11.5px; color: var(--sr-faint); margin-top: 3px; line-height: 1.45; }

/* ---- a pipeline ---------------------------------------------------------- */

.crm-sr__funnel { margin-bottom: 18px; }

.crm-sr__fh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.crm-sr__fn { font-size: 13px; font-weight: 600; }
.crm-sr__ft { font-size: 12px; color: var(--sr-faint); font-variant-numeric: tabular-nums; }

.crm-sr__stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
}

.crm-sr__stage {
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  padding: 10px 12px 11px;
  min-width: 0;
}

.crm-sr__sn { font-size: 11.5px; color: var(--sr-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sr__sc { font-size: 20px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }

.crm-sr__bar {
  height: 3px;
  border-radius: 3px;
  background: var(--sr-line);
  overflow: hidden;
  margin: 7px 0 7px;
}

.crm-sr__fill { height: 100%; background: var(--sr-brand); border-radius: 3px; }
.crm-sr__sv { font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.crm-sr__so { font-size: 11px; color: var(--sr-faint); margin-top: 2px; }

/* ---- lists --------------------------------------------------------------- */

.crm-sr__block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sr-line); }
.crm-sr__bh { font-size: 13px; font-weight: 600; }
.crm-sr__bs { font-size: 12px; color: var(--sr-faint); margin: 3px 0 10px; line-height: 1.55; max-width: 72ch; }

.crm-sr__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--sr-line);
  text-decoration: none;
  color: inherit;
}

.crm-sr__row:last-child { border-bottom: 0; }
a.crm-sr__row:hover { background: var(--sr-soft); }

.crm-sr__left { min-width: 0; flex: 1; }
.crm-sr__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.crm-sr__t { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sr__m { font-size: 12px; color: var(--sr-faint); margin-top: 2px; }
.crm-sr__amount { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.crm-sr__days {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sr-warn);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-sr__empty { font-size: 13px; color: var(--sr-faint); line-height: 1.6; max-width: 64ch; }