/*!
 * DashTemplate.com — Revenue Operations Dashboard · Template Styles
 * © 2025 DashTemplate.com. All Rights Reserved.
 * License: https://dashtemplate.com/license
 */

:root {
  --dt-template-primary: #22C55E;
  --dt-template-accent:  #6366F1;
}

/* ─── ARR bridge bar ─────────────────────── */
.bridge-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; border-bottom: 1px solid var(--dt-border);
}
.bridge-row:last-child { border-bottom: none; }
.bridge-row__label { font-size: 11px; color: var(--dt-text-3); width: 120px; flex-shrink: 0; }
.bridge-row__track { flex: 1; height: 10px; background: var(--dt-surface-3); border-radius: 5px; overflow: hidden; }
.bridge-row__fill  { height: 100%; border-radius: 5px; }
.bridge-row__val   { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; width: 80px; text-align: right; flex-shrink: 0; }

/* ─── Pipeline stage row ─────────────────── */
.stage-row {
  display: grid;
  grid-template-columns: 140px 60px 100px 60px 64px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--dt-border);
  font-size: 11.5px;
  transition: background var(--t-fast);
}
.stage-row:hover { background: var(--dt-surface-2); }
.stage-row:last-child { border-bottom: none; }
.stage-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);
}

/* ─── RevOps metric hero ─────────────────── */
.revops-hero {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.revops-hero-item {
  background: var(--dt-surface-2); border: 1px solid var(--dt-border);
  border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.revops-hero-item__label { font-size: 9.5px; font-weight: 700; color: var(--dt-text-3); text-transform: uppercase; letter-spacing: .07em; }
.revops-hero-item__value { font-size: 24px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.revops-hero-item__sub   { font-size: 10.5px; color: var(--dt-text-3); }

/* ─── CVR progress bar ───────────────────── */
.cvr-bar {
  height: 6px; border-radius: 3px; background: var(--dt-surface-3); overflow: hidden;
}
.cvr-bar__fill { height: 100%; border-radius: 3px; background: #22C55E; transition: width 1s ease; }