/**
 * EMU Japan - Score Indicator Component
 * Location: public/assets/css/pages/quiz/score-indicator.css
 */


/* ==========================================================================
   Base Badge & Utility Styles
   ========================================================================== */


/* Badge mini (digunakan di Quiz List, Sidebar, Dashboard) */

.score-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50rem;
    border: 1px solid transparent;
    line-height: 1;
}

.score-badge i {
    font-size: 0.95rem;
}


/* Card besar (digunakan di Quiz Result Page / Modal) */

.score-card {
    border-radius: 1rem;
    padding: 1.75rem;
    border: 1px solid transparent;
    text-align: center;
}

.score-card .score-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1.85rem;
}


/* ==========================================================================
   Semantic Variants (Color, Background, Border)
   ========================================================================== */


/* 1. Perfect (100) - Blue Achievement */

.score-perfect {
    background-color: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
}

.score-card.score-perfect .score-icon-wrapper {
    background-color: #0284c7;
    color: #ffffff;
}


/* 2. Excellent (90-99) - Green Strong */

.score-excellent {
    background-color: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.score-card.score-excellent .score-icon-wrapper {
    background-color: #16a34a;
    color: #ffffff;
}


/* 3. Very Good (80-89) - Light Green */

.score-very-good {
    background-color: #f0fdf4;
    color: #166534;
    border-color: #dcfce7;
}

.score-card.score-very-good .score-icon-wrapper {
    background-color: #22c55e;
    color: #ffffff;
}


/* 4. Good! (70-79) - Yellow Safe Pass */

.score-good {
    background-color: #fef9c3;
    color: #854d0e;
    border-color: #fef08a;
}

.score-card.score-good .score-icon-wrapper {
    background-color: #eab308;
    color: #ffffff;
}


/* 5. Fair (50-69) - Orange Practice Needed */

.score-fair {
    background-color: #ffedd5;
    color: #9a3412;
    border-color: #fed7aa;
}

.score-card.score-fair .score-icon-wrapper {
    background-color: #f97316;
    color: #ffffff;
}


/* 6. Keep Learning (0-49) - Red Review Needed */

.score-keep-learning {
    background-color: #ffe4e6;
    color: #9f1239;
    border-color: #fecdd3;
}

.score-card.score-keep-learning .score-icon-wrapper {
    background-color: #e11d48;
    color: #ffffff;
}