/**
 * ERPAthos Modal Responsive Styles
 * Implements fullscreen modals on mobile devices with sticky headers and footers
 * 
 * Features:
 * - Fullscreen on mobile (< 768px)
 * - Desktop overlay behavior maintained
 * - Sticky header and footer on mobile
 * - Internal scrolling for modal body
 * - No overflow issues
 * - ESC key and close button functionality preserved
 * - ARIA and keyboard navigation compatible
 */

/* ========================================
 * MOBILE FULLSCREEN MODALS (< 768px)
 * ======================================== */

@media (max-width: 767px) {
    /* Make modal fullscreen on mobile */
    .modal.show .modal-dialog,
    .modal.show .modal-dialog.modal-sm,
    .modal.show .modal-dialog.modal-lg,
    .modal.show .modal-dialog.modal-xl,
    .modal.show .modal-dialog.modal-wider {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    /* Modal content fills entire screen */
    .modal.show .modal-content {
        height: 100vh !important;
        max-height: 100vh !important;
        border: none;
        border-radius: 0;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Sticky modal header at top */
    .modal.show .modal-header {
        flex-shrink: 0;
        position: sticky !important;
        top: 0;
        z-index: var(--z-index-modal-sticky, 1055);
        background-color: var(--bs-modal-bg, #fff);
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
        padding: 1rem;
    }

    /* Modal body with internal scrolling */
    .modal.show .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 1rem;
        /* Remove any max-height constraints on mobile */
        max-height: none !important;
    }

    /* Sticky modal footer at bottom */
    .modal.show .modal-footer {
        flex-shrink: 0;
        position: sticky !important;
        bottom: 0;
        z-index: var(--z-index-modal-sticky, 1055);
        background-color: var(--bs-modal-bg, #fff);
        border-top: 1px solid var(--bs-border-color, #dee2e6);
        padding: 1rem;
        /* Adjust footer buttons for mobile */
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Prevent body scroll when modal is open */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* Adjust modal backdrop for fullscreen */
    .modal-backdrop.show {
        /* Backdrop is less relevant on fullscreen but keep it for consistency */
        background-color: var(--bs-backdrop-bg, rgba(0, 0, 0, 0.5));
    }

    /* Ensure close button is visible and clickable */
    .modal.show .modal-header .btn-close {
        padding: 0.5rem;
        margin: -0.5rem -0.5rem -0.5rem auto;
    }

    /* Make modal title responsive */
    .modal.show .modal-title {
        font-size: 1.125rem;
        line-height: 1.4;
        word-break: break-word;
    }

    .modal.show .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 100px;
    }

    /* Stack footer buttons vertically if needed on very small screens */
    @media (max-width: 400px) {
        .modal.show .modal-footer {
            flex-direction: column;
        }

        .modal.show .modal-footer .btn {
            width: 100%;
        }
    }

    /* Fix for nested cards and sections within modal body */
    .modal.show .modal-body .card {
        margin-bottom: 1rem;
    }

    .modal.show .modal-body .card:last-child {
        margin-bottom: 0;
    }

    /* Ensure tables are responsive within modal */
    .modal.show .modal-body .table-responsive {
        overflow-x: auto;
    }

    /* Prevent zoom on input focus on iOS - all form elements need 16px minimum */
    .modal.show .modal-body .form-control,
    .modal.show .modal-body .form-select,
    .modal.show .modal-body input[type="text"],
    .modal.show .modal-body input[type="email"],
    .modal.show .modal-body input[type="number"],
    .modal.show .modal-body input[type="tel"],
    .modal.show .modal-body input[type="password"],
    .modal.show .modal-body textarea,
    .modal.show .modal-body select {
        font-size: 16px !important;
    }
}

/* ========================================
 * TABLET AND DESKTOP (≥ 768px)
 * Classic overlay modal behavior
 * ======================================== */

@media (min-width: 768px) {
    /* Maintain standard Bootstrap modal behavior */
    .modal.show .modal-dialog {
        /* Default Bootstrap centering */
        margin: 1.75rem auto;
    }

    /* Ensure max-height for desktop modals */
    .modal.show .modal-content {
        max-height: 90vh;
    }

    /* Modal body with scroll on desktop if needed */
    .modal.show .modal-body {
        max-height: calc(90vh - 160px);
        overflow-y: auto;
    }

    /* Keep header and footer static on desktop */
    .modal.show .modal-header,
    .modal.show .modal-footer {
        position: relative;
    }
}

/* ========================================
 * ACCESSIBILITY IMPROVEMENTS
 * ======================================== */

/* Focus styles for modal elements */
.modal .modal-header .btn-close:focus,
.modal .modal-footer .btn:focus {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* Ensure proper focus trap within modal: handled via Bootstrap's tabindex="-1" on .modal */

/* Screen reader only text for close button is handled by Bootstrap's aria-label implementation */

/* ========================================
 * ANIMATION IMPROVEMENTS
 * ======================================== */

/* Smooth transition for modal appearance on mobile */
@media (max-width: 767px) {
    .modal.fade .modal-dialog {
        transition: transform 0.2s ease-out;
    }

    .modal.show .modal-dialog {
        transform: none;
    }
}

/* ========================================
 * SPECIAL CASES
 * ======================================== */

/* Handle modals with custom styling (like SupportContactModal) */
.modal.show {
    /* Ensure modal is properly displayed when visible */
    display: block !important;
}

/* Backdrop for manually controlled modals */
.modal-backdrop.show {
    opacity: 0.5;
}

/* Fix for dark mode compatibility */
@media (prefers-color-scheme: dark) {
    @media (max-width: 767px) {
        .modal.show .modal-header,
        .modal.show .modal-footer {
            background-color: #212529;
            border-color: #495057;
        }
    }
}

/* ========================================
 * PREVENT OVERFLOW ISSUES
 * ======================================== */

/* Ensure no horizontal overflow in modals */
.modal .modal-body,
.modal .modal-header,
.modal .modal-footer {
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent overflow in common child elements */
.modal .modal-body > *,
.modal .modal-body table,
.modal .modal-body form,
.modal .modal-body .card {
    max-width: 100%;
}

/* Allow images to be responsive */
.modal .modal-body img {
    max-width: 100%;
    height: auto;
}

/* Fix for pre and code blocks */
.modal .modal-body pre,
.modal .modal-body code {
    overflow-x: auto;
    word-wrap: break-word;
}

/* ========================================
 * UTILITY CLASSES
 * ======================================== */

/* Force desktop modal behavior even on mobile (use sparingly) */
@media (max-width: 767px) {
    .modal.show .modal-dialog.force-desktop-style {
        margin: 1rem auto !important;
        max-width: 90% !important;
        width: auto !important;
        height: auto !important;
        max-height: 90vh !important;
    }

    .modal.show .modal-dialog.force-desktop-style .modal-content {
        height: auto !important;
        border-radius: 0.3rem !important;
    }
}