/* ========================================================================== 
   TOPPERWORK — GLOBAL MOBILE MODAL CENTER POLICY
   Phase: 5 — Mobile / WebView Regression Fix

   Purpose:
   - Mobile popups/editors open in the visible viewport center.
   - Remove legacy bottom-sheet/full-screen mobile overrides from popup editors.
   - Preserve Desktop/Tablet behavior because this file is mobile-only.
   - Keep safe-area space around dialogs for Android/iOS WebView readiness.

   IMPORTANT:
   - Navigation drawers/backdrops are intentionally NOT targeted.
   - Long modal content remains scrollable inside the available viewport.
   ========================================================================== */

@media (max-width: 640px) {

    /* ----------------------------------------------------------------------
       Shared popup backdrops / editor shells
       ---------------------------------------------------------------------- */

    .tw-modal,
    .topperwork-profile-editor,
    .topperwork-repeating-editor,
    .topperwork-taxonomy-editor,
    .tw-date__backdrop,
    .topperwork-profile-interaction-modal,
    .topperwork-profile-photo__crop-backdrop,
    .topperwork-languages__modal-backdrop,
    .topperwork-education__modal-backdrop,
    .topperwork-employment__modal-backdrop,
    .topperwork-other-experience__modal-backdrop,
    .topperwork-portfolio__modal-backdrop,
    .topperwork-portfolio__crop-backdrop,
    .topperwork-portfolio__publish-modal-backdrop,
    .topperwork-review-editor-backdrop,
    .topperwork-review-portfolio-delete-modal,
    .topperwork-portfolio-preview {
        align-items: center !important;
        justify-content: center !important;
        place-items: center !important;

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

        box-sizing: border-box !important;
    }


    /* ----------------------------------------------------------------------
       Global TopperWork status / confirmation modal
       ---------------------------------------------------------------------- */

    .tw-modal__dialog {
        width: 100% !important;
        max-width: 28rem !important;
        margin: auto !important;
    }

    .tw-modal__content {
        border-radius: var(--radius-2xl) !important;
    }


    /* ----------------------------------------------------------------------
       Shared Client / Freelancer profile editor
       ---------------------------------------------------------------------- */

    .topperwork-profile-editor__dialog {
        width: min(620px, 100%) !important;

        max-height:
            calc(
                100dvh
                - max(24px, env(safe-area-inset-top))
                - max(24px, env(safe-area-inset-bottom))
            ) !important;

        min-height: 0 !important;

        border:
            1px solid
            var(--color-dashboard-border) !important;

        border-radius: 18px !important;
    }


    /* ----------------------------------------------------------------------
       Profile photo / company logo crop editor
       ---------------------------------------------------------------------- */

    .topperwork-profile-photo__crop-dialog {
        width: min(940px, 100%) !important;
        min-height: 0 !important;

        max-height:
            calc(
                100dvh
                - max(24px, env(safe-area-inset-top))
                - max(24px, env(safe-area-inset-bottom))
            ) !important;

        border-radius: 20px !important;
    }


    /* ----------------------------------------------------------------------
       Onboarding/profile repeating editors that legacy mobile CSS expands
       ---------------------------------------------------------------------- */

    .topperwork-languages__modal,
    .topperwork-education__modal,
    .topperwork-employment__modal,
    .topperwork-other-experience__modal,
    .topperwork-review-editor {
        min-height: 0 !important;

        max-height:
            calc(
                100dvh
                - max(24px, env(safe-area-inset-top))
                - max(24px, env(safe-area-inset-bottom))
            ) !important;

        border-radius: 20px !important;
    }

    .topperwork-languages__modal {
        border: 1px solid var(--languages-card-border, var(--color-border)) !important;
    }

    .topperwork-education__modal {
        border: 1px solid var(--education-card-border, var(--color-border)) !important;
    }

    .topperwork-employment__modal {
        border: 1px solid var(--employment-card-border, var(--color-border)) !important;
    }

    .topperwork-other-experience__modal {
        border: 1px solid var(--other-card-border, var(--color-border)) !important;
    }

    .topperwork-review-editor {
        width: min(760px, 100%) !important;
        border: 1px solid var(--review-border, var(--color-border)) !important;
    }


    /* ----------------------------------------------------------------------
       Safety: long popup content scrolls instead of pushing the dialog offscreen
       ---------------------------------------------------------------------- */

    .topperwork-profile-editor__dialog,
    .topperwork-profile-photo__crop-dialog,
    .topperwork-languages__modal,
    .topperwork-education__modal,
    .topperwork-employment__modal,
    .topperwork-other-experience__modal,
    .topperwork-review-editor,
    .topperwork-repeating-editor__dialog {
        overscroll-behavior: contain;
    }

}