/*
 * My Digital Diary — Modal Scrollable Guard
 *
 * Extracted from layouts/app.blade.php (Phase 3 cleanup).
 * Final layout guard for modal scrollability.
 * Keep modal-responsive.css for modal geometry/scrolling.
 */

/* Final layout guard: modal-responsive.css owns geometry/scrolling. */
html body dialog[open] {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

html body dialog[open] > form,
html body dialog[open] > .pm-modal-content,
html body dialog[open] > .pm-modal-panel,
html body dialog[open] > .modal-content,
html body dialog[open] .pm-modal-form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body dialog[open] .pm-modal-body,
html body dialog[open] .modal-body,
html body dialog[open] .modal-scroll-body,
html body dialog[open] [data-modal-scroll],
html body dialog[open] form > .overflow-y-auto,
html body dialog[open] > .overflow-y-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (min-width: 641px) {
    html body dialog[open] {
        max-height: calc(var(--pm-modal-vh, 100dvh) - 40px) !important;
    }

    html body dialog[open] > form,
    html body dialog[open] > .pm-modal-content,
    html body dialog[open] > .pm-modal-panel,
    html body dialog[open] > .modal-content,
    html body dialog[open] .pm-modal-form {
        max-height: calc(var(--pm-modal-vh, 100dvh) - 40px) !important;
    }
}

@media (max-width: 640px) {
    html body dialog[open] {
        top: max(8px, env(safe-area-inset-top)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body dialog[open] > form,
    html body dialog[open] > .pm-modal-content,
    html body dialog[open] > .pm-modal-panel,
    html body dialog[open] > .modal-content,
    html body dialog[open] .pm-modal-form {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
    }
}