/* ===== SVG PROGRESS INDICATOR ===== */

/* Container */
.progress-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
}

/* Circular Progress (SVG) */
.progress-circular {
  width: 80px;
  height: 80px;
  position: relative;
}

.progress-circular svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.progress-circular .progress-bg {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 8;
}

.progress-circular .progress-fill {
  fill: none;
  stroke: #4CAF50;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

/* States */
.progress-circular.loading .progress-fill {
  stroke: #2196F3;
  animation: pulse 1.5s ease-in-out infinite;
}

.progress-circular.success .progress-fill {
  stroke: #4CAF50;
}

.progress-circular.error .progress-fill {
  stroke: #f44336;
}

/* Linear Progress Bar */
.progress-linear {
  width: 100%;
  height: 24px;
  background: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.progress-linear-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #66BB6A);
  transition: width 0.3s ease;
  border-radius: 12px;
}

.progress-linear.loading .progress-linear-fill {
  background: linear-gradient(90deg, #2196F3, #42A5F5);
  animation: shimmer 1.5s ease-in-out infinite;
}

.progress-linear.error .progress-linear-fill {
  background: linear-gradient(90deg, #f44336, #e57373);
}

/* Label */
.progress-label {
  font-size: 0.875rem;
  color: #666;
  text-align: center;
  min-height: 1.25rem;
}

.progress-percentage {
  font-size: 0.75rem;
  color: #999;
  font-weight: 600;
}

/* Checkmark Icon (SVG) */
.progress-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.progress-circular.success .progress-icon,
.progress-circular.error .progress-icon {
  opacity: 1;
}

.progress-icon svg {
  width: 32px;
  height: 32px;
}

/* Animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Compact Mode (für Header) */
.progress-indicator.compact {
  padding: 0.5rem;
}

.progress-indicator.compact .progress-circular {
  width: 40px;
  height: 40px;
}

.progress-indicator.compact .progress-label {
  font-size: 0.75rem;
}

/* Hidden State */
.progress-indicator.hidden {
  display: none;
}