/* Foy Create Page - Aggressive Mobile CSS Fixes */

@media (max-width: 768px) {
    
    /* ============================================
       Z-INDEX STACKING CONTEXT - CRITICAL FIX
       ============================================ */
    
    /* CRITICAL: ALL relative containers start with VERY LOW z-index */
    /* This prevents them from overlapping open dropdowns */
    form .relative,
    .card .relative,
    .page-content .relative,
    .page-container .relative,
    div.relative,
    .relative {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* ONLY containers with 'dropdown-open' class get high z-index */
    /* This is more reliable than :has() selector and works with AngularJS ng-class */
    .relative.dropdown-open {
        z-index: 9999 !important;
        position: relative !important;
    }
    
    /* Force all other relative containers (without dropdown-open) to stay at low z-index */
    .relative:not(.dropdown-open) {
        z-index: 1 !important;
    }
    
    /* Force all form fields, inputs, and other elements to stay below */
    form > *,
    .card > *,
    .page-content > * {
        position: relative !important;
        z-index: auto !important;
    }
    /* Force single column layout for ALL grids */
    .grid,
    div.grid,
    [class*="grid"],
    div[class*="grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 1rem !important;
        column-gap: 1rem !important;
        row-gap: 1rem !important;
    }
    
    /* Override ALL grid column classes */
    .grid.grid-cols-1,
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4,
    .grid[class*="grid-cols-1"],
    .grid[class*="grid-cols-2"],
    .grid[class*="grid-cols-3"],
    .grid[class*="grid-cols-4"],
    [class*="sm:grid-cols"],
    [class*="md:grid-cols"],
    [class*="lg:grid-cols"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Force all grid children to span 1 column */
    .grid > *,
    .grid > div,
    [class*="col-span"],
    [class*="lg:col-span"],
    [class*="md:col-span"],
    [class*="sm:col-span"] {
        grid-column: 1 / -1 !important;
        grid-column-start: 1 !important;
        grid-column-end: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Page container - force full width */
    .page-container,
    div.page-container,
    [class*="page-container"] {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Override inline styles */
    [style*="max-width"],
    [style*="max-width:"] {
        max-width: 100% !important;
    }
    
    /* Form container */
    form,
    form[class*="space-y"],
    form.space-y-6 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Card */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* All form fields - force block display */
    .form-label,
    label.form-label,
    label[class*="form-label"] {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        clear: both !important;
        float: none !important;
    }
    
    /* Form input containers - DEFAULT: all containers have LOW z-index */
    .relative,
    div.relative,
    [class*="relative"] {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        clear: both !important;
        float: none !important;
        margin-bottom: 1rem !important;
        z-index: 1 !important; /* DEFAULT: All containers have low z-index */
    }
    
    /* CRITICAL: Force ALL form elements and containers to LOW z-index by default */
    /* This prevents them from overlapping open dropdowns */
    form *,
    .card *,
    .page-content *,
    form > *,
    .card > *,
    .page-content > *,
    form > * > *,
    .card > * > * {
        z-index: auto !important;
        position: relative !important;
    }
    
    /* Only relative containers have explicit z-index */
    form .relative,
    .card .relative,
    .page-content .relative {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* ONLY the container with VISIBLE/OPEN dropdown gets high z-index */
    /* Check for visible dropdown children (not hidden) */
    .relative:has(> div[ng-show][class*="absolute"]:not([style*="display: none"]):not([style*="display:none"])),
    .relative:has(> div[ng-show].absolute:not([style*="display: none"]):not([style*="display:none"])),
    .relative:has(> div.absolute[ng-show]:not([style*="display: none"]):not([style*="display:none"])),
    .relative:has(> div[ng-show][class*="z-50"]:not([style*="display: none"]):not([style*="display:none"])) {
        z-index: 9999 !important; /* ONLY active dropdown container gets high z-index */
    }
    
    /* CRITICAL: Force ALL relative containers to stay at low z-index by default */
    /* This prevents them from overlapping open dropdowns */
    form .relative,
    .card .relative,
    .page-content .relative,
    form > * > .relative,
    .card > * > .relative,
    .page-content > * > .relative {
        z-index: 1 !important;
    }
    
    /* ONLY exception: Container with visible dropdown gets high z-index */
    form .relative:has(> div[ng-show][class*="absolute"]:not([style*="display: none"])),
    .card .relative:has(> div[ng-show][class*="absolute"]:not([style*="display: none"])),
    form > * > .relative:has(> div[ng-show][class*="absolute"]:not([style*="display: none"])),
    .card > * > .relative:has(> div[ng-show][class*="absolute"]:not([style*="display: none"])) {
        z-index: 9999 !important;
    }
    
    /* Prevent z-index stacking issues */
    .relative > input,
    .relative > select {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Ensure all form sections below open dropdown */
    .relative + .relative,
    .form-group + .form-group,
    .relative ~ .relative {
        z-index: 1 !important;
    }
    
    /* Force all grid items below open dropdown */
    .grid > *,
    [class*="grid"] > * {
        z-index: auto !important;
        position: relative !important;
    }
    
    /* Exception: Grid item with open dropdown */
    .grid > *:has(.relative:has(> div[ng-show][class*="absolute"]:not([style*="display: none"]))) {
        z-index: 9999 !important;
    }
    
    /* All inputs - full width */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    select,
    textarea,
    .form-input,
    [class*="form-input"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 0.625rem 0.75rem !important;
        padding-right: 2.5rem !important;
        min-height: 44px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 6px !important;
        margin: 0 !important;
        display: block !important;
        clear: both !important;
        float: none !important;
    }
    
    /* Input with icons - adjust padding */
    .relative input.form-input,
    .relative input[class*="form-input"],
    .relative input {
        padding-right: 2.5rem !important;
    }
    
    /* Search icons inside inputs - ONLY icon containers */
    .relative > .absolute.right-3,
    .relative > div.absolute.right-3,
    .relative > .absolute[class*="right-3"]:not([ng-show]):not([class*="z-50"]),
    .relative > div[class*="absolute"][class*="right-3"]:not([ng-show]):not([class*="z-50"]) {
        position: absolute !important;
        right: 0.75rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
        z-index: 2 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        max-height: none !important;
    }
    
    /* Dropdown menus - CRITICAL FIX: Use parent z-index for stacking */
    .relative > div[ng-show],
    .relative > div[ng-show][class*="absolute"],
    .relative > div[ng-show][class*="z-50"],
    .relative > .absolute[ng-show],
    div[ng-show][class*="absolute"][class*="z-50"],
    div[ng-show][class*="absolute"][class*="mt-1"],
    .relative > div[ng-show].absolute.z-50,
    .relative > div.absolute[ng-show],
    .relative > div.absolute.mt-1[ng-show],
    .relative > div[ng-show].absolute.w-full {
        position: absolute !important;
        top: calc(100% + 0.25rem) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        z-index: 1 !important; /* Low z-index - parent container controls stacking */
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        border-radius: 0.5rem !important;
        background-color: white !important;
        border: 1px solid #e5e7eb !important;
    }
    
    /* CRITICAL: Hide ALL dropdowns that are NOT inside 'dropdown-open' containers */
    /* This ensures only the active dropdown is visible */
    .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; /* Very negative z-index to ensure they stay below */
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* ONLY dropdowns inside 'dropdown-open' containers are fully visible */
    .relative.dropdown-open > div[ng-show][class*="absolute"],
    .relative.dropdown-open > div[ng-show][class*="z-50"],
    .relative.dropdown-open > .absolute[ng-show],
    .relative.dropdown-open > div[ng-show].absolute.z-50 {
        z-index: 10 !important; /* Relative to parent (z-index: 999999) */
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Hidden dropdowns - completely hide */
    .relative > div[ng-show][style*="display: none"],
    div[ng-show][class*="absolute"][style*="display: none"],
    div[ng-show="false"],
    div[ng-show="false"][class*="absolute"] {
        z-index: 0 !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* ============================================
       CRITICAL FIX: Z-INDEX STACKING CONTEXT
       ============================================ */
    
    /* ALL relative containers start with LOW z-index */
    form .relative,
    .card .relative,
    .page-content .relative,
    .page-container .relative,
    div.relative,
    .relative {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* ONLY containers with 'dropdown-open' class get VERY HIGH z-index */
    /* This creates a new stacking context above all others */
    .relative.dropdown-open {
        z-index: 999999 !important; /* Extremely high to ensure it's above everything */
        position: relative !important;
        isolation: isolate !important; /* Create new stacking context */
    }
    
    /* ALL other relative containers (without dropdown-open) stay at VERY LOW z-index */
    .relative:not(.dropdown-open) {
        z-index: 0 !important; /* Very low to ensure they stay below */
        position: relative !important;
    }
    
    /* Force ALL form elements below dropdown-open containers */
    form .relative:not(.dropdown-open),
    .card .relative:not(.dropdown-open),
    .page-content .relative:not(.dropdown-open),
    .page-container .relative:not(.dropdown-open) {
        z-index: 0 !important;
    }
    
    /* Ensure dropdown-open containers are always on top */
    .relative.dropdown-open {
        z-index: 999999 !important;
    }
    
    /* Grid items should not overlap */
    .grid > div,
    [class*="grid"] > div,
    [class*="grid"] > * {
        z-index: auto !important;
        position: relative !important;
    }
    
    /* When mobile menu is open, completely hide and disable ALL form dropdowns */
    body.mobile-menu-open .relative > div[ng-show][class*="absolute"],
    body.mobile-menu-open div[ng-show][class*="absolute"],
    body.mobile-menu-open .absolute[ng-show],
    body.mobile-menu-open [ng-show][class*="absolute"],
    body.mobile-menu-open .relative > div[ng-show].absolute.z-50,
    body.mobile-menu-open div.absolute[ng-show][class*="z-50"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    /* Disable ALL form interactions when mobile menu is open */
    body.mobile-menu-open form,
    body.mobile-menu-open .card,
    body.mobile-menu-open input,
    body.mobile-menu-open select,
    body.mobile-menu-open textarea,
    body.mobile-menu-open .form-input,
    body.mobile-menu-open .relative,
    body.mobile-menu-open .relative input,
    body.mobile-menu-open .relative select {
        z-index: 1 !important;
        pointer-events: none !important;
        position: relative !important;
    }
    
    /* Hide page content when menu is open */
    body.mobile-menu-open #main-content,
    body.mobile-menu-open .main-content,
    body.mobile-menu-open .page-content,
    body.mobile-menu-open .page-container {
        z-index: 1 !important;
        pointer-events: none !important;
        opacity: 0.3 !important;
        position: relative !important;
    }
    
    /* Prevent dropdowns from appearing above mobile menu */
    body.mobile-menu-open {
        overflow: hidden !important;
    }
    
    body.mobile-menu-open * {
        pointer-events: none !important;
    }
    
    body.mobile-menu-open #mobileMenu,
    body.mobile-menu-open #mobileMenu *,
    body.mobile-menu-open #mobileMenuOverlay {
        pointer-events: auto !important;
    }
    
    /* Ensure dropdown items are tappable */
    div[ng-show][class*="absolute"] > div,
    div[ng-show][class*="absolute"] > div[ng-repeat],
    .relative > div[ng-show][class*="absolute"] > div {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0.875rem 1rem !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    /* Dropdown item active/tap states */
    div[ng-show][class*="absolute"] > div:active,
    div[ng-show][class*="absolute"] > div[ng-repeat]:active {
        background-color: #f3f4f6 !important;
    }
    
    /* Last dropdown item - remove border */
    div[ng-show][class*="absolute"] > div:last-child,
    div[ng-show][class*="absolute"] > div[ng-repeat]:last-child {
        border-bottom: none !important;
    }
    
    /* Selected display cards */
    .bg-blue-50,
    [class*="bg-blue-50"],
    .mt-2.p-2.bg-blue-50 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        box-sizing: border-box !important;
        display: block !important;
        clear: both !important;
    }
    
    /* Form groups */
    .form-group,
    div[class*="form-group"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
        display: block !important;
        clear: both !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    /* Radio button containers */
    .flex.flex-wrap,
    [class*="flex"][class*="flex-wrap"],
    div[class*="flex"][class*="flex-wrap"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
        clear: both !important;
        float: none !important;
    }
    
    /* Radio labels */
    label[class*="inline-flex"],
    .inline-flex.items-center {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px !important;
        background: white !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        clear: both !important;
        float: none !important;
    }
    
    /* Ensure no floating elements */
    * {
        float: none !important;
    }
    
    /* Force block display for form elements */
    .form-label + div,
    label + div,
    .form-label + .relative {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Remove any inline styles that cause issues */
    [style*="display: inline"],
    [style*="display:inline"] {
        display: block !important;
    }
    
    [style*="float"],
    [style*="position: absolute"][style*="left"] {
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Gap utilities */
    .gap-2 { gap: 0.5rem !important; }
    .gap-4 { gap: 1rem !important; }
    .gap-6 { gap: 1.5rem !important; }
    
    /* Space utilities */
    .space-y-2 > * + * { margin-top: 0.5rem !important; }
    .space-y-4 > * + * { margin-top: 1rem !important; }
    .space-y-6 > * + * { margin-top: 1.5rem !important; }
}