Leonardo
c6105df98a
Badges .mdt-section__count.is-info e .is-accent tinham o mesmo problema do botao primary: bg solido com texto branco/cor primary quebrava o contraste no modo escuro (texto sumia). Trocados pelo .mdt-page__count (mesmo estilo do badge no header da pagina) — usa var(--m-accent-soft) que adapta ao tema. Tambem removido o CSS .mdt-section__count (e .is-info / .is-accent) que ficou orfao. Visual: numero do contador (17 globais, N tenant) com o mesmo estilo do "17" no header — consistencia visual + dark mode safe. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1298 lines
44 KiB
Vue
1298 lines
44 KiB
Vue
<script setup>
|
|
/*
|
|
* MelissaDocumentosTemplates — Página nativa Melissa pros templates de
|
|
* documentos (substitui o embed). 3 views: list / create / edit.
|
|
*
|
|
* Layout 1-col empilhado (sem sidebar — separação global/tenant é visual
|
|
* via cards distintos).
|
|
*
|
|
* Lógica idêntica à DocumentTemplatesPage (composable
|
|
* useDocumentTemplates + DocumentTemplateEditor reusado).
|
|
*/
|
|
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { useConfirm } from 'primevue/useconfirm';
|
|
|
|
import { useDocumentTemplates } from '@/features/documents/composables/useDocumentTemplates';
|
|
import DocumentTemplateEditor from '@/features/documents/components/DocumentTemplateEditor.vue';
|
|
// Button/Menu/Skeleton: auto via PrimeVueResolver
|
|
import Menu from 'primevue/menu';
|
|
import DataView from 'primevue/dataview';
|
|
|
|
const emit = defineEmits(['close']);
|
|
const toast = useToast();
|
|
const confirm = useConfirm();
|
|
|
|
const {
|
|
templates, loading,
|
|
globalTemplates, tenantTemplates,
|
|
TIPOS_TEMPLATE,
|
|
fetchTemplates, create, update, remove, duplicate
|
|
} = useDocumentTemplates();
|
|
|
|
// ── Views: list | create | edit | preview ───────────────
|
|
const view = ref('list');
|
|
const editingTemplate = ref({});
|
|
const editingId = ref(null);
|
|
|
|
// Preview de template global (somente leitura) — abre antes de duplicar
|
|
// para o usuário ler o conteúdo. Inclui botão "Duplicar" no header.
|
|
const previewTemplate = ref(null);
|
|
|
|
// ── Acoes ───────────────────────────────────────────────
|
|
function openCreate() {
|
|
editingId.value = null;
|
|
editingTemplate.value = {};
|
|
view.value = 'create';
|
|
}
|
|
|
|
function openEdit(tpl) {
|
|
if (tpl.is_global) {
|
|
toast.add({
|
|
severity: 'warn',
|
|
summary: 'Somente leitura',
|
|
detail: 'Templates padrão não podem ser editados. Duplique para personalizar.',
|
|
life: 3000
|
|
});
|
|
return;
|
|
}
|
|
editingId.value = tpl.id;
|
|
editingTemplate.value = { ...tpl };
|
|
view.value = 'edit';
|
|
}
|
|
|
|
// Preview de template do sistema — leitura + botão Duplicar.
|
|
// Clique na sidebar de templates do sistema cai aqui em vez de
|
|
// duplicar direto.
|
|
function openPreview(tpl) {
|
|
previewTemplate.value = tpl;
|
|
view.value = 'preview';
|
|
// No mobile, fecha o drawer pra dar espaço ao preview
|
|
if (isMobile.value) drawerOpen.value = false;
|
|
}
|
|
|
|
// Monta HTML completo do template (cabeçalho + corpo + rodapé) com
|
|
// estilos básicos pra preview legível dentro do iframe.
|
|
const previewHtml = computed(() => {
|
|
const tpl = previewTemplate.value;
|
|
if (!tpl) return '';
|
|
const cabecalho = tpl.cabecalho_html || '';
|
|
const corpo = tpl.corpo_html || '';
|
|
const rodape = tpl.rodape_html || '';
|
|
return `<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
@page { size: A4; margin: 20mm 15mm 25mm 15mm; }
|
|
body {
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
font-size: 12pt;
|
|
line-height: 1.6;
|
|
color: #1a1a1a;
|
|
background: #ffffff;
|
|
padding: 32px;
|
|
margin: 0;
|
|
}
|
|
h2 { font-size: 16pt; margin-bottom: 16px; }
|
|
h3 { font-size: 13pt; margin-top: 20px; margin-bottom: 8px; }
|
|
p { margin: 8px 0; }
|
|
table { border-collapse: collapse; width: 100%; }
|
|
td { padding: 4px 8px; }
|
|
hr { border: none; border-top: 1px solid #333; }
|
|
ul, ol { margin: 8px 0; padding-left: 24px; }
|
|
.doc-header { text-align: center; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid #ccc; }
|
|
.doc-footer { margin-top: 40px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 10pt; color: #666; text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
${cabecalho ? `<div class="doc-header">${cabecalho}</div>` : ''}
|
|
<div class="doc-content">${corpo}</div>
|
|
${rodape ? `<div class="doc-footer">${rodape}</div>` : ''}
|
|
</body>
|
|
</html>`;
|
|
});
|
|
|
|
async function onSave(payload) {
|
|
try {
|
|
if (view.value === 'create') {
|
|
await create(payload);
|
|
toast.add({ severity: 'success', summary: 'Criado', detail: payload.nome_template, life: 3000 });
|
|
} else {
|
|
await update(editingId.value, payload);
|
|
toast.add({ severity: 'success', summary: 'Salvo', detail: payload.nome_template, life: 3000 });
|
|
}
|
|
view.value = 'list';
|
|
fetchTemplates(true);
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
|
}
|
|
}
|
|
|
|
function onDuplicate(tpl) {
|
|
confirm.require({
|
|
message: `Deseja copiar "${tpl.nome_template}" para os seus templates? Você poderá editá-lo livremente.`,
|
|
header: 'Duplicar template',
|
|
icon: 'pi pi-copy',
|
|
acceptLabel: 'Copiar',
|
|
rejectLabel: 'Cancelar',
|
|
accept: async () => {
|
|
try {
|
|
await duplicate(tpl.id);
|
|
toast.add({ severity: 'success', summary: 'Duplicado', detail: `"${tpl.nome_template}" copiado para Seus documentos.`, life: 3000 });
|
|
// Se veio do preview, volta pra list pra mostrar o novo template no main
|
|
if (view.value === 'preview') {
|
|
view.value = 'list';
|
|
previewTemplate.value = null;
|
|
}
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function onDelete(tpl) {
|
|
confirm.require({
|
|
message: `Desativar template "${tpl.nome_template}"?`,
|
|
header: 'Confirmar',
|
|
icon: 'pi pi-exclamation-triangle',
|
|
accept: async () => {
|
|
try {
|
|
await remove(tpl.id);
|
|
toast.add({ severity: 'success', summary: 'Desativado', life: 2000 });
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function onCancel() {
|
|
view.value = 'list';
|
|
}
|
|
|
|
function tipoLabel(tipo) {
|
|
return TIPOS_TEMPLATE.find((t) => t.value === tipo)?.label || tipo;
|
|
}
|
|
|
|
// Formata as variáveis do template como string "{{nome}}, {{outra}}…"
|
|
// (helper externo — evita conflito de {{ }} aninhado no template Vue)
|
|
function formatVarsPreview(vars, max = 5) {
|
|
if (!Array.isArray(vars) || !vars.length) return '';
|
|
const open = '{';
|
|
const close = '}';
|
|
return vars.slice(0, max).map((v) => `${open}${open}${v}${close}${close}`).join(', ');
|
|
}
|
|
|
|
// ── Card menu (templates do tenant) ─────────────────────
|
|
function getCardMenuItems(tpl) {
|
|
const items = [
|
|
{ label: 'Duplicar', icon: 'pi pi-copy', command: () => onDuplicate(tpl) }
|
|
];
|
|
if (!tpl.is_global) {
|
|
items.push(
|
|
{ label: 'Editar', icon: 'pi pi-pencil', command: () => openEdit(tpl) },
|
|
{ separator: true },
|
|
{ label: 'Desativar', icon: 'pi pi-trash', class: 'text-red-500', command: () => onDelete(tpl) }
|
|
);
|
|
}
|
|
return items;
|
|
}
|
|
|
|
// ── Mobile drawer (espelha padrão MelissaBloqueios) ─────
|
|
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; }
|
|
|
|
onMounted(() => {
|
|
fetchTemplates(true);
|
|
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); }
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (_mqMobile) {
|
|
try { _mqMobile.removeEventListener('change', _onMqMobileChange); }
|
|
catch { _mqMobile.removeListener(_onMqMobileChange); }
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Mobile drawer (templates do sistema) -->
|
|
<Transition name="mdt-drawer-fade">
|
|
<div
|
|
v-show="isMobile && drawerOpen"
|
|
class="mdt-mobile-drawer"
|
|
:class="{ 'is-open': drawerOpen }"
|
|
>
|
|
<div id="mdt-mobile-drawer-target" class="mdt-mobile-drawer__scroll" />
|
|
</div>
|
|
</Transition>
|
|
<Transition name="mdt-drawer-fade">
|
|
<div
|
|
v-show="isMobile && drawerOpen"
|
|
class="mdt-mobile-drawer__backdrop"
|
|
@click="fecharDrawer"
|
|
/>
|
|
</Transition>
|
|
|
|
<!-- ConfirmDialog global mora no MelissaLayout — montar aqui causava
|
|
callback duplicado (dois listeners pro mesmo require) -->
|
|
|
|
<section class="mdt-page">
|
|
<header class="mdt-page__head">
|
|
<!-- Botão "Menu" mobile-only (vira título no mobile, abre drawer com templates do sistema) -->
|
|
<button
|
|
v-if="view === 'list' || view === 'preview'"
|
|
class="mdt-menu-btn mdt-menu-btn--mobile-only"
|
|
v-tooltip.bottom="'Templates do sistema'"
|
|
@click="toggleDrawer"
|
|
>
|
|
<i class="pi pi-bars" />
|
|
<span>Templates do sistema</span>
|
|
</button>
|
|
<div class="mdt-page__title">
|
|
<button
|
|
v-if="view !== 'list'"
|
|
class="mdt-back-btn"
|
|
v-tooltip.bottom="'Voltar à lista'"
|
|
@click="view = 'list'"
|
|
>
|
|
<i class="pi pi-arrow-left" />
|
|
</button>
|
|
<i v-else class="pi pi-file-edit mdt-page__title-icon" />
|
|
<span>
|
|
<template v-if="view === 'list'">Templates de documentos</template>
|
|
<template v-else-if="view === 'create'">Novo template</template>
|
|
<template v-else-if="view === 'edit'">Editar template</template>
|
|
<template v-else-if="view === 'preview'">Visualizar template</template>
|
|
</span>
|
|
<span v-if="view === 'list'" class="mdt-page__count">{{ templates.length }}</span>
|
|
</div>
|
|
<div class="mdt-page__actions">
|
|
<template v-if="view === 'list'">
|
|
<button
|
|
class="mdt-act-btn mdt-act-btn--primary"
|
|
v-tooltip.bottom="'Criar novo template personalizado'"
|
|
@click="openCreate"
|
|
>
|
|
<i class="pi pi-plus" />
|
|
<span>Novo template</span>
|
|
</button>
|
|
<button
|
|
class="mdt-head-btn"
|
|
v-tooltip.bottom="'Atualizar'"
|
|
:disabled="loading"
|
|
@click="fetchTemplates(true)"
|
|
>
|
|
<i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
class="mdt-act-btn"
|
|
@click="view = 'list'"
|
|
>
|
|
<i class="pi pi-times" />
|
|
<span>Cancelar</span>
|
|
</button>
|
|
<button
|
|
class="mdt-act-btn mdt-act-btn--primary"
|
|
@click="onSave(editingTemplate)"
|
|
>
|
|
<i class="pi pi-check" />
|
|
<span>{{ view === 'create' ? 'Criar template' : 'Salvar' }}</span>
|
|
</button>
|
|
</template>
|
|
<button class="mdt-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
|
|
<i class="pi pi-times" />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Subheader -->
|
|
<div v-if="view === 'list'" class="mdt-subheader">
|
|
<i class="pi pi-info-circle mdt-subheader__icon" />
|
|
<span class="mdt-subheader__text">
|
|
Modelos reutilizáveis pra <strong>declarações</strong>,
|
|
<strong>atestados</strong>, <strong>recibos</strong> e outros documentos.
|
|
Templates padrão são <strong>somente leitura</strong> — duplique pra
|
|
personalizar.
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="mdt-body">
|
|
<!-- ══ LIST + PREVIEW VIEWS — sidebar do sistema sempre presente ══ -->
|
|
<template v-if="view === 'list' || view === 'preview'">
|
|
<!-- Loading -->
|
|
<div v-if="loading && !templates.length" class="mdt-loading">
|
|
<i class="pi pi-spin pi-spinner" />
|
|
<span>Carregando templates…</span>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div v-else-if="!templates.length" class="mdt-empty">
|
|
<i class="pi pi-file-edit mdt-empty__icon" />
|
|
<div class="mdt-empty__title">Nenhum template encontrado</div>
|
|
<div class="mdt-empty__hint">Crie seu primeiro template personalizado.</div>
|
|
<button class="mdt-act-btn mdt-act-btn--primary mdt-empty__btn" @click="openCreate">
|
|
<i class="pi pi-plus" />
|
|
<span>Criar primeiro template</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ══ Layout 2-col: sidebar (globais) + main (do tenant) ══ -->
|
|
<div v-else class="mdt-cols">
|
|
<!-- ─── COL 1 — Sidebar: Templates do sistema (teleporta pro drawer no mobile) ─── -->
|
|
<Teleport to="#mdt-mobile-drawer-target" :disabled="!isMobile">
|
|
<aside class="mdt-side">
|
|
<header class="mdt-side__head">
|
|
<div class="mdt-side__title">
|
|
<i class="pi pi-shield" />
|
|
<span>Templates do sistema</span>
|
|
</div>
|
|
<span class="mdt-page__count">{{ globalTemplates.length }}</span>
|
|
</header>
|
|
<p class="mdt-side__subtitle">Modelos padrão da plataforma. Clique pra duplicar e personalizar.</p>
|
|
|
|
<div v-if="!globalTemplates.length" class="mdt-side__empty">
|
|
<i class="pi pi-info-circle" />
|
|
<span>Sem templates do sistema disponíveis.</span>
|
|
</div>
|
|
|
|
<ul v-else class="mdt-side__list">
|
|
<li
|
|
v-for="tpl in globalTemplates"
|
|
:key="tpl.id"
|
|
class="mdt-side__item"
|
|
:class="{ 'is-active': view === 'preview' && previewTemplate?.id === tpl.id }"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="openPreview(tpl)"
|
|
@keydown.enter.prevent="openPreview(tpl)"
|
|
>
|
|
<span class="mdt-side__item-icon">
|
|
<i class="pi pi-file" />
|
|
</span>
|
|
<div class="mdt-side__item-main">
|
|
<div class="mdt-side__item-name">{{ tpl.nome_template }}</div>
|
|
<div class="mdt-side__item-tipo">{{ tipoLabel(tpl.tipo) }}</div>
|
|
<div v-if="tpl.descricao" class="mdt-side__item-desc">{{ tpl.descricao }}</div>
|
|
</div>
|
|
<i class="pi pi-eye mdt-side__item-action" v-tooltip.left="'Visualizar'" />
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</Teleport>
|
|
|
|
<!-- ─── COL 2 — Main: Seus documentos OU Preview do sistema ─── -->
|
|
<main class="mdt-main">
|
|
<!-- ── HEADER: muda conforme view ── -->
|
|
<header class="mdt-main__head">
|
|
<template v-if="view === 'list'">
|
|
<div class="mdt-main__title-row">
|
|
<div class="mdt-main__title">
|
|
<i class="pi pi-user-edit" />
|
|
<span>Seus documentos</span>
|
|
</div>
|
|
<span class="mdt-page__count">{{ tenantTemplates.length }}</span>
|
|
</div>
|
|
<p class="mdt-main__subtitle">
|
|
Templates personalizados da sua clínica. Crie do zero ou duplique um modelo do sistema.
|
|
</p>
|
|
</template>
|
|
<template v-else-if="view === 'preview' && previewTemplate">
|
|
<div class="mdt-main__title-row">
|
|
<div class="mdt-main__title">
|
|
<i class="pi pi-eye mdt-main__title-icon-eye" />
|
|
<span>{{ previewTemplate.nome_template }}</span>
|
|
</div>
|
|
<div class="mdt-preview-actions">
|
|
<button class="mdt-act-btn" @click="view = 'list'">
|
|
<i class="pi pi-arrow-left" />
|
|
<span>Voltar</span>
|
|
</button>
|
|
<button class="mdt-act-btn mdt-act-btn--primary" @click="onDuplicate(previewTemplate)">
|
|
<i class="pi pi-copy" />
|
|
<span>Duplicar pra meus templates</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="mdt-main__subtitle">
|
|
<strong>{{ tipoLabel(previewTemplate.tipo) }}</strong>
|
|
<span v-if="previewTemplate.descricao"> · {{ previewTemplate.descricao }}</span>
|
|
</p>
|
|
</template>
|
|
</header>
|
|
|
|
<!-- ── PREVIEW VIEW: iframe com o template renderizado ── -->
|
|
<div v-if="view === 'preview' && previewTemplate" class="mdt-preview-wrap">
|
|
<iframe
|
|
:srcdoc="previewHtml"
|
|
class="mdt-preview-iframe"
|
|
sandbox="allow-same-origin"
|
|
title="Pré-visualização do template"
|
|
/>
|
|
<div v-if="previewTemplate.variaveis?.length" class="mdt-preview-vars">
|
|
<i class="pi pi-info-circle" />
|
|
<span>
|
|
Este template usa {{ previewTemplate.variaveis.length }} variável(eis):
|
|
<code>{{ formatVarsPreview(previewTemplate.variaveis, 5) }}</code>
|
|
<span v-if="previewTemplate.variaveis.length > 5"> e +{{ previewTemplate.variaveis.length - 5 }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── LIST VIEW: empty ou grid ── -->
|
|
<div v-else-if="!tenantTemplates.length" class="mdt-main__empty">
|
|
<i class="pi pi-file-edit mdt-main__empty-icon" />
|
|
<div class="mdt-main__empty-title">Nenhum template personalizado ainda</div>
|
|
<div class="mdt-main__empty-hint">
|
|
Clique em "Novo template" no topo da página ou duplique um modelo do sistema na coluna ao lado.
|
|
</div>
|
|
<button class="mdt-act-btn mdt-act-btn--primary mdt-main__empty-btn" @click="openCreate">
|
|
<i class="pi pi-plus" />
|
|
<span>Criar primeiro template</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- DataView dos templates do tenant — paginação + layout grid -->
|
|
<DataView
|
|
v-else
|
|
:value="tenantTemplates"
|
|
layout="grid"
|
|
:paginator="tenantTemplates.length > 12"
|
|
:rows="12"
|
|
class="mdt-dataview"
|
|
>
|
|
<template #grid="slotProps">
|
|
<div class="mdt-grid">
|
|
<div
|
|
v-for="tpl in slotProps.items"
|
|
:key="tpl.id"
|
|
class="mdt-card mdt-card--tenant"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="openEdit(tpl)"
|
|
@keydown.enter.prevent="openEdit(tpl)"
|
|
>
|
|
<div class="mdt-card__head">
|
|
<span class="mdt-card__icon mdt-card__icon--primary">
|
|
<i class="pi pi-file-edit" />
|
|
</span>
|
|
<div class="mdt-card__main">
|
|
<div class="mdt-card__name">{{ tpl.nome_template }}</div>
|
|
<div class="mdt-card__tipo">{{ tipoLabel(tpl.tipo) }}</div>
|
|
<div v-if="tpl.descricao" class="mdt-card__desc">{{ tpl.descricao }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu de ações -->
|
|
<div class="mdt-card__menu" @click.stop>
|
|
<Button
|
|
icon="pi pi-ellipsis-v"
|
|
text
|
|
rounded
|
|
size="small"
|
|
class="!w-7 !h-7 mdt-card__menu-btn"
|
|
@click.stop="$refs[`menu_${tpl.id}`]?.[0]?.toggle($event)"
|
|
/>
|
|
<Menu
|
|
:ref="`menu_${tpl.id}`"
|
|
:model="getCardMenuItems(tpl)"
|
|
:popup="true"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mdt-card__foot">
|
|
<span v-if="!tpl.ativo" class="mdt-card__badge mdt-card__badge--inactive">
|
|
inativo
|
|
</span>
|
|
<span class="mdt-card__vars">
|
|
< {{ tpl.variaveis?.length || 0 }} variáveis >
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</DataView>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ══ CREATE / EDIT VIEW ══ -->
|
|
<template v-if="view === 'create' || view === 'edit'">
|
|
<DocumentTemplateEditor
|
|
v-model="editingTemplate"
|
|
:mode="view"
|
|
@save="onSave"
|
|
@cancel="onCancel"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* ─── Page chrome ─── */
|
|
.mdt-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: mdt-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
|
|
}
|
|
@keyframes mdt-page-enter {
|
|
from { opacity: 0; transform: scale(0.985); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.mdt-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;
|
|
}
|
|
.mdt-page__title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
.mdt-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
|
|
.mdt-page__title > span:not(.mdt-page__count) {
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.mdt-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;
|
|
}
|
|
|
|
.mdt-back-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;
|
|
}
|
|
.mdt-back-btn:hover { background: var(--m-bg-soft-hover); }
|
|
.mdt-back-btn > i { font-size: 0.85rem; }
|
|
|
|
.mdt-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
|
|
|
.mdt-close, .mdt-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;
|
|
}
|
|
.mdt-close:hover, .mdt-head-btn:hover { background: var(--m-bg-soft-hover); }
|
|
.mdt-head-btn > i { font-size: 0.85rem; }
|
|
.mdt-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
.mdt-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, transform 140ms ease;
|
|
background: var(--m-bg-soft);
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text);
|
|
}
|
|
.mdt-act-btn:hover { background: var(--m-bg-soft-hover); }
|
|
/* Estilo outlined: borda primary + texto primary + bg transparente.
|
|
Resolve problema do modo escuro onde bg primary deixava o texto
|
|
ilegível (cor primary clara contra texto branco). */
|
|
.mdt-act-btn--primary {
|
|
background: transparent;
|
|
border-color: var(--p-primary-color);
|
|
color: var(--p-primary-color);
|
|
}
|
|
.mdt-act-btn--primary:hover {
|
|
background: color-mix(in srgb, var(--p-primary-color) 10%, transparent);
|
|
transform: translateY(-1px);
|
|
}
|
|
.mdt-act-btn--primary > i { color: var(--p-primary-color); }
|
|
.mdt-act-btn > i { font-size: 0.78rem; }
|
|
|
|
/* Subheader */
|
|
.mdt-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;
|
|
}
|
|
.mdt-subheader__icon { color: var(--p-primary-color); font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
|
|
.mdt-subheader__text { flex: 1; min-width: 0; }
|
|
.mdt-subheader__text strong { color: var(--m-text); font-weight: 600; }
|
|
|
|
/* Body (container externo — fica em flex pra acomodar 2-col body OU editor full) */
|
|
.mdt-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ─── Layout 2-col: sidebar (sistema) + main (do tenant) ─── */
|
|
.mdt-cols {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 360px) 1fr;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
overflow: hidden;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.mdt-cols {
|
|
grid-template-columns: 1fr;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
/* ── COL 1: Sidebar (templates do sistema) ── */
|
|
.mdt-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;
|
|
}
|
|
.mdt-side__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 12px 14px 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
.mdt-side__title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.86rem;
|
|
font-weight: 700;
|
|
color: var(--m-text);
|
|
}
|
|
.mdt-side__title > i {
|
|
font-size: 0.9rem;
|
|
color: var(--m-text-muted);
|
|
}
|
|
.mdt-side__subtitle {
|
|
margin: 0 14px 8px;
|
|
font-size: 0.74rem;
|
|
color: var(--m-text-muted);
|
|
line-height: 1.45;
|
|
flex-shrink: 0;
|
|
}
|
|
.mdt-side__empty {
|
|
padding: 24px 14px;
|
|
text-align: center;
|
|
color: var(--m-text-muted);
|
|
font-size: 0.78rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.mdt-side__empty > i { font-size: 1.4rem; color: var(--m-text-faint); }
|
|
|
|
.mdt-side__list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 4px 8px 12px;
|
|
margin: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--m-border-strong) transparent;
|
|
}
|
|
.mdt-side__list::-webkit-scrollbar { width: 5px; }
|
|
.mdt-side__list::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
|
|
|
|
.mdt-side__item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 10px 10px;
|
|
background: var(--m-bg-medium);
|
|
border: 1px solid var(--m-border);
|
|
border-radius: 9px;
|
|
color: var(--m-text);
|
|
cursor: pointer;
|
|
transition: background-color 140ms ease, border-color 140ms ease;
|
|
}
|
|
.mdt-side__item:hover,
|
|
.mdt-side__item:focus-visible {
|
|
background: var(--m-bg-soft-hover);
|
|
border-color: var(--p-primary-color);
|
|
outline: none;
|
|
}
|
|
.mdt-side__item.is-active {
|
|
background: color-mix(in srgb, var(--p-primary-color) 12%, var(--m-bg-medium));
|
|
border-color: var(--p-primary-color);
|
|
}
|
|
.mdt-side__item.is-active .mdt-side__item-action {
|
|
opacity: 1;
|
|
}
|
|
.mdt-side__item-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: color-mix(in srgb, rgb(37, 99, 235) 14%, transparent);
|
|
color: rgb(37, 99, 235);
|
|
border-radius: 7px;
|
|
flex-shrink: 0;
|
|
font-size: 0.85rem;
|
|
}
|
|
.mdt-side__item-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
.mdt-side__item-name {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: var(--m-text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.mdt-side__item-tipo {
|
|
font-size: 0.66rem;
|
|
color: var(--m-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.mdt-side__item-desc {
|
|
font-size: 0.72rem;
|
|
color: var(--m-text-muted);
|
|
margin-top: 3px;
|
|
line-height: 1.4;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.mdt-side__item-action {
|
|
flex-shrink: 0;
|
|
color: var(--m-text-faint);
|
|
font-size: 0.78rem;
|
|
opacity: 0;
|
|
transition: opacity 140ms ease;
|
|
}
|
|
.mdt-side__item:hover .mdt-side__item-action {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ── COL 2: Main (Seus documentos) ── */
|
|
.mdt-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;
|
|
}
|
|
.mdt-main__head {
|
|
padding: 12px 14px 8px;
|
|
border-bottom: 1px solid var(--m-border);
|
|
flex-shrink: 0;
|
|
}
|
|
.mdt-main__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
.mdt-main__title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.86rem;
|
|
font-weight: 700;
|
|
color: var(--m-text);
|
|
}
|
|
.mdt-main__title > i {
|
|
font-size: 0.9rem;
|
|
color: var(--p-primary-color);
|
|
}
|
|
.mdt-main__subtitle {
|
|
margin: 6px 0 0;
|
|
font-size: 0.74rem;
|
|
color: var(--m-text-muted);
|
|
line-height: 1.45;
|
|
}
|
|
.mdt-main__empty {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 56px 28px;
|
|
text-align: center;
|
|
color: var(--m-text-muted);
|
|
gap: 8px;
|
|
}
|
|
.mdt-main__empty-icon { font-size: 2.4rem; color: var(--m-text-faint); margin-bottom: 6px; }
|
|
.mdt-main__empty-title { font-size: 0.95rem; font-weight: 600; color: var(--m-text); }
|
|
.mdt-main__empty-hint { font-size: 0.82rem; max-width: 360px; line-height: 1.5; }
|
|
.mdt-main__empty-btn { margin-top: 10px; }
|
|
|
|
.mdt-main .mdt-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
padding: 12px;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* DataView wrapper — preenche o main e quebra em paginator/grid */
|
|
.mdt-dataview {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
.mdt-dataview :deep(.p-dataview-content) {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
background: transparent;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--m-border-strong) transparent;
|
|
}
|
|
.mdt-dataview :deep(.p-dataview-content)::-webkit-scrollbar { width: 5px; }
|
|
.mdt-dataview :deep(.p-dataview-content)::-webkit-scrollbar-thumb {
|
|
background: var(--m-border-strong);
|
|
border-radius: 3px;
|
|
}
|
|
.mdt-dataview :deep(.p-dataview-paginator-bottom) {
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
border-top: 1px solid var(--m-border);
|
|
}
|
|
|
|
/* ── Preview de template do sistema ── */
|
|
.mdt-preview-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
.mdt-preview-wrap {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
overflow: hidden;
|
|
background: #f4f4f4;
|
|
}
|
|
.mdt-preview-iframe {
|
|
flex: 1;
|
|
min-height: 0;
|
|
width: 100%;
|
|
border: none;
|
|
background: #ffffff;
|
|
}
|
|
.mdt-preview-vars {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
background: var(--m-bg-soft);
|
|
border-top: 1px solid var(--m-border);
|
|
color: var(--m-text-muted);
|
|
font-size: 0.74rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.mdt-preview-vars > i { color: var(--p-primary-color); flex-shrink: 0; }
|
|
.mdt-preview-vars code {
|
|
font-family: 'JetBrains Mono', 'Consolas', monospace;
|
|
background: var(--m-bg-medium);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
color: var(--p-primary-color);
|
|
}
|
|
|
|
/* Loading + Empty */
|
|
.mdt-loading,
|
|
.mdt-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;
|
|
}
|
|
.mdt-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
|
|
.mdt-empty__icon { font-size: 2.2rem; color: var(--m-text-faint); margin-bottom: 4px; }
|
|
.mdt-empty__title { font-size: 0.95rem; font-weight: 600; color: var(--m-text); }
|
|
.mdt-empty__hint { font-size: 0.82rem; }
|
|
.mdt-empty__btn { margin-top: 8px; }
|
|
|
|
/* ─── Section (cards de templates) ─── */
|
|
.mdt-section {
|
|
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);
|
|
}
|
|
.mdt-section__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--m-border);
|
|
}
|
|
.mdt-section__title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
color: var(--m-text);
|
|
}
|
|
.mdt-section__title > i {
|
|
font-size: 0.92rem;
|
|
color: var(--m-text-muted);
|
|
}
|
|
/* .mdt-section__count removido — substituido por .mdt-page__count
|
|
(mesmo estilo do header, evita conflito de contraste no dark mode) */
|
|
|
|
.mdt-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 10px;
|
|
padding: 12px;
|
|
}
|
|
|
|
/* Card de template (global ou tenant) */
|
|
.mdt-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 14px;
|
|
background: var(--m-bg-medium);
|
|
border: 1px solid var(--m-border);
|
|
border-radius: 10px;
|
|
color: var(--m-text);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
/* Acomoda titulo em ate 3 linhas + tipo + descricao 2 linhas + foot */
|
|
max-height: 240px;
|
|
overflow: hidden;
|
|
transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
|
|
}
|
|
.mdt-card:hover {
|
|
background: var(--m-bg-soft-hover);
|
|
border-color: var(--p-primary-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
.mdt-card:focus-visible {
|
|
outline: 2px solid var(--p-primary-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.mdt-card__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
.mdt-card__icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 9px;
|
|
flex-shrink: 0;
|
|
font-size: 1rem;
|
|
}
|
|
.mdt-card__icon--info {
|
|
background: color-mix(in srgb, rgb(37, 99, 235) 15%, transparent);
|
|
color: rgb(37, 99, 235);
|
|
}
|
|
.mdt-card__icon--primary {
|
|
background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
|
|
color: var(--p-primary-color);
|
|
}
|
|
.mdt-card__main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.mdt-card__name {
|
|
font-size: 0.92rem;
|
|
font-weight: 600;
|
|
color: var(--m-text);
|
|
line-height: 1.3;
|
|
/* Permite quebrar em até 3 linhas se o nome for longo */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-word;
|
|
}
|
|
.mdt-card__tipo {
|
|
font-size: 0.72rem;
|
|
color: var(--m-text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
.mdt-card__desc {
|
|
font-size: 0.72rem;
|
|
color: var(--m-text-muted);
|
|
line-height: 1.5;
|
|
margin-top: 6px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
opacity: 0.85;
|
|
}
|
|
.mdt-card__badge {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.mdt-card__badge--info {
|
|
background: color-mix(in srgb, rgb(37, 99, 235) 18%, transparent);
|
|
color: rgb(37, 99, 235);
|
|
}
|
|
.mdt-card__badge--inactive {
|
|
background: rgba(220, 38, 38, 0.15);
|
|
color: rgb(220, 38, 38);
|
|
}
|
|
.mdt-card__hint {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 0.7rem;
|
|
color: var(--m-text-muted);
|
|
opacity: 0;
|
|
transition: opacity 140ms ease;
|
|
margin-top: auto;
|
|
}
|
|
.mdt-card:hover .mdt-card__hint { opacity: 1; }
|
|
.mdt-card__hint > i { font-size: 0.7rem; }
|
|
|
|
.mdt-card__menu {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
opacity: 0;
|
|
transition: opacity 140ms ease;
|
|
}
|
|
.mdt-card:hover .mdt-card__menu { opacity: 1; }
|
|
|
|
.mdt-card__foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: auto;
|
|
padding-top: 8px;
|
|
}
|
|
.mdt-card__vars {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
color: var(--p-primary-color);
|
|
font-family: 'JetBrains Mono', 'Consolas', monospace;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* Botão 3-pontos do menu do card — cor primary */
|
|
.mdt-card__menu-btn:deep(.p-button-icon) {
|
|
color: var(--p-primary-color) !important;
|
|
}
|
|
.mdt-card__menu-btn:hover:deep(.p-button-icon) {
|
|
color: var(--p-primary-color) !important;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Ícone eye do header de preview — cor primary */
|
|
.mdt-main__title-icon-eye {
|
|
color: var(--p-primary-color) !important;
|
|
}
|
|
|
|
/* ═══════ Botão "Menu" mobile-only (abre drawer com templates do sistema) ═══════ */
|
|
.mdt-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;
|
|
}
|
|
.mdt-menu-btn:hover { background: var(--m-bg-soft-hover); }
|
|
|
|
/* ═══════ Mobile drawer (templates do sistema teleportados) ═══════ */
|
|
.mdt-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;
|
|
}
|
|
.mdt-mobile-drawer.is-open { transform: translateX(0); }
|
|
.mdt-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;
|
|
}
|
|
.mdt-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
|
|
.mdt-mobile-drawer__scroll::-webkit-scrollbar-thumb {
|
|
background: var(--m-border-strong);
|
|
border-radius: 3px;
|
|
}
|
|
/* No mobile a .mdt-side é teleportada pra dentro do drawer scroll */
|
|
.mdt-mobile-drawer__scroll .mdt-side {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid var(--m-border);
|
|
}
|
|
|
|
.mdt-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;
|
|
}
|
|
.mdt-drawer-fade-enter-active,
|
|
.mdt-drawer-fade-leave-active { transition: opacity 200ms ease; }
|
|
.mdt-drawer-fade-enter-from,
|
|
.mdt-drawer-fade-leave-to { opacity: 0; }
|
|
|
|
/* ═══════ Mobile (<1024px) — ajustes ═══════ */
|
|
@media (max-width: 1023px) {
|
|
/* Esconde a sidebar inline (templates do sistema viram drawer) */
|
|
.mdt-cols {
|
|
grid-template-columns: 1fr;
|
|
overflow: hidden;
|
|
}
|
|
.mdt-cols > .mdt-side { display: none; }
|
|
|
|
/* Mostra botão Menu, esconde título canônico (vira sub-info) */
|
|
.mdt-menu-btn--mobile-only { display: inline-flex; }
|
|
.mdt-page__title > span:not(.mdt-page__count) { display: none; }
|
|
.mdt-page__title-icon { display: none; }
|
|
.mdt-page__count { display: none; }
|
|
|
|
/* Compacta botões de ação */
|
|
.mdt-act-btn span { display: none; }
|
|
.mdt-act-btn { width: 32px; padding: 0; justify-content: center; }
|
|
.mdt-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|