/**
 * Admin sidebar — token-based, GPU-light
 *  - All colors source from tokens.css
 *  - No infinite animations (was 4: aura, brand-pulse, bar-glow, icon-glow)
 *  - One dark-mode rule (was 3-4 duplicated blocks)
 *  - Simple, fast hover transitions
 */

/* ═══════════════════════════════════════
   LIGHT MODE (default)
═══════════════════════════════════════ */
#layout-menu {
    --sb-bg:              #faf9ff;
    --sb-bg-2:            #f2f0ff;
    --sb-bg-gradient:     linear-gradient(180deg, #f7f5ff 0%, #eeebff 100%);
    --sb-border:          rgba(var(--color-brand-primary-rgb), 0.18);
    --sb-text:            var(--text-body);
    --sb-text-strong:     var(--text-strong);
    --sb-muted:           var(--text-muted);
    --sb-hover-bg:        rgba(var(--color-brand-primary-rgb), 0.07);
    --sb-active-bg:       rgba(var(--color-brand-primary-rgb), 0.13);
    --sb-active-text:     var(--color-brand-primary-deep);
    --sb-accent:          var(--color-brand-primary);
    --sb-accent-2:        var(--color-brand-secondary);
    --sb-accent-soft:     rgba(var(--color-brand-primary-rgb), 0.55);
    --sb-divider:         var(--surface-border);
    --sb-radius:          var(--radius-md);
    --sb-search-bg:       rgba(255, 255, 255, 0.42);
    --sb-search-bg-focus: rgba(255, 255, 255, 0.78);
    --sb-tooltip-bg:      var(--text-strong);
    --sb-tooltip-text:    #fff;
    --sb-shadow:          4px 0 24px rgba(var(--color-brand-primary-rgb), 0.10);

    --sb-orb-1:           rgba(var(--color-brand-primary-rgb), 0.18);
    --sb-orb-2:           rgba(0, 207, 232, 0.12);

    /* Do not set position here — #layout-menu wins over .layout-menu-fixed .layout-menu
       (ID vs classes); position:relative would override position:fixed and break layout
       (empty strip beside sidebar). ::before / .sb-orb use the fixed menu as containing block. */
    isolation: isolate;
    background: var(--sb-bg-gradient) !important;
    border-inline-end: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    font-family: inherit;

    /* Isolate sidebar scroll from page scroll.
       Without this, scrolling inside the sidebar past its top/bottom
       chains up to the document and moves the page content too. */
    overscroll-behavior: contain;
}

/* Dot grid — matches dash-welcome */
#layout-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--color-brand-primary-rgb), 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

[data-theme*='dark'] #layout-menu::before,
.dark-style #layout-menu::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

@media (prefers-color-scheme: dark) {
    html[data-theme='system'] #layout-menu::before {
        background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    }
}

/* Decorative orbs — static (no animation, performance) */
#layout-menu .sb-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(55px);
}

#layout-menu .sb-orb--1 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, var(--sb-orb-1) 0%, transparent 70%);
    inset-block-start: -60px;
    inset-inline-end: -60px;
}

#layout-menu .sb-orb--2 {
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, var(--sb-orb-2) 0%, transparent 70%);
    inset-block-end: 10%;
    inset-inline-start: -40px;
}

#layout-menu .app-brand,
#layout-menu .menu-inner-shadow,
#layout-menu .sidebar-search {
    position: relative;
    z-index: 1;
}

/* Scroll target + sit above dot grid / orbs */
#layout-menu > ul.menu-inner {
    position: relative;
    z-index: 1;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    overscroll-behavior: contain;
    /* On touch devices Perfect Scrollbar's scroll target is this list */
    -webkit-overflow-scrolling: touch;
}

/* The outer .layout-menu wrapper Sneat positions as fixed on >=1200px.
   Containing scroll here belt-and-braces prevents chaining when the
   sidebar is offcanvas on mobile too. */
.layout-menu {
    overscroll-behavior: contain;
}

/* ═══════════════════════════════════════
   DARK MODE — single rule (was 3-4 dupes)
═══════════════════════════════════════ */
[data-theme*='dark'] #layout-menu,
.dark-style #layout-menu {
    --sb-bg:              #1f1c3a;
    --sb-bg-2:            #2d2a5e;
    --sb-bg-gradient:     linear-gradient(180deg, #1f1c3a 0%, #2d2a5e 60%, #232142 100%);
    --sb-border:          rgba(255, 255, 255, 0.08);
    --sb-text:            rgba(225, 228, 248, 0.82);
    --sb-text-strong:     #f7f8ff;
    --sb-muted:           rgba(200, 204, 232, 0.55);
    --sb-hover-bg:        rgba(255, 255, 255, 0.06);
    --sb-active-bg:       rgba(var(--color-brand-primary-rgb), 0.22);
    --sb-active-text:     #f7f8ff;
    --sb-accent-soft:     rgba(177, 168, 255, 0.72);
    --sb-divider:         rgba(255, 255, 255, 0.07);
    --sb-search-bg:       rgba(255, 255, 255, 0.05);
    --sb-search-bg-focus: rgba(255, 255, 255, 0.10);
    --sb-tooltip-bg:      #f3f4ff;
    --sb-tooltip-text:    #2e3348;
    --sb-shadow:          4px 0 28px rgba(0, 0, 0, 0.35);

    --sb-orb-1:           rgba(var(--color-brand-primary-rgb), 0.28);
    --sb-orb-2:           rgba(0, 207, 232, 0.18);
}

@media (prefers-color-scheme: dark) {
    html[data-theme='system'] #layout-menu {
        --sb-bg:              #1f1c3a;
        --sb-bg-2:            #2d2a5e;
        --sb-bg-gradient:     linear-gradient(180deg, #1f1c3a 0%, #2d2a5e 60%, #232142 100%);
        --sb-border:          rgba(255, 255, 255, 0.08);
        --sb-text:            rgba(225, 228, 248, 0.82);
        --sb-text-strong:     #f7f8ff;
        --sb-muted:           rgba(200, 204, 232, 0.55);
        --sb-hover-bg:        rgba(255, 255, 255, 0.06);
        --sb-active-bg:       rgba(var(--color-brand-primary-rgb), 0.22);
        --sb-active-text:     #f7f8ff;
        --sb-accent-soft:     rgba(177, 168, 255, 0.72);
        --sb-divider:         rgba(255, 255, 255, 0.07);
        --sb-search-bg:       rgba(255, 255, 255, 0.05);
        --sb-search-bg-focus: rgba(255, 255, 255, 0.10);
        --sb-tooltip-bg:      #f3f4ff;
        --sb-tooltip-text:    #2e3348;
        --sb-shadow:          4px 0 28px rgba(0, 0, 0, 0.35);

        --sb-orb-1:           rgba(var(--color-brand-primary-rgb), 0.28);
        --sb-orb-2:           rgba(0, 207, 232, 0.18);
    }
}

/* ═══════════════════════════════════════
   BRAND
═══════════════════════════════════════ */
#layout-menu .app-brand.demo {
    position: relative;
    margin-top: 0.65rem !important;
    padding-bottom: 0.65rem;
    margin-inline: 0.65rem;
    border-bottom: 1px solid var(--sb-divider);
}

/* Static gradient underline (was sbBrandPulse animation) */
#layout-menu .app-brand.demo::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--color-brand-primary-rgb), 0.50),
        rgba(var(--color-brand-secondary-rgb), 0.40),
        transparent);
    opacity: 1;
    pointer-events: none;
}

[data-theme*='dark'] #layout-menu .app-brand.demo::after,
.dark-style #layout-menu .app-brand.demo::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--color-brand-primary-rgb), 0.70),
        rgba(var(--color-brand-secondary-rgb), 0.55),
        transparent);
}

#layout-menu .app-brand-link img {
    max-height: 2rem;
}

[data-theme*='dark'] #layout-menu .app-brand-link img,
.dark-style #layout-menu .app-brand-link img {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(var(--color-brand-primary-rgb), 0.35));
}

@media (prefers-color-scheme: dark) {
    html[data-theme='system'] #layout-menu .app-brand.demo::after {
        background: linear-gradient(90deg,
            transparent,
            rgba(var(--color-brand-primary-rgb), 0.70),
            rgba(var(--color-brand-secondary-rgb), 0.55),
            transparent);
    }

    html[data-theme='system'] #layout-menu .app-brand-link img {
        filter: brightness(1.15) drop-shadow(0 0 8px rgba(var(--color-brand-primary-rgb), 0.35));
    }
}

/* Menu inner shadow (top fade) */
#layout-menu .menu-inner-shadow,
#layout-menu.bg-menu-theme .menu-inner-shadow {
    background: linear-gradient(var(--sb-bg) 41%, transparent 95%) !important;
}

/* ═══════════════════════════════════════
   SEARCH
═══════════════════════════════════════ */
#layout-menu .sidebar-search {
    position: relative;
    z-index: 3;
    background: transparent;
    padding-top: 0.6rem !important;
    padding-bottom: 0.45rem !important;
}

#layout-menu .sidebar-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

#layout-menu .sidebar-search-icon {
    position: absolute;
    inset-inline-start: 0.72rem;
    font-size: 0.95rem;
    color: var(--sb-muted);
    pointer-events: none;
    z-index: 1;
}

#layout-menu .sidebar-search-input {
    padding-inline-start: 2.2rem;
    padding-inline-end: 2rem;
    min-height: 2.2rem;
    border-radius: var(--sb-radius);
    border: 1px solid var(--sb-border);
    background: var(--sb-search-bg);
    backdrop-filter: blur(8px);
    color: var(--sb-text-strong);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: border-color var(--duration-fast) var(--ease-smooth),
                background    var(--duration-fast) var(--ease-smooth),
                box-shadow    var(--duration-fast) var(--ease-smooth);
}

#layout-menu .sidebar-search-input::placeholder {
    color: var(--sb-muted);
}

#layout-menu .sidebar-search-input:focus {
    border-color: var(--sb-accent);
    background: var(--sb-search-bg-focus);
    box-shadow: 0 0 0 3px rgba(var(--color-brand-primary-rgb), 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    outline: none;
    color: var(--sb-text-strong);
}

#layout-menu .sidebar-search-clear {
    position: absolute;
    inset-inline-end: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius);
    background: transparent;
    color: var(--sb-muted);
    transition: color var(--duration-fast) var(--ease-smooth),
                background var(--duration-fast) var(--ease-smooth);
}

#layout-menu .sidebar-search-clear:hover {
    color: var(--sb-accent);
    background: var(--sb-hover-bg);
}

#layout-menu .sidebar-search-empty {
    margin-top: 0.5rem;
    padding: 0.5rem 0.35rem;
    font-size: 0.8125rem;
    color: var(--sb-muted);
    text-align: center;
}

/* ═══════════════════════════════════════
   MENU LINKS
═══════════════════════════════════════ */

/* Top-level section dividers */
#layout-menu > ul.menu-inner > ul.menu-inner > .menu-item:not(:first-child)::before {
    content: '';
    display: block;
    height: 1px;
    margin: 0.35rem 0.75rem 0.5rem;
    background: var(--sb-divider);
}

#layout-menu .menu-inner {
    padding-block: 0.2rem;
}

#layout-menu .menu-item .menu-link {
    position: relative;
    border-radius: var(--sb-radius);
    margin-inline: 0.45rem;
    padding-block: 0.45rem;
    padding-inline: 0.7rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sb-text);
    /* Light transitions only — no transform on hover */
    transition: background var(--duration-fast) var(--ease-smooth),
                color      var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth);
}

#layout-menu .menu-item .menu-link > div {
    color: inherit;
}

#layout-menu .menu-item:not(.active) > .menu-link:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-text-strong);
    box-shadow: inset 0 0 0 1px rgba(var(--color-brand-primary-rgb), 0.10);
}

#layout-menu .menu-item .menu-link i.ti,
#layout-menu .menu-item .menu-link i[class^='ti-'] {
    margin-inline-end: 0.4rem;
    font-size: 1.05rem;
    color: var(--sb-muted);
    transition: color var(--duration-fast) var(--ease-smooth);
    flex-shrink: 0;
}

[dir='rtl'] #layout-menu .menu-item .menu-link i.ti,
[dir='rtl'] #layout-menu .menu-item .menu-link i[class^='ti-'] {
    margin-inline-end: 0;
    margin-inline-start: 0.4rem;
}

#layout-menu .menu-item:not(.active) > .menu-link:hover i.ti,
#layout-menu .menu-item:not(.active) > .menu-link:hover i[class^='ti-'] {
    color: var(--sb-text-strong);
}

/* Active — glass tint + gradient bar (static, was sbActiveBarGlow infinite) */
#layout-menu.bg-menu-theme .menu-inner .menu-item.active > .menu-link,
#layout-menu .menu-item.active > .menu-link,
#layout-menu.bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle,
#layout-menu.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle.active {
    background: var(--sb-active-bg) !important;
    color: var(--sb-active-text) !important;
    font-weight: 600;
    box-shadow:
        inset 0 0 0 1px rgba(var(--color-brand-primary-rgb), 0.22),
        0 2px 8px rgba(var(--color-brand-primary-rgb), 0.14);
    backdrop-filter: blur(4px);
}

[data-theme*='dark'] #layout-menu .menu-item.active > .menu-link,
.dark-style #layout-menu .menu-item.active > .menu-link,
[data-theme*='dark'] #layout-menu.bg-menu-theme .menu-inner .menu-item.active > .menu-link,
.dark-style #layout-menu.bg-menu-theme .menu-inner .menu-item.active > .menu-link,
[data-theme*='dark'] #layout-menu.bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle,
.dark-style #layout-menu.bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle,
[data-theme*='dark'] #layout-menu.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle.active,
.dark-style #layout-menu.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle.active {
    background: rgba(var(--color-brand-primary-rgb), 0.22) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--color-brand-primary-rgb), 0.30),
        0 2px 12px rgba(var(--color-brand-primary-rgb), 0.20);
}

@media (prefers-color-scheme: dark) {
    html[data-theme='system'] #layout-menu .menu-item.active > .menu-link,
    html[data-theme='system'] #layout-menu.bg-menu-theme .menu-inner .menu-item.active > .menu-link,
    html[data-theme='system'] #layout-menu.bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle,
    html[data-theme='system'] #layout-menu.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle.active {
        background: rgba(var(--color-brand-primary-rgb), 0.22) !important;
        box-shadow:
            inset 0 0 0 1px rgba(var(--color-brand-primary-rgb), 0.30),
            0 2px 12px rgba(var(--color-brand-primary-rgb), 0.20);
    }
}

/* Open (but not active) parent toggle keeps a calmer look */
#layout-menu.bg-menu-theme .menu-inner .menu-item.open:not(.active) > .menu-link.menu-toggle {
    background: var(--sb-hover-bg) !important;
    color: var(--sb-text-strong) !important;
}

html:not(.layout-menu-collapsed) #layout-menu.bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed #layout-menu.bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover {
    background: var(--sb-hover-bg) !important;
}

/* Vertical accent bar on active top-level item — STATIC (no glow animation) */
#layout-menu > ul.menu-inner > ul.menu-inner > .menu-item.active > .menu-link::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    min-height: 1.1rem;
    border-radius: 3px;
    background: linear-gradient(180deg,
        var(--color-brand-primary),
        var(--color-brand-secondary));
    box-shadow: 0 0 12px rgba(var(--color-brand-primary-rgb), 0.55);
}

/* Active icon — static color (was sbActiveIconGlow filter:drop-shadow loop) */
#layout-menu .menu-item.active > .menu-link i.ti,
#layout-menu .menu-item.active > .menu-link i[class^='ti-'] {
    color: var(--sb-accent);
}

#layout-menu .menu-item.open > .menu-link.menu-toggle:not(.active) {
    color: var(--sb-text-strong);
}

#layout-menu .menu-item.open > .menu-link.menu-toggle:not(.active) i.ti,
#layout-menu .menu-item.open > .menu-link.menu-toggle:not(.active) i[class^='ti-'] {
    color: var(--sb-accent);
}

/* ═══════════════════════════════════════
   SUBMENU
═══════════════════════════════════════ */
#layout-menu .menu-sub {
    margin-top: 0.15rem;
    margin-bottom: 0.25rem;
}

#layout-menu .menu-sub .menu-link {
    margin-inline: 0.12rem;
    padding-block: 0.35rem;
    font-size: 0.8125rem;
}

#layout-menu .menu-inner > .menu-item.open > .menu-sub::before,
#layout-menu .menu-inner .menu-item.open > .menu-sub::before {
    border-color: var(--sb-divider) !important;
}

#layout-menu .menu-sub .menu-link::before {
    transition: color var(--duration-fast) var(--ease-smooth);
}

#layout-menu .menu-sub .menu-item:not(.active) > .menu-link::before {
    color: var(--sb-muted) !important;
}

#layout-menu .menu-sub .menu-item:not(.active) > .menu-link:hover::before {
    color: var(--sb-accent) !important;
}

#layout-menu .menu-sub .menu-item.active > .menu-link::before {
    color: var(--sb-accent) !important;
}

/* ═══════════════════════════════════════
   FILTER & SCROLLBAR
═══════════════════════════════════════ */
#layout-menu .menu-item.menu-search-hidden {
    display: none !important;
}

#layout-menu .ps__rail-y {
    opacity: 0.45;
    width: 6px !important;
    background: transparent !important;
}

#layout-menu .ps__rail-y:hover,
#layout-menu .ps__rail-y:focus {
    opacity: 0.95;
}

#layout-menu .ps__thumb-y {
    right: 2px !important;
    width: 4px !important;
    border-radius: 10px;
    background: linear-gradient(180deg,
        var(--color-brand-primary),
        var(--color-brand-secondary)) !important;
    opacity: 0.60;
    transition: width var(--duration-fast) var(--ease-smooth),
                opacity var(--duration-fast) var(--ease-smooth);
}

#layout-menu .ps__rail-y:hover .ps__thumb-y,
#layout-menu .ps__rail-y:focus .ps__thumb-y {
    width: 6px !important;
    opacity: 0.90;
}

[dir='rtl'] #layout-menu .ps__thumb-y {
    right: auto !important;
    left: 2px !important;
}

/* ═══════════════════════════════════════
   COLLAPSED MODE — search + dot indicator + tooltip
═══════════════════════════════════════ */
.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu .sidebar-search {
    display: none !important;
}

.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
    #layout-menu > ul.menu-inner > ul.menu-inner > .menu-item.active > .menu-link::before,
.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
    #layout-menu > ul.menu-inner > ul.menu-inner > .menu-item:has(.menu-sub .menu-item.active) > .menu-link::before {
    top: auto;
    bottom: 0.35rem;
    inset-inline-start: 50%;
    transform: translate(-50%, 0);
    width: 6px;
    height: 6px;
    min-height: 0;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--color-brand-primary),
        var(--color-brand-secondary));
    box-shadow: 0 0 10px rgba(var(--color-brand-primary-rgb), 0.60);
}

.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu > ul.menu-inner > ul.menu-inner > .menu-item > a.menu-link[data-tooltip] {
    position: relative;
}

.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu > ul.menu-inner > ul.menu-inner > .menu-item > a.menu-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 1080;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: calc(100% + 12px);
    padding: 0.35rem 0.65rem;
    max-width: 16rem;
    border-radius: var(--sb-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sb-tooltip-text);
    background: var(--sb-tooltip-bg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    pointer-events: none;
    animation: sbTooltipIn 0.15s var(--ease-out) both;
}

[dir='rtl'].layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu > ul.menu-inner > ul.menu-inner > .menu-item > a.menu-link[data-tooltip]:hover::after {
    inset-inline-start: auto;
    inset-inline-end: calc(100% + 12px);
    animation-name: sbTooltipInRtl;
}

@keyframes sbTooltipIn {
    from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0);     }
}

@keyframes sbTooltipInRtl {
    from { opacity: 0; transform: translateY(-50%) translateX(4px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0);    }
}

@media (prefers-reduced-motion: reduce) {
    #layout-menu .menu-item .menu-link,
    #layout-menu .menu-item .menu-link i.ti,
    #layout-menu .menu-item .menu-link i[class^='ti-'] {
        transition: none;
    }
    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu > ul.menu-inner > ul.menu-inner > .menu-item > a.menu-link[data-tooltip]:hover::after {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   ░░ ADVANCED DARK MODE — Premium polish ░░
   Every accent below derives from --color-brand-primary-rgb
   so the brand switcher live-recolors the sidebar.
═══════════════════════════════════════════════════════════ */

/* ── 1. Richer brand-tinted background gradient ───────── */
[data-theme*='dark'] #layout-menu,
.dark-style #layout-menu {
    background:
        radial-gradient(ellipse 110% 50% at 50% 0%,
            rgba(var(--color-brand-primary-rgb), 0.20) 0%,
            transparent 65%),
        linear-gradient(180deg,
            #1a1638 0%,
            #221d4a 30%,
            #1e1a40 70%,
            #181430 100%) !important;
}

/* Subtle ambient cyan glow at bottom */
[data-theme*='dark'] #layout-menu::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 28% at 50% 100%,
        rgba(var(--color-brand-secondary-rgb), 0.10) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── 2. Logo halo ──────────────────────────────────────── */
[data-theme*='dark'] #layout-menu .app-brand {
    position: relative;
}
[data-theme*='dark'] #layout-menu .app-brand::before {
    content: '';
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle,
        rgba(var(--color-brand-primary-rgb), 0.22) 0%,
        transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
}

/* ── 3. Active item — premium glow + shimmer pass ─────── */
[data-theme*='dark'] #layout-menu .menu-item.active > .menu-link,
[data-theme*='dark'] #layout-menu.bg-menu-theme .menu-inner .menu-item.active > .menu-link,
[data-theme*='dark'] #layout-menu.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle.active {
    background: linear-gradient(135deg,
        rgba(var(--color-brand-primary-rgb), 0.34) 0%,
        rgba(var(--color-brand-primary-rgb), 0.14) 70%,
        rgba(var(--color-brand-primary-rgb), 0.26) 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--color-brand-primary-rgb), 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 4px 18px rgba(var(--color-brand-primary-rgb), 0.28),
        0 0 36px rgba(var(--color-brand-primary-rgb), 0.18) !important;
    overflow: hidden;
    position: relative;
}

/* Slow shimmer sweep across active item */
[data-theme*='dark'] #layout-menu .menu-item.active > .menu-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 65%);
    background-size: 250% 100%;
    animation: sb-active-shimmer 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sb-active-shimmer {
    0%   { background-position: -120% 0; }
    50%  { background-position:  220% 0; }
    100% { background-position:  220% 0; }
}

/* Active icon — brand-color with glow */
[data-theme*='dark'] #layout-menu .menu-item.active > .menu-link i.ti,
[data-theme*='dark'] #layout-menu .menu-item.active > .menu-link i[class^='ti-'] {
    color: var(--color-brand-primary-glow) !important;
    filter: drop-shadow(0 0 8px rgba(var(--color-brand-primary-rgb), 0.65));
}

/* ── 4. Vertical accent bar — pulsing brand glow ───────── */
[data-theme*='dark'] #layout-menu > ul.menu-inner > ul.menu-inner > .menu-item.active > .menu-link::before {
    background: linear-gradient(180deg,
        var(--color-brand-primary) 0%,
        var(--color-brand-primary-glow) 50%,
        var(--color-brand-primary) 100%) !important;
    box-shadow: 0 0 14px rgba(var(--color-brand-primary-rgb), 0.85);
    animation: sb-bar-glow 2.5s ease-in-out infinite;
}

@keyframes sb-bar-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(var(--color-brand-primary-rgb), 0.65); }
    50%      { box-shadow: 0 0 22px rgba(var(--color-brand-primary-rgb), 1.00); }
}

/* ── 5. Hover state — smooth brand slide-in ────────────── */
[data-theme*='dark'] #layout-menu .menu-item:not(.active) > .menu-link {
    position: relative;
    overflow: hidden;
    transition: color .22s ease, background .22s ease, box-shadow .22s ease;
}
[data-theme*='dark'] #layout-menu .menu-item:not(.active) > .menu-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(var(--color-brand-primary-rgb), 0) 0%,
        rgba(var(--color-brand-primary-rgb), 0.12) 100%);
    transform: translateX(-100%);
    transition: transform .28s ease-out;
    pointer-events: none;
    z-index: 0;
}
[dir='rtl'][data-theme*='dark'] #layout-menu .menu-item:not(.active) > .menu-link::before {
    transform: translateX(100%);
}
[data-theme*='dark'] #layout-menu .menu-item:not(.active) > .menu-link:hover::before {
    transform: translateX(0);
}
[data-theme*='dark'] #layout-menu .menu-item:not(.active) > .menu-link:hover {
    box-shadow:
        inset 0 0 0 1px rgba(var(--color-brand-primary-rgb), 0.18),
        0 2px 12px rgba(var(--color-brand-primary-rgb), 0.08);
}
[data-theme*='dark'] #layout-menu .menu-item:not(.active) > .menu-link:hover i {
    color: var(--color-brand-primary-glow);
    transform: scale(1.08);
    transition: transform .22s var(--ease-bounce);
}

/* Ensure link content stacks above the ::before shimmer */
[data-theme*='dark'] #layout-menu .menu-link > * { position: relative; z-index: 1; }

/* ── 6. Glass search bar with brand focus glow ─────────── */
[data-theme*='dark'] #layout-menu .sidebar-search-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
[data-theme*='dark'] #layout-menu .sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}
[data-theme*='dark'] #layout-menu .sidebar-search-input:focus {
    background: rgba(var(--color-brand-primary-rgb), 0.10) !important;
    border-color: rgba(var(--color-brand-primary-rgb), 0.48) !important;
    box-shadow:
        0 0 0 3px rgba(var(--color-brand-primary-rgb), 0.18),
        0 0 22px rgba(var(--color-brand-primary-rgb), 0.22) !important;
}
[data-theme*='dark'] #layout-menu .sidebar-search-wrap:focus-within .sidebar-search-icon {
    color: var(--color-brand-primary-glow);
    filter: drop-shadow(0 0 6px rgba(var(--color-brand-primary-rgb), 0.55));
}

/* ── 7. Custom brand-tinted scrollbar ──────────────────── */
[data-theme*='dark'] #layout-menu .ps__rail-y .ps__thumb-y,
[data-theme*='dark'] #layout-menu .menu-inner::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(var(--color-brand-primary-rgb), 0.45),
        rgba(var(--color-brand-primary-rgb), 0.22)) !important;
    border-radius: 99px !important;
}
[data-theme*='dark'] #layout-menu .ps__rail-y:hover .ps__thumb-y,
[data-theme*='dark'] #layout-menu .menu-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-brand-primary-rgb), 0.62) !important;
}
[data-theme*='dark'] #layout-menu .menu-inner::-webkit-scrollbar {
    width: 5px;
}
[data-theme*='dark'] #layout-menu .menu-inner::-webkit-scrollbar-track {
    background: transparent;
}

/* ── 8. Submenu connector line ─────────────────────────── */
[data-theme*='dark'] #layout-menu .menu-sub {
    position: relative;
}
[data-theme*='dark'] #layout-menu .menu-sub::before {
    content: '';
    position: absolute;
    inset-block: 0.4rem;
    inset-inline-start: 1.55rem;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--color-brand-primary-rgb), 0.32) 25%,
        rgba(var(--color-brand-primary-rgb), 0.32) 75%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Submenu active item — strong brand dot */
[data-theme*='dark'] #layout-menu .menu-sub .menu-item.active > .menu-link::before {
    color: var(--color-brand-primary-glow) !important;
    text-shadow: 0 0 8px rgba(var(--color-brand-primary-rgb), 0.85);
}

/* ── 9. Brand orbs — slow drift (performance-friendly) ── */
[data-theme*='dark'] #layout-menu .sb-orb--1 {
    background: radial-gradient(circle,
        rgba(var(--color-brand-primary-rgb), 0.32) 0%,
        transparent 70%);
    animation: sb-orb-drift-1 18s ease-in-out infinite alternate;
}
[data-theme*='dark'] #layout-menu .sb-orb--2 {
    background: radial-gradient(circle,
        rgba(var(--color-brand-secondary-rgb), 0.22) 0%,
        transparent 70%);
    animation: sb-orb-drift-2 22s ease-in-out infinite alternate;
}
@keyframes sb-orb-drift-1 {
    0%   { transform: translate(0, 0)        scale(1);    }
    100% { transform: translate(-20px, 30px) scale(1.10); }
}
@keyframes sb-orb-drift-2 {
    0%   { transform: translate(0, 0)       scale(1);    }
    100% { transform: translate(15px, -25px) scale(1.08); }
}

/* ── 10. Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-theme*='dark'] #layout-menu .menu-item.active > .menu-link::after,
    [data-theme*='dark'] #layout-menu > ul.menu-inner > ul.menu-inner > .menu-item.active > .menu-link::before,
    [data-theme*='dark'] #layout-menu .sb-orb--1,
    [data-theme*='dark'] #layout-menu .sb-orb--2 {
        animation: none !important;
    }
}