/* ===================================
   BADGE ORANGE POUR NOMBRE DE LEÇONS
   Positionné à droite du titre du thème
   =================================== */

/* CORRECTION: Supprimer la flèche en double (::before de app.css) */
.sidebar-menu-toggle-icon::before {
    content: none !important;
    display: none !important;
}

/* SUPPRESSION GLOBALE DE TOUS LES EFFETS BLEUS DANS LA SIDEBAR */
.sidebar *:focus,
.sidebar *:active,
.sidebar a:focus,
.sidebar a:active,
.sidebar button:focus,
.sidebar button:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Supprimer le bleu de Bootstrap sur les collapse */
.collapse:focus,
.collapsing:focus,
.collapse.show:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ===================================
   STYLE PROFESSIONNEL POUR LES TITRES DE MENU
   (Bienvenue, Formation, etc.)
   =================================== */
.sidebar-heading {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem 1.25rem 0.75rem 1.25rem !important;
    margin: 1.5rem 0.75rem 0.75rem 0.75rem !important;
    position: relative;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s ease;
}

.sidebar-heading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 107, 53, 0.3);
}

.sidebar-heading:hover::after {
    background: rgba(247, 147, 30, 0.5);
    box-shadow: 0 0 6px rgba(255, 107, 53, 0.2);
}

.sidebar-heading::before {
    content: none !important;
    display: none !important;
}

/* Supprimer les icônes de dossier à gauche des thèmes */
.sidebar-menu-icon.material-icons:is([class*="folder"]),
.sidebar-menu .sidebar-menu-icon:has-text("folder"),
.sidebar-menu-button .material-icons:is(:contains("folder"), :contains("folder_open"), :contains("folder_special")) {
    display: none !important;
}

/* Méthode alternative: cibler toutes les icônes folder dans la sidebar */
.sidebar-menu .material-icons:is(.folder, [class*="folder"])::before,
.sidebar-menu-icon::before {
    content: "" !important;
}

/* Masquer spécifiquement les icônes folder dans les boutons de menu */
.sidebar-menu-button > i.material-icons:first-child {
    display: none !important;
}

/* Premier menu - plus d'emphase */
.sidebar-heading:first-of-type {
    margin-top: 0.5rem !important;
}

/* Titre du menu */
.menu-title-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Statistiques du menu (nombre thèmes / leçons) */
.menu-stats {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-left: 1.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(231, 125, 1, 0.2);
    padding: 0.15rem 0.3rem;
    border-radius: 6px;
    border: 1px solid rgba(231, 125, 1, 0.3);
    flex-shrink: 0;
}

.menu-stat-icon {
    font-size: 0.75rem !important;
    color: #E77D01;
    line-height: 1;
}

.menu-stat-number {
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-right: 0.15rem;
}

.menu-stat-separator {
    color: rgba(231, 125, 1, 0.6);
    font-weight: 400;
    margin: 0 0.1rem;
}

/* Badge orange avec style professionnel */
.lesson-badge-orange {
    background: rgba(231, 125, 1, 0.15);
    color: #E77D01;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(231, 125, 1, 0.25);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: auto;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
    vertical-align: middle;
}

/* Effet hover sur le badge */
.lesson-badge-orange:hover {
    background: rgba(231, 125, 1, 0.25);
    border-color: rgba(231, 125, 1, 0.4);
    box-shadow: none;
}

/* Layout flexbox pour aligner titre + badge + flèche */
.theme-item-flex {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    width: 100%;
    padding-right: 0.75rem !important;
}

/* Nouveau layout vertical pour thème avec compteur en bas */
.theme-item-vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    padding: 0.75rem 1rem !important;
}

.theme-header-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    width: 100%;
}

.theme-emoji {
    font-size: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.theme-text-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow: hidden;
}

.theme-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.theme-lesson-count-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    transition: all 0.3s ease;
}

.theme-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.theme-stat-icon {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1;
}

.theme-item-vertical:hover .theme-lesson-count-inline {
    color: rgba(255, 255, 255, 0.8) !important;
}

.theme-header-row .sidebar-menu-icon--left {
    display: none !important;
}

.theme-header-row .theme-title-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-header-row .sidebar-menu-toggle-icon {
    flex-shrink: 0;
    margin-left: auto;
}

/* Animation du badge au chargement */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.lesson-badge-orange.pulse {
    animation: badgePulse 0.6s ease-in-out;
}

/* Responsive - Tablette */
@media (max-width: 992px) {
    .lesson-badge-orange {
        font-size: 11px;
        padding: 3px 8px;
        min-width: 24px;
        height: 22px;
    }
}

/* Responsive - Mobile */
@media (max-width: 576px) {
    .lesson-badge-orange {
        font-size: 10px;
        padding: 2px 6px;
        min-width: 20px;
        height: 20px;
        margin-right: 8px;
    }
    
    .theme-item-flex {
        gap: 6px;
    }
}