/**
 * Alpine.js x-cloak directive styles
 * This file ensures elements with x-cloak are hidden until Alpine.js loads
 * Must be loaded before Alpine.js initializes
 */

/* Hide elements with x-cloak attribute until Alpine.js loads */
[x-cloak] {
    display: none !important;
}

/* Additional Alpine.js related styles */
[x-cloak] * {
    display: none !important;
}

/* Ensure dropdown menus are properly hidden */
.dropdown-menu[x-cloak],
.user-dropdown[x-cloak] {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: scale(0.95) !important;
}

/* Prevent flash of unstyled content for Alpine components */
[x-data][x-cloak] {
    visibility: hidden !important;
}

/* Override any conflicting styles */
[x-cloak].block,
[x-cloak].flex,
[x-cloak].inline-block {
    display: none !important;
}