/* ============================================================================
   pulse-mobile.css — mobile-only layout fixes (scoped to small screens).
   Loaded LAST in App.razor so these rules win over the base layout CSS.
   Everything here is inside a max-width media query, so desktop is untouched.
   ============================================================================ */

@media (max-width: 768px) {

    /* --- 1) Shell: use dynamic viewport height (mobile browser chrome changes
             the usable height) and let the content region scroll instead of the
             fixed 100vh + overflow:hidden lock that clips everything. ------------ */
    .MasterLayoutParent {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .MasterLayoutContent {
        height: calc(100dvh - 112px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Zone shells nested inside the content region must be allowed to scroll. */
    .PulseZoneParent {
        height: auto !important;
        min-height: 100%;
    }

    .PulseZoneContent {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    /* --- 2) Zone sub-menu bars (Production, Inventory, Sales, ...): on a phone the
             FluentAppBar collapses every item except the first into a "View more apps"
             overflow popover, so the menu looks "minimized". Fix: give the menu its own
             full-width line, force ALL items to stay visible, and let the zone action
             button (e.g. MONITOR) wrap onto its own line below. ---------------------- */

    /* The row is fixed at 56px; allow it to grow so the wrapped action button fits. */
    .zone-toprow {
        height: auto !important;
        min-height: 56px;
        flex-wrap: wrap !important;
        row-gap: 2px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* The inner FluentStack renders as .stack-horizontal with an inline width:50%.
       Give it the whole row so the app bar has all the width it needs. */
    .zone-toprow > .stack-horizontal:first-child {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        order: 1 !important;
    }

    /* Spacer + action button drop below the menu, on their own line. */
    .zone-toprow > .stack-horizontal:first-child ~ * {
        order: 2 !important;
    }

    .zone-toprow > fluent-button {
        margin-top: 2px !important;
    }

    .zone-toprow .fluent-appbar {
        width: 100% !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;      /* zones with many items stay swipe-scrollable */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .zone-toprow .fluent-appbar::-webkit-scrollbar {
            display: none;
        }

    /* Fluent tags overflowed items with an [overflow] attribute (hidden via display:none)
       and the "View more apps" trigger with [fixed]. Force every item back into view and
       drop the now-redundant trigger, so the menu is always fully expanded. */
    .zone-toprow .fluent-appbar .fluent-appbar-item[overflow] {
        display: block !important;
    }

    .zone-toprow .fluent-appbar .fluent-appbar-item[fixed] {
        display: none !important;
    }

    /* Compact each item (icon + small truncated label) so all fit the row. */
    .zone-toprow .fluent-appbar .fluent-appbar-item {
        min-width: 0 !important;
        max-width: 60px !important;
        flex: 0 0 auto !important;
        height: calc(56px * 0.9) !important;
        align-self: center;
    }

        .zone-toprow .fluent-appbar .fluent-appbar-item a {
            padding: 2px 0 !important;
        }

        .zone-toprow .fluent-appbar .fluent-appbar-item .stack-vertical > *:not(svg) {
            font-size: 8.5px !important;
            line-height: 10px !important;
            max-width: 58px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            display: block !important;
            text-align: center !important;
        }

        .zone-toprow .fluent-appbar .fluent-appbar-item svg {
            width: 22px !important;
        }

    /* --- 3) Off-canvas popout panels: on phones make them cover the viewport and
             scroll their own body. Several are authored at fixed/partial widths;
             normalise them so the content is fully reachable. -------------------- */
    .offcanvas.offcanvas-start,
    .offcanvas.offcanvas-end {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .offcanvas.offcanvas-top,
    .offcanvas.offcanvas-bottom {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    /* Ensure the panel itself and its body can scroll on touch. */
    .offcanvas,
    .offcanvas-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Off-canvas is position:fixed, but a transformed/animated ancestor (BlazorAnimation)
       can become its containing block and clip it. Pin it to the viewport and lift it
       above the app chrome so it always appears on top. */
    .offcanvas.show,
    .offcanvas.offcanvas-end.show,
    .offcanvas.offcanvas-start.show {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 3000 !important;
    }

    .offcanvas-backdrop.show {
        z-index: 2999 !important;
    }

    /* --- 4) Fluent popovers / anchored menus: cap width so they don't overflow the
             screen edge, and allow their contents to scroll. --------------------- */
    fluent-anchored-region,
    .fluent-popover {
        max-width: 96vw !important;
    }

    /* The Fluent app-bar collapses its items into a "View more apps" overflow popover on
       narrow screens. That popover (a fluent-anchored-region child of nav.fluent-appbar)
       is positioned "vertical-center" against a 56px-tall header, which throws it off the
       top of the screen (y is negative) and it looks stuck. Pin it just below the header,
       full width, on-screen and scrollable. Scoped to the app-bar so tooltips/dropdowns
       (other anchored regions) are unaffected. */
    nav.fluent-appbar > fluent-anchored-region {
        position: fixed !important;
        top: 56px !important;
        left: 4px !important;
        right: 4px !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100vw - 8px) !important;
        max-height: calc(100dvh - 64px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 9999 !important;
    }

    /* --- 5) Modal dialogs (Radzen + Fluent): several are opened at fixed pixel widths
             (e.g. the client search dialog at 700px) and can restore a dragged position
             off-screen. On phones, clamp them to the viewport, reset any saved position,
             and let the body scroll so they're always fully usable. -------------------- */
    .rz-dialog-wrapper .rz-dialog,
    .rz-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
        height: auto !important;
        max-height: 92dvh !important;
        left: 2vw !important;
        top: 3dvh !important;
        overflow: hidden !important;
    }

        .rz-dialog .rz-dialog-content {
            max-height: 80dvh !important;
            overflow: auto !important;
            -webkit-overflow-scrolling: touch;
        }

    fluent-dialog::part(control),
    .fluent-dialog {
        max-width: 96vw !important;
        max-height: 92dvh !important;
    }
}