/* Progress Ring Styles - Global */
.progress-ring {
    transition: all 0.3s ease;
    display: block;
}

.progress-ring-bg {
    transition: all 0.3s ease;
}

.progress-ring-circle {
    transition: stroke-dashoffset 0.5s ease-in-out;
    transform-origin: center;
    stroke-linecap: round;
}

/* Ensure proper sizing for different contexts */
.progress-ring.w-12.h-12 {
    width: 3rem !important;
    height: 3rem !important;
}

.progress-ring.w-24.h-24 {
    width: 6rem !important;
    height: 6rem !important;
}

.progress-ring.w-32.h-32 {
    width: 8rem !important;
    height: 8rem !important;
}

/* Responsive adjustments */
@media (min-width: 640px) {
    .progress-ring.sm\:w-32.sm\:h-32 {
        width: 8rem !important;
        height: 8rem !important;
    }
    
    .progress-ring.sm\:w-32.sm\:h-32 circle {
        stroke-width: 8;
    }
}

/* Fix for SVG viewBox issues */
.progress-ring[viewBox] {
    max-width: 100%;
    max-height: 100%;
}

/* Ensure circles are properly positioned */
.progress-ring circle {
    vector-effect: non-scaling-stroke;
}

/* Animation for loading states */
@keyframes progress-spin {
    0% {
        stroke-dashoffset: 264;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.progress-ring-circle.loading {
    animation: progress-spin 1s linear infinite;
}