/* Mobile Navigation Tabs Styles */

/* Hide scrollbar while maintaining functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Tab scroll container with smooth scrolling */
.tab-scroll-container {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Mobile tab styles */
.mobile-tab {
    flex-shrink: 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    min-width: 88px;
    text-align: center;
    white-space: nowrap;
    position: relative;
}

/* Active mobile tab */
.mobile-tab.active {
    border-bottom-color: #ef4444; /* red-500 */
    background-color: #fef2f2; /* red-50 */
    color: #dc2626; /* red-600 */
}

.dark .mobile-tab.active {
    background-color: rgba(185, 28, 28, 0.2); /* red-900/20 */
    color: #f87171; /* red-400 */
}

/* Inactive mobile tab */
.mobile-tab:not(.active) {
    color: #4b5563; /* gray-600 */
}

.mobile-tab:not(.active):hover {
    color: #111827; /* gray-900 */
    background-color: #f9fafb; /* gray-50 */
}

.dark .mobile-tab:not(.active) {
    color: #9ca3af; /* gray-400 */
}

.dark .mobile-tab:not(.active):hover {
    color: #ffffff;
    background-color: #374151; /* gray-700 */
}

/* Scroll indicators for light theme */
.scroll-indicator-left,
.scroll-indicator-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.scroll-indicator-left {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
}

.scroll-indicator-right {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}

/* Scroll indicators for dark theme */
.dark .scroll-indicator-left {
    background: linear-gradient(to right, rgba(31,41,55,0.9), transparent);
}

.dark .scroll-indicator-right {
    background: linear-gradient(to left, rgba(31,41,55,0.9), transparent);
}

/* Enhanced touch targets for mobile */
@media (max-width: 768px) {
    .mobile-tab {
        min-height: 48px; /* Touch-friendly height */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Focus states for accessibility */
.mobile-tab:focus {
    outline: 2px solid #3b82f6; /* blue-500 */
    outline-offset: 2px;
}

/* Smooth animation for tab switching */
.tab-content-section {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure proper spacing in desktop view */
@media (min-width: 768px) {
    .desktop-tab:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }
}

/* Custom border-b-3 utility */
.border-b-3 {
    border-bottom-width: 3px;
}