/* ===========================================
   Progress Components
   Reusable progress indicators
   =========================================== */

/* ===========================================
   Inline Progress Bar
   Compact bar used in lists, metadata rows
   =========================================== */
.progress-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.progress-inline__bar {
  width: 48px;
  height: 4px;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-inline__fill {
  height: 100%;
  background: var(--color-primary);
  transition: width var(--duration-normal) var(--ease-out);
}

.progress-inline__fill--complete { background: var(--color-success); }
.progress-inline__fill--warning { background: var(--color-warning); }
.progress-inline__fill--error { background: var(--color-error); }

.progress-inline__text {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* Size variants */
.progress-inline--sm .progress-inline__bar { width: 36px; height: 3px; }
.progress-inline--lg .progress-inline__bar { width: 80px; height: 6px; }

/* ===========================================
   Progress Ring
   Circular progress indicator
   =========================================== */
.progress-ring {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.progress-ring__svg {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  transform: rotate(-90deg);
}

.progress-ring__bg {
  fill: none;
  stroke: var(--color-surface-elevated);
  stroke-width: 4;
}

.progress-ring__fill {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease-out;
}

.progress-ring__fill--primary { stroke: var(--color-primary); }
.progress-ring__fill--warning { stroke: var(--color-warning); }
.progress-ring__fill--error { stroke: var(--color-error); }

.progress-ring__info { flex: 1; }

.progress-ring__title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin: 0 0 var(--spacing-xs);
}

.progress-ring__detail {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.progress-ring__percent {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-success);
}

/* Size variants */
.progress-ring--sm .progress-ring__svg { width: 32px; height: 32px; }
.progress-ring--sm .progress-ring__bg,
.progress-ring--sm .progress-ring__fill { stroke-width: 3; }

.progress-ring--lg .progress-ring__svg { width: 64px; height: 64px; }
.progress-ring--lg .progress-ring__bg,
.progress-ring--lg .progress-ring__fill { stroke-width: 5; }

/* ===========================================
   Stats Grid
   Grid of metric cards
   =========================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--spacing-md);
  text-align: center;
}

.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* With dividers */
.stats-grid--divided {
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.stats-grid__item {}

.stats-grid__value {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  font-family: var(--font-mono);
}

.stats-grid__label {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Compact variant */
.stats-grid--compact .stats-grid__value { font-size: var(--text-base); }
.stats-grid--compact .stats-grid__label { font-size: 10px; }

/* ===========================================
   Status Indicator
   Badge with status dot
   =========================================== */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  background: var(--color-success-surface);
  color: var(--color-success);
}

.status-indicator__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Status variants */
.status-indicator--pending {
  background: var(--color-warning-surface);
  color: var(--color-warning-700);
}

.status-indicator--active {
  background: var(--color-blue-100);
  color: var(--color-blue-800);
}

.status-indicator--error {
  background: var(--color-error-surface);
  color: var(--color-error);
}

.status-indicator--inactive {
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
}

/* Animated dot for active/building states */
.status-indicator--active .status-indicator__dot {
  animation: status-pulse 2s ease-in-out infinite;
}

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

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 640px) {
  .stats-grid--3,
  .stats-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-inline__fill,
  .progress-ring__fill,
  .status-indicator__dot {
    transition: none;
    animation: none;
  }
}