/* =================================================================== VCOSTABLE — identidade visual sobre o Tabler (Onda 1 da migração) Camada fina por cima do tabler.min.css: só variáveis de cor/tipografia e o rail de marca. Nunca carrega na mesma página que vcostable-chat.css (AdminLTE) — ver core/ConfigView.php (parâmetro 'layout'). =================================================================== */ :root, [data-bs-theme="light"] { /* Root FICA em 16px (padrão do navegador) — nunca escalar isso. Escalar o root escalaria também as dimensões estruturais fixas (largura do sidebar, ícones, avatar, teto de largura), que são proporção de layout, não tipografia — e quebraria a proporção entre texto e caixa (foi exatamente o bug da tentativa anterior). A alavanca certa é o TOKEN de tamanho base que o Tabler já usa nos componentes (body, table, .fs-base): era 0.875rem (14px) — deliberadamente compacto — subo pra 1rem (16px, igual ao Bootstrap 4/AdminLTE antigo, que nunca mexia no root). */ font-size: 16px; --tblr-body-font-size: 1rem; /* Paleta VCOSTA — proposta, a confirmar (ver plano de migração) */ --vc-navy: #0F2A43; --vc-navy-600: #173C5E; --vc-teal: #0FA3A3; --vc-teal-600: #0C8585; --vc-ink: #3D3D3D; --vc-muted: #6B7280; --vc-bg: #F4F6F9; --vc-surface: #FFFFFF; --vc-border: #E3E7EE; /* Reaproveita os tokens de estado já usados no restante da plataforma */ --vc-success: #1F9D55; --vc-warning: #C98B00; --vc-danger: #D63B3B; /* Amarra a paleta VCOSTA nas variáveis que o Tabler/Bootstrap 5 usam de verdade */ --tblr-primary: var(--vc-navy); --tblr-primary-rgb: 15, 42, 67; --tblr-body-bg: var(--vc-bg); --tblr-body-color: var(--vc-ink); --tblr-border-color: var(--vc-border); --tblr-success: var(--vc-success); --tblr-warning: var(--vc-warning); --tblr-danger: var(--vc-danger); } [data-bs-theme="dark"] { /* Modo escuro: não é a paleta clara invertida — navy vira o fundo estrutural (rail/header ficam mais escuros que o conteúdo, dando profundidade) e o teal ganha um tom mais claro pra manter contraste sobre fundo escuro. */ --vc-navy: #0A1929; --vc-teal: #2DD4D4; --vc-teal-600: #22B8B8; --vc-ink: #E7EAF0; --vc-muted: #9AA5B4; --vc-bg: #12161F; --vc-surface: #1A2030; --vc-border: #2A3244; --tblr-primary: var(--vc-teal); --tblr-primary-rgb: 45, 212, 212; --tblr-body-bg: var(--vc-bg); --tblr-body-color: var(--vc-ink); --tblr-border-color: var(--vc-border); } /* --tblr-body-font-size cobre só 3 regras no tabler.min.css: body, table e .fs-base — form-control/form-label/form-select/.page-pretitle são valores fixos (.875rem/.75rem) escritos direto na regra, sem token por trás (só .btn tem token próprio: --tblr-btn-font-size). Pra esses, sobrescrevo a classe puxada, mesmo princípio (nunca o root), só que sem token disponível. */ .form-control, .form-label, .form-select { font-size: 1rem; } .page-pretitle { font-size: 0.875rem; } /* era .75rem (12px) — usado no _page_header.php */ /* A integração dataTables.bootstrap5 aplica form-control-sm/form-select-sm de fábrica na busca e no "Mostrar N" — bate com a convenção "nunca -sm" (a escala do Tabler assume 14px pro -sm; a nossa base é 16px). Aceitar criaria uma ilha inconsistente: só o campo de busca do DataTables menor que todo o resto da plataforma. Correção mora no NOSSO CSS, não no plugin — nunca editar os arquivos vendorizados. Especificidade calculada antes de escrever: a regra real do Tabler é ".form-control-sm{font-size:.75rem;...}" / ".form-select-sm{...}" — um seletor de UMA classe (0-1-0) cada. Bastava então compor com MAIS uma classe pra vencer garantido, sem depender de ordem de carregamento — ".dataTables_wrapper .form-control-sm" (0-2-0). Valores replicados são os mesmos da regra base .form-control/.form-select (não-sm), pra ficar idêntico a qualquer outro campo da tela. */ .dataTables_wrapper .form-control-sm { font-size: 1rem; padding: .5625rem 1rem; height: auto; min-height: 0; border-radius: var(--tblr-border-radius); } .dataTables_wrapper .form-select-sm { font-size: 1rem; padding: .5625rem 3rem .5625rem 1rem; height: auto; min-height: 0; border-radius: var(--tblr-border-radius); } /* O plugin Buttons sempre embrulha o(s) botão(ões) num .btn-group, mesmo com um único botão (nosso caso: só "Exportar Excel"). A regra real do Tabler ".btn-group>.btn{flex:1 1 auto}" (combinador de filho, 0-2-0) estica esse botão único pra ocupar toda a largura livre da linha — vira uma faixa larga em vez de um botão de ícone. Precisa de MAIS uma classe pra vencer garantido: ".dataTables_wrapper .dt-buttons.btn-group>.btn" (0-3-0), restaurando o tamanho natural do botão de ícone. */ .dataTables_wrapper .dt-buttons.btn-group > .btn { flex: 0 0 auto; } /* "Meu desempenho" — reforço visual discreto ao contador subir (sem confete, sem som). Duplicado de .vc-desemp-pulso (vcostable-chat.css, AdminLTE) — não movido de lá porque outras telas AdminLTE ainda podem usar aquele arquivo; aqui a cor usa o token do tema (--tblr-primary-rgb) em vez de um azul fixo, pra funcionar igual no escuro. */ @keyframes vc-desemp-brilho { 0% { box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), .35); } 60% { box-shadow: 0 0 0 8px rgba(var(--tblr-primary-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), 0); } } .vc-desemp-pulso { animation: vc-desemp-brilho .7s ease-out; } /* ---- Tipografia — Barlow (corpo) + Barlow Condensed (títulos/display) ---- */ body { font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif; /* Medido: 22.857px no Tabler vs 24px no AdminLTE (1.5) — alinhado aqui. */ line-height: 1.5; } /* .btn-sm sobrescreve --tblr-btn-font-size pra 0.75rem (12px) — por isso o "Salvar" media 12px/28px contra 14px/31px do AdminLTE (única divergência real da comparação medida). Restaura o tamanho do botão base. */ .btn { --tblr-btn-font-size: 1rem; padding: 0.5rem 1rem; } h1, h2, h3, h4, h5, h6, .vc-t-display, .card-title, .page-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: .01em; } .vc-t-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 0.8125rem; /* 13px @ root de 16px — era 11.5px, tamanho novo deliberado */ color: var(--vc-muted); } /* ---- Estrutura da página: a estrutura REAL do Tabler ---------------------- .page > aside.navbar.navbar-vertical + .page-wrapper > .page-header/.page-body (cada um com seu próprio .container-xl, que já tem teto e centraliza). 5ª causa raiz da mesma família: um .vc-app/.vc-content flex customizado (nosso, não do Tabler) fazia o container-xl centralizado parecer quebrado dentro de um flex-item — daí vieram 3 tentativas de reinventar o teto (1600px, 1100px, .vc-form-page). Nenhuma era necessária: container-xl do próprio Tabler já resolve, desde que a página use a estrutura real dele. Nada disso precisa de CSS nosso — só o sidebar (abaixo) e o respiro do cabeçalho continuam custom. */ .page-header { margin-bottom: 1.5rem; } /* =================================================================== CONVENÇÃO DE GRID — Onda 1 (vale pra toda tela migrada daqui pra frente) =================================================================== Causa raiz (5ª rodada da mesma família de bug): markup herdado do AdminLTE/ BS3 usava col-md-* pra TODO campo, inclusive os de largura natural (hora, data, timezone). No BS5, col-md-* significa "cresça até essa fração da grade" — um col-md-4 num container de 1100px vira 366px, e o .form-control (width:100% por padrão do Bootstrap) estica até lá. Resultado: campo de hora com 366px de largura, lendo como "errado" mesmo com fonte correta. Regra: - col-auto SEMPRE que o campo tem largura natural própria (hora, data, select curto, número de telefone, timezone) — a coluna acomoda o campo, nunca o contrário. - col-md-* (ou só "col", que ocupa o restante) SÓ pro que deve mesmo crescer: textarea, campo de texto livre/descrição longa. - Tabelas SEMPRE com largura de coluna declarada no (atributo width="1%" nas colunas de conteúdo curto — checkbox, hora, badge, ação — deixa a coluna de texto principal absorver o resto; sem isso o navegador distribui as colunas por igual, e "Domingo" fica do tamanho de "--:--"). - Nunca variantes -sm (btn-sm/form-control-sm/form-select-sm) — o Tabler redefine o tamanho de fonte nelas, e nenhuma correção de token/root passa por cima disso. Se o campo precisa ser menor, use uma classe de largura (abaixo), não uma variante de densidade do Bootstrap. =================================================================== CONVENÇÃO — TODA TELA NASCE RESPONSIVA (não é correção posterior) =================================================================== Causa raiz do bug do mobile (channel_config, 400px): "col-auto" sozinho NUNCA estampa, e "col-md-4"/"col-md-auto" sozinho (sem o "col-12" de base) não empilha abaixo do breakpoint — o Bootstrap só aplica a largura dessas classes A PARTIR do prefixo (md/lg/etc.), sem definir nada abaixo disso, então as colunas ficam lado a lado, encolhidas ao conteúdo, e estouram a viewport. Some a isso as classes de largura fixa abaixo (width:8/11/18rem) e o campo simplesmente não cabe: "Comportamento fora do horário" ficou espremido numa coluna de ~40px, quebrando letra por letra. Regra (obrigatória em toda tela migrada, não é ajuste fino): - SEMPRE "col-12 col-md-*" (ou "col-12 col-md-auto"/"col-12 col-md") pra TODA coluna de formulário — nunca "col-md-*"/"col-auto"/"col" soltos. No mobile (<768px) tudo empilha em 100% de largura; a partir de md (>=768px) a grade normal assume. - As classes de largura abaixo (.vc-w-hora etc.) são "width:100%" por padrão (preenchem a coluna empilhada no mobile) e só viram "max-width" fixo dentro de "@media (min-width:768px)" — o mesmo breakpoint do "col-md", de propósito: o campo só ganha teto de largura exatamente quando a coluna deixa de ser 100% (senão sobra um intervalo 768-991px com coluna estreita e campo sem teto, ou o oposto). - Tabelas sempre dentro de ".table-responsive" (rolagem horizontal isolada) — os utilitários "w-1" continuam valendo em qualquer largura, já que ".table-responsive" contém o overflow sem estourar a página. - Validação obrigatória em 4 viewports — 400/768/1152/1536px — claro e escuro, com "document.documentElement.scrollWidth === clientWidth" conferido em todos (zero overflow horizontal na página). Nenhuma tela é considerada pronta sem essa bateria completa. Vocabulário de largura (aplicado no INPUT/SELECT, nunca na coluna nem via style inline — assim a próxima tela já nasce usando a classe certa): */ .vc-w-hora, .vc-w-data, .vc-w-campo { width: 100%; } @media (min-width: 768px) { /* "width" aqui, não só "max-width": medido que dentro de uma coluna col-auto (shrink-to-fit), max-width sozinho não é o alvo — o navegador usa o tamanho intrínseco do input (~215px) e só respeita o teto se o conteúdo o ultrapassar, então o campo ficava menor que o combinado nas rodadas anteriores (288/176/128px). width fixo replica exatamente o tamanho já aprovado no desktop; só o mobile (regra acima) usa 100%. */ .vc-w-hora { width: 8rem; max-width: 8rem; } .vc-w-data { width: 11rem; max-width: 11rem; } .vc-w-campo { width: 18rem; max-width: 18rem; } } /* ---- Sidebar: aside.navbar.navbar-vertical REAL do Tabler + identidade VCOSTA O Tabler fornece width/position:fixed/scroll (.navbar-vertical.navbar-expand-lg) e o .page-wrapper{margin-left:15rem} que compensa. Aqui só entra cor (navy/ teal) e o recurso NOSSO de recolher pra só-ícone (não nativo do Tabler). */ .navbar-vertical.vc-side { background: var(--vc-navy); border-right: none; } .navbar-vertical.vc-side .navbar-brand { color: #fff; padding: 0.875rem 0; } /* ---- Cabeçalho da sidebar: as DUAS marcas (v1.24) Era um badge "VC" + o texto "VCOSTAZAP Hub". Agora é a plataforma (VCOSTA: brasão + nome, lado a lado) em cima e o cliente (Exata) embaixo — a mesma hierarquia da tela de login. O .vc-side-topo é a linha que também abriga o hambúrguer do mobile, por isso a marca precisa poder encolher (min-width:0 num filho flex, senão ele nunca desce do tamanho intrínseco da imagem). */ /* O recuo de 1rem é o MESMO gutter do resto do menu — medido, não estimado: .nav-link e .vc-side-grupo-titulo têm padding-left:16px, enquanto o .container-fluid da