From 51c33e73b93ccf1243df6681f0f80166d83ae97c Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Thu, 21 May 2026 21:44:44 -0300
Subject: [PATCH] melissa/paciente: aba Documentos vira pagina nativa 2-col
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Antes: <DocumentsListPage embedded /> reusava o componente do
Rail/Classic em modo embed — visual conflitava com o padrao
Melissa, sem agrupamento por tipo, scroll inconsistente.

Novo: MelissaPatientDocuments.vue (componente nativo 2-col
seguindo MelissaDocumentosTemplates):
- Sidebar esquerda: tipos de documento com contadores
  (Todos, Laudo, Receita, Exame, Termo assinado, Relatorio
  externo, Identidade, Convenio, Declaracao, Atestado,
  Recibo, Outro). Item ativo destaca primary; vazios em
  opacity 50%.
- Main direita: header com titulo do tipo + count, DataView
  com cards (DocumentCard reusado), paginacao automatica >12,
  empty states distintos (global vs filtrado).
- Header da pagina: botoes Refresh / Gerar / Upload (primary
  outlined no dark-friendly).
- Mobile <1024px: sidebar vira drawer com botao "Tipos" no
  header (espelha padrao MelissaBloqueios/Templates).

Reaproveita do features/documents:
- useDocuments composable
- DocumentCard, DocumentUploadDialog, DocumentPreviewDialog,
  DocumentGenerateDialog, DocumentSignatureDialog,
  DocumentShareDialog

MelissaPaciente.vue: import DocumentsListPage -> Melissa
PatientDocuments + uso na aba.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layout/melissa/MelissaPaciente.vue        |  17 +-
 .../melissa/MelissaPatientDocuments.vue       | 699 ++++++++++++++++++
 2 files changed, 705 insertions(+), 11 deletions(-)
 create mode 100644 src/layout/melissa/MelissaPatientDocuments.vue

diff --git a/src/layout/melissa/MelissaPaciente.vue b/src/layout/melissa/MelissaPaciente.vue
index 6f4fd3e..fea097a 100644
--- a/src/layout/melissa/MelissaPaciente.vue
+++ b/src/layout/melissa/MelissaPaciente.vue
@@ -24,7 +24,7 @@ import { useToast } from 'primevue/usetoast';
 import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
 import { MELISSA_AGENDA_KEY } from './composables/useMelissaAgenda';
 import AgendaEventDialog from '@/features/agenda/components/AgendaEventDialog.vue';
-import DocumentsListPage from '@/features/documents/DocumentsListPage.vue';
+import MelissaPatientDocuments from '@/layout/melissa/MelissaPatientDocuments.vue';
 import PatientConversationsTab from '@/features/patients/prontuario/PatientConversationsTab.vue';
 import PatientCadastroDialog from '@/components/ui/PatientCadastroDialog.vue';
 import { usePatientDetail } from '@/features/patients/composables/usePatientDetail';
@@ -2092,16 +2092,11 @@ onBeforeUnmount(() => {
                                 </article>
                             </div>
 
-                            <!-- DocumentsListPage embedded (ja vem com upload/preview/lista) -->
-                            <section class="mpa-w mpa-embed">
-                                <div class="mpa-w__body mpa-embed__body">
-                                    <DocumentsListPage
-                                        :patient-id="patientId"
-                                        :patient-name="nomeCompleto || ''"
-                                        embedded
-                                    />
-                                </div>
-                            </section>
+                            <!-- Documentos nativos Melissa (2-col com tipos na sidebar) -->
+                            <MelissaPatientDocuments
+                                :patient-id="patientId"
+                                :patient-name="nomeCompleto || ''"
+                            />
                         </template>
                     </div>
 
diff --git a/src/layout/melissa/MelissaPatientDocuments.vue b/src/layout/melissa/MelissaPatientDocuments.vue
new file mode 100644
index 0000000..ceaf309
--- /dev/null
+++ b/src/layout/melissa/MelissaPatientDocuments.vue
@@ -0,0 +1,699 @@
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI — MelissaPatientDocuments
+|--------------------------------------------------------------------------
+| Página nativa Melissa pra aba "Documentos" do prontuário (substitui o
+| embed do DocumentsListPage).
+|
+| Layout 2-col (espelha MelissaDocumentosTemplates):
+|  - COL 1 (esquerda): tipos de documento como sidebar com contadores
+|  - COL 2 (direita): DataView dos documentos do tipo selecionado,
+|    com upload/preview/edit/sign/share/delete via dialogs reaproveitados
+|  - Mobile (<1024px): sidebar vira drawer (botão "Tipos" no header)
+|
+| Reaproveita do feature/documents:
+|  - useDocuments composable (fetch + CRUD + URLs)
+|  - DocumentCard pra item visual
+|  - DocumentUploadDialog / PreviewDialog / GenerateDialog /
+|    SignatureDialog / ShareDialog
+|--------------------------------------------------------------------------
+-->
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import Menu from 'primevue/menu';
+import DataView from 'primevue/dataview';
+
+import { useDocuments } from '@/features/documents/composables/useDocuments';
+import DocumentCard from '@/features/documents/components/DocumentCard.vue';
+import DocumentUploadDialog from '@/features/documents/components/DocumentUploadDialog.vue';
+import DocumentPreviewDialog from '@/features/documents/components/DocumentPreviewDialog.vue';
+import DocumentGenerateDialog from '@/features/documents/components/DocumentGenerateDialog.vue';
+import DocumentSignatureDialog from '@/features/documents/components/DocumentSignatureDialog.vue';
+import DocumentShareDialog from '@/features/documents/components/DocumentShareDialog.vue';
+
+const props = defineProps({
+    patientId: { type: String, default: null },
+    patientName: { type: String, default: '' }
+});
+
+const toast = useToast();
+const confirm = useConfirm();
+
+// ── useDocuments composable ───────────────────────────────
+const {
+    documents, loading, error, filters, usedTags, stats,
+    TIPOS_DOCUMENTO,
+    fetchDocuments, upload, update, remove,
+    download, getPreviewUrl, fetchUsedTags
+} = useDocuments(() => props.patientId);
+
+// ── Dialogs ─────────────────────────────────────────────────
+const uploadDlg = ref(false);
+const previewDlg = ref(false);
+const generateDlg = ref(false);
+const signatureDlg = ref(false);
+const shareDlg = ref(false);
+const selectedDoc = ref(null);
+const previewUrl = ref('');
+
+// ── Tipo selecionado (filtro pela sidebar) ────────────────
+// null = todos os tipos
+const selectedTipo = ref(null);
+
+const docsByTipo = computed(() => {
+    const groups = {};
+    for (const d of documents.value) {
+        const tipo = d.tipo_documento || 'outro';
+        if (!groups[tipo]) groups[tipo] = [];
+        groups[tipo].push(d);
+    }
+    return groups;
+});
+
+const tipoCounts = computed(() => {
+    const counts = {};
+    TIPOS_DOCUMENTO.forEach(t => { counts[t.value] = (docsByTipo.value[t.value] || []).length; });
+    return counts;
+});
+
+const filteredDocs = computed(() => {
+    if (!selectedTipo.value) return documents.value;
+    return docsByTipo.value[selectedTipo.value] || [];
+});
+
+function tipoLabel(tipo) {
+    return TIPOS_DOCUMENTO.find(t => t.value === tipo)?.label || tipo;
+}
+
+// ── Mobile 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; }
+function selectTipo(tipo) {
+    selectedTipo.value = tipo;
+    if (isMobile.value) drawerOpen.value = false;
+}
+
+// ── Actions ───────────────────────────────────────────────
+async function onUploaded({ file, meta }) {
+    try {
+        await upload(file, props.patientId, meta);
+        toast.add({ severity: 'success', summary: 'Enviado', detail: file.name, life: 3000 });
+        fetchUsedTags();
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro no upload', detail: e?.message });
+    }
+}
+
+async function onPreview(doc) {
+    selectedDoc.value = doc;
+    try { previewUrl.value = await getPreviewUrl(doc); }
+    catch { previewUrl.value = ''; }
+    previewDlg.value = true;
+}
+
+function onDownload(doc) { download(doc); }
+
+function onEdit(doc) {
+    selectedDoc.value = doc;
+    // Reusa preview dialog em modo "ver" — edit completo só via DocumentsListPage
+    onPreview(doc);
+}
+
+function onDelete(doc) {
+    confirm.require({
+        header: 'Excluir documento',
+        message: `Excluir "${doc.nome_original}"? Esta ação pode ser revertida no Lixo.`,
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Excluir',
+        rejectLabel: 'Cancelar',
+        acceptSeverity: 'danger',
+        accept: async () => {
+            try {
+                await remove(doc.id);
+                toast.add({ severity: 'success', summary: 'Excluído', detail: doc.nome_original, life: 3000 });
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Erro ao excluir', detail: e?.message });
+            }
+        }
+    });
+}
+
+function onShare(doc) {
+    selectedDoc.value = doc;
+    shareDlg.value = true;
+}
+function onSign(doc) {
+    selectedDoc.value = doc;
+    signatureDlg.value = true;
+}
+function onGenerated() {
+    fetchDocuments();
+    fetchUsedTags();
+}
+
+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 Promise.all([fetchDocuments(), fetchUsedTags()]);
+});
+
+onBeforeUnmount(() => {
+    if (_mqMobile) {
+        try { _mqMobile.removeEventListener('change', _onMqMobileChange); }
+        catch { _mqMobile.removeListener(_onMqMobileChange); }
+    }
+});
+</script>
+
+<template>
+    <!-- Mobile drawer (tipos) -->
+    <Transition name="mpd-drawer-fade">
+        <div
+            v-show="isMobile && drawerOpen"
+            class="mpd-mobile-drawer"
+            :class="{ 'is-open': drawerOpen }"
+        >
+            <div id="mpd-mobile-drawer-target" class="mpd-mobile-drawer__scroll" />
+        </div>
+    </Transition>
+    <Transition name="mpd-drawer-fade">
+        <div
+            v-show="isMobile && drawerOpen"
+            class="mpd-mobile-drawer__backdrop"
+            @click="fecharDrawer"
+        />
+    </Transition>
+
+    <section class="mpd-page">
+        <!-- ── HEADER ─────────────────────────────────────── -->
+        <header class="mpd-page__head">
+            <button
+                class="mpd-menu-btn mpd-menu-btn--mobile-only"
+                v-tooltip.bottom="'Tipos de documento'"
+                @click="toggleDrawer"
+            >
+                <i class="pi pi-bars" />
+                <span>Tipos</span>
+            </button>
+            <div class="mpd-page__title">
+                <i class="pi pi-file mpd-page__title-icon" />
+                <span>Documentos</span>
+                <span class="mpd-page__count">{{ documents.length }}</span>
+            </div>
+            <div class="mpd-page__actions">
+                <button
+                    class="mpd-act-btn"
+                    v-tooltip.bottom="'Atualizar'"
+                    :disabled="loading"
+                    @click="fetchDocuments"
+                >
+                    <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
+                </button>
+                <button
+                    class="mpd-act-btn"
+                    v-tooltip.bottom="'Gerar a partir de template'"
+                    :disabled="!patientId"
+                    @click="generateDlg = true"
+                >
+                    <i class="pi pi-file-pdf" />
+                    <span>Gerar</span>
+                </button>
+                <button
+                    class="mpd-act-btn mpd-act-btn--primary"
+                    v-tooltip.bottom="'Enviar arquivo'"
+                    :disabled="!patientId"
+                    @click="uploadDlg = true"
+                >
+                    <i class="pi pi-upload" />
+                    <span>Upload</span>
+                </button>
+            </div>
+        </header>
+
+        <!-- ── BODY 2-col ─────────────────────────────────── -->
+        <div class="mpd-body">
+            <!-- COL 1 — Sidebar de tipos (teleporta no mobile) -->
+            <Teleport to="#mpd-mobile-drawer-target" :disabled="!isMobile">
+            <aside class="mpd-side">
+                <div class="mpd-side__head">
+                    <i class="pi pi-folder" />
+                    <span>Tipos</span>
+                </div>
+                <ul class="mpd-side__list">
+                    <li
+                        class="mpd-side__item"
+                        :class="{ 'is-active': selectedTipo === null }"
+                        role="button"
+                        tabindex="0"
+                        @click="selectTipo(null)"
+                        @keydown.enter.prevent="selectTipo(null)"
+                    >
+                        <span class="mpd-side__item-name">Todos</span>
+                        <span class="mpd-side__item-count">{{ documents.length }}</span>
+                    </li>
+                    <li
+                        v-for="t in TIPOS_DOCUMENTO"
+                        :key="t.value"
+                        class="mpd-side__item"
+                        :class="{ 'is-active': selectedTipo === t.value, 'is-empty': tipoCounts[t.value] === 0 }"
+                        role="button"
+                        tabindex="0"
+                        @click="selectTipo(t.value)"
+                        @keydown.enter.prevent="selectTipo(t.value)"
+                    >
+                        <span class="mpd-side__item-name">{{ t.label }}</span>
+                        <span class="mpd-side__item-count">{{ tipoCounts[t.value] || 0 }}</span>
+                    </li>
+                </ul>
+            </aside>
+            </Teleport>
+
+            <!-- COL 2 — Main: lista de documentos -->
+            <main class="mpd-main">
+                <header class="mpd-main__head">
+                    <div class="mpd-main__title-row">
+                        <div class="mpd-main__title">
+                            <i class="pi pi-file" />
+                            <span>{{ selectedTipo ? tipoLabel(selectedTipo) : 'Todos os documentos' }}</span>
+                        </div>
+                        <span class="mpd-page__count">{{ filteredDocs.length }}</span>
+                    </div>
+                    <p class="mpd-main__subtitle">
+                        <template v-if="selectedTipo">
+                            Documentos do tipo <strong>{{ tipoLabel(selectedTipo) }}</strong> deste paciente.
+                        </template>
+                        <template v-else>
+                            Todos os documentos clínicos vinculados a este paciente.
+                        </template>
+                    </p>
+                </header>
+
+                <!-- Loading -->
+                <div v-if="loading && !documents.length" class="mpd-loading">
+                    <i class="pi pi-spin pi-spinner" />
+                    <span>Carregando documentos…</span>
+                </div>
+
+                <!-- Empty global -->
+                <div v-else-if="!documents.length" class="mpd-empty">
+                    <i class="pi pi-folder-open mpd-empty__icon" />
+                    <div class="mpd-empty__title">Nenhum documento ainda</div>
+                    <div class="mpd-empty__hint">
+                        Faça upload de um arquivo ou gere um documento a partir de template.
+                    </div>
+                    <div class="mpd-empty__actions">
+                        <button class="mpd-act-btn" @click="generateDlg = true">
+                            <i class="pi pi-file-pdf" /><span>Gerar template</span>
+                        </button>
+                        <button class="mpd-act-btn mpd-act-btn--primary" @click="uploadDlg = true">
+                            <i class="pi pi-upload" /><span>Upload</span>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Empty (filtrado) -->
+                <div v-else-if="!filteredDocs.length" class="mpd-empty">
+                    <i class="pi pi-filter mpd-empty__icon" />
+                    <div class="mpd-empty__title">Nenhum {{ tipoLabel(selectedTipo).toLowerCase() }} ainda</div>
+                    <div class="mpd-empty__hint">
+                        Outros tipos têm documentos —
+                        <button class="mpd-link" @click="selectTipo(null)">ver todos</button>.
+                    </div>
+                </div>
+
+                <!-- DataView -->
+                <DataView
+                    v-else
+                    :value="filteredDocs"
+                    layout="grid"
+                    :paginator="filteredDocs.length > 12"
+                    :rows="12"
+                    class="mpd-dataview"
+                >
+                    <template #grid="slotProps">
+                        <div class="mpd-grid">
+                            <DocumentCard
+                                v-for="doc in slotProps.items"
+                                :key="doc.id"
+                                :doc="doc"
+                                @preview="onPreview"
+                                @download="onDownload"
+                                @edit="onEdit"
+                                @delete="onDelete"
+                                @share="onShare"
+                                @sign="onSign"
+                            />
+                        </div>
+                    </template>
+                </DataView>
+            </main>
+        </div>
+
+        <!-- ── Dialogs reaproveitados ─────────────────────── -->
+        <DocumentUploadDialog
+            v-model:visible="uploadDlg"
+            :patient-id="patientId"
+            @uploaded="onUploaded"
+        />
+        <DocumentPreviewDialog
+            v-model:visible="previewDlg"
+            :doc="selectedDoc"
+            :preview-url="previewUrl"
+            @updated="fetchDocuments"
+        />
+        <DocumentGenerateDialog
+            v-if="patientId"
+            v-model:visible="generateDlg"
+            :patient-id="patientId"
+            :patient-name="patientName"
+            @generated="onGenerated"
+        />
+        <DocumentSignatureDialog
+            :visible="signatureDlg"
+            @update:visible="signatureDlg = $event"
+            :doc="selectedDoc"
+        />
+        <DocumentShareDialog
+            v-model:visible="shareDlg"
+            :doc="selectedDoc"
+        />
+    </section>
+</template>
+
+<style scoped>
+/* ═══════ Page chrome ═══════ */
+.mpd-page {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 14px;
+    overflow: hidden;
+    color: var(--m-text);
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+.mpd-page__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--m-border);
+    flex-shrink: 0;
+    gap: 10px;
+}
+.mpd-page__title {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1rem;
+    font-weight: 600;
+}
+.mpd-page__title-icon { color: var(--p-primary-color); font-size: 1rem; }
+.mpd-page__count {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--m-accent);
+    background: var(--m-accent-soft);
+    border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
+    padding: 2px 8px;
+    border-radius: 999px;
+}
+.mpd-page__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+
+.mpd-act-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+}
+.mpd-act-btn:hover:not(:disabled) { background: var(--m-bg-soft-hover); }
+.mpd-act-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.mpd-act-btn--primary {
+    background: transparent;
+    border-color: var(--p-primary-color);
+    color: var(--p-primary-color);
+}
+.mpd-act-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--p-primary-color) 10%, transparent); }
+.mpd-act-btn > i { font-size: 0.78rem; }
+
+.mpd-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;
+}
+.mpd-menu-btn:hover { background: var(--m-bg-soft-hover); }
+
+/* ═══════ Body 2-col ═══════ */
+.mpd-body {
+    flex: 1;
+    min-height: 0;
+    display: grid;
+    grid-template-columns: minmax(220px, 260px) 1fr;
+    gap: 12px;
+    padding: 12px;
+    overflow: hidden;
+}
+
+/* COL 1 — Sidebar */
+.mpd-side {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+}
+.mpd-side__head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--m-border);
+    font-size: 0.86rem;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+.mpd-side__head > i { color: var(--m-text-muted); font-size: 0.9rem; }
+.mpd-side__list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    margin: 0;
+    padding: 6px;
+    list-style: none;
+    scrollbar-width: thin;
+}
+.mpd-side__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px 10px;
+    background: transparent;
+    border-radius: 7px;
+    cursor: pointer;
+    font-size: 0.82rem;
+    transition: background-color 120ms ease, color 120ms ease;
+}
+.mpd-side__item:hover,
+.mpd-side__item:focus-visible {
+    background: var(--m-bg-soft-hover);
+    outline: none;
+}
+.mpd-side__item.is-active {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, var(--m-bg-medium));
+    color: var(--p-primary-color);
+    font-weight: 600;
+}
+.mpd-side__item.is-empty { opacity: 0.5; }
+.mpd-side__item-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mpd-side__item-count {
+    font-size: 0.7rem;
+    color: var(--m-text-muted);
+    background: var(--m-bg-medium);
+    padding: 2px 8px;
+    border-radius: 999px;
+    flex-shrink: 0;
+}
+.mpd-side__item.is-active .mpd-side__item-count {
+    color: var(--p-primary-color);
+    background: color-mix(in srgb, var(--p-primary-color) 18%, transparent);
+}
+
+/* COL 2 — Main */
+.mpd-main {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+}
+.mpd-main__head {
+    padding: 12px 14px 8px;
+    border-bottom: 1px solid var(--m-border);
+    flex-shrink: 0;
+}
+.mpd-main__title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+.mpd-main__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.86rem;
+    font-weight: 700;
+}
+.mpd-main__title > i { color: var(--p-primary-color); font-size: 0.9rem; }
+.mpd-main__subtitle {
+    margin: 6px 0 0;
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+    line-height: 1.45;
+}
+
+.mpd-loading,
+.mpd-empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 28px;
+    text-align: center;
+    color: var(--m-text-muted);
+    gap: 8px;
+}
+.mpd-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
+.mpd-empty__icon { font-size: 2.4rem; color: var(--m-text-faint); margin-bottom: 6px; }
+.mpd-empty__title { font-size: 0.95rem; font-weight: 600; color: var(--m-text); }
+.mpd-empty__hint { font-size: 0.82rem; max-width: 360px; line-height: 1.5; }
+.mpd-empty__actions { display: flex; gap: 8px; margin-top: 10px; }
+.mpd-link {
+    background: none; border: none; color: var(--p-primary-color);
+    cursor: pointer; padding: 0; font: inherit; text-decoration: underline;
+}
+
+.mpd-dataview {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: transparent;
+}
+.mpd-dataview :deep(.p-dataview-content) {
+    flex: 1; min-height: 0; overflow-y: auto;
+    background: transparent;
+    scrollbar-width: thin;
+}
+.mpd-dataview :deep(.p-dataview-paginator-bottom) {
+    flex-shrink: 0; background: transparent;
+    border-top: 1px solid var(--m-border);
+}
+.mpd-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+}
+
+/* ═══════ Mobile drawer ═══════ */
+.mpd-mobile-drawer {
+    position: fixed;
+    top: 0; left: 0;
+    height: 100vh; height: 100dvh;
+    width: min(320px, 86vw);
+    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);
+    display: flex;
+    flex-direction: column;
+}
+.mpd-mobile-drawer.is-open { transform: translateX(0); }
+.mpd-mobile-drawer:not(.is-open) { pointer-events: none; }
+.mpd-mobile-drawer__scroll {
+    flex: 1; min-height: 0; overflow-y: auto;
+    padding: 12px; display: flex; flex-direction: column;
+}
+.mpd-mobile-drawer__scroll .mpd-side {
+    width: 100%; height: 100%; border: 1px solid var(--m-border);
+}
+.mpd-mobile-drawer__backdrop {
+    position: fixed; inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(4px);
+    z-index: 79;
+}
+.mpd-drawer-fade-enter-active,
+.mpd-drawer-fade-leave-active { transition: opacity 200ms ease; }
+.mpd-drawer-fade-enter-from,
+.mpd-drawer-fade-leave-to { opacity: 0; }
+
+/* ═══════ Mobile (<1024px) ═══════ */
+@media (max-width: 1023px) {
+    .mpd-body {
+        grid-template-columns: 1fr;
+        overflow: hidden;
+    }
+    .mpd-body > .mpd-side { display: none; }
+    .mpd-menu-btn--mobile-only { display: inline-flex; }
+    .mpd-page__title > span:first-of-type { display: none; }
+    .mpd-page__title-icon { display: none; }
+    .mpd-act-btn span { display: none; }
+    .mpd-act-btn { width: 32px; padding: 0; justify-content: center; }
+}
+</style>