/* ==========================================================================
   Sidebar collapse / expand animation  (public/css/sidebar-animation.css)
   Loaded after Filament's CSS from AdminPanelProvider (HEAD_END hook).
   ========================================================================== */

:root {
    --rnp-sidebar-ease: cubic-bezier(.4, 0, .2, 1);
    --rnp-sidebar-duration: .3s;
}

/* Layout: sidebar width + content shift, both directions */
.fi-sidebar,
.fi-main-ctn,
.fi-topbar {
    transition:
        width var(--rnp-sidebar-duration) var(--rnp-sidebar-ease),
        max-width var(--rnp-sidebar-duration) var(--rnp-sidebar-ease),
        margin var(--rnp-sidebar-duration) var(--rnp-sidebar-ease),
        padding var(--rnp-sidebar-duration) var(--rnp-sidebar-ease),
        transform var(--rnp-sidebar-duration) var(--rnp-sidebar-ease);
}

/* Keep the icon pinned to the left so it never shifts during the toggle.
   Only the label animates, which gives a left-to-right motion on open.
   padding/gap transitions are intentionally removed. */
.fi-sidebar-item-btn,
.fi-sidebar-group-btn {
    justify-content: flex-start !important;
    padding-inline-start: .875rem !important;
    transition: background-color .15s ease;
}

/* Labels: Filament hides them with Alpine x-show (inline display:none), which
   cannot animate. While hidden we keep them in layout, collapsed to zero width
   and transparent, so they can fade/slide out on close and back in on open. */
.fi-sidebar-item-label,
.fi-sidebar-group-label {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity .5s ease,
        max-width var(--rnp-sidebar-duration) var(--rnp-sidebar-ease),
        transform var(--rnp-sidebar-duration) var(--rnp-sidebar-ease);
}

/* Hidden state: negative offset = label slides in from the left on open */
.fi-sidebar-item-label[style*="display: none"],
.fi-sidebar-group-label[style*="display: none"] {
    display: inline-block !important;
    max-width: 0;
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar,
    .fi-main-ctn,
    .fi-topbar,
    .fi-sidebar-item-btn,
    .fi-sidebar-group-btn,
    .fi-sidebar-item-label,
    .fi-sidebar-group-label {
        transition: none;
    }
}