/*
 | Active-page highlighting for the sidebars.
 |
 | Item-level highlights are handled by Flux's data-current + Tailwind classes on
 | each <flux:sidebar.item>. These rules cover the two cases Flux can't express
 | through the group component's public API, both keyed off the .nav-section-current
 | marker div wrapped around each expandable group. One accent for every sidebar:
 | brand-green text (var(--brand) so white-label CSS can retint it) on a zinc-300 fill.
 */

/* Active section, whole sidebar COLLAPSED (icons only): the group's dropdown trigger
   is the only element rendered, so highlight it. Child combinator (>) after the marker:
   a group nested inside a current section (EUDR inside Product Ratings) has its own
   marker div and must not inherit the outer section's highlight. */
.nav-section-current > [data-flux-sidebar-group-dropdown] > button {
    color: var(--brand, #104217) !important;
    background-color: #d4d4d8 !important; /* zinc-300 */
}

/* Active section, sidebar expanded but the group's accordion CLOSED: the active item
   is hidden, so highlight the group heading instead. Flux toggles data-open on the
   disclosure heading button when open, so :not([data-open]) targets the closed state
   only — when open, the active child item carries the highlight instead. Child
   combinator (>) for the same nested-group reason as above. */
.nav-section-current > [data-flux-sidebar-group] > button:not([data-open]) {
    color: var(--brand, #104217) !important;
    background-color: #d4d4d8 !important; /* zinc-300 */
}

/* Active nav ITEM (any sidebar). Only items rendered by the <x-nav.item> component
   carry .nav-active-item, so un-migrated navs are untouched. */
.nav-active-item[data-current] {
    color: var(--brand, #104217) !important;
    background-color: #d4d4d8 !important; /* zinc-300 */
}

/* Deterministic inactive nav-item text colour. Set here (not as a Tailwind utility on
   the component) because Flux's <flux:sidebar.item> bakes in text-zinc-500; a utility
   class collides with it and resolves inconsistently. Plain !important CSS wins reliably.
   The [data-current] rule above has higher specificity, so active items keep the accent. */
.nav-active-item {
    color: #3f3f46 !important; /* zinc-700 — active/clickable items */
}
.nav-active-item:hover {
    color: #18181b !important; /* zinc-900 */
}
.nav-disabled-item {
    color: #a1a1aa !important; /* zinc-400 — permission-denied / upgrade items, clearly greyed */
}
/* Group HEADING text (expandable group disclosure button). Flux bakes in text-zinc-500,
   which left group headings lighter than the item links beside them. Match the items
   (zinc-700) so the top-level list reads as one consistent colour. The closed-accordion
   accent rule above has higher specificity, so an active collapsed group still accents. */
[data-flux-sidebar] [data-flux-sidebar-group] > button {
    color: #3f3f46 !important;
}