/* 
 * Styles pour le menu de navigation en bas de l'application Order Prep
 */

/* Variables globales de mise en page (hauteur du menu + safe area iOS) */
:root {
    --order-prep-nav-height: 60px;
    --order-prep-safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Hauteur totale réellement occupée par le menu du bas, encoche/home indicator inclus */
    --order-prep-nav-total: calc(var(--order-prep-nav-height) + var(--order-prep-safe-bottom));
}

/* Menu de navigation fixe en bas */
.order-prep-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /*
     * La hauteur n'est jamais ecrite : elle est la somme de ce qu'il y a
     * dedans.
     *
     * Les deux tentatives precedentes l'ecrivaient -- « 60px » en content-box,
     * puis « calc(60px + safe) » -- et se disputaient le box-sizing avec
     * order-prep.css, qui le force a border-box sur tout ce que contient
     * l'application avec la meme specificite. Sur iPhone et iPad, c'est
     * order-prep.css qui gagnait : la reserve du bas rentrait DANS les soixante
     * pixels au lieu de s'y ajouter, le menu restait haut de soixante quand
     * tout le reste de l'application comptait sur soixante-dix-neuf, et les
     * icones passaient sous la barre d'accueil.
     *
     * « height: auto » se comporte pareil dans les deux modeles : le
     * rembourrage s'ajoute toujours a la hauteur du contenu. La dispute n'a
     * donc plus d'objet. Les soixante pixels sont portes par la rangee
     * d'icones, la reserve du bas par le rembourrage, et le total vaut bien
     * --order-prep-nav-total, sur quoi se cale tout le reste.
     */
    height: auto !important;
    min-height: 0 !important;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrer le contenu horizontalement */
    /* Repere de positionnement du logo, sorti du flux juste au-dessous. */
    position: fixed;
    padding: 0 10px var(--order-prep-safe-bottom, 0px);
    z-index: 500;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

/* Logo du site dans le menu */
.bottom-nav-logo {
    /* Hors du flux : place dans la ligne, le logo poussait les cinq entrees vers
       la droite et le menu paraissait decentre, la derniere entree collee au
       bord. Les entrees se repartissent maintenant sur toute la largeur, sans
       savoir qu'il est la. */
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    max-width: 80px;
    display: flex;
    align-items: center;
}

.bottom-nav-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Conteneur des icônes de navigation */
.bottom-nav-items {
    display: flex;
    align-items: center;
    /* C'est cette rangee qui porte la hauteur du menu, desormais. */
    height: var(--order-prep-nav-height);
    /* Chaque entree recoit la meme largeur (voir .bottom-nav-item plus bas), donc
       le meme espace : `space-around` laissait des marges inegales aux deux
       extremites et un ecart variable selon la longueur des libelles. */
    justify-content: stretch;
    gap: 0;
    width: 100%;
    max-width: 500px;
}

/* Icônes de navigation */
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Meme largeur pour chacune, quelle que soit la longueur du libelle :
       « Statistiques » ne doit pas prendre plus de place que « SAV ». */
    flex: 1 1 0;
    min-width: 0;
    text-decoration: none;
    color: #666;
    font-size: 10px;
    padding: 6px 10px;
    position: relative;
    transition: color 0.2s ease;
}

.bottom-nav-item:hover, 
.bottom-nav-item.active {
    color: var(--op-ink);
}

.bottom-nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * La pastille de notification se cale sur l'icone, et non sur l'entree
     * entiere.
     *
     * Sans ce reperage, elle remontait jusqu'a « .bottom-nav-item », dont la
     * largeur depend du nombre d'entrees affichees : un preparateur qui n'a que
     * trois menus voyait sa pastille a trente pixels de l'icone, detachee du
     * bouton, la ou elle n'en est qu'a cinq avec les cinq menus.
     */
    position: relative;
}

.bottom-nav-icon svg {
    width: 100%;
    height: 100%;
}

.bottom-nav-label {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

/* Indicateur de notification */
.nav-notification {
    position: absolute;
    /* Adossee au coin de l'icone, qu'elle deborde legerement : c'est ainsi
       qu'on lit une pastille de notification, posee sur ce qu'elle compte. */
    top: -6px;
    right: -8px;
    /* Le compteur est écrit à l'intérieur (templates/bottom-nav.php) :
       une pastille de 8px sans font-size faisait déborder le chiffre sur l'icône. */
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background-color: #ff5252;
    border-radius: 8px;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

/* Responsive styles */
@media (max-width: 480px) {
    .bottom-nav-logo {
        max-width: 60px;
        margin-right: 15px;
    }
    
    .bottom-nav-items {
        gap: 10px; /* Réduire l'espacement sur petits écrans */
    }
    
    .bottom-nav-item {
        padding: 6px;
    }
    
    .bottom-nav-label {
        font-size: 9px;
    }
}

@media (max-width: 360px) {
    .bottom-nav-logo {
        max-width: 50px;
        margin-right: 10px;
    }
    
    .bottom-nav-items {
        gap: 8px; /* Espacement minimal sur très petits écrans */
    }
    
    .bottom-nav-item {
        padding: 6px 4px;
    }
    
    .bottom-nav-label {
        display: none; /* Masquer les labels sur très petits écrans */
    }
    
    .bottom-nav-icon {
        margin-bottom: 0;
    }
}