/**
 * Autocomplete Z-Index and Positioning Fixes
 * Implements z-index hierarchy and positioning stability for search dropdowns
 * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5
 */

/* ===== Z-INDEX HIERARCHY SYSTEM ===== */
/* Cookie Banner: 99999 (highest priority) */
/* Autocomplete Dropdowns: 9999 */
/* Modal Overlays: 1060 */
/* Header: 1030 */
/* Regular Content: 1-100 */

/* ===== AUTOCOMPLETE DROPDOWN Z-INDEX FIXES ===== */

/* Header search results - maximum priority for autocomplete */
#header-search-results {
    z-index: 9999 !important;
    position: absolute !important;
    /* Create new stacking context to prevent parent interference */
    isolation: isolate;
    /* Ensure proper positioning */
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    /* Prevent clipping */
    overflow: visible !important;
    /* Hardware acceleration for smooth performance */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Main search results - same priority */
#search-results {
    z-index: 9999 !important;
    position: absolute !important;
    /* Create new stacking context */
    isolation: isolate;
    /* Ensure proper positioning */
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    /* Prevent clipping */
    overflow: visible !important;
    /* Hardware acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* ===== PARENT CONTAINER FIXES ===== */

/* Header search container - establish stacking context */
.header-search {
    position: relative !important;
    z-index: 1001 !important;
    /* Create isolated stacking context */
    isolation: isolate;
    /* Ensure overflow doesn't clip dropdown */
    overflow: visible !important;
}

/* Search form container - prevent clipping */
.parts-card {
    position: relative !important;
    z-index: 10 !important;
    /* Create isolated stacking context */
    isolation: isolate;
    /* Critical: allow dropdown to overflow */
    overflow: visible !important;
}

/* Parts search form - ensure proper positioning */
.parts-search {
    position: relative !important;
    /* Allow dropdown to overflow */
    overflow: visible !important;
}

/* Header container - prevent clipping */
.header {
    /* Allow search dropdown to overflow */
    overflow: visible !important;
}

/* Header wrapper - prevent clipping */
.container.header {
    /* Allow search dropdown to overflow */
    overflow: visible !important;
}

/* ===== TEMPLATE-SPECIFIC FIXES ===== */

/* Fix for base_lfb.html header structure */
header {
    /* Maintain sticky positioning but allow overflow */
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    /* Critical: allow autocomplete to overflow */
    overflow: visible !important;
}

/* Main content area - ensure proper stacking */
main {
    position: relative;
    z-index: 1;
}

/* ===== SCROLL STABILITY FIXES ===== */

/* Ensure dropdowns maintain position during scroll */
#header-search-results,
#search-results {
    /* Fixed positioning relative to viewport during scroll */
    position: fixed !important;
    /* Will be dynamically updated by JavaScript */
    top: auto;
    left: auto;
    /* Maintain width relative to input */
    width: auto;
    /* Smooth transitions */
    transition: none !important;
    /* Prevent layout shifts */
    contain: layout style paint;
}

/* When dropdown is shown, use absolute positioning */
#header-search-results.positioned,
#search-results.positioned {
    position: absolute !important;
}

/* ===== MOBILE AND TOUCH SUPPORT ===== */

/* Touch-friendly scrolling for autocomplete items */
#header-search-results,
#search-results {
    /* Enable smooth touch scrolling */
    -webkit-overflow-scrolling: touch;
    /* Optimize scroll performance */
    scroll-behavior: auto;
    /* Prevent momentum scrolling interference */
    overscroll-behavior: contain;
}

/* Prevent touch events from interfering with page scroll */
.autocomplete-item {
    /* Allow touch events to bubble up for scrolling */
    touch-action: manipulation;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* GPU acceleration for smooth animations */
#header-search-results,
#search-results,
.header-search,
.parts-card {
    /* Hardware acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    /* Optimize for frequent changes */
    will-change: transform;
}

/* Optimize rendering performance */
.autocomplete-item {
    /* Prevent unnecessary repaints */
    contain: layout style paint;
    /* Hardware acceleration for hover effects */
    transform: translateZ(0);
}

/* ===== BROWSER COMPATIBILITY FIXES ===== */

/* Safari-specific fixes */
@supports (-webkit-backdrop-filter: blur(1px)) {
    #header-search-results,
    #search-results {
        /* Ensure proper layering in Safari */
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
    }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    #header-search-results,
    #search-results {
        /* Ensure proper z-index handling in Firefox */
        position: absolute !important;
        z-index: 9999 !important;
    }
}

/* Edge/IE compatibility */
@supports (-ms-ime-align: auto) {
    #header-search-results,
    #search-results {
        /* Fallback positioning for older Edge */
        position: absolute !important;
    }
}

/* ===== DEBUGGING HELPERS (REMOVE IN PRODUCTION) ===== */

/* Uncomment for debugging z-index issues */
/*
#header-search-results,
#search-results {
    border: 2px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

.header-search,
.parts-card {
    border: 2px solid blue !important;
    background: rgba(0, 0, 255, 0.1) !important;
}
*/

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    #header-search-results,
    #search-results {
        /* Ensure full width on mobile */
        left: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        /* Adjust max height for mobile */
        max-height: 50vh !important;
    }
    
    /* Hide header search on mobile to prevent conflicts */
    .header-search {
        display: none !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    #header-search-results {
        /* Ensure proper width on tablets */
        min-width: 300px;
        max-width: 500px;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    #header-search-results,
    #search-results {
        border: 2px solid currentColor !important;
        background: Canvas !important;
        color: CanvasText !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #header-search-results,
    #search-results,
    .autocomplete-item {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== PRINT STYLES ===== */

/* Hide autocomplete dropdowns in print */
@media print {
    #header-search-results,
    #search-results {
        display: none !important;
    }
}