/*
|--------------------------------------------------------------------------
| My Digital Diary - Universal Modal System
|--------------------------------------------------------------------------
| Responsive native <dialog> + legacy overlay modal styling.
| Desktop: centred modal.
| Tablet: viewport bounded.
| Phone: safe edge gutters, one-column forms, scrollable body,
|        full-width action buttons and mobile keyboard safety.
|--------------------------------------------------------------------------
*/

:root {
    --pm-modal-text: #0f172a;
    --pm-modal-muted: #64748b;

    --pm-modal-border: #e5e7eb;
    --pm-modal-border-strong: #cbd5e1;

    --pm-modal-bg: #ffffff;
    --pm-modal-soft: #f8fafc;

    --pm-modal-danger: #e11d48;

    --pm-modal-radius: 20px;
    --pm-modal-radius-mobile: 16px;

    --pm-modal-z: 99990;
    --pm-overlay-z: 99980;

    --pm-modal-shadow:
        0 30px 80px rgba(15, 23, 42, 0.20),
        0 10px 30px rgba(15, 23, 42, 0.10);

    --pm-duration: 0.22s;
    --pm-ease: cubic-bezier(0.16, 1, 0.3, 1);

    --pm-field-radius: 12px;
    --pm-field-height: 46px;
}


/* ==========================================================================
   PAGE SAFETY
   ========================================================================== */

html,
body {
    max-width: 100%;
}

html.pm-modal-open,
body.pm-modal-open,
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}


/* Everything inside a modal must be allowed to shrink */
dialog *,
.modal-overlay *,
.app-modal *,
.ajax-modal *,
.member-modal-overlay *,
.church-modal *,
.birds-modal *,
.dp-modal-backdrop *,
.sc-modal * {
    box-sizing: border-box;
    min-width: 0;
}


/* ==========================================================================
   NATIVE DIALOG
   ========================================================================== */

dialog:not([open]) {
    display: none !important;
}


dialog[open] {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    right: auto !important;
    bottom: auto !important;

    width: clamp(320px, 92vw, 680px) !important;

    min-width: 0 !important;
    max-width: calc(100vw - 40px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 40px) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 1px solid var(--pm-modal-border) !important;
    border-radius: var(--pm-modal-radius) !important;

    background: var(--pm-modal-bg) !important;
    color: var(--pm-modal-text) !important;

    box-shadow: var(--pm-modal-shadow) !important;

    transform: translate(-50%, -50%) !important;

    z-index: var(--pm-modal-z) !important;

    animation:
        pm-modal-open
        var(--pm-duration)
        var(--pm-ease)
        both;
}


dialog::backdrop {
    background: rgba(15, 23, 42, 0.58) !important;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    animation:
        pm-backdrop-open
        var(--pm-duration)
        var(--pm-ease)
        both;
}


@keyframes pm-modal-open {
    from {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


@keyframes pm-backdrop-open {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ==========================================================================
   DIALOG SIZES
   ========================================================================== */

dialog.pm-dialog-sm[open] {
    width: clamp(300px, 88vw, 420px) !important;
}


dialog.pm-dialog-quick[open] {
    width: clamp(300px, 90vw, 520px) !important;
}


dialog.pm-dialog[open] {
    width: clamp(320px, 92vw, 680px) !important;
}


dialog.pm-dialog-lg[open] {
    width: clamp(320px, 94vw, 840px) !important;
}


dialog.pm-dialog-xl[open] {
    width: clamp(320px, 96vw, 1040px) !important;
}


/* Known application dialogs */
#crud-modal[open],
#crud-view-modal[open],
#crud-delete-modal[open],
#meeting-modal[open],
#expense-modal[open],
#annualPlanModal[open],
#confirm-modal[open],
#reminder-alarm-modal[open] {
    max-width: calc(100vw - 40px) !important;
}


/* ==========================================================================
   MODAL STRUCTURE
   ========================================================================== */

dialog[open] > form,
dialog[open] > .pm-modal-content,
dialog[open] > .pm-modal-panel,
dialog[open] > .modal-content,
dialog[open] .pm-modal-form {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;

    min-height: 0 !important;
    max-height: calc(100dvh - 40px) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: var(--pm-modal-bg) !important;

    border-radius: inherit !important;
}


dialog[open] > * {
    max-width: 100%;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

dialog .pm-modal-header,
dialog .modal-header,
.modal-dialog-header,
.app-modal-header,
.ajax-modal-header,
.church-modal-header {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    flex: 0 0 auto !important;

    display: flex !important;

    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 12px !important;

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
        16px
        20px !important;

    background: #ffffff !important;

    border-bottom:
        1px
        solid
        var(--pm-modal-border) !important;

    z-index: 5;
}


dialog .pm-modal-heading {
    flex: 1 1 auto !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 10px !important;

    min-width: 0 !important;
}


dialog .pm-modal-heading > div,
dialog .pm-modal-title-wrap {
    flex: 1 1 auto !important;

    min-width: 0 !important;
}


dialog .pm-modal-icon {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;

    flex: 0 0 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;

    background:
        var(
            --brand-1-tint-10,
            rgba(0, 137, 123, 0.10)
        ) !important;

    color:
        var(
            --brand-1,
            #00897b
        ) !important;
}


dialog .pm-modal-title,
dialog .modal-header h1,
dialog .modal-header h2,
dialog .modal-header h3,
dialog .modal-header h4 {
    margin: 0 !important;

    color: var(--pm-modal-text) !important;

    font-size: 17px !important;
    font-weight: 800 !important;

    line-height: 1.3 !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
}


dialog .pm-modal-description,
dialog .pm-modal-subtitle,
dialog .pm-modal-header p {
    margin:
        3px
        0
        0 !important;

    color: var(--pm-modal-muted) !important;

    font-size: 12px !important;
    line-height: 1.45 !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
}


/* Close button */
dialog .pm-modal-close,
dialog .modal-close,
dialog button[data-modal-close],
dialog button[data-close-modal] {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    max-width: 38px !important;

    flex: 0 0 38px !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border:
        1px
        solid
        var(--pm-modal-border-strong) !important;

    border-radius: 11px !important;

    background: #ffffff !important;

    color: #64748b !important;

    cursor: pointer;

    touch-action: manipulation;
}


dialog .pm-modal-close:hover,
dialog .modal-close:hover,
dialog button[data-modal-close]:hover,
dialog button[data-close-modal]:hover {
    background: #f1f5f9 !important;

    color: #334155 !important;
}


/* ==========================================================================
   BODY
   ========================================================================== */

dialog .pm-modal-body,
dialog .modal-body,
dialog .modal-scroll-body,
dialog [data-modal-scroll],
.modal-dialog-body,
.app-modal-body,
.ajax-modal-body,
.birds-modal-body,
.church-modal-body,
dialog form > .overflow-y-auto,
dialog > .overflow-y-auto {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
        20px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;

    -webkit-overflow-scrolling: touch !important;

    background: #ffffff !important;
}


/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */

dialog label {
    display: block !important;

    max-width: 100% !important;

    margin-bottom: 6px !important;

    color: #334155 !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;

    overflow-wrap: anywhere !important;
}


dialog input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
dialog select,
dialog textarea,
dialog .pm-input {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    border:
        1.5px
        solid
        var(--pm-modal-border-strong) !important;

    border-radius:
        var(--pm-field-radius) !important;

    background: #ffffff !important;

    color:
        var(--pm-modal-text) !important;

    /*
     * 16px also stops iPhone Safari zooming
     * when an input receives focus.
     */
    font-size: 16px !important;
}


dialog input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
dialog select,
dialog .pm-input {
    min-height:
        var(--pm-field-height) !important;

    padding:
        10px
        14px !important;
}


dialog textarea {
    min-height: 100px !important;

    padding:
        11px
        14px !important;

    line-height: 1.5 !important;

    resize: vertical !important;
}


dialog input:focus,
dialog select:focus,
dialog textarea:focus,
dialog .pm-input:focus {
    outline: none !important;

    border-color:
        var(
            --brand-2,
            #6D9773
        ) !important;

    box-shadow:
        0
        0
        0
        4px
        rgba(109, 151, 115, 0.22) !important;
}


dialog input:disabled,
dialog select:disabled,
dialog textarea:disabled {
    background:
        var(--pm-modal-soft) !important;

    color:
        var(--pm-modal-muted) !important;

    cursor: not-allowed;
}


dialog input[type="date"],
dialog input[type="time"],
dialog input[type="datetime-local"],
dialog input[type="file"] {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;
}


/* ==========================================================================
   GRID SAFETY
   ========================================================================== */

dialog .grid,
dialog .pm-form-grid,
dialog .form-grid,
dialog .form-grid-2,
dialog .modal-form-grid,
dialog .member-form-grid {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    gap: 16px !important;
}


dialog .grid > *,
dialog .flex > *,
dialog .pm-form-grid > *,
dialog .form-grid > *,
dialog .form-grid-2 > * {
    min-width: 0 !important;

    max-width: 100% !important;
}


dialog .pm-field-full,
dialog .full-span,
dialog .form-full {
    grid-column:
        1 / -1 !important;
}


/* ==========================================================================
   ATTENDEES / REPEATABLE ROWS
   ========================================================================== */

dialog .participant-row,
dialog .attendee-row,
dialog .repeatable-row,
dialog .pm-expense-item-row {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;
}


/* ==========================================================================
   TABLES / MEDIA
   ========================================================================== */

dialog .table-responsive,
dialog .overflow-x-auto {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;
}


dialog table {
    width: max-content;

    min-width: 100%;
}


dialog img,
dialog video,
dialog canvas,
dialog iframe,
dialog embed,
dialog object {
    max-width: 100% !important;
}


dialog img,
dialog video,
dialog canvas {
    height: auto !important;
}


dialog iframe,
dialog embed,
dialog object {
    width: 100% !important;

    min-height: 260px;

    border: 0;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

dialog .pm-modal-footer,
dialog .modal-footer,
.modal-dialog-footer,
.app-modal-footer,
.ajax-modal-footer,
.church-modal-footer {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    flex: 0 0 auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    flex-wrap: wrap !important;

    gap: 10px !important;

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    padding:
        12px
        20px
        max(
            12px,
            env(safe-area-inset-bottom)
        ) !important;

    background:
        var(--pm-modal-soft) !important;

    border-top:
        1px
        solid
        var(--pm-modal-border) !important;

    z-index: 5;
}


dialog .pm-modal-footer button,
dialog .pm-modal-footer a,
dialog .modal-footer button,
dialog .modal-footer a {
    min-height: 44px !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding:
        10px
        18px !important;

    border-radius: 12px !important;

    font-size: 13.5px !important;

    font-weight: 600 !important;

    touch-action: manipulation;
}


/* ==========================================================================
   LEGACY OVERLAY MODALS
   ========================================================================== */

.modal-overlay,
.app-modal,
.ajax-modal,
.member-modal-overlay,
.church-modal,
.birds-modal,
.dp-modal-backdrop,
.sc-modal,
[data-modal-overlay] {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    padding: 20px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    align-items: center !important;
    justify-content: center !important;

    background:
        rgba(15, 23, 42, 0.58);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    z-index:
        var(--pm-overlay-z) !important;
}


.modal-overlay:not(.show):not(.open):not(.is-open),
.app-modal:not(.show):not(.open):not(.is-open),
.ajax-modal:not(.show):not(.open):not(.is-open),
.member-modal-overlay:not(.show):not(.open):not(.is-open),
.church-modal:not(.show):not(.open):not(.is-open),
.birds-modal:not(.show):not(.open):not(.is-open) {
    display: none;
}


.modal-overlay.show,
.modal-overlay.open,
.modal-overlay.is-open,
.app-modal.show,
.app-modal.open,
.app-modal.is-open,
.ajax-modal.show,
.ajax-modal.open,
.ajax-modal.is-open,
.member-modal-overlay.show,
.member-modal-overlay.open,
.member-modal-overlay.is-open,
.church-modal.show,
.church-modal.open,
.church-modal.is-open,
.birds-modal.show,
.birds-modal.open,
.birds-modal.is-open,
.dp-modal-backdrop.is-open,
.sc-modal.open {
    display: flex !important;
}


.modal-overlay .modal,
.modal-overlay .modal-dialog,
.app-modal .app-dialog,
.ajax-modal .ajax-dialog,
.member-modal-overlay .modal,
.church-modal .church-modal-dialog,
.birds-modal .birds-modal-dialog,
.dp-modal-backdrop .dp-modal-panel,
.sc-modal .sc-modal-panel {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;

    flex-direction: column !important;

    width:
        min(
            680px,
            100%
        ) !important;

    min-width: 0 !important;

    max-width: 100% !important;

    max-height:
        calc(
            100dvh - 40px
        ) !important;

    margin: auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #ffffff !important;

    border-radius:
        var(--pm-modal-radius) !important;

    box-shadow:
        var(--pm-modal-shadow) !important;

    transform: none !important;
}


/* ==========================================================================
   TABLETS
   ========================================================================== */

@media
    (min-width: 641px)
    and
    (max-width: 1023.98px) {

    dialog[open] {
        width:
            min(
                92vw,
                840px
            ) !important;

        max-width:
            calc(
                100vw - 36px
            ) !important;

        max-height:
            calc(
                100dvh - 36px
            ) !important;
    }


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


/* ==========================================================================
   PHONES
   ========================================================================== */

@media (max-width: 640px) {

    /*
    |--------------------------------------------------------------------------
    | IMPORTANT
    |--------------------------------------------------------------------------
    | Do not centre phone dialogs using top:50% / translate(-50%).
    | Give the dialog four viewport edges instead.
    |
    | This behaves much better with:
    | - Chrome address bar
    | - Android keyboard
    | - iPhone Safari
    | - short phones
    | - landscape
    |--------------------------------------------------------------------------
    */

    html body dialog[open],
    html body dialog.pm-modal-shell[open],
    html body dialog[class*="pm-dialog"][open],
    html body #crud-modal[open],
    html body #crud-view-modal[open],
    html body #crud-delete-modal[open],
    html body #meeting-modal[open],
    html body #expense-modal[open],
    html body #annualPlanModal[open],
    html body #confirm-modal[open] {

        position: fixed !important;

        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;

        min-width: 0 !important;

        max-width: none !important;


        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;


        margin: 0 !important;

        padding: 0 !important;


        overflow-x: hidden !important;

        overflow-y: auto !important;


        border-radius:
            var(
                --pm-modal-radius-mobile
            ) !important;


        transform: none !important;


        overscroll-behavior:
            contain !important;

        -webkit-overflow-scrolling:
            touch !important;
    }


    /*
    |--------------------------------------------------------------------------
    | STRUCTURED MODAL
    |--------------------------------------------------------------------------
    */

    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,
    html body #crud-modal[open] > #crud-modal-form {

        display: flex !important;

        flex-direction:
            column !important;


        width: 100% !important;


        min-width: 0 !important;

        max-width: 100% !important;


        height: 100% !important;


        min-height: 0 !important;

        max-height: 100% !important;


        overflow:
            hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER
    |--------------------------------------------------------------------------
    */

    html body dialog[open] .pm-modal-header,
    html body dialog[open] .modal-header {

        flex:
            0 0 auto !important;


        padding:
            12px
            14px !important;


        gap:
            8px !important;
    }


    html body dialog[open] .pm-modal-icon {

        width: 34px !important;

        height: 34px !important;

        min-width:
            34px !important;

        flex:
            0 0 34px !important;
    }


    html body dialog[open] .pm-modal-title,
    html body dialog[open] .modal-header h1,
    html body dialog[open] .modal-header h2,
    html body dialog[open] .modal-header h3 {

        font-size:
            15px !important;

        line-height:
            1.3 !important;
    }


    html body dialog[open] .pm-modal-close,
    html body dialog[open] .modal-close,
    html body dialog[open] button[data-modal-close],
    html body dialog[open] button[data-close-modal] {

        width: 38px !important;

        height: 38px !important;


        min-width:
            38px !important;


        max-width:
            38px !important;


        flex:
            0 0 38px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SCROLLABLE BODY
    |--------------------------------------------------------------------------
    */

    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 0 !important;


        min-height:
            0 !important;


        max-height:
            none !important;


        width:
            100% !important;


        padding:
            14px
            14px
            max(
                18px,
                env(safe-area-inset-bottom)
            ) !important;


        overflow-x:
            hidden !important;


        overflow-y:
            auto !important;


        overscroll-behavior:
            contain !important;


        -webkit-overflow-scrolling:
            touch !important;
    }


    /*
    |--------------------------------------------------------------------------
    | FORCE SINGLE COLUMN
    |--------------------------------------------------------------------------
    */

    html body dialog[open] .pm-modal-body .grid,
    html body dialog[open] .pm-modal-body [class*="grid-cols-"],
    html body dialog[open] .pm-form-grid,
    html body dialog[open] .form-grid,
    html body dialog[open] .form-grid-2,
    html body dialog[open] .modal-form-grid,
    html body dialog[open] .member-form-grid,
    html body dialog[open] .sm\:grid-cols-2,
    html body dialog[open] .md\:grid-cols-2,
    html body dialog[open] .lg\:grid-cols-2,
    html body dialog[open] .lg\:grid-cols-3,
    html body dialog[open] .xl\:grid-cols-2,
    html body dialog[open] .xl\:grid-cols-3,
    html body dialog[open] .xl\:grid-cols-4 {

        display:
            grid !important;


        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;


        width:
            100% !important;


        min-width:
            0 !important;


        max-width:
            100% !important;


        gap:
            12px !important;
    }


    html body dialog[open] [class*="col-span-"] {

        grid-column:
            1 / -1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTROLS
    |--------------------------------------------------------------------------
    */

    html body dialog[open]
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),

    html body dialog[open] select,

    html body dialog[open] textarea,

    html body dialog[open] .pm-input {

        width:
            100% !important;


        min-width:
            0 !important;


        max-width:
            100% !important;


        font-size:
            16px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | ATTENDEE ROW
    |--------------------------------------------------------------------------
    */

    html body dialog[open] .participant-row,
    html body dialog[open] .attendee-row {

        display:
            grid !important;


        grid-template-columns:
            minmax(0, 1fr)
            40px !important;


        gap:
            8px !important;


        align-items:
            center !important;
    }


    html body dialog[open] .participant-row button,
    html body dialog[open] .attendee-row button {

        width:
            40px !important;


        min-width:
            40px !important;


        max-width:
            40px !important;


        min-height:
            40px !important;


        padding:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | EXPENSE / REPEATABLE ROWS
    |--------------------------------------------------------------------------
    */

    html body dialog[open] .repeatable-row,
    html body dialog[open] .pm-expense-item-row {

        display:
            grid !important;


        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;


        gap:
            10px !important;
    }


    html body dialog[open]
    .pm-expense-item-row > * {

        grid-column:
            1 / -1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | FOOTER
    |--------------------------------------------------------------------------
    */

    html body dialog[open] .pm-modal-footer,
    html body dialog[open] .modal-footer {

        flex:
            0 0 auto !important;


        display:
            grid !important;


        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;


        gap:
            8px !important;


        width:
            100% !important;


        padding:
            10px
            14px
            max(
                10px,
                env(safe-area-inset-bottom)
            ) !important;
    }


    html body dialog[open] .pm-modal-footer > *,
    html body dialog[open] .modal-footer > * {

        width:
            100% !important;


        min-width:
            0 !important;


        max-width:
            100% !important;


        min-height:
            44px !important;


        margin:
            0 !important;


        justify-content:
            center !important;


        white-space:
            normal !important;


        overflow-wrap:
            anywhere !important;
    }


    /*
    |--------------------------------------------------------------------------
    | LEGACY OVERLAYS
    |--------------------------------------------------------------------------
    */

    html body .modal-overlay.show,
    html body .modal-overlay.open,
    html body .modal-overlay.is-open,

    html body .app-modal.show,
    html body .app-modal.open,
    html body .app-modal.is-open,

    html body .ajax-modal.show,
    html body .ajax-modal.open,
    html body .ajax-modal.is-open,

    html body .member-modal-overlay.show,
    html body .member-modal-overlay.open,
    html body .member-modal-overlay.is-open,

    html body .church-modal.show,
    html body .church-modal.open,
    html body .church-modal.is-open,

    html body .birds-modal.show,
    html body .birds-modal.open,
    html body .birds-modal.is-open,

    html body .dp-modal-backdrop.is-open,

    html body .sc-modal.open {

        padding:
            max(
                8px,
                env(safe-area-inset-top)
            )

            max(
                8px,
                env(safe-area-inset-right)
            )

            max(
                8px,
                env(safe-area-inset-bottom)
            )

            max(
                8px,
                env(safe-area-inset-left)
            ) !important;


        align-items:
            flex-start !important;
    }


    html body .modal-overlay .modal,
    html body .modal-overlay .modal-dialog,
    html body .app-modal .app-dialog,
    html body .ajax-modal .ajax-dialog,
    html body .member-modal-overlay .modal,
    html body .church-modal .church-modal-dialog,
    html body .birds-modal .birds-modal-dialog,
    html body .dp-modal-backdrop .dp-modal-panel,
    html body .sc-modal .sc-modal-panel {

        width:
            100% !important;


        min-width:
            0 !important;


        max-width:
            100% !important;


        max-height:
            calc(
                100dvh - 16px
            ) !important;


        margin:
            auto !important;


        border-radius:
            var(
                --pm-modal-radius-mobile
            ) !important;


        overflow-y:
            auto !important;
    }
}


/* ==========================================================================
   VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 380px) {

    html body dialog[open] {

        top:
            max(
                5px,
                env(safe-area-inset-top)
            ) !important;


        right:
            max(
                5px,
                env(safe-area-inset-right)
            ) !important;


        bottom:
            max(
                5px,
                env(safe-area-inset-bottom)
            ) !important;


        left:
            max(
                5px,
                env(safe-area-inset-left)
            ) !important;


        border-radius:
            14px !important;
    }


    dialog .pm-modal-header,
    dialog .modal-header,
    dialog .pm-modal-body,
    dialog .modal-body,
    dialog .pm-modal-footer,
    dialog .modal-footer {

        padding-left:
            12px !important;


        padding-right:
            12px !important;
    }
}


/* ==========================================================================
   LANDSCAPE / SHORT PHONES
   ========================================================================== */

@media
    (max-width: 640px)
    and
    (max-height: 620px) {

    html body dialog[open],
    html body #crud-modal[open],
    html body #meeting-modal[open],
    html body #expense-modal[open],
    html body #annualPlanModal[open],
    html body #confirm-modal[open] {

        top:
            max(
                4px,
                env(safe-area-inset-top)
            ) !important;


        right:
            max(
                4px,
                env(safe-area-inset-right)
            ) !important;


        bottom:
            max(
                4px,
                env(safe-area-inset-bottom)
            ) !important;


        left:
            max(
                4px,
                env(safe-area-inset-left)
            ) !important;


        transform:
            none !important;
    }


    dialog .pm-modal-header,
    dialog .modal-header {

        padding-top:
            8px !important;


        padding-bottom:
            8px !important;
    }


    dialog .pm-modal-body,
    dialog .modal-body {

        padding-top:
            10px !important;


        padding-bottom:
            10px !important;
    }
}


/* ==========================================================================
   REMINDER MODAL
   ========================================================================== */

#reminder-alarm-modal[open] {

    width:
        clamp(
            300px,
            90vw,
            440px
        ) !important;


    padding:
        20px !important;


    overflow-y:
        auto !important;


    border-radius:
        18px !important;
}


#reminder-alarm-modal[open]
#reminder-alarm-message {

    display:
        block !important;


    width:
        100% !important;


    max-width:
        100% !important;


    margin:
        0 0 16px !important;


    color:
        #475569 !important;


    line-height:
        1.55 !important;


    overflow-wrap:
        anywhere !important;
}


#reminder-alarm-modal[open]
#reminder-alarm-dismiss {

    min-height:
        44px !important;


    padding:
        10px
        18px !important;


    border-radius:
        12px !important;
}


@media (max-width: 640px) {

    #reminder-alarm-modal[open] {

        top:
            50% !important;


        right:
            max(
                8px,
                env(safe-area-inset-right)
            ) !important;


        bottom:
            auto !important;


        left:
            max(
                8px,
                env(safe-area-inset-left)
            ) !important;


        width:
            auto !important;


        max-width:
            none !important;


        max-height:
            calc(
                100dvh - 16px
            ) !important;


        margin:
            0 !important;


        padding:
            18px !important;


        transform:
            translateY(
                -50%
            ) !important;
    }


    #reminder-alarm-modal[open]
    #reminder-alarm-dismiss {

        width:
            100% !important;


        min-width:
            0 !important;


        max-width:
            100% !important;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    dialog,
    dialog[open],
    dialog::backdrop,

    .modal-overlay,

    dialog input,
    dialog select,
    dialog textarea,
    dialog button {

        animation:
            none !important;


        transition:
            none !important;
    }
}

/* Generated field guidance for modal forms. */
dialog .pm-modal-field-with-hint,
.modal-overlay .pm-modal-field-with-hint,
.app-modal .pm-modal-field-with-hint,
.ajax-modal .pm-modal-field-with-hint,
.member-modal-overlay .pm-modal-field-with-hint,
.church-modal .pm-modal-field-with-hint,
.birds-modal .pm-modal-field-with-hint,
.dp-modal-backdrop .pm-modal-field-with-hint,
.sc-modal .pm-modal-field-with-hint {
    display: block;
    min-width: 0;
}

dialog .pm-modal-field-hint,
.modal-overlay .pm-modal-field-hint,
.app-modal .pm-modal-field-hint,
.ajax-modal .pm-modal-field-hint,
.member-modal-overlay .pm-modal-field-hint,
.church-modal .pm-modal-field-hint,
.birds-modal .pm-modal-field-hint,
.dp-modal-backdrop .pm-modal-field-hint,
.sc-modal .pm-modal-field-hint {
    display: block;
    margin-top: 6px;
    color: var(--pm-modal-muted);
    font-size: 12px;
    line-height: 1.4;
}