/**
 * Desktop: center all modals vertically & horizontally.
 * Mobile keeps bottom-sheet (items-end) behavior.
 */
@media (min-width: 768px) {
    /* Tailwind UI pattern: items-end + sm:block → force flex center */
    [role="dialog"] > div.flex.items-end,
    [aria-modal="true"] > div.flex.items-end,
    div[id$="Modal"]:not(.hidden) > div.flex.items-end,
    div[id$="-modal"]:not(.hidden) > div.flex.items-end,
    div[id*="Modal"]:not(.hidden) > div.flex.items-end,
    div[id*="modal"]:not(.hidden) > div.flex.items-end {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        text-align: left;
    }

    /* Override align-bottom on modal panels */
    [role="dialog"] .align-bottom,
    [aria-modal="true"] .align-bottom,
    div[id$="Modal"] .align-bottom,
    div[id$="-modal"] .align-bottom,
    div[id*="Modal"] .align-bottom,
    div[id*="modal"] .align-bottom {
        vertical-align: middle !important;
    }

    /* Hide the sm:h-screen spacer used for vertical-align trick when flex-centering */
    [role="dialog"] > div.flex.items-end > span.sm\:h-screen,
    [aria-modal="true"] > div.flex.items-end > span.sm\:h-screen,
    div[id$="Modal"] > div.flex.items-end > span.sm\:h-screen,
    div[id$="-modal"] > div.flex.items-end > span.sm\:h-screen,
    div[id*="Modal"] > div.flex.items-end > span.sm\:h-screen,
    div[id*="modal"] > div.flex.items-end > span.sm\:h-screen {
        display: none !important;
    }
}