/* ============================================================
 * Theme overrides - hot-fix CSS that bypasses the build pipeline
 * Loaded last in <head> so it wins over compiled/app styles.
 * Bump the ?v= query string in head.blade.php after each edit.
 * ============================================================ */

/* ----------------------------------------------------------
 * ModalWindow scroll fix (mobile + desktop tall modals)
 * Vue component's <style> is injected at runtime AFTER this
 * file, so we need !important on the rules that must win.
 * ---------------------------------------------------------- */
@media only screen and (max-width: 480px) {
    .modal-container {
        max-height: 100vh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .modal-container-scrollable {
        height: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
    .modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    .modal-header,
    .modal-footer {
        flex: 0 0 auto !important;
    }
}

@media only screen and (min-width: 481px) {
    .modal-container {
        max-height: 95vh !important;
        max-height: 95dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    .modal-header,
    .modal-footer {
        flex: 0 0 auto !important;
    }
}
