/* Base menu item styles */
.menu-item {
    padding: 0.5rem 0.75rem;
    border-radius: 0.125rem;
    margin-bottom: 0.125rem;
    transition: all 0.15s ease;
}

.menu-item:last-child {
    margin-bottom: 0;
}

/* Inactive menu item state */
.menu-item:not(.menu_active) {
    background-color: transparent;
}

.menu-item:not(.menu_active) a {
    color: rgb(226 232 240); /* text-slate-200 */
}

.menu-item:not(.menu_active) a:hover {
    color: rgb(255 255 255); /* text-white */
}

.menu-item:not(.menu_active) svg path {
    fill: #b0bed1; /* Default icon color for inactive */
}

/* Active menu item state */
.menu-item.menu_active {
    background-color: rgb(15 23 42) !important; /* bg-slate-900 */
}

.menu-item.menu_active a {
    color: rgb(226 232 240) !important; /* text-slate-200 */
}

.menu-item.menu_active a:hover {
    color: rgb(255 255 255) !important; /* text-white */
}

/* Active menu item icon colors using your company green palette */
.menu-item.menu_active svg .icon-primary {
    fill: rgb(100, 167, 96) !important; /* Your company primary color */
}

.menu-item.menu_active svg .icon-secondary {
    fill: rgb(80, 134, 77) !important; /* Darker shade */
}

.menu-item.menu_active svg .icon-tertiary {
    fill: rgb(187, 247, 183) !important; /* Lighter shade */
}

/* Generic active icon styling */
.menu-item.menu_active svg path[fill="#b0bed1"] {
    fill: rgb(100, 167, 96) !important;
}

/* Specific styling for dashboard icon when active */
.menu-item.menu_active .dashboard-icon .primary {
    fill: rgb(100, 167, 96) !important;
}

.menu-item.menu_active .dashboard-icon .secondary {
    fill: rgb(80, 134, 77) !important;
}

.menu-item.menu_active .dashboard-icon .tertiary {
    fill: rgb(187, 247, 183) !important;
}

/* Hover effects for better UX */
.menu-item:hover:not(.menu_active) {
    background-color: rgba(100, 167, 96, 0.1);
}

.menu-item:hover:not(.menu_active) svg path {
    fill: rgb(100, 167, 96);
    transition: fill 0.15s ease;
}

/* Badge styling for active items */
.menu-item.menu_active .badge {
    background-color: rgb(100, 167, 96) !important;
    color: white !important;
}

/* Focus states for accessibility */
.menu-item a:focus {
    outline: 2px solid rgb(100, 167, 96);
    outline-offset: 2px;
}

/* Submenu styling */
.menu-item.menu_active .submenu {
    background-color: rgba(100, 167, 96, 0.1);
}

.menu-item.menu_active .submenu a {
    color: rgb(100, 167, 96) !important;
}

.menu-item.menu_active .submenu a:hover {
    color: rgb(80, 134, 77) !important;
}