/* ── Dim overlay behind the open mobile drawer ── */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1095;
    cursor: pointer;
    backdrop-filter: blur(1px);
}

/* ── Off-canvas nav drawer ── */
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 285px;
    max-width: 85vw;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

    .mobile-nav-drawer.is-open {
        transform: translateX(0);
    }

.mobile-drawer-user-panel {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bs-light, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    flex-shrink: 0;
}

.mobile-drawer-nav-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .mobile-drawer-nav-scroll::-webkit-scrollbar {
        display: none;
    }

.mobile-nav-drawer .sidebar {
    width: 100%;
    flex: none;
    border-right: none;
    height: auto;
    overflow: visible;
}

    .mobile-nav-drawer .sidebar.menu-tall {
        height: auto;
        max-height: none;
    }

/* ── Release Notes Popup ── */
.release-notes-popup .release-note-body {
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    .release-notes-popup .dxbl-popup {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    .release-notes-popup .release-note-actions {
        flex-direction: column;
        width: 100%;
    }

    .release-notes-popup .release-note-actions .dxbl-btn {
        width: 100%;
        min-height: 44px;
    }

    .release-notes-popup .release-note-footer {
        flex-direction: column;
        align-items: stretch !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE PAGE CONTENT WRAPPERS
   These three classes are injected by MainLayout.razor around every page's
   content when IsMobileLayout is true (MaxWidth <= 1100px).

   Problem without these rules:
     • The divs are unstyled block elements — they grow to their content
       height with no overflow constraint.
     • .content.layout-item (the DxGridLayout 1fr row) has overflow-y: auto
       and min-height: 0, meaning it IS the intended scroll container.
     • Without height: 100% on the wrapper chain, the 1fr constraint is
       never passed down, the inner content expands beyond the viewport, and
       the scroll bar either never appears or appears on the wrong element.

   Fix:
     • .mobile-content-container fills the DxGridLayout content cell exactly
       (height: 100%) and becomes the scroll host.
     • .mobile-scroll-wrapper has min-height: 100% so short pages still fill
       the screen, plus padding-bottom to clear the fixed chatbot button.
     • .mobile-centered-content is a full-width passthrough.
───────────────────────────────────────────────────────────────────────────── */
.mobile-content-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.mobile-scroll-wrapper {
    min-height: 100%;
    /* 5rem clears the fixed chatbot button (≈ 3.5rem) plus a comfortable gap */
    padding-bottom: 5rem;
}

.mobile-centered-content {
    width: 100%;
}