/**
 * Quiz Classification Badges Component - FORCE MODE
 * Styles pour les badges de classification (thème, sous-thème, niveau)
 * Spécificité maximale pour écraser Bootstrap
 */

/* SPÉCIFICITÉ MAXIMALE - Sélecteurs ultra-spécifiques */
html body .container .quiz-classification-container span.quiz-classification-badge,
html body .modal .quiz-classification-container span.quiz-classification-badge,
html body .quiz-content .quiz-classification-container span.quiz-classification-badge,
html body .quiz-modals-container .quiz-classification-container span.quiz-classification-badge,
html body div .quiz-classification-container span.quiz-classification-badge {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin-right: 0.25rem !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border-style: solid !important;
    border-width: 1px !important;
}

/* Spécificité augmentée pour les cartes de quiz */
.quiz-content .quiz-classification-container .quiz-classification-badge,
.quiz-modals-container .quiz-classification-container .quiz-classification-badge {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin-right: 0.25rem !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Fallback pour les badges sans conteneur spécifique */
.quiz-classification-badge {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin-right: 0.25rem !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* === STYLES DES BADGES PAR TYPE === */

/* 🔍 DÉBOGAGE CSS - Styles de test ultra-spécifiques */
html body div.container div.quiz-classification-container span.quiz-classification-badge.badge-theme,
html body div.modal div.quiz-classification-container span.quiz-classification-badge.badge-theme,
html body div.quiz-content div.quiz-classification-container span.quiz-classification-badge.badge-theme,
html body div.quiz-modals-container div.quiz-classification-container span.quiz-classification-badge.badge-theme {
    background-color: #FF0000 !important; /* ROUGE VIF POUR TEST */
    color: #FFFFFF !important;
    border: 3px solid #000000 !important;
    font-weight: bold !important;
    transform: scale(1.2) !important;
}

/* Badge Thème - Bleu */
.quiz-classification-badge.badge-theme,
.quiz-classification-container .badge-theme,
.quiz-content .quiz-classification-container .badge-theme,
.quiz-modals-container .quiz-classification-container .badge-theme {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    border: 1px solid #bbdefb !important;
}

/* Badge Sous-thème - Violet */
.quiz-classification-badge.badge-subtheme,
.quiz-classification-container .badge-subtheme,
.quiz-content .quiz-classification-container .badge-subtheme,
.quiz-modals-container .quiz-classification-container .badge-subtheme {
    background-color: #f3e5f5 !important;
    color: #7b1fa2 !important;
    border: 1px solid #e1bee7 !important;
}

/* Badge Niveau - Base */
.quiz-classification-badge.badge-level,
.quiz-classification-container .badge-level,
.quiz-content .quiz-classification-container .badge-level,
.quiz-modals-container .quiz-classification-container .badge-level {
    border: 1px solid #ddd !important;
}

/* Badge Niveau Académique - Vert */
.quiz-classification-badge.badge-level-academic,
.quiz-classification-container .badge-level-academic,
.quiz-content .quiz-classification-container .badge-level-academic,
.quiz-modals-container .quiz-classification-container .badge-level-academic {
    background-color: #e8f5e8 !important;
    color: #2e7d32 !important;
    border-color: #c8e6c9 !important;
}

/* Badge Niveau Professionnel - Orange */
.quiz-classification-badge.badge-level-professional,
.quiz-classification-container .badge-level-professional,
.quiz-content .quiz-classification-container .badge-level-professional,
.quiz-modals-container .quiz-classification-container .badge-level-professional {
    background-color: #fff3e0 !important;
    color: #ef6c00 !important;
    border-color: #ffcc02 !important;
}

/* Badge Niveau Compétence - Gris */
.quiz-classification-badge.badge-level-skill,
.quiz-classification-container .badge-level-skill,
.quiz-content .quiz-classification-container .badge-level-skill,
.quiz-modals-container .quiz-classification-container .badge-level-skill {
    background-color: #f1f3f5 !important;
    color: #495057 !important;
    border-color: #dee2e6 !important;
}

/* === ÉTATS INTERACTIFS === */

/* Hover effect pour les badges cliquables */
.quiz-classification-badge:hover {
    transform: scale(1.05);
    transition: transform 0.1s ease;
}

/* === RESPONSIVE === */

/* Ajustements pour petits écrans */
@media (max-width: 768px) {
    .quiz-classification-badge {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.4rem !important;
    }
}