/* Styles pour les sous-menus de la barre latérale */

/* Variables (reprenant celles que vous avez fournies pour la cohérence) */
:root {
    --primary-color: #2563eb;
    --secondary-color: #4f46e5;
    --text-color: #334155;
    --text-light: #64748b; /* Ajout d'une couleur de texte plus claire */
    --bg-light: #f8fafc;
    --border-color: #e2e8f0;
    --hover-bg: #f1f5f9; /* Fond léger pour le survol */
}

/* --- Styles pour le deuxième niveau (nav-second-level) --- */

/* Conteneur du sous-menu (si besoin de styles spécifiques au conteneur ul) */
#side-menu .nav-second-level,
#setup-menu .nav-second-level {
    padding-left: 0; /* Réinitialise le padding par défaut de la liste */
    list-style: none; /* Supprime les puces par défaut */
    margin-top: 5px; /* Petit espace après le lien parent */
    margin-bottom: 5px;
}

/* Style général des liens de deuxième niveau */
#side-menu .nav-second-level li a,
#setup-menu .nav-second-level li a {
    display: block; /* Pour que le padding et le background s'appliquent correctement */
    padding: 8px 20px 8px 40px; /* Indentation accrue (plus de padding-left) */
    color: var(--text-light); /* Couleur de texte un peu plus claire */
    font-size: 0.9em; /* Légèrement plus petit */
    border-radius: 6px; /* Arrondi plus petit */
    margin: 2px 8px; /* Marge légèrement réduite */
    position: relative; /* Pour le pseudo-élément */
    transition: all 0.15s ease-in-out; /* Transition plus rapide */
}

/* Indicateur visuel (optionnel, exemple avec un tiret) */
#side-menu .nav-second-level li a::before,
#setup-menu .nav-second-level li a::before {
    content: "-"; /* Ou '\2022' pour un point, etc. */
    position: absolute;
    left: 25px; /* Positionnement avant le texte, après l'icône parente */
    top: 50%;
    transform: translateY(-50%);
    color: var(--border-color); /* Couleur discrète */
    font-weight: bold;
}

/* Style au survol (hover) pour le deuxième niveau */
#side-menu .nav-second-level li a:hover,
#setup-menu .nav-second-level li a:hover {
    background-color: var(--hover-bg); /* Fond léger au survol */
    color: var(--primary-color); /* Couleur primaire pour le texte */
}

/* Style pour l'élément actif (active) du deuxième niveau */
#side-menu .nav-second-level li.active > a,
#setup-menu .nav-second-level li.active > a {
    color: var(--primary-color); /* Couleur primaire pour le texte */
    font-weight: 500; /* Texte légèrement en gras */
    background-color: transparent; /* Pas de fond spécifique par défaut pour l'actif, sauf si désiré */
}

/* Style spécifique si l'élément actif est aussi survolé */
#side-menu .nav-second-level li.active > a:hover,
#setup-menu .nav-second-level li.active > a:hover {
    background-color: var(--hover-bg); /* Garde le fond du survol */
}


/* --- Styles pour le troisième niveau (nav-third-level) --- */

/* Conteneur du sous-menu de troisième niveau */
#side-menu .nav-third-level,
#setup-menu .nav-third-level {
    padding-left: 0;
    list-style: none;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Style général des liens de troisième niveau */
#side-menu .nav-third-level li a,
#setup-menu .nav-third-level li a {
    padding: 6px 20px 6px 55px; /* Indentation encore plus grande */
    color: var(--text-light);
    font-size: 0.85em; /* Encore plus petit */
    border-radius: 4px;
    margin: 1px 8px;
    position: relative;
    transition: all 0.15s ease-in-out;
}

/* Indicateur visuel (optionnel, exemple avec un point) */
#side-menu .nav-third-level li a::before,
#setup-menu .nav-third-level li a::before {
    content: "\2022"; /* Point */
    position: absolute;
    left: 40px; /* Plus indenté */
    top: 50%;
    transform: translateY(-50%);
    color: var(--border-color);
    font-size: 0.8em; /* Petit point */
}

/* Style au survol (hover) pour le troisième niveau */
#side-menu .nav-third-level li a:hover,
#setup-menu .nav-third-level li a:hover {
    background-color: var(--hover-bg);
    color: var(--primary-color);
}

/* Style pour l'élément actif (active) du troisième niveau */
#side-menu .nav-third-level li.active > a,
#setup-menu .nav-third-level li.active > a {
    color: var(--primary-color);
    font-weight: 500;
    background-color: transparent;
}

/* Style spécifique si l'élément actif est aussi survolé */
#side-menu .nav-third-level li.active > a:hover,
#setup-menu .nav-third-level li.active > a:hover {
    background-color: var(--hover-bg);
}