/**
 * Comprehensive CSS Fix for Z-Index, Modals, Dropdowns, and Responsive Issues
 * Author: Adeeb Alsilwy
 * Date: 2026-04-20
 * Updated: 2026-04-23
 * 
 * This file fixes:
 * 1. Z-index layering issues
 * 2. Modal display problems
 * 3. Dropdown visibility
 * 4. Overlay blocking interactions
 * 5. Mobile responsive layout
 * 
 * Z-INDEX HIERARCHY (موحد مع modal-fixes.css):
 * - 1000: content-wrapper, layout-page
 * - 1050: layout-menu
 * - 1060: dropdown-menu
 * - 1070: layout-navbar
 * - 1080: layout-overlay
 * - 1085: modal-backdrop
 * - 1090: modal
 * - 1100: modal-dialog, modal-content
 * - 1110: buttons in modal
 * - 9999: toasts
 */

/* ==========================================
   FIX 1: LAYOUT Z-INDEX HIERARCHY
   ========================================== */

/* Base content layer */
.content-wrapper,
.layout-page {
    z-index: 1000 !important;
    position: relative;
}

/* Sidebar menu */
.layout-menu {
    z-index: 1050 !important;
}

/* Navbar - above content, below overlay */
.layout-navbar,
.navbar {
    z-index: 1070 !important;
    position: relative !important;
}

/* Layout overlay - between navbar and modal backdrop */
/* CRITICAL: Must be hidden by default to prevent blocking interactions */
.layout-overlay {
    z-index: 1080 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    /* CRITICAL: Hidden by default, only shown when sidebar is expanded on mobile */
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: block !important; /* Keep it in layout but invisible */
}

/* Show overlay ONLY when menu is expanded on mobile/tablet */
html.layout-menu-expanded .layout-overlay,
body.layout-menu-expanded .layout-overlay {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================
   FIX 2: MODAL Z-INDEX HIERARCHY
   ========================================== */

/* Modal backdrop - above overlay */
.modal-backdrop {
    z-index: 1085 !important;
    position: fixed !important;
    pointer-events: auto !important;
}

/* Modal container - above backdrop */
.modal {
    z-index: 1090 !important;
    position: fixed !important;
    /* Remove pointer-events: none completely to allow interactions */
}

/* Modal content - highest */
.modal-dialog {
    z-index: 1100 !important;
    position: relative !important;
    pointer-events: auto !important;
}

.modal-content {
    z-index: 1100 !important;
    position: relative !important;
    pointer-events: auto !important;
}

.modal-header,
.modal-body,
.modal-footer {
    z-index: 1100 !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* Buttons in modals - highest priority */
.modal .btn,
.modal button,
.modal [type="button"],
.modal [type="submit"] {
    z-index: 1110 !important;
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Close button */
.modal .btn-close {
    z-index: 1111 !important;
}

/* Form elements */
.modal input,
.modal select,
.modal textarea,
.modal .form-control {
    z-index: 1105 !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* Modal show state */
.modal.show {
    display: block !important;
    opacity: 1 !important;
}

/* ==========================================
   FIX 3: DROPDOWNS
   ========================================== */

.dropdown-menu {
    z-index: 1060 !important;
    pointer-events: auto !important;
}

.dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#languageDropdown {
    z-index: 1061 !important;
}

#profileDropdown + .dropdown-menu,
.navbar-dropdown .dropdown-menu {
    z-index: 1062 !important;
}

.btn-group .dropdown-menu {
    z-index: 1065 !important;
}

/* ==========================================
   FIX 4: OFFCANVAS & TOASTS
   ========================================== */

.offcanvas {
    z-index: 1090 !important;
}

.offcanvas-backdrop {
    z-index: 1089 !important;
}

.toast,
.toastr {
    z-index: 9999 !important;
}

/* ==========================================
   FIX 5: INTERACTIVE ELEMENTS
   ========================================== */

/* All buttons and links must be clickable */
.btn,
button,
a[href],
[onclick],
[role="button"],
input[type="submit"],
input[type="button"],
.menu-link,
.dropdown-toggle {
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ==========================================
   FIX 6: MOBILE RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    /* Ensure content fills screen */
    .layout-page {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Container padding */
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Ensure navbar toggle is visible */
    .layout-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Dropdown menus on mobile */
    .dropdown-menu {
        z-index: 1060 !important;
        max-width: 100% !important;
    }
    
    /* Language dropdown mobile */
    #languageDropdown {
        max-height: 300px;
        overflow-y: auto;
    }
    
    /* Modal improvements */
    .modal-dialog {
        margin: 0.5rem !important;
    }
    
    .modal-content {
        min-height: 200px;
    }
    
    /* Minimum touch target size */
    .btn,
    button,
    a,
    [role="button"],
    .dropdown-item,
    .menu-link {
        min-height: 44px;
        padding: 10px 16px;
    }
    
    /* Table actions */
    .btn-sm {
        padding: 6px 10px !important;
        font-size: 12px;
    }
}

/* ==========================================
   FIX 7: SIDEBAR BEHAVIOR & MOBILE Z-INDEX FIX
   ========================================== */

/* Desktop - sidebar fixed */
@media (min-width: 1200px) {
    .layout-menu {
        position: fixed !important;
        height: 100vh !important;
    }
    
    /* Desktop - content has margin for sidebar */
    .layout-page {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* RTL desktop - content has margin on right */
    [dir="rtl"] .layout-page {
        margin-left: 0 !important;
        margin-right: 260px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Mobile - sidebar overlay (CRITICAL FIX for modal conflicts) */
@media (max-width: 1199px) {
    /* CRITICAL: Lower z-index for menu and overlay on mobile */
    /* core.css sets these to 1100/1099 which blocks modals (1090) */
    .layout-menu {
        position: fixed !important;
        height: 100vh !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1050 !important; /* LOWER than modal (1090) */
        left: 0 !important;
        right: auto !important;
    }
    
    /* CRITICAL: Remove all margins from layout-page when sidebar is hidden */
    .layout-page {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* RTL mobile - reset margins */
    [dir="rtl"] .layout-page {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    [dir="rtl"] .layout-menu {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
    }
    
    /* When menu is expanded on mobile */
    html.layout-menu-expanded .layout-menu {
        transform: translateX(0) !important;
    }
    
    /* CRITICAL: Lower overlay z-index so it doesn't block modals */
    .layout-overlay {
        z-index: 1080 !important; /* LOWER than modal-backdrop (1085) */
        pointer-events: none !important;
    }
    
    /* Show overlay only when menu is expanded */
    html.layout-menu-expanded .layout-overlay {
        pointer-events: auto !important;
    }
    
    /* CRITICAL: Ensure content wrapper fills screen */
    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* CRITICAL: Fix container padding on mobile */
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ==========================================
   FIX 8: PREVENT COMMON ISSUES
   ========================================== */

/* Prevent overflow */
body {
    overflow-x: hidden !important;
}

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Fix for flexbox layouts */
.d-flex {
    flex-wrap: wrap;
}

/* Image responsiveness */
img {
    max-width: 100%;
    height: auto;
}

/* Body state when modal is open */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* Multiple modal support */
.modal:nth-of-type(2) {
    z-index: 1092 !important;
}

.modal:nth-of-type(3) {
    z-index: 1094 !important;
}

/* ==========================================
   FIX 9: PRINT STYLES
   ========================================== */

@media print {
    .modal,
    .modal-backdrop,
    .layout-overlay {
        display: none !important;
    }
}

/* ==========================================
   DEBUG: Uncomment to visualize z-index
   ========================================== */
/*
* {
    outline: 1px solid rgba(255, 0, 0, 0.1);
}

*:hover {
    outline: 2px solid rgba(0, 255, 0, 0.3);
}
*/