/*
 * Accessible sidebar states.
 *
 * Loaded after the selected color preset so expanded menus, collapsed flyouts,
 * submenu panels, and hover states share one readable foreground/background
 * contract instead of inheriting white-panel defaults from the base sidebar.
 */
body:not([data-color="F2F2F2"]) .sidebar-scroll,
body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li:hover {
    background-color: var(--dc-sidebar-bg, var(--left-menu-theme-color, #334155)) !important;
}

body:not([data-color="F2F2F2"]) .sidebar-menu li a,
body:not([data-color="F2F2F2"]) .sidebar-menu li ul li a {
    color: var(--dc-sidebar-muted-text, #e2e8f0) !important;
}

body:not([data-color="F2F2F2"]) .sidebar-menu li a svg,
body:not([data-color="F2F2F2"]) .sidebar-menu li a i {
    color: currentColor;
    stroke: currentColor;
}

body:not([data-color="F2F2F2"]) .sidebar-menu li a:hover,
body:not([data-color="F2F2F2"]) .sidebar-menu li a:focus,
body:not([data-color="F2F2F2"]) .sidebar-menu li.expand.open > a {
    color: var(--dc-sidebar-text, #ffffff) !important;
    background-color: var(--dc-sidebar-hover-bg, rgba(255, 255, 255, 0.12)) !important;
}

body:not([data-color="F2F2F2"]) .sidebar-menu li.active > a,
body:not([data-color="F2F2F2"]) .sidebar-menu li ul li.active > a {
    color: var(--dc-sidebar-text, #ffffff) !important;
    background-color: var(--dc-sidebar-active-bg, rgba(255, 255, 255, 0.16)) !important;
    box-shadow: inset 0 0 0 1px var(--dc-sidebar-border, rgba(255, 255, 255, 0.16));
}

body:not([data-color="F2F2F2"]) .sidebar-menu li ul {
    background-color: var(--dc-sidebar-submenu-bg, rgba(255, 255, 255, 0.04)) !important;
}

@media (min-width: 991px) {
    body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li:hover > a {
        color: var(--dc-sidebar-text, #ffffff) !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li:hover {
        background-color: var(--dc-sidebar-flyout-bg, var(--dc-sidebar-bg, #334155)) !important;
    }

    body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li ul,
    body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li:hover ul {
        background-color: var(--dc-sidebar-flyout-bg, var(--dc-sidebar-bg, #334155)) !important;
        color: var(--dc-sidebar-text, #ffffff) !important;
        border: 1px solid var(--dc-sidebar-border, rgba(255, 255, 255, 0.16));
        border-left: 0;
        border-top: 0;
        left: 70px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        top: 40px !important;
    }

    html[dir="rtl"] body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li ul,
    html[dir="rtl"] body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li:hover ul {
        border-left: 1px solid var(--dc-sidebar-border, rgba(255, 255, 255, 0.16));
        border-right: 0;
        left: auto !important;
        right: 70px !important;
    }

    body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li ul li,
    body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li ul li:hover {
        background-color: transparent !important;
    }

    body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li:hover ul li a {
        color: var(--dc-sidebar-text, #ffffff) !important;
        background-color: transparent !important;
    }

    body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li:hover ul li a:hover,
    body.sidebar-toggled:not([data-color="F2F2F2"]) .sidebar-menu li:hover ul li a:focus {
        color: var(--dc-sidebar-text, #ffffff) !important;
        background-color: var(--dc-sidebar-flyout-hover-bg, rgba(255, 255, 255, 0.14)) !important;
    }
}