/* layout.device.css (Prof) --------------------------------------------------------------------------- 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/columns regardless of width, so zooming the browser on a low-resolution laptop no longer flips a desktop into the mobile layout. Loaded AFTER bootstrap + app.css + custom.css so this cascade wins. The original Bootstrap 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). --------------------------------------------------------------------------- */ /* ============================ NAVIGATION ============================ */ /* Desktop sidebar = nav#sidebar.sidebar (markup: "sidebar d-none d-md-block"). Mobile bottom bar = ul.sidebar-nav.d-md-none (markup also sets inline display:flex). */ /* ---- DESKTOP device: keep the sidebar, hide the bottom bar, at ANY width ---- */ html.device-desktop nav#sidebar.sidebar { display: block !important; /* beat .d-none used below the md breakpoint */ margin-left: 0 !important; /* beat the <992px off-canvas margin: stay in-flow */ } html.device-desktop nav#sidebar.sidebar.collapsed { margin-left: -260px !important; /* preserve hamburger collapse-to-hide ($sidebar-width: 260px) */ } 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, 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; /* no leftover sidebar gutter */ } html.device-mobile main.content { padding-bottom: 4rem !important; /* room for the fixed bottom bar */ } /* ===================== 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; } /* ========================= CONTENT LAYOUT (Prof 3-column) ========================= */ /* Expanded "filters | list | detail" on desktop; single column + offcanvas filters + list/detail toggle on mobile. Hooks are set in ContentLayout.razor. To avoid breaking each element's natural display, we only force `display:none` on the hidden side and an explicit display where the natural element display would be wrong (the detail column needs flex). The .view-list / .view-detail classes track the ViewType toggle so the mobile single column shows the right pane. */ /* ---- DESKTOP: expanded list/detail (toggle hidden). Filters stay WIDTH-based: inline at >= xxl (1400px), and a narrow/zoomed desktop below xxl collapses the left filter column into the right-hand offcanvas (via the d-xxl-* utilities in the markup). ---- */ html.device-desktop .layout-listdetail-toggle { display: none !important; } html.device-desktop .layout-main-col { display: flex !important; } /* .layout-list-col keeps its natural display (shown). Filter inline/trigger keep their d-xxl-* utilities. */ /* ---- MOBILE: single column honoring ViewType; filters ALWAYS offcanvas (override the d-xxl-* utilities) ---- */ html.device-mobile .layout-filter-inline { display: none !important; } html.device-mobile .layout-filter-trigger { display: flex !important; } html.device-mobile .layout-list-col.view-detail { display: none !important; } html.device-mobile .layout-main-col.view-list { display: none !important; } html.device-mobile .layout-main-col.view-detail { display: flex !important; } /* .layout-listdetail-toggle keeps its d-flex (shown). */ /* The detail pane fills the screen on mobile; the inline `width: clamp(...,700px)` cap is desktop-only. */ html.device-mobile .layout-detail-pane { width: 100% !important; max-width: 100% !important; }