/* Filament Collapsible Sub-Navigation Plugin Styles */

/* Main flex container for sub-navigation pages */
.fi-page-main {
    display: flex;
    gap: 1.5rem;
}

/* Sidebar container */
.fi-page-sub-navigation-sidebar-ctn {
    flex-shrink: 0;
    flex-basis: 16rem;
}

/* Content fills remaining space */
.fi-page-content {
    flex: 1 1 0%;
    min-width: 0;
}

/* Collapsed state */
.fi-subnav-collapsed .fi-page-sub-navigation-sidebar-ctn {
    flex-basis: 4rem !important;
}

.fi-subnav-collapsed .fi-page-sub-navigation-sidebar .fi-sidebar-item-label,
.fi-subnav-collapsed .fi-page-sub-navigation-sidebar .fi-badge,
.fi-subnav-collapsed .fi-page-sub-navigation-sidebar .fi-sidebar-group-label {
    display: none;
}

.fi-subnav-collapsed .fi-page-sub-navigation-sidebar .fi-sidebar-item-button {
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    position: relative;
}

/* Ensure tooltips work on collapsed items */
.fi-subnav-collapsed .fi-page-sub-navigation-sidebar .fi-sidebar-item-button {
    overflow: visible;
}

/* Toggle wrapper */
.fi-subnav-toggle-wrapper {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem;
}

.fi-subnav-collapsed .fi-subnav-toggle-wrapper {
    justify-content: center;
}

@media (max-width: 767px) {
    .fi-subnav-toggle-wrapper {
        display: none;
    }
}

/* Smooth transitions only when ready */
.fi-subnav-ready .fi-page-sub-navigation-sidebar-ctn {
    transition-property: flex-basis;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.fi-subnav-ready .fi-page-sub-navigation-sidebar .fi-sidebar-item-label,
.fi-subnav-ready .fi-page-sub-navigation-sidebar .fi-badge,
.fi-subnav-ready .fi-page-sub-navigation-sidebar .fi-sidebar-group-label {
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}

.fi-subnav-collapsed.fi-subnav-ready .fi-page-sub-navigation-sidebar .fi-sidebar-item-label,
.fi-subnav-collapsed.fi-subnav-ready .fi-page-sub-navigation-sidebar .fi-badge,
.fi-subnav-collapsed.fi-subnav-ready .fi-page-sub-navigation-sidebar .fi-sidebar-group-label {
    opacity: 0;
    transform: translateX(-8px);
}

.fi-subnav-ready .fi-page-sub-navigation-sidebar .fi-sidebar-item-button {
    transition: padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
}