/* Filament Sidebar Auto-Collapse Enhancement */
/* This file contains only additional responsive behavior for sidebar */

/* Mobile and tablet responsive behavior */
@media (max-width: 1279px) {
    .fi-sidebar {
        position: fixed !important;
        z-index: 50;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .fi-sidebar-open {
        transform: translateX(0) !important;
    }

    .fi-main-ctn {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .fi-main {
        max-width: 100% !important;
    }
}

/* Desktop enhanced behavior - ensure content expands when sidebar collapses */
@media (min-width: 1280px) {
    /* Smooth transitions for all sidebar interactions */
    .fi-sidebar {
        transition: width 0.3s ease-in-out;
    }

    .fi-main-ctn {
        transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    }

    .fi-main {
        transition: max-width 0.3s ease-in-out;
    }

    /* When sidebar is CLOSED (not having fi-main-ctn-sidebar-open class) */
    /* Remove max-width constraint to allow content to expand */
    .fi-main-ctn:not(.fi-main-ctn-sidebar-open) .fi-main {
        max-width: none !important;
    }
}

/* Mobile overlay */
@media (max-width: 1279px) {
    .fi-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
    }

    .fi-sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}