/* Keep long mobile pages in document flow. Desktop styles stay unchanged. */
@media screen and (max-width: 900px) {
    body { transition: none; }
    .app-layout, .main-content, .section-container {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        contain: none !important;
        content-visibility: visible !important;
    }
    .main-content { margin-left: 0 !important; width: 100% !important; }
    .app-section {
        overflow: visible !important;
        contain: none !important;
        content-visibility: visible !important;
    }
    .app-section.active {
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
    }
    .main-content, .main-content *, .sidebar, .sidebar * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .card, .glass, .w-card, .nolt-kcard {
        will-change: auto !important;
        contain: none !important;
        content-visibility: visible !important;
        transition: none !important;
    }
    .card:hover, .nolt-kcard-link:hover { transform: none !important; }
    /* Wide tables keep their own horizontal scroll; the page scrolls vertically. */
    .table-container, .table-responsive, .data-table-wrapper, .nolt-table-wrap {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: auto;
    }
}

/* Mobile document layout: no translated drawer or nested scrolling page shell. */
@media screen and (max-width: 900px) {
    html { height: auto !important; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
    body { height: auto !important; min-height: 100%; overflow: visible !important; }
    .app-layout, .app-layout > .main-content, .main-content > .section-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        transform: none !important;
        filter: none !important;
    }
    .app-section.active { height: auto !important; min-height: 0 !important; }
    .main-content .card, .main-content .glass, .main-content .w-card,
    .main-content .nolt-kcard, .main-content .main-header {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
        animation: none !important;
    }
    .main-content .card *, .sidebar *, .main-header * { animation: none !important; }
    .main-content .main-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) repeat(3, 36px);
        align-items: center;
        gap: 6px;
        min-height: 64px;
        padding: 10px 12px 10px 64px !important;
        position: relative !important;
    }
    .main-header .header-left { min-width: 0; }
    .main-header .header-left h1 { font-size: 18px; line-height: 24px; }
    .main-header .header-right { display: contents !important; }
    .header-right > .theme-toggle { grid-column: 2; grid-row: 1; }
    .header-right > [onclick*="openTelecomAIModal"] { grid-column: 3; grid-row: 1; }
    .header-right > [onclick*="openEditProfileModal"] { grid-column: 4; grid-row: 1; }
    .header-right > .btn { width: 36px; min-width: 0; height: 38px; padding: 6px !important; }
    .header-right .connection-status { display: none !important; }
    .header-right > .global-search { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-left: 0; }
    .global-search input { font-size: 16px !important; min-height: 44px; }
    #section-dashboard .nexoclow-row, #section-dashboard .payments-quickview {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        align-items: start;
    }
    #section-dashboard .nexoclow-col, #section-dashboard .card, #section-dashboard .w-card {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #section-dashboard .nexoclow-col > div { flex: none !important; height: auto; }
    body > .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        display: none !important;
        flex-direction: column;
        width: min(86vw, 310px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh;
        background: #072448 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        z-index: 10010;
    }
    body > .sidebar.mobile-open { display: flex !important; }
    body > .sidebar .sidebar-brand { flex: 0 0 auto; padding-left: 64px; height: auto; min-height: 64px; }
    body > .sidebar .sidebar-menu {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: auto;
    }
    body > .sidebar .sidebar-footer { flex: 0 0 auto; position: static !important; }
    body.mobile-nav-open { overflow: hidden !important; }
    #mobile-menu-toggle { background: #072448 !important; box-shadow: none !important; }
}

/* A bounded app viewport prevents long document layers on mobile browsers. */
@media screen and (max-width: 900px) {
    html, body {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    body { position: fixed; inset: 0; width: 100% !important; }
    body > .app-layout {
        display: block !important;
        height: var(--mobile-app-height, 100dvh) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .app-layout > .main-content {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .main-content > .main-header { flex: 0 0 auto !important; }
    .main-content > .section-container {
        flex: 1 1 0 !important;
        height: auto !important;
        min-height: 0 !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
        scroll-padding-top: 12px;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
    .main-content > .section-container > .app-section.active { min-height: 0 !important; }
    body > .sidebar .sidebar-menu {
        will-change: scroll-position;
        contain: paint;
        isolation: isolate;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px;
    }
    body > .sidebar { height: var(--mobile-app-height, 100dvh) !important; max-height: var(--mobile-app-height, 100dvh); }
    #mobile-menu-backdrop { touch-action: none; }
}

/* Bounded compositor surfaces for Android/WebKit scroll repaint compatibility. */
@media screen and (max-width: 900px) {
    html.nexo-mobile-compatible .app-layout > .main-content,
    html.nexo-mobile-compatible body > .sidebar {
        transform: translate3d(0, 0, 0) !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        isolation: isolate;
    }
    html.nexo-mobile-compatible body > .sidebar .sidebar-menu {
        contain: none !important;
        isolation: auto;
    }
    html.nexo-mobile-compatible .main-content > .section-container,
    html.nexo-mobile-compatible body > .sidebar .sidebar-menu {
        scroll-behavior: auto !important;
        overflow-anchor: none;
    }
    .mobile-compatibility-status {
        display: block;
        color: #fff;
        font-size: 10px;
        font-weight: 400;
        line-height: 14px;
        opacity: .85;
    }
}
@media screen and (min-width: 901px) { .mobile-compatibility-status { display: none; } }