/* =============================================
   Progress Bar Component — UI-0076
   ============================================= */

/* --- Progress Track Wrapper --- */
.progress {
  width: 100%;
}

.progress__track {
  width: 100%;
  height: 4px;
  background-color: var(--bg-muted, #EEF1F5);
  border-radius: 2px;
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: 2px;
  background-color: var(--color-electric, #2F80ED);
  transition: width var(--duration-normal, 300ms) var(--ease-default),
              background-color var(--duration-normal, 300ms) var(--ease-default);
}

/* --- Label Row --- */
.progress__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.progress__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary, #111111);
}

.progress__value {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted, #B0BAC5);
  text-align: right;
}

/* --- Size Variants --- */
.progress--thin .progress__track {
  height: 2px;
}

.progress--thick .progress__track {
  height: 8px;
  border-radius: 4px;
}

.progress--thick .progress__fill {
  border-radius: 4px;
}

/* =============================================
   Password Strength Variant — UI-0076
   ============================================= */
.progress--strength {
  margin-top: var(--space-2); /* 8px below password input */
}

/* Strength: Weak */
.progress--strength[data-strength="1"] .progress__fill,
.progress__fill--weak {
  background-color: var(--color-error, #EF4444);
  width: 33.33%;
}

/* Strength: Fair */
.progress--strength[data-strength="2"] .progress__fill,
.progress__fill--fair {
  background-color: var(--color-warning, #F59E0B);
  width: 66.66%;
}

/* Strength: Strong */
.progress--strength[data-strength="3"] .progress__fill,
.progress__fill--strong {
  background-color: var(--color-success, #10B981);
  width: 100%;
}

/* Strength Labels */
.progress__strength-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin-top: var(--space-1);
  text-align: right;
}

.progress__strength-label--weak  { color: var(--color-error, #EF4444); }
.progress__strength-label--fair  { color: var(--color-warning, #F59E0B); }
.progress__strength-label--strong { color: var(--color-success, #10B981); }

/* =============================================
   Segmented Progress (multi-step)
   ============================================= */
.progress--segmented .progress__track {
  display: flex;
  gap: 2px;
  background-color: transparent;
  overflow: visible;
}

.progress__segment {
  flex: 1;
  height: 4px;
  background-color: var(--bg-muted, #EEF1F5);
  border-radius: 2px;
  transition: background-color var(--duration-normal, 300ms) var(--ease-default);
}

.progress__segment.is-complete {
  background-color: var(--color-electric, #2F80ED);
}

/* =============================================
   Progress — Mobile Responsive
   ============================================= */
@media (max-width: 639px) {
  .progress__label-row {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .progress__label,
  .progress__value {
    font-size: 12px;
  }
}