/* 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;
}

/* Derived DayIntent badge shown per day in the planner, builder, calendar, and
 * coach headers. Solid pill matching the energy-badge treatment, colored by the
 * day's character: warmer/redder for harder days, cooler for easier. */
.badge.day-intent-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.day-intent-badge--heavy { background-color: var(--load-max); }
.badge.day-intent-badge--power_sprint { background-color: var(--load-heavy); }
.badge.day-intent-badge--intervals { background-color: var(--load-moderate); }
.badge.day-intent-badge--long { background-color: oklch(55% 0.13 240); }
.badge.day-intent-badge--grind { background-color: oklch(50% 0.04 255); }
.badge.day-intent-badge--skill { background-color: oklch(52% 0.14 300); }
.badge.day-intent-badge--recovery { background-color: oklch(55% 0.12 150); }

/* Compact variant for the tight day-number headers on the calendar and builder,
 * where a full-size pill would crowd the date. */
.calendar-day-number .badge.day-intent-badge,
.builder-day-number .badge.day-intent-badge {
  font-size: 0.55rem;
  padding: 0.05rem 0.4rem;
  letter-spacing: 0;
}

/* 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;
}