/* Barre de navigation principale (templates/_partials/_navbar.html.twig).
   Couleurs = charte Coveto (variables de perso.css), avec valeurs de secours. */

.app-navbar {
    /* 1030 (= fixed Bootstrap) : le menu profil doit passer au-dessus des barres sticky des pages
       (ex. .order-toolbar du catalogue en 1020), mais sous les offcanvas / modales (1045+). */
    position: relative;
    z-index: 1030;
    background-color: var(--couleur-bleu, #afceee);
    min-height: 52px;
    padding-top: .25rem;
    padding-bottom: .25rem;
    color: var(--couleur-marron, #310c1a);
    /* Ombre douce teintee marron (plutot que noire) : adoucit la transition bleu -> fond beige */
    box-shadow: 0 2px 4px rgba(var(--couleur-marron_rgb, 49, 12, 26), .06),
                0 6px 16px rgba(var(--couleur-marron_rgb, 49, 12, 26), .08);
}

.app-navbar-brand,
.app-navbar-brand:hover,
.app-navbar-brand:focus {
    color: var(--couleur-marron, #310c1a);
    font-weight: 700;
    padding-top: 0;
    padding-bottom: 0;
}

/* Badge d'environnement en exposant, dans le coin haut droit du nom */
.app-navbar-brand-name {
    position: relative;
    padding-right: 1.6rem;
}

.app-navbar-env {
    position: absolute;
    top: -.45rem;
    right: 0;
    color: var(--couleur-orange, #e84c1f);
    border: 1px solid var(--couleur-orange);
    font-size: 9px;
    padding: .2em .45em;
}

.app-navbar-toggler {
    border: 0;
    color: var(--couleur-marron, #310c1a);
}

.app-navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(var(--couleur-marron_rgb, 49, 12, 26), .25);
}

/* Onglets : sans fond, l'onglet actif passe en orange et est souligne */
.app-navbar .navbar-nav .nav-link {
    position: relative;
    color: var(--couleur-marron, #310c1a);
    font-weight: 600;
    font-size: .9rem;
    padding: .35rem 1rem;
    transition: color .15s ease;
}

/* Soulignement : trait sous le libelle (largeur du texte, hors padding) */
.app-navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background-color: var(--couleur-orange, #e84c1f);
    transform: scaleX(0);
    transition: transform .15s ease;
}

.app-navbar .navbar-nav .nav-link:hover,
.app-navbar .navbar-nav .nav-link:focus-visible,
.app-navbar .navbar-nav .nav-link.active {
    color: var(--couleur-orange, #e84c1f);
}

.app-navbar .navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

/* Menu profil */
.app-navbar-profile-toggle {
    color: var(--couleur-marron, #310c1a);
    border: 0;
    border-radius: 999px;
    padding: .3rem .65rem;
    font-size: 1.1rem;
}

.app-navbar-profile-toggle:hover,
.app-navbar-profile-toggle:focus-visible,
.app-navbar-profile-toggle[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, .45);
    color: var(--couleur-marron, #310c1a);
}

/* Icone utilisateur sobre (en-tete du menu profil, page profil) */
.app-navbar-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--couleur-beige, #f6f0e9);
    color: var(--couleur-marron, #310c1a);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.app-navbar-profile-menu {
    width: 280px;
    border-radius: .75rem;
    overflow: hidden;
    margin-top: .5rem !important;
}

.app-navbar-profile-menu .dropdown-item {
    color: var(--couleur-marron, #310c1a);
    padding: .5rem 1rem;
}

.app-navbar-profile-menu .dropdown-item:hover,
.app-navbar-profile-menu .dropdown-item:focus {
    background-color: var(--couleur-beige, #f6f0e9);
    color: var(--couleur-orange, #e84c1f);
}

.app-navbar-profile-menu .dropdown-item.active {
    background-color: var(--couleur-beige, #f6f0e9);
    color: var(--couleur-orange, #e84c1f);
    font-weight: 600;
}

.app-navbar-logout {
    color: var(--couleur-orange, #e84c1f);
    border: 1px solid var(--couleur-orange, #e84c1f);
    background-color: #fff;
    font-weight: 600;
}

.app-navbar-logout:hover,
.app-navbar-logout:focus-visible {
    background-color: var(--couleur-orange, #e84c1f);
    border-color: var(--couleur-orange, #e84c1f);
    color: #fff;
}

.app-navbar-legal,
.app-navbar-legal a {
    color: #6c757d;
    font-size: .75rem;
    text-decoration: none;
}

.app-navbar-legal a:hover {
    color: var(--couleur-orange, #e84c1f);
    text-decoration: underline;
}

/* Mobile / tablette : les onglets se deplient sous la barre */
@media (max-width: 991.98px) {
    .app-navbar .navbar-collapse {
        padding: .25rem 0 .5rem;
    }

    /* Liens en pleine largeur dans le menu replie : le soulignement doit rester a la taille du texte */
    .app-navbar .navbar-nav .nav-link {
        display: inline-block;
    }
}

/* Mobile / tablette : burger, logo et profil tiennent sur une seule ligne. Base de flex a 0 (et non
   "auto") : la barre passe a la ligne sous lg pour le menu deplie, le profil doit rester a cote du logo. */
@media (max-width: 991.98px) {
    .app-navbar-actions {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-end;
    }
}

/* Ecrans moyens (992 a 1400 px) : la barre est depliee mais etroite. Liens plus serres, libelles sur une
   ligne (sinon l'icone passe au-dessus du texte et la barre double de hauteur), pour que les onglets
   (Commander, Panier, Historique, Inventaire, Administration) tiennent avec le profil. */
@media (min-width: 992px) {
    .app-navbar .navbar-nav .nav-link {
        white-space: nowrap;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .app-navbar .navbar-nav .nav-link {
        padding-inline: .55rem;
    }

    .app-navbar .navbar-nav .nav-link::after {
        left: .55rem;
        right: .55rem;
    }
}

/* 992 a 1200 px : libelles seuls, sans icone (place gagnee pour un onglet de plus) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .app-navbar .navbar-nav .nav-link > i {
        display: none;
    }
}