/* ═══════════════════════════════════════════════════════════════════
   PCM Nav Cluster — animations & nested-cluster styling
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Flash prevention ────────────────────────────────────────────── */
/*
 * The inline script (injected by NavClusterPlugin via a render hook) adds
 * fi-nav-cluster-nested before the browser paints, so no flash prevention
 * CSS is needed for the initial load.
 *
 * For Livewire SPA re-renders, nav-cluster.js re-nests immediately on
 * livewire:navigated — fast enough that no visible flash occurs.
 */

/* ─── Mode A: smoother collapse chevron ───────────────────────────── */
/*
 * Filament's collapse button already rotates the chevron via Alpine
 * x-bind:class="-rotate-90" but adds no CSS transition — it snaps.
 * This adds a smooth ease curve without changing the rotation logic.
 */
.fi-sidebar-group-collapse-btn .fi-icon svg,
.fi-sidebar-group-collapse-btn > svg {
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Parent group icons are injected by the plugin instead of using
   NavigationGroup::icon(), so Filament's group/item icon guard is avoided. */
.pcm-nav-cluster-parent-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: rgb(107 114 128); /* gray-500 */
}

.pcm-nav-cluster-parent-icon .fi-icon,
.pcm-nav-cluster-parent-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-active > .fi-sidebar-group-btn > .pcm-nav-cluster-parent-icon {
    color: rgb(var(--primary-600, 245 158 11));
}

.dark .pcm-nav-cluster-parent-icon {
    color: rgb(156 163 175); /* gray-400 */
}

.dark .fi-active > .fi-sidebar-group-btn > .pcm-nav-cluster-parent-icon {
    color: rgb(var(--primary-400, 251 191 36));
}

/* ─── Mode B: nested cluster group ───────────────────────────────── */
/*
 * Once JS moves the cluster <li> inside the parent group's items and
 * adds fi-nav-cluster-nested, these rules style it to look like a
 * nav-item-style header rather than a top-level group heading.
 */

.fi-nav-cluster-nested {
    visibility: visible;     /* lift the flash-prevention rule above */
}

/* Group header button: look like a sidebar nav item */
.fi-nav-cluster-nested > .fi-sidebar-group-btn {
    width: 100%;
    border-radius: 0.5rem;      /* rounded-lg */
    padding: 0.5rem 0.75rem;    /* py-2 px-3, matching fi-sidebar-item-btn */
    transition: background-color 75ms ease;
    cursor: pointer;
}

.fi-nav-cluster-nested > .fi-sidebar-group-btn:hover {
    background-color: rgb(243 244 246);     /* gray-100 */
}

/* Label: use text-gray-700 instead of Filament's group-heading gray-500 */
.fi-nav-cluster-nested > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: rgb(55 65 81);           /* gray-700 */
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
}

/* Active cluster: label adopts primary colour */
.fi-nav-cluster-nested.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: rgb(var(--primary-600, 245 158 11));
}

/* Smooth collapse chevron — same curve as Mode A */
.fi-nav-cluster-nested .fi-sidebar-group-collapse-btn .fi-icon svg {
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ─── Dark mode ───────────────────────────────────────────────────── */

.dark .fi-nav-cluster-nested > .fi-sidebar-group-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);    /* white/5 */
}

.dark .fi-nav-cluster-nested > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: rgb(209 213 219);    /* gray-300 */
}

.dark .fi-nav-cluster-nested.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: rgb(var(--primary-400, 251 191 36));
}

/* ─── Child items slide-in animation ──────────────────────────────── */
/*
 * When the cluster expands (Alpine removes x-show:false), the items
 * list slides in via this animation. Scoped to nested clusters so it
 * doesn't affect top-level group expansion.
 */
.fi-nav-cluster-nested > .fi-sidebar-group-items {
    transform-origin: top center;
    animation: pcmNavClusterExpand 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes pcmNavClusterExpand {
    from {
        opacity: 0;
        transform: scaleY(0.9) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}