/* ============================================================
   HERO METRIC — Dominant KPI + chart + secondary metrics
   Pattern Mercury/Wise: un singur punct focal pe dashboard
   ============================================================ */

.hero-section {
  background: linear-gradient(160deg,
    var(--c-dashboard-glow, rgba(255, 122, 0, 0.08)) 0%,
    var(--card) 60%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  margin-bottom: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--app-color, var(--c-dashboard)) 0%, transparent 70%);
  opacity: 0.08;
  pointer-events: none;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--app-color, var(--c-dashboard));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-eyebrow-icon {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--app-color, var(--c-dashboard));
  box-shadow: 0 0 12px var(--app-color, var(--c-dashboard));
}

.hero-headline {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: var(--sp-3) 0 var(--sp-2);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.hero-headline-value {
  color: var(--text);
}
.hero-headline-unit {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text-muted);
}

.hero-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
}
.hero-delta.up {
  background: var(--ok-soft);
  color: var(--ok);
}
.hero-delta.down {
  background: var(--err-soft);
  color: var(--err);
}
.hero-delta.flat {
  background: var(--card-hover);
  color: var(--text-muted);
}

.hero-context {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--text-muted);
  max-width: 600px;
}

/* === Chart container === */
.hero-chart {
  margin-top: var(--sp-6);
  background: rgba(10, 10, 10, 0.4);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.hero-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
}
.hero-chart-title {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.hero-chart-toggle {
  display: flex;
  gap: var(--sp-1);
  background: var(--card);
  padding: 2px;
  border-radius: var(--r-pill);
}
.hero-chart-toggle button {
  padding: 4px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.hero-chart-toggle button.active {
  background: var(--accent);
  color: #fff;
}

/* === Secondary metrics row === */
.hero-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.hero-secondary-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.hero-secondary-label {
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hero-secondary-value {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: var(--sp-1) 0 var(--sp-1);
  color: var(--text);
}
/* White Lucide icon next to the big number — reused from the small
   per-tab metric cards this style replaces (Ali, 2026-07-18). currentColor
   on the SVG's stroke picks up this element's own color, not the parent's
   text color, so it stays white regardless of --tab-color context. */
.hero-secondary-icon {
  display: inline-flex;
  color: #fff;
  opacity: 0.9;
  flex-shrink: 0;
}
.hero-secondary-icon svg {
  width: 20px;
  height: 20px;
}
.hero-secondary-delta {
  font-size: var(--fs-small);
  font-weight: 600;
}
.hero-secondary-delta.up { color: var(--ok); }
.hero-secondary-delta.down { color: var(--err); }

/* === Pulse animation for live indicators === */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}