agenciapsilmno/src/views/pages/saas/development/DevCompetitorsTab.vue

<!--
|--------------------------------------------------------------------------
| DevCompetitorsTab.vue — Concorrentes + features + matriz (CRUD)
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted } from 'vue';
import { supabase } from '@/lib/supabase/client';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import ConfirmDialog from 'primevue/confirmdialog';
import DevDrawer from './components/DevDrawer.vue';
import DevField from './components/DevField.vue';

const toast = useToast();
const confirm = useConfirm();

const loading = ref(true);
const viewMode = ref('competitors'); // 'competitors' | 'matrix'
const competitors = ref([]);
const features = ref([]);
const matrix = ref([]);
const openCompetitor = ref(null);
const matrixSearch = ref('');
const matrixFilter = ref('all');

// Drawers
const compDrawerOpen = ref(false);
const compSaving = ref(false);
const compEditingId = ref(null);
const compForm = ref(emptyCompForm());

const featDrawerOpen = ref(false);
const featSaving = ref(false);
const featEditingId = ref(null);
const featForm = ref(emptyFeatForm());

const matDrawerOpen = ref(false);
const matSaving = ref(false);
const matEditingId = ref(null);
const matForm = ref(emptyMatForm());

function emptyCompForm() {
    return {
        slug: '',
        nome: '',
        pais: 'BR',
        foco: '',
        pricing: '',
        posicionamento: '',
        url: '',
        ultima_pesquisa: null,
        notas: '',
        ativo: true
    };
}

function emptyFeatForm() {
    return {
        competitor_id: null,
        categoria: '',
        nome: '',
        descricao: '',
        fonte: 'publico',
        fonte_url: '',
        data_fonte: null,
        destaque: false
    };
}

function emptyMatForm() {
    return {
        dominio: '',
        feature: '',
        nosso_status: 'a_definir',
        nossa_nota: '',
        importancia: 'media'
    };
}

const FONTE_LABEL = {
    fetched: { label: 'Web', color: '#10b981' },
    observacao: { label: 'Observado', color: '#0ea5e9' },
    publico: { label: 'Público', color: '#94a3b8' },
    hipotese: { label: 'Hipótese', color: '#f59e0b' }
};

const STATUS_LABEL = {
    tem: { label: 'Temos', color: '#10b981', bg: 'rgba(16,185,129,.12)' },
    parcial: { label: 'Parcial', color: '#f59e0b', bg: 'rgba(245,158,11,.12)' },
    gap: { label: 'Gap', color: '#ef4444', bg: 'rgba(239,68,68,.12)' },
    na: { label: 'N/A', color: '#94a3b8', bg: 'rgba(148,163,184,.12)' },
    a_definir: { label: 'A definir', color: '#a78bfa', bg: 'rgba(167,139,250,.12)' }
};

async function load() {
    loading.value = true;
    try {
        const [compRes, featRes, matRes] = await Promise.all([
            supabase.from('dev_competitors').select('*').order('ordem'),
            supabase.from('dev_competitor_features').select('*').order('ordem'),
            supabase.from('dev_comparison_matrix').select('*').order('ordem')
        ]);
        if (compRes.error) throw compRes.error;
        if (featRes.error) throw featRes.error;
        if (matRes.error) throw matRes.error;
        competitors.value = compRes.data || [];
        features.value = featRes.data || [];
        matrix.value = matRes.data || [];
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    } finally {
        loading.value = false;
    }
}

function featuresOf(competitorId) {
    return features.value.filter((f) => f.competitor_id === competitorId);
}

function featuresByCategory(competitorId) {
    const groups = {};
    for (const f of featuresOf(competitorId)) {
        const cat = f.categoria || 'Outros';
        if (!groups[cat]) groups[cat] = [];
        groups[cat].push(f);
    }
    return groups;
}

function toggle(id) {
    openCompetitor.value = openCompetitor.value === id ? null : id;
}

function formatDate(iso) {
    if (!iso) return '—';
    return new Date(iso).toLocaleDateString('pt-BR');
}

// ── CRUD Competitor ─────────────────────────────────────────────
function openNewComp() {
    compEditingId.value = null;
    compForm.value = emptyCompForm();
    compDrawerOpen.value = true;
}

function openEditComp(comp) {
    compEditingId.value = comp.id;
    compForm.value = { ...comp, ativo: !!comp.ativo };
    compDrawerOpen.value = true;
}

async function saveComp() {
    if (!compForm.value.nome.trim() || !compForm.value.slug.trim()) return;
    compSaving.value = true;
    try {
        const payload = {
            slug: compForm.value.slug.trim(),
            nome: compForm.value.nome.trim(),
            pais: compForm.value.pais || null,
            foco: compForm.value.foco.trim() || null,
            pricing: compForm.value.pricing.trim() || null,
            posicionamento: compForm.value.posicionamento.trim() || null,
            url: compForm.value.url.trim() || null,
            ultima_pesquisa: compForm.value.ultima_pesquisa || null,
            notas: compForm.value.notas.trim() || null,
            ativo: compForm.value.ativo
        };
        if (compEditingId.value) {
            const { error } = await supabase.from('dev_competitors').update(payload).eq('id', compEditingId.value);
            if (error) throw error;
            toast.add({ severity: 'success', summary: 'Salvo', life: 2000 });
        } else {
            payload.ordem = (competitors.value.length || 0) + 1;
            const { error } = await supabase.from('dev_competitors').insert(payload);
            if (error) throw error;
            toast.add({ severity: 'success', summary: 'Criado', life: 2000 });
        }
        compDrawerOpen.value = false;
        await load();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    } finally {
        compSaving.value = false;
    }
}

function askDeleteComp() {
    if (!compEditingId.value) return;
    const fCount = featuresOf(compEditingId.value).length;
    confirm.require({
        message: `Excluir este concorrente? ${fCount ? `Também vai excluir ${fCount} feature(s).` : ''}`,
        header: 'Confirmar',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try {
                const { error } = await supabase.from('dev_competitors').delete().eq('id', compEditingId.value);
                if (error) throw error;
                toast.add({ severity: 'success', summary: 'Excluído', life: 2000 });
                compDrawerOpen.value = false;
                openCompetitor.value = null;
                await load();
            } catch (e) {
                toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
            }
        }
    });
}

// ── CRUD Feature ────────────────────────────────────────────────
function openNewFeat(compId) {
    featEditingId.value = null;
    featForm.value = emptyFeatForm();
    featForm.value.competitor_id = compId;
    featDrawerOpen.value = true;
}

function openEditFeat(f) {
    featEditingId.value = f.id;
    featForm.value = { ...f, destaque: !!f.destaque };
    featDrawerOpen.value = true;
}

async function saveFeat() {
    if (!featForm.value.nome.trim() || !featForm.value.competitor_id) return;
    featSaving.value = true;
    try {
        const payload = {
            competitor_id: featForm.value.competitor_id,
            categoria: featForm.value.categoria.trim() || null,
            nome: featForm.value.nome.trim(),
            descricao: featForm.value.descricao.trim() || null,
            fonte: featForm.value.fonte || 'publico',
            fonte_url: featForm.value.fonte_url.trim() || null,
            data_fonte: featForm.value.data_fonte || null,
            destaque: featForm.value.destaque
        };
        if (featEditingId.value) {
            const { error } = await supabase
                .from('dev_competitor_features')
                .update(payload)
                .eq('id', featEditingId.value);
            if (error) throw error;
            toast.add({ severity: 'success', summary: 'Salvo', life: 2000 });
        } else {
            const maxOrdem = Math.max(
                0,
                ...featuresOf(payload.competitor_id).map((f) => f.ordem || 0)
            );
            payload.ordem = maxOrdem + 1;
            const { error } = await supabase.from('dev_competitor_features').insert(payload);
            if (error) throw error;
            toast.add({ severity: 'success', summary: 'Criado', life: 2000 });
        }
        featDrawerOpen.value = false;
        await load();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    } finally {
        featSaving.value = false;
    }
}

function askDeleteFeat() {
    if (!featEditingId.value) return;
    confirm.require({
        message: 'Excluir esta feature?',
        header: 'Confirmar',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try {
                const { error } = await supabase
                    .from('dev_competitor_features')
                    .delete()
                    .eq('id', featEditingId.value);
                if (error) throw error;
                toast.add({ severity: 'success', summary: 'Excluído', life: 2000 });
                featDrawerOpen.value = false;
                await load();
            } catch (e) {
                toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
            }
        }
    });
}

// ── CRUD Matrix ─────────────────────────────────────────────────
function openNewMat() {
    matEditingId.value = null;
    matForm.value = emptyMatForm();
    matDrawerOpen.value = true;
}

function openEditMat(m) {
    matEditingId.value = m.id;
    matForm.value = { ...m };
    matDrawerOpen.value = true;
}

async function saveMat() {
    if (!matForm.value.feature.trim()) return;
    matSaving.value = true;
    try {
        const payload = {
            dominio: matForm.value.dominio.trim() || null,
            feature: matForm.value.feature.trim(),
            nosso_status: matForm.value.nosso_status,
            nossa_nota: matForm.value.nossa_nota.trim() || null,
            importancia: matForm.value.importancia || null
        };
        if (matEditingId.value) {
            const { error } = await supabase
                .from('dev_comparison_matrix')
                .update(payload)
                .eq('id', matEditingId.value);
            if (error) throw error;
            toast.add({ severity: 'success', summary: 'Salvo', life: 2000 });
        } else {
            payload.ordem = (matrix.value.length || 0) + 1;
            const { error } = await supabase.from('dev_comparison_matrix').insert(payload);
            if (error) throw error;
            toast.add({ severity: 'success', summary: 'Criado', life: 2000 });
        }
        matDrawerOpen.value = false;
        await load();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    } finally {
        matSaving.value = false;
    }
}

function askDeleteMat() {
    if (!matEditingId.value) return;
    confirm.require({
        message: 'Excluir esta linha da matriz?',
        header: 'Confirmar',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try {
                const { error } = await supabase
                    .from('dev_comparison_matrix')
                    .delete()
                    .eq('id', matEditingId.value);
                if (error) throw error;
                toast.add({ severity: 'success', summary: 'Excluído', life: 2000 });
                matDrawerOpen.value = false;
                await load();
            } catch (e) {
                toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
            }
        }
    });
}

// Mudança rápida de status na matriz (inline)
async function quickUpdateMatStatus(row, newStatus) {
    const prev = row.nosso_status;
    row.nosso_status = newStatus;
    try {
        const { error } = await supabase
            .from('dev_comparison_matrix')
            .update({ nosso_status: newStatus })
            .eq('id', row.id);
        if (error) throw error;
    } catch (e) {
        row.nosso_status = prev;
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    }
}

const matrixFiltered = computed(() => {
    let list = matrix.value;
    if (matrixFilter.value !== 'all') list = list.filter((m) => m.nosso_status === matrixFilter.value);
    if (matrixSearch.value.trim()) {
        const q = matrixSearch.value.toLowerCase();
        list = list.filter(
            (m) =>
                m.feature.toLowerCase().includes(q) ||
                (m.dominio || '').toLowerCase().includes(q) ||
                (m.nossa_nota || '').toLowerCase().includes(q)
        );
    }
    return list;
});

const matrixByDomain = computed(() => {
    const groups = {};
    for (const m of matrixFiltered.value) {
        const key = m.dominio || 'Outros';
        if (!groups[key]) groups[key] = [];
        groups[key].push(m);
    }
    return groups;
});

const matrixCounts = computed(() => {
    const c = { tem: 0, parcial: 0, gap: 0, a_definir: 0, na: 0, total: matrix.value.length };
    for (const m of matrix.value) c[m.nosso_status] = (c[m.nosso_status] || 0) + 1;
    return c;
});

onMounted(load);
</script>

<template>
    <ConfirmDialog />

    <div v-if="loading" class="loading">
        <i class="pi pi-spin pi-spinner text-2xl text-indigo-500" />
    </div>

    <div v-else class="competitors">
        <!-- Toggle -->
        <div class="view-toggle">
            <button :class="['toggle-btn', { active: viewMode === 'competitors' }]" @click="viewMode = 'competitors'">
                <i class="pi pi-users" /> Concorrentes ({{ competitors.length }})
            </button>
            <button :class="['toggle-btn', { active: viewMode === 'matrix' }]" @click="viewMode = 'matrix'">
                <i class="pi pi-table" /> Matriz de gaps ({{ matrix.length }})
            </button>
            <div class="toggle-spacer" />
            <button v-if="viewMode === 'competitors'" class="btn-primary" @click="openNewComp">
                <i class="pi pi-plus" /> Novo concorrente
            </button>
            <button v-else class="btn-primary" @click="openNewMat">
                <i class="pi pi-plus" /> Nova linha
            </button>
        </div>

        <!-- Concorrentes -->
        <div v-if="viewMode === 'competitors'" class="comp-list">
            <article
                v-for="comp in competitors"
                :key="comp.id"
                :class="['comp-card', { open: openCompetitor === comp.id }]"
            >
                <header class="comp-head">
                    <div class="comp-identity" @click="toggle(comp.id)">
                        <div class="comp-flag">{{ comp.pais }}</div>
                        <div>
                            <h3 class="comp-name">{{ comp.nome }}</h3>
                            <p class="comp-foco">{{ comp.foco }}</p>
                        </div>
                    </div>
                    <div class="comp-stats">
                        <span class="comp-feat-count">{{ featuresOf(comp.id).length }} features</span>
                        <span v-if="comp.ultima_pesquisa" class="comp-fetch">
                            <i class="pi pi-refresh text-xs" /> {{ formatDate(comp.ultima_pesquisa) }}
                        </span>
                    </div>
                    <button class="btn-icon" @click="openEditComp(comp)" title="Editar">
                        <i class="pi pi-pencil" />
                    </button>
                    <i
                        :class="['pi pi-chevron-down comp-chev', { open: openCompetitor === comp.id }]"
                        @click="toggle(comp.id)"
                    />
                </header>

                <div v-if="openCompetitor === comp.id" class="comp-body">
                    <div v-if="comp.posicionamento" class="comp-pos">
                        <h5>Posicionamento</h5>
                        <p>{{ comp.posicionamento }}</p>
                    </div>
                    <div v-if="comp.pricing" class="comp-pricing">
                        <h5>Pricing</h5>
                        <p>{{ comp.pricing }}</p>
                    </div>
                    <div v-if="comp.notas">
                        <h5>Notas</h5>
                        <p>{{ comp.notas }}</p>
                    </div>
                    <div v-if="comp.url">
                        <a :href="comp.url" target="_blank" class="comp-url">
                            <i class="pi pi-external-link text-xs" /> {{ comp.url }}
                        </a>
                    </div>

                    <div class="comp-features">
                        <div class="feat-header">
                            <h5>Features catalogadas</h5>
                            <button class="btn-ghost" @click="openNewFeat(comp.id)">
                                <i class="pi pi-plus" /> Adicionar feature
                            </button>
                        </div>

                        <div v-if="!featuresOf(comp.id).length" class="empty-small">
                            Nenhuma feature cadastrada ainda.
                        </div>

                        <div v-for="(feats, cat) in featuresByCategory(comp.id)" :key="cat" class="feat-group">
                            <h6 class="feat-cat">{{ cat }}</h6>
                            <ul class="feat-list">
                                <li
                                    v-for="f in feats"
                                    :key="f.id"
                                    class="feat-item"
                                    :class="{ destaque: f.destaque }"
                                >
                                    <i v-if="f.destaque" class="pi pi-star-fill text-xs" style="color: #f59e0b" />
                                    <span class="feat-name">{{ f.nome }}</span>
                                    <span v-if="f.descricao" class="feat-desc">— {{ f.descricao }}</span>
                                    <span
                                        class="feat-fonte"
                                        :style="{ color: FONTE_LABEL[f.fonte]?.color }"
                                    >{{ FONTE_LABEL[f.fonte]?.label }}</span>
                                    <button class="btn-icon-sm" @click="openEditFeat(f)" title="Editar">
                                        <i class="pi pi-pencil" />
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </article>
        </div>

        <!-- Matriz -->
        <div v-else class="matrix-view">
            <div class="matrix-stats">
                <div class="mst tem"><strong>{{ matrixCounts.tem }}</strong> temos</div>
                <div class="mst parcial"><strong>{{ matrixCounts.parcial }}</strong> parciais</div>
                <div class="mst gap"><strong>{{ matrixCounts.gap }}</strong> gaps</div>
                <div class="mst a_definir"><strong>{{ matrixCounts.a_definir }}</strong> a definir</div>
                <div class="mst total"><strong>{{ matrixCounts.total }}</strong> total</div>
            </div>

            <div class="toolbar">
                <input v-model="matrixSearch" type="search" placeholder="Buscar feature..." class="filter-search" />
                <select v-model="matrixFilter" class="filter-sel">
                    <option value="all">Todos os status</option>
                    <option value="tem">Temos</option>
                    <option value="parcial">Parcial</option>
                    <option value="gap">Gap</option>
                    <option value="a_definir">A definir</option>
                    <option value="na">N/A</option>
                </select>
            </div>

            <div v-for="(rows, dom) in matrixByDomain" :key="dom" class="matrix-group">
                <h3 class="mg-title">{{ dom }} <span class="mg-count">({{ rows.length }})</span></h3>
                <div class="matrix-rows">
                    <div v-for="row in rows" :key="row.id" class="matrix-row">
                        <select
                            class="mr-status-sel"
                            :value="row.nosso_status"
                            @change="quickUpdateMatStatus(row, $event.target.value)"
                            :style="{ color: STATUS_LABEL[row.nosso_status]?.color, background: STATUS_LABEL[row.nosso_status]?.bg }"
                            title="Clique pra mudar status"
                        >
                            <option value="tem">Temos</option>
                            <option value="parcial">Parcial</option>
                            <option value="gap">Gap</option>
                            <option value="a_definir">A definir</option>
                            <option value="na">N/A</option>
                        </select>
                        <span class="mr-feature">{{ row.feature }}</span>
                        <span v-if="row.nossa_nota" class="mr-nota">{{ row.nossa_nota }}</span>
                        <button class="btn-icon-sm" @click="openEditMat(row)" title="Editar">
                            <i class="pi pi-pencil" />
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Drawer: Competitor -->
        <DevDrawer
            :open="compDrawerOpen"
            :title="compEditingId ? 'Editar concorrente' : 'Novo concorrente'"
            :can-save="!!compForm.nome.trim() && !!compForm.slug.trim()"
            :saving="compSaving"
            :danger="!!compEditingId"
            @close="compDrawerOpen = false"
            @save="saveComp"
            @delete="askDeleteComp"
        >
            <div class="form-row">
                <DevField label="Slug" required hint="Identificador único, ex.: simplepractice">
                    <input v-model="compForm.slug" />
                </DevField>
                <DevField label="País">
                    <input v-model="compForm.pais" placeholder="BR, EUA, CA..." />
                </DevField>
            </div>

            <DevField label="Nome" required>
                <input v-model="compForm.nome" />
            </DevField>

            <DevField label="Foco">
                <input v-model="compForm.foco" placeholder="Ex.: Psicologia-first, Multispecialidade" />
            </DevField>

            <DevField label="Pricing">
                <textarea v-model="compForm.pricing" rows="2" />
            </DevField>

            <DevField label="Posicionamento">
                <textarea v-model="compForm.posicionamento" rows="3" />
            </DevField>

            <DevField label="URL">
                <input v-model="compForm.url" type="url" />
            </DevField>

            <div class="form-row">
                <DevField label="Última pesquisa">
                    <input v-model="compForm.ultima_pesquisa" type="date" />
                </DevField>
                <DevField label="Ativo?">
                    <select v-model="compForm.ativo">
                        <option :value="true">Sim</option>
                        <option :value="false">Não</option>
                    </select>
                </DevField>
            </div>

            <DevField label="Notas">
                <textarea v-model="compForm.notas" rows="3" />
            </DevField>
        </DevDrawer>

        <!-- Drawer: Feature -->
        <DevDrawer
            :open="featDrawerOpen"
            :title="featEditingId ? 'Editar feature' : 'Nova feature'"
            :can-save="!!featForm.nome.trim() && !!featForm.competitor_id"
            :saving="featSaving"
            :danger="!!featEditingId"
            @close="featDrawerOpen = false"
            @save="saveFeat"
            @delete="askDeleteFeat"
        >
            <DevField label="Concorrente" required>
                <select v-model="featForm.competitor_id">
                    <option v-for="c in competitors" :key="c.id" :value="c.id">{{ c.nome }}</option>
                </select>
            </DevField>

            <DevField label="Categoria" hint="Ex.: Agenda, Teleconsulta, IA, Billing">
                <input v-model="featForm.categoria" />
            </DevField>

            <DevField label="Nome da feature" required>
                <input v-model="featForm.nome" />
            </DevField>

            <DevField label="Descrição">
                <textarea v-model="featForm.descricao" rows="3" />
            </DevField>

            <div class="form-row">
                <DevField label="Fonte">
                    <select v-model="featForm.fonte">
                        <option value="fetched">Web (scraping)</option>
                        <option value="observacao">Observação</option>
                        <option value="publico">Público</option>
                        <option value="hipotese">Hipótese</option>
                    </select>
                </DevField>
                <DevField label="Data da fonte">
                    <input v-model="featForm.data_fonte" type="date" />
                </DevField>
            </div>

            <DevField label="URL da fonte" hint="Se vem de uma página web">
                <input v-model="featForm.fonte_url" type="url" />
            </DevField>

            <DevField label="Destaque?" hint="Feature diferencial do concorrente">
                <select v-model="featForm.destaque">
                    <option :value="false">Não</option>
                    <option :value="true">Sim (estrela)</option>
                </select>
            </DevField>
        </DevDrawer>

        <!-- Drawer: Matrix -->
        <DevDrawer
            :open="matDrawerOpen"
            :title="matEditingId ? 'Editar linha da matriz' : 'Nova linha de comparação'"
            :can-save="!!matForm.feature.trim()"
            :saving="matSaving"
            :danger="!!matEditingId"
            @close="matDrawerOpen = false"
            @save="saveMat"
            @delete="askDeleteMat"
        >
            <DevField label="Domínio" hint="Ex.: Agenda, Telehealth, IA">
                <input v-model="matForm.dominio" />
            </DevField>

            <DevField label="Feature" required>
                <input v-model="matForm.feature" placeholder="Ex.: Biblioteca GAD-7/PHQ-9" />
            </DevField>

            <div class="form-row">
                <DevField label="Nosso status">
                    <select v-model="matForm.nosso_status">
                        <option value="tem">Temos</option>
                        <option value="parcial">Parcial</option>
                        <option value="gap">Gap</option>
                        <option value="a_definir">A definir</option>
                        <option value="na">N/A</option>
                    </select>
                </DevField>
                <DevField label="Importância">
                    <select v-model="matForm.importancia">
                        <option value="alta">Alta</option>
                        <option value="media">Média</option>
                        <option value="baixa">Baixa</option>
                    </select>
                </DevField>
            </div>

            <DevField label="Nossa nota" hint="Por que esse status? próximos passos?">
                <textarea v-model="matForm.nossa_nota" rows="3" />
            </DevField>
        </DevDrawer>
    </div>
</template>

<style scoped>
.loading { text-align: center; padding: 60px; }

.competitors { display: flex; flex-direction: column; gap: 12px; }

.view-toggle {
    display: flex;
    gap: 6px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 6px;
    align-items: center;
}
.toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.toggle-btn:hover { background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.toggle-btn.active { background: color-mix(in srgb, var(--primary-color) 12%, transparent); color: var(--primary-color); }
.toggle-spacer { flex: 1; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 7px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.9; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--primary-color);
    border: 1px dashed color-mix(in srgb, var(--primary-color) 40%, transparent);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-ghost:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-style: solid;
}

.btn-icon {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--text-color-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.btn-icon:hover {
    background: var(--surface-ground);
    color: var(--primary-color);
}

.btn-icon-sm {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--text-color-secondary);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
}
.btn-icon-sm:hover {
    background: var(--surface-ground);
    color: var(--primary-color);
}

/* Cards de concorrentes */
.comp-list { display: flex; flex-direction: column; gap: 10px; }

.comp-card {
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    overflow: hidden;
}

.comp-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.comp-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.comp-flag {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.comp-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}
.comp-foco {
    font-size: 11px;
    color: var(--text-color-secondary);
    margin: 2px 0 0;
}

.comp-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 11px;
    color: var(--text-color-secondary);
}
.comp-feat-count {
    font-weight: 600;
    color: var(--text-color);
    font-size: 12px;
}
.comp-fetch { display: flex; align-items: center; gap: 4px; }

.comp-chev {
    font-size: 11px;
    color: var(--text-color-secondary);
    transition: transform 0.2s;
    cursor: pointer;
    padding: 8px;
}
.comp-chev.open { transform: rotate(180deg); }

.comp-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--surface-border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comp-body h5 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-color-secondary);
    margin-bottom: 4px;
}
.comp-body p {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-color);
    margin: 0;
}

.comp-url {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.comp-url:hover { text-decoration: underline; }

.feat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.feat-header h5 { margin: 0; }

.feat-group { margin-bottom: 12px; }
.feat-cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
.feat-list { list-style: none; padding: 0; margin: 0; }
.feat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--surface-border);
}
.feat-item:last-child { border-bottom: none; }
.feat-item.destaque .feat-name { font-weight: 600; }
.feat-name { color: var(--text-color); flex-shrink: 0; }
.feat-desc {
    color: var(--text-color-secondary);
    font-size: 11px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feat-fonte {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.empty-small {
    font-size: 11px;
    color: var(--text-color-secondary);
    padding: 10px 0;
    text-align: center;
}

/* Matriz */
.matrix-view { display: flex; flex-direction: column; gap: 12px; }

.matrix-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mst {
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border);
    color: var(--text-color-secondary);
}
.mst strong { color: var(--text-color); margin-right: 4px; font-size: 14px; }
.mst.tem strong { color: #10b981; }
.mst.parcial strong { color: #f59e0b; }
.mst.gap strong { color: #ef4444; }
.mst.a_definir strong { color: #a78bfa; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-search, .filter-sel {
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border);
    border-radius: 7px;
    padding: 7px 11px;
    font-size: 12px;
    outline: none;
    color: var(--text-color);
}
.filter-search { flex: 1; min-width: 200px; }
.filter-sel { min-width: 160px; cursor: pointer; }

.matrix-group {
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 14px;
}
.mg-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.mg-count { color: var(--text-color-secondary); font-weight: 400; }

.matrix-rows { display: flex; flex-direction: column; gap: 4px; }
.matrix-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--surface-border);
}
.matrix-row:last-child { border-bottom: none; }

.mr-status-sel {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 9px;
    border-radius: 10px;
    min-width: 90px;
    text-align: center;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    outline: none;
}

.mr-feature {
    font-size: 12px;
    color: var(--text-color);
    font-weight: 500;
    flex: 1;
}
.mr-nota {
    font-size: 11px;
    color: var(--text-color-secondary);
    font-style: italic;
    flex: 1;
    text-align: right;
    min-width: 100px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
</style>