<script setup>
/*
 * MelissaAgendaConfig — Pagina nativa Melissa pra "Configuracoes da Agenda".
 *
 * Substitui o embed cfg-agenda que vivia dentro do MelissaConfiguracoes.
 * Layout 2-col:
 *   - COL 1 (sidebar) — Card "Status do setup" (3 mini stats: Jornada,
 *     Ritmo, Online com cor verde/amber/red) + Card "Atalhos" (3
 *     atalhos pra ancoras) + Card "Como funciona" (FAQ)
 *   - COL 2 (main) — 3 cards stackados: Jornada (fuso + dias +
 *     horarios igual/diferente + pausas) + Ritmo (presets + custom)
 *     + Online (toggle + slots por dia com periodos)
 *
 * Logica espelhada do ConfiguracoesAgendaPage.vue (tabelas
 * agenda_configuracoes + agenda_regras_semanais + agenda_online_slots).
 *
 * SKIP: FullCalendar preview (visita a /melissa/agenda real).
 */
import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } 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';
import PausasChipsEditor from '@/components/agenda/PausasChipsEditor.vue';
// DatePicker/Select/Skeleton/Tag/ToggleSwitch: 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 hydrating = ref(true);
const ownerId = ref(null);
const savingCard = ref(null);

const cfg = ref({
    owner_id: null,
    agenda_view_mode: 'work_hours',
    agenda_custom_start: null,
    agenda_custom_end: null,
    session_duration_min: 50,
    session_break_min: 10,
    pausas_semanais: [],
    online_ativo: false,
    setup_clinica_concluido: false,
    setup_clinica_concluido_em: null,
    jornada_igual_todos: true,
    timezone: 'America/Sao_Paulo',
    is_conveniado: false
});

const timezones = [
    { label: 'Brasília (BRT)', value: 'America/Sao_Paulo' },
    { label: 'Manaus (AMT)', value: 'America/Manaus' },
    { label: 'Fortaleza (BRT)', value: 'America/Fortaleza' },
    { label: 'Belém (BRT)', value: 'America/Belem' },
    { label: 'Rio Branco (ACT)', value: 'America/Rio_Branco' },
    { label: 'Noronha (FNT)', value: 'America/Noronha' },
    { label: 'Lisboa (WET)', value: 'Europe/Lisbon' }
];

const regras = ref([]);
const workDays = ref({ 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 0: false });
const jornadaStart = ref('08:00');
const jornadaEnd = ref('18:00');
const jornadaIgualTodos = ref(true);

const jornadaPorDia = ref({
    1: { inicio: '08:00', fim: '18:00' },
    2: { inicio: '08:00', fim: '18:00' },
    3: { inicio: '08:00', fim: '18:00' },
    4: { inicio: '08:00', fim: '18:00' },
    5: { inicio: '08:00', fim: '18:00' },
    6: { inicio: '08:00', fim: '18:00' },
    0: { inicio: '08:00', fim: '18:00' }
});
const jornadaPorDiaSnapshot = ref(null);

const pausasGlobais = ref([]);
const pausasPorDia = ref({ 1: [], 2: [], 3: [], 4: [], 5: [], 6: [], 0: [] });

const onlineSlotsByDay = ref({ 1: new Set(), 2: new Set(), 3: new Set(), 4: new Set(), 5: new Set(), 6: new Set(), 0: new Set() });

function resetOnlineSlots() {
    onlineSlotsByDay.value = { 1: new Set(), 2: new Set(), 3: new Set(), 4: new Set(), 5: new Set(), 6: new Set(), 0: new Set() };
}

const showAdvancedRitmo = ref(false);
const previewDay = ref(null);

// ── Constantes / helpers ───────────────────────────────────
const diasSemana = [
    { label: 'Segunda', short: 'Seg', value: 1 },
    { label: 'Terça', short: 'Ter', value: 2 },
    { label: 'Quarta', short: 'Qua', value: 3 },
    { label: 'Quinta', short: 'Qui', value: 4 },
    { label: 'Sexta', short: 'Sex', value: 5 },
    { label: 'Sábado', short: 'Sáb', value: 6 },
    { label: 'Domingo', short: 'Dom', value: 0 }
];

const selectedDays = computed(() => diasSemana.filter((d) => !!workDays.value[d.value]));
const selectedWeekdays = computed(() => diasSemana.filter((d) => d.value >= 1 && d.value <= 5 && !!workDays.value[d.value]));

function hhmmToMin(hhmm) {
    const [h, m] = String(hhmm).split(':').map(Number);
    return h * 60 + m;
}
function minToHHMM(min) {
    const h = Math.floor(min / 60) % 24;
    const m = min % 60;
    return String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
}
function isValidHHMM(v) {
    if (!v) return false;
    return /^\d{2}:\d{2}$/.test(String(v).trim());
}
function normalizeTime(v) {
    if (v == null || v === '') return null;
    const s = String(v).trim();
    if (/^\d{2}:\d{2}$/.test(s)) return s + ':00';
    if (/^\d{2}:\d{2}:\d{2}$/.test(s)) return s;
    return s;
}
function newId() {
    return Math.random().toString(16).slice(2) + Date.now().toString(16);
}
function dateToHHMM(date) {
    if (!date) return null;
    const d = date instanceof Date ? date : new Date(date);
    if (Number.isNaN(d.getTime())) return null;
    return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
}
function hhmmToDate(hhmm) {
    if (!isValidHHMM(hhmm)) return null;
    const [h, m] = String(hhmm).split(':').map(Number);
    const d = new Date();
    d.setHours(h, m, 0, 0);
    return d;
}

// ── Resumos ────────────────────────────────────────────────
const resumoJornada = computed(() => {
    const days = selectedDays.value;
    if (!days.length) return 'Nenhum dia configurado';
    const labels = days.map((d) => d.short).join('·');
    if (jornadaIgualTodos.value !== false) {
        return `${labels}  ·  ${jornadaStart.value}–${jornadaEnd.value}`;
    }
    return `${labels}  ·  horários variados`;
});

const jornadaOk = computed(
    () =>
        selectedDays.value.length > 0 &&
        isValidHHMM(jornadaStart.value) &&
        isValidHHMM(jornadaEnd.value) &&
        jornadaEnd.value > jornadaStart.value
);

const resumoRitmo = computed(() => {
    const d = cfg.value.session_duration_min || 50;
    const i = cfg.value.session_break_min || 0;
    return `${d}min sessão · ${i > 0 ? `${i}min intervalo` : 'sem intervalo'}`;
});

const resumoOnline = computed(() => {
    if (!cfg.value.online_ativo) return 'Desativado';
    let total = 0;
    let dias = 0;
    for (const k of Object.keys(onlineSlotsByDay.value)) {
        const size = onlineSlotsByDay.value[k]?.size || 0;
        total += size;
        if (size > 0) dias++;
    }
    return `${total} slot${total !== 1 ? 's' : ''} em ${dias} dia${dias !== 1 ? 's' : ''}`;
});

const orphanSlotDays = computed(() => {
    const active = new Set(selectedDays.value.map((d) => d.value));
    return diasSemana
        .filter((d) => !active.has(d.value) && (onlineSlotsByDay.value[d.value]?.size || 0) > 0)
        .map((d) => d.short);
});

// ── Sync horários igual ────────────────────────────────────
watch(
    [selectedDays, jornadaStart, jornadaEnd],
    () => {
        if (!isValidHHMM(jornadaStart.value) || !isValidHHMM(jornadaEnd.value)) return;
        if (jornadaIgualTodos.value !== false) {
            selectedDays.value
                .filter((d) => d.value >= 1 && d.value <= 5)
                .forEach((d) => {
                    jornadaPorDia.value[d.value] = { inicio: jornadaStart.value, fim: jornadaEnd.value };
                });
        }
    },
    { immediate: true }
);

function getPausasForDay(dayValue) {
    if (jornadaIgualTodos.value !== false) return pausasGlobais.value;
    return pausasPorDia.value[dayValue] || [];
}

function switchToIgual() {
    jornadaPorDiaSnapshot.value = {};
    selectedDays.value.forEach((d) => {
        if (jornadaPorDia.value[d.value]) {
            jornadaPorDiaSnapshot.value[d.value] = { ...jornadaPorDia.value[d.value] };
        }
    });
    if (isValidHHMM(jornadaStart.value) && isValidHHMM(jornadaEnd.value)) {
        selectedDays.value
            .filter((d) => d.value >= 1 && d.value <= 5)
            .forEach((d) => {
                jornadaPorDia.value[d.value] = { inicio: jornadaStart.value, fim: jornadaEnd.value };
            });
        [6, 0].forEach((v) => {
            if (workDays.value[v] && !jornadaPorDia.value[v]?.inicio) {
                jornadaPorDia.value[v] = { inicio: jornadaStart.value, fim: jornadaEnd.value };
            }
        });
    }
    selectedDays.value.forEach((d) => { pausasPorDia.value[d.value] = []; });
    jornadaIgualTodos.value = true;
}

function switchToDiferente() {
    selectedDays.value.forEach((d) => {
        const isWeekend = d.value === 6 || d.value === 0;
        const snap = jornadaPorDiaSnapshot.value?.[d.value];
        if (snap && isValidHHMM(snap.inicio) && isValidHHMM(snap.fim)) {
            jornadaPorDia.value[d.value] = { ...snap };
        } else if (!isWeekend) {
            jornadaPorDia.value[d.value] = { inicio: '08:00', fim: '18:00' };
        }
    });
    selectedDays.value.forEach((d) => {
        pausasPorDia.value[d.value] = pausasGlobais.value.map((p) => ({ ...p, id: newId() }));
    });
    jornadaIgualTodos.value = false;
}

function hydratePausasFromCfg() {
    const byDay = { 1: [], 2: [], 3: [], 4: [], 5: [], 6: [], 0: [] };
    for (const p of cfg.value.pausas_semanais || []) {
        const d = p.dia_semana;
        if (byDay[d]) byDay[d].push({ ...p, id: p.id || newId() });
    }
    pausasPorDia.value = byDay;
    const first = selectedDays.value[0]?.value;
    if (jornadaIgualTodos.value !== false) {
        pausasGlobais.value = first != null ? (byDay[first] || []).map((p) => ({ ...p })) : [];
    }
}

function hydrateWizardFromRegras(dbRegras) {
    const map = { 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 0: false };
    const byDay = { ...jornadaPorDia.value };
    const actives = (dbRegras || []).filter((r) => r.ativo);

    if (!actives.length) {
        workDays.value = map;
        jornadaIgualTodos.value = true;
        regras.value = [];
        return;
    }

    actives.forEach((r) => {
        map[r.dia_semana] = true;
        byDay[r.dia_semana] = {
            inicio: String(r.hora_inicio || '').slice(0, 5),
            fim: String(r.hora_fim || '').slice(0, 5)
        };
    });

    workDays.value = map;
    jornadaPorDia.value = byDay;

    const weekdayActives = actives.filter((r) => r.dia_semana >= 1 && r.dia_semana <= 5);
    const ref0 = weekdayActives.length ? weekdayActives[0] : actives[0];

    const allSame =
        weekdayActives.length >= 2
            ? weekdayActives.every(
                  (r) =>
                      String(r.hora_inicio || '').slice(0, 5) === String(ref0.hora_inicio || '').slice(0, 5) &&
                      String(r.hora_fim || '').slice(0, 5) === String(ref0.hora_fim || '').slice(0, 5)
              )
            : true;

    jornadaIgualTodos.value = allSame;
    jornadaStart.value = String(ref0.hora_inicio || '').slice(0, 5) || '08:00';
    jornadaEnd.value = String(ref0.hora_fim || '').slice(0, 5) || '18:00';

    if (!allSame) {
        jornadaPorDiaSnapshot.value = {};
        Object.keys(byDay).forEach((k) => {
            jornadaPorDiaSnapshot.value[k] = { ...byDay[k] };
        });
    }

    regras.value = actives.map((r) => ({
        ...r,
        hora_inicio: String(r.hora_inicio || '').slice(0, 5),
        hora_fim: String(r.hora_fim || '').slice(0, 5)
    }));
}

// ── Auth / tenant ──────────────────────────────────────────
async function getOwnerId() {
    const { data, error } = await supabase.auth.getUser();
    if (error) throw error;
    const uid = data?.user?.id;
    if (!uid) throw new Error('Sessão inválida.');
    return uid;
}

async function getActiveTenantId(uid) {
    const fromStore =
        tenantStore.activeTenantId ||
        tenantStore.tenantId ||
        tenantStore.currentTenantId ||
        tenantStore.tenant?.id ||
        null;
    if (fromStore) return fromStore;
    const { data } = await supabase
        .from('tenant_members')
        .select('tenant_id')
        .eq('user_id', uid)
        .eq('status', 'active')
        .limit(1)
        .maybeSingle();
    return data?.tenant_id || null;
}

async function seedConfigIfMissing(uid) {
    const { data: existing } = await tenantDb().from('agenda_configuracoes')
        .select('owner_id')
        .eq('owner_id', uid)
        .maybeSingle();
    if (existing) return;
    const tenantId = await getActiveTenantId(uid);
    const { error } = await tenantDb().from('agenda_configuracoes')
        .insert({ owner_id: uid, session_duration_min: 50, session_break_min: 10 });
    if (error) throw error;
}

// ── Load ───────────────────────────────────────────────────
async function loadConfig() {
    const uid = await getOwnerId();
    ownerId.value = uid;
    cfg.value.owner_id = uid;
    await seedConfigIfMissing(uid);
    const { data, error } = await tenantDb().from('agenda_configuracoes')
        .select('*')
        .eq('owner_id', uid)
        .order('created_at', { ascending: false })
        .limit(1)
        .maybeSingle();
    if (error) throw error;
    if (data) {
        cfg.value = { ...cfg.value, ...data };
        if (!Array.isArray(cfg.value.pausas_semanais)) cfg.value.pausas_semanais = [];
    }
}

async function loadRegras() {
    const uid = ownerId.value || (await getOwnerId());
    ownerId.value = uid;
    const { data, error } = await tenantDb().from('agenda_regras_semanais')
        .select('*')
        .eq('owner_id', uid)
        .order('dia_semana')
        .order('hora_inicio');
    if (error) throw error;
    const rows = (data || []).map((r) => ({
        ...r,
        hora_inicio: String(r.hora_inicio || '').slice(0, 5),
        hora_fim: String(r.hora_fim || '').slice(0, 5),
        ativo: !!r.ativo
    }));
    hydrateWizardFromRegras(rows);
}

async function loadOnlineSlots() {
    const uid = ownerId.value || (await getOwnerId());
    ownerId.value = uid;
    resetOnlineSlots();
    const { data, error } = await tenantDb().from('agenda_online_slots')
        .select('weekday,time,enabled')
        .eq('owner_id', uid);
    if (error) return;
    for (const row of data || []) {
        if (!row?.enabled) continue;
        const d = Number(row.weekday);
        const t = String(row.time || '').slice(0, 5);
        if ([0, 1, 2, 3, 4, 5, 6].includes(d) && isValidHHMM(t)) onlineSlotsByDay.value[d].add(t);
    }
}

async function boot() {
    hydrating.value = true;
    loading.value = true;
    try {
        await loadConfig();
        await loadRegras();
        if (cfg.value.jornada_igual_todos != null) {
            jornadaIgualTodos.value = cfg.value.jornada_igual_todos;
        }
        hydratePausasFromCfg();
        await loadOnlineSlots();
        const first = selectedDays.value[0];
        previewDay.value = first?.value ?? 1;
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro ao carregar', detail: e?.message, life: 4000 });
    } finally {
        loading.value = false;
        hydrating.value = false;
    }
}

// ── Save por card ──────────────────────────────────────────
async function saveJornada() {
    if (!jornadaOk.value) {
        toast.add({
            severity: 'warn',
            summary: 'Jornada',
            detail: 'Selecione ao menos um dia e informe horários válidos.',
            life: 3500
        });
        return;
    }
    savingCard.value = 'jornada';
    try {
        const uid = ownerId.value || (await getOwnerId());
        ownerId.value = uid;
        const tenantId = await getActiveTenantId(uid);

        const pausasToSave = [];
        if (jornadaIgualTodos.value !== false) {
            for (const d of selectedDays.value) {
                for (const p of pausasGlobais.value) pausasToSave.push({ ...p, dia_semana: d.value });
            }
        } else {
            for (const d of selectedDays.value) {
                for (const p of pausasPorDia.value[d.value] || []) pausasToSave.push({ ...p, dia_semana: d.value });
            }
        }
        cfg.value.pausas_semanais = pausasToSave;

        const igualTodos = jornadaIgualTodos.value !== false;
        const { error: cfgErr } = await tenantDb().from('agenda_configuracoes')
            .upsert(
                {
                    owner_id: uid,
                    pausas_semanais: pausasToSave,
                    jornada_igual_todos: igualTodos,
                    timezone: cfg.value.timezone || 'America/Sao_Paulo',
                    setup_clinica_concluido: true,
                    setup_clinica_concluido_em: cfg.value.setup_clinica_concluido_em || new Date().toISOString()
                },
                { onConflict: 'owner_id' }
            );
        if (cfgErr) throw cfgErr;

        const rows = selectedDays.value.map((d) => {
            const isWeekend = d.value === 6 || d.value === 0;
            const t =
                jornadaIgualTodos.value === false || isWeekend
                    ? jornadaPorDia.value[d.value] || { inicio: jornadaStart.value, fim: jornadaEnd.value }
                    : { inicio: jornadaStart.value, fim: jornadaEnd.value };
            return {
                owner_id: uid,
                dia_semana: d.value,
                hora_inicio: normalizeTime(t.inicio),
                hora_fim: normalizeTime(t.fim),
                modalidade: 'ambos',
                ativo: true
            };
        });

        const { error: delErr } = await tenantDb().from('agenda_regras_semanais').delete().eq('owner_id', uid);
        if (delErr) throw delErr;
        if (rows.length) {
            const { error: insErr } = await tenantDb().from('agenda_regras_semanais').insert(rows);
            if (insErr) throw insErr;
        }

        // Limpar slots online de dias removidos da jornada
        const activeDays = new Set(selectedDays.value.map((d) => d.value));
        const orphanDays = [0, 1, 2, 3, 4, 5, 6].filter((d) => !activeDays.has(d));
        if (orphanDays.length) {
            await tenantDb().from('agenda_online_slots').delete().eq('owner_id', uid).in('weekday', orphanDays);
            for (const d of orphanDays) _setDay(d, new Set());
        }

        cfg.value.setup_clinica_concluido = true;
        cfg.value.jornada_igual_todos = igualTodos;
        toast.add({ severity: 'success', summary: 'Jornada salva', life: 2500 });
        window.dispatchEvent(new CustomEvent('agenda:settings-saved', { detail: { source: 'jornada' } }));
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao salvar jornada.', life: 3500 });
    } finally {
        savingCard.value = null;
    }
}

async function saveRitmo() {
    const dur = Number(cfg.value.session_duration_min || 0);
    const gap = Number(cfg.value.session_break_min || 0);
    if (dur < 10 || dur > 240) {
        toast.add({ severity: 'warn', summary: 'Ritmo', detail: 'Duração entre 10 e 240 min.', life: 3500 });
        return;
    }
    if (gap < 0 || gap > 60) {
        toast.add({ severity: 'warn', summary: 'Ritmo', detail: 'Intervalo entre 0 e 60 min.', life: 3500 });
        return;
    }
    savingCard.value = 'ritmo';
    try {
        const uid = ownerId.value || (await getOwnerId());
        ownerId.value = uid;
        const { error } = await tenantDb().from('agenda_configuracoes')
            .upsert(
                { owner_id: uid, session_duration_min: dur, session_break_min: gap },
                { onConflict: 'owner_id' }
            );
        if (error) throw error;
        toast.add({ severity: 'success', summary: 'Ritmo salvo', life: 1800 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha.', life: 3500 });
    } finally {
        savingCard.value = null;
    }
}

async function saveOnline() {
    savingCard.value = 'online';
    try {
        const uid = ownerId.value || (await getOwnerId());
        ownerId.value = uid;
        const tenantId = await getActiveTenantId(uid);

        const { error: cfgErr } = await tenantDb().from('agenda_configuracoes')
            .upsert({ owner_id: uid, online_ativo: cfg.value.online_ativo }, { onConflict: 'owner_id' });
        if (cfgErr) throw cfgErr;

        const { error: delErr } = await tenantDb().from('agenda_online_slots').delete().eq('owner_id', uid);
        if (delErr) throw delErr;

        if (cfg.value.online_ativo) {
            const rows = [];
            for (const d of selectedDays.value) {
                for (const hhmm of onlineSlotsByDay.value[d.value] || new Set()) {
                    if (isValidHHMM(hhmm)) {
                        rows.push({
                            owner_id: uid,
                            weekday: Number(d.value),
                            time: normalizeTime(hhmm),
                            enabled: true
                        });
                    }
                }
            }
            if (rows.length) {
                const { error: insErr } = await tenantDb().from('agenda_online_slots').insert(rows);
                if (insErr) throw insErr;
            }
        }

        toast.add({ severity: 'success', summary: 'Online salvo', life: 1800 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha.', life: 3500 });
    } finally {
        savingCard.value = null;
    }
}

// ── Live regras (UI) ───────────────────────────────────────
const liveRegras = computed(() =>
    selectedDays.value.map((d) => {
        const t = jornadaPorDia.value[d.value] || { inicio: jornadaStart.value, fim: jornadaEnd.value };
        return { dia_semana: d.value, hora_inicio: t.inicio, hora_fim: t.fim, ativo: true };
    })
);

// ── Slots online helpers ───────────────────────────────────
function generateSlotsForDay(dayValue) {
    const windows = liveRegras.value
        .filter((r) => r.ativo && r.dia_semana === dayValue)
        .map((r) => ({ start: String(r.hora_inicio || '').slice(0, 5), end: String(r.hora_fim || '').slice(0, 5) }))
        .sort((a, b) => a.start.localeCompare(b.start));
    if (!windows.length) return [];

    const breaks = getPausasForDay(dayValue).map((p) => ({
        start: String(p.inicio || '').slice(0, 5),
        end: String(p.fim || '').slice(0, 5)
    }));

    const duration = Number(cfg.value.session_duration_min || 50);
    const gap = Number(cfg.value.session_break_min || 10);
    const cycle = Math.max(1, duration + gap);
    const out = [];

    for (const w of windows) {
        const wStart = hhmmToMin(w.start);
        const wEnd = hhmmToMin(w.end);
        let t = wStart;
        while (t < wEnd) {
            const aEnd = t + duration;
            if (aEnd > wEnd) break;
            const conflict = breaks.find((b) => {
                const bS = hhmmToMin(b.start);
                const bE = hhmmToMin(b.end);
                return !(aEnd <= bS || t >= bE);
            });
            if (conflict) {
                t = hhmmToMin(conflict.end);
                continue;
            }
            out.push({ hhmm: minToHHMM(t), endHHMM: minToHHMM(aEnd) });
            t += cycle;
        }
    }

    const seen = new Set();
    return out
        .filter((s) => {
            if (seen.has(s.hhmm)) return false;
            seen.add(s.hhmm);
            return true;
        })
        .sort((a, b) => a.hhmm.localeCompare(b.hhmm));
}

const slotsByDay = computed(() => {
    const out = {};
    for (const d of selectedDays.value) out[d.value] = generateSlotsForDay(d.value);
    return out;
});

function isSlotEnabled(dayValue, hhmm) {
    return !!onlineSlotsByDay.value?.[dayValue]?.has?.(hhmm);
}

function _setDay(dayValue, newSet) {
    onlineSlotsByDay.value = { ...onlineSlotsByDay.value, [dayValue]: newSet };
}
function toggleSlot(dayValue, hhmm) {
    const s = new Set(onlineSlotsByDay.value?.[dayValue] || []);
    if (s.has(hhmm)) s.delete(hhmm);
    else s.add(hhmm);
    _setDay(dayValue, s);
}
function enableAllDay(dayValue) {
    const set = new Set();
    for (const s of slotsByDay.value?.[dayValue] || []) set.add(s.hhmm);
    _setDay(dayValue, set);
}
function clearDay(dayValue) {
    _setDay(dayValue, new Set());
}

const periodos = [
    { label: 'Manhã', icon: 'pi-sun', from: '05:00', to: '12:00' },
    { label: 'Tarde', icon: 'pi-cloud', from: '12:00', to: '18:00' },
    { label: 'Noite', icon: 'pi-moon', from: '18:00', to: '24:00' }
];

function isPeriodoAtivo(dayValue, periodo) {
    const slots = (slotsByDay.value?.[dayValue] || []).filter((s) => s.hhmm >= periodo.from && s.hhmm < periodo.to);
    if (!slots.length) return false;
    return slots.every((s) => isSlotEnabled(dayValue, s.hhmm));
}
function togglePeriodo(dayValue, periodo) {
    const slots = (slotsByDay.value?.[dayValue] || []).filter((s) => s.hhmm >= periodo.from && s.hhmm < periodo.to);
    if (!slots.length) return;
    const s = new Set(onlineSlotsByDay.value?.[dayValue] || []);
    const allOn = slots.every((sl) => s.has(sl.hhmm));
    if (allOn) for (const sl of slots) s.delete(sl.hhmm);
    else for (const sl of slots) s.add(sl.hhmm);
    _setDay(dayValue, s);
}
function hasSlotsInPeriodo(dayValue, periodo) {
    return (slotsByDay.value?.[dayValue] || []).some((s) => s.hhmm >= periodo.from && s.hhmm < periodo.to);
}

// ── Presets de duração ─────────────────────────────────────
const durationPresets = [
    { label: '30 min', dur: 30, gap: 0 },
    { label: '45 min', dur: 45, gap: 15 },
    { label: '50 min', dur: 50, gap: 10 },
    { label: '60 min', dur: 60, gap: 0 },
    { label: '90 min', dur: 90, gap: 0 }
];
function applyDurationPreset(preset) {
    cfg.value.session_duration_min = preset.dur;
    cfg.value.session_break_min = preset.gap;
    showAdvancedRitmo.value = false;
}
function isActivePreset(preset) {
    return cfg.value.session_duration_min === preset.dur && cfg.value.session_break_min === preset.gap;
}

// DatePicker bridges
const durationDate = computed({
    get: () => hhmmToDate(minToHHMM(Number(cfg.value.session_duration_min || 50))),
    set: (v) => { if (v instanceof Date) cfg.value.session_duration_min = v.getHours() * 60 + v.getMinutes(); }
});
const breakDate = computed({
    get: () => hhmmToDate(minToHHMM(Number(cfg.value.session_break_min || 0))),
    set: (v) => { if (v instanceof Date) cfg.value.session_break_min = v.getHours() * 60 + v.getMinutes(); }
});
const jornadaStartDate = computed({
    get: () => hhmmToDate(jornadaStart.value),
    set: (v) => { const h = dateToHHMM(v); if (h) jornadaStart.value = h; }
});
const jornadaEndDate = computed({
    get: () => hhmmToDate(jornadaEnd.value),
    set: (v) => { const h = dateToHHMM(v); if (h) jornadaEnd.value = h; }
});

function setJornadaPorDiaInicio(day, v) {
    const h = dateToHHMM(v);
    if (h) jornadaPorDia.value[day] = { ...jornadaPorDia.value[day], inicio: h };
}
function setJornadaPorDiaFim(day, v) {
    const h = dateToHHMM(v);
    if (h) jornadaPorDia.value[day] = { ...jornadaPorDia.value[day], fim: h };
}

// ── Status indicators (sidebar) ────────────────────────────
const statusItems = computed(() => [
    {
        key: 'jornada',
        label: 'Jornada',
        icon: 'pi pi-calendar',
        ok: jornadaOk.value,
        resumo: resumoJornada.value
    },
    {
        key: 'ritmo',
        label: 'Ritmo',
        icon: 'pi pi-stopwatch',
        ok: cfg.value.session_duration_min > 0,
        resumo: resumoRitmo.value
    },
    {
        key: 'online',
        label: 'Online',
        icon: 'pi pi-globe',
        ok: cfg.value.online_ativo,
        resumo: resumoOnline.value
    }
]);

function scrollToCard(key) {
    if (isMobile.value) drawerOpen.value = false;
    nextTick(() => {
        const el = document.getElementById('mac-sec-' + key);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
}

// ── 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 boot();
});

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

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

    <section class="mac-page">
        <header class="mac-page__head">
            <button
                class="mac-menu-btn mac-menu-btn--mobile-only"
                v-tooltip.bottom="'Status & Atalhos'"
                @click="toggleDrawer"
            >
                <i class="pi pi-bars" />
                <span>Menu</span>
            </button>
            <div class="mac-page__title">
                <i class="pi pi-calendar mac-page__title-icon" />
                <span>Configurações da Agenda</span>
                <Tag
                    v-if="cfg.setup_clinica_concluido"
                    value="Setup OK"
                    severity="success"
                />
                <Tag
                    v-else
                    value="Setup pendente"
                    severity="warn"
                />
            </div>
            <div class="mac-page__actions">
                <button class="mac-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
                    <i class="pi pi-times" />
                </button>
            </div>
        </header>

        <div class="mac-subheader">
            <i class="pi pi-info-circle mac-subheader__icon" />
            <span class="mac-subheader__text">
                Configure a jornada (dias e horários), o ritmo das sessões e o
                agendamento online. Cada card abaixo tem seu próprio botão de salvar.
            </span>
        </div>

        <div class="mac-body">
            <Teleport to="#mac-mobile-drawer-target" :disabled="!isMobile">
                <aside class="mac-side">
                    <button class="mac-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 mac-cfg-btn__chev" />
                    </button>
                    <div v-if="cfgOpen" class="mac-side__scroll mac-side__scroll--cfg">
                        <MelissaConfigList @select="fecharCfg" />
                    </div>
                    <div v-else class="mac-side__scroll">
                        <!-- Card: Status do setup -->
                        <div class="mac-w mac-w--side">
                            <div class="mac-w__head">
                                <div class="mac-w__icon"><i class="pi pi-check-circle" /></div>
                                <div class="mac-w__title">
                                    <div class="mac-w__title-text">Status do setup</div>
                                    <div class="mac-w__sub">Estado de cada seção</div>
                                </div>
                            </div>
                            <div class="mac-w__body">
                                <button
                                    v-for="s in statusItems"
                                    :key="s.key"
                                    type="button"
                                    class="mac-status-item"
                                    @click="scrollToCard(s.key)"
                                >
                                    <div
                                        class="mac-status-item__icon"
                                        :class="{ 'is-ok': s.ok, 'is-pending': !s.ok }"
                                    >
                                        <i :class="s.icon" />
                                    </div>
                                    <div class="mac-status-item__text">
                                        <div class="mac-status-item__label">
                                            {{ s.label }}
                                            <span class="mac-status-item__tag" :class="{ 'is-ok': s.ok }">
                                                {{ s.ok ? '✓' : '!' }}
                                            </span>
                                        </div>
                                        <div class="mac-status-item__resumo">{{ s.resumo }}</div>
                                    </div>
                                    <i class="pi pi-chevron-right mac-status-item__chev" />
                                </button>
                            </div>
                        </div>

                        <!-- Card: Como funciona -->
                        <div class="mac-w mac-w--side">
                            <div class="mac-w__head">
                                <div class="mac-w__icon"><i class="pi pi-question-circle" /></div>
                                <div class="mac-w__title">
                                    <div class="mac-w__title-text">Como funciona</div>
                                    <div class="mac-w__sub">Ordem sugerida</div>
                                </div>
                            </div>
                            <div class="mac-w__body">
                                <ul class="mac-faq">
                                    <li class="mac-faq__item">
                                        <span class="mac-faq__bullet" style="background: #3b82f6">1</span>
                                        <div>
                                            <strong>Jornada</strong> — escolha os dias e os horários de trabalho. Pode ser igual ou diferente por dia.
                                        </div>
                                    </li>
                                    <li class="mac-faq__item">
                                        <span class="mac-faq__bullet" style="background: #f59e0b">2</span>
                                        <div>
                                            <strong>Ritmo</strong> — duração de cada sessão e intervalo entre elas. Define a grade de slots.
                                        </div>
                                    </li>
                                    <li class="mac-faq__item">
                                        <span class="mac-faq__bullet" style="background: #10b981">3</span>
                                        <div>
                                            <strong>Online</strong> — ative o agendamento online e escolha quais slots ficam disponíveis pros pacientes.
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </aside>
            </Teleport>

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

                <template v-else>
                    <!-- ── Jornada ── -->
                    <div id="mac-sec-jornada" class="mac-w">
                        <div class="mac-w__head">
                            <div class="mac-w__icon mac-w__icon--blue"><i class="pi pi-calendar" /></div>
                            <div class="mac-w__title">
                                <div class="mac-w__title-text">Jornada</div>
                                <div class="mac-w__sub">Dias e horários de trabalho</div>
                            </div>
                            <Tag
                                v-if="jornadaOk"
                                value="Configurado"
                                severity="success"
                            />
                            <Tag
                                v-else
                                value="Pendente"
                                severity="warn"
                            />
                        </div>

                        <div class="mac-w__body">
                            <!-- Fuso -->
                            <div class="mac-field">
                                <label class="mac-label">Fuso horário</label>
                                <Select
                                    v-model="cfg.timezone"
                                    :options="timezones"
                                    optionLabel="label"
                                    optionValue="value"
                                    class="w-full"
                                    placeholder="Selecione o fuso..."
                                />
                            </div>

                            <!-- Dias -->
                            <div class="mac-field">
                                <label class="mac-label">Quais dias você trabalha?</label>
                                <div class="mac-days">
                                    <button
                                        v-for="d in diasSemana"
                                        :key="d.value"
                                        type="button"
                                        class="mac-day"
                                        :class="{ 'is-active': workDays[d.value] }"
                                        @click="
                                            workDays[d.value] = !workDays[d.value];
                                            previewDay = selectedDays[0]?.value ?? previewDay;
                                        "
                                    >{{ d.short }}</button>
                                </div>
                            </div>

                            <!-- Horários -->
                            <div v-if="selectedDays.length > 0" class="mac-field">
                                <label class="mac-label">Qual é o seu horário?</label>
                                <div class="mac-toggle-mode">
                                    <button
                                        type="button"
                                        class="mac-mode-btn"
                                        :class="{ 'is-active': jornadaIgualTodos !== false }"
                                        @click="switchToIgual"
                                    >Igual para todos</button>
                                    <button
                                        type="button"
                                        class="mac-mode-btn"
                                        :class="{ 'is-active': jornadaIgualTodos === false }"
                                        @click="switchToDiferente"
                                    >Diferente por dia</button>
                                </div>

                                <!-- Modo igual -->
                                <div v-if="jornadaIgualTodos !== false" class="mac-equals">
                                    <div v-if="selectedWeekdays.length > 0" class="mac-equal-row">
                                        <div class="mac-equal-row__chips">
                                            <span
                                                v-for="d in selectedWeekdays"
                                                :key="d.value"
                                                class="mac-day is-active mac-day--sm"
                                            >{{ d.short }}</span>
                                        </div>
                                        <div class="mac-time-row">
                                            <span class="mac-time-row__lbl">Das</span>
                                            <DatePicker
                                                v-model="jornadaStartDate"
                                                showIcon
                                                fluid
                                                iconDisplay="input"
                                                timeOnly
                                                hourFormat="24"
                                                :stepMinute="15"
                                                :manualInput="false"
                                                class="mac-time"
                                            >
                                                <template #inputicon="sp">
                                                    <i class="pi pi-clock" @click="sp.clickCallback" />
                                                </template>
                                            </DatePicker>
                                            <span class="mac-time-row__lbl">até</span>
                                            <DatePicker
                                                v-model="jornadaEndDate"
                                                showIcon
                                                fluid
                                                iconDisplay="input"
                                                timeOnly
                                                hourFormat="24"
                                                :stepMinute="15"
                                                :manualInput="false"
                                                class="mac-time"
                                            >
                                                <template #inputicon="sp">
                                                    <i class="pi pi-clock" @click="sp.clickCallback" />
                                                </template>
                                            </DatePicker>
                                        </div>
                                    </div>

                                    <div v-if="workDays[6]" class="mac-equal-row">
                                        <div class="mac-equal-row__chips">
                                            <span class="mac-day is-active mac-day--sm">Sáb</span>
                                        </div>
                                        <div class="mac-time-row">
                                            <span class="mac-time-row__lbl">Das</span>
                                            <DatePicker
                                                :modelValue="hhmmToDate(jornadaPorDia[6]?.inicio)"
                                                @update:modelValue="(v) => setJornadaPorDiaInicio(6, v)"
                                                showIcon fluid iconDisplay="input" timeOnly hourFormat="24"
                                                :stepMinute="15" :manualInput="false" class="mac-time"
                                            >
                                                <template #inputicon="sp">
                                                    <i class="pi pi-clock" @click="sp.clickCallback" />
                                                </template>
                                            </DatePicker>
                                            <span class="mac-time-row__lbl">até</span>
                                            <DatePicker
                                                :modelValue="hhmmToDate(jornadaPorDia[6]?.fim)"
                                                @update:modelValue="(v) => setJornadaPorDiaFim(6, v)"
                                                showIcon fluid iconDisplay="input" timeOnly hourFormat="24"
                                                :stepMinute="15" :manualInput="false" class="mac-time"
                                            >
                                                <template #inputicon="sp">
                                                    <i class="pi pi-clock" @click="sp.clickCallback" />
                                                </template>
                                            </DatePicker>
                                        </div>
                                    </div>

                                    <div v-if="workDays[0]" class="mac-equal-row">
                                        <div class="mac-equal-row__chips">
                                            <span class="mac-day is-active mac-day--sm">Dom</span>
                                        </div>
                                        <div class="mac-time-row">
                                            <span class="mac-time-row__lbl">Das</span>
                                            <DatePicker
                                                :modelValue="hhmmToDate(jornadaPorDia[0]?.inicio)"
                                                @update:modelValue="(v) => setJornadaPorDiaInicio(0, v)"
                                                showIcon fluid iconDisplay="input" timeOnly hourFormat="24"
                                                :stepMinute="15" :manualInput="false" class="mac-time"
                                            >
                                                <template #inputicon="sp">
                                                    <i class="pi pi-clock" @click="sp.clickCallback" />
                                                </template>
                                            </DatePicker>
                                            <span class="mac-time-row__lbl">até</span>
                                            <DatePicker
                                                :modelValue="hhmmToDate(jornadaPorDia[0]?.fim)"
                                                @update:modelValue="(v) => setJornadaPorDiaFim(0, v)"
                                                showIcon fluid iconDisplay="input" timeOnly hourFormat="24"
                                                :stepMinute="15" :manualInput="false" class="mac-time"
                                            >
                                                <template #inputicon="sp">
                                                    <i class="pi pi-clock" @click="sp.clickCallback" />
                                                </template>
                                            </DatePicker>
                                        </div>
                                    </div>
                                </div>

                                <!-- Modo diferente -->
                                <div v-else class="mac-diff">
                                    <div
                                        v-for="d in selectedDays"
                                        :key="d.value"
                                        class="mac-diff-row"
                                    >
                                        <span class="mac-diff-row__day">{{ d.short }}</span>
                                        <DatePicker
                                            :modelValue="hhmmToDate(jornadaPorDia[d.value]?.inicio)"
                                            @update:modelValue="(v) => { setJornadaPorDiaInicio(d.value, v); previewDay = d.value; }"
                                            showIcon fluid iconDisplay="input" timeOnly hourFormat="24"
                                            :stepMinute="15" :manualInput="false" class="mac-time"
                                        >
                                            <template #inputicon="sp">
                                                <i class="pi pi-clock" @click="sp.clickCallback" />
                                            </template>
                                        </DatePicker>
                                        <span class="mac-time-row__lbl">até</span>
                                        <DatePicker
                                            :modelValue="hhmmToDate(jornadaPorDia[d.value]?.fim)"
                                            @update:modelValue="(v) => { setJornadaPorDiaFim(d.value, v); previewDay = d.value; }"
                                            showIcon fluid iconDisplay="input" timeOnly hourFormat="24"
                                            :stepMinute="15" :manualInput="false" class="mac-time"
                                        >
                                            <template #inputicon="sp">
                                                <i class="pi pi-clock" @click="sp.clickCallback" />
                                            </template>
                                        </DatePicker>
                                    </div>
                                </div>
                            </div>

                            <!-- Pausas -->
                            <div v-if="selectedDays.length > 0" class="mac-field">
                                <label class="mac-label">Pausas <span class="mac-label__opt">(opcional)</span></label>
                                <span class="mac-hint">Almoço, jantar, café — ficam fora dos slots disponíveis.</span>

                                <div v-if="jornadaIgualTodos !== false">
                                    <PausasChipsEditor v-model="pausasGlobais" />
                                </div>
                                <div v-else class="mac-pausas-by-day">
                                    <div v-for="d in selectedDays" :key="d.value">
                                        <div class="mac-pausa-day-label">{{ d.label }}</div>
                                        <PausasChipsEditor v-model="pausasPorDia[d.value]" />
                                    </div>
                                </div>
                            </div>

                            <div class="mac-card-actions">
                                <button
                                    class="mac-btn mac-btn--primary"
                                    :disabled="!jornadaOk || savingCard === 'jornada'"
                                    @click="saveJornada"
                                >
                                    <i :class="savingCard === 'jornada' ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                                    <span>Salvar jornada</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- ── Ritmo ── -->
                    <div id="mac-sec-ritmo" class="mac-w">
                        <div class="mac-w__head">
                            <div class="mac-w__icon mac-w__icon--amber"><i class="pi pi-stopwatch" /></div>
                            <div class="mac-w__title">
                                <div class="mac-w__title-text">Ritmo das sessões</div>
                                <div class="mac-w__sub">Duração e intervalo</div>
                            </div>
                        </div>

                        <div class="mac-w__body">
                            <div class="mac-field">
                                <label class="mac-label">Duração padrão</label>
                                <div class="mac-presets">
                                    <button
                                        v-for="p in durationPresets"
                                        :key="p.label"
                                        type="button"
                                        class="mac-preset"
                                        :class="{ 'is-active': isActivePreset(p) }"
                                        @click="applyDurationPreset(p)"
                                    >
                                        <span class="mac-preset__dur">{{ p.label }}</span>
                                        <span class="mac-preset__gap">
                                            {{ p.gap > 0 ? `· ${p.gap}min intervalo` : '· sem pausa' }}
                                        </span>
                                    </button>
                                    <button
                                        type="button"
                                        class="mac-preset"
                                        :class="{ 'is-active': !durationPresets.some((p) => isActivePreset(p)) }"
                                        @click="showAdvancedRitmo = true"
                                    >
                                        <span class="mac-preset__dur">Personalizar</span>
                                    </button>
                                </div>
                            </div>

                            <div v-if="showAdvancedRitmo || !durationPresets.some((p) => isActivePreset(p))" class="mac-custom">
                                <div class="mac-label">Personalizado</div>
                                <div class="mac-grid-2">
                                    <div class="mac-field">
                                        <label class="mac-label-sm">Duração</label>
                                        <DatePicker
                                            v-model="durationDate"
                                            showIcon
                                            fluid
                                            iconDisplay="input"
                                            timeOnly
                                            hourFormat="24"
                                            :stepMinute="5"
                                            :manualInput="false"
                                        >
                                            <template #inputicon="sp">
                                                <i class="pi pi-clock" @click="sp.clickCallback" />
                                            </template>
                                        </DatePicker>
                                    </div>
                                    <div class="mac-field">
                                        <label class="mac-label-sm">Intervalo</label>
                                        <DatePicker
                                            v-model="breakDate"
                                            showIcon
                                            fluid
                                            iconDisplay="input"
                                            timeOnly
                                            hourFormat="24"
                                            :stepMinute="5"
                                            :manualInput="false"
                                        >
                                            <template #inputicon="sp">
                                                <i class="pi pi-clock" @click="sp.clickCallback" />
                                            </template>
                                        </DatePicker>
                                    </div>
                                </div>
                            </div>

                            <div class="mac-card-actions">
                                <button
                                    class="mac-btn mac-btn--primary"
                                    :disabled="savingCard === 'ritmo'"
                                    @click="saveRitmo"
                                >
                                    <i :class="savingCard === 'ritmo' ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                                    <span>Salvar ritmo</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- ── Online ── -->
                    <div id="mac-sec-online" class="mac-w">
                        <div class="mac-w__head">
                            <div class="mac-w__icon mac-w__icon--green"><i class="pi pi-globe" /></div>
                            <div class="mac-w__title">
                                <div class="mac-w__title-text">Agendamento Online</div>
                                <div class="mac-w__sub">Slots disponíveis pros pacientes</div>
                            </div>
                            <Tag
                                v-if="cfg.online_ativo"
                                value="Ativo"
                                severity="success"
                            />
                            <Tag
                                v-else
                                value="Desativado"
                                severity="secondary"
                            />
                        </div>

                        <div class="mac-w__body">
                            <!-- Aviso slots órfãos -->
                            <div v-if="orphanSlotDays.length" class="mac-warn">
                                <i class="pi pi-exclamation-triangle" />
                                <span>
                                    Há slots configurados pra <b>{{ orphanSlotDays.join(', ') }}</b>,
                                    mas esses dias saíram da sua jornada. Serão removidos ao salvar.
                                </span>
                            </div>

                            <div class="mac-toggle-row">
                                <div class="mac-toggle-row__text">
                                    <div class="mac-toggle-row__label">Permitir agendamento online</div>
                                    <div class="mac-toggle-row__hint">Você escolhe quais horários ficam disponíveis.</div>
                                </div>
                                <ToggleSwitch v-model="cfg.online_ativo" />
                            </div>

                            <!-- Slots por dia -->
                            <div v-if="cfg.online_ativo && selectedDays.length" class="mac-slots-area">
                                <label class="mac-label">Escolha os horários disponíveis</label>

                                <!-- Tabs de dias -->
                                <div class="mac-day-tabs">
                                    <button
                                        v-for="d in selectedDays"
                                        :key="d.value"
                                        type="button"
                                        class="mac-day-tab"
                                        :class="{
                                            'is-active': previewDay === d.value,
                                            'has-slots': previewDay !== d.value && (onlineSlotsByDay[d.value]?.size || 0) > 0
                                        }"
                                        @click="previewDay = d.value"
                                    >{{ d.short }}</button>
                                </div>

                                <!-- Slots do dia selecionado -->
                                <div v-if="previewDay != null" class="mac-slots-day">
                                    <div v-if="(slotsByDay[previewDay] || []).length === 0" class="mac-empty-slots">
                                        Nenhum slot disponível pra este dia. Configure a jornada primeiro.
                                    </div>
                                    <div v-else>
                                        <!-- Periodos quick actions -->
                                        <div class="mac-periodos">
                                            <button
                                                v-for="p in periodos"
                                                :key="p.label"
                                                v-show="hasSlotsInPeriodo(previewDay, p)"
                                                type="button"
                                                class="mac-periodo-btn"
                                                :class="{ 'is-on': isPeriodoAtivo(previewDay, p) }"
                                                @click="togglePeriodo(previewDay, p)"
                                            >
                                                <i :class="['pi', p.icon]" />
                                                <span>{{ p.label }}</span>
                                            </button>
                                            <span class="mac-periodos__sep" />
                                            <button
                                                type="button"
                                                class="mac-periodo-btn"
                                                @click="enableAllDay(previewDay)"
                                            >
                                                <i class="pi pi-check-circle" />
                                                <span>Todos</span>
                                            </button>
                                            <button
                                                type="button"
                                                class="mac-periodo-btn"
                                                @click="clearDay(previewDay)"
                                            >
                                                <i class="pi pi-times-circle" />
                                                <span>Limpar</span>
                                            </button>
                                        </div>

                                        <!-- Slot chips -->
                                        <div class="mac-slot-chips">
                                            <button
                                                v-for="s in slotsByDay[previewDay] || []"
                                                :key="s.hhmm"
                                                type="button"
                                                class="mac-slot"
                                                :class="{ 'is-on': isSlotEnabled(previewDay, s.hhmm) }"
                                                @click="toggleSlot(previewDay, s.hhmm)"
                                            >{{ s.hhmm }}</button>
                                        </div>

                                        <div class="mac-slots-info">
                                            <i class="pi pi-info-circle" />
                                            <span>
                                                {{ onlineSlotsByDay[previewDay]?.size || 0 }} slot{{
                                                    (onlineSlotsByDay[previewDay]?.size || 0) !== 1 ? 's' : ''
                                                }} disponíveis toda
                                                {{ diasSemana.find((d) => d.value === previewDay)?.label?.toLowerCase() }}.
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-else-if="!selectedDays.length" class="mac-empty-jornada">
                                <i class="pi pi-info-circle" />
                                <span>Configure sua jornada de trabalho primeiro.</span>
                            </div>

                            <div class="mac-card-actions">
                                <button
                                    class="mac-btn mac-btn--primary"
                                    :disabled="savingCard === 'online'"
                                    @click="saveOnline"
                                >
                                    <i :class="savingCard === 'online' ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                                    <span>Salvar online</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* ═══════ Page chrome ═══════ */
.mac-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: mac-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes mac-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

.mac-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;
}
.mac-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;
}
.mac-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
.mac-page__actions { display: flex; align-items: center; gap: 6px; }

.mac-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;
}
.mac-close:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }
.mac-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;
}
.mac-menu-btn:hover { background: var(--m-bg-soft-hover); }

.mac-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;
}
.mac-subheader__icon {
    color: var(--p-primary-color);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ═══════ Body 2-col ═══════ */
.mac-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}
.mac-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;
}
.mac-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;
}
.mac-side__scroll::-webkit-scrollbar { width: 5px; }
.mac-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* Botao "Configuracoes" no topo da .mac-side. Click alterna entre
   cards (default) e lista de configs (estado is-open: vira "Voltar"). */
.mac-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;
}
.mac-cfg-btn:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mac-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);
}
.mac-cfg-btn > i:first-child {
    color: var(--p-primary-color);
    font-size: 0.92rem;
}
.mac-cfg-btn > span { flex: 1; }
.mac-cfg-btn__chev {
    color: var(--m-text-muted);
    font-size: 0.7rem;
}
.mac-side__scroll--cfg {
    padding: 8px;
    gap: 0;
}

.mac-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;
}
.mac-main::-webkit-scrollbar { width: 5px; }
.mac-main::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* Desktop (>=1024): main coluna unica. Sem cap de altura nos cards —
   cada um cresce com seu conteudo (Jornada vira maior em "Diferente
   por dia", Online expande com slots, etc). Sem scroll interno: o
   .mac-main / .mac-side__scroll fazem o scroll externo da pagina.
   flex-shrink: 0 nos cards pra eles nao serem comprimidos quando o
   total ultrapassa a altura do .mac-main — o scroll externo engata
   no lugar disso. */
.mac-main > .mac-w,
.mac-side > .mac-side__scroll > .mac-w--side {
    flex-shrink: 0;
}

/* ═══════ Card-base ═══════ */
.mac-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;
}
.mac-w--side {
    background: var(--m-bg-medium);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}
.mac-w__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--m-border);
}
.mac-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);
}
.mac-w__icon > i { font-size: 0.95rem; }
.mac-w__icon--blue  { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; }
.mac-w__icon--amber { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #f59e0b; }
.mac-w__icon--green { background: color-mix(in srgb, #10b981 15%, transparent); color: #10b981; }
.mac-w__title { flex: 1; min-width: 0; }
.mac-w__title-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.2;
}
.mac-w__sub {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.mac-w__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ═══════ Sidebar: Status items ═══════ */
.mac-status-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);
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mac-status-item:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mac-status-item__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    flex-shrink: 0;
}
.mac-status-item__icon.is-ok {
    background: rgba(16, 185, 129, 0.14);
    color: rgb(16, 185, 129);
}
.mac-status-item__icon.is-pending {
    background: rgba(245, 158, 11, 0.14);
    color: rgb(245, 158, 11);
}
.mac-status-item__text { flex: 1; min-width: 0; }
.mac-status-item__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--m-text);
}
.mac-status-item__tag {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.20);
    color: rgb(245, 158, 11);
    font-size: 0.66rem;
    font-weight: 800;
}
.mac-status-item__tag.is-ok {
    background: rgba(16, 185, 129, 0.20);
    color: rgb(16, 185, 129);
}
.mac-status-item__resumo {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mac-status-item__chev {
    color: var(--m-text-muted);
    font-size: 0.7rem;
    flex-shrink: 0;
    opacity: 0.5;
}

/* ═══════ Sidebar: FAQ ═══════ */
.mac-faq {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mac-faq__item {
    display: flex;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--m-text-muted);
    line-height: 1.4;
}
.mac-faq__item > div { flex: 1; min-width: 0; }
.mac-faq__item strong { color: var(--m-text); font-weight: 700; }
.mac-faq__bullet {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-top: 0;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: white;
    font-weight: 700;
    font-size: 0.72rem;
}

/* ═══════ Buttons ═══════ */
.mac-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;
}
.mac-btn:hover { background: var(--m-bg-soft-hover); }
.mac-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mac-btn--primary {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}
.mac-btn--primary:hover {
    background: color-mix(in srgb, var(--p-primary-color) 88%, black);
}

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

/* ═══════ Form ═══════ */
.mac-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mac-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--m-text);
}
.mac-label__opt {
    font-weight: 400;
    color: var(--m-text-muted);
    opacity: 0.7;
}
.mac-label-sm {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    font-weight: 600;
}
.mac-hint {
    font-size: 0.72rem;
    color: var(--m-text-muted);
    line-height: 1.3;
}
.mac-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* ═══════ Days chips ═══════ */
.mac-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mac-day {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 120ms ease;
}
.mac-day:hover { border-color: var(--m-border-strong); }
.mac-day.is-active {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}
.mac-day--sm {
    padding: 4px 10px;
    font-size: 0.74rem;
    cursor: default;
}

/* ═══════ Toggle igual/diferente ═══════ */
.mac-toggle-mode {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 9px;
    width: fit-content;
}
.mac-mode-btn {
    padding: 6px 14px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--m-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 120ms ease;
}
.mac-mode-btn:hover { color: var(--m-text); }
.mac-mode-btn.is-active {
    background: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}

/* ═══════ Equal mode rows ═══════ */
.mac-equals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mac-equal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    flex-wrap: wrap;
}
.mac-equal-row__chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.mac-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mac-time-row__lbl {
    font-size: 0.78rem;
    color: var(--m-text-muted);
}
.mac-time { width: 110px; }

/* ═══════ Different mode rows ═══════ */
.mac-diff {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mac-diff-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    flex-wrap: wrap;
}
.mac-diff-row__day {
    width: 36px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--m-text);
    flex-shrink: 0;
}

/* ═══════ Pausas ═══════ */
.mac-pausas-by-day {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mac-pausa-day-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

/* ═══════ Presets ritmo ═══════ */
.mac-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mac-preset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 120ms ease;
}
.mac-preset:hover { border-color: var(--m-border-strong); }
.mac-preset.is-active {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}
.mac-preset__dur { font-weight: 700; }
.mac-preset__gap {
    font-size: 0.7rem;
    opacity: 0.7;
    font-weight: 500;
}

.mac-custom {
    padding: 12px;
    border-radius: 9px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ═══════ Toggle row (online) ═══════ */
.mac-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
}
.mac-toggle-row__text { flex: 1; min-width: 0; }
.mac-toggle-row__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--m-text);
}
.mac-toggle-row__hint {
    font-size: 0.72rem;
    color: var(--m-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}

.mac-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
    color: rgb(180, 83, 9);
    font-size: 0.78rem;
    line-height: 1.4;
}
.mac-warn > i { font-size: 0.92rem; margin-top: 2px; flex-shrink: 0; }

/* ═══════ Slots ═══════ */
.mac-slots-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--m-border);
}
.mac-day-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.mac-day-tab {
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 120ms ease;
}
.mac-day-tab:hover { border-color: var(--m-border-strong); }
.mac-day-tab.is-active {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}
.mac-day-tab.has-slots {
    border-color: color-mix(in srgb, var(--p-primary-color) 50%, transparent);
}
.mac-day-tab.has-slots::after {
    content: '·';
    margin-left: 3px;
    color: var(--p-primary-color);
    font-weight: 800;
}

.mac-slots-day {
    padding: 12px;
    border-radius: 9px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mac-empty-slots {
    color: var(--m-text-muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 12px;
}

.mac-periodos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.mac-periodos__sep {
    width: 1px;
    height: 20px;
    background: var(--m-border);
    margin: 0 4px;
}
.mac-periodo-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    transition: all 120ms ease;
}
.mac-periodo-btn:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mac-periodo-btn.is-on {
    background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
    border-color: color-mix(in srgb, var(--p-primary-color) 50%, transparent);
    color: var(--p-primary-color);
}
.mac-periodo-btn > i { font-size: 0.7rem; }

.mac-slot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.mac-slot {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text-muted);
    cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    transition: all 120ms ease;
}
.mac-slot:hover { border-color: var(--m-border-strong); }
.mac-slot.is-on {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}

.mac-slots-info {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--m-text-muted);
}
.mac-slots-info > i {
    font-size: 0.78rem;
    margin-top: 2px;
    color: var(--p-primary-color);
}

.mac-empty-jornada {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-radius: 9px;
    background: var(--m-bg-medium);
    border: 1px dashed var(--m-border);
    color: var(--m-text-muted);
    font-size: 0.82rem;
}
.mac-empty-jornada > i {
    color: var(--p-primary-color);
}

/* ═══════ Mobile drawer ═══════ */
.mac-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;
}
.mac-mobile-drawer.is-open { transform: translateX(0); }
.mac-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;
}
.mac-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mac-mobile-drawer__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
/* No mobile a .mac-side e teleportada pra dentro do drawer scroll. */
.mac-mobile-drawer__scroll .mac-side {
    width: 100%;
    border-right: none;
}

.mac-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;
}
.mac-drawer-fade-enter-active,
.mac-drawer-fade-leave-active { transition: opacity 200ms ease; }
.mac-drawer-fade-enter-from,
.mac-drawer-fade-leave-to { opacity: 0; }

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