/* Varial — Status badge variants for run state and infrastructure */

/* ── Base run-status pill ─────────────────────────────── */
.badge-run-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0 0.65em;
  height: 1.75em;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}

/* QUEUED / PENDING — neutral */
.badge-run-status.queued,
.badge-run-status.pending {
  background: var(--varial-gray-200, #E4E2DC);
  color: var(--varial-gray-700, #38352F);
}

/* RUNNING / SUBMITTED — info blue with animated dot */
.badge-run-status.running,
.badge-run-status.submitted {
  background: rgba(2, 132, 199, 0.15);
  color: var(--chart-tech-hydro, #0284C7);
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.badge-run-status.running::before,
.badge-run-status.submitted::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
  animation: vrl-status-pulse 1.4s ease-in-out infinite;
}

@keyframes vrl-status-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* COMPLETED — solid green (chart-scenario-3) */
.badge-run-status.completed {
  background: var(--varial-secondary, #16A34A);
  color: var(--varial-white, #fff);
}

/* FREE — solid primary blue */
.badge-run-status.free {
  background: var(--varial-primary, #2563EB);
  color: var(--varial-white, #fff);
}

/* FAILED — solid red */
.badge-run-status.failed {
  background: var(--varial-danger, #DC2626);
  color: var(--varial-white, #fff);
}

/* CANCELLED — muted */
.badge-run-status.cancelled {
  background: var(--varial-gray-300, #CCC9C3);
  color: var(--varial-gray-700, #38352F);
}

/* DRAFT — neutral, dark text on light gray (no white text) */
.badge-run-status.draft {
  background: var(--varial-gray-200, #E4E2DC);
  color: var(--varial-gray-700, #38352F);
}

/* DEMO — staff-only prospect demo. A light slate pill with dark text so it reads in
   BOTH themes: white-on-gray-500 washed out against the dark navy row in dark mode
   (#4189 follow-up), so mirror the DRAFT treatment — a light fill carries dark text
   that stays legible on either background, and the neutral slate stays distinct from
   the blue FREE and amber PREMIUM badges beside it. */
.badge-run-status.demo {
  background: var(--varial-gray-300, #CCC9C3);
  color: var(--chart-tech-black-coal, #1C1917);
}

/* LOCKED / BUYABLE — solid amber with dark text (VarialView paid content) */
.badge-run-status.locked,
.badge-run-status.buyable {
  background: var(--varial-amber, #F59E0B);
  color: var(--chart-tech-black-coal, #1C1917);
}

/* PRO — the VarialView paid tier (#4189). Solid violet + white text: a non-warning
   premium accent distinct from the blue FREE badge, matched by the .btn-premium CTA
   so the badge + Buy-now button read as one treatment. */
.badge-run-status.pro {
  background: var(--varial-premium, #9333EA);
  color: var(--varial-white, #fff);
}

/* FUTURE — solid amber (planned positions), no animated dot */
.badge-run-status.future {
  background: var(--varial-amber, #F59E0B);
  color: var(--chart-tech-black-coal, #1C1917);
}

/* PARTIAL — solid amber (ran but did not fully finish, e.g. a partial sync) */
.badge-run-status.partial {
  background: var(--varial-amber, #F59E0B);
  color: var(--chart-tech-black-coal, #1C1917);
}

/* ARCHIVED — set-aside look: muted, dashed outline, no fill */
.badge-run-status.archived {
  background: transparent;
  color: var(--varial-gray-500, #6B6763);
  border: 1px dashed var(--varial-gray-400, #A8A29E);
}

/* ── Coming-soon badge ────────────────────────────────────── */
/* Standalone variant — works in nav, dropdown, and card contexts  */
/* without inheriting badge-run-status (no uppercase text-transform). */
.badge-coming-soon {
  display: inline-flex;
  align-items: center;
  padding: 0 0.55em;
  height: 1.5em;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
  background: rgba(245, 158, 11, 0.12);
  color: var(--varial-amber-dark, #D97706);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* ── Infrastructure / generator status badges ────────────── */
.badge-infra {
  display: inline-flex;
  align-items: center;
  padding: 0 0.55em;
  height: 1.6em;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}

.badge-infra.existing    { background: rgba(5, 150, 105, 0.12);  color: var(--varial-success, #059669); }
.badge-infra.committed   { background: rgba(27, 58, 160, 0.10);  color: var(--varial-primary, #1B3AA0); }
.badge-infra.anticipated { background: rgba(245, 158, 11, 0.12); color: var(--varial-amber-dark, #D97706); }
.badge-infra.proposed    { background: rgba(139, 92, 246, 0.12); color: var(--varial-purple, #7C3AED); }
.badge-infra.withdrawn   { background: rgba(156, 163, 175, 0.12); color: var(--varial-gray-500, #6B6763); }

/* ── region badges (merged from badges.css) ──────────────── */
/* NEM dispatch regions. Previously a standalone components/badges.css
   loaded ad-hoc in two templates; folded here since status-badges.css
   is loaded globally in base.html. */
.badge-region-nsw1 { background: #1B3AA0; color: var(--varial-white, #fff); }
.badge-region-qld1 { background: var(--varial-info, #0ea5e9); color: var(--varial-white, #fff); }
.badge-region-vic1 { background: var(--varial-amber, #f59e0b); color: var(--varial-white, #fff); }
.badge-region-sa1  { background: #10b981; color: var(--varial-white, #fff); }
.badge-region-tas1 { background: var(--chart-tech-battery, #8b5cf6); color: var(--varial-white, #fff); }
.badge-region-unknown { background: #6c757d; color: var(--varial-white, #fff); }