/* =============================================================================
   SUCCESS SPACE EDU LMS — MOBILE NAVIGATION & TOUCH SYSTEM
   Strictly scoped to screens <= 768px. Hidden on desktop viewports.
   ============================================================================= */

/* Desktop Rule: STRICTLY HIDE on screens > 768px */
@media (min-width: 769px) {
    .global-mobile-nav,
    .student-mobile-nav,
    .admin-mobile-nav {
        display: none !important;
    }
    
    body.has-mobile-nav .app-main,
    body.role-student .app-main,
    body.role-admin .app-main {
        padding-bottom: 24px !important;
    }
}

/* Mobile Rule: ONLY on screens <= 768px */
@media (max-width: 768px) {
    /* 1. Safe Container & Bottom Padding so content is never hidden behind bottom bar */
    .app-main,
    body.has-mobile-nav .app-main,
    body.role-student .app-main,
    body.role-admin .app-main {
        padding: 14px 10px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* 2. Glassmorphic Docked Mobile Bottom Navigation Bar */
    .global-mobile-nav,
    .student-mobile-nav,
    .admin-mobile-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        height: auto !important;
        min-height: 60px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border-top: 1.5px solid rgba(226, 232, 240, 0.9) !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.09) !important;
        padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .global-mobile-nav a,
    .student-mobile-nav a,
    .admin-mobile-nav a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 6px 4px !important;
        border-radius: 12px !important;
        color: #64748b !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
    }

    .global-mobile-nav a span.material-symbols-rounded,
    .student-mobile-nav a span.material-symbols-rounded,
    .admin-mobile-nav a span.material-symbols-rounded {
        font-size: 22px !important;
        line-height: 1 !important;
        color: #64748b !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .global-mobile-nav a:active,
    .student-mobile-nav a:active,
    .admin-mobile-nav a:active {
        transform: scale(0.92) !important;
    }

    .global-mobile-nav a.is-active,
    .student-mobile-nav a.is-active,
    .admin-mobile-nav a.is-active {
        color: #2563eb !important;
        font-weight: 850 !important;
        background: #eff6ff !important;
    }

    .global-mobile-nav a.is-active span.material-symbols-rounded,
    .student-mobile-nav a.is-active span.material-symbols-rounded,
    .admin-mobile-nav a.is-active span.material-symbols-rounded {
        color: #2563eb !important;
        transform: translateY(-1px) scale(1.08) !important;
    }

    /* 3. Off-Canvas Sidebar Drawer on Mobile */
    .app-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(84vw, 310px) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 18px 0 40px rgba(10, 20, 45, 0.35) !important;
        z-index: 1050 !important;
        background: #ffffff !important;
    }

    body.sidebar-open .app-sidebar {
        transform: translateX(0) !important;
    }

    body.sidebar-open::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1040 !important;
    }

    /* 4. Topbar adjustments on Mobile */
    .app-topbar {
        padding: 0 12px !important;
        height: 56px !important;
        gap: 8px !important;
    }
    .topbar-left {
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
    .breadcrumb-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.8rem !important;
        max-width: 46vw !important;
    }
    .breadcrumb-wrap a {
        display: none !important;
    }
    .breadcrumb-wrap span {
        display: none !important;
    }
    .breadcrumb-wrap strong {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .topbar-chip {
        display: none !important;
    }
    .topbar-search-label,
    .topbar-search-btn kbd {
        display: none !important;
    }
    .topbar-search-btn {
        padding: 6px 8px !important;
        min-width: 0 !important;
    }
    .topbar-user .user-meta {
        display: none !important;
    }
    .topbar-user {
        padding: 4px !important;
    }
    .sidebar-toggle {
        display: grid !important;
    }
}

/* Hide mobile bottom nav during live fullscreen exam */
body.exam-mode .global-mobile-nav,
body.exam-mode .student-mobile-nav,
body.exam-mode .admin-mobile-nav {
    display: none !important;
}