/* ============================================================
   DRM Budget — Global UX Tweaks
    1) Desktop layout must use real dimensions, not CSS zoom
   2) Mobile NavMenu must always win over chat FAB / drawer
   3) Hide chat FAB / drawer while mobile NavMenu is open
   ============================================================ */

/* ---------- 1. Desktop layout scale ---------- */
/* Do not use CSS zoom on the root element or on .main-content: both the sidebar
   (position:fixed) and .top-header (position:fixed, nested inside .main-content)
   break because zoom creates a new coordinate/containing-block context that fixed
   descendants get miscalculated against. Scoping the scale to .content instead —
   the routed page body only, a sibling of .top-header inside .main-content — scales
   text/spacing uniformly for the actual work area while the sidebar and header stay
   full-size, fixed and functional regardless of the chosen density. Controlled by
   the "density" control in MainLayout's top-header (see wwwroot/js/ui-scale.js). */
:root { --ui-scale: 1; }
.content { zoom: var(--ui-scale); }

/* ---------- 2. Mobile sidebar wins over chat (z-index war) ---------- */
@media (max-width: 991.98px) {
    .sidebar { z-index: 11000 !important; }
    .mobile-overlay { z-index: 10999 !important; }

    /* While the mobile menu is open, hide chat FAB / drawer / overlay so
       NavMenu remains fully usable. We use the body-level marker class
       toggled by MainLayout. */
    body.mobile-menu-open .online-users-fab,
    body.mobile-menu-open .online-users-drawer,
    body.mobile-menu-open .drawer-overlay,
    .page.mobile-menu-open .online-users-fab,
    .page.mobile-menu-open .online-users-drawer,
    .page.mobile-menu-open .drawer-overlay {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Make sure the hamburger toggle is itself above the FAB even when
       the menu is closed, so the user can always reach the menu. */
    .mobile-menu-toggle { position: relative; z-index: 11050; }
}

/* ---------- 3. Mobile drawer should not steal full screen if user
              tries to scroll horizontally ---------- */
@media (max-width: 576px) {
    .online-users-fab { bottom: 88px !important; right: 12px !important; }
}