<!DOCTYPE html>
<html lang="en"> <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link href="https://liongatecapitals.com/storage/app/public/photos/M896e8Qn8JaC9WWPKDgFzcVDFmrVdo7iXZu09ITL.png" rel="icon" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: { sans: ['Inter','sans-serif'] },
          colors: { slate: { 950: '#020617', 900: '#0f172a', 850: '#0b1221', 800: '#1e293b', 750: '#1a2234', 700: '#334155' } }
        }
      }
    }
    </script>
    
    <script>
        if (localStorage.getItem('darkMode') === 'dark' || (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    </script>
    
    <script>
        window.dashboardData = function() {
            return {
                sidebarOpen: false,
                hideBalance: false,
                // FIXED: Added central Dark Mode state here
                darkMode: localStorage.getItem('darkMode') === 'dark' || (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches),
                
                init() {
                    // Initialize Dark Mode on load
                    if (this.darkMode) {
                        document.documentElement.classList.add('dark');
                    } else {
                        document.documentElement.classList.remove('dark');
                    }

                    this.hideBalance = localStorage.getItem('hideBalance') === 'true';
                    
                    this.$watch('hideBalance', val => {
                        localStorage.setItem('hideBalance', val);
                        window.dispatchEvent(new CustomEvent('balance-toggled', { detail: { hidden: val } }));
                    });
                    this.$watch('sidebarOpen', val => {
                        document.body.style.overflow = val ? 'hidden' : '';
                    });
                },
                
                toggleSidebar() { 
                    this.sidebarOpen = !this.sidebarOpen; 
                },
                
                toggleBalance() { 
                    this.hideBalance = !this.hideBalance; 
                },

                // FIXED: Central toggle function
                toggleDarkMode() {
                    this.darkMode = !this.darkMode;
                    localStorage.setItem('darkMode', this.darkMode ? 'dark' : 'light');
                    if (this.darkMode) {
                        document.documentElement.classList.add('dark');
                    } else {
                        document.documentElement.classList.remove('dark');
                    }
                }
            };
        };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <style>
      *, *::before, *::after { box-sizing: border-box; }
      html, body { overflow-x: hidden; max-width: 100vw; }
      [x-cloak] { display: none !important; }
      .scroll-thin::-webkit-scrollbar { width: 4px; height: 4px; }
      .scroll-thin::-webkit-scrollbar-thumb { background: #475569; border-radius: 99px; }
      .glass-effect { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
      .hide-amount { filter: blur(6px); user-select: none; transition: filter 0.2s ease; }
      
      /* Sidebar styles */
      .sidebar-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 18rem;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
      }
      .sidebar-panel.open {
        transform: translateX(0);
      }
      @media (min-width: 768px) {
        .sidebar-panel {
          transform: translateX(0);
          position: sticky;
          height: calc(100vh - 4rem);
          top: 4rem;
        }
      }
      .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 35;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
      }
      .sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;
      }
      .blur-balance { filter: blur(4px); user-select: none; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <?php if (isset($_SESSION['success'])): ?>
<script>
    Swal.fire({
        title: 'Success!',
        text: '<?php echo $_SESSION['success']; ?>',
        icon: 'success',
        confirmButtonColor: '#3b82f6',
        confirmButtonText: 'Great!',
        background: document.documentElement.classList.contains('dark') ? '#0f172a' : '#ffffff',
        color: document.documentElement.classList.contains('dark') ? '#f1f5f9' : '#0f172a',
    });
</script>
<?php unset($_SESSION['success']); // Clear the message so it doesn't pop up again ?>
<?php endif; ?>

<?php if (isset($_SESSION['error'])): ?>
<script>
    Swal.fire({
        title: 'Execution Failed',
        text: '<?php echo $_SESSION['error']; ?>',
        icon: 'error',
        confirmButtonColor: '#f43f5e', // Rose/Danger color
        background: document.documentElement.classList.contains('dark') ? '#0f172a' : '#ffffff',
        color: document.documentElement.classList.contains('dark') ? '#f1f5f9' : '#0f172a',
    });
</script>
<?php unset($_SESSION['error']); ?>
<?php endif; ?>
</head>

<!-- FIXED: Replaced hardcoded bg-slate-950 with dynamic light/dark classes -->
<body class="bg-slate-50 dark:bg-[#0b111a] text-slate-900 dark:text-slate-100 font-sans antialiased transition-colors duration-300" x-data="dashboardData()">