body {
            font-family: 'Inter', sans-serif;
            background-color: #f1f5f9; /* slate-100 */
        }
        .chart-container {
            position: relative;
            width: 100%;
            height: 300px;
            max-height: 400px;
        }
        @media (min-width: 640px) {
            .chart-container {
                height: 350px;
            }
        }
        @media (min-width: 1024px) {
            .chart-container {
                height: 400px;
            }
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #e2e8f0; }
        ::-webkit-scrollbar-thumb { background: #64748b; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #475569; }
        /* Style for sortable table headers */
        .sortable {
            cursor: pointer;
            position: relative;
        }
        .sortable::after {
            content: ' \2195'; /* Up-down arrow */
            opacity: 0.4;
            position: absolute;
            right: 0.5rem;
        }
        .sortable.asc::after {
            content: ' \2191'; /* Up arrow */
            opacity: 1;
        }
        .sortable.desc::after {
            content: ' \2193'; /* Down arrow */
            opacity: 1;
        }

 
    
        const reportData = {
            amcs: [
                { id: 'sbi', name: 'SBI Mutual Fund', aum: 9.13, established: 1987, ceo: 'Shamsher Singh', funds: { equity: 30, debt: 45, hybrid: 15, other: 10 }, topSchemes: [{name:'SBI Bluechip Fund', aum: 45200}, {name:'SBI Small Cap Fund', aum: 25600}, {name:'SBI Magnum Midcap', aum:18300}] },
                { id: 'hdfc', name: 'HDFC Mutual Fund', aum: 6.61, established: 1999, ceo: 'Navneet Munot', funds: { equity: 28, debt: 50, hybrid: 12, other: 10 }, topSchemes: [{name:'HDFC Flexi Cap Fund', aum: 53100}, {name:'HDFC Mid-Cap Opp', aum: 65400}, {name:'HDFC Balanced Adv', aum:78900}] },
                { id: 'icici', name: 'ICICI Prudential MF', aum: 7.02, established: 1993, ceo: 'Nimesh Shah', funds: { equity: 35, debt: 40, hybrid: 20, other: 5 }, topSchemes: [{name:'ICICI Pru Bluechip', aum: 54300}, {name:'ICICI Pru Value Discovery', aum: 45200}, {name:'ICICI Pru Multi-Asset', aum:31100}] },
                { id: 'axis', name: 'Axis Mutual Fund', aum: 2.53, established: 2009, ceo: 'B. Gopkumar', funds: { equity: 40, debt: 30, hybrid: 25, other: 5 }, topSchemes: [{name:'Axis Bluechip Fund', aum: 30100}, {name:'Axis Long Term Equity', aum: 28700}, {name:'Axis Midcap Fund', aum:25600}] },
                { id: 'kotak', name: 'Kotak Mahindra MF', aum: 3.82, established: 1998, ceo: 'Nilesh Shah', funds: { equity: 25, debt: 55, hybrid: 15, other: 5 }, topSchemes: [{name:'Kotak Flexicap Fund', aum: 42300}, {name:'Kotak Emerging Equity', aum: 43100}, {name:'Kotak Small Cap', aum:15500}] },
                { id: 'nippon', name: 'Nippon India MF', aum: 4.31, established: 1995, ceo: 'Sundeep Sikka', funds: { equity: 38, debt: 32, hybrid: 22, other: 8 }, topSchemes: [{name:'Nippon India Small Cap', aum: 50400}, {name:'Nippon India Growth Fund', aum: 27600}, {name:'Nippon India Pharma', aum:11200}] },
                { id: 'mirae', name: 'Mirae Asset MF', aum: 1.68, established: 2008, ceo: 'Swarup Mohanty', funds: { equity: 50, debt: 20, hybrid: 20, other: 10 }, topSchemes: [{name:'Mirae Asset Large Cap', aum: 37800}, {name:'Mirae Asset Emerging Bluechip', aum: 35400}, {name:'Mirae Asset Tax Saver', aum:21500}] },
                { id: 'uti', name: 'UTI Mutual Fund', aum: 2.45, established: 2003, ceo: 'Imtaiyazur Rahman', funds: { equity: 30, debt: 50, hybrid: 10, other: 10 }, topSchemes: [{name:'UTI Nifty Index Fund', aum: 28000}, {name:'UTI Flexi Cap Fund', aum: 22000}, {name:'UTI Liquid Fund', aum:15000}] },
                { id: 'franklin', name: 'Franklin Templeton MF', aum: 0.98, established: 1996, ceo: 'Sanjay Sapre', funds: { equity: 25, debt: 60, hybrid: 10, other: 5 }, topSchemes: [{name:'Franklin India Feeder - US Opp', aum: 10000}, {name:'Franklin India Prima Fund', aum: 8000}, {name:'Franklin India Income Opp', aum:7000}] },
                { id: 'dsp', name: 'DSP Mutual Fund', aum: 1.55, established: 1996, ceo: 'Kalpen Parekh', funds: { equity: 35, debt: 45, hybrid: 15, other: 5 }, topSchemes: [{name:'DSP Midcap Fund', aum: 18000}, {name:'DSP Small Cap Fund', aum: 15000}, {name:'DSP Equity Opportunities', aum:12000}] },
                { id: 'edelweiss', name: 'Edelweiss Mutual Fund', aum: 0.75, established: 2008, ceo: 'Radhika Gupta', funds: { equity: 30, debt: 50, hybrid: 10, other: 10 }, topSchemes: [{name:'Edelweiss Large Cap Fund', aum: 7000}, {name:'Edelweiss Small Cap Fund', aum: 6000}, {name:'Edelweiss Balanced Adv', aum:5000}] },
                { id: 'canara', name: 'Canara Robeco MF', aum: 0.88, established: 1993, ceo: 'Rajesh Naik', funds: { equity: 40, debt: 35, hybrid: 20, other: 5 }, topSchemes: [{name:'Canara Robeco Bluechip', aum: 9000}, {name:'Canara Robeco Emerging Equities', aum: 8500}, {name:'Canara Robeco Equity Hybrid', aum:7500}] },
                { id: 'pgim', name: 'PGIM India MF', aum: 0.35, established: 2010, ceo: 'Ajit Menon', funds: { equity: 28, debt: 55, hybrid: 12, other: 5 }, topSchemes: [{name:'PGIM India Midcap Opp', aum: 4000}, {name:'PGIM India Flexi Cap', aum: 3500}, {name:'PGIM India Global Equity Opp', aum:3000}] },
                { id: 'idfc', name: 'IDFC Mutual Fund', aum: 1.20, established: 2000, ceo: 'Vishal Kapoor', funds: { equity: 32, debt: 48, hybrid: 15, other: 5 }, topSchemes: [{name:'IDFC Tax Advantage (ELSS)', aum: 15000}, {name:'IDFC Core Equity Fund', aum: 12000}, {name:'IDFC Dynamic Bond Fund', aum:10000}] },
                { id: 'quant', name: 'Quant Mutual Fund', aum: 0.25, established: 1996, ceo: 'Sandeep Tandon', funds: { equity: 60, debt: 20, hybrid: 15, other: 5 }, topSchemes: [{name:'Quant Small Cap Fund', aum: 3000}, {name:'Quant Active Fund', aum: 2500}, {name:'Quant Multi Asset Fund', aum:2000}] },
                { id: 'bandhan', name: 'Bandhan Mutual Fund', aum: 0.15, established: 2007, ceo: 'Vishal Dhawan', funds: { equity: 30, debt: 50, hybrid: 15, other: 5 }, topSchemes: [{name:'Bandhan Banking & PSU Fund', aum: 1800}, {name:'Bandhan Flexi Cap Fund', aum: 1500}, {name:'Bandhan Liquid Fund', aum:1200}] },
                { id: 'invesco', name: 'Invesco Mutual Fund', aum: 0.40, established: 2008, ceo: 'Saurabh Nanavati', funds: { equity: 35, debt: 45, hybrid: 10, other: 10 }, topSchemes: [{name:'Invesco India Contra Fund', aum: 5000}, {name:'Invesco India Growth Opp', aum: 4500}, {name:'Invesco India Liquid Fund', aum:4000}] },
                { id: 'lic', name: 'LIC Mutual Fund', aum: 0.55, established: 1989, ceo: 'T.S. Ramakrishnan', funds: { equity: 25, debt: 60, hybrid: 10, other: 5 }, topSchemes: [{name:'LIC MF Large Cap Fund', aum: 6000}, {name:'LIC MF Equity Hybrid', aum: 5500}, {name:'LIC MF Liquid Fund', aum:5000}] },
                { id: 'baroda', name: 'Baroda BNP Paribas MF', aum: 0.30, established: 2004, ceo: 'Suresh Soni', funds: { equity: 30, debt: 50, hybrid: 15, other: 5 }, topSchemes: [{name:'Baroda BNP Paribas Multi Cap', aum: 3500}, {name:'Baroda BNP Paribas Liquid', aum:3000}, {name:'Baroda BNP Paribas Large Cap', aum:2500}] },
                { id: 'sundaram', name: 'Sundaram Mutual Fund', aum: 0.65, established: 1996, ceo: 'Sunil Subramaniam', funds: { equity: 40, debt: 35, hybrid: 20, other: 5 }, topSchemes: [{name:'Sundaram Mid Cap Fund', aum: 7000}, {name:'Sundaram Small Cap Fund', aum: 6500}, {name:'Sundaram Flexi Cap Fund', aum:6000}] }
            ]
        };

        let aumChartInstance = null;
        let categoryChartInstance = null;

        document.addEventListener('DOMContentLoaded', () => {
            populateSelector();
            initAumChart();
            updateDashboard('overview');
            document.getElementById('total-amcs').textContent = reportData.amcs.length;

            document.getElementById('amc-selector').addEventListener('change', (e) => {
                updateDashboard(e.target.value);
            });
        });

        function populateSelector() {
            const selector = document.getElementById('amc-selector');
            selector.innerHTML = 'Industry Overview';
            reportData.amcs.forEach(amc => {
                const option = document.createElement('option');
                option.value = amc.id;
                option.textContent = amc.name;
                selector.appendChild(option);
            });
        }
        
        const chartColors = [
            '#4f46e5', '#14b8a6', '#6366f1', '#2dd4bf', '#818cf8', '#5eead4', '#a5b4fc', '#99f6e4',
            '#c7d2fe', '#6d28d9', '#9333ea', '#a855f7', '#c084fc', '#d8b4fe', '#e9d5ff', '#f3e8ff',
            '#f43f5e', '#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d', '#6b21a8', '#8b5cf6'
        ];

        function initAumChart() {
            const ctx = document.getElementById('aumChart').getContext('2d');
            const data = {
                labels: reportData.amcs.map(amc => {
                    const label = amc.name;
                    const words = label.split(' ');
                    let wrappedLabel = [];
                    let currentLine = '';
                    for (let i = 0; i < words.length; i++) {
                        if ((currentLine + words[i]).length > 16 && currentLine !== '') {
                            wrappedLabel.push(currentLine.trim());
                            currentLine = words[i] + ' ';
                        } else {
                            currentLine += words[i] + ' ';
                        }
                    }
                    wrappedLabel.push(currentLine.trim());
                    return wrappedLabel;
                }),
                datasets: [{
                    data: reportData.amcs.map(amc => amc.aum),
                    backgroundColor: chartColors,
                    borderColor: '#f1f5f9',
                    borderWidth: 2,
                    hoverOffset: 4,
                }]
            };

            aumChartInstance = new Chart(ctx, {
                type: 'doughnut',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 15,
                                font: { size: 12 },
                                boxWidth: 12,
                                usePointStyle: true,
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label.join(' ')}: ₹${context.raw}T AUM`;
                                }
                            }
                        }
                    },
                    onClick: (event, elements) => {
                        if (elements.length > 0) {
                            const chartElement = elements[0];
                            const amcId = reportData.amcs[chartElement.index].id;
                            document.getElementById('amc-selector').value = amcId;
                            updateDashboard(amcId);
                        }
                    }
                }
            });
        }
        
        function updateDashboard(amcId) {
            const panel = document.getElementById('amc-details-panel');
            if (amcId === 'overview') {
                panel.innerHTML = `
                    Industry Overview
                    
                        Select a specific Asset Management Company (AMC) from the dropdown or click the chart to see detailed information, including their fund category distribution and top-performing schemes. The data presented is a snapshot from our latest quarterly report.
                    
                    
                        Please select an AMC to begin your deep-dive analysis.
                    
                `;
                return;
            }
            
            const amc = reportData.amcs.find(a => a.id === amcId);
            if (!amc) return;

            panel.innerHTML = `
                
                    
                        ${amc.name}
                        
                            Established: ${amc.established}
                            |
                            CEO: ${amc.ceo}
                        
                    
                    
                        AUM
                        ₹${amc.aum}T
                    
                

                
                    
                        Fund Category Distribution
                        
                            
                        
                    
                    
                        Top Schemes by AUM
                        
                            
                                
                                    
                                        Scheme Name
                                        AUM (₹Cr)
                                    
                                
                                
                                    ${amc.topSchemes.map(scheme => `
                                        
                                            ${scheme.name}
                                            ${scheme.aum.toLocaleString('en-IN')}
                                        
                                    `).join('')}
                                
                            
                        
                    
                
            `;
            
            renderCategoryChart(amc.funds);
            addTableSorting();
        }

        function renderCategoryChart(fundData) {
            if (categoryChartInstance) {
                categoryChartInstance.destroy();
            }
            const ctx = document.getElementById('categoryChart').getContext('2d');
            const data = {
                labels: ['Equity', 'Debt', 'Hybrid', 'Other'],
                datasets: [{
                    label: 'Number of Funds',
                    data: [fundData.equity, fundData.debt, fundData.hybrid, fundData.other],
                    backgroundColor: [chartColors[1], chartColors[3], chartColors[5], chartColors[7]],
                    borderColor: '#fff',
                    borderWidth: 1,
                    borderRadius: 4
                }]
            };

            categoryChartInstance = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: (context) => `${context.raw} schemes`
                            }
                        }
                    },
                    scales: {
                        x: { beginAtZero: true, grid: { display: false } },
                        y: { grid: { display: false } }
                    }
                }
            });
        }
        
        let sortState = { column: null, direction: 'asc' };
        function addTableSorting() {
            document.querySelectorAll('#schemes-table .sortable').forEach(header => {
                header.addEventListener('click', () => {
                    const sortKey = header.dataset.sort;
                    const table = header.closest('table');
                    const tbody = table.querySelector('tbody');
                    const rows = Array.from(tbody.querySelectorAll('tr'));

                    if (sortState.column === sortKey) {
                        sortState.direction = sortState.direction === 'asc' ? 'desc' : 'asc';
                    } else {
                        sortState.column = sortKey;
                        sortState.direction = 'asc';
                    }

                    header.parentElement.querySelectorAll('.sortable').forEach(th => {
                        th.classList.remove('asc', 'desc');
                    });
                    header.classList.add(sortState.direction);

                    rows.sort((a, b) => {
                        const aVal = sortKey === 'name' ? a.cells[0].textContent : parseFloat(a.cells[1].textContent.replace(/,/g, ''));
                        const bVal = sortKey === 'name' ? b.cells[0].textContent : parseFloat(b.cells[1].textContent.replace(/,/g, ''));

                        if (aVal < bVal) return sortState.direction === 'asc' ? -1 : 1;
                        if (aVal > bVal) return sortState.direction === 'asc' ? 1 : -1;
                        return 0;
                    });
                    
                    tbody.innerHTML = '';
                    rows.forEach(row => tbody.appendChild(row));
                });
            });
        }