/*!
 * DashTemplate.com — SaaS Growth Command Center · Template Styles
 * © 2025 DashTemplate.com. All Rights Reserved.
 * License: https://dashtemplate.com/license
 */

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

/* ─── NRR gauge ring ─────────────────────── */
.nrr-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 12px 0;
}
.nrr-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.nrr-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nrr-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.nrr-ring-value {
  font-size: 28px; font-weight: 800;
  letter-spacing: -.04em; color: #22C55E;
}
.nrr-ring-sub { font-size: 10px; color: var(--dt-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.nrr-breakdown { display: flex; flex-direction: column; gap: 8px; }
.nrr-item { display: flex; align-items: center; gap: 10px; }
.nrr-item__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nrr-item__label { font-size: 11px; color: var(--dt-text-3); min-width: 90px; }
.nrr-item__val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ─── Cohort retention heatmap ───────────── */
.cohort-table { overflow-x: auto; }
.cohort-grid {
  display: grid;
  gap: 2px;
  min-width: 640px;
}
.cohort-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  transition: transform var(--t-fast);
}
.cohort-cell:hover { transform: scale(1.08); z-index: 10; }
.cohort-label {
  font-size: 10.5px; color: var(--dt-text-3);
  display: flex; align-items: center; height: 28px;
  padding-right: 8px; white-space: nowrap;
}
.cohort-header {
  font-size: 9.5px; font-weight: 700; color: var(--dt-text-3);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: flex-end; height: 24px;
  justify-content: center;
}

/* ─── Unit economics cards ───────────────── */
.ue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ue-card {
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 3px solid var(--ue-color, var(--dt-primary));
}
.ue-card__label {
  font-size: 9.5px; font-weight: 700;
  color: var(--dt-text-3); text-transform: uppercase; letter-spacing: .07em;
}
.ue-card__value {
  font-size: 24px; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--ue-color, var(--dt-primary));
}
.ue-card__delta { font-size: 11px; color: var(--dt-text-3); }
.ue-card__sub   { font-size: 10px; color: var(--dt-text-3); margin-top: 2px; }

/* ─── Activation step cards ──────────────── */
.activation-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: end;
}
.activation-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  padding: 14px 8px;
}
.activation-step__bar-wrap {
  width: 100%; height: 80px;
  display: flex; align-items: flex-end; justify-content: center;
}
.activation-step__bar {
  width: 32px; border-radius: 4px 4px 0 0;
  transition: height 1s ease;
}
.activation-step__pct { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.activation-step__label { font-size: 9.5px; color: var(--dt-text-3); text-align: center; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.activation-step__count { font-size: 11px; color: var(--dt-text-3); font-variant-numeric: tabular-nums; }