/*
 * Life Simulator reference palette for the shared sidebar navigation.
 * Scope is limited to the nav region; logo, footer, header, and page content
 * are intentionally outside this cascade.
 */

:root {
    --life-nav-bg: #050816;
    --life-nav-panel: #071426;
    --life-nav-panel-strong: #0a1c31;
    --life-nav-cyan: #00e5ff;
    --life-nav-cyan-soft: #a9f5ff;
    --life-nav-text: #d7f2f8;
    --life-nav-muted: #7fa9ba;
    --life-nav-line: rgba(0, 229, 255, 0.24);
    --life-nav-line-strong: rgba(0, 229, 255, 0.72);
}

#sidebar#sidebar > nav {
    background:
        linear-gradient(
            180deg,
            rgba(5, 17, 34, 0.72),
            rgba(5, 8, 22, 0.92)
        ) !important;
    scrollbar-color: rgba(0, 229, 255, 0.62) transparent !important;
}

#sidebar#sidebar > nav::-webkit-scrollbar-track {
    background: rgba(0, 229, 255, 0.025) !important;
}

#sidebar#sidebar > nav::-webkit-scrollbar-thumb {
    border-color: rgba(0, 229, 255, 0.34) !important;
    background: linear-gradient(
        180deg,
        rgba(0, 229, 255, 0.82),
        rgba(0, 151, 190, 0.56)
    ) !important;
    box-shadow: 0 0 7px rgba(0, 229, 255, 0.24) !important;
}

#sidebar#sidebar > nav .menu-group > button {
    color: var(--life-nav-muted) !important;
}

#sidebar#sidebar > nav .menu-group > button::after {
    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 255, 0.4),
            rgba(71, 139, 174, 0.24) 58%,
            transparent 92%
        ) !important;
}

#sidebar#sidebar > nav .menu-group > button:hover {
    color: var(--life-nav-cyan-soft) !important;
}

#sidebar#sidebar > nav .menu-group > button .chevron {
    color: rgba(0, 229, 255, 0.78) !important;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.42)) !important;
}

#sidebar#sidebar > nav .menu-group-items {
    border-color: rgba(0, 229, 255, 0.16) !important;
    background:
        linear-gradient(
            180deg,
            rgba(7, 20, 38, 0.9),
            rgba(5, 12, 26, 0.92)
        ) padding-box,
        linear-gradient(
            135deg,
            rgba(0, 229, 255, 0.28),
            rgba(0, 151, 190, 0.08) 62%,
            rgba(0, 229, 255, 0.2)
        ) border-box !important;
    box-shadow:
        inset 0 0 18px rgba(0, 229, 255, 0.035),
        none !important;
}

#sidebar#sidebar > nav .menu-group-items::before,
#sidebar#sidebar > nav .menu-group-items::after {
    border-color: rgba(0, 229, 255, 0.42) !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.16) !important;
}

#sidebar#sidebar > nav .menu-group-items::before {
    border-right: 0 !important;
    border-bottom: 0 !important;
}

#sidebar#sidebar > nav .menu-group-items::after {
    border-top: 0 !important;
    border-left: 0 !important;
}

#sidebar#sidebar > nav .menu-group-items .sidebar-item,
#sidebar#sidebar > nav .sidebar-item {
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    border-radius: 0 !important;
    color: rgba(215, 242, 248, 0.78) !important;
    background:
        linear-gradient(
            90deg,
            rgba(7, 25, 43, 0.94),
            rgba(5, 14, 29, 0.96)
        ) !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

#sidebar#sidebar > nav .menu-group-items .sidebar-item:hover,
#sidebar#sidebar > nav .sidebar-item:hover {
    border-color: rgba(0, 229, 255, 0.52) !important;
    color: var(--life-nav-cyan-soft) !important;
    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 255, 0.14),
            rgba(7, 25, 43, 0.96)
        ) !important;
    box-shadow:
        inset 2px 0 rgba(0, 229, 255, 0.74),
        0 0 9px rgba(0, 229, 255, 0.1) !important;
    filter: none !important;
}

#sidebar#sidebar > nav .menu-group-items .sidebar-item.active,
#sidebar#sidebar > nav .sidebar-item.active {
    border-color: rgba(0, 229, 255, 0.84) !important;
    color: #effeff !important;
    background:
        linear-gradient(
            90deg,
            rgba(0, 61, 80, 0.96),
            rgba(5, 23, 40, 0.98) 72%
        ) !important;
    box-shadow:
        inset 3px 0 rgba(0, 229, 255, 0.94),
        0 0 12px rgba(0, 229, 255, 0.14) !important;
    filter: none !important;
}

#sidebar#sidebar > nav .sidebar-item::before {
    background: transparent !important;
    box-shadow: none !important;
}

#sidebar#sidebar > nav .sidebar-item.active::before {
    background: var(--life-nav-cyan) !important;
    box-shadow: 0 0 9px rgba(0, 229, 255, 0.72) !important;
}

#sidebar#sidebar > nav .sidebar-item::after {
    background: none !important;
    box-shadow: none !important;
}

#sidebar#sidebar > nav .sidebar-item.active::after {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

#sidebar#sidebar > nav .sidebar-item .item-icon,
#sidebar#sidebar > nav .sidebar-item .text-cyan-300,
#sidebar#sidebar > nav .sidebar-item .text-emerald-400,
#sidebar#sidebar > nav .sidebar-item .text-primary-400 {
    color: rgba(116, 211, 225, 0.84) !important;
    text-shadow: 0 0 7px rgba(0, 229, 255, 0.16) !important;
}

#sidebar#sidebar > nav .sidebar-item:hover .item-icon,
#sidebar#sidebar > nav .sidebar-item:hover .text-cyan-300,
#sidebar#sidebar > nav .sidebar-item:hover .text-emerald-400,
#sidebar#sidebar > nav .sidebar-item:hover .text-primary-400,
#sidebar#sidebar > nav .sidebar-item.active .item-icon,
#sidebar#sidebar > nav .sidebar-item.active .text-cyan-300,
#sidebar#sidebar > nav .sidebar-item.active .text-emerald-400,
#sidebar#sidebar > nav .sidebar-item.active .text-primary-400 {
    color: var(--life-nav-cyan-soft) !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.44) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #sidebar#sidebar > nav .menu-group-items .sidebar-item,
    #sidebar#sidebar > nav .sidebar-item {
        filter: none !important;
        box-shadow: none !important;
    }
}