/* assets/css/navbar.css */

/* ----------------------------------------------------- */
/* Variables et Styles de Base */
/* ----------------------------------------------------- */
:root {
    /* --- IMPORTANT : Ajustez ces valeurs --- */
    /* Mesurez la hauteur réelle de votre navbar une fois stylée */
    --navbar-height-desktop: 60px; /* Hauteur approx. sur grand écran */
    --navbar-height-mobile: 70px;  /* Hauteur approx. sur petit écran (logo plus grand) */
    /* --- Fin des ajustements --- */
}

body {
    /* Ajoute l'espace nécessaire en haut pour la navbar fixe */
    padding-top: var(--navbar-height-mobile); /* Hauteur mobile par défaut */
    background-color: #f8f9fa; /* Juste pour la visibilité du contenu */
}

@media (min-width: 992px) { /* Point de rupture 'lg' de Bootstrap */
    body {
        padding-top: var(--navbar-height-desktop); /* Applique hauteur desktop */
    }
}

.navbar {
    /* Bootstrap gère déjà le fond via bg-white, shadow via shadow-sm */
    /* Assure la hauteur minimale définie */
    min-height: var(--navbar-height-desktop);
    /* La direction RTL est définie dans le HTML, pas besoin ici */
    /* transition: min-height 0.2s ease-in-out; */ /* Optionnel: transition douce si la hauteur change brusquement */
}

@media (max-width: 991.98px) { /* En dessous du point de rupture 'lg' */
    .navbar {
        min-height: var(--navbar-height-mobile); /* Applique hauteur mobile */
    }
}

/* ----------------------------------------------------- */
/* Styles du Logo */
/* ----------------------------------------------------- */
.navbar-brand img {
    max-height: 35px; /* Taille max logo sur desktop */
    vertical-align: middle; /* Bon alignement */
    transition: max-height 0.2s ease-in-out; /* Animation si taille change */
}

@media (max-width: 991.98px) {
    .navbar-brand img {
        max-height: 45px; /* Taille max logo sur mobile (peut être plus grand) */
    }
}

/* ----------------------------------------------------- */
/* Styles des Icônes et Liens de Navigation */
/* ----------------------------------------------------- */
.nav-link {
    display: flex; /* Permet un meilleur contrôle de l'alignement interne */
    align-items: center; /* Centre verticalement icône/texte */
    white-space: nowrap; /* Empêche le texte de passer à la ligne (surtout sur mobile) */
}

/* Style commun pour les icônes d'action */
.nav-link .nav-icon {
    height: 24px;
    width: 24px;
    object-fit: contain; /* Assure que l'icône est visible sans déformation */
    vertical-align: middle; /* Redondant avec flex align-items, mais sans danger */
    margin-left: 8px; /* Espace à GAUCHE de l'icône (entre icône et texte en RTL) */
}

/* Style spécifique pour la photo de profil */
.nav-link .profile-pic {
    height: 30px;
    width: 30px;
    object-fit: cover; /* Recadre l'image pour remplir le cercle */
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 8px; /* Espace cohérent */
}

/* Style pour le texte qui apparaît seulement sur mobile (dans le menu collapse) */
.nav-link .mobile-text {
    vertical-align: middle;
}

/* ----------------------------------------------------- */
/* Indicateur de Notification */
/* ----------------------------------------------------- */
.notification-indicator {
    position: relative; /* Nécessaire pour positionner ::after */
}

.notification-indicator::after {
    content: '';
    position: absolute;
    width: 9px;  /* Légèrement plus visible */
    height: 9px;
    background-color: red;
    border-radius: 50%;
    border: 1.5px solid white; /* Bordure plus nette */
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1); /* Optionnel: légère ombre externe */

    /* Positionnement: près du coin supérieur DROIT VISUEL de l'icône */
    /* En RTL, l'icône est à droite du texte. 'right' est la fin logique (gauche visuelle) */
    /* 'left' est le début logique (droite visuelle) */
    top: 0px; /* Ajuster finement */
    left: 1px; /* Ajuster finement - positionne par rapport au bord droit visuel du conteneur .nav-link */
}

/* ----------------------------------------------------- */
/* Styles pour le Menu Collapsé (Mobile/Tablette) */
/* ----------------------------------------------------- */

    .navbar-nav {
        width: 100%; /* Prend toute la largeur disponible */
        align-items: flex-end; /* Aligne les items à droite (début en RTL) */
    }

    .nav-item {
        width: 100%; /* Chaque item prend toute la largeur */
        text-align: right; /* Texte aligné à droite */
        margin-bottom: 0.25rem; /* Espace réduit entre les items */
    }

    .nav-link {
        /* Utilise les classes Bootstrap mais on peut ajuster le padding si besoin */
        padding: 0.5rem 1rem; /* Padding pour les liens mobiles */
        justify-content: flex-end; /* Aligne icône+texte à droite DANS le lien */
        width: 100%; /* Assure que le lien remplit le nav-item */
    }

    /* Ajustement position notif sur mobile */
    .notification-indicator::after {
        top: 6px; /* Ajuster verticalement pour le padding du lien mobile */
        /* 'left: 1px' devrait toujours fonctionner car relatif au bord droit visuel du lien */
         left: 3px; /* Un peu plus décalé */
    }

    /* Assurer que le dropdown mobile s'affiche correctement */
    .navbar-nav .dropdown-menu {
        /* Bootstrap devrait gérer ça, mais au cas où : */
         position: static !important; /* Empêche le positionnement absolu dans le collapse */
         float: none !important;
         width: auto !important;
         margin-top: 0 !important;
         background-color: transparent !important;
         border: 0 !important;
         box-shadow: none !important;
    }
     .navbar-nav .dropdown-item {
         padding-right: 1.5rem; /* Indentation pour les items de dropdown */
         color: #212529; /* Assurer la lisibilité */
     }
     .navbar-nav .dropdown-item:hover,
     .navbar-nav .dropdown-item:focus {
        background-color: #e9ecef; /* Léger fond au survol */
     }

    /* Barre de recherche dans le collapse */
    .navbar-collapse .search-form-container {
        margin-top: 0.5rem; /* Espace au-dessus */
        margin-bottom: 0.5rem; /* Espace en-dessous */
        width: 100%; /* Prend toute la largeur */
        padding: 0 1rem; /* Aligner avec le padding des liens */
    }
    .navbar-collapse .search-form {
        width: 100%; /* Le formulaire prend toute la largeur du conteneur */
    }

/* ----------------------------------------------------- */
/* Barre de Recherche (Desktop) */
/* ----------------------------------------------------- */
/* Pas besoin de style spécifique si les classes Bootstrap suffisent */
/* .search-form { */
    /* min-width: 200px; */ /* Déjà dans le HTML */
/* } */

/* Optionnel: Cacher le texte du bouton recherche sur très petits écrans si on l'ajoute */
/* .search-form .btn .search-text { display: none; } */
/* @media (min-width: 576px) { .search-form .btn .search-text { display: inline; } } */


/* ----------------------------------------------------- */
/* Bouton Toggler (Hamburger) */
/* ----------------------------------------------------- */
.navbar-toggler {
    border: none; /* Pas de bordure */
    padding: 0.25rem 0.5rem; /* Ajuster le padding si nécessaire */
}
.navbar-toggler:focus {
    box-shadow: none; /* Pas d'ombre au focus */
    outline: none;
}
/* Pas besoin de redéfinir l'icône si celle de Bootstrap convient */