/* 🎯 Tab Navigation Click Zone Fixes */

/* ========== Fix Tab Button Click Zones ========== */

/* Tab Navigation Container */
.tab-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    margin-bottom: 20px;
    position: relative;
    z-index: 100; /* Ensure tabs are above other content */
}

/* Tab Buttons - Better Click Targets */
.tab-btn {
    position: relative;
    padding: 12px 20px !important;
    min-height: 50px;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation; /* Better mobile support */
    transition: all 0.3s ease;
    overflow: visible; /* Allow effects to show */
    z-index: 1;
}

/* Ensure click area covers entire button */
.tab-btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    cursor: pointer;
}

/* Tab Icon and Text */
.tab-icon {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
    pointer-events: none; /* Prevent icon from blocking clicks */
}

.tab-text {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    pointer-events: none; /* Prevent text from blocking clicks */
}

/* Active Tab State */
.tab-btn.active {
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-pink));
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 0, 128, 0.3);
}

/* Hover State */
.tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 3px 15px rgba(255, 255, 255, 0.1);
}

/* Focus State for Keyboard Navigation */
.tab-btn:focus {
    outline: 2px solid var(--primary-cyan);
    outline-offset: 2px;
}

/* Disabled State */
.tab-btn:disabled,
.tab-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== Fix Tab Content Container ========== */

.tab-content {
    position: relative;
    min-height: 500px;
    padding: 20px;
    z-index: 1; /* Below navigation */
}

/* Prevent content from overlapping navigation */
.main-content {
    position: relative;
    z-index: 1;
}

/* ========== Mobile Responsiveness — Horizontal Scroll ========== */

@media (max-width: 768px) {
    /* Convert from wrapping rows to a single horizontal scroll strip */
    .tab-navigation {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;           /* Single row — no wrap */
        overflow-x: auto !important;            /* Scroll when > viewport */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* iOS momentum */
        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory;
        gap: 6px;
        padding: 8px !important;
        /* Hide scrollbar visually while keeping functionality */
        scrollbar-width: none !important;       /* Firefox */
        -ms-overflow-style: none !important;    /* IE/Edge */
    }

    .tab-navigation::-webkit-scrollbar {
        display: none !important;               /* Chrome/Safari */
    }

    .tab-btn {
        /* Don't use flex:1 1 auto — that causes buttons to stretch */
        flex: 0 0 auto !important;
        /* Release the 120px → 100px fixed min-width that multiplies to 1320px+ */
        min-width: unset !important;
        max-width: 90px;
        width: auto;
        /* Stack icon on top of label */
        flex-direction: column !important;
        gap: 2px !important;
        padding: 8px 10px !important;
        min-height: 52px !important;            /* Accessible touch target */
        font-size: 0.72rem !important;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .tab-icon {
        font-size: 1.05rem !important;
        display: inline-block !important;       /* Keep icon visible */
    }

    .tab-text {
        font-size: 0.65rem !important;
        display: block !important;
        text-align: center !important;
        line-height: 1.1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 80px !important;
    }
}

@media (max-width: 480px) {
    .tab-btn {
        max-width: 76px;
        padding: 7px 8px !important;
        min-height: 48px !important;
    }
}

@media (max-width: 375px) {
    .tab-btn {
        max-width: 68px;
        padding: 6px 7px !important;
    }

    .tab-text {
        font-size: 0.6rem !important;
    }
}

/* ========== Touch Device Optimizations ========== */

@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices — use active instead */
    .tab-btn:hover:not(.active) {
        background: transparent;
        transform: none;
        box-shadow: none;
    }

    /* Tactile press feedback */
    .tab-btn:active {
        transform: scale(0.96);
        transition: transform 0.08s;
        opacity: 0.85;
    }
}

/* ========== Loading State Fix ========== */

/* Prevent clicks during transition */
.tab-navigation.loading .tab-btn {
    pointer-events: none;
    opacity: 0.7;
}

/* Loading indicator */
.tab-navigation.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    cursor: wait;
}

/* ========== Z-Index Management ========== */

/* Ensure proper stacking order */
.tab-navigation { z-index: 100; }
.tab-content { z-index: 10; }
.loading-container { z-index: 5; }
.error-container { z-index: 5; }