/* Energy-system badges
 *
 * Pill-shaped, uppercase, white-on-color badges keyed by energy system.
 * Used by Components::Stimulus::Badge across the planner, workouts index,
 * workout show, and recommendation/template modals so users learn the
 * stimulus name + energy-system color pairing.
 *
 * Selectors are chained with `.badge` (`.badge.energy-badge`) to win
 * specificity against the generic `.badge` rule in muscle_groups.css,
 * which loads earlier and would otherwise override the colored
 * background.
 */

.badge.energy-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: none;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
  color: white;
}

.badge.energy-badge--phosphagen { background-color: var(--energy-phosphagen); }
.badge.energy-badge--glycolytic { background-color: var(--energy-glycolytic); }
.badge.energy-badge--oxidative  { background-color: var(--energy-oxidative); }
.badge.energy-badge--skill      { background-color: var(--energy-skill); }

.badge.energy-badge--unknown {
  background-color: var(--medium-gray);
}

/* Compact variant for the day-card occurrence rows in the weekly planner. */
.day-card-occurrence .badge.energy-badge {
  font-size: 0.55rem;
  padding: 0.05rem 0.3rem;
}

/* Status badge color variants — applied alongside the base .badge class
 * (defined in weekly_planner.css) so the planning state of a cycle, plan,
 * or workout reads at a glance. Uses --badge-ready / --badge-caution
 * CSS variables from base.css for theme consistency. */
.badge.badge-ready {
  background-color: var(--badge-ready);
  color: white;
}

.badge.badge-caution {
  background-color: var(--badge-caution);
  color: white;
}

.badge.badge-neutral {
  background-color: var(--medium-gray);
  color: white;
}

/* Wrapper for a row of format/scoring badges emitted by
 * Format::*#display_scoring_badges_to. Replaces ad-hoc
 * .mb-2 / .ml-2 utility spacing in views. */
.format-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}