/* Filament Sidebar Drawer Overlay with Blur Effect */

/* Hide collapsed sidebar completely */
[x-cloak] {
    display: none !important;
}

/* Apply blur and overlay to main content when sidebar is open */
.fi-main-ctn-sidebar-open .fi-main {
    position: relative;
    filter: blur(4px);
    transition: filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Overlay on main content */
.fi-main-ctn-sidebar-open .fi-main::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

/* Dark mode overlay */
.dark .fi-main-ctn-sidebar-open .fi-main::before {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Remove blur when sidebar is closed */
.fi-main {
    filter: none;
    transition: filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ensure sidebar appears above blurred content */
aside.fi-sidebar {
    z-index: 40 !important;
}

/* Smooth transitions for sidebar */
aside.fi-sidebar {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Make sidebar overlay on all screen sizes when open */
@media (min-width: 1024px) {
    .fi-sidebar-open aside.fi-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .dark .fi-sidebar-open aside.fi-sidebar {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }
}

/* Ensure main content takes full width when sidebar is collapsed */
.fi-sidebar-collapsed main.fi-main {
    margin-left: 0 !important;
}

/* Restaurant Switcher Dropdown - Fix hover contrast in dark mode */
.restaurant-switcher-item:hover {
    color: #111827 !important; /* gray-900 */
    background-color: #f3f4f6 !important; /* gray-100 */
}

.dark .restaurant-switcher-item:hover {
    color: #ffffff !important; /* white */
    background-color: #374151 !important; /* gray-700 */
}