/* Tabs Component Mobile-First Styles */

/* Hide scrollbar for tabs navigation on mobile */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* Smooth scrolling for tabs */
[data-tabs-container] nav {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Ensure tab buttons don't shrink on mobile */
[data-tabs-container] button[data-tab-button] {
    flex-shrink: 0;
}

/* Sticky tabs animation */
[data-tabs-container] nav.sticky {
    transition: box-shadow 0.3s ease;
}

/* Tab content animation with opacity transition */
[data-tab-content] {
    transition: opacity 0.3s ease-in-out;
}

[data-tab-content].hidden {
    display: none;
}

/* Accessibility: Focus states */
[data-tab-button]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Mobile: Improve touch targets */
@media (max-width: 768px) {
    [data-tab-button] {
        min-height: 44px; /* iOS recommended minimum touch target */
        min-width: 44px;
    }
    
    /* Sur mobile, afficher seulement les icônes si espace limité */
    .tab-label {
        font-size: 0.75rem;
    }
    
    /* Ajuster l'espacement */
    [data-tabs-container] nav {
        gap: 0.25rem;
        padding: 0.375rem;
    }
}

/* Desktop: Add hover effects */
@media (min-width: 769px) {
    [data-tab-button]:hover {
        transform: translateY(-1px);
    }

    [data-tab-button]:active {
        transform: translateY(0);
    }
    
    .tab-label {
        font-size: 0.875rem;
    }
}

/* Fix for sticky positioning on iOS */
@supports (position: -webkit-sticky) {
    [data-tabs-container] nav.sticky {
        position: -webkit-sticky;
    }
}

/* Snap scrolling for better UX on mobile */
@media (max-width: 768px) {
    [data-tabs-container] nav {
        scroll-snap-type: x mandatory;
        scroll-padding: 0.5rem;
    }
    
    [data-tab-button] {
        scroll-snap-align: center;
        scroll-snap-stop: normal;
    }
}

/* Animation pour le changement d'onglet actif */
.tab-button {
    position: relative;
}

.tab-button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

@media (min-width: 769px) {
    .tab-button:hover::after {
        width: 80%;
    }
}