/* ========================================================================== Sidebar redesign — Imperium Business Suite File path: public/assets/css/sidebar-redesign.css Loaded from: resources/views/common/navigations/user_header.blade.php Approach: Layer over the existing Metronic .aside markup without touching the partial blade templates. All selectors are scoped to .aside / .menu-* so we never bleed onto the rest of the app. Design source: Figma — Imperium (Copy) > B2B Sibling parity: resources/views/partials/sidebar-nav.blade.php in the navigator (B2C) project, color/hover language re-used. ========================================================================== */ :root { --imp-primary: #585FFF; --imp-primary-50: #ECECFF; /* active pill background */ --imp-primary-100: #D7D9FF; /* active pill border */ --imp-primary-soft: rgba(88, 95, 255, 0.06); /* hover wash */ --imp-text-default: #4E4E55; /* active label */ --imp-text-muted: #9191AD; /* idle label */ --imp-divider: #DEDFEC; --imp-aside-bg: #FFFFFF; --imp-aside-shadow: 0 0 24px rgba(11, 13, 35, 0.04); --imp-toggle-grad: linear-gradient(-58.99deg, #1491DC 2.5%, #8838E8 98.7%); --imp-radius-pill: 20px; --imp-radius-circle: 50%; --imp-aside-w-open: 268px; --imp-aside-w-closed: 76px; --imp-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- 1. Aside container — the fixed left column -------------------------------------------------------------------------- */ body .aside.aside-light { background: var(--imp-aside-bg) !important; box-shadow: var(--imp-aside-shadow); border-right: 1px solid var(--imp-divider); width: var(--imp-aside-w-open) !important; /* Transitions only enabled AFTER first paint (JS adds .imp-transitions-ready to on next animation frame). On initial load the sidebar paints straight into its final collapsed/expanded state with NO animation. */ transition: none; } html.imp-transitions-ready body .aside.aside-light { transition: width var(--imp-transition); } body[data-kt-aside-minimize="on"] .aside.aside-light { width: var(--imp-aside-w-closed) !important; } body .aside .aside-menu { width: 100% !important; background: transparent !important; overflow-x: hidden !important; /* hide horizontal during width transition */ overflow-y: hidden !important; /* desktop default — Metronic's hover-scroll plugin handles vertical on lg+ */ } /* Hide overflow while the aside is animating its width so menu-link labels don't peek past the new edge mid-collapse. Once the aside finishes transitioning, native overflow rules take over. */ body .aside.aside-light { overflow: hidden !important; } /* -------------------------------------------------------------------------- 2. Logo area -------------------------------------------------------------------------- */ body .aside .aside-logo, body .aside #kt_aside_logo { padding: 18px 16px 14px !important; background: transparent !important; border-bottom: none !important; display: flex; align-items: center; justify-content: center; min-height: 64px; } body .aside .aside-logo img.logo, body .aside #kt_aside_logo img.logo { height: 28px !important; width: auto !important; transition: opacity var(--imp-transition); } body[data-kt-aside-minimize="on"] .aside .aside-logo img.logo, body[data-kt-aside-minimize="on"] .aside #kt_aside_logo img.logo { height: 24px !important; } /* -------------------------------------------------------------------------- 3. Collapse toggle button — circular, brand gradient, white chevron -------------------------------------------------------------------------- */ body #kt_aside_toggle { position: absolute !important; top: 22px !important; right: -18px !important; width: 36px !important; height: 36px !important; border-radius: var(--imp-radius-circle) !important; background: var(--imp-toggle-grad) !important; box-shadow: 0 4px 12px rgba(88, 95, 255, 0.28); display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; z-index: 110; transition: transform var(--imp-transition); } /* Toggle direction: the inner ONLY rotates 180° when the toggle has class .active (which Metronic adds in collapsed state). So: - Expanded: inner 0° → chevron shows natural < (the SVG path "M14 16L10 12L14 8" forms a left-pointing arrow). Reads as "click to collapse". - Collapsed: inner 180° → flipped to > . Reads as "click to expand". We don't add any extra rotation on the button — let .rotate-180 do the work. */ body #kt_aside_toggle:hover { transform: scale(1.05); } body #kt_aside_toggle .svg-icon, body #kt_aside_toggle i { color: #FFFFFF !important; } body #kt_aside_toggle .svg-icon svg [fill]:not(.permanent):not(g) { fill: #FFFFFF !important; } body #kt_aside_toggle .svg-icon svg path, body #kt_aside_toggle .svg-icon svg [stroke]:not(.permanent):not(g) { stroke: #FFFFFF !important; } /* In collapsed state, force the chevron to rotate 180° (= '>'). Can't rely on Metronic's .rotate-180 class because Metronic only adds the .active class to the toggle button when the user CLICKS it — not when our cookie-driven default-collapse is applied. So scope the rotation directly to body[data-kt-aside-minimize='on']. */ body[data-kt-aside-minimize="on"] #kt_aside_toggle .svg-icon { transform: rotate(180deg); } /* -------------------------------------------------------------------------- 4. Divider rule between primary and secondary menu groups -------------------------------------------------------------------------- */ body .aside .aside-menu .divider { border: none !important; border-top: 1px solid var(--imp-divider) !important; width: 86% !important; margin: 14px auto !important; transition: width var(--imp-transition); } body[data-kt-aside-minimize="on"] .aside .aside-menu .divider { width: 60% !important; margin: 12px auto !important; } /* -------------------------------------------------------------------------- 5. Menu items — base / idle state -------------------------------------------------------------------------- */ body .aside .menu .menu-item { margin: 0 !important; padding: 0 12px !important; margin-bottom: 4px !important; transition: padding var(--imp-transition); } body .aside .menu .menu-item .menu-link { margin: 0 !important; /* kill inherited 20px margin pushing items right */ padding: 9px 12px !important; border-radius: var(--imp-radius-pill) !important; border: 1px solid transparent !important; background: transparent !important; color: var(--imp-text-muted) !important; /* Only cosmetic transitions on the link itself. Layout properties (padding, width, border-radius, flex) are intentionally NOT transitioned — animating them mid-collapse causes visible jitter because the parent .menu-item flex justify-content snaps instantly and reflows the child each frame. Layout snaps; the outer .aside container width is what transitions smoothly. Standard pro-sidebar pattern (see GitHub, Linear, Notion sidebars). */ transition: background var(--imp-transition), color var(--imp-transition), border-color var(--imp-transition); } body .aside .menu .menu-item .menu-link .menu-title { color: var(--imp-text-muted) !important; font-family: 'Poppins', system-ui, -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; margin-left: 12px !important; letter-spacing: 0; transition: color var(--imp-transition); } body .aside .menu .menu-item .menu-link .menu-icon { width: 28px !important; height: 28px !important; margin-right: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 28px; } /* --- New img-based icons (sibling parity) --- menu-icon now contains either the existing inline SVG OR an with class .imp-icon pointing to a sibling SVG. The img scales to fill its parent box and tints to the current text color via filter when active. */ body .aside .menu .menu-item .menu-link .menu-icon img.imp-icon { width: 26px !important; height: 26px !important; object-fit: contain; display: block; /* filter mimics sibling's pattern for monochrome icons — active state will recolor via CSS filter below */ transition: filter var(--imp-transition); } /* svg-icon wrapper around the img — let it not constrain the img size */ body .aside .menu .menu-item .menu-link .menu-icon .svg-icon { width: auto !important; height: auto !important; line-height: 0; } /* Active state for img-based icons: tint to brand purple via filter (sibling's same trick — works for any monochrome SVG without modifying the file content). */ body .aside .menu .menu-item .menu-link.active .menu-icon img.imp-icon, body .aside .menu .menu-item.show > .menu-link .menu-icon img.imp-icon { filter: brightness(0) saturate(100%) invert(31%) sepia(94%) saturate(5395%) hue-rotate(229deg) brightness(91%) contrast(91%); } /* Hover: same tint on hover */ body .aside .menu .menu-item .menu-link:hover .menu-icon img.imp-icon { filter: brightness(0) saturate(100%) invert(31%) sepia(94%) saturate(5395%) hue-rotate(229deg) brightness(91%) contrast(91%); } body .aside .menu .menu-item .menu-link .menu-icon .svg-icon { color: var(--imp-text-muted) !important; } body .aside .menu .menu-item .menu-link .menu-icon .svg-icon svg { width: 26px !important; height: 26px !important; } body .aside .menu .menu-item .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) { fill: var(--imp-text-muted) !important; transition: fill var(--imp-transition); } body .aside .menu .menu-item .menu-link .menu-icon .svg-icon svg [stroke]:not(.permanent):not(g) { stroke: var(--imp-text-muted) !important; transition: stroke var(--imp-transition); } body .aside .menu .menu-item .menu-link .menu-arrow { transition: transform var(--imp-transition); } body .aside .menu .menu-item .menu-link .menu-arrow:before { color: var(--imp-text-muted); } /* -------------------------------------------------------------------------- 6. Hover state — soft purple wash, primary color icon/text -------------------------------------------------------------------------- */ body .aside .menu .menu-item .menu-link:hover { background: var(--imp-primary-soft) !important; color: var(--imp-primary) !important; } body .aside .menu .menu-item .menu-link:hover .menu-title { color: var(--imp-primary) !important; } body .aside .menu .menu-item .menu-link:hover .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) { fill: var(--imp-primary) !important; } body .aside .menu .menu-item .menu-link:hover .menu-icon .svg-icon svg [stroke]:not(.permanent):not(g) { stroke: var(--imp-primary) !important; } /* -------------------------------------------------------------------------- 7. Active state — light purple pill, primary icon, dark text -------------------------------------------------------------------------- */ body .aside .menu .menu-item .menu-link.active, body .aside .menu .menu-item.show > .menu-link { background: var(--imp-primary-50) !important; border-color: var(--imp-primary-100) !important; color: var(--imp-text-default) !important; } body .aside .menu .menu-item .menu-link.active .menu-title, body .aside .menu .menu-item.show > .menu-link .menu-title { color: var(--imp-text-default) !important; font-weight: 600 !important; } body .aside .menu .menu-item .menu-link.active .menu-icon .svg-icon, body .aside .menu .menu-item.show > .menu-link .menu-icon .svg-icon { color: var(--imp-primary) !important; } body .aside .menu .menu-item .menu-link.active .menu-icon .svg-icon svg [fill]:not(.permanent):not(g), body .aside .menu .menu-item.show > .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) { fill: var(--imp-primary) !important; } body .aside .menu .menu-item .menu-link.active .menu-icon .svg-icon svg [stroke]:not(.permanent):not(g), body .aside .menu .menu-item.show > .menu-link .menu-icon .svg-icon svg [stroke]:not(.permanent):not(g) { stroke: var(--imp-primary) !important; } /* -------------------------------------------------------------------------- 8. Menu group titles ("Dashboard", "Resources", "See more") — section labels -------------------------------------------------------------------------- */ body .aside .menu .menu-section, body .aside .menu .menu-content .menu-section { color: var(--imp-text-muted) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 12px 24px 4px !important; } /* -------------------------------------------------------------------------- 9. Submenu (See More / Resources expanded children) -------------------------------------------------------------------------- */ body .aside .menu .menu-sub .menu-item .menu-link { padding: 8px 14px !important; font-size: 13px !important; } body .aside .menu .menu-sub .menu-item .menu-link .menu-title { font-size: 13px !important; } /* -------------------------------------------------------------------------- 10. Collapsed state — icon-only, centered, circular active pill -------------------------------------------------------------------------- */ body[data-kt-aside-minimize="on"] .aside .menu .menu-item { padding: 0 !important; display: flex !important; justify-content: center !important; /* Generous vertical breathing room between icons in collapsed state — matches sibling's `.imp-sidebar-nav { gap: 24px }` proportions for our slightly larger 48px icon circles. */ margin-bottom: 18px !important; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; /* break Metronic's flex-basis: 100% */ padding: 0 !important; border-radius: var(--imp-radius-circle) !important; justify-content: center !important; align-items: center !important; } body .aside .menu .menu-item .menu-link .menu-title, body .aside .menu .menu-item .menu-link .menu-arrow { opacity: 1; transition: opacity var(--imp-transition); } body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link .menu-title, body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link .menu-arrow, body[data-kt-aside-minimize="on"] .aside .menu .menu-section, body[data-kt-aside-minimize="on"] .aside .menu .menu-content { opacity: 0; width: 0 !important; overflow: hidden; pointer-events: none; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link.active { width: 48px !important; height: 48px !important; margin: 0 auto !important; /* perfect-center the circular pill in 76px column */ border-radius: var(--imp-radius-circle) !important; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link .menu-icon { margin: 0 !important; } /* -------------------------------------------------------------------------- 10b. "See more" toggle button — overrides inline kt-primary color (the partial sets style="color: var(--kt-primary)" inline on both #seeMoreBtn and #seeMoreText, which made the button look active by default. Force idle/hover/active states via !important here since inline styles only yield to !important from a stylesheet.) -------------------------------------------------------------------------- */ body .aside #seeMoreBtn { color: var(--imp-text-muted) !important; } body .aside #seeMoreBtn #seeMoreText { color: var(--imp-text-muted) !important; transition: color var(--imp-transition); } body .aside #seeMoreBtn:hover { color: var(--imp-primary) !important; } body .aside #seeMoreBtn:hover #seeMoreText { color: var(--imp-primary) !important; } /* When See More is expanded, JS swaps text to "See less" — keep it muted */ body .aside #seeMoreBtn:hover #seeMoreChevron path, body .aside #seeMoreBtn:hover .svg-icon svg [stroke]:not(.permanent) { stroke: var(--imp-primary) !important; } /* -------------------------------------------------------------------------- 11. Aside footer / logout / referral pills (when present) -------------------------------------------------------------------------- */ body .aside .aside-footer .menu-item .menu-link { border-radius: var(--imp-radius-pill) !important; } /* -------------------------------------------------------------------------- 11b. My Profile (.imp-item-profile) — sibling's signature "profile circle" treatment. Different layout per state: - Expanded: circle is wrapped around just the icon, text label sits next to it normally. Link itself behaves like other items. - Collapsed: link IS the 54px circle (matches sibling). -------------------------------------------------------------------------- */ /* EXPANDED state: link looks normal (no pill wrapper); the icon container is wrapped in its own circle around the logo. */ body .aside .menu .menu-item.imp-item-profile > .menu-link .menu-icon { width: 38px !important; height: 38px !important; min-width: 38px !important; flex: 0 0 38px !important; border-radius: 50% !important; background: #FFFFFF !important; border: 1px solid #DAC5FF !important; /* no overflow: hidden — let the logo's top-dot accent show even if it visually extends slightly above the artwork */ } body .aside .menu .menu-item.imp-item-profile > .menu-link .menu-icon img.imp-icon-logo { /* multi-color logogsvg — exempt from monochrome filter sized small enough that the three-dot accent at the top of the artwork doesn't clip against the circle border */ filter: none !important; height: 22px !important; width: auto !important; max-width: none !important; } body .aside .menu .menu-item.imp-item-profile > .menu-link:hover .menu-icon { border-color: var(--imp-primary) !important; } /* COLLAPSED state: link itself becomes the 54px circle (sibling style) */ body[data-kt-aside-minimize="on"] .aside .menu .menu-item.imp-item-profile > .menu-link { width: 54px !important; height: 54px !important; flex: 0 0 54px !important; border-radius: 50% !important; margin: 0 auto !important; background: #FFFFFF !important; border: 1px solid #DAC5FF !important; padding: 0 !important; justify-content: center !important; } /* in collapsed mode, the icon's own circle is no longer needed (the link itself is the circle) — flatten the icon wrapper */ body[data-kt-aside-minimize="on"] .aside .menu .menu-item.imp-item-profile > .menu-link .menu-icon { width: auto !important; height: auto !important; flex: 0 0 auto !important; background: transparent !important; border: none !important; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item.imp-item-profile > .menu-link .menu-icon img.imp-icon-logo { height: 26px !important; } /* Active state: keep colors as the natural multi-color logo */ body .aside .menu .menu-item.imp-item-profile > .menu-link.active .menu-icon img.imp-icon-logo { filter: none !important; } body .aside .menu .menu-item.imp-item-profile > .menu-link.active .menu-icon { border-color: var(--imp-primary) !important; } /* -------------------------------------------------------------------------- 12. Prevent jitter on minimize/expand -------------------------------------------------------------------------- */ body .aside .menu .menu-item .menu-link { white-space: nowrap; overflow: hidden; } /* -------------------------------------------------------------------------- 12b. Create button (.imp-item-create) — sibling's signature "purple gradient circle plus button" treatment. Always rendered as the gradient pill (both expanded and collapsed states), so the Create CTA is visually distinct from regular nav items. -------------------------------------------------------------------------- */ body .aside .menu .menu-item.imp-item-create > .menu-link { background: var(--imp-toggle-grad) !important; border: 1px solid #8a38f5 !important; color: #FFFFFF !important; } body .aside .menu .menu-item.imp-item-create > .menu-link:hover { opacity: 0.92; background: var(--imp-toggle-grad) !important; color: #FFFFFF !important; } body .aside .menu .menu-item.imp-item-create > .menu-link .menu-title { color: #FFFFFF !important; font-weight: 600 !important; } body .aside .menu .menu-item.imp-item-create > .menu-link .menu-icon img.imp-icon { /* Always white plus icon on purple bg — both states */ filter: brightness(0) invert(1) !important; } /* In collapsed state: Create becomes the prominent 40px circle exactly like sibling's primary CTA (slightly bigger than regular collapsed icons which are 48px circles). */ body[data-kt-aside-minimize="on"] .aside .menu .menu-item.imp-item-create > .menu-link { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; border-radius: 50% !important; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3); } body[data-kt-aside-minimize="on"] .aside .menu .menu-item.imp-item-create > .menu-link .menu-icon img.imp-icon { width: 22px !important; height: 22px !important; } /* -------------------------------------------------------------------------- 13. Mobile (≤ 991px) — drawer mode polish Metronic switches the aside into drawer mode below the lg breakpoint. The desktop expand/collapse toggle and the desktop top-of-aside logo are redundant in drawer mode and previously leaked into the mobile UI: the toggle stuck out at right:-18px (poking into the backdrop) and the logo duplicated the in-drawer partial logo. Both hidden here. -------------------------------------------------------------------------- */ @media (max-width: 991px) { /* Smooth slide-in/out for Metronic drawer — by default our base rule transitioned only width, so the transform-based drawer slide snapped instantly. Add transform to the transition list (and a slightly slower easing for natural feel on touch screens). */ body .aside.drawer.drawer-start { transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), width var(--imp-transition) !important; will-change: transform; } /* Backdrop fade-in/out */ body .drawer-overlay { transition: opacity 240ms ease; background: rgba(11, 13, 35, 0.42) !important; } /* While the user is dragging, suppress transition so the drawer follows the finger 1:1. JS toggles a .imp-dragging class. */ body .aside.drawer.imp-dragging { transition: none !important; } /* Hide the floating desktop collapse toggle on mobile — drawer mode handles open/close via Metronic's #kt_aside_mobile_toggle button. */ body #kt_aside_toggle { display: none !important; } /* Hide the desktop top-of-aside logo on mobile — the partial's d-lg-none anchor renders an in-drawer logo intended for mobile. (Search 'd-lg-none my-5' in authenticated_user_sidebar_items to see the markup.) */ body .aside .aside-logo, body .aside #kt_aside_logo { display: none !important; } /* Drawer width — slightly wider for legibility on small screens. */ body .aside.aside-light { width: 280px !important; box-shadow: 0 0 32px rgba(11, 13, 35, 0.18); } body .aside .aside-menu { width: 100% !important; /* Mobile native vertical scroll — the Metronic hover-scroll plugin is gated to `lg: true` (desktop only) so on mobile the drawer has no scroll mechanism unless we provide one. */ overflow-y: auto !important; -webkit-overflow-scrolling: touch; /* iOS momentum scroll */ } /* The wrapper inside aside-menu also needs a height bound to scroll. padding-bottom ensures the last menu item (Logout) is fully reachable even when the drawer is scrolled to its end. */ body .aside #kt_aside_menu_wrapper { overflow-y: auto !important; max-height: 100vh; padding-bottom: 56px !important; -webkit-overflow-scrolling: touch; } /* Drawer container itself: allow vertical scroll if content exceeds. */ body .aside.aside-light { overflow-y: auto !important; overflow-x: hidden !important; } /* Defensive: if data-kt-aside-minimize="on" survived a viewport resize (e.g. user collapsed sidebar on desktop, then phone-rotated or shrunk window), the desktop collapsed-state CSS would otherwise compress every menu-link into a 48px circle — breaking the drawer. Force drawer-mode geometry regardless of the minimize attribute. */ body[data-kt-aside-minimize="on"] .aside.aside-light { width: 280px !important; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item { padding: 0 12px !important; display: block !important; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link { width: auto !important; height: auto !important; flex: 1 1 auto !important; padding: 9px 12px !important; border-radius: var(--imp-radius-pill) !important; justify-content: flex-start !important; margin: 0 !important; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link.active { width: auto !important; height: auto !important; margin: 0 !important; border-radius: var(--imp-radius-pill) !important; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link .menu-title, body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link .menu-arrow, body[data-kt-aside-minimize="on"] .aside .menu .menu-section { opacity: 1 !important; width: auto !important; overflow: visible !important; pointer-events: auto !important; display: inline-block !important; } /* My Profile on mobile: undo the desktop-collapsed 54px circle so the row behaves like other mobile drawer items (icon + text label). The icon container keeps the small 38px circle around the i-logo like in desktop expanded view. */ body[data-kt-aside-minimize="on"] .aside .menu .menu-item.imp-item-profile > .menu-link { width: auto !important; height: auto !important; flex: 1 1 auto !important; margin: 0 !important; border-radius: var(--imp-radius-pill) !important; background: transparent !important; border: 1px solid transparent !important; padding: 9px 12px !important; justify-content: flex-start !important; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item.imp-item-profile > .menu-link .menu-icon { width: 38px !important; height: 38px !important; min-width: 38px !important; flex: 0 0 38px !important; border-radius: 50% !important; background: #FFFFFF !important; border: 1px solid #DAC5FF !important; } body[data-kt-aside-minimize="on"] .aside .menu .menu-item.imp-item-profile > .menu-link .menu-icon img.imp-icon-logo { height: 22px !important; } } /* ========================================================================== TABLET (768–991.98) — behave like desktop, not mobile drawer. Metronic ships a `@media (max-width: 991.98px) { .aside { display:none } }` rule + a drawer-mode `transform: translateX(-100%)`. Both kick in at tablet and turn the sidebar into a hidden hamburger-drawer. We want tablet to show the inline collapsed (76px) sidebar, matching the desktop pattern the user runs at >=992px. ========================================================================== */ @media (min-width: 768px) and (max-width: 991.98px) { /* Cancel the Metronic display:none + drawer transform — show inline. Width is conditional on data-kt-aside-minimize so the toggle works: "on" → 76px collapsed, unset/anything else → 268px expanded. Specificity matched to outrank the existing 280px drawer rule. */ body[data-kt-aside-minimize] .aside, body[data-kt-aside-minimize] .aside.aside-light, body[data-kt-aside-minimize] .aside.drawer.drawer-start, body:not([data-kt-aside-minimize]) .aside.aside-light { display: flex !important; position: fixed !important; left: 0 !important; top: 0 !important; transform: none !important; box-shadow: var(--imp-aside-shadow) !important; } /* Collapsed (default state at tablet) */ body[data-kt-aside-minimize="on"] .aside.aside-light { width: 76px !important; } /* Expanded — when toggle clears the minimize attribute */ body:not([data-kt-aside-minimize="on"]) .aside.aside-light { width: 220px !important; } /* Aside menu fills its container at any width. */ body .aside.aside-light .aside-menu { width: 100% !important; } /* Header is position:fixed so wrapper padding doesn't clear it. The conditional left-offset rules below mirror whichever sidebar width is active (75px collapsed / 220px expanded). */ body #kt_header { right: 0 !important; width: auto !important; } /* Backdrop is a drawer affordance; not needed when sidebar is inline. */ body .drawer-overlay { display: none !important; } /* Show the desktop top-of-aside logo (the partial's @media (min-width:991) block earlier in this file hid it for drawer mode). */ body .aside .aside-logo, body .aside #kt_aside_logo { display: flex !important; } /* Hide the in-drawer mobile logo (``). It only exists for the drawer-mode hamburger flow, which is off at tablet — leaving it visible duplicates the brand mark. */ body .aside a.d-lg-none { display: none !important; } /* Hide labels only when sidebar is collapsed. When the user clicks the toggle to expand (data-kt-aside-minimize cleared), labels show again — same as desktop. */ body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link .menu-title, body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link .menu-arrow, body[data-kt-aside-minimize="on"] .aside .menu .menu-section, body[data-kt-aside-minimize="on"] .aside .menu .menu-item .menu-link .menu-badge { display: none !important; } /* Hamburger toggle in topbar is for mobile drawer mode — drawer is inactive at tablet, so the button has nothing to toggle. Hide it. */ body #kt_header #kt_aside_mobile_toggle { display: none !important; } /* Credits Summary buttons — at tablet the column is narrow; the 16px/24px-padded buttons wrap "Add Credits" / "Use Credits" to two lines. Force nowrap and trim padding so they sit on a single line. */ body .credits-card .btn-add-cred, body .credits-card .btn-use-cred { white-space: nowrap !important; padding: 8px 14px !important; font-size: 14px !important; } /* Wrapper offset matches whichever sidebar width is currently active. */ body[data-kt-aside-minimize="on"] .wrapper { padding-left: 75px !important; } body:not([data-kt-aside-minimize="on"]) .wrapper { padding-left: 220px !important; } body[data-kt-aside-minimize="on"] #kt_header { left: 75px !important; } body:not([data-kt-aside-minimize="on"]) #kt_header { left: 220px !important; } /* Hide just the "Imperium Businesses Suite" badge + its vertical divider at tablet. The wrapper holds [H2 Welcome | divider | P badge] — keep the H2, drop the rest so the topbar reads as (Welcome name | spacer | credits | bell | avatar). */ body #kt_header .d-md-flex.d-none.align-items-center.flex-shrink-0 > p, body #kt_header .d-md-flex.d-none.align-items-center.flex-shrink-0 > .divider { display: none !important; } }