/* ============================================================= */
/* 📊 DASHBOARD STATISTICS & GAMIFICATION THEME                 */
/* ============================================================= */

/* --- GAMIFICATION STATS GLOBAL --- */
#gamification-stats .stats-card {
    transition: all 0.3s ease;
}

/* --- ENHANCED GAMIFICATION CARD STYLES --- */
.progress-bar-gradient {
    background: linear-gradient(90deg, 
        #8b5cf6 0%, 
        #3b82f6 50%, 
        #06b6d4 100%);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.stats-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- LIGHT MODE STATS COLORS --- */
body:not(.dark) #gamification-stats .text-gray-800 {
    color: #1f2937 !important;
}

body:not(.dark) #gamification-stats .text-gray-700 {
    color: #374151 !important;
}

body:not(.dark) #gamification-stats .text-gray-600 {
    color: #4b5563 !important;
}

body:not(.dark) #gamification-stats .text-gray-500 {
    color: #6b7280 !important;
}

body:not(.dark) #gamification-stats .text-gray-400 {
    color: #6b7280 !important;
}

body:not(.dark) #gamification-stats .text-gray-300 {
    color: #4b5563 !important;
}

/* --- LIGHT MODE STATS LABELS --- */
body:not(.dark) #gamification-stats .text-sm.font-medium {
    color: #374151 !important;
}

body:not(.dark) #gamification-stats .font-bold.text-base {
    color: #1f2937 !important;
}

body:not(.dark) #gamification-stats .font-bold {
    color: #1f2937 !important;
}

/* --- LIGHT MODE CARD BACKGROUNDS --- */
/* Green Cards (Materi Paling Dikuasai) */
body:not(.dark) #gamification-stats .bg-green-50 {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
}

body:not(.dark) #gamification-stats .bg-green-50 .font-bold,
body:not(.dark) #gamification-stats .bg-green-50 .text-base {
    color: #2d5016 !important;
}

body:not(.dark) #gamification-stats .bg-green-50 .text-sm {
    color: #365314 !important;
}

/* Orange Cards (Materi Kurang Dikuasai) */
body:not(.dark) #gamification-stats .bg-orange-50 {
    background: linear-gradient(135deg, #fef2f2 0%, #fce7e7 100%) !important;
}

body:not(.dark) #gamification-stats .bg-orange-50 .font-bold,
body:not(.dark) #gamification-stats .bg-orange-50 .text-base {
    color: #7d1538 !important;
}

body:not(.dark) #gamification-stats .bg-orange-50 .text-sm {
    color: #991b1b !important;
}

/* Purple Cards (Total Waktu Belajar) */
body:not(.dark) #gamification-stats .bg-purple-50 {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
}

body:not(.dark) #gamification-stats .bg-purple-50 .font-bold,
body:not(.dark) #gamification-stats .bg-purple-50 .text-base {
    color: #4a1a5c !important;
}

body:not(.dark) #gamification-stats .bg-purple-50 .text-sm {
    color: #581c87 !important;
}

/* Blue Cards (Akurasi Jawaban Global) */
body:not(.dark) #gamification-stats .bg-blue-50 {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

body:not(.dark) #gamification-stats .bg-blue-50 .font-bold,
body:not(.dark) #gamification-stats .bg-blue-50 .text-base {
    color: #1e3a5f !important;
}

body:not(.dark) #gamification-stats .bg-blue-50 .text-sm {
    color: #1e40af !important;
}

/* --- DARK MODE OVERRIDES --- */
.dark #gamification-stats .text-gray-600 {
    color: #d1d5db !important;
}

.dark #gamification-stats .text-gray-400 {
    color: #9ca3af !important;
}

.dark #gamification-stats .text-gray-300 {
    color: #d1d5db !important;
}

.dark #gamification-stats .font-bold,
.dark #gamification-stats .text-base {
    color: #ffffff !important;
}

.dark #gamification-stats .text-sm.font-medium {
    color: #f8f9fa !important;
}

/* --- DARK MODE CARD TEXT OVERRIDES --- */
.dark #gamification-stats .bg-green-50 .font-bold,
.dark #gamification-stats .bg-green-50 .text-base,
.dark #gamification-stats .bg-orange-50 .font-bold,
.dark #gamification-stats .bg-orange-50 .text-base,
.dark #gamification-stats .bg-purple-50 .font-bold,
.dark #gamification-stats .bg-purple-50 .text-base,
.dark #gamification-stats .bg-blue-50 .font-bold,
.dark #gamification-stats .bg-blue-50 .text-base {
    color: #ffffff !important;
}

.dark #gamification-stats .bg-green-50 .text-sm,
.dark #gamification-stats .bg-orange-50 .text-sm,
.dark #gamification-stats .bg-purple-50 .text-sm,
.dark #gamification-stats .bg-blue-50 .text-sm {
    color: #f8f9fa !important;
}

/* --- BADGE COLORS FORCE WHITE TEXT --- */
#gamification-stats .bg-orange-400,
#gamification-stats .bg-yellow-400,
#gamification-stats .bg-amber-400,
#gamification-stats .bg-blue-600,
#gamification-stats .bg-indigo-600,
#gamification-stats .bg-purple-600,
#gamification-stats .bg-green-600,
#level-text-container {
    color: #ffffff !important;
}

body:not(.dark) #gamification-stats .bg-orange-400,
body:not(.dark) #gamification-stats .bg-yellow-400,
body:not(.dark) #gamification-stats .bg-amber-400,
body:not(.dark) #gamification-stats .bg-blue-600,
body:not(.dark) #gamification-stats .bg-indigo-600,
body:not(.dark) #gamification-stats .bg-purple-600,
body:not(.dark) #gamification-stats .bg-green-600,
body:not(.dark) #level-text-container {
    color: #ffffff !important;
}

.dark #gamification-stats .bg-orange-400,
.dark #gamification-stats .bg-yellow-400,
.dark #gamification-stats .bg-amber-400,
.dark #gamification-stats .bg-blue-600,
.dark #gamification-stats .bg-indigo-600,
.dark #gamification-stats .bg-purple-600,
.dark #gamification-stats .bg-green-600,
.dark #level-text-container {
    color: #ffffff !important;
}

/* More specific selectors for level container text */
#level-text-container span,
#level-text-container * {
    color: #ffffff !important;
}

body:not(.dark) #level-text-container span,
body:not(.dark) #level-text-container * {
    color: #ffffff !important;
}

.dark #level-text-container span,
.dark #level-text-container * {
    color: #ffffff !important;
}

/* Override any tier color classes that might interfere */
#level-text-container .text-purple-600,
#level-text-container .text-blue-600,
#level-text-container .text-green-600,
#level-text-container .text-yellow-600,
#level-text-container .text-gray-600,
#level-text-container .text-purple-400,
#level-text-container .text-blue-400,
#level-text-container .text-green-400,
#level-text-container .text-yellow-400,
#level-text-container .text-gray-400 {
    color: #ffffff !important;
}

/* --- PAGINATION BUTTONS --- */
body:not(.dark) .mastery-page-btn {
    background-color: #e5e7eb;
    color: #374151;
}

body:not(.dark) .mastery-page-btn:not(:disabled):hover {
    background-color: #d1d5db;
}

body:not(.dark) .mastery-page-btn.bg-blue-600 {
    background-color: #2563eb;
    color: #ffffff;
}

.dark .mastery-page-btn {
    background-color: #374151;
    color: #d1d5db;
}

.dark .mastery-page-btn:not(:disabled):hover {
    background-color: #4b5563;
}

/* =================================================================== */
/* FIX: Force White Text on Tier & Level Labels (Light & Dark Mode) v2 */
/* =================================================================== */

/* REVISI: Target 'Pejuang SKS' lebih spesifik.
   Ini akan menimpa aturan `.font-bold` yang ada di mode terang.
*/
#gamification-stats .text-center .bg-gradient-to-r span.font-bold {
    color: #ffffff !important;
}

/* Target: Kontainer label level (misal: "Level 2").
   Action: Memaksa semua elemen teks (*) di dalamnya menjadi putih.
   Note: Aturan ini sudah benar dan dipertahankan.
*/
#gamification-stats .text-center > .mb-4 > div * {
    color: #ffffff !important;
}