/*
 * Sidebar active-state highlighting.
 * Scoped with the #sidebar_primary_menu id so these rules win over the
 * compiled Tailwind utility classes already present on the same elements,
 * without needing to add new utility classes (which would need a rebuild).
 */

/* Top-level active item: single links (Dashboard) and group headers (e.g. Orders & Delivery)
   get the same solid highlight, and stay highlighted while the group is expanded. */
#sidebar_primary_menu > .menu-item.active > .menu-link {
    background-color: var(--tw-primary);
    border-color: var(--tw-primary);
}

#sidebar_primary_menu > .menu-item.active > .menu-link .menu-title,
#sidebar_primary_menu > .menu-item.active > .menu-link .menu-arrow,
#sidebar_primary_menu > .menu-item.active > .menu-link .menu-icon,
#sidebar_primary_menu > .menu-item.active > .menu-link .menu-icon i {
    color: #ffffff;
}

/* Active child item inside an expanded group: blue text + blue icon.
   Inactive children keep their current gray look untouched. */
#sidebar_primary_menu .menu-accordion > .menu-item.active > .menu-link .menu-title {
    color: var(--tw-primary);
    font-weight: 500;
}

#sidebar_primary_menu .menu-accordion > .menu-item.active > .menu-link .menu-icon,
#sidebar_primary_menu .menu-accordion > .menu-item.active > .menu-link .menu-icon i {
    color: var(--tw-primary);
}