<script setup>
/*
 * MelissaPagamento — Pagina nativa Melissa pra "Formas de Pagamento".
 *
 * Substitui o embed cfg-pagamento que vivia dentro do MelissaConfiguracoes.
 * Layout 2-col:
 *   - COL 1 (sidebar) — Card "Resumo" (5 mini stats coloridos por
 *     metodo: Pix/Deposito/Dinheiro/Cartao/Convenio) + Card "Como
 *     funciona" (FAQ)
 *   - COL 2 (main) — 6 cards: Pix + Deposito/TED + Dinheiro + Cartao
 *     + Convenio + Observacoes. Cada um com toggle ativo + fields
 *     + Salvar proprio (saveCard).
 *
 * Logica espelhada do ConfiguracoesPagamentoPage (tabela payment_settings).
 */
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import MelissaConfigList from './MelissaConfigList.vue';
import { useToast } from 'primevue/usetoast';
import { supabase } from '@/lib/supabase/client';
import { tenantDb } from '@/lib/supabase/tenantClient';
import { useTenantStore } from '@/stores/tenantStore';
// InputText/Select/Textarea/ToggleSwitch/Tag/Skeleton: auto via PrimeVueResolver

const emit = defineEmits(['close']);

const toast = useToast();
const tenantStore = useTenantStore();

// ── Breakpoints + drawer ───────────────────────────────────
const drawerOpen = ref(false);
const isMobile = ref(false);
let _mqMobile = null;
function _onMqMobileChange(e) {
    isMobile.value = e.matches;
    if (!e.matches) drawerOpen.value = false;
}
function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
function fecharDrawer() { drawerOpen.value = false; }

// Toggle entre cards (default) e lista de configs (alterna inline na sidebar)
const cfgOpen = ref(false);
function toggleCfg() { cfgOpen.value = !cfgOpen.value; }
function fecharCfg() { cfgOpen.value = false; }

// ── Estado ─────────────────────────────────────────────────
const loading = ref(true);
const ownerId = ref(null);
const savingCard = ref(null);

const DEFAULT = {
    pix_ativo: false,
    pix_tipo: 'cpf',
    pix_chave: '',
    pix_nome_titular: '',
    deposito_ativo: false,
    deposito_banco: '',
    deposito_agencia: '',
    deposito_conta: '',
    deposito_tipo_conta: 'corrente',
    deposito_titular: '',
    deposito_cpf_cnpj: '',
    dinheiro_ativo: false,
    cartao_ativo: false,
    cartao_instrucao: '',
    convenio_ativo: false,
    convenio_lista: '',
    observacoes_pagamento: ''
};
const cfg = ref({ ...DEFAULT });

// ── Opções ─────────────────────────────────────────────────
const pixTipoOptions = [
    { label: 'CPF', value: 'cpf' },
    { label: 'CNPJ', value: 'cnpj' },
    { label: 'E-mail', value: 'email' },
    { label: 'Celular', value: 'celular' },
    { label: 'Chave aleatória', value: 'aleatoria' }
];
const pixTipoLabel = {
    cpf: 'CPF (somente números)',
    cnpj: 'CNPJ (somente números)',
    email: 'E-mail',
    celular: 'Celular (+55DDD9XXXXXXXX)',
    aleatoria: 'Chave aleatória (UUID)'
};
const tipoConta = [
    { label: 'Conta-corrente', value: 'corrente' },
    { label: 'Poupança', value: 'poupanca' }
];
const bancos = [
    { label: 'Banco do Brasil' },
    { label: 'Bradesco' },
    { label: 'Caixa Econômica' },
    { label: 'Itaú' },
    { label: 'Nubank' },
    { label: 'Santander' },
    { label: 'Sicoob' },
    { label: 'Sicredi' },
    { label: 'Inter' },
    { label: 'C6 Bank' },
    { label: 'PicPay' },
    { label: 'Mercado Pago' },
    { label: 'PagBank' },
    { label: 'Neon' },
    { label: 'Next' },
    { label: 'Outro' }
].map((b) => ({ ...b, value: b.label }));

// ── Resumo (mini stats sidebar) ────────────────────────────
const summary = computed(() => [
    { key: 'pix', label: 'Pix', icon: 'pi pi-qrcode', color: '#10b981', ativo: !!cfg.value.pix_ativo },
    { key: 'deposito', label: 'Depósito', icon: 'pi pi-building-columns', color: '#3b82f6', ativo: !!cfg.value.deposito_ativo },
    { key: 'dinheiro', label: 'Dinheiro', icon: 'pi pi-wallet', color: '#eab308', ativo: !!cfg.value.dinheiro_ativo },
    { key: 'cartao', label: 'Cartão', icon: 'pi pi-credit-card', color: '#a855f7', ativo: !!cfg.value.cartao_ativo },
    { key: 'convenio', label: 'Convênio', icon: 'pi pi-heart', color: '#14b8a6', ativo: !!cfg.value.convenio_ativo }
]);

const totalAtivos = computed(() => summary.value.filter((s) => s.ativo).length);

// ── Auth / load ────────────────────────────────────────────
async function load() {
    loading.value = true;
    try {
        const { data: u } = await supabase.auth.getUser();
        const uid = u?.user?.id || null;
        if (!uid) return;
        ownerId.value = uid;
        const { data } = await tenantDb().from('payment_settings')
            .select('*')
            .eq('owner_id', uid)
            .maybeSingle();
        if (data) cfg.value = { ...DEFAULT, ...data };
    } finally {
        loading.value = false;
    }
}

// ── Save ───────────────────────────────────────────────────
async function saveCard(cardKey) {
    if (!ownerId.value) return;
    savingCard.value = cardKey;
    const payload = {
        owner_id: ownerId.value
    };
    if (cardKey === 'pix') {
        Object.assign(payload, {
            pix_ativo: cfg.value.pix_ativo,
            pix_tipo: cfg.value.pix_tipo,
            pix_chave: cfg.value.pix_chave?.trim() ?? '',
            pix_nome_titular: cfg.value.pix_nome_titular?.trim() ?? ''
        });
    } else if (cardKey === 'deposito') {
        Object.assign(payload, {
            deposito_ativo: cfg.value.deposito_ativo,
            deposito_banco: cfg.value.deposito_banco,
            deposito_agencia: cfg.value.deposito_agencia?.trim() ?? '',
            deposito_conta: cfg.value.deposito_conta?.trim() ?? '',
            deposito_tipo_conta: cfg.value.deposito_tipo_conta,
            deposito_titular: cfg.value.deposito_titular?.trim() ?? '',
            deposito_cpf_cnpj: cfg.value.deposito_cpf_cnpj?.trim() ?? ''
        });
    } else if (cardKey === 'dinheiro') {
        payload.dinheiro_ativo = cfg.value.dinheiro_ativo;
    } else if (cardKey === 'cartao') {
        Object.assign(payload, {
            cartao_ativo: cfg.value.cartao_ativo,
            cartao_instrucao: cfg.value.cartao_instrucao?.trim() ?? ''
        });
    } else if (cardKey === 'convenio') {
        Object.assign(payload, {
            convenio_ativo: cfg.value.convenio_ativo,
            convenio_lista: cfg.value.convenio_lista?.trim() ?? ''
        });
    } else if (cardKey === 'observacoes') {
        payload.observacoes_pagamento = cfg.value.observacoes_pagamento?.trim() ?? '';
    }
    try {
        const { error } = await tenantDb().from('payment_settings')
            .upsert(payload, { onConflict: 'owner_id' });
        if (error) throw error;
        toast.add({ severity: 'success', summary: 'Salvo', detail: 'Atualizado.', life: 2200 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro ao salvar', detail: e?.message, life: 4000 });
    } finally {
        savingCard.value = null;
    }
}

// ── Lifecycle ──────────────────────────────────────────────
onMounted(async () => {
    if (typeof window !== 'undefined' && window.matchMedia) {
        _mqMobile = window.matchMedia('(max-width: 1023px)');
        isMobile.value = _mqMobile.matches;
        try { _mqMobile.addEventListener('change', _onMqMobileChange); }
        catch { _mqMobile.addListener(_onMqMobileChange); }
    }
    await tenantStore.ensureLoaded();
    await load();
});

onBeforeUnmount(() => {
    if (_mqMobile) {
        try { _mqMobile.removeEventListener('change', _onMqMobileChange); }
        catch { _mqMobile.removeListener(_onMqMobileChange); }
    }
});
</script>

<template>
    <Transition name="mpg-drawer-fade">
        <div
            v-show="isMobile && drawerOpen"
            class="mpg-mobile-drawer"
            :class="{ 'is-open': drawerOpen }"
        >
            <div id="mpg-mobile-drawer-target" class="mpg-mobile-drawer__scroll" />
        </div>
    </Transition>
    <Transition name="mpg-drawer-fade">
        <div
            v-show="isMobile && drawerOpen"
            class="mpg-mobile-drawer__backdrop"
            @click="fecharDrawer"
        />
    </Transition>

    <section class="mpg-page">
        <header class="mpg-page__head">
            <button
                class="mpg-menu-btn mpg-menu-btn--mobile-only"
                v-tooltip.bottom="'Resumo & FAQ'"
                @click="toggleDrawer"
            >
                <i class="pi pi-bars" />
                <span>Menu</span>
            </button>
            <div class="mpg-page__title">
                <i class="pi pi-wallet mpg-page__title-icon" />
                <span>Formas de Pagamento</span>
                <span class="mpg-page__count">{{ totalAtivos }} ativo{{ totalAtivos !== 1 ? 's' : '' }}</span>
            </div>
            <div class="mpg-page__actions">
                <button class="mpg-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
                    <i class="pi pi-times" />
                </button>
            </div>
        </header>

        <div class="mpg-subheader">
            <i class="pi pi-info-circle mpg-subheader__icon" />
            <span class="mpg-subheader__text">
                Configure os métodos de pagamento que você aceita. Os ativos
                aparecem no agendador e no envio de cobrança aos pacientes.
            </span>
        </div>

        <div class="mpg-body">
            <Teleport to="#mpg-mobile-drawer-target" :disabled="!isMobile">
                <aside class="mpg-side">
                    <button class="mpg-cfg-btn" :class="{ 'is-open': cfgOpen }" @click="toggleCfg">
                        <i :class="cfgOpen ? 'pi pi-arrow-left' : 'pi pi-cog'" />
                        <span>{{ cfgOpen ? 'Voltar' : 'Configurações' }}</span>
                        <i v-if="!cfgOpen" class="pi pi-chevron-down mpg-cfg-btn__chev" />
                    </button>
                    <div v-if="cfgOpen" class="mpg-side__scroll mpg-side__scroll--cfg">
                        <MelissaConfigList @select="fecharCfg" />
                    </div>
                    <div v-else class="mpg-side__scroll">
                        <!-- Card: Resumo -->
                        <div class="mpg-w mpg-w--side">
                            <div class="mpg-w__head">
                                <div class="mpg-w__icon"><i class="pi pi-chart-pie" /></div>
                                <div class="mpg-w__title">
                                    <div class="mpg-w__title-text">Resumo</div>
                                    <div class="mpg-w__sub">Métodos ativos</div>
                                </div>
                            </div>
                            <div class="mpg-w__body">
                                <div class="mpg-summary">
                                    <div
                                        v-for="s in summary"
                                        :key="s.key"
                                        class="mpg-sum-item"
                                        :class="{ 'is-active': s.ativo }"
                                        :style="s.ativo ? { borderColor: s.color + '55' } : {}"
                                    >
                                        <div
                                            class="mpg-sum-icon"
                                            :style="{
                                                background: s.ativo ? s.color + '22' : 'var(--m-bg-soft)',
                                                color: s.ativo ? s.color : 'var(--m-text-faint)'
                                            }"
                                        >
                                            <i :class="s.icon" />
                                        </div>
                                        <div class="mpg-sum-text">
                                            <div class="mpg-sum-label">{{ s.label }}</div>
                                            <div class="mpg-sum-status" :style="s.ativo ? { color: s.color } : {}">
                                                {{ s.ativo ? 'Ativo' : 'Inativo' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card: Como funciona -->
                        <div class="mpg-w mpg-w--side">
                            <div class="mpg-w__head">
                                <div class="mpg-w__icon"><i class="pi pi-question-circle" /></div>
                                <div class="mpg-w__title">
                                    <div class="mpg-w__title-text">Como funciona</div>
                                    <div class="mpg-w__sub">Onde os métodos aparecem</div>
                                </div>
                            </div>
                            <div class="mpg-w__body">
                                <ul class="mpg-faq">
                                    <li class="mpg-faq__item">
                                        <i class="pi pi-calendar-clock" />
                                        <span><strong>Agendador online:</strong> mostra os métodos ativos quando o modo é "pagar na hora".</span>
                                    </li>
                                    <li class="mpg-faq__item">
                                        <i class="pi pi-send" />
                                        <span><strong>Cobrança via WhatsApp:</strong> usa as instruções de Pix/depósito ao enviar pra pacientes.</span>
                                    </li>
                                    <li class="mpg-faq__item">
                                        <i class="pi pi-info-circle" />
                                        <span><strong>Observações:</strong> texto livre adicional exibido junto com os métodos.</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </aside>
            </Teleport>

            <div class="mpg-main">
                <template v-if="loading">
                    <div class="mpg-w" v-for="n in 4" :key="`sk-${n}`">
                        <div class="mpg-w__body">
                            <Skeleton width="40%" height="20px" class="mb-3" />
                            <Skeleton v-for="m in 3" :key="`sk-${n}-${m}`" width="100%" height="36px" class="mb-2" />
                        </div>
                    </div>
                </template>

                <template v-else>
                    <!-- ── Pix ── -->
                    <div class="mpg-w" :class="{ 'is-on': cfg.pix_ativo }">
                        <div class="mpg-w__head">
                            <div
                                class="mpg-w__icon"
                                :style="cfg.pix_ativo ? { background: '#10b98122', color: '#10b981' } : {}"
                            ><i class="pi pi-qrcode" /></div>
                            <div class="mpg-w__title">
                                <div class="mpg-w__title-text">Pix</div>
                                <div class="mpg-w__sub">
                                    {{ cfg.pix_ativo && cfg.pix_chave ? `${pixTipoLabel[cfg.pix_tipo]}: ${cfg.pix_chave}` : 'Pagamento instantâneo via chave Pix' }}
                                </div>
                            </div>
                            <ToggleSwitch v-model="cfg.pix_ativo" @update:modelValue="saveCard('pix')" />
                        </div>
                        <div v-if="cfg.pix_ativo" class="mpg-w__body">
                            <div class="mpg-grid-2">
                                <div class="mpg-field">
                                    <label class="mpg-label">Tipo de chave</label>
                                    <Select
                                        v-model="cfg.pix_tipo"
                                        :options="pixTipoOptions"
                                        option-label="label"
                                        option-value="value"
                                        class="w-full"
                                    />
                                </div>
                                <div class="mpg-field">
                                    <label class="mpg-label">{{ pixTipoLabel[cfg.pix_tipo] || 'Chave' }}</label>
                                    <InputText
                                        v-model="cfg.pix_chave"
                                        class="w-full"
                                        :placeholder="pixTipoLabel[cfg.pix_tipo]"
                                    />
                                </div>
                                <div class="mpg-field mpg-field--full">
                                    <label class="mpg-label">Nome do titular</label>
                                    <InputText
                                        v-model="cfg.pix_nome_titular"
                                        class="w-full"
                                        placeholder="Nome que aparece na chave"
                                    />
                                </div>
                            </div>
                            <div class="mpg-card-actions">
                                <button
                                    class="mpg-btn mpg-btn--primary"
                                    :disabled="savingCard === 'pix'"
                                    @click="saveCard('pix')"
                                >
                                    <i :class="savingCard === 'pix' ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                                    <span>Salvar Pix</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- ── Deposito / TED ── -->
                    <div class="mpg-w" :class="{ 'is-on': cfg.deposito_ativo }">
                        <div class="mpg-w__head">
                            <div
                                class="mpg-w__icon"
                                :style="cfg.deposito_ativo ? { background: '#3b82f622', color: '#3b82f6' } : {}"
                            ><i class="pi pi-building-columns" /></div>
                            <div class="mpg-w__title">
                                <div class="mpg-w__title-text">Depósito / TED</div>
                                <div class="mpg-w__sub">
                                    {{ cfg.deposito_ativo && cfg.deposito_banco
                                        ? `${cfg.deposito_banco} · Ag. ${cfg.deposito_agencia || '—'} · Conta ${cfg.deposito_conta || '—'}`
                                        : 'Transferência bancária ou depósito' }}
                                </div>
                            </div>
                            <ToggleSwitch v-model="cfg.deposito_ativo" @update:modelValue="saveCard('deposito')" />
                        </div>
                        <div v-if="cfg.deposito_ativo" class="mpg-w__body">
                            <div class="mpg-grid-2">
                                <div class="mpg-field">
                                    <label class="mpg-label">Banco</label>
                                    <Select
                                        v-model="cfg.deposito_banco"
                                        :options="bancos"
                                        option-label="label"
                                        option-value="value"
                                        class="w-full"
                                        placeholder="Selecione o banco"
                                        filter
                                    />
                                </div>
                                <div class="mpg-field">
                                    <label class="mpg-label">Tipo de conta</label>
                                    <Select
                                        v-model="cfg.deposito_tipo_conta"
                                        :options="tipoConta"
                                        option-label="label"
                                        option-value="value"
                                        class="w-full"
                                    />
                                </div>
                                <div class="mpg-field">
                                    <label class="mpg-label">Agência</label>
                                    <InputText v-model="cfg.deposito_agencia" class="w-full" placeholder="0000" />
                                </div>
                                <div class="mpg-field">
                                    <label class="mpg-label">Conta</label>
                                    <InputText v-model="cfg.deposito_conta" class="w-full" placeholder="00000-0" />
                                </div>
                                <div class="mpg-field">
                                    <label class="mpg-label">Titular</label>
                                    <InputText
                                        v-model="cfg.deposito_titular"
                                        class="w-full"
                                        placeholder="Nome completo ou razão social"
                                    />
                                </div>
                                <div class="mpg-field">
                                    <label class="mpg-label">CPF / CNPJ do titular</label>
                                    <InputText
                                        v-model="cfg.deposito_cpf_cnpj"
                                        class="w-full"
                                        placeholder="000.000.000-00"
                                    />
                                </div>
                            </div>
                            <div class="mpg-card-actions">
                                <button
                                    class="mpg-btn mpg-btn--primary"
                                    :disabled="savingCard === 'deposito'"
                                    @click="saveCard('deposito')"
                                >
                                    <i :class="savingCard === 'deposito' ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                                    <span>Salvar depósito</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- ── Dinheiro ── -->
                    <div class="mpg-w" :class="{ 'is-on': cfg.dinheiro_ativo }">
                        <div class="mpg-w__head">
                            <div
                                class="mpg-w__icon"
                                :style="cfg.dinheiro_ativo ? { background: '#eab30822', color: '#eab308' } : {}"
                            ><i class="pi pi-wallet" /></div>
                            <div class="mpg-w__title">
                                <div class="mpg-w__title-text">Dinheiro (espécie)</div>
                                <div class="mpg-w__sub">
                                    {{ cfg.dinheiro_ativo
                                        ? 'Aceita pagamento em espécie nas sessões presenciais.'
                                        : 'Não aceita pagamento em espécie.' }}
                                </div>
                            </div>
                            <ToggleSwitch v-model="cfg.dinheiro_ativo" @update:modelValue="saveCard('dinheiro')" />
                        </div>
                    </div>

                    <!-- ── Cartão ── -->
                    <div class="mpg-w" :class="{ 'is-on': cfg.cartao_ativo }">
                        <div class="mpg-w__head">
                            <div
                                class="mpg-w__icon"
                                :style="cfg.cartao_ativo ? { background: '#a855f722', color: '#a855f7' } : {}"
                            ><i class="pi pi-credit-card" /></div>
                            <div class="mpg-w__title">
                                <div class="mpg-w__title-text">Cartão (maquininha)</div>
                                <div class="mpg-w__sub">Crédito e débito presencial</div>
                            </div>
                            <ToggleSwitch v-model="cfg.cartao_ativo" @update:modelValue="saveCard('cartao')" />
                        </div>
                        <div v-if="cfg.cartao_ativo" class="mpg-w__body">
                            <div class="mpg-field">
                                <label class="mpg-label">
                                    Instrução ao paciente <span class="mpg-label__opt">(opcional)</span>
                                </label>
                                <InputText
                                    v-model="cfg.cartao_instrucao"
                                    class="w-full"
                                    placeholder="Ex: Aceito todas as bandeiras. Parcelo em até 3x."
                                />
                            </div>
                            <div class="mpg-card-actions">
                                <button
                                    class="mpg-btn mpg-btn--primary"
                                    :disabled="savingCard === 'cartao'"
                                    @click="saveCard('cartao')"
                                >
                                    <i :class="savingCard === 'cartao' ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                                    <span>Salvar cartão</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- ── Convênio ── -->
                    <div class="mpg-w" :class="{ 'is-on': cfg.convenio_ativo }">
                        <div class="mpg-w__head">
                            <div
                                class="mpg-w__icon"
                                :style="cfg.convenio_ativo ? { background: '#14b8a622', color: '#14b8a6' } : {}"
                            ><i class="pi pi-heart" /></div>
                            <div class="mpg-w__title">
                                <div class="mpg-w__title-text">Plano de saúde / Convênio</div>
                                <div class="mpg-w__sub">
                                    {{ cfg.convenio_ativo && cfg.convenio_lista
                                        ? cfg.convenio_lista.slice(0, 60) + (cfg.convenio_lista.length > 60 ? '…' : '')
                                        : 'Atendimento por convênio' }}
                                </div>
                            </div>
                            <ToggleSwitch v-model="cfg.convenio_ativo" @update:modelValue="saveCard('convenio')" />
                        </div>
                        <div v-if="cfg.convenio_ativo" class="mpg-w__body">
                            <div class="mpg-field">
                                <label class="mpg-label">Convênios aceitos</label>
                                <Textarea
                                    v-model="cfg.convenio_lista"
                                    rows="3"
                                    class="w-full"
                                    placeholder="Ex: Unimed, Bradesco Saúde, Amil, SulAmérica..."
                                    autoResize
                                />
                                <small class="mpg-hint">
                                    Liste os convênios separados por vírgula ou um por linha.
                                </small>
                            </div>
                            <div class="mpg-card-actions">
                                <button
                                    class="mpg-btn mpg-btn--primary"
                                    :disabled="savingCard === 'convenio'"
                                    @click="saveCard('convenio')"
                                >
                                    <i :class="savingCard === 'convenio' ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                                    <span>Salvar convênio</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- ── Observações ── -->
                    <div class="mpg-w mpg-w--full">
                        <div class="mpg-w__head">
                            <div class="mpg-w__icon"><i class="pi pi-comment" /></div>
                            <div class="mpg-w__title">
                                <div class="mpg-w__title-text">Observações ao paciente</div>
                                <div class="mpg-w__sub">Texto exibido junto às formas de pagamento</div>
                            </div>
                        </div>
                        <div class="mpg-w__body">
                            <Textarea
                                v-model="cfg.observacoes_pagamento"
                                rows="4"
                                class="w-full"
                                placeholder="Ex: Pagamento no dia da sessão. Cancelamento com menos de 24h será cobrado."
                                autoResize
                            />
                            <div class="mpg-card-actions">
                                <button
                                    class="mpg-btn mpg-btn--primary"
                                    :disabled="savingCard === 'observacoes'"
                                    @click="saveCard('observacoes')"
                                >
                                    <i :class="savingCard === 'observacoes' ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                                    <span>Salvar observações</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* ═══════ Page chrome ═══════ */
.mpg-page {
    position: absolute;
    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) var(--m-config-aside-left, 6px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-medium);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border: 1px solid var(--m-border);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--m-text);
    animation: mpg-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes mpg-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

.mpg-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--m-border);
    flex-shrink: 0;
    gap: 10px;
}
.mpg-page__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-text);
    flex-wrap: wrap;
}
.mpg-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
.mpg-page__count {
    margin-left: auto;
    background: color-mix(in srgb, var(--p-primary-color) 18%, transparent);
    color: var(--p-primary-color);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.74rem;
    font-weight: 700;
}
.mpg-page__actions { display: flex; align-items: center; gap: 6px; }

.mpg-close {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.mpg-close:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }
.mpg-menu-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
}
.mpg-menu-btn:hover { background: var(--m-bg-soft-hover); }

.mpg-subheader {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 18px;
    background: var(--m-bg-soft);
    border-bottom: 1px solid var(--m-border);
    color: var(--m-text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}
.mpg-subheader__icon {
    color: var(--p-primary-color);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ═══════ Body 2-col ═══════ */
.mpg-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}
.mpg-side {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-soft);
    border-right: 1px solid var(--m-border);
    overflow: hidden;
}
.mpg-side__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mpg-side__scroll::-webkit-scrollbar { width: 5px; }
.mpg-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* Botao "Configuracoes" no topo da .mpg-side. Click alterna entre
   cards (default) e lista de configs (estado is-open: vira "Voltar"). */
.mpg-cfg-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 12px 12px 0;
    padding: 10px 12px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 9px;
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    flex-shrink: 0;
}
.mpg-cfg-btn:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mpg-cfg-btn.is-open {
    background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
    color: var(--p-primary-color);
}
.mpg-cfg-btn > i:first-child {
    color: var(--p-primary-color);
    font-size: 0.92rem;
}
.mpg-cfg-btn > span { flex: 1; }
.mpg-cfg-btn__chev {
    color: var(--m-text-muted);
    font-size: 0.7rem;
}
.mpg-side__scroll--cfg {
    padding: 8px;
    gap: 0;
}

.mpg-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mpg-main::-webkit-scrollbar { width: 5px; }
.mpg-main::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* Desktop: cards crescem com conteudo (mesmo padrao do AgendaConfig
   pq aqui tambem o conteudo varia muito). flex-shrink: 0 evita
   compressao quando o total passa do .mpg-main; scroll externo. */
@media (min-width: 1024px) {
    /* Fake dialog: largura adaptativa, alinhada a esquerda (apos o
       config-aside global). Espelha o pattern de MelissaSeguranca:
       - 1024px–1012px : full-width (right: 6px) — overlap minimo
       - 1012px–2012px : width = 1000px fixo (right cresce com viewport)
       - >= 2012px     : width = ~50% do viewport (right: 50%)
       Formula max-min-calc resolve os 3 casos numa expressao so. */
    .mpg-page {
        right: max(6px, min(50%, calc(100% - 1006px)));
    }

    .mpg-main > .mpg-w,
    .mpg-side > .mpg-side__scroll > .mpg-w--side {
        flex-shrink: 0;
    }
    .mpg-side > .mpg-side__scroll > .mpg-w--side {
        min-height: 300px;
        max-height: 100%;
        display: flex;
        flex-direction: column;
    }
    .mpg-side .mpg-w--side > .mpg-w__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--m-border-strong) transparent;
    }
    .mpg-side .mpg-w--side > .mpg-w__body::-webkit-scrollbar { width: 5px; }
    .mpg-side .mpg-w--side > .mpg-w__body::-webkit-scrollbar-thumb {
        background: var(--m-border-strong);
        border-radius: 3px;
    }
}

/* ═══════ Card-base ═══════ */
.mpg-w {
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: border-color 140ms ease;
}
.mpg-w.is-on {
    border-color: color-mix(in srgb, var(--p-primary-color) 30%, transparent);
}
.mpg-w--side {
    background: var(--m-bg-medium);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}
.mpg-w__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--m-border);
}
.mpg-w__icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 9px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
    color: var(--p-primary-color);
    transition: background-color 140ms ease, color 140ms ease;
}
.mpg-w__icon > i { font-size: 0.95rem; }
.mpg-w__title { flex: 1; min-width: 0; }
.mpg-w__title-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.2;
}
.mpg-w__sub {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    margin-top: 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mpg-w__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ═══════ Sidebar: Resumo ═══════ */
.mpg-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mpg-sum-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    transition: border-color 140ms ease;
}
.mpg-sum-item.is-active {
    background: var(--m-bg-medium);
}
.mpg-sum-icon {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background-color 140ms ease, color 140ms ease;
}
.mpg-sum-icon > i { font-size: 0.85rem; }
.mpg-sum-text { flex: 1; min-width: 0; }
.mpg-sum-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.2;
}
.mpg-sum-status {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    margin-top: 2px;
    font-weight: 600;
}

/* ═══════ Sidebar: FAQ ═══════ */
.mpg-faq {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mpg-faq__item {
    display: flex;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--m-text-muted);
    line-height: 1.4;
}
.mpg-faq__item strong { color: var(--m-text); font-weight: 700; }
.mpg-faq__item > i {
    color: var(--p-primary-color);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ═══════ Buttons ═══════ */
.mpg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    transition: background-color 120ms ease, opacity 120ms ease;
}
.mpg-btn:hover { background: var(--m-bg-soft-hover); }
.mpg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mpg-btn--primary {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}
.mpg-btn--primary:hover {
    background: color-mix(in srgb, var(--p-primary-color) 88%, black);
}

.mpg-card-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--m-border);
    margin-top: 4px;
}
.mpg-card-actions--start {
    justify-content: flex-start;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* ═══════ Form ═══════ */
.mpg-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mpg-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--m-text);
}
.mpg-label__opt {
    font-weight: 400;
    color: var(--m-text-muted);
    opacity: 0.7;
}
.mpg-hint {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    line-height: 1.3;
}
.mpg-text-hint {
    font-size: 0.82rem;
    color: var(--m-text-muted);
    line-height: 1.4;
    margin: 0;
}
.mpg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.mpg-field--full { grid-column: 1 / -1; }

/* ═══════ Mobile drawer ═══════ */
.mpg-mobile-drawer {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(360px, 88vw);
    z-index: 80;
    background: var(--m-bg-medium);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-right: 1px solid var(--m-border);
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--m-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
}
.mpg-mobile-drawer.is-open { transform: translateX(0); }
.mpg-mobile-drawer__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mpg-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mpg-mobile-drawer__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
/* No mobile a .mpg-side e teleportada pra dentro do drawer scroll. */
.mpg-mobile-drawer__scroll .mpg-side {
    width: 100%;
    border-right: none;
}

.mpg-mobile-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 79;
}
.mpg-drawer-fade-enter-active,
.mpg-drawer-fade-leave-active { transition: opacity 200ms ease; }
.mpg-drawer-fade-enter-from,
.mpg-drawer-fade-leave-to { opacity: 0; }

/* ═══════ Mobile (<1024px) ═══════ */
@media (max-width: 1023px) {
    .mpg-body { flex-direction: column; padding: 0; }
    .mpg-body > .mpg-side { display: none; }
    .mpg-main { width: 100%; padding: 8px; }
    .mpg-main .mpg-w {
        height: auto;
        flex: 0 0 auto;
        align-self: stretch;
    }
    .mpg-grid-2 { grid-template-columns: 1fr; }
    .mpg-page__title > span:first-of-type { display: none; }
    .mpg-page__title-icon { display: none; }
    .mpg-menu-btn--mobile-only { display: inline-flex; }
}
</style>
