/* ===== Navigation Icon Color Overrides ===== */
/* This file must be loaded AFTER Syncfusion CSS to override icon colors */

/* Active Navigation Link - Icon Container Background */
a.active .icon-container {
    background-color: white !important;
}

.dark a.active .icon-container {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
}

/* Active Navigation Link - Icon Colors (Light Mode) */
/* Target all possible Syncfusion icon classes */
li.group a.active .icon-container .e-icons,
li.group a.active .icon-container .e-icon,
li.group a.active .icon-container i,
li.group a.active .icon-container [class*="fa-"],
li.group a.active .icon-container span[class*="e-"],
a.active .icon-container .e-icons,
a.active .icon-container .e-icon,
a.active .icon-container i,
a.active .icon-container [class*="fa-"],
a.active .icon-container span[class*="e-"],
a.active .icon-container .e-btn-icon {
    color: rgb(55, 65, 81) !important; /* gray-700 */
    fill: rgb(55, 65, 81) !important; /* for SVG icons */
}

/* Active Navigation Link - Icon Colors (Dark Mode) */
.dark li.group a.active .icon-container .e-icons,
.dark li.group a.active .icon-container .e-icon,
.dark li.group a.active .icon-container i,
.dark li.group a.active .icon-container [class*="fa-"],
.dark li.group a.active .icon-container span[class*="e-"],
.dark a.active .icon-container .e-icons,
.dark a.active .icon-container .e-icon,
.dark a.active .icon-container i,
.dark a.active .icon-container [class*="fa-"],
.dark a.active .icon-container span[class*="e-"],
.dark a.active .icon-container .e-btn-icon {
    color: white !important;
    fill: white !important; /* for SVG icons */
}