/* 
  Circular Progress Component Styles
  Defines styling for circular progress indicators with gradients
*/

.circular-progress {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circular-progress__svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circular-progress__background {
  fill: none;
  stroke: var(--clr-surface-a20);
  stroke-width: 3.6;
  stroke-linecap: round;
}

.circular-progress__foreground {
  fill: none;
  stroke-width: 3.6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

/* Class-based gradient colors based on percentage values */
/* Sports performance weighted scale with dramatic differentiation at high percentages */

/* Lower percentage ranges with darker colors */
.circular-progress__foreground.perc-0-30 {
  stroke: #053e39; /* Very dark teal - extremely low */
}

.circular-progress__foreground.perc-30-40 {
  stroke: #075751; /* Dark teal - very low */
}

.circular-progress__foreground.perc-40-60 {
  stroke: #096c63; /* Medium-dark teal - below threshold */
}

.circular-progress__foreground.perc-60-70 {
  stroke: #0d9488; /* Medium teal - minimum visible threshold */
}

/* Start differentiating more dramatically above 70% */
.circular-progress__foreground.perc-70-80 {
  stroke: #09B6A2; /* Medium teal - Above average */
}

.circular-progress__foreground.perc-80-85 {
  stroke: #0AC7B2; /* Bright teal - Good */
}

.circular-progress__foreground.perc-85-88 {
  stroke: #0DD3BC; /* Brighter teal - Very good */
}

/* Dramatic shifts in the upper ranges with 2-3% intervals */
.circular-progress__foreground.perc-88-90 {
  stroke: #10DEC6; /* Light teal - Great */
}

.circular-progress__foreground.perc-90-92 {
  stroke: #14E5CD; /* Lighter teal - Excellent */
}

.circular-progress__foreground.perc-92-94 {
  stroke: #17ECD4; /* Very light teal - Outstanding */
}

.circular-progress__foreground.perc-94-96 {
  stroke: #1AF3DB; /* Almost neon teal - Elite */
}

.circular-progress__foreground.perc-96-100 {
  stroke: #18FFE4; /* Neon teal - World class */
}

.circular-progress__text {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  position: relative;
}

/* Text colors to match stroke colors */
/* Sports performance weighted scale with dramatic differentiation at high percentages */

/* Lower percentage ranges with darker colors - but keeping text readable */
.circular-progress__text.perc-0-30 {
  color: #096c63; /* Medium-dark teal - minimum readable color */
}

.circular-progress__text.perc-30-40 {
  color: #096c63; /* Medium-dark teal - minimum readable color */
}

.circular-progress__text.perc-40-60 {
  color: #096c63; /* Medium-dark teal - below threshold */
}

.circular-progress__text.perc-60-70 {
  color: #0d9488; /* Medium teal - minimum visible threshold */
}

/* For use in the percentage boxes - lower ranges */
.perc-0-30 {
  --perc-color: #053e39; /* Very dark teal - extremely low */
}

.perc-30-40 {
  --perc-color: #075751; /* Dark teal - very low */
}

.perc-40-60 {
  --perc-color: #096c63; /* Medium-dark teal - below threshold */
}

.perc-60-70 {
  --perc-color: #0d9488; /* Medium teal - minimum visible threshold */
}

/* Start differentiating more dramatically above 70% */
.circular-progress__text.perc-70-80 {
  color: #09B6A2; /* Medium teal - Above average */
}

.circular-progress__text.perc-80-85 {
  color: #0AC7B2; /* Bright teal - Good */
}

.circular-progress__text.perc-85-88 {
  color: #0DD3BC; /* Brighter teal - Very good */
}

/* Dramatic shifts in the upper ranges with 2-3% intervals */
.circular-progress__text.perc-88-90 {
  color: #10DEC6; /* Light teal - Great */
}

.circular-progress__text.perc-90-92 {
  color: #14E5CD; /* Lighter teal - Excellent */
}

.circular-progress__text.perc-92-94 {
  color: #17ECD4; /* Very light teal - Outstanding */
}

.circular-progress__text.perc-94-96 {
  color: #1AF3DB; /* Almost neon teal - Elite */
}

.circular-progress__text.perc-96-100 {
  color: #18FFE4; /* Neon teal - World class */
}