/* Additional fixes for progress cards */

/* Fix for the "Completion" text being cut off */
.stat-metric {
    position: relative;
    z-index: 1;
}

/* Specific fix for Completion stat */
#completion-card {
    min-width: 130px; /* Ensure minimum width */
}

#completion-percentage {
    overflow: visible;
}

/* Ensure all stat headers have proper space */
.stat-header {
    min-height: 40px;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Better spacing for stat icons */
.stat-icon {
    margin-top: 2px;
}

/* Ensure the stat headers show all text */
.stat-header h3 {
    width: auto;
    flex-shrink: 1;
    word-break: normal;
    hyphens: manual;
}

/* Make responsive layout even more robust */
@media (max-width: 374px) {
    /* Extra small mobile devices */
    .stat-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .stat-value {
        font-size: 1.5rem;
        margin-top: 10px;
    }
    
    #completion-percentage {
        font-size: 1.8rem;
    }
}