/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* DaisyUI badges have a fixed height by default, so multi-word status labels
 * like "Pending Payment" or "Ready for your approval" visibly clipped or
 * overflowed the pill. Letting the badge grow to fit content — while keeping
 * the default height as a min-height so single-word pills still look right —
 * fixes every status badge without having to sprinkle utilities view by view. */
.badge {
  height: auto;
  min-height: 1.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  white-space: nowrap;
}
.badge.badge-sm { min-height: 1rem; }
.badge.badge-lg { min-height: 1.5rem; }

/* Pulsing dot marking the customer's current step in the "What's next" strip
 * on the book page. Defined here rather than in an inline <style> block so
 * there is one definition rather than one per view — the pattern that let
 * .generating-pulse drift to two different timings in two templates. */
.timeline-pulse {
  animation: timeline-pulse-kf 1.3s ease-in-out infinite;
}

@keyframes timeline-pulse-kf {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* Pulsing dot marking the running step in the admin pipeline strip. Same
 * reasoning as .timeline-pulse above — it lived in an inline <style> in
 * _admin_pipeline_steps.html.erb, which is how a second copy gets added to
 * another partial with different timing and nobody notices. */
.strip-pulse {
  animation: strip-pulse-kf 1.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes strip-pulse-kf {
  0%, 100% { opacity: 0.6; transform: scale(0.92); }
  50%      { opacity: 1;   transform: scale(1.08); }
}