/*
 | 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. The section's accent colour is
 | supplied per sidebar via the --nav-active custom property set on the sidebar root.
 */

/* Active section, whole sidebar COLLAPSED (icons only): the group's dropdown trigger
   is the only element rendered, so highlight it. The --nav-active-bg fill matches the
   item highlight; sidebars that don't set it fall back to transparent (text only). */
.nav-section-current [data-flux-sidebar-group-dropdown] > button {
    color: var(--nav-active, #104217) !important;
    background-color: var(--nav-active-bg, transparent) !important;
}

/* 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. */
.nav-section-current [data-flux-sidebar-group] > button:not([data-open]) {
    color: var(--nav-active, #104217) !important;
    background-color: var(--nav-active-bg, transparent) !important;
}

/* Active nav ITEM (any sidebar): accent text + fill driven by the per-sidebar
   custom properties, so one rule themes every nav. 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(--nav-active, #104217) !important;
    background-color: var(--nav-active-bg, transparent) !important;
}

/* 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;
}