/* ========================================================================== Shared app-shell mobile fixes (2026-07-18) Loaded on every logged-in "app shell" page (see judesk_app_shell_page_slugs() in functions.php) after that page's own CSS, so these rules win without needing !important. Fixes three bugs that all trace back to the same root cause: body.app-body existed as a selector in several page CSS files already, but nothing ever added that class to — functions.php now does, via judesk_add_app_body_class(). 1. Double header on mobile: the marketing site header (logo, hamburger, login icon, "Start a project") rendered above the app-shell's own sidebar-turned-topbar, which also has its own logo. Two headers stacked. Hidden here on mobile only — desktop keeps both since the sidebar there is a distinct left column, not a second stacked bar. 2. Profile unreachable on mobile: .app-nav (Dashboard / Orders / Profile) was flatly `display:none` under 900px with no replacement — turned into a compact icon+label row instead of hiding it. 3. Notification panel bleeding off-screen: .jd-notif-dropdown anchors with `right:0` relative to its own small wrapper, which on a narrow viewport pushes a 320px-wide panel past the left edge. Repositioned to a centered, viewport-relative fixed panel on small screens. ========================================================================== */ @media (max-width: 900px) { body.app-body .site-header, body.app-body .social-rail { display: none; } /* .app-sidebar becomes the only header on mobile once the marketing one above is hidden — pin it so scrolling app-main doesn't scroll the app's own header away too. */ body.app-body .app-sidebar { position: sticky; top: 0; z-index: 40; flex-wrap: wrap; row-gap: 0.6rem; } body.app-body .app-nav { display: flex !important; flex-direction: row; flex-grow: 0; order: 3; width: 100%; gap: 0.4rem; } body.app-body .app-nav a { flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.5rem 0.3rem; font-size: 0.68rem; text-align: center; line-height: 1.2; } body.app-body .app-nav a svg { width: 17px; height: 17px; } } @media (max-width: 480px) { body.app-body .jd-notif-dropdown { position: fixed; top: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(92vw, 320px); margin-top: 0.5rem; } }