/* Unified styling for selected items + parents of selected sub-items */
:root {
    --menu-blue: #0078d7;
    --menu-fg: #fff;
    --icon-hover-scale: 1.125;
}

/* Directly selected items (Home, etc.) */
.MainMenu .dxm-item.dxm-selected,
.MainMenu .dxm-item.dxm-selected > .dxm-content,
.MainMenu .dxm-item.dxm-selected > a.dxm-content,
.MainMenu .dxm-item.dxm-current,
.MainMenu .dxm-item.dxm-current > .dxm-content,
.MainMenu .dxm-item.dxm-current > a.dxm-content,
/* Parent items when a submenu page is active (class added server-side) */
.MainMenu .dxm-item.has-selected-child,
.MainMenu .dxm-item.has-selected-child > .dxm-content,
.MainMenu .dxm-item > .dxm-content.has-selected-child {
    background-color: var(--menu-blue) !important;
    background-image: none !important;
    border-color: var(--menu-blue) !important;
    color: var(--menu-fg) !important;
}

    /* Paint the little arrow cell too */
    .MainMenu .dxm-item.dxm-selected > .dxm-popOut,
    .MainMenu .dxm-item.dxm-current > .dxm-popOut,
    .MainMenu .dxm-item.has-selected-child > .dxm-popOut,
    .MainMenu .dxm-item > .dxm-content.has-selected-child + .dxm-popOut {
        background-color: var(--menu-blue) !important;
        border-color: var(--menu-blue) !important;
    }

    /* Keep blue on hover for both cases */
    .MainMenu .dxm-item.dxm-selected.dxm-hovered > .dxm-content,
    .MainMenu .dxm-item.dxm-current.dxm-hovered > .dxm-content,
    .MainMenu .dxm-item.has-selected-child.dxm-hovered > .dxm-content,
    .MainMenu .dxm-item.dxm-hovered > .dxm-content.has-selected-child {
        background-color: var(--menu-blue) !important;
    }

    /* Text & icons (your icons are black → make them white on blue) */
    .MainMenu .dxm-item.dxm-selected .dxm-contentText,
    .MainMenu .dxm-item.dxm-current .dxm-contentText,
    .MainMenu .dxm-item.has-selected-child .dxm-contentText,
    .MainMenu .dxm-item > .dxm-content.has-selected-child .dxm-contentText {
        color: var(--menu-fg) !important;
    }

    .MainMenu .dxm-item.dxm-selected img.dxm-image,
    .MainMenu .dxm-item.dxm-current img.dxm-image,
    .MainMenu .dxm-item.has-selected-child img.dxm-image,
    .MainMenu .dxm-item > .dxm-content.has-selected-child img.dxm-image {
        filter: brightness(0) invert(1);
    }
    /* Make the submenu drop-down indicator (arrow) white when active */

    /* Top-level: selected item OR parent of selected submenu */
    .MainMenu .dxm-item.dxm-selected > .dxm-popOut .dxm-pImage,
    .MainMenu .dxm-item.dxm-current > .dxm-popOut .dxm-pImage,
    .MainMenu .dxm-item.dxm-checked > .dxm-popOut .dxm-pImage,
    .MainMenu .dxm-item.has-selected-child > .dxm-popOut .dxm-pImage,
    .MainMenu .dxm-item > .dxm-content.has-selected-child + .dxm-popOut .dxm-pImage {
        filter: brightness(0) invert(1);
    }

/* Keep it white on hover/focus too */
.MainMenu .dxm-item.dxm-hovered.dxm-selected > .dxm-popOut .dxm-pImage,
.MainMenu .dxm-item.dxm-hovered.has-selected-child > .dxm-popOut .dxm-pImage {
    filter: brightness(0) invert(1);
}

/* Inside popup submenus (for deeper levels) */
.dxm-popup .dxm-item.dxm-selected > .dxm-popOut .dxm-pImage,
.dxm-popup .dxm-item.dxm-current > .dxm-popOut .dxm-pImage {
    filter: brightness(0) invert(1);
}
/* Smooth transition (optional) */
.MainMenu img.dxm-image,
.MainMenu .dxm-popOut .dxm-pImage {
    transition: filter .15s ease;
    transform-origin: center center;
    will-change: transform;
}

/* Hover: make icons white */
.MainMenu .dxm-item.dxm-hovered img.dxm-image,
.MainMenu .dxm-item.dxm-hovered > .dxm-popOut .dxm-pImage,
.dxm-popup .dxm-item.dxm-hovered img.dxm-image,
.dxm-popup .dxm-item.dxm-hovered > .dxm-popOut .dxm-pImage {
    filter: brightness(0) invert(1);
    transform: scale(var(--icon-hover-scale));
}

/* Keep selected items white on hover too (no “flip back”) */
.MainMenu .dxm-item.dxm-selected.dxm-hovered img.dxm-image,
.MainMenu .dxm-item.dxm-current.dxm-hovered img.dxm-image,
.MainMenu .dxm-item.has-selected-child.dxm-hovered img.dxm-image,
.MainMenu .dxm-item.dxm-selected.dxm-hovered > .dxm-popOut .dxm-pImage,
.MainMenu .dxm-item.dxm-current.dxm-hovered > .dxm-popOut .dxm-pImage,
.MainMenu .dxm-item.has-selected-child.dxm-hovered > .dxm-popOut .dxm-pImage {
    filter: brightness(0) invert(1);
}