/* * Metro² brand overrides — carregado depois de /assets/css/styles.css * (bundle vendored do Metronic, nunca editado diretamente). * Ver DESIGN.md — "The Keen Stay-Out Rule" e regras de tipografia. */ :root { --primary: #192f5f; /* Midnight Navy — sobrescreve styles.css:6032 (--color-blue-500) */ --font-sans: "Poppins", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-display: "Koulen", ui-sans-serif, system-ui, sans-serif; } .dark { --primary: #192f5f; /* sobrescreve styles.css:6056 (--color-blue-600) */ } /* Palavra-marca "Metro²" / "Metro² Estandes" — só login e sidebar, nunca em parágrafo, tabela ou botão (DESIGN.md). */ .kt-brand-wordmark { font-family: var(--font-display); letter-spacing: 0.02em; } /* * Polyfill de classes Tailwind ausentes do bundle compilado. * * IMPORTANTE — styles.css é um bundle Tailwind v4 vendored (sem * tailwind.config/postcss.config/vite.config neste repo, sem build JIT deste * projeto): ele só contém as classes que já vinham prontas do tema Metronic * original — **isso vale até pra classes padrão do Tailwind sem colchetes** * (confirmado: `min-h-screen`, `p-6`, `mb-6`, `py-6`, `opacity-50`, * `cursor-not-allowed`, `sm:flex` também estavam ausentes, não só classes * com valor `[arbitrário]`). Antes de assumir que qualquer classe funciona, * rode um audit completo: * cd web/views && grep -rhoE 'class="[^"]*"' layouts/*.ejs partials/*.ejs \ * partials/modals/*.ejs pages/*.ejs | tr ' "' '\n\n' | grep -v '^$' | \ * sort -u > /tmp/classes.txt * # depois checar cada uma contra web/public/assets/css/styles.css * # (ignorar prefixo "ki-" — vem de assets/vendors/keenicons/, não daqui) * * As dimensões do CHASSI (altura do header, largura do sidebar, offset do * conteúdo) NÃO entram aqui — isso é resolvido pela classe `demo1` no * `` (ver views/layouts/app.ejs), que ativa as variáveis * --header-height/--sidebar-width e as regras `.demo1 .kt-header{...}` já * presentes no styles.css vendored (confirmado por grep — é o padrão real * do tema, não um workaround nosso). Este bloco cobre spacing/tamanho/ * utilitários de componentes menores que o `demo1` não resolve. * * Cada seletor abaixo é o nome literal da classe usada nas views — mantém o * HTML como Tailwind idiomático, só supre a regra que o bundle não gerou. */ .min-h-screen { min-height: 100vh; } .p-6 { padding: 1.5rem; } .mb-6 { margin-bottom: 1.5rem; } .py-6 { padding-block: 1.5rem; } .opacity-50 { opacity: 0.5; } .cursor-not-allowed { cursor: not-allowed; } .kt-badge-circle { border-radius: calc(infinity * 1px); } @media (min-width: 640px) { .sm\:flex { display: flex; } } .gap-\[10px\] { gap: 10px; } .max-h-\[28px\] { max-height: 28px; } .max-h-\[48px\] { max-height: 48px; } .max-w-\[200px\] { max-width: 200px; } .max-w-\[400px\] { max-width: 400px; } .max-w-\[440px\] { max-width: 440px; } /* Modais de catálogo com muitos campos (item, modelo de orçamento). */ .max-w-\[640px\] { max-width: 640px; } .max-w-\[720px\] { max-width: 720px; } /* Memorial descritivo do pacote: preserva as quebras de linha digitadas. */ .whitespace-pre-line { white-space: pre-line; } .pe-\[10px\] { padding-inline-end: 10px; } .ps-\[10px\] { padding-inline-start: 10px; } .px-\[10px\] { padding-inline: 10px; } .py-\[8px\] { padding-block: 8px; } .size-\[30px\] { width: 30px; height: 30px; } .w-\[20px\] { width: 20px; } @media (min-width: 1024px) { .lg\:\[--kt-drawer-enable\:false\] { --kt-drawer-enable: false; } .lg\:top-\[20\%\] { top: 20%; } /* Modais longos das telas de evento (participação, KVA, evento). */ .lg\:top-\[8\%\] { top: 8%; } .lg\:top-\[10\%\] { top: 10%; } .lg\:top-\[5\%\] { top: 5%; } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Mobile/tablet: sidebar vira drawer; conteúdo usa largura total */ @media (max-width: 1023px) { .demo1.kt-sidebar-fixed .kt-wrapper { padding-inline-start: 0 !important; } .demo1.kt-sidebar-fixed.kt-header-fixed .kt-header { inset-inline-start: 0 !important; } #sidebar { transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 40; } #sidebar.open { transform: translateX(0); } } /* * Ícone dentro de campo de busca (toolbar de listagem). * * Não dá pra usar a utilitária `.absolute` do Tailwind (styles.css) num * elemento `ki-*`: `keenicons/styles.bundle.css` define `.ki-filled`/ * `.ki-duotone`/etc como `position: relative` FORA de qualquer `@layer` — * por regra de cascata do CSS, uma declaração sem layer sempre vence * qualquer declaração dentro de um `@layer` nomeado (o caso de `styles.css`, * que declara `@layer theme, base, components, utilities;`), não importa a * ordem ou especificidade. Resultado sem este fix: o ícone fica com * `position: relative` (não `absolute`), continua ocupando espaço no fluxo * normal, empurra o `` pra baixo e infla a altura da linha da * toolbar (desalinhando os botões/selects vizinhos, que têm altura normal). * Esta classe está no MESMO arquivo (metro2-theme.css, carregado por * último, também sem layer) — mesma prioridade "sem layer", então a * declaração mais recente no cascade (esta) vence por ordem de fonte. */ .kt-input-icon { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; } /* * Listagens: scroll horizontal da tabela fica dentro do card, não na página. * Flex items usam min-width:auto por padrão — conteúdo largo estica toda a * cadeia (body → wrapper → card) e gera barra de scroll no documento. */ body.flex > .flex.grow { min-width: 0; max-width: 100%; } .demo1 .kt-wrapper, #content_container, #content_wrapper { min-width: 0; max-width: 100%; } .kt-card { min-width: 0; max-width: 100%; } .kt-card > .kt-scrollable-x-auto { width: 100%; min-width: 0; max-width: 100%; } /* Resumo de linha visível só em mobile (colunas extras ficam ocultas) */ .metro2-mobile-meta { display: none; margin-top: 0.375rem; } /* Listagens — layout mobile (< 768px) */ @media (max-width: 767px) { #content_wrapper { padding-inline: 1rem; } #content_wrapper > .flex.flex-col.gap-5.py-6 { padding-block: 1rem; gap: 1rem; } .kt-card:has(.metro2-listagem-toolbar) .kt-card-header, .kt-card:has(.metro2-listagem-toolbar) .kt-card-footer { padding-inline: 1rem; } /* Toolbar empilhada */ .metro2-listagem-toolbar { flex-direction: column; align-items: stretch; padding-block: 1rem; gap: 0.75rem; } .metro2-listagem-toolbar-form { flex-direction: column; align-items: stretch; gap: 0.75rem; } .metro2-listagem-toolbar-search { flex-basis: 100%; min-width: 0 !important; max-width: none !important; } .metro2-listagem-toolbar-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; } .metro2-listagem-toolbar-filtros:has(.metro2-listagem-toolbar-select:only-child) { grid-template-columns: 1fr; } .metro2-listagem-toolbar-select { width: 100% !important; } .metro2-listagem-toolbar-acoes { width: 100%; } .metro2-listagem-toolbar-acoes .kt-btn { flex: 1 1 0; justify-content: center; } .metro2-listagem-toolbar-criar { width: 100%; justify-content: center; } /* Paginação empilhada */ .metro2-listagem-footer { flex-direction: column; align-items: stretch; gap: 0.75rem; padding-block: 1rem; } .metro2-listagem-footer-limite, .metro2-listagem-footer-paginas, .metro2-listagem-footer-total { justify-content: center; text-align: center; width: 100%; } /* Tabela compacta — só coluna principal + ações */ .metro2-col-mobile-hide, .metro2-col-secundaria { display: none; } .metro2-mobile-meta { display: flex; } .kt-card:has(.metro2-listagem-toolbar) .kt-scrollable-x-auto { overflow-x: visible; } .kt-card:has(.metro2-listagem-toolbar) .kt-table { width: 100%; table-layout: fixed; } .kt-card:has(.metro2-listagem-toolbar) .kt-table th, .kt-card:has(.metro2-listagem-toolbar) .kt-table td { min-width: 0 !important; padding-inline: 0.5rem; } .kt-card:has(.metro2-listagem-toolbar) .kt-table .metro2-col-principal { width: auto; } .kt-card:has(.metro2-listagem-toolbar) .kt-table .w-16 { width: 2.25rem; } } /* * Barras de distribuição do painel (views/pages/dashboard.ejs). A largura vem * do `percentual` da API via dmx-style:width. Navy por padrão; âmbar (Signal * Amber, destaque operacional) para "aguardando cliente"; verde para concluído; * cinza para reprovado/cancelado. */ .metro2-barra { height: 0.5rem; border-radius: 9999px; background: var(--muted); overflow: hidden; } .metro2-barra-valor { height: 100%; width: 0; border-radius: 9999px; background: var(--primary); transition: width 0.3s ease; } .metro2-barra-valor--alerta { background: #ff931e; } .metro2-barra-valor--sucesso { background: var(--color-green-500); } .metro2-barra-valor--neutra { background: var(--muted-foreground); opacity: 0.45; } /* Painel: card que ocupa a linha inteira do grid quando o vizinho some (perfil sem orçamentos). */ .metro2-painel-linha-inteira { grid-column: 1 / -1; } /* * Texto longo em célula de tabela (ex.: nome do evento na lista de * orçamentos): até 2 linhas e reticências depois; o nome completo vai no * atributo title do elemento. */ .metro2-texto-2-linhas { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 16rem; overflow-wrap: anywhere; } /* * Select pesquisável (KTSelect): o bundle não limita a altura da lista, e com * o catálogo inteiro ela passava do fim da tela dentro dos modais. */ .kt-select-dropdown [data-kt-select-options] { max-height: 18rem; overflow-y: auto; }