/* RepairDock right-side desktop sidebar (v1). Loaded AFTER reno.css (and after rd-design-system.css when that link exists), so equal-specificity rules win without specificity wars. Token-only: no hardcoded surface/text colours, so Workshop, Slate, Clay and Midnight all keep working, including Midnight's inversions (accent-soft is a dark wash there, accent-ink is dark text). Focus is deliberately NOT restyled here: reno's :focus-visible outline applies unchanged. */ /* Base rule, all widths: hidden. The codebase's own idiom, same as the phone bottom nav which is display:none on desktop. Below 992px the sidebar markup is in the DOM but never shown; a server cannot know the viewport width, so CSS hiding is the honest mechanism. */ .rd-side-nav{display:none;} /* Everything else lives inside min-width:992px and cannot leak below. */ @media (min-width:992px){ :root{--rd-side-w:260px;} /* Desktop slimming of the top bar (coordinator decision 1). The top navbar is navbar-expand-xl, so at 992-1199px it would otherwise still show its hamburger next to the sidebar: two navigations. The sidebar carries every link, so the nav row and the toggler are hidden at desktop and the brand + actions stay. Scoped with body:has(.rd-side-nav) so pages that do NOT render the sidebar (logged-out header, customer portal) keep their toggler untouched. The !important on #nav1 is required because Bootstrap's navbar-expand-xl rule forces .navbar-collapse to display:flex !important at 1200px and up; without it the row would reappear on wide screens. */ /* RD-NAV-V2-POS: v1 hid #nav1 at desktop in every mode; scoped to non-top modes so Top mode restores the pre-v1 navbar exactly. Missing/invalid data-rd-nav is NOT top, so it stays hidden (the left default). This is the ONLY rule in this file that hides #nav1, and the toggler rule below is its only pair. */ html:not([data-rd-nav="top"]) body:has(.rd-side-nav) .app-navbar #nav1{display:none !important;} html:not([data-rd-nav="top"]) body:has(.rd-side-nav) .app-navbar .navbar-toggler{display:none;} /* The panel itself. top:0 + padding-top (NOT top:68px) because the navbar height is fluid (clamp 52-68px); the background runs behind the opaque navbar. No transform anywhere on this panel: a transform would re-parent position:fixed and break modals. */ .rd-side-nav{ display:block; position:fixed; top:0; left:0; bottom:0; width:var(--rd-side-w,260px); z-index:1029; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:var(--rd-surface); border-right:1px solid var(--rd-border); padding:.75rem 1rem 1rem; color:var(--rd-ink); } /* Content offset. padding-right, NEVER margin-right: .container-fluid is width:100%, so margin-right would overflow (today masked only by body overflow-x:hidden, which would silently clip). The width and the offset share --rd-side-w so they can never drift apart. padding-bottom is deliberately untouched: the 86px FAB clearance from reno.css stays exactly as it is. */ html:not([data-rd-nav="right"]):not([data-rd-nav="top"]) .app-main{padding-left:calc(var(--rd-side-w,260px) + 1rem);} html[data-rd-nav="right"] .app-main{padding-right:calc(var(--rd-side-w,260px) + 1rem);} /* Footer offset. footer.php renders followed immediately by