/**
 * Mobile Modal Optimizations
 * Make all modals mobile-friendly with proper sizing and interactions
 */

@media (max-width: 768px) {

    /* ==========================================================================
       MODAL BASE STYLES
       ========================================================================== */

    /* All modals - fit screen with HIGH z-index */
    /* EXCLUDE: combat, travel, work modals (they have their own CSS) */
    .modal:not(.combat-modal):not(.travel-modal):not(.work-modal):not(#travelModal):not(#workModal):not(#extractionModal),
    [class*="modal"]:not(.combat-modal):not(.travel-modal):not(.work-modal),
    [id*="Modal"]:not(#combatModal):not(#travelModal):not(#workModal):not(#extractionModal),
    [id*="modal"]:not(#combatModal):not(#travelModal):not(#workModal):not(#extractionModal) {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 0 !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
    }

    /* Only show modal when it has 'show' or 'active' class */
    .modal.show:not(.combat-modal):not(.travel-modal):not(.work-modal),
    .modal.active:not(.combat-modal):not(.travel-modal):not(.work-modal),
    .modal[style*="display: block"]:not(.combat-modal):not(.travel-modal):not(.work-modal),
    .modal[style*="display:block"]:not(.combat-modal):not(.travel-modal):not(.work-modal) {
        display: block !important;
    }

    /* Modal backdrop */
    .modal-backdrop:not(.combat-modal-backdrop),
    .modal::before {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: 99998 !important;
    }

    /* Modal content - proper padding and z-index */
    /* EXCLUDE: combat, travel, work modals */
    .modal-content:not(.combat-modal-content):not(.travel-modal-content):not(.work-modal-content),
    .modal:not(.combat-modal):not(.travel-modal):not(.work-modal)>.modal-content {
        position: relative !important;
        padding: 16px !important;
        min-width: 280px !important;
        max-width: 95vw !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable !important;
        box-sizing: border-box !important;
        z-index: 100000 !important;
        background: rgba(0, 10, 20, 0.98) !important;
        border: 2px solid rgba(0, 242, 255, 0.4) !important;
        border-radius: 16px !important;
    }

    /* Modal header - compact */
    .modal-header:not(.combat-modal-header):not(.travel-modal-header):not(.work-header) {
        position: relative !important;
        padding: 12px 16px !important;
        font-size: 1.1rem !important;
        z-index: 100001 !important;
    }

    /* Modal body - scrollable */
    .modal-body:not(.combat-modal-body) {
        position: relative !important;
        padding: 16px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        z-index: 100000 !important;
    }

    /* Modal footer - stack buttons */
    .modal-footer:not(.combat-modal-footer) {
        position: relative !important;
        padding: 12px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        z-index: 100001 !important;
    }

    .modal-footer button,
    .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* ==========================================================================
       BOTTOM SHEET STYLE MODALS
       ========================================================================== */

    /* Convert modals to bottom sheets on mobile */
    .modal.bottom-sheet,
    .modal-bottom-sheet {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: 100vw !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }

    /* ==========================================================================
       FULL-SCREEN MODALS ON SMALL SCREENS
       ========================================================================== */

    @media (max-width: 400px) {

        /* Very small screens - full screen modals */
        .modal {
            max-width: 100vw !important;
            max-height: 100vh !important;
            margin: 0 !important;
            border-radius: 0 !important;
        }

        .modal-content {
            max-height: 100vh !important;
        }
    }

    /* ==========================================================================
       MODAL CLOSE BUTTONS
       ========================================================================== */

    /* Larger close buttons for touch */
    .modal-close,
    .btn-close,
    [class*="close"] {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.5rem !important;
    }

    /* ==========================================================================
       SPECIFIC MODAL TYPES
       ========================================================================== */

    /* Inventory modal */
    .inventory-modal .modal-content {
        padding: 12px !important;
    }

    /* Crafting modal */
    .crafting-modal .modal-content {
        max-height: 80vh !important;
    }

    /* Shop modal */
    .shop-modal .item-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}