/* Animazione sidebar dei pannelli Filament (condivisa chef/admin). */
/* ============ CURVA & DURATA ============ */
    :root {
        --fr-sidebar-ease: cubic-bezier(0.32, 0.72, 0, 1);
        --fr-sidebar-duration: 320ms;
        --fr-sidebar-fade-duration: 200ms;
    }

    /* ============ FORZA SU TUTTE LE PROPRIETA' DELLA SIDEBAR ============
       Filament v3 applica .lg:transition-none sulla sidebar per evitare flash
       all'avvio. Sovrascriviamo con override aggressivo per avere l'animazione
       classica (slide+shrink). */
    .fi-sidebar,
    aside.fi-sidebar,
    .fi-layout .fi-sidebar,
    .fi-layout aside.fi-sidebar,
    .fi-sidebar.lg\:transition-none,
    .lg\:transition-none.fi-sidebar {
        transition-property: width, transform, margin-left, margin-right, opacity, box-shadow !important;
        transition-duration: var(--fr-sidebar-duration) !important;
        transition-timing-function: var(--fr-sidebar-ease) !important;
        will-change: width, transform;
    }

    /* ============ MAIN CONTENT SHIFT ============
       Quando la sidebar collassa il main si sposta — anima anche la sua
       margin/padding per uno scroll fluido. */
    .fi-main-ctn,
    .fi-main,
    .fi-topbar,
    .fi-sidebar-nav-ctn,
    .fi-layout > .fi-main,
    .fi-layout > div > .fi-main {
        transition-property: margin, padding, transform, width, max-width !important;
        transition-duration: var(--fr-sidebar-duration) !important;
        transition-timing-function: var(--fr-sidebar-ease) !important;
        will-change: margin, transform;
    }

    /* Anche su mobile dove c'e' uno slide fuori schermo */
    @media (max-width: 1023px) {
        .fi-sidebar {
            transition: transform var(--fr-sidebar-duration) var(--fr-sidebar-ease) !important;
        }
    }

    /* ============ SIDEBAR CONTENT FADE + STAGGER ============ */
    .fi-sidebar-header,
    .fi-sidebar .fi-logo,
    .fi-sidebar-item-label,
    .fi-sidebar-group-label,
    .fi-sidebar-nav .fi-sidebar-item-grouped-border {
        transition:
            opacity var(--fr-sidebar-fade-duration) ease-in-out,
            transform var(--fr-sidebar-duration) var(--fr-sidebar-ease),
            max-width var(--fr-sidebar-duration) var(--fr-sidebar-ease) !important;
    }

    /* Stagger delicato sugli item all'apertura (aspettano la width) */
    .fi-sidebar:not([data-collapsed="true"]) .fi-sidebar-item-label {
        animation: frSidebarItemReveal 480ms var(--fr-sidebar-ease) both;
    }
    .fi-sidebar-item:nth-child(2) .fi-sidebar-item-label { animation-delay: 30ms; }
    .fi-sidebar-item:nth-child(3) .fi-sidebar-item-label { animation-delay: 60ms; }
    .fi-sidebar-item:nth-child(4) .fi-sidebar-item-label { animation-delay: 90ms; }
    .fi-sidebar-item:nth-child(5) .fi-sidebar-item-label { animation-delay: 120ms; }
    .fi-sidebar-item:nth-child(6) .fi-sidebar-item-label { animation-delay: 140ms; }
    @keyframes frSidebarItemReveal {
        from { opacity: 0; transform: translateX(-6px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Item sidebar hover: lift molto delicato */
    .fi-sidebar-item .fi-sidebar-item-button {
        transition:
            background-color 200ms ease,
            color 180ms ease,
            transform 200ms var(--fr-sidebar-ease),
            box-shadow 200ms ease !important;
    }
    .fi-sidebar-item .fi-sidebar-item-button:hover {
        transform: translateX(2px);
    }

    /* x-show di Alpine aggiunge display:none: per avere il fade dobbiamo
       gestire quel lasso con [style*="display: none"] ma Alpine toglie/aggiunge
       troppo rapidamente; quindi diamo enfasi al transform+opacity via
       attributi x-transition se presenti, altrimenti lasciamo che display
       funzioni senza fade (la width gia' anima). */

    /* ============ ICONE ============ */
    .fi-sidebar-item-icon,
    .fi-sidebar-item .fi-icon {
        transition: transform 280ms var(--fr-sidebar-ease), color 180ms ease !important;
    }

    /* ============ HAMBURGER BUTTON FEEDBACK ============ */
    .fi-topbar-open-sidebar-btn,
    .fi-topbar-close-sidebar-btn,
    button[x-on\\:click*="sidebar"],
    button[\\@click*="sidebar"] {
        transition: transform 200ms var(--fr-sidebar-ease), background-color 160ms ease !important;
    }
    .fi-topbar-open-sidebar-btn:hover,
    .fi-topbar-close-sidebar-btn:hover,
    button[x-on\\:click*="sidebar"]:hover {
        transform: scale(1.08);
    }
    .fi-topbar-open-sidebar-btn:active,
    .fi-topbar-close-sidebar-btn:active,
    button[x-on\\:click*="sidebar"]:active {
        transform: scale(0.92);
    }

    /* ============ DISABILITA transition-none di Tailwind ============ */
    /* Tailwind lg:transition-none imposta transition-property: none.
       Qui riattiviamo per la sidebar con !important. */
    @media (min-width: 1024px) {
        .fi-sidebar.lg\\:transition-none,
        .lg\\:transition-none.fi-sidebar {
            transition-property: width, transform, margin, opacity !important;
            transition-duration: var(--fr-sidebar-duration) !important;
            transition-timing-function: var(--fr-sidebar-ease) !important;
        }
    }