/*!
 * DashTemplate.com — Customer Health Monitor · Template Styles
 * © 2025 DashTemplate.com. All Rights Reserved.
 * License: https://dashtemplate.com/license
 */

/* ─── Template accent ────────────────────── */
:root {
  --dt-template-primary: #22C55E;
  --dt-template-accent:  #3B82F6;
}

/* ─── Health score badge ─────────────────── */
.health-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.health-badge.critical { background: rgba(239,68,68,.15);  color: #EF4444; }
.health-badge.high     { background: rgba(249,115,22,.15); color: #F97316; }
.health-badge.medium   { background: rgba(245,158,11,.15); color: #F59E0B; }
.health-badge.healthy  { background: rgba(34,197,94,.15);  color: #22C55E; }
.health-badge.champion { background: rgba(59,130,246,.15); color: #3B82F6; }

/* ─── At-risk account row ─────────────────── */
.risk-row {
  display: grid;
  grid-template-columns: 80px 1fr 90px 80px 72px 80px 100px;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--dt-border);
  font-size: 11.5px;
  transition: background var(--t-fast);
}
.risk-row:hover { background: var(--dt-surface-2); }
.risk-row:last-child { border-bottom: none; }
.risk-row.hdr {
  font-size: 9.5px; font-weight: 700; color: var(--dt-text-3);
  letter-spacing: .07em; text-transform: uppercase; background: var(--dt-surface-2);
}

/* ─── Account table row ───────────────────── */
.acct-row {
  display: grid;
  grid-template-columns: 80px 1fr 90px 80px 64px 64px 50px 80px;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--dt-border);
  font-size: 11.5px;
  transition: background var(--t-fast);
}
.acct-row:hover { background: var(--dt-surface-2); }
.acct-row:last-child { border-bottom: none; }
.acct-row.hdr {
  font-size: 9.5px; font-weight: 700; color: var(--dt-text-3);
  letter-spacing: .07em; text-transform: uppercase; background: var(--dt-surface-2);
}

/* ─── NRR waterfall bar items ─────────────── */
.nrr-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--dt-border);
}
.nrr-bar:last-of-type { border-bottom: none; }
.nrr-bar__label { font-size: 11px; color: var(--dt-text-3); width: 110px; flex-shrink: 0; }
.nrr-bar__track { flex: 1; height: 10px; background: var(--dt-surface-3); border-radius: 5px; overflow: hidden; }
.nrr-bar__fill  { height: 100%; border-radius: 5px; transition: width 1.2s ease; }
.nrr-bar__val   { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; width: 72px; text-align: right; flex-shrink: 0; }

/* ─── Retention hero numbers ─────────────── */
.retention-hero {
  display: flex; gap: 14px;
}
.ret-hero-item {
  flex: 1; background: var(--dt-surface-2); border: 1px solid var(--dt-border);
  border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.ret-hero-item__label { font-size: 9.5px; font-weight: 700; color: var(--dt-text-3); text-transform: uppercase; letter-spacing: .07em; }
.ret-hero-item__value { font-size: 28px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ret-hero-item__sub   { font-size: 10.5px; color: var(--dt-text-3); }