/* Progress Bar Text Visibility Fix */

/* Ensure progress bar containers have relative positioning */
.progress {
    position: relative;
    overflow: visible !important;
}

/* Style for progress bar text that's always visible */
.progress-bar span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #333 !important;
    font-weight: 600;
    text-shadow: 
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        0 0 2px rgba(255,255,255,0.8);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

/* Ensure text is visible even on colored backgrounds */
.progress-bar.bg-info span,
.progress-bar.bg-success span,
.progress-bar.bg-warning span {
    color: #333 !important;
}

/* Alternative style with text outside the bar */
.progress-with-label {
    position: relative;
    margin-bottom: 5px;
}

.progress-label {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: 14px;
    color: #333;
    pointer-events: none;
    z-index: 10;
}

/* Ensure minimum height for readability */
.progress[style*="height: 25px"] {
    min-height: 25px !important;
}

/* Dark background for better contrast when progress is high */
.progress-bar[style*="width: 9"],
.progress-bar[style*="width: 8"],
.progress-bar[style*="width: 7"],
.progress-bar[style*="width: 6"],
.progress-bar[style*="width: 5"] {
    /* For progress > 50%, use white text */
}

.progress-bar[style*="width: 9"] span,
.progress-bar[style*="width: 8"] span,
.progress-bar[style*="width: 7"] span,
.progress-bar[style*="width: 6"] span,
.progress-bar[style*="width: 5"] span {
    color: #fff !important;
    text-shadow: 
        -1px -1px 0 rgba(0,0,0,0.3),
        1px -1px 0 rgba(0,0,0,0.3),
        -1px 1px 0 rgba(0,0,0,0.3),
        1px 1px 0 rgba(0,0,0,0.3);
}

/* Subscription page specific fixes */
#page-settings .progress {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}