<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="FINA - Track your expenses, manage your finances">
    <meta name="theme-color" content="#111a22">
    <title>{% block title %}FINA - Personal Finance Tracker{% endblock %}</title>
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    
    <!-- Icons -->
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='icons/favicon.png') }}">
    <link rel="icon" type="image/png" sizes="96x96" href="{{ url_for('static', filename='icons/icon-96x96.png') }}">
    <link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
    <link rel="icon" type="image/png" sizes="512x512" href="{{ url_for('static', filename='icons/icon-512x512.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}">
    
    <!-- Preconnect for faster resource loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdn.tailwindcss.com">
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#2b8cee",
                        "background-light": "#f6f7f8",
                        "background-dark": "#111a22",
                        "card-dark": "#1a2632",
                        "card-light": "#ffffff",
                        "sidebar-light": "#ffffff",
                        "border-light": "#e2e8f0",
                        "text-main": "#0f172a",
                        "text-muted": "#64748b",
                    },
                    fontFamily: {
                        "display": ["Inter", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "2xl": "1rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
    
    <style>
        /* Dark theme scrollbar */
        .dark ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .dark ::-webkit-scrollbar-track {
            background: transparent; 
        }
        .dark ::-webkit-scrollbar-thumb {
            background: #324d67; 
            border-radius: 4px;
        }
        .dark ::-webkit-scrollbar-thumb:hover {
            background: #4b6a88; 
        }
        
        /* Light theme scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent; 
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1; 
            border-radius: 4px;
        }
        ::-webkit-scrollbarlight dark:bg-background-dark text-text-main dark:text-white font-display overflow-hidden transition-colors duration-200
            background: #94a3b8; 
        }
        
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        
        .glass {
            background: rgba(26, 38, 50, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(35, 54, 72, 0.5);
        }
        
        /* Optimize rendering */
        * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    
    {% block extra_css %}{% endblock %}
    
    <!-- Prevent theme flashing by applying theme before page render -->
    <script>
        (function() {
            const theme = localStorage.getItem('theme') || 'dark';
            if (theme === 'dark') {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
            
            {% if current_user.is_authenticated %}
            // Sync user language preference from database to localStorage
            const dbLanguage = '{{ current_user.language }}';
            const storedLanguage = localStorage.getItem('language');
            
            // Always use database language as source of truth
            if (dbLanguage && dbLanguage !== storedLanguage) {
                localStorage.setItem('language', dbLanguage);
            }
            {% endif %}
        })();
    </script>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-main dark:text-white font-display overflow-hidden">
    {% block body %}{% endblock %}
    
    <!-- Toast Notification Container -->
    <div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2"></div>
    
    <script src="{{ url_for('static', filename='js/i18n.js') }}"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    <script src="{{ url_for('static', filename='js/pwa.js') }}"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>
