/* layout.device.css (Aluno) --------------------------------------------------------------------------- Structural device-mode overrides. The root element carries either `device-desktop` or `device-mobile`, chosen from the ACTUAL device type (User-Agent / manual override / DeviceInfo on MAUI) and NOT the CSS viewport width. These rules force the correct navigation regardless of width, so zooming the browser on a low-resolution laptop no longer flips a desktop into the mobile layout. Loaded AFTER bootstrap + custom.css so this cascade wins. The original width breakpoints stay in place as the cosmetic/fluid layer and as a graceful fallback when no device class is present (e.g. JS off). Aluno layout note: the sidebar is position-fixed and the content is offset by `.main { margin-left: 260px }` (removed at <=768px). When no aluno is selected the sidebar is not rendered and `.main` carries `ms-0` (no offset). --------------------------------------------------------------------------- */ /* ============================ NAVIGATION ============================ */ /* Desktop sidebar = nav#sidebar.sidebar (markup: "sidebar d-none d-md-block position-fixed"). Mobile bottom bar = ul.sidebar-nav.d-md-none (markup also sets inline display:flex). */ /* ---- DESKTOP device: keep the sidebar + content offset, hide the bottom bar, at ANY width ---- */ html.device-desktop nav#sidebar.sidebar { display: block !important; /* beat .d-none used below the md breakpoint */ } html.device-desktop .main:not(.ms-0) { margin-left: 260px !important; /* keep the fixed-sidebar offset below 768px (skip the no-aluno ms-0 state) */ } html.device-desktop .sidebar-nav.d-md-none { display: none !important; /* hide the mobile bottom bar (shows by default below md) */ } html.device-desktop main.content { padding-bottom: 0 !important; } /* ---- MOBILE device: hide the sidebar, show the bottom bar, drop the offset, at ANY width ---- */ html.device-mobile nav#sidebar.sidebar { display: none !important; } html.device-mobile .sidebar-nav.d-md-none { display: flex !important; /* beat .d-md-none AND the non-important inline display:flex */ } html.device-mobile .main { margin-left: 0 !important; /* drop the 260px offset above 768px */ } html.device-mobile main.content { padding-bottom: 4rem !important; /* room for the fixed bottom bar (mb-md-0 removes the margin when wide) */ } /* ===================== GENERIC DEVICE VISIBILITY UTILITIES ===================== */ /* For page content that must follow the device mode instead of a width breakpoint. Replace a width-based mobile-only utility (d-xl-none / d-md-none) with `device-mobile-only`, and a desktop-only utility (d-none d-xl-block / d-none d-md-block) with `device-desktop-only`. Keep the element's own display utility (d-block/d-flex/...) for the shown state; these rules only HIDE it on the wrong device. */ html.device-desktop .device-mobile-only { display: none !important; } html.device-mobile .device-desktop-only { display: none !important; }