extractSources(jobs);
                renderJobs(jobs);
                updateSourceFilter();

                const hasMore = jobs.length === jobsPageSize;
                pageInfo.textContent = `Showing ${jobsPage * jobsPageSize + 1}–${jobsPage * jobsPageSize + jobs.length} of ${jobs.length + (hasMore ? '+' : '')}`;
                prevBtn.disabled = jobsPage === 0;
                nextBtn.disabled = !hasMore;
                pagination.classList.remove('hidden');
                table.classList.remove('hidden');
                loading.classList.add('hidden');
            } catch (e) {
                console.error('Failed to load jobs:', e);
                showToast('Failed to load jobs', 'error');
                loading.classList.add('hidden');
                empty.classList.remove('hidden');
            }
        }

        function extractSources(jobs) {
            jobs.forEach(item => allSources.add(item.job.source));
        }

        function updateSourceFilter() {
            const select = document.getElementById('jobSourceFilter');
            const current = select.value;
            select.innerHTML = '<option value="">All Sources</option>' + Array.from(allSources).sort().map(s => `<option value="${escapeHtml(s)}">${escapeHtml(s)}</option>`).join('');
            select.value = current;
        }

        function renderJobs(jobs) {
            const tbody = document.getElementById('jobsTableBody');
            if (jobs.length === 0) {
                document.getElementById('jobsTable').classList.add('hidden');
                document.getElementById('jobsEmpty').classList.remove('hidden');
                return;
            }
            document.getElementById('jobsTable').classList.remove('hidden');
            document.getElementById('jobsEmpty').classList.add('hidden');

            tbody.innerHTML = jobs.map(item => {
                const job = item.job;
                const app = item.application;
                const score = job.match_score;
                let scoreClass = 'score-low';
                if (score >= 75) scoreClass = 'score-high';
                else if (score >= 50) scoreClass = 'score-medium';

                let statusHtml = '<span class="badge status-none">No Application</span>';
                if (app) {
                    statusHtml = `<span class="status-badge status-${app.status}">${app.status}</span>`;
                }

                return `
                    <tr class="hover:bg-zinc-800/50 transition-colors" data-job-id="${job.id}">
                        <td class="px-4 py-3 ${scoreClass} font-mono tabular-nums">${score}%</td>
                        <td class="px-4 py-3 font-medium text-white truncate max-w-xs" title="${escapeHtml(job.title)}">${escapeHtml(job.title)}</td>
                        <td class="px-4 py-3 text-zinc-300 truncate max-w-xs" title="${escapeHtml(job.company)}">${escapeHtml(job.company)}</td>
                        <td class="px-4 py-3 text-zinc-400 truncate max-w-xs" title="${escapeHtml(job.location)}">${escapeHtml(job.location)}</td>
                        <td class="px-4 py-3 text-zinc-500">${escapeHtml(job.source)}</td>
                        <td class="px-4 py-3 text-zinc-500 font-mono text-xs">${formatDate(job.found_date)}</td>
                        <td class="px-4 py-3">${statusHtml}</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <button onclick="openJobModal(${job.id})" class="text-primary-400 hover:text-primary-300 text-sm font-medium px-2 py-1 rounded hover:bg-primary-500/10 transition-colors">View</button>
                                ${app && app.resume_path ? `<button onclick="openResumeModal('${app.resume_path.split('/').pop()}')" class="text-primary-400 hover:text-primary-300 text-sm font-medium px-2 py-1 rounded hover:bg-primary-500/10 transition-colors">Resume</button>` : ''}
                                ${job.source_url ? `<a href="${escapeHtml(job.source_url)}" target="_blank" class="text-zinc-500 hover:text-zinc-300 p-2 rounded hover:bg-zinc-800 transition-colors" title="Open original posting"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></a>` : ''}
                            </div>
                        </td>
                    </tr>
                `;
            }).join('');
        }

        function prevJobsPage() {
            if (jobsPage > 0) { jobsPage--; loadJobs(); }
        }

        function nextJobsPage() {
            jobsPage++; loadJobs();
        }

        function sortJobs(field) {
            const icons = document.querySelectorAll('[id^="sort"]');
            icons.forEach(icon => icon.textContent = '');
            const icon = document.getElementById('sort' + field.charAt(0).toUpperCase() + field.slice(1) + 'Icon');
            if (currentSort.field === field) {
                currentSort.dir = currentSort.dir === 'desc' ? 'asc' : 'desc';
            } else {
                currentSort.field = field;
                currentSort.dir = 'desc';
            }
            icon.textContent = currentSort.dir === 'desc' ? '↓' : '↑';
            jobsPage = 0;
            loadJobs();
        }

        async function openJobModal(jobId) {
            try {
                const data = await fetchAPI(`/jobs/${jobId}`);
                renderJobModal(data.job, data.application);
                document.getElementById('jobModal').classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            } catch (e) {
                console.error('Failed to load job:', e);
                showToast('Failed to load job details', 'error');
            }
        }

        function closeModal() {
            document.getElementById('jobModal').classList.add('hidden');
            document.body.style.overflow = '';
        }

        function renderJobModal(job, app) {
            const title = `${job.title} at ${job.company}`;
            document.getElementById('modalJobTitle').textContent = title;

            let html = `
                <div class="space-y-5">
                    <div class="grid grid-cols-2 gap-4">
                        <div><p class="text-xs text-zinc-500 uppercase tracking-wider">Company</p><p class="font-medium text-white">${escapeHtml(job.company)}</p></div>
                        <div><p class="text-xs text-zinc-500 uppercase tracking-wider">Location</p><p class="font-medium text-white">${escapeHtml(job.location)}</p></div>
                        <div><p class="text-xs text-zinc-500 uppercase tracking-wider">Remote</p><p class="font-medium text-white">${escapeHtml(job.remote)}</p></div>
                        <div><p class="text-xs text-zinc-500 uppercase tracking-wider">Source</p><p class="font-medium text-white">${escapeHtml(job.source)}</p></div>
                        <div class="col-span-2"><p class="text-xs text-zinc-500 uppercase tracking-wider">Match Score</p><p class="font-bold text-3xl ${job.match_score >= 75 ? 'text-primary-400' : job.match_score >= 50 ? 'text-yellow-400' : 'text-red-400'}">${job.match_score}%</p></div>
                    </div>

                    <div class="pt-4 border-t border-zinc-800">
                        <h4 class="font-medium text-white mb-2">Description</h4>
                        <div class="text-sm text-zinc-300 whitespace-pre-wrap bg-zinc-900/50 p-4 rounded-lg max-h-64 overflow-y-auto">${escapeHtml(job.description || 'No description available')}</div>
                    </div>

                    <div class="pt-4 border-t border-zinc-800">
                        <h4 class="font-medium text-white mb-2">Requirements</h4>
                        <div class="text-sm text-zinc-300 whitespace-pre-wrap bg-zinc-900/50 p-4 rounded-lg max-h-64 overflow-y-auto">${escapeHtml(job.requirements || 'No requirements listed')}</div>
                    </div>
            `;

            if (app) {
                html += `
                    <div class="pt-4 border-t border-zinc-800 bg-primary-500/5 rounded-lg p-4">
                        <h4 class="font-medium text-white mb-3 flex items-center gap-2"><svg class="w-5 h-5 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>Application Status</h4>
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <div><p class="text-zinc-500">Status</p><p class="font-medium"><span class="status-badge status-${app.status}">${app.status}</span></p></div>
                            <div><p class="text-zinc-500">ATS Score</p><p class="font-medium text-white">${app.ats_score}%</p></div>
                            <div><p class="text-zinc-500">Applied</p><p class="font-medium text-white">${app.applied_date || '—'}</p></div>
                            <div><p class="text-zinc-500">Follow-up</p><p class="font-medium text-white">${app.follow_up_date || '—'}</p></div>
                            ${app.notes ? `<div class="col-span-2"><p class="text-zinc-500">Notes</p><p class="font-medium text-white">${escapeHtml(app.notes)}</p></div>` : ''}
                            ${app.rejection_reason ? `<div class="col-span-2"><p class="text-zinc-500">Rejection Reason</p><p class="font-medium text-red-400">${escapeHtml(app.rejection_reason)}</p></div>` : ''}
                            ${app.interview_date ? `<div class="col-span-2"><p class="text-zinc-500">Interview</p><p class="font-medium text-primary-400">${app.interview_date} (${app.interview_round || 'Round 1'})</p></div>` : ''}
                            ${app.offer_details ? `<div class="col-span-2"><p class="text-zinc-500">Offer</p><p class="font-medium text-green-400">${escapeHtml(app.offer_details)}</p></div>` : ''}
                        </div>
                    </div>
                `;
            }

            if (job.source_url) {
                html += `<div class="pt-4"><a href="${escapeHtml(job.source_url)}" target="_blank" class="inline-flex items-center gap-2 text-primary-400 hover:text-primary-300 font-medium px-4 py-2 border border-primary-500/30 rounded-lg hover:bg-primary-500/10 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>View Original Posting</a></div>`;
            }

            html += '</div>';
            document.getElementById('modalJobContent').innerHTML = html;
        }

        async function loadApplications() {
            try {
                const res = await fetch(`${API}/jobs?status=shortlisted&status=prepared&status=submitted&status=interview&status=rejected&limit=200`);
                const jobs = await res.json();
                renderApplications(jobs.filter(j => j.application));
            } catch (e) { console.error('Failed to load applications:', e); showToast('Failed to load applications', 'error'); }
        }

        function renderApplications(jobs) {
            const tbody = document.getElementById('appsTableBody');
            const empty = document.getElementById('appsEmpty');
            const table = document.getElementById('appsTable');

            if (jobs.length === 0) {
                table.classList.add('hidden');
                empty.classList.remove('hidden');
                return;
            }
            table.classList.remove('hidden');
            empty.classList.add('hidden');

            const statusOrder = { interview: 0, submitted: 1, prepared: 2, shortlisted: 3, rejected: 4 };
            jobs.sort((a, b) => statusOrder[a.application.status] - statusOrder[b.application.status]);

            tbody.innerHTML = jobs.map(item => {
                const job = item.job;
                const app = item.application;
                return `
                    <tr class="hover:bg-zinc-800/50 transition-colors">
                        <td class="px-4 py-3 font-medium text-white truncate max-w-xs" title="${escapeHtml(job.title)}">${escapeHtml(job.title)}</td>
                        <td class="px-4 py-3 text-zinc-300 truncate max-w-xs" title="${escapeHtml(job.company)}">${escapeHtml(job.company)}</td>
                        <td class="px-4 py-3"><span class="status-badge status-${app.status}">${app.status}</span></td>
                        <td class="px-4 py-3 font-mono tabular-nums ${job.match_score >= 75 ? 'text-primary-400' : job.match_score >= 50 ? 'text-yellow-400' : 'text-red-400'}">${job.match_score}%</td>
                        <td class="px-4 py-3 font-mono tabular-nums text-zinc-300">${app.ats_score}%</td>
                        <td class="px-4 py-3 text-zinc-400">${app.applied_date || '—'}</td>
                        <td class="px-4 py-3 text-zinc-400">${app.follow_up_date || '—'}</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <button onclick="openJobModal(${job.id})" class="text-primary-400 hover:text-primary-300 text-sm font-medium px-2 py-1 rounded hover:bg-primary-500/10 transition-colors">Details</button>
                                ${app.resume_path ? `<button onclick="openResumeModal('${app.resume_path.split('/').pop()}')" class="text-primary-400 hover:text-primary-300 text-sm font-medium px-2 py-1 rounded hover:bg-primary-500/10 transition-colors">Resume</button>` : ''}
                            </div>
                        </td>
                    </tr>
                `;
            }).join('');
        }

        async function loadResumes() {
            try {
                const resumes = await fetchAPI('/resumes');
                renderResumes(resumes);
            } catch (e) { console.error('Failed to load resumes:', e); showToast('Failed to load resumes', 'error'); }
        }

        function renderResumes(resumes) {
            const container = document.getElementById('resumesGrid');
            const empty = document.getElementById('resumesEmpty');

            if (resumes.length === 0) {
                container.innerHTML = '';
                empty.classList.remove('hidden');
                return;
            }
            empty.classList.add('hidden');

            container.innerHTML = resumes.map(r => `
                <div class="card p-5 hover:border-primary-500/30 transition-all cursor-pointer group" onclick="openResumeModal('${r.filename}')">
                    <div class="flex items-start justify-between mb-3">
                        <div class="w-10 h-10 rounded-lg bg-primary-500/10 flex items-center justify-center">
                            <svg class="w-5 h-5 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                        </div>
                        <span class="text-xs text-zinc-500 px-2 py-0.5 rounded bg-zinc-800">${r.date}</span>
                    </div>
                    <p class="font-medium text-white truncate">${r.filename.replace('.md', '').replace(/_/g, ' ')}</p>
                    <p class="text-xs text-zinc-500 mt-2 flex items-center gap-1"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>Click to view</p>
                </div>
            `).join('');
        }

        async function openResumeModal(filename) {
            try {
                const data = await fetchAPI(`/resumes/${filename}`);
                document.getElementById('modalResumeTitle').textContent = filename.replace('.md', '').replace(/_/g, ' ');
                document.getElementById('modalResumeContent').innerHTML = marked.parse(data.content);
                document.getElementById('resumeModal').classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            } catch (e) { console.error('Failed to load resume:', e); showToast('Failed to load resume', 'error'); }
        }

        function closeResumeModal() {
            document.getElementById('resumeModal').classList.add('hidden');
            document.body.style.overflow = '';
        }

        async function loadReports() {
            try {
                const reports = await fetchAPI('/reports');
                renderReports(reports);
                const badge = document.getElementById('reportsCountBadge');
                if (badge) { badge.textContent = reports.length; badge.classList.toggle('hidden', reports.length === 0); }
            } catch (e) { console.error('Failed to load reports:', e); showToast('Failed to load reports', 'error'); }
        }

        function renderReports(reports) {
            const container = document.getElementById('reportsList');
            const empty = document.getElementById('reportsEmpty');

            if (reports.length === 0) {
                container.innerHTML = '';
                empty.classList.remove('hidden');
                return;
            }
            empty.classList.add('hidden');

            container.innerHTML = reports.map(r => `
                <div class="card p-4 hover:border-primary-500/30 transition-all">
                    <div class="flex items-start justify-between">
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-white">${r.date}</p>
                            <p class="text-xs text-zinc-500 mt-0.5">${r.filename}</p>
                        </div>
                        <button onclick="openReportModal('${r.filename}', '${escapeHtml(r.date)}')" class="btn-secondary text-sm whitespace-nowrap">View</button>
                    </div>
                </div>
            `).join('');
        }

        async function openReportModal(filename, date) {
            try {
                const reports = await fetchAPI('/reports');
                const r = reports.find(x => x.filename === filename);
                if (r) {
                    document.getElementById('modalReportTitle').textContent = date;
                    document.getElementById('modalReportContent').innerHTML = marked.parse(r.content);
                    document.getElementById('reportModal').classList.remove('hidden');
                    document.body.style.overflow = 'hidden';
                }
            } catch (e) { console.error('Failed to load report:', e); showToast('Failed to load report', 'error'); }
        }

        function closeReportModal() {
            document.getElementById('reportModal').classList.add('hidden');
            document.body.style.overflow = '';
        }

        function openSettings() {
            document.getElementById('settingsModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closeSettings() {
            document.getElementById('settingsModal').classList.add('hidden');
            document.body.style.overflow = '';
        }

        async function refreshAll() {
            showToast('Refreshing data...', 'info');
            await Promise.all([loadStats(), loadJobs(), loadApplications(), loadResumes(), loadReports()]);
            showToast('Data refreshed', 'success');
        }

        function exportJobs() {
            const status = document.getElementById('jobStatusFilter').value;
            const minScore = document.getElementById('jobScoreFilter').value;
            const search = document.getElementById('jobSearch').value;
            const source = document.getElementById('jobSourceFilter').value;
            const params = new URLSearchParams({ limit: 1000 });
            if (status) params.append('status', status);
            if (minScore) params.append('min_score', minScore);
            if (search) params.append('search', search);
            window.open(`${API}/jobs?${params}&format=csv`, '_blank');
            showToast('Export started', 'success');
        }

        function exportApplications() {
            window.open(`${API}/jobs?status=shortlisted&status=prepared&status=submitted&status=interview&status=rejected&limit=1000&format=csv`, '_blank');
            showToast('Export started', 'success');
        }

        function renderScoreDistribution() {
            const filter = document.getElementById('scoreDistFilter').value;
            let jobs = allJobsCache;
            if (filter === 'today') {
                const today = new Date().toISOString().split('T')[0];
                jobs = jobs.filter(j => j.job.found_date === today);
            } else if (filter === 'week') {
                const weekAgo = new Date(Date.now() - 7 * 86400000).toISOString().split('T')[0];
                jobs = jobs.filter(j => j.job.found_date >= weekAgo);
            }

            const bins = { '0-20': 0, '21-40': 0, '41-60': 0, '61-75': 0, '76-85': 0, '86-100': 0 };
            jobs.forEach(item => {
                const s = item.job.match_score;
                if (s <= 20) bins['0-20']++;
                else if (s <= 40) bins['21-40']++;
                else if (s <= 60) bins['41-60']++;
                else if (s <= 75) bins['61-75']++;
                else if (s <= 85) bins['76-85']++;
                else bins['86-100']++;
            });

            const max = Math.max(...Object.values(bins), 1);
            const container = document.getElementById('scoreDistributionChart');
            container.innerHTML = Object.entries(bins).map(([range, count]) => `
                <div class="flex flex-col items-center flex-1">
                    <div class="w-full flex items-end h-40">
                        <div class="w-full bg-primary-500/20 rounded-t transition-all hover:bg-primary-500/40" style="height: ${(count / max) * 100}%; min-height: ${count > 0 ? '4px' : '0'}"></div>
                    </div>
                    <span class="text-xs text-zinc-500 mt-2 font-mono">${range}</span>
                    <span class="text-sm font-bold text-white">${count}</span>
                </div>
            `).join('');
        }

        function renderPipelineFunnel() {
            const stats = {
                'Total Jobs': document.getElementById('stat-total_jobs')?.textContent || 0,
                'Shortlisted': document.getElementById('stat-shortlisted')?.textContent || 0,
                'Prepared': document.getElementById('stat-prepared')?.textContent || 0,
                'Submitted': document.getElementById('stat-submitted')?.textContent || 0,
                'Interviews': document.getElementById('stat-interviews')?.textContent || 0,
            };
            const max = Math.max(...Object.values(stats).map(Number), 1);
            const colors = ['blue', 'yellow', 'blue', 'indigo', 'primary'];
            const container = document.getElementById('pipelineFunnel');
            container.innerHTML = Object.entries(stats).map(([label, value], i) => {
                const v = Number(value);
                const pct = max > 0 ? (v / max) * 100 : 0;
                return `
                    <div class="flex items-center gap-3">
                        <span class="text-sm text-zinc-400 w-28 text-right">${label}</span>
                        <div class="flex-1 h-6 bg-zinc-800 rounded overflow-hidden relative">
                            <div class="h-full bg-${colors[i]}-500/30 rounded transition-all" style="width: ${pct}%"></div>
                        </div>
                        <span class="font-mono font-bold text-white w-12">${v}</span>
                    </div>
                `;
            }).join('');
        }

        function renderTopCompanies() {
            const companyCounts = {};
            allJobsCache.forEach(item => {
                const c = item.job.company;
                companyCounts[c] = (companyCounts[c] || 0) + 1;
            });
            const top = Object.entries(companyCounts).sort((a, b) => b[1] - a[1]).slice(0, 10);
            const container = document.getElementById('topCompanies');
            if (top.length === 0) {
                container.innerHTML = '<p class="text-zinc-500 text-sm text-center py-4">No data yet</p>';
                return;
            }
            container.innerHTML = top.map(([company, count]) => `
                <div class="flex items-center justify-between p-2 hover:bg-zinc-800/50 rounded transition-colors">
                    <span class="text-sm font-medium text-white truncate pr-2">${escapeHtml(company)}</span>
                    <span class="text-xs font-bold text-primary-400 bg-primary-500/10 px-2 py-0.5 rounded">${count}</span>
                </div>
            `).join('');
        }

        function renderRecentActivity() {
            const recent = allJobsCache.slice(0, 10);
            const container = document.getElementById('recentActivity');
            if (recent.length === 0) {
                container.innerHTML = '<p class="text-zinc-500 text-sm text-center py-4">No recent activity</p>';
                return;
            }
            container.innerHTML = recent.map(item => {
                const job = item.job;
                const app = item.application;
                return `
                    <div class="flex items-center gap-3 p-2 hover:bg-zinc-800/50 rounded transition-colors">
                        <div class="w-2 h-2 rounded-full bg-primary-400"></div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-white truncate">${escapeHtml(job.title)}</p>
                            <p class="text-xs text-zinc-500">${escapeHtml(job.company)} • ${formatDate(job.found_date)}</p>
                        </div>
                        ${app ? `<span class="status-badge status-${app.status}">${app.status}</span>` : '<span class="badge status-none">New</span>'}
                    </div>
                `;
            }).join('');
        }

        function formatDate(dateStr) {
            if (!dateStr) return '—';
            try {
                const d = new Date(dateStr);
                return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
            } catch { return dateStr; }
        }

        function escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function showToast(message, type = 'info') {
            const container = document.getElementById('toastContainer');
            const toast = document.createElement('div');
            const colors = { success: 'border-primary-500 bg-primary-500/10', error: 'border-red-500 bg-red-500/10', info: 'border-blue-500 bg-blue-500/10', warning: 'border-yellow-500 bg-yellow-500/10' };
            const icons = { success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z', error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z', info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z', warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z' };
            toast.className = `toast card border p-3 flex items-center gap-3 min-w-[280px] max-w-md ${colors[type]}`;
            toast.innerHTML = `<svg class="w-5 h-5 ${type === 'success' ? 'text-primary-400' : type === 'error' ? 'text-red-400' : type === 'warning' ? 'text-yellow-400' : 'text-blue-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${icons[type]}"></path></svg><span class="text-sm text-white flex-1">${escapeHtml(message)}</span><button onclick="this.parentElement.remove()" class="text-zinc-500 hover:text-white p-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button>`;
            container.appendChild(toast);
            setTimeout(() => { toast.style.opacity = '0'; toast.style.transform = 'translateX(100%)'; setTimeout(() => toast.remove(), 300); }, 4000);
        }

        document.getElementById('jobModal').addEventListener('click', (e) => { if (e.target.id === 'jobModal') closeModal(); });
        document.getElementById('resumeModal').addEventListener('click', (e) => { if (e.target.id === 'resumeModal') closeResumeModal(); });
        document.getElementById('reportModal').addEventListener('click', (e) => { if (e.target.id === 'reportModal') closeReportModal(); });
        document.getElementById('settingsModal').addEventListener('click', (e) => { if (e.target.id === 'settingsModal') closeSettings(); });
        document.getElementById('sidebarOverlay').addEventListener('click', toggleSidebar);
    </script>
</body>
</html>