/*
 * Modal Z-Index Management for Stama Deliveries
 * Ensures all modals appear above navigation and other UI elements
 * 
 * Z-Index Hierarchy:
 * - Base content: z-0 to z-10
 * - Navigation dropdowns: z-20 to z-30  
 * - Sidebar toggle: z-30 to z-40
 * - Mobile menu toggle: z-40
 * - Mobile menu/Navigation: z-50
 * - Modal backdrops: z-[1050]
 * - Modals: z-[1055] (Bootstrap modal default)
 * - Modal content/dropdowns: z-[1057]
 * - Loading overlays: z-[1058]
 * - Address autocomplete suggestions: z-[1060]
 * - Address autocomplete modal: z-[1065]
 * - Tooltips: z-[1060]
 * - Notifications: z-[1070]
 */

/* Modal Base Classes - Override all existing modal z-index values */
.modal,
.modal-overlay,
[id*="modal" i],
[id*="Modal" i],
[class*="modal" i],
[class*="Modal" i] {
    z-index: 1055 !important;
}

/* Modal Backdrop/Background */
.modal-backdrop,
.modal-overlay,
.bg-black.bg-opacity-50,
.bg-gray-600.bg-opacity-50 {
    z-index: 1050 !important;
}

/* Specific Modal Implementations */
.payment-modal {
    z-index: 1055 !important;
}

.refund-modal,
#refundModal {
    z-index: 1055 !important;
}

/* Bootstrap Modal Override */
.modal.fade {
    z-index: 1055 !important;
}

.modal-dialog {
    z-index: 1056 !important;
}

/* Tailwind CSS Modal Classes */
.fixed.inset-0 {
    z-index: 1055 !important;
}

/* Specific Modal IDs - Override any existing z-index */
#driverInfoModal,
#assignDriverModal,
#categoryModal,
#deleteModal,
#completion-modal,
#surcharge-modal,
#termsModal,
#driverAgreementModal,
#config-modal,
#createOrderModal,
#pricingCalculatorModal,
#sendMessageModal,
#createInvoiceModal,
#processRefundModal,
#new-agreement-modal,
#driverModal,
#messageModal,
#priceModal,
#detail-modal,
#modal-container,
#resendModal {
    z-index: 1055 !important;
}

/* Ensure modal content is above backdrop */
.modal-content,
.modal-dialog .modal-content {
    z-index: 1056 !important;
    position: relative;
}

/* Tooltips should be above modals */
.tooltip,
[class*="tooltip"],
[id*="tooltip"] {
    z-index: 1060 !important;
}

/* Notifications should be above everything */
.notification,
[class*="notification"],
.alert,
.toast {
    z-index: 1070 !important;
}

/* Dropdowns within modals */
.modal .dropdown-menu,
.modal .select-dropdown,
.modal [class*="dropdown"] {
    z-index: 1057 !important;
}

/* Address autocomplete suggestions - should appear above all modal content */
.address-suggestions {
    z-index: 9999 !important;
    position: absolute !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    width: 100% !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.modal .address-suggestions {
    z-index: 9999 !important;
    position: absolute !important;
}

/* Modal-specific address suggestions styling */
.modal-address-suggestions {
    position: relative !important;
    z-index: 1057 !important;
    width: 100% !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    margin-top: 4px !important;
}

/* Address suggestion items - ensure full width display */
.address-suggestions .supply-suggestion-item,
.modal-address-suggestions .supply-suggestion-item {
    width: 100% !important;
    display: block !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: all 0.15s ease !important;
    background: white !important;
    color: #1f2937 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.address-suggestions .supply-suggestion-item:last-child,
.modal-address-suggestions .supply-suggestion-item:last-child {
    border-bottom: none !important;
}

.address-suggestions .supply-suggestion-item:hover,
.modal-address-suggestions .supply-suggestion-item:hover {
    background-color: #f8fafc !important;
    color: #1f2937 !important;
}

/* Address suggestion content styling */
.supply-suggestion-item .suggestion-main-text {
    font-weight: 500 !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
    width: 100% !important;
    word-wrap: break-word !important;
}

.supply-suggestion-item .suggestion-sub-text {
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
    width: 100% !important;
    word-wrap: break-word !important;
}

.supply-suggestion-item .verified-badge {
    display: inline-block !important;
    background-color: #10b981 !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

/* Allow modal containers to show overflow */
.modal .address-autocomplete-container {
    overflow: visible !important;
    position: relative !important;
}

/* Address autocomplete modal - should appear above pricing calculator modal */
.address-suggestions-modal {
    z-index: 1065 !important;
    position: fixed !important;
}

.address-suggestions-content {
    z-index: 1066 !important;
    position: relative !important;
}

/* Loading overlays within modals */
.modal .loading-overlay,
.modal .spinner-overlay {
    z-index: 1058 !important;
}

/* Fixed position elements that should stay below modals */
.fixed.top-0,
.fixed.bottom-0,
.sticky {
    z-index: auto !important;
}

/* Navigation elements - ensure they stay below modals */
#mobile-menu,
.nav-container,
.navbar,
.header,
.sidebar {
    z-index: 50 !important;
}

/* Ensure mobile menu toggle button is accessible */
.mobile-menu-button,
.sidebar-toggle-btn {
    z-index: 51 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal,
    .modal-overlay,
    [id*="modal" i] {
        z-index: 1055 !important;
        position: fixed !important;
    }
    
    /* Ensure modals cover the entire viewport on mobile */
    .modal.fixed.inset-0 {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
}

/* Accessibility - ensure focus is trapped within modal */
.modal:focus-within,
.modal.show {
    z-index: 1055 !important;
}

/* Animation compatibility */
.modal.fade.show,
.modal.fade.in {
    z-index: 1055 !important;
} 