/* Sidebar Drawer (responsive) */ /* #content-wrapper's overflow-x: hidden (sb-admin-2.css) turns it into a scroll container, which breaks position:sticky on the topbar inside it (any ancestor with overflow other than visible does). Guard against horizontal scroll on only -- it's already the document's root scroller, so this doesn't introduce a new nested scroll container the way setting it on or a wrapping div would. */ html { overflow-x: hidden; } #wrapper #content-wrapper { overflow-x: visible; /* #content-wrapper's own width: 100% (sb-admin-2.css) is measured against #wrapper's full width, on top of the sidebar's own width -- the two together are always wider than #wrapper, which used to just get silently clipped by the overflow-x: hidden removed above. Let flexbox size it to the remaining space instead of overflowing off-screen. */ width: auto; flex: 1 1 auto; min-width: 0; } @media (min-width: 768px) { #accordionSidebar.sidebar { flex: 0 0 auto; transition: width 0.2s ease; /* Cap the sidebar to the viewport height and let it scroll its own menu instead of growing taller than the screen (min-height: 100vh in sb-admin-2.css only sets a floor, not a ceiling). */ position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; } #accordionSidebar.sidebar::-webkit-scrollbar { width: 6px; } #accordionSidebar.sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); border-radius: 3px; } } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1039; opacity: 0; transition: opacity 0.25s ease; } .sidebar-backdrop.show { display: block; opacity: 1; } @media (max-width: 767.98px) { #accordionSidebar.sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: 17rem !important; max-width: 85vw; transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 1040; overflow-y: auto; overflow-x: hidden; box-shadow: 0.25rem 0 1rem rgba(0, 0, 0, 0.15); } #accordionSidebar.sidebar.show { transform: translateX(0); } #accordionSidebar.sidebar .nav-item .nav-link { text-align: left; width: 100%; padding: 1rem; } #accordionSidebar.sidebar .nav-item .nav-link i { font-size: 0.85rem; margin-right: 0.25rem; } #accordionSidebar.sidebar .nav-item .nav-link span { display: inline; font-size: 0.85rem; white-space: normal !important; word-break: break-word; overflow: visible !important; text-overflow: clip !important; } #accordionSidebar.sidebar .sidebar-brand-text { display: inline; } #accordionSidebar.sidebar .sidebar-heading { text-align: left; } #accordionSidebar.sidebar .nav-item .collapse, #accordionSidebar.sidebar .nav-item .collapsing { position: relative; left: 0; top: 0; margin: 0 1rem; } body.sidebar-drawer-open { overflow: hidden; } /* sb-admin-2.css gives .container-fluid a flat 1.5rem side padding, which eats a disproportionate share of a phone-width screen. Shrink it on mobile so page content can use most of the viewport. */ .container, .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; } } @media (min-width: 768px) { .sidebar-backdrop { display: none !important; } } /* ========================================================================== Modern skin: sidebar + topbar ========================================================================== */ :root { --sb-bg: #171b2e; --sb-bg-elevated: #1f2440; --sb-hover: rgba(255, 255, 255, 0.06); --sb-text: rgba(255, 255, 255, 0.62); --sb-text-active: #ffffff; --sb-heading: rgba(255, 255, 255, 0.32); --sb-divider: rgba(255, 255, 255, 0.08); --sb-accent: #4e73df; --sb-accent-soft: rgba(78, 115, 223, 0.18); --tb-border: #e5e7eb; --tb-text: #475569; } /* --- Sidebar --- */ #accordionSidebar.sidebar { background: var(--sb-bg) !important; box-shadow: none; padding-bottom: 0.5rem; } #accordionSidebar .sidebar-brand { height: 4.5rem; color: #fff; font-weight: 700; letter-spacing: 0.02em; } #accordionSidebar .sidebar-brand-icon i { color: var(--sb-accent); } #accordionSidebar hr.sidebar-divider { border-top: 1px solid var(--sb-divider); margin: 0.5rem 1.25rem; } #accordionSidebar .sidebar-heading { color: var(--sb-heading) !important; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; padding: 0 1.25rem; margin-top: 1.25rem !important; } #accordionSidebar .nav-item { padding: 0 0.75rem; } #accordionSidebar .nav-item .nav-link { display: flex !important; align-items: center; gap: 0.65rem; width: 100% !important; color: var(--sb-text) !important; font-size: 0.85rem; font-weight: 500; border-radius: 0.5rem; padding: 0.65rem 0.9rem !important; margin: 0.15rem 0; transition: background-color 0.15s ease, color 0.15s ease; } #accordionSidebar .nav-item .nav-link i { width: 1.1rem; margin-right: 0 !important; text-align: center; opacity: 0.8; flex-shrink: 0; } #accordionSidebar .nav-item .nav-link span { min-width: 0; white-space: normal; word-break: break-word; line-height: 1.3; } #accordionSidebar .nav-item .nav-link:hover, #accordionSidebar .nav-item .nav-link:focus { background-color: var(--sb-hover); color: var(--sb-text-active) !important; } #accordionSidebar .nav-item.active .nav-link { background-color: var(--sb-accent-soft); color: var(--sb-text-active) !important; font-weight: 700 !important; box-shadow: inset 3px 0 0 var(--sb-accent); } #accordionSidebar .nav-item.active .nav-link i { color: var(--sb-accent); opacity: 1; } #accordionSidebar.sidebar.toggled .nav-item .nav-link { justify-content: center; } #accordionSidebar.sidebar.toggled .nav-item .nav-link span { display: none; } #accordionSidebar #sidebarToggle { display: inline-flex; align-items: center; justify-content: center; background-color: var(--sb-hover); color: var(--sb-text); } #accordionSidebar #sidebarToggle:hover { background-color: var(--sb-accent-soft); color: #fff; } /* The chevron used to be a ::after unicode glyph in a "Font Awesome 5 Free" webfont (sb-admin-2.css), but the FA kit script in renders icons via SVG/JS replacement instead of that webfont, so the glyph never showed. Use a real icon in the markup and animate that instead. */ #accordionSidebar #sidebarToggle::after { content: none !important; } #accordionSidebar #sidebarToggle i { transition: transform 0.2s ease; } #accordionSidebar.sidebar.toggled #sidebarToggle i { transform: rotate(180deg); } /* --- Topbar --- */ .topbar.sticky-top { background-color: #fff !important; box-shadow: none !important; border-bottom: 1px solid var(--tb-border); padding: 0.65rem 1rem; } .topbar .nav-item .nav-link { color: var(--tb-text) !important; border-radius: 0.5rem; } .topbar .nav-item .nav-link:hover { background-color: #f1f3f9; } .topbar #userDropdown .far.fa-user-circle { font-size: 1.7rem; } .topbar .dropdown-menu { border: 1px solid var(--tb-border); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); border-radius: 0.6rem; overflow: hidden; } .topbar .dropdown-item:hover { background-color: #f1f3f9; } #sidebarToggle.btn-link { color: var(--tb-text); }