/* ============================================
   Mobile Phone Frame — renders /mobile routes
   inside a device-shaped container on desktop.
   ============================================ */

/* Viewport: gray background, centered */
.mobile-frame-viewport {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 0;
    padding-top: 100px;
    height: calc(100dvh - 44px);
    overflow: auto;
    background: #f0f2f5;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mobile-frame-viewport::-webkit-scrollbar {
    display: none;
}

/* Phone shell: iPhone 14 Pro dimensions */
.mobile-frame-device {
    position: relative;
    width: 390px;
    height: 844px;
    background: #1a1a1a;
    border-radius: 48px;
    padding: 12px;
    box-shadow:
        0 0 0 2px #333,
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* Dynamic island / notch */
.mobile-frame-notch {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: #1a1a1a;
    border-radius: 20px;
    z-index: 10;
}

/* Screen area — CSS containment for cqh/cqw units */
.mobile-frame-screen {
    width: 100%;
    height: 100%;
    border-radius: 38px;
    overflow: hidden;
    overflow-y: auto;
    background: #ffffff;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* CSS containment: makes `position: fixed` children
       behave as `position: absolute` within this element,
       and enables container query units (cqh, cqw). */
    container-type: size;
}
.mobile-frame-screen::-webkit-scrollbar {
    display: none;
}

/* Home indicator bar */
.mobile-frame-home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 5px;
    background: #666;
    border-radius: 3px;
    z-index: 10;
}

/* ----------------------------------------
   CSS Overrides for mobile page styles
   inside the phone frame
   ---------------------------------------- */

/* Keep fixed nav elements inside the phone */
.mobile-frame-screen .fixed-bottom,
.mobile-frame-screen .bottom-nav-bar,
.mobile-frame-screen .top-nav-bar {
    position: absolute !important;
}

/* Override 100dvh inline styles with container query height */
.mobile-frame-screen [style*="100dvh"] {
    height: 100cqh !important;
}

/* Override calc(...100dvh...) patterns */
.mobile-frame-screen [style*="calc(100dvh"] {
    height: auto !important;
    min-height: 100cqh !important;
}

/* Jobs list: keep scroll area above bottom nav (use cqh so height stops at nav) */
.mobile-frame-screen .jobs-list-scroll {
    height: calc(100cqh - 130px) !important;
    min-height: 0 !important;
}

/* Ensure the screen scrolls properly */
.mobile-frame-screen > * {
    max-height: 100%;
}

/* ----------------------------------------
   Responsive scaling for smaller viewports
   ---------------------------------------- */

/* Scale down on shorter screens */
@media (max-height: 950px) {
    .mobile-frame-device {
        transform: scale(0.85);
        transform-origin: top center;
    }
}

@media (max-height: 800px) {
    .mobile-frame-device {
        transform: scale(0.75);
        transform-origin: top center;
    }
}

@media (max-height: 650px) {
    .mobile-frame-device {
        transform: scale(0.6);
        transform-origin: top center;
    }
}

/* On very narrow screens, also scale down */
@media (max-width: 500px) {
    .mobile-frame-device {
        transform: scale(0.7);
        transform-origin: top center;
    }
}

/* ----------------------------------------
   Dialog containment — constrain MudBlazor
   dialogs to the phone screen area when
   the mobile frame is active.
   ---------------------------------------- */

/*
   Phone screen geometry (no scaling):
   Device: 390 x 844, padding 12px each side, border-radius 38px on screen.
   Screen inner: 366 x 820.
   Viewport offset: 44px appbar + 100px padding-top = 144px from top.
   The device is centered horizontally.

   Strategy: use CSS custom properties on .mobile-frame-screen,
   then anchor the MudBlazor overlay to that element's rect via
   a positioned ancestor. Since MudBlazor portals dialogs to the
   document root, we use body:has(.mobile-frame-viewport) to scope
   styles and fixed positioning calculated from known dimensions.
*/

/* Phone screen dimensions as CSS variables for reuse */
.mobile-frame-viewport {
    --phone-screen-width: 366px;
    --phone-screen-height: 820px;
    /* Default drawer width (MudBlazor responsive default is 240px).
       Mini mode uses 56px. Override via .mud-drawer-mini selector below. */
    --drawer-width: 240px;
}

/* When nav drawer is in mini (collapsed) mode, use the narrower width */
body:has(.nav-menu-drawer.mud-drawer-mini) .mobile-frame-viewport {
    --drawer-width: 56px;
}

/* When the mobile frame is present, constrain dialog overlays.
   Horizontal: center of content area = 50vw + drawer-width/2.
   Vertical: 44px appbar padding + 100px viewport padding + 12px device padding. */
body:has(.mobile-frame-viewport) .mud-overlay {
    position: fixed !important;
    width: 366px !important;
    height: 820px !important;
    /* Account for nav drawer: content center is shifted right by half drawer width */
    left: calc(50% + 120px) !important;
    top: calc(44px + 12px + 24px) !important;
    transform: translateX(-50%) !important;
    border-radius: 38px !important;
    overflow: hidden !important;
}

/* When nav drawer is in mini mode, adjust horizontal offset */
body:has(.mobile-frame-viewport):has(.nav-menu-drawer.mud-drawer-mini) .mud-overlay {
    left: calc(50% + 28px) !important;
}

/* Full-screen dialogs: constrain to phone screen instead of viewport */
body:has(.mobile-frame-viewport) .mud-dialog.mud-dialog-fullscreen {
    max-width: 366px !important;
    max-height: 820px !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}

/* Non-fullscreen dialogs: constrain max dimensions to phone screen */
body:has(.mobile-frame-viewport) .mud-dialog:not(.mud-dialog-fullscreen) {
    max-width: calc(366px - 32px) !important;
    max-height: calc(820px - 32px) !important;
}

/* Scale overlay position for responsive breakpoints */
@media (max-height: 950px) {
    body:has(.mobile-frame-viewport) .mud-overlay {
        width: calc(366px * 0.85) !important;
        height: calc(820px * 0.85) !important;
        top: calc((44px + 12px) * 0.85 + 24px) !important;
        left: calc(50% + 120px) !important;
    }
    body:has(.mobile-frame-viewport):has(.nav-menu-drawer.mud-drawer-mini) .mud-overlay {
        left: calc(50% + 28px) !important;
    }
}

@media (max-height: 800px) {
    body:has(.mobile-frame-viewport) .mud-overlay {
        width: calc(366px * 0.75) !important;
        height: calc(820px * 0.75) !important;
        top: calc((44px + 12px) * 0.75 + 24px) !important;
        left: calc(50% + 120px) !important;
    }
    body:has(.mobile-frame-viewport):has(.nav-menu-drawer.mud-drawer-mini) .mud-overlay {
        left: calc(50% + 28px) !important;
    }
}

@media (max-height: 650px) {
    body:has(.mobile-frame-viewport) .mud-overlay {
        width: calc(366px * 0.6) !important;
        height: calc(820px * 0.6) !important;
        top: calc((44px + 12px) * 0.6 + 24px) !important;
        left: calc(50% + 120px) !important;
    }
    body:has(.mobile-frame-viewport):has(.nav-menu-drawer.mud-drawer-mini) .mud-overlay {
        left: calc(50% + 28px) !important;
    }
}

@media (max-width: 500px) {
    body:has(.mobile-frame-viewport) .mud-overlay {
        width: calc(366px * 0.7) !important;
        height: calc(820px * 0.7) !important;
        top: calc((44px + 12px) * 0.7 + 24px) !important;
        left: calc(50% + 120px) !important;
    }
    body:has(.mobile-frame-viewport):has(.nav-menu-drawer.mud-drawer-mini) .mud-overlay {
        left: calc(50% + 28px) !important;
    }
}

/* ============================================
   Mobile-viewport mode
   --------------------------------------------
   When the BROWSER itself is phone-sized, the decorative device
   frame and the surrounding desktop chrome (fixed app bar + nav
   drawer) get in the way: the fixed app bar overlays the mobile
   page's own top toolbar and intercepts taps/clicks (and breaks
   scroll-into-view). On a real phone — and for the mobile manual
   test docs / automation which target /mobile/* at a phone
   viewport — we want a true full-window mobile surface instead.

   So at phone widths we collapse the .mobile-frame mock to fill
   the viewport and hide the desktop app bar/drawer. The wide-screen
   device-preview frame above is untouched. All selectors are scoped
   via :has(.mobile-frame-viewport) so ONLY /mobile routes are
   affected — the rest of the web app is unchanged.
   ============================================ */
@media (max-width: 768px) {
    /* Drop the desktop chrome that otherwise overlaps the mobile UI. */
    body:has(.mobile-frame-viewport) .mud-appbar.mud-appbar-fixed-top,
    body:has(.mobile-frame-viewport) .nav-menu-drawer {
        display: none !important;
    }

    body:has(.mobile-frame-viewport) .mud-main-content {
        padding-top: 0 !important;
        margin-left: 0 !important;
    }

    /* Collapse the phone-frame mock to fill the viewport (no notch,
       bezel, shadow or scaling — it becomes the screen itself). */
    .mobile-frame-viewport {
        padding: 0 !important;
        height: 100dvh !important;
        background: #ffffff;
    }

    .mobile-frame-device {
        width: 100% !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .mobile-frame-notch,
    .mobile-frame-home-indicator {
        display: none !important;
    }

    .mobile-frame-screen {
        border-radius: 0 !important;
    }

    /* Dialogs render full-window (as on a real phone), not pinned to
       the mock screen rect. Overrides the desktop-preview offsets above. */
    body:has(.mobile-frame-viewport) .mud-overlay,
    body:has(.mobile-frame-viewport):has(.nav-menu-drawer.mud-drawer-mini) .mud-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    body:has(.mobile-frame-viewport) .mud-dialog.mud-dialog-fullscreen {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }

    body:has(.mobile-frame-viewport) .mud-dialog:not(.mud-dialog-fullscreen) {
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
    }
}