<!-- Packages CSS -->
@Vite('eventmie-pro/resources/sass/vendor.scss')

<!-- Bootstrap RTL CSS only if langauge is RTL -->
@if (is_rtl())
    <link rel="stylesheet" href="{{ eventmie_asset('css/bootstrap-rtl.min.css') }}">
@endif

<!-- New Themese Theme CSS -->
@Vite('eventmie-pro/resources/sass/theme.scss')

<!-- Custom CSS -->
<link rel="stylesheet" href="{{ eventmie_asset('css/theme-custom.css') }}">

{{-- CUSTOM --}}
<link rel="stylesheet" href="{{ asset('css/eventmie-custom.css') }}?v=3.0">
{{-- CUSTOM --}}

<!-- Styles for dark & light mode -->
@vite(['resources/css/theme.css'])

{{-- Blocking script to prevent flash of light theme --}}
<script>
    (function() {
        const THEME_COOKIE = 'eventmie_theme';
        const THEMES = ['light', 'dark', 'auto'];
        const DEFAULT_THEME = {!! json_encode(setting('site.default_theme', 'auto')) !!};
        
        // Cookie helper function
        function getCookie(name) {
            const nameEQ = name + '=';
            const cookies = document.cookie.split(';');
            for (let cookie of cookies) {
                cookie = cookie.trim();
                if (cookie.indexOf(nameEQ) === 0) {
                    return decodeURIComponent(cookie.substring(nameEQ.length));
                }
            }
            return null;
        }
        
        // Get system theme preference
        function getSystemTheme() {
            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }
        
        // Apply theme immediately
        const storedTheme = getCookie(THEME_COOKIE);
        const theme = THEMES.includes(storedTheme) ? storedTheme : DEFAULT_THEME;
        const effectiveTheme = theme === 'auto' ? getSystemTheme() : theme;
        
        // Apply theme attribute to html element before CSS loads
        document.documentElement.setAttribute('data-bs-theme', effectiveTheme);
    })();
</script>