/* Navigation par onglets */

/* Navigation par onglets */
.nav-tabs {
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    color: var(--gray-700); /* Texte clair sur fond sombre */
}

/* Assurer que tous les éléments de texte dans la navigation ont une couleur appropriée */
.nav-tabs * {
    color: inherit;
}

.tab-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xs);
    padding: var(--spacing-md) var(--spacing-sm);
    background: none;
    border: none;
    color: var(--gray-400); /* Texte secondaire sur fond sombre */
    font-size: var(--text-2xs);
    font-weight: var(--font-medium);
    transition: background var(--transition-fast), color var(--transition-fast);
    position: relative;
    border-radius: 0;
}

.tab-btn:hover {
    color: var(--primary);
    background: var(--gray-200);
}

.tab-btn.active {
    color: white;
    background: var(--gradient-primary-soft-muted);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: white;
    border-radius: 2px;
}

.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    transition: transform var(--transition-fast);
}

.tab-icon .ui-icon {
    width: 100%;
    height: 100%;
}

.tab-btn:hover .tab-icon {
    transform: scale(1.1);
}

@media (max-width: 720px) {
    /* Sur mobile la barre passe à la ligne au lieu de défiler horizontalement :
       en mode authentifié (9 onglets) la bande dépassait la largeur de l'écran
       et les derniers onglets (dont Stats) restaient hors champ, sans barre de
       défilement visible pour signaler qu'il fallait faire glisser. */
    .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        overflow-x: hidden;
    }

    .tab-btn {
        flex: 1 0 20%;
        width: auto;
        min-width: 60px;
        padding: var(--spacing-xs) var(--spacing-2xs);
    }

    .nav-tabs.nav-tabs-compact .tab-btn:not([hidden]) {
        flex: 1 1 0;
        min-width: 0;
    }

    .tab-label {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }
}