/* Navicus sidebar colour overrides — loaded after sidebar-modern-v2.css */ :root { --sidebar-bg: #0D1915; --sidebar-bg-dark: #0D1915; --sidebar-bg-hi: #11201B; --sidebar-text: #A4B5AE; --sidebar-text-dark: #A4B5AE; --sidebar-text-muted: #71857D; --sidebar-hover-bg: #11201B; --sidebar-hover-bg-dark: #11201B; --sidebar-active-bg: rgba(63,163,108,.08); --sidebar-active-bg-dark: rgba(63,163,108,.08); --sidebar-active-text: #3FA36C; --sidebar-border: #1F3A30; --sidebar-border-dark: #1F3A30; --sidebar-border-hi: #2A4D40; --primary-color: #3FA36C; --primary-light: rgba(63,163,108,.10); } /* Logo wordmark */ .sidebar-logo-text { font-size: 1.15rem; color: var(--primary-color); font-family: 'Saira', sans-serif; letter-spacing: -0.01em; } .sidebar-logo-text em { font-style: normal; color: var(--sidebar-text-muted); } /* Scrollbar — green tint */ .sidebar-menu-wrapper::-webkit-scrollbar-thumb { background: rgba(63,163,108,.15); } .sidebar-menu-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(63,163,108,.28); } /* ── Collapsed-state fixes ───────────────────────────────────── */ /* When collapsed, the in-sidebar toggle is hidden (it lives in the header band where it gets clipped). The floating .sidebar-expand-btn is the single re-expand control instead — see _menu_modern.html. */ /* Force-hide expanded submenus inside the collapsed sidebar. .sidebar-submenu.expanded { display:block !important } would otherwise show sub-item text and clip it behind the narrow sidebar width. */ .app-sidebar-modern.collapsed .sidebar-submenu { display: none !important; } /* ── Smooth layout shift when sidebar collapses ──────────────── */ .app-header, #kt_app_header { transition: left var(--transition-speed) var(--transition-ease) !important; } .app-wrapper, #kt_app_wrapper { transition: padding-left var(--transition-speed) var(--transition-ease), margin-left var(--transition-speed) var(--transition-ease) !important; } /* Collapsed tooltip */ .collapsed .sidebar-menu-link:hover::after { background: #11201B; color: #E8F2ED; border: 1px solid #2A4D40; padding: 0.4rem 0.9rem; border-radius: 8px; margin-left: 0.75rem; font-size: 0.8rem; font-family: 'Hanken Grotesk', sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.45); } /* Active link — use sidebar-active-text variable */ .sidebar-menu-link.active { color: var(--sidebar-active-text); } /* Active icon — no pulse */ .sidebar-menu-link.active .sidebar-menu-icon { animation: none; color: var(--sidebar-active-text); } /* Badge — tinted ghost */ .sidebar-badge { background: rgba(63,163,108,.12); color: var(--primary-color); border: 1px solid rgba(63,163,108,.2); } /* Sidebar group sections */ .sidebar-group-link { color: var(--sidebar-text-muted); font-family: 'Hanken Grotesk', sans-serif; } .sidebar-group-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); } .sidebar-group-link.expanded { border-left-color: var(--primary-color); color: var(--sidebar-text); } /* ── Floating flyout dropdowns ─────────────────────────────────── JS teleports the submenu to on open so it is never trapped inside the sidebar's overflow:hidden or any ancestor stacking context. Coordinates are set by JS (toggleSubmenu). ────────────────────────────────────────────────────────────── */ .sidebar-submenu { /* Hidden by default — JS adds .expanded after teleporting to body */ display: none !important; max-height: 480px !important; overflow-y: auto !important; overflow-x: hidden !important; opacity: 1 !important; margin: 0 !important; transition: none !important; /* Floating panel appearance */ z-index: 9999; background: #0A1812; border: none; border-radius: 10px; padding: 6px 0; box-shadow: 0 16px 48px rgba(0,0,0,.7); } .sidebar-submenu.expanded { display: block !important; max-height: 480px !important; opacity: 1 !important; margin: 0 !important; } /* Reset staggered entrance animations — instant render in flyout */ .sidebar-submenu-item { transform: none !important; opacity: 1 !important; transition: background 0.12s ease !important; } .sidebar-submenu.expanded .sidebar-submenu-item { transform: none !important; opacity: 1 !important; } .sidebar-submenu.expanded .sidebar-submenu-item:nth-child(n) { transition-delay: 0s !important; } /* Adjust link padding — no deep indent needed in floating panel */ .sidebar-submenu-link { padding-left: 1rem; } .sidebar-submenu-link:hover { padding-left: 1.25rem; } /* Section headers inside the flyout panel */ .sidebar-group-link { padding: 6px 14px; font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; } /* Inner subgroup accordion inside the flyout stays inline */ .sidebar-subgroup { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .sidebar-subgroup.expanded { max-height: 600px; }