/* Custom active tab indicator from static design */
/* .tab-nav.active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    height: 6px;
    background-color: #ACD563;
    border-radius: 6px 6px 0 0;
} */
.tab-nav.active {
    background-color: #ACD563;
    border-radius: 6px 6px 0 0;

}
.tab-nav:hover{
    background-color: #EBF6D1;
    border-radius: 6px 6px 0 0;
}

/* Tooltip Styles - Modern, Responsive, and Accessible */
.tab-nav {
    position: relative;
}

/* Tooltip container - hidden by default, shown via JS */
.tab-nav[data-tooltip] .tooltip-container {
    position: fixed;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: opacity, transform, visibility;
}

.tab-nav[data-tooltip]:hover .tooltip-container,
.tab-nav[data-tooltip]:focus .tooltip-container,
.tab-nav[data-tooltip]:active .tooltip-container {
    opacity: 1;
    visibility: visible;
}

.tab-nav[data-tooltip] .tooltip-box {
    /* White background with black text - matching frontend */
    background: #ffffff;
    color: #000000;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    /* Allow text wrapping */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: calc(100vw - 40px);
    width: max-content;
    text-align: center;
    /* Subtle shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Better text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 7px;
}

.tab-nav[data-tooltip] .tooltip-arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ffffff;
    margin: 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Mobile (Portrait) - 320px to 480px */
@media (max-width: 480px) {
    .tab-nav[data-tooltip] .tooltip-box {
        font-size: 11px;
        padding: 6px 10px;
        max-width: calc(100vw - 30px);
        border-radius: 4px;
        line-height: 1.4;
    }
    
    .tab-nav[data-tooltip] .tooltip-arrow {
        border-left-width: 5px;
        border-right-width: 5px;
        border-top-width: 5px;
    }
}

/* Mobile (Landscape) & Small Tablets - 481px to 768px */
@media (min-width: 481px) and (max-width: 768px) {
    .tab-nav[data-tooltip] .tooltip-box {
        font-size: 12px;
        padding: 7px 11px;
        max-width: calc(100vw - 50px);
        border-radius: 5px;
    }
}

/* Tablets & Small Desktops - 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .tab-nav[data-tooltip] .tooltip-box {
        font-size: 12px;
        padding: 8px 12px;
        max-width: 280px;
    }
}

/* Large Desktops - 1025px and above */
@media (min-width: 1025px) {
    .tab-nav[data-tooltip] .tooltip-box {
        font-size: 12px;
        padding: 8px 12px;
        max-width: 300px;
    }
}

/* Extra Large Desktops - 1440px and above */
@media (min-width: 1440px) {
    .tab-nav[data-tooltip] .tooltip-box {
        font-size: 13px;
        padding: 8px 12px;
        max-width: 320px;
    }
    
    .tab-nav[data-tooltip] .tooltip-arrow {
        border-left-width: 7px;
        border-right-width: 7px;
        border-top-width: 7px;
    }
}

/* ========================================
   RTL SUPPORT
   ======================================== */
[dir="rtl"] .tab-nav[data-tooltip] .tooltip-box {
    font-family: var(--font-primary, 'Sharjah Government', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    direction: rtl;
    text-align: center;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .tab-nav[data-tooltip] .tooltip-container {
        transition: opacity 0.1s, visibility 0.1s;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tab-nav[data-tooltip] .tooltip-box {
        border: 2px solid #000000;
        background: #ffffff;
        color: #000000;
    }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap target area for mobile */
    .tab-nav[data-tooltip] {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ========================================
   TABS CONTAINER - RESPONSIVE SPACING
   ======================================== */

/* CRITICAL: Ensure parent containers allow tooltip overflow */
.auth-modal-container {
    overflow: visible !important;
}

.auth-modal-content {
    overflow: visible !important;
}

/* Ensure ALL ancestor divs of tabs allow overflow */
.auth-modal-content > div,
.auth-modal-content > div > div {
    overflow: visible !important;
}

/* Ensure tooltip container has space above to prevent clipping */
.tabs-container {
    padding-top: 80px;
    margin-top: -80px;
    overflow-x: auto;
    overflow-y: visible !important;
    position: relative;
    /* Smooth scrolling for mobile */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Create a new stacking context for tooltips */
    isolation: isolate;
}

/* Mobile - Less padding needed */
@media (max-width: 480px) {
    .tabs-container {
        padding-top: 70px;
        margin-top: -70px;
    }
}

/* Tablets and up - More padding for larger tooltips */
@media (min-width: 1025px) {
    .tabs-container {
        padding-top: 90px;
        margin-top: -90px;
    }
}

/* Large screens - Maximum padding */
@media (min-width: 1440px) {
    .tabs-container {
        padding-top: 100px;
        margin-top: -100px;
    }
}

/* Hide scrollbar for cleaner look while maintaining functionality */
.tabs-container::-webkit-scrollbar {
    height: 3px;
}

.tabs-container::-webkit-scrollbar-track {
    background: transparent;
}

.tabs-container::-webkit-scrollbar-thumb {
    background: rgba(32, 54, 105, 0.2);
    border-radius: 3px;
}

.tabs-container::-webkit-scrollbar-thumb:hover {
    background: rgba(32, 54, 105, 0.3);
}