/* ========================================================================== Application shell layout - desktop: fixed charcoal sidebar beside the content, collapsible to icons - mobile: offcanvas sidebar + a persistent bottom navigation bar ========================================================================== */ .erp-shell { background: var(--erp-body-bg); } .erp-topbar { min-height: var(--erp-topbar-height); background: var(--erp-surface) !important; border-color: var(--erp-border) !important; } .erp-content-wrap { width: 100%; max-width: var(--erp-content-width); margin: 0 auto; } /* !important throughout this block: Bootstrap's own `.offcanvas`/`.offcanvas-lg` rules (which `.erp-sidebar` sits alongside on the same

) set background-color/color via compound selectors that otherwise out-specificity a bare single-class override. */ .erp-sidebar { width: var(--erp-sidebar-width); background: var(--erp-sidebar-bg) !important; border-color: var(--erp-sidebar-border) !important; transition: width var(--erp-transition); } .erp-sidebar .offcanvas-header { border-color: var(--erp-sidebar-border) !important; } .erp-sidebar .offcanvas-title { color: var(--erp-sidebar-text) !important; } .erp-sidebar .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .erp-sidebar-inner .erp-sidebar-modules-label { color: var(--erp-sidebar-muted) !important; } @media (min-width: 992px) { .erp-sidebar-inner { position: sticky; top: var(--erp-topbar-height); max-height: calc(100vh - var(--erp-topbar-height)); overflow-y: auto; overflow-x: hidden; } } .erp-main { min-width: 0; } /* --- Sidebar navigation groups ---------------------------------------- */ .erp-nav-group + .erp-nav-group { margin-top: .9rem; } .erp-nav-group-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--erp-sidebar-muted); margin: 0 0 .35rem .5rem; white-space: nowrap; overflow: hidden; } .erp-sidebar .nav-link { display: flex; align-items: center; gap: .6rem; color: var(--erp-sidebar-text) !important; border: 1px solid transparent; border-radius: var(--erp-radius-sm); padding: .48rem .7rem; font-size: .9rem; white-space: nowrap; overflow: hidden; } .erp-sidebar .nav-link:hover { background: var(--erp-sidebar-bg-alt) !important; border-color: var(--erp-sidebar-border) !important; color: var(--erp-sidebar-text) !important; } .erp-sidebar .nav-link.active { background: var(--erp-brand) !important; border-color: var(--erp-brand) !important; color: var(--erp-on-brand) !important; } .erp-sidebar .nav-link:focus-visible { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35); } .erp-nav-ico { flex: 0 0 auto; width: 1.15rem; text-align: center; font-size: 1rem; line-height: 1; } .erp-nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } /* --- Collapsed desktop sidebar (persisted; toggled on ) --------- */ .erp-sidebar-toggle { display: none; } @media (min-width: 992px) { .erp-sidebar-toggle { display: inline-flex; } .erp-sidebar-collapsed .erp-sidebar { width: var(--erp-sidebar-collapsed-width); } .erp-sidebar-collapsed .erp-nav-group-title { opacity: 0; height: .5rem; margin-bottom: 0; } .erp-sidebar-collapsed .erp-sidebar .nav-link { justify-content: center; padding-inline: .35rem; } .erp-sidebar-collapsed .erp-nav-label, .erp-sidebar-collapsed .erp-sidebar-modules-label { display: none; } .erp-sidebar-collapsed .erp-sidebar-inner { padding-inline: .5rem !important; } } /* --- Page header + breadcrumb --------------------------------------- */ .erp-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .15rem 0 .75rem; } .erp-page-header h1 { font-size: 1.35rem; font-weight: 700; color: var(--erp-text); } .erp-breadcrumb { font-size: .8rem; } @media (min-width: 992px) { .erp-main > .container-fluid { max-width: var(--erp-content-width); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } } .erp-footer { background: var(--erp-surface); border-color: var(--erp-border) !important; } /* ========================================================================== Mobile bottom navigation ========================================================================== */ .erp-bottomnav { display: none; } /* Never render as an empty strip on pages that don't populate it. */ .erp-bottomnav:empty { display: none !important; } @media (max-width: 991.98px) { .erp-bottomnav:not(:empty) { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--erp-z-bottomnav); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: var(--erp-bottomnav-height); background: var(--erp-surface); border-top: 1px solid var(--erp-border); box-shadow: 0 -.2rem .7rem rgba(31, 20, 24, .07); padding-bottom: env(safe-area-inset-bottom, 0); } .erp-bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; padding: .4rem .25rem; text-decoration: none; color: var(--erp-muted); font-size: .68rem; font-weight: 600; line-height: 1; } .erp-bottomnav a .erp-nav-ico { font-size: 1.15rem; } .erp-bottomnav a.active { color: var(--erp-brand-text); } .erp-bottomnav a:focus-visible { box-shadow: var(--erp-focus-ring); border-radius: var(--erp-radius-sm); } /* Keep page content clear of the fixed bar. */ .erp-has-bottomnav .erp-main { padding-bottom: calc(var(--erp-bottomnav-height) + 1rem); } }