agenciapsilmno/src/layout/melissa/MelissaDocumentos.vue

<script setup>
/*
 * MelissaDocumentos — Página nativa Melissa pra listagem de documentos
 * (substitui o embed via MelissaEmbed que duplicava headers).
 *
 * Aplica o blueprint melissa-table-page-blueprint.md:
 *   - Sidebar com stats + filtros (Tipo / Tag) com Selects + footer
 *     fixo "Limpar filtros"
 *   - Main com toolbar (busca) + lista de DocumentCard preservada
 *
 * Modo "todos os pacientes" — patientId é null. Upload/gerar requer
 * abrir um paciente específico via /melissa/pacientes (atualmente
 * desabilitados aqui). Lista é read-only nesse contexto.
 */
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';

import { useDocuments } from '@/features/documents/composables/useDocuments';
import DocumentCard from '@/features/documents/components/DocumentCard.vue';
import DocumentPreviewDialog from '@/features/documents/components/DocumentPreviewDialog.vue';
import DocumentSignatureDialog from '@/features/documents/components/DocumentSignatureDialog.vue';
import DocumentShareDialog from '@/features/documents/components/DocumentShareDialog.vue';
// Select/InputText/Skeleton/Button/Dialog: auto via PrimeVueResolver

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

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

// ── Breakpoints + drawer mobile ────────────────────────
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; }

// patientId = null → modo "todos os pacientes" (read-only).
const patientId = computed(() => null);

const {
    documents, loading, error, filters, usedTags, stats,
    TIPOS_DOCUMENTO,
    fetchDocuments, remove,
    download, getPreviewUrl, fetchUsedTags, clearFilters,
    formatSize
} = useDocuments(() => patientId.value);

// ── Dialogs ────────────────────────────────────────────
const previewDlg = ref(false);
const signatureDlg = ref(false);
const shareDlg = ref(false);
const selectedDoc = ref(null);
const previewUrl = ref('');

// ── Filtros computeds ──────────────────────────────────
const hasActiveFilter = computed(() =>
    !!(filters.value.tipo_documento || filters.value.tag || filters.value.search)
);

function clearAllFilters() {
    clearFilters();
    fetchDocuments();
}

const tagOptions = computed(() =>
    usedTags.value.map((t) => ({ label: t, value: t }))
);

// ── Acoes nas rows ─────────────────────────────────────
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() {
    toast.add({ severity: 'info', summary: 'Em breve', detail: 'Edição de metadados será implementada.', life: 2000 });
}

function onDelete(doc) {
    confirm.require({
        message: `Excluir "${doc.nome_original}"? O arquivo será retido por 5 anos conforme LGPD/CFP.`,
        header: 'Confirmar exclusão',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try {
                await remove(doc.id);
                toast.add({ severity: 'success', summary: 'Excluído', detail: doc.nome_original, life: 2000 });
            } catch (e) {
                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
            }
        }
    });
}

function onShare(doc) {
    selectedDoc.value = doc;
    shareDlg.value = true;
}

function onSign(doc) {
    selectedDoc.value = doc;
    signatureDlg.value = true;
}

// ── Watch filtros (refetch automático) ─────────────────
watch(filters, () => fetchDocuments(), { deep: true });

onMounted(async () => {
    if (typeof window !== 'undefined' && window.matchMedia) {
        _mqMobile = window.matchMedia('(max-width: 1023px)');
        isMobile.value = _mqMobile.matches;
        _mqMobile.addEventListener('change', _onMqMobileChange);
    }
    await Promise.all([fetchDocuments(), fetchUsedTags()]);
});
onBeforeUnmount(() => {
    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
});
</script>

<template>
    <ConfirmDialog />

    <!-- Drawer host (mobile) -->
    <aside
        class="md-mobile-drawer"
        :class="{ 'is-open': drawerOpen }"
        v-show="isMobile"
        aria-label="Estatísticas e filtros"
    >
        <div id="md-mobile-drawer-target" class="md-mobile-drawer__scroll" />
    </aside>
    <Transition name="md-drawer-fade">
        <div
            v-if="isMobile && drawerOpen"
            class="md-mobile-drawer__backdrop"
            @click="fecharDrawer"
        />
    </Transition>

    <section class="md-page">
        <header class="md-page__head">
            <button
                class="md-menu-btn md-menu-btn--mobile-only"
                v-tooltip.bottom="'Estatísticas & filtros'"
                @click="toggleDrawer"
            >
                <i class="pi pi-bars" />
                <span>Menu Documentos</span>
            </button>
            <div class="md-page__title">
                <i class="pi pi-file md-page__title-icon" />
                <span>Documentos</span>
                <span class="md-page__count">{{ documents.length }}</span>
            </div>
            <div class="md-page__actions">
                <button
                    class="md-head-btn"
                    v-tooltip.bottom="'Atualizar'"
                    :disabled="loading"
                    @click="fetchDocuments"
                >
                    <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
                </button>
                <button class="md-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
                    <i class="pi pi-times" />
                </button>
            </div>
        </header>

        <!-- Subheader -->
        <div class="md-subheader">
            <i class="pi pi-info-circle md-subheader__icon" />
            <span class="md-subheader__text">
                Documentos clínicos da clínica — laudos, receitas, exames, termos
                assinados. Pra <strong>upload</strong> ou <strong>gerar</strong>
                novos, abra o paciente específico no prontuário.
            </span>
        </div>

        <div class="md-body">
            <!-- ═══ COL 1: Stats + filtros ═══ -->
            <Teleport to="#md-mobile-drawer-target" :disabled="!isMobile">
            <aside class="md-side">
                <div class="md-side__scroll">
                    <!-- Stats -->
                    <div class="md-w md-w--side">
                        <div class="md-w__head">
                            <span class="md-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
                        </div>
                        <div class="md-stats">
                            <div class="md-stat">
                                <div class="md-stat__val">{{ stats.total }}</div>
                                <div class="md-stat__lbl">Total</div>
                            </div>
                            <div class="md-stat">
                                <div class="md-stat__val">{{ formatSize(stats.tamanhoTotal) }}</div>
                                <div class="md-stat__lbl">Tamanho</div>
                            </div>
                            <div class="md-stat">
                                <div class="md-stat__val">{{ Object.keys(stats.porTipo).length }}</div>
                                <div class="md-stat__lbl">Tipos</div>
                            </div>
                            <div class="md-stat" :class="stats.pendentesRevisao ? 'is-warn' : ''">
                                <div class="md-stat__val">{{ stats.pendentesRevisao || 0 }}</div>
                                <div class="md-stat__lbl">Pendentes</div>
                            </div>
                        </div>
                    </div>

                    <!-- Filtro Tipo -->
                    <div class="md-w md-w--side">
                        <div class="md-w__head">
                            <span class="md-w__title"><i class="pi pi-filter" /> Tipo</span>
                            <button
                                v-if="filters.tipo_documento"
                                class="md-side__clear-inline"
                                v-tooltip.top="'Limpar filtro de tipo'"
                                @click="filters.tipo_documento = null"
                            >
                                <i class="pi pi-times" />
                            </button>
                        </div>
                        <Select
                            v-model="filters.tipo_documento"
                            :options="TIPOS_DOCUMENTO"
                            optionLabel="label"
                            optionValue="value"
                            placeholder="Todos os tipos"
                            class="w-full md-side__select"
                            showClear
                        />
                    </div>

                    <!-- Filtro Tag -->
                    <div v-if="usedTags.length" class="md-w md-w--side">
                        <div class="md-w__head">
                            <span class="md-w__title"><i class="pi pi-tag" /> Tag</span>
                            <button
                                v-if="filters.tag"
                                class="md-side__clear-inline"
                                v-tooltip.top="'Limpar filtro de tag'"
                                @click="filters.tag = null"
                            >
                                <i class="pi pi-times" />
                            </button>
                        </div>
                        <Select
                            v-model="filters.tag"
                            :options="tagOptions"
                            optionLabel="label"
                            optionValue="value"
                            placeholder="Todas as tags"
                            class="w-full md-side__select"
                            showClear
                        />
                    </div>
                </div>

                <Transition name="md-clear">
                    <div v-if="hasActiveFilter" class="md-side__footer">
                        <button class="md-side__clear-all" @click="clearAllFilters">
                            <i class="pi pi-filter-slash" />
                            <span>Limpar filtros</span>
                        </button>
                    </div>
                </Transition>
            </aside>
            </Teleport>

            <!-- ═══ COL 2: Lista ═══ -->
            <div class="md-main">
                <div class="md-toolbar">
                    <div class="md-search">
                        <i class="pi pi-search md-search__icon" />
                        <input
                            v-model="filters.search"
                            type="text"
                            placeholder="Buscar por nome, descrição ou tag…"
                            class="md-search__input"
                        />
                        <button
                            v-if="filters.search"
                            class="md-search__clear"
                            v-tooltip.bottom="'Limpar busca'"
                            @click="filters.search = ''"
                        >
                            <i class="pi pi-times" />
                        </button>
                    </div>
                </div>

                <!-- Erro -->
                <div v-if="error" class="md-error">
                    <i class="pi pi-exclamation-triangle" />
                    <span>{{ error }}</span>
                </div>

                <!-- Lista -->
                <div class="md-list">
                    <!-- Loading -->
                    <div v-if="loading" class="md-loading">
                        <i class="pi pi-spin pi-spinner" />
                        <span>Carregando documentos…</span>
                    </div>

                    <!-- Empty -->
                    <div v-else-if="!documents.length" class="md-empty">
                        <i :class="hasActiveFilter ? 'pi pi-filter-slash' : 'pi pi-folder-open'" class="md-empty__icon" />
                        <div class="md-empty__title">
                            {{ hasActiveFilter ? 'Nenhum documento encontrado' : 'Nenhum documento ainda' }}
                        </div>
                        <div class="md-empty__hint">
                            {{ hasActiveFilter
                                ? 'Limpe os filtros ou ajuste a busca pra ver outros resultados.'
                                : 'Quando algum paciente tiver documentos cadastrados, eles aparecem aqui.' }}
                        </div>
                    </div>

                    <!-- Cards -->
                    <div v-else class="md-cards">
                        <DocumentCard
                            v-for="doc in documents"
                            :key="doc.id"
                            :doc="doc"
                            @preview="onPreview"
                            @download="onDownload"
                            @edit="onEdit"
                            @delete="onDelete"
                            @share="onShare"
                            @sign="onSign"
                        />
                    </div>
                </div>
            </div>
        </div>

        <!-- Dialogs comuns -->
        <DocumentPreviewDialog
            :visible="previewDlg"
            @update:visible="previewDlg = $event"
            :doc="selectedDoc"
            :previewUrl="previewUrl"
            @download="onDownload"
            @edit="onEdit"
            @delete="(d) => { previewDlg = false; onDelete(d); }"
            @share="(d) => { previewDlg = false; onShare(d); }"
            @sign="(d) => { previewDlg = false; onSign(d); }"
        />
        <DocumentSignatureDialog :visible="signatureDlg" @update:visible="signatureDlg = $event" :doc="selectedDoc" />
        <DocumentShareDialog :visible="shareDlg" @update:visible="shareDlg = $event" :doc="selectedDoc" />
    </section>
</template>

<style scoped>
/* ─── Page chrome ─── */
.md-page {
    position: absolute;
    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 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: md-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes md-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

.md-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;
}
.md-page__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 500;
}
.md-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
.md-page__title > span:not(.md-page__count) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-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;
}
.md-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.md-close, .md-head-btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 140ms ease;
}
.md-close:hover, .md-head-btn:hover { background: var(--m-bg-soft-hover); }
.md-head-btn > i { font-size: 0.85rem; }
.md-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Subheader */
.md-subheader {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    font-size: 0.78rem;
    color: var(--m-text-muted);
    line-height: 1.45;
    flex-shrink: 0;
}
.md-subheader__icon { color: var(--p-primary-color); font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
.md-subheader__text { flex: 1; min-width: 0; }
.md-subheader__text strong { color: var(--m-text); font-weight: 600; }

/* Body */
.md-body {
    flex: 1;
    display: flex;
    min-height: 0;
    gap: 0;
    padding: 0;
}

/* ─── Sidebar ─── */
.md-side {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-soft);
    border-right: 1px solid var(--m-border);
    overflow: hidden;
}
.md-side__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.md-side__scroll::-webkit-scrollbar { width: 5px; }
.md-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

.md-side__footer {
    flex-shrink: 0;
    padding: 12px;
    background: var(--m-bg-soft);
    border-top: 1px solid var(--m-border);
}
.md-side__clear-all {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.md-side__clear-all:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.md-side__clear-all > i {
    font-size: 0.78rem;
    color: var(--m-text-muted);
}

.md-side__clear-inline {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
    color: rgb(220, 38, 38);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.md-side__clear-inline:hover {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.55);
}
.md-side__clear-inline > i { font-size: 0.6rem; }

.md-clear-enter-active,
.md-clear-leave-active {
    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
    overflow: hidden;
}
.md-clear-enter-from, .md-clear-leave-to {
    opacity: 0; transform: translateY(6px); max-height: 0;
}
.md-clear-enter-to, .md-clear-leave-from {
    opacity: 1; transform: translateY(0); max-height: 80px;
}

.md-w {
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    padding: 12px;
}
.md-w--side {
    margin: 12px 12px 0;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.md-w--side:last-of-type { margin-bottom: 12px; }
.md-w__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.md-w__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--m-text-muted);
    font-weight: 600;
}
.md-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }

.md-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.md-stat {
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-radius: 10px;
    padding: 8px 10px;
}
.md-stat__val {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--m-text);
}
.md-stat__lbl {
    font-size: 0.62rem;
    color: var(--m-text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.md-stat.is-warn .md-stat__val { color: rgb(217, 119, 6); }

.md-side__select :deep(.p-select) {
    width: 100%;
    background: var(--m-bg-soft);
    border-radius: 9px;
    height: 36px;
}

/* ─── Main ─── */
.md-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 10px;
}

.md-toolbar {
    flex-shrink: 0;
}
.md-search {
    position: relative;
    display: flex;
    align-items: center;
}
.md-search__icon {
    position: absolute;
    left: 12px;
    color: var(--m-text-muted);
    font-size: 0.78rem;
    pointer-events: none;
}
.md-search__input {
    width: 100%;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    padding: 9px 36px 9px 34px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 140ms ease;
}
.md-search__input::placeholder { color: var(--m-text-faint); }
.md-search__input:focus { border-color: var(--m-border-strong); }
.md-search__clear {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    color: var(--m-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 140ms ease;
}
.md-search__clear:hover {
    background: var(--m-bg-soft-hover);
    color: var(--m-text);
}
.md-search__clear > i { font-size: 0.7rem; }

.md-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(220, 38, 38, 0.10);
    border: 1px solid rgba(220, 38, 38, 0.30);
    border-radius: 10px;
    color: rgb(220, 38, 38);
    font-size: 0.82rem;
    flex-shrink: 0;
}

.md-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--m-border);
    border-radius: 10px;
    background: transparent;
}
.md-list::-webkit-scrollbar { width: 5px; }
.md-list::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

.md-loading,
.md-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 28px;
    text-align: center;
    color: var(--m-text-muted);
    gap: 8px;
    flex: 1;
}
.md-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
.md-empty__icon {
    font-size: 2rem;
    color: var(--m-text-faint);
    margin-bottom: 4px;
}
.md-empty__title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--m-text);
}
.md-empty__hint { font-size: 0.78rem; max-width: 340px; }

.md-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

/* ─── Botão Menu mobile (abre drawer com sidebar) ─── */
.md-menu-btn {
    display: none;
    height: 32px;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--m-accent);
    border: 1px solid var(--m-accent);
    color: white;
    padding: 0 11px;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color 140ms ease, transform 140ms ease;
}
.md-menu-btn:hover {
    background: color-mix(in srgb, var(--m-accent) 88%, white);
    transform: translateY(-1px);
}
.md-menu-btn > i { font-size: 0.85rem; }

/* ─── Drawer mobile ─── */
.md-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;
}
.md-mobile-drawer.is-open { transform: translateX(0); }
.md-mobile-drawer__scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.md-mobile-drawer__scroll .md-side {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: transparent;
    border-right: none;
    display: flex;
    flex-direction: column;
}
.md-mobile-drawer__scroll .md-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;
}
.md-mobile-drawer__scroll .md-side__scroll::-webkit-scrollbar { width: 5px; }
.md-mobile-drawer__scroll .md-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
.md-mobile-drawer__scroll .md-w--side {
    margin: 0;
    flex-shrink: 0;
}
.md-mobile-drawer__scroll .md-w--side:last-of-type { margin-bottom: 0; }
.md-mobile-drawer__scroll .md-side__footer {
    flex-shrink: 0;
    margin: 0;
    padding: 12px;
    background: var(--m-bg-medium);
    border-top: 1px solid var(--m-border);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

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

/* ─── Mobile (<1024px) ─── */
@media (max-width: 1023px) {
    .md-body { flex-direction: column; padding: 0; }
    .md-main { width: 100%; padding: 8px; }
    .md-page__title > span:first-of-type { display: none; }
    .md-page__title-icon { display: none; }
    .md-menu-btn--mobile-only { display: inline-flex; }
}
</style>