/* Styles personnalisés pour la sidebar - Distinction entre administration et fonctionnalités utilisateur */

/* Styles pour distinguer les sections administratives et fonctionnalités utilisateur */
.sidebar .menu-title {
    font-weight: 600;
    font-size: 12px;
    color: #28084b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

/* Section Administration - Bordure rouge */
.sidebar
    .menu-title:has(
        + li.submenu:has(
                a[href*="user-list"],
                a[href*="agency-list"],
                a[href*="levels-edit"],
                a[href*="themes-edit"]
            )
    ) {
    color: #28084b;
}

/* Section Fonctionnalités - Bordure bleue */
.sidebar
    .menu-title:has(+ li.submenu:has(a[href*="entretien"], a[href*="cours"])) {
    color: #007bff;
    border-left: 3px solid #007bff;
    padding-left: 17px;
}

/* Section Système - Bordure grise */
.sidebar .menu-title:has(+ li:has(a[href*="settings"])) {
    color: #28084b;
}

/* Icônes colorées pour les sections administratives */
.sidebar
    .submenu:has(
        a[href*="user-list"],
        a[href*="agency-list"],
        a[href*="levels-edit"],
        a[href*="themes-edit"]
    )
    i {
    color: #dc3545;
}

/* Icônes colorées pour les fonctionnalités utilisateur */
.sidebar .submenu:has(a[href*="entretien"], a[href*="cours"]) i {
    color: #007bff;
}

/* Icônes colorées pour les paramètres système */
.sidebar li:has(a[href*="settings"]) i {
    color: #6c757d;
}

/* Styles alternatifs pour les navigateurs qui ne supportent pas :has() */
.sidebar .menu-title.admin-section {
    color: #28084b;
}

.sidebar .menu-title.user-section {
    color: #007bff;
    border-left: 3px solid #007bff;
    padding-left: 17px;
}

.sidebar .menu-title.system-section {
    color: #28084b;
}

/* Icônes colorées alternatives */
.sidebar .admin-section + li.submenu i,
.sidebar .user-section + li.submenu i,
.sidebar .system-section + li i {
    color: inherit;
}

/* ===== CORRECTION DES COULEURS DE SÉLECTION DE LA SIDEBAR ===== */

/* Classes Tailwind personnalisées pour la sidebar */
.sidebar-active {
    @apply border-l-4 border-l-orange-500;
    @apply text-orange-500;
    @apply bg-transparent;
    @apply relative;
}

.sidebar-active-submenu {
    @apply border-l-4 border-l-orange-500;
    @apply text-orange-500;
    @apply bg-transparent;
    @apply relative;
}

/* Remplacer TOUS les styles de sélection par une simple bordure gauche orange */
/* Utilisation de sélecteurs très spécifiques pour surcharger les styles existants */
.sidebar .sidebar-menu ul li.active a,
.sidebar .sidebar-menu ul li a.active,
.sidebar .sidebar-menu ul li.submenu ul li a.active {
    color: #ff6900 !important;
    background: transparent !important;
    position: relative !important;
    border-left: 4px solid #ff6900 !important;
    padding-left: 20px !important; /* Padding uniforme pour tous les éléments actifs */
}

/* Supprimer TOUS les pseudo-éléments ::before et ::after de sélection */
.sidebar .sidebar-menu ul li.active a::before,
.sidebar .sidebar-menu ul li.active a::after,
.sidebar .sidebar-menu ul li a.active::before,
.sidebar .sidebar-menu ul li a.active::after,
.sidebar .sidebar-menu ul li.submenu ul li a.active::before,
.sidebar .sidebar-menu ul li.submenu ul li a.active::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

/* Ajuster le padding pour compenser la bordure gauche - SUPPRIMÉ */
/* Les paddings sont maintenant gérés individuellement pour chaque mode */

/* S'assurer que le texte et les icônes Material Design sont orange */
.sidebar .sidebar-menu ul li.active a span,
.sidebar .sidebar-menu ul li a.active span,
.sidebar .sidebar-menu ul li.active a .material-icons,
.sidebar .sidebar-menu ul li a.active .material-icons,
.sidebar .sidebar-menu ul li.submenu ul li a.active span,
.sidebar .sidebar-menu ul li.submenu ul li a.active .material-icons {
    color: #ff6900 !important;
}

/* Supprimer les filtres d'image pour les éléments actifs */
.sidebar .sidebar-menu ul li.active a img,
.sidebar .sidebar-menu ul li a.active img {
    filter: none !important;
}

/* Corriger les styles pour les éléments de sous-menu */
.sidebar .sidebar-menu ul li.submenu ul li a.active {
    color: #ff6900 !important;
    font-weight: normal !important;
}

/* Supprimer les styles :after pour les sous-menus actifs */
.sidebar .sidebar-menu ul li.submenu ul li a.active:after {
    display: none !important;
    background: none !important;
    border: none !important;
}

/* Surcharger les styles pour les éléments .nav-link actifs */
.sidebar .nav-link.active {
    color: #ff6900 !important;
    background: transparent !important;
    position: relative !important;
    border-left: 4px solid #ff6900 !important;
    padding-left: 6px !important; /* 10px - 4px pour compenser la bordure */
}

/* Supprimer le triangle de sélection pour les nav-link */
.sidebar .nav-link.active:after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Styles pour les éléments de sous-menu de niveau 2 et 3 */
.sidebar .sidebar-menu ul li.submenu ul.level2 li a.active,
.sidebar .sidebar-menu ul li.submenu ul.level3 li a.active {
    border-left: 4px solid #ff6900 !important;
    color: #ff6900 !important;
}

.sidebar .sidebar-menu ul.level2 li a.active {
    padding-left: 56px !important; /* 60px - 4px */
}

.sidebar .sidebar-menu ul.level3 li a.active {
    padding-left: 76px !important; /* 80px - 4px */
}

/* Surcharger les styles pour les éléments avec classe .subdrop */
.sidebar .sidebar-menu ul li a.subdrop.active {
    border-left: 4px solid #ff6900 !important;
    color: #ff6900 !important;
    padding-left: 21px !important;
}

/* S'assurer que les icônes Material Design des éléments actifs sont orange */
.sidebar .sidebar-menu ul li.active a .material-icons,
.sidebar .sidebar-menu ul li a.active .material-icons,
.sidebar .sidebar-menu ul li.submenu ul li a.active .material-icons {
    color: #ff6900 !important;
}

/* Surcharger les styles pour les éléments avec icônes Material Design */
.sidebar .sidebar-menu ul li.active a .material-icons,
.sidebar .sidebar-menu ul li a.active .material-icons,
.sidebar .sidebar-menu ul li.submenu ul li a.active .material-icons {
    color: #ff6900 !important;
}

/* ===== SURCHARGE COMPLÈTE DES VARIABLES SCSS ===== */

/* Remplacer toutes les occurrences de la couleur violette par l'orange */
/* Ces styles doivent être chargés en dernier pour surcharger les variables SCSS */

/* Surcharger les styles pour les éléments actifs de la sidebar */
.sidebar .sidebar-menu ul li.active a,
.sidebar .sidebar-menu ul li a.active,
.sidebar .sidebar-menu ul li.submenu ul li a.active,
.sidebar .nav-link.active {
    /* Remplacer complètement la couleur primaire SCSS */
    color: #ff6900 !important;
    background: transparent !important;
    border-left: 4px solid #ff6900 !important;
}

/* Surcharger tous les pseudo-éléments qui utilisent la couleur primaire */
.sidebar .sidebar-menu ul li.active a::before,
.sidebar .sidebar-menu ul li a.active::before,
.sidebar .sidebar-menu ul li.active a::after,
.sidebar .sidebar-menu ul li a.active::after {
    background: #ff6900 !important;
}

/* Surcharger les styles pour les éléments de sous-menu */
.sidebar .sidebar-menu ul li.submenu ul li a.active {
    color: #ff6900 !important;
    border-left: 4px solid #ff6900 !important;
}

/* Surcharger les styles pour les éléments avec icônes */
.sidebar .sidebar-menu ul li.active a i,
.sidebar .sidebar-menu ul li a.active i,
.sidebar .sidebar-menu ul li.submenu ul li a.active i,
.sidebar .sidebar-menu ul li.active a svg,
.sidebar .sidebar-menu ul li a.active svg,
.sidebar .sidebar-menu ul li.submenu ul li a.active svg,
.sidebar .sidebar-menu ul li.active a .feather,
.sidebar .sidebar-menu ul li a.active .feather,
.sidebar .sidebar-menu ul li.submenu ul li a.active .feather {
    color: #ff6900 !important;
    stroke: #ff6900 !important;
}

/* Surcharger les styles pour le texte */
.sidebar .sidebar-menu ul li.active a span,
.sidebar .sidebar-menu ul li a.active span,
.sidebar .sidebar-menu ul li.submenu ul li a.active span {
    color: #ff6900 !important;
}

/* Surcharger les styles pour les éléments de navigation */
.sidebar .nav-link.active {
    color: #ff6900 !important;
    border-left: 4px solid #ff6900 !important;
}

/* Surcharger les styles pour les éléments de sous-menu de niveau 2 et 3 */
.sidebar .sidebar-menu ul.level2 li a.active,
.sidebar .sidebar-menu ul.level3 li a.active {
    color: #ff6900 !important;
    border-left: 4px solid #ff6900 !important;
}

/* Surcharger les styles pour les éléments avec classe .subdrop */
.sidebar .sidebar-menu ul li a.subdrop.active {
    color: #ff6900 !important;
    border-left: 4px solid #ff6900 !important;
}

/* Styles personnalisés pour la sidebar repliée avec survol */

/* État par défaut : sidebar repliée */
.mini-sidebar .sidebar {
    width: 80px; /* Largeur repliée par défaut */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden; /* Cacher le contenu qui dépasse */
}

.mini-sidebar .sidebar .sidebar-menu ul li a span {
    display: none; /* Cacher le texte en mode replié */
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

/* FORCER l'affichage des icônes Material Design en mode replié - CENTRÉES */
.mini-sidebar .sidebar .sidebar-menu ul li a .material-icons {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 0 !important; /* Pas de marge pour centrer parfaitement */
    font-size: 20px !important;
    color: #757575 !important; /* Couleur par défaut */
    transition: all 0.3s ease;
    position: relative !important;
    z-index: 10 !important;
    text-align: center !important; /* Centrer le texte de l'icône */
}

/* Icônes Material Design actives en mode replié - CENTRÉES */
.mini-sidebar .sidebar .sidebar-menu ul li.active a .material-icons,
.mini-sidebar .sidebar .sidebar-menu ul li a.active .material-icons {
    color: #ff6900 !important; /* Couleur orange pour les éléments actifs */
    margin-left: 0 !important; /* Pas de marge pour rester centré */
}

.mini-sidebar .sidebar .sidebar-menu .menu-title {
    display: none; /* Cacher les titres de section en mode replié */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Correction de l'alignement des icônes Material Design actives en mode replié */
.mini-sidebar .sidebar .sidebar-menu ul li.active a,
.mini-sidebar .sidebar .sidebar-menu ul li a.active {
    padding-left: 16px !important; /* Padding réduit pour centrer avec la bordure */
    border-left: 4px solid #ff6900 !important;
}

/* SUPPRIMÉ : Styles en double qui causaient des conflits */

.mini-sidebar .sidebar .sidebar-menu ul li a .menu-arrow {
    display: none; /* Pas de flèches car pas de sous-menus pliables */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* État au survol : sidebar dépliée temporairement - MAINTENANT TOUJOURS DÉPLIÉE */
.mini-sidebar.expand-menu .sidebar {
    width: 247px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a span {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.mini-sidebar.expand-menu .sidebar .sidebar-menu .menu-title {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Correction de l'alignement des icônes Material Design actives en mode déplié */
.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li.active a,
.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a.active {
    padding-left: 20px !important; /* Padding normal sans compensation de bordure */
    border-left: 4px solid #ff6900 !important;
}

.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li.active a .material-icons,
.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a.active .material-icons {
    margin-left: 0 !important; /* Icônes alignées normalement */
    color: #ff6900 !important;
}

/* Icônes Material Design en mode déplié */
.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a .material-icons {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 0 !important;
    font-size: 20px !important;
    color: #757575 !important; /* Couleur par défaut */
    transition: all 0.3s ease;
}

/* Icônes Material Design actives en mode déplié */
.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li.active a .material-icons,
.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a.active .material-icons {
    color: #ff6900 !important; /* Couleur orange pour les éléments actifs */
    margin-left: 0 !important;
}

.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a .menu-arrow {
    display: none; /* Pas de flèches car pas de sous-menus pliables */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Ajustement du contenu principal - MODE REPLIÉ PAR DÉFAUT */
.mini-sidebar .page-wrapper {
    margin-left: 80px; /* Marge réduite en mode replié */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-sidebar.expand-menu .page-wrapper {
    margin-left: 247px; /* Marge complète quand dépliée */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ajustement du header - MODE REPLIÉ PAR DÉFAUT */
.mini-sidebar .header-left {
    width: 80px; /* Largeur réduite en mode replié */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-sidebar.expand-menu .header-left {
    width: 247px; /* Largeur complète quand dépliée */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optimisation des transitions */
.sidebar * {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Amélioration de l'expérience utilisateur */
.mini-sidebar .sidebar:hover {
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
}

/* Gestion des sous-menus - TOUS VISIBLES EN PERMANENCE */
.mini-sidebar .sidebar .sidebar-menu ul li.submenu ul,
.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li.submenu ul {
    display: block !important;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
}

/* Animation des icônes Material Design */
.mini-sidebar .sidebar .sidebar-menu ul li a .material-icons {
    transform: scale(1);
    transition: transform 0.2s ease;
}

.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a .material-icons {
    transform: scale(1);
    transition: transform 0.2s ease;
}

/* Hover sur les éléments de menu avec icônes Material Design */
.mini-sidebar .sidebar .sidebar-menu ul li a:hover .material-icons {
    transform: scale(1.1);
}

/* Gestion des badges et notifications */
.mini-sidebar .sidebar .sidebar-menu ul li a .badge {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a .badge {
    display: inline-block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Responsive */
@media (max-width: 991px) {
    .mini-sidebar .sidebar {
        margin-left: -575px;
        transition: margin-left 0.4s ease;
    }
    
    .mini-sidebar.expand-menu .sidebar {
        margin-left: 0;
        transition: margin-left 0.4s ease;
    }
    
    .mini-sidebar .page-wrapper {
        margin-left: 0;
        transition: margin-left 0.4s ease;
    }
    
    .mini-sidebar.expand-menu .page-wrapper {
        margin-left: 0;
        transition: margin-left 0.4s ease;
    }
}

/* Animations personnalisées */
.sidebar-animations .sidebar {
    animation: sidebarSlideIn 0.3s ease-out;
}

@keyframes sidebarSlideIn {
    from {
        transform: translateX(-10px);
        opacity: 0.9;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Amélioration de la lisibilité */
.mini-sidebar .sidebar .sidebar-menu ul li a {
    position: relative;
    overflow: hidden;
}

.mini-sidebar .sidebar .sidebar-menu ul li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(255, 105, 0, 0.1), transparent);
    transition: width 0.3s ease;
}

.mini-sidebar .sidebar .sidebar-menu ul li a:hover::before {
    width: 100%;
}

/* Gestion des états actifs */
.mini-sidebar .sidebar .sidebar-menu ul li.active a {
    background: linear-gradient(90deg, rgba(255, 105, 0, 0.1), transparent);
}

.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li.active a {
    background: linear-gradient(90deg, rgba(255, 105, 0, 0.1), transparent);
}

/* Amélioration de l'accessibilité */
.mini-sidebar .sidebar .sidebar-menu ul li a:focus {
    outline: 2px solid rgba(255, 105, 0, 0.5);
    outline-offset: -2px;
}

/* Transition pour le toggle button */
#toggle_btn {
    transition: all 0.3s ease;
}

#toggle_btn:hover {
    transform: scale(1.1);
    background-color: rgba(255, 105, 0, 0.1);
}

/* Gestion des tooltips en mode replié */
.mini-sidebar .sidebar .sidebar-menu ul li a[title] {
    position: relative;
}

.mini-sidebar .sidebar .sidebar-menu ul li a[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-left: 10px;
}