.workflowStatusContainer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--object-radius-small);
}

.workflowStatus {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: var(--color-primary);
  border-right-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
  display: inline-block;
  opacity: 0.8;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.statusBadge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}

.statusBadge[data-status="started"] {
  background-color: #e3f2fd;
  color: #1976d2;
}

.statusBadge[data-status="resumed"] {
  background-color: #e8f5e9;
  color: #388e3c;
}

.statusBadge[data-status="stopped"] {
  background-color: #fff3e0;
  color: #f57c00;
}

.statusBadge[data-status="failed"] {
  background-color: #ffebee;
  color: #d32f2f;
}

.statusBadge[data-status="completed"] {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.roundBadge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  background-color: var(--color-highlight-gray);
  color: var(--color-text);
}

.progressBarContainer {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

.progressBar {
  flex: 1;
  height: 8px;
  background-color: var(--color-highlight-gray);
  border-radius: 4px;
  overflow: hidden;
  min-width: 100px;
}

.progressBarFill {
  height: 100%;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.progressBarLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 35px;
  text-align: right;
}

.statsContainer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.statItem {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.statLabel {
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}

.statValue {
  font-weight: 600;
  color: var(--color-text);
  font-family: 'Courier New', monospace;
}

/* Dark theme support */
[data-theme="dark"] .workflowStatusContainer {
  background-color: var(--color-surface-dark);
  border-color: var(--color-border-dark);
}

[data-theme="dark"] .statusBadge[data-status="started"] {
  background-color: rgba(33, 150, 243, 0.2);
  color: #64b5f6;
}

[data-theme="dark"] .statusBadge[data-status="resumed"] {
  background-color: rgba(76, 175, 80, 0.2);
  color: #81c784;
}

[data-theme="dark"] .statusBadge[data-status="stopped"] {
  background-color: rgba(255, 152, 0, 0.2);
  color: #ffb74d;
}

[data-theme="dark"] .statusBadge[data-status="failed"] {
  background-color: rgba(244, 67, 54, 0.2);
  color: #e57373;
}

[data-theme="dark"] .statusBadge[data-status="completed"] {
  background-color: rgba(76, 175, 80, 0.2);
  color: #81c784;
}

[data-theme="dark"] .roundBadge {
  background-color: var(--color-highlight-gray-dark);
  color: var(--color-text-dark);
}

[data-theme="dark"] .progressBar {
  background-color: var(--color-highlight-gray-dark);
}

[data-theme="dark"] .progressBarLabel {
  color: var(--color-text-dark);
}

[data-theme="dark"] .statLabel {
  color: var(--color-text-secondary-dark);
}

[data-theme="dark"] .statValue {
  color: var(--color-text-dark);
}

