/**********************************************
 * SCORECARD COMPONENT - MAIN STYLES
 **********************************************/

/* Base transitions for smooth color changes */
.score-card,
.score-card .score-card-header,
.score-card .score-percentage,
.score-card .progress,
.score-card .progress-bar,
.score-card .question-circle,
.score-card .stat-circle {
    transition: all 1s ease;
}

/* Default Score Card Styling */
.score-card {
    padding: 1rem;
    border-radius: var(--border-radius);
    position: relative;
}

/* Score Card Header */
.score-card-header {
    font-size: 1rem;
    font-weight: 600;
}

/**********************************************
 * PROGRESS INDICATORS
 **********************************************/

/* Progress Bar */
.score-card .progress {
    width: 100%;
    height: 0.5rem;
    border-radius: 0.25rem;
    margin: 0;
}

/* Question Circles (Progress Circles) */
.score-card .question-circle {
    position: absolute;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transform: translate(-50%, -50%);
}

/* Position Adjustments for Progress Circles */
.score-card .circle-total {
    left: 100%;
    transform: translate(-1.5rem, -50%);
}

.score-card .circle-current[style*="left: 0%;"] {
    transform: translate(0.75rem, -50%);
}

.score-card .circle-current[style*="left: 100%;"] {
    transform: translate(-0.75rem, -50%);
}

/**********************************************
 * STATISTICS & SCORE DISPLAY
 **********************************************/

/* Stats Container */
.score-card .score-stats {
    margin-top: 1rem;
    font-weight: 600;
}

/* Stat Circles */
.score-card .stat-circle {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: black;
}

/* Correct, Wrong, and Total Stat Colors */
.score-card .stat-correct {
    background-color: var(--md-green-400, #66bb6a);
}

.score-card .stat-wrong {
    background-color: var(--md-red-400, #ef5350);
}

.score-card .stat-total {
    background-color: var(--md-gray-400, #bdbdbd);
}

/* Score Percentage Display */
.score-percentage {
    display: inline-flex;
    align-items: baseline;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.score-card .percentage-symbol {
    font-size: 0.75em;
    margin-left: 0.25rem;
    line-height: 1;
}

/**********************************************
 * INACTIVE STATE STYLING
 **********************************************/

/* Inactive Score Card - Gray Theme */
.score-card:not(.active) {
    background-color: var(--md-gray-200) !important;
    transition: all 1s ease;
    opacity: 0.9;
}

/* Override themed headers and percentages for inactive cards */
.score-card:not(.active) .score-card-header,
.score-card:not(.active) .score-percentage {
    color: var(--md-gray-600) !important;
}

/* Override progress bar styles for inactive cards */
.score-card:not(.active) .progress {
    --bs-progress-bg: var(--md-gray-100) !important;
}

.score-card:not(.active) .progress-bar,
.score-card:not(.active) .question-circle {
    background-color: var(--md-gray-500) !important;
    color: #fff !important;
}

/* Override stat circles for inactive cards */
.score-card:not(.active) .stat-circle.stat-correct {
    background-color: var(--md-gray-300) !important;
}

.score-card:not(.active) .stat-circle.stat-wrong {
    background-color: var(--md-gray-400) !important;
}

.score-card:not(.active) .stat-circle.stat-total {
    background-color: var(--md-gray-500) !important;
}

/* Hover effect for inactive cards */
.score-card:not(.active):hover {
    background-color: var(--md-gray-300) !important;
    cursor: pointer;
    opacity: 1;
}

/**********************************************
 * ACTIVITY-SPECIFIC THEMES
 **********************************************/

/* Multiple Choice - Indigo */
.score-card-multiple-choice {
    background-color: var(--md-indigo-100, #c5cae9);
}
.score-card-multiple-choice .progress {
    --bs-progress-bg: var(--md-indigo-50, #e8eaf6);
}
.score-card-multiple-choice .score-card-header,
.score-card-multiple-choice .score-percentage {
    color: var(--md-indigo-600, #3949ab);
}
.score-card-multiple-choice .progress-bar,
.score-card-multiple-choice .question-circle {
    background-color: var(--md-indigo-600, #3949ab);
    color: #fff;
}

/* True or False - Blue */
.score-card-true-false {
    background-color: var(--md-blue-100, #bbdefb);
}
.score-card-true-false .progress {
    --bs-progress-bg: var(--md-blue-50, #e3f2fd);
}
.score-card-true-false .score-card-header,
.score-card-true-false .score-percentage {
    color: var(--md-blue-600, #1e88e5);
}
.score-card-true-false .progress-bar,
.score-card-true-false .question-circle {
    background-color: var(--md-blue-600, #1e88e5);
    color: #fff;
}

/* Flashcards - Lime */
.score-card-flashcards {
    background-color: var(--md-lime-100, #f0f4c3);
}
.score-card-flashcards .progress {
    --bs-progress-bg: var(--md-lime-50, #f9fbe7);
}
.score-card-flashcards .score-card-header,
.score-card-flashcards .score-percentage {
    color: var(--md-lime-700, #afb42b);
}
.score-card-flashcards .progress-bar,
.score-card-flashcards .question-circle {
    background-color: var(--md-lime-700, #afb42b);
    color: #fff;
}

/* Mix and Match - Amber */
.score-card-mix-match {
    background-color: var(--md-amber-100, #ffecb3);
}
.score-card-mix-match .progress {
    --bs-progress-bg: var(--md-amber-50, #fff8e1);
}
.score-card-mix-match .score-card-header,
.score-card-mix-match .score-percentage {
    color: var(--md-amber-600, #ffb300);
}
.score-card-mix-match .progress-bar,
.score-card-mix-match .question-circle {
    background-color: var(--md-amber-600, #ffb300);
    color: #fff;
}

/* Dictation - Teal */
.score-card-dictation {
    background-color: var(--md-teal-100, #b2dfdb);
}
.score-card-dictation .progress {
    --bs-progress-bg: var(--md-teal-50, #e0f2f1);
}
.score-card-dictation .score-card-header,
.score-card-dictation .score-percentage {
    color: var(--md-teal-600, #00897b);
}
.score-card-dictation .progress-bar,
.score-card-dictation .question-circle {
    background-color: var(--md-teal-600, #00897b);
    color: #fff;
}

/* Translation - Orange */
.score-card-translation {
    background-color: var(--md-orange-100, #ffe0b2);
}
.score-card-translation .progress {
    --bs-progress-bg: var(--md-orange-50, #fff3e0);
}
.score-card-translation .score-card-header,
.score-card-translation .score-percentage {
    color: var(--md-orange-600, #fb8c00);
}
.score-card-translation .progress-bar,
.score-card-translation .question-circle {
    background-color: var(--md-orange-600, #fb8c00);
    color: #fff;
}

/* Comprehension - Deep Purple */
.score-card-comprehension {
    background-color: var(--md-deep-purple-100, #d1c4e9);
}
.score-card-comprehension .progress {
    --bs-progress-bg: var(--md-deep-purple-50, #ede7f6);
}
.score-card-comprehension .score-card-header,
.score-card-comprehension .score-percentage {
    color: var(--md-deep-purple-600, #5e35b1);
}
.score-card-comprehension .progress-bar,
.score-card-comprehension .question-circle {
    background-color: var(--md-deep-purple-600, #5e35b1);
    color: #fff;
}