/* CRITICAL FIX: Prevent dropdown overlap on mobile */
/* This file specifically fixes the dropdown stacking issue */

@media (max-width: 768px) {
    
    /* ============================================
       DROPDOWN OVERLAP PREVENTION - ULTIMATE FIX
       ============================================ */
    
    /* STEP 1: ALL relative containers start with VERY LOW z-index */
    form .relative,
    .card .relative,
    .page-content .relative,
    .page-container .relative,
    div.relative,
    .relative {
        z-index: 0 !important;
        position: relative !important;
    }
    
    /* STEP 2: ONLY containers with 'dropdown-open' class get MAXIMUM z-index */
    .relative.dropdown-open {
        z-index: 999999 !important; /* Maximum z-index - above everything */
        position: relative !important;
        isolation: isolate !important; /* Create new stacking context */
    }
    
    /* STEP 3: ALL other containers stay at VERY LOW z-index */
    .relative:not(.dropdown-open) {
        z-index: 0 !important;
        position: relative !important;
    }
    
    /* STEP 4: ALL form elements stay at LOW z-index by default */
    form input,
    form select,
    form textarea,
    form label,
    form .form-input,
    .card input,
    .card select,
    .card textarea,
    .card label,
    .card .form-input,
    .grid input,
    .grid select,
    .grid textarea,
    .grid label {
        z-index: auto !important;
        position: relative !important;
    }
    
    /* STEP 5: Input containers WITHOUT dropdown-open stay at LOW z-index */
    form .relative:not(.dropdown-open),
    .card .relative:not(.dropdown-open),
    .page-content .relative:not(.dropdown-open),
    .grid > div .relative:not(.dropdown-open) {
        z-index: 0 !important;
        position: relative !important;
    }
    
    /* STEP 6: Dropdown menus - position and visibility */
    .relative > div[ng-show][class*="absolute"],
    .relative > div[ng-show][class*="z-50"],
    .relative > .absolute[ng-show],
    .relative > div[ng-show].absolute.z-50 {
        position: absolute !important;
        top: calc(100% + 0.25rem) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 10 !important; /* Relative to parent */
        max-height: 50vh !important;
        overflow-y: auto !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
        border-radius: 0.5rem !important;
        background-color: white !important;
        border: 1px solid #e5e7eb !important;
    }
    
    /* STEP 7: Hide dropdowns in containers WITHOUT 'dropdown-open' */
    .relative:not(.dropdown-open) > div[ng-show][class*="absolute"],
    .relative:not(.dropdown-open) > div[ng-show][class*="z-50"],
    .relative:not(.dropdown-open) > .absolute[ng-show],
    .relative:not(.dropdown-open) > div[ng-show].absolute.z-50 {
        z-index: -9999 !important;
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: none !important;
    }
    
    /* STEP 8: Show dropdowns ONLY in containers WITH 'dropdown-open' */
    .relative.dropdown-open > div[ng-show][class*="absolute"]:not([style*="display: none"]),
    .relative.dropdown-open > div[ng-show][class*="z-50"]:not([style*="display: none"]),
    .relative.dropdown-open > .absolute[ng-show]:not([style*="display: none"]),
    .relative.dropdown-open > div[ng-show].absolute.z-50:not([style*="display: none"]) {
        z-index: 10 !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* STEP 9: CRITICAL - Grid items containing dropdown-open get high z-index */
    .grid > div:has(.relative.dropdown-open) {
        z-index: 999999 !important;
        position: relative !important;
    }
    
    /* Grid items without dropdown-open stay at very low z-index */
    .grid > div:not(:has(.relative.dropdown-open)) {
        z-index: 0 !important;
        position: relative !important;
    }
    
    /* Force all grid items below the one with dropdown-open */
    .grid > div:has(.relative.dropdown-open) ~ div {
        z-index: 0 !important;
        position: relative !important;
    }
    
    /* STEP 10: CRITICAL - Force ALL inputs, selects, labels below dropdown */
    /* These must not overlap the dropdown list */
    form input:not(.relative.dropdown-open input),
    form select:not(.relative.dropdown-open select),
    form textarea:not(.relative.dropdown-open textarea),
    form label:not(.relative.dropdown-open label),
    .card input:not(.relative.dropdown-open input),
    .card select:not(.relative.dropdown-open select),
    .card textarea:not(.relative.dropdown-open textarea),
    .card label:not(.relative.dropdown-open label),
    .grid input:not(.relative.dropdown-open input),
    .grid select:not(.relative.dropdown-open select),
    .grid textarea:not(.relative.dropdown-open textarea),
    .grid label:not(.relative.dropdown-open label) {
        z-index: 0 !important;
        position: relative !important;
    }
    
    /* STEP 11: Ensure dropdown container and its children are above everything */
    .relative.dropdown-open,
    .relative.dropdown-open > * {
        position: relative !important;
    }
    
    .relative.dropdown-open > div[ng-show][class*="absolute"] {
        position: absolute !important;
    }
}