/* components/progress/progress.css */

/**
 * Progress Component
Full accessibility support
 * Visual indicators of completion status
 */

/* ========================================
   PROGRESS BAR CUSTOM PROPERTIES
   ======================================== */

.c-progress {
  /* Dimensions */
  --c-progress-height: 0.5rem;
  --c-progress-border-radius: var(--ds-radius-pill);
  
  /* Colors */
  --c-progress-background: var(--ds-color-surface-lowered);
  --c-progress-fill-color: var(--ds-color-accent);
  --c-progress-border-color: transparent;
  
  /* Animation */
  --c-progress-transition: width var(--ds-duration-medium) var(--ds-ease-out);
  
  /* Label */
  --c-progress-label-font-size: var(--ds-font-size-s);
  --c-progress-label-color: var(--ds-color-text-weak);
}

/* ========================================
   PROGRESS BAR BASE
   ======================================== */

.c-progress {
  position: relative;
  width: 100%;
  margin: var(--ds-space-s) 0;
}

/* Progress label */
.c-progress__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ds-space-xs);
  font-size: var(--c-progress-label-font-size);
  color: var(--c-progress-label-color);
}

.c-progress__label-text {
  font-weight: var(--ds-font-weight-medium);
}

.c-progress__label-value {
  font-variant-numeric: tabular-nums;
}

/* Progress track */
.c-progress__track {
  position: relative;
  width: 100%;
  height: var(--c-progress-height);
  background: var(--c-progress-background);
  border: 1px solid var(--c-progress-border-color);
  border-radius: var(--c-progress-border-radius);
  overflow: hidden;
}

/* Progress fill */
.c-progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--c-progress-fill-color);
  border-radius: var(--c-progress-border-radius);
  transition: var(--c-progress-transition);
  transform-origin: left;
}

/* Striped animation */
@keyframes c-progress-stripes {
  from {
    background-position: var(--c-progress-height) 0;
  }
  to {
    background-position: 0 0;
  }
}

.c-progress__fill--striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: var(--c-progress-height) var(--c-progress-height);
}

.c-progress__fill--animated {
  animation: c-progress-stripes 1s linear infinite;
}

/* ========================================
   PROGRESS VARIANTS
   ======================================== */

/* Sizes */
.c-progress--small {
  --c-progress-height: 0.25rem;
}

.c-progress--medium {
  --c-progress-height: 0.75rem;
}

.c-progress--large {
  --c-progress-height: 1rem;
  --c-progress-label-font-size: var(--ds-font-size-m);
}

/* Status colors */
.c-progress--success {
  --c-progress-fill-color: var(--ds-color-status-success);
}

.c-progress--warning {
  --c-progress-fill-color: var(--ds-color-status-warning);
}

.c-progress--danger,
.c-progress--error {
  --c-progress-fill-color: var(--ds-color-status-danger);
}

.c-progress--info {
  --c-progress-fill-color: var(--ds-color-status-info);
}

/* With border */
.c-progress--bordered {
  --c-progress-border-color: var(--ds-color-border);
}

/* Label positions */
.c-progress--label-inside .c-progress__label {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 var(--ds-space-s);
  z-index: 1;
}

.c-progress--label-inside .c-progress__label-text,
.c-progress--label-inside .c-progress__label-value {
  color: var(--ds-color-text);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-semibold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ========================================
   TEXT POSITION VARIANTS
   ======================================== */

/* Text right */
.c-progress--text-right {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
}

.c-progress--text-right .c-progress__track {
  flex: 1;
}

.c-progress--text-right .c-progress__value {
  flex-shrink: 0;
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text-weak);
  font-variant-numeric: tabular-nums;
}

/* Text bottom */
.c-progress--text-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ds-space-xs);
}

.c-progress--text-bottom .c-progress__value {
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text-weak);
  font-variant-numeric: tabular-nums;
}

/* Floating labels */
.c-progress--text-floating {
  position: relative;
  padding: var(--ds-space-l) 0;
}

.c-progress--text-floating .c-progress__floating-value {
  position: absolute;
  padding: var(--ds-space-xs) var(--ds-space-s);
  background: var(--ds-color-surface-raised);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-s);
  box-shadow: var(--ds-shadow-s);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text);
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  transition: left var(--ds-duration-medium) var(--ds-ease-out);
  white-space: nowrap;
  z-index: 2;
}

.c-progress--text-floating .c-progress__floating-value::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
}

/* Top floating */
.c-progress--text-top-floating .c-progress__floating-value {
  bottom: calc(100% + var(--ds-space-xs));
}

.c-progress--text-top-floating .c-progress__floating-value::after {
  top: 100%;
  border-width: 4px 4px 0 4px;
  border-color: var(--ds-color-border) transparent transparent transparent;
}

/* Bottom floating */
.c-progress--text-bottom-floating .c-progress__floating-value {
  top: calc(100% + var(--ds-space-xs));
}

.c-progress--text-bottom-floating .c-progress__floating-value::after {
  bottom: 100%;
  border-width: 0 4px 4px 4px;
  border-color: transparent transparent var(--ds-color-border) transparent;
}

/* ========================================
   CIRCULAR PROGRESS
   ======================================== */

.c-progress-circular {
  /* Dimensions */
  --c-progress-circular-size: 4rem;
  --c-progress-circular-stroke-width: 4;
  
  /* Colors */
  --c-progress-circular-track-color: var(--ds-color-surface-lowered);
  --c-progress-circular-fill-color: var(--ds-color-accent);
  
  /* Animation */
  --c-progress-circular-transition: stroke-dashoffset var(--ds-duration-medium) var(--ds-ease-out);
}

.c-progress-circular {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--c-progress-circular-size);
  height: var(--c-progress-circular-size);
}

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

.c-progress-circular__track {
  fill: none;
  stroke: var(--c-progress-circular-track-color);
  stroke-width: var(--c-progress-circular-stroke-width);
}

.c-progress-circular__fill {
  fill: none;
  stroke: var(--c-progress-circular-fill-color);
  stroke-width: var(--c-progress-circular-stroke-width);
  stroke-linecap: round;
  transition: var(--c-progress-circular-transition);
}

.c-progress-circular__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text);
  text-align: center;
}

/* Circular sizes */
.c-progress-circular--small {
  --c-progress-circular-size: 2rem;
  --c-progress-circular-stroke-width: 3;
}

.c-progress-circular--small .c-progress-circular__label {
  font-size: var(--ds-font-size-xs);
}

.c-progress-circular--large {
  --c-progress-circular-size: 6rem;
  --c-progress-circular-stroke-width: 6;
}

.c-progress-circular--large .c-progress-circular__label {
  font-size: var(--ds-font-size-l);
}

/* Circular status colors */
.c-progress-circular--success {
  --c-progress-circular-fill-color: var(--ds-color-status-success);
}

.c-progress-circular--warning {
  --c-progress-circular-fill-color: var(--ds-color-status-warning);
}

.c-progress-circular--danger,
.c-progress-circular--error {
  --c-progress-circular-fill-color: var(--ds-color-status-danger);
}

.c-progress-circular--info {
  --c-progress-circular-fill-color: var(--ds-color-status-info);
}

/* Circular indeterminate animation */
@keyframes c-progress-circular-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes c-progress-circular-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.c-progress-circular--indeterminate .c-progress-circular__svg {
  animation: c-progress-circular-rotate 2s linear infinite;
}

.c-progress-circular--indeterminate .c-progress-circular__fill {
  animation: c-progress-circular-dash 1.5s ease-in-out infinite;
}

/* ========================================
   GRADIENT VARIANTS
   ======================================== */

/* Linear gradients */
.c-progress--gradient-primary .c-progress__fill {
  background: linear-gradient(90deg, 
    var(--ds-color-accent) 0%, 
    var(--ds-color-accent-strong) 100%);
}

.c-progress--gradient-success .c-progress__fill {
  background: linear-gradient(90deg, 
    #10b981 0%, 
    #059669 100%);
}

.c-progress--gradient-warning .c-progress__fill {
  background: linear-gradient(90deg, 
    #f59e0b 0%, 
    #d97706 100%);
}

.c-progress--gradient-danger .c-progress__fill {
  background: linear-gradient(90deg, 
    #ef4444 0%, 
    #dc2626 100%);
}

.c-progress--gradient-info .c-progress__fill {
  background: linear-gradient(90deg, 
    #3b82f6 0%, 
    #2563eb 100%);
}

.c-progress--gradient-rainbow .c-progress__fill {
  background: linear-gradient(90deg, 
    #ef4444 0%, 
    #f59e0b 17%, 
    #eab308 34%, 
    #22c55e 51%, 
    #3b82f6 68%, 
    #8b5cf6 85%, 
    #ec4899 100%);
}

.c-progress--gradient-sunset .c-progress__fill {
  background: linear-gradient(90deg, 
    #fbbf24 0%, 
    #fb923c 33%, 
    #f87171 66%, 
    #e879f9 100%);
}

.c-progress--gradient-ocean .c-progress__fill {
  background: linear-gradient(90deg, 
    #06b6d4 0%, 
    #3b82f6 50%, 
    #8b5cf6 100%);
}

.c-progress--gradient-forest .c-progress__fill {
  background: linear-gradient(90deg, 
    #84cc16 0%, 
    #22c55e 50%, 
    #10b981 100%);
}

.c-progress--gradient-fire .c-progress__fill {
  background: linear-gradient(90deg, 
    #fbbf24 0%, 
    #fb923c 50%, 
    #ef4444 100%);
}

/* Animated gradient */
@keyframes c-progress-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.c-progress--gradient-animated .c-progress__fill {
  background-size: 200% 200%;
  animation: c-progress-gradient-shift 3s ease infinite;
}

/* Circular gradients */
.c-progress-circular--gradient .c-progress-circular__fill {
  stroke: url(#progress-gradient);
}

/* SVG gradient definitions - should be added dynamically */
.c-progress__gradients {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ========================================
   STEPS PROGRESS
   ======================================== */

.c-progress-steps {
  /* Layout */
  --c-progress-steps-gap: var(--ds-space-xs);
  
  /* Step dimensions */
  --c-progress-steps-height: 0.5rem;
  --c-progress-steps-border-radius: var(--ds-radius-s);
  
  /* Colors */
  --c-progress-steps-background: var(--ds-color-surface-lowered);
  --c-progress-steps-fill-color: var(--ds-color-accent);
  --c-progress-steps-active-color: var(--ds-color-accent);
}

.c-progress-steps {
  display: flex;
  gap: var(--c-progress-steps-gap);
  width: 100%;
  margin: var(--ds-space-s) 0;
}

.c-progress-steps__step {
  flex: 1;
  height: var(--c-progress-steps-height);
  background: var(--c-progress-steps-background);
  border-radius: var(--c-progress-steps-border-radius);
  position: relative;
  overflow: hidden;
}

.c-progress-steps__step--completed {
  background: var(--c-progress-steps-fill-color);
}

.c-progress-steps__step--active {
  background: var(--c-progress-steps-active-color);
  opacity: 0.6;
}

.c-progress-steps__step--active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: c-progress-steps-pulse 2s ease-in-out infinite;
}

@keyframes c-progress-steps-pulse {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Steps with labels */
.c-progress-steps--with-labels {
  margin-bottom: var(--ds-space-l);
}

.c-progress-steps__labels {
  display: flex;
  margin-top: var(--ds-space-xs);
}

.c-progress-steps__label {
  flex: 1;
  text-align: center;
  font-size: var(--ds-font-size-xs);
  color: var(--ds-color-text-weak);
  padding: 0 var(--ds-space-xs);
}

.c-progress-steps__label--completed {
  color: var(--ds-color-status-success);
  font-weight: var(--ds-font-weight-medium);
}

.c-progress-steps__label--active {
  color: var(--ds-color-text);
  font-weight: var(--ds-font-weight-semibold);
}

/* ========================================
   PROGRESS GROUP
   ======================================== */

.c-progress-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-m);
  width: 100%;
}

.c-progress-group__item {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

/* ========================================
   INDETERMINATE PROGRESS
   ======================================== */

@keyframes c-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

.c-progress--indeterminate .c-progress__fill {
  width: 30%;
  animation: c-progress-indeterminate 2s ease-in-out infinite;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
  .c-progress__track {
    border: 1px solid currentColor;
  }
  
  .c-progress__fill {
    border: 1px solid currentColor;
  }
  
  .c-progress-circular__track,
  .c-progress-circular__fill {
    stroke-width: calc(var(--c-progress-circular-stroke-width) + 1);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-progress__fill {
    transition: none;
  }
  
  .c-progress__fill--animated,
  .c-progress--indeterminate .c-progress__fill,
  .c-progress-circular--indeterminate .c-progress-circular__svg,
  .c-progress-circular--indeterminate .c-progress-circular__fill,
  .c-progress-steps__step--active::after {
    animation: none;
  }
}

/* Screen reader only text */
.c-progress__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}