async function loadDataFromDb() {
    try {
        // Try the combined bootstrap endpoint first (single round-trip)
        const bootstrapRes = await fetch('/api/bootstrap');
        if (bootstrapRes.ok) {
            const data = await bootstrapRes.json();

            // Apply stages
            if (data.stages) {
                dbStages = data.stages;
            }

            // Apply companies
            if (data.companies) {
                mockCompanies = data.companies.map(c => ({
                    id: c.id,
                    name: c.name,
                    province: c.province || '',
                    city: c.city || '',
                    industry: c.industry || '',
                    stage: c.stage_name || 'New',
                    size: c.size_staff ? `${c.size_staff.toLocaleString()} staff` : 'Not Disclosed',
                    lastTouched: c.updated_at ? c.updated_at.split(' ')[0] : '',
                    rep: c.rep_name || 'User2',
                    score: c.maplempss_fit_score || 0.0,
                    ...c
                }));
            }

            // Apply contacts
            if (data.contacts) {
                mockContacts = data.contacts.map(c => ({
                    id: c.id,
                    first_name: c.first_name,
                    last_name: c.last_name,
                    company: c.company_name || '',
                    title: c.title || '',
                    email: c.email || '',
                    phone: c.phone || '',
                    is_primary: c.is_primary === 1,
                    ...c
                }));
            }

            // Apply column schemas
            if (data.columns_companies && typeof loadColumnsFromBootstrap === 'function') {
                loadColumnsFromBootstrap('companies', data.columns_companies);
            }
            if (data.columns_contacts && typeof loadColumnsFromBootstrap === 'function') {
                loadColumnsFromBootstrap('contacts', data.columns_contacts);
            }

            return; // Success — skip fallback
        }
    } catch (err) {
        console.warn("Bootstrap endpoint failed, falling back to sequential loading:", err);
    }

    // Fallback: sequential loading (for when bootstrap is unavailable)
    try {
        await loadColumnsFromDb('companies');
        await loadColumnsFromDb('contacts');

        const stagesRes = await fetch('/api/stages');
        if (stagesRes.ok) {
            dbStages = await stagesRes.json();
        }

        const companiesRes = await fetch('/api/companies');
        if (companiesRes.ok) {
            const dbCompanies = await companiesRes.json();
            mockCompanies = dbCompanies.map(c => ({
                id: c.id,
                name: c.name,
                province: c.province || '',
                city: c.city || '',
                industry: c.industry || '',
                stage: c.stage_name || 'New',
                size: c.size_staff ? `${c.size_staff.toLocaleString()} staff` : 'Not Disclosed',
                lastTouched: c.updated_at ? c.updated_at.split(' ')[0] : '',
                rep: c.rep_name || 'User2',
                score: c.maplempss_fit_score || 0.0,
                ...c
            }));
        }

        const contactsRes = await fetch('/api/contacts');
        if (contactsRes.ok) {
            const dbContacts = await contactsRes.json();
            mockContacts = dbContacts.map(c => ({
                id: c.id,
                first_name: c.first_name,
                last_name: c.last_name,
                company: c.company_name || '',
                title: c.title || '',
                email: c.email || '',
                phone: c.phone || '',
                is_primary: c.is_primary === 1,
                ...c
            }));
        }
    } catch (err) {
        console.error("Failed to load data from database: ", err);
    }
}