/* ============================================================ TOKENS SEMÂNTICOS DE TEMA (Light / Dark) — fonte única de verdade. :root = claro. :root[data-theme="dark"] = escuro. O atributo é setado no pelo script inline de index.html (antes da 1ª pintura) e pela action updateMode() do AppPreferencesStore. Em conjunto, data-bs-theme flippa os componentes Bootstrap nativos. Use SEMPRE var(--token) em vez de hex escrito à mão — assim uma superfície nova nasce correta nos 2 modos. ============================================================ */ :root { /* Superfícies */ --app-bg: #f8f9fa; /* fundo da área principal (era bg-light) */ --surface: #ffffff; /* cards, painéis, dropdowns, menus */ --surface-2: #f8fafc; /* elevado sutil / hover / input-group */ --surface-sunken: #f1f3f5; /* wells, divisórias internas, zebra */ /* Texto */ --fg: #212529; /* texto primário */ --fg-muted: #64748b; /* secundário */ --fg-subtle: #94a3b8; /* terciário / placeholder */ /* Bordas */ --border: #e3e6ea; --border-strong: #d0d7de; /* Marca + estados (tint de fundo p/ pills/alertas) */ --brand: #ff5a20; --link: #0d6efd; --link-bg: #e7f1ff; --success: #198754; --danger: #dc3545; --danger-bg: #fff5f5; --warning: #ffc107; --info: #0dcaf0; /* Sidebar — escura nos DOIS modos (identidade do rail) */ --sidebar-bg: #2b3138; --sidebar-fg: #dfe3e8; --sidebar-fg-muted: #b6bcc4; --sidebar-active: #ff5a20; /* Elevação */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1); } :root[data-theme="dark"] { --app-bg: #121417; --surface: #1b1e23; --surface-2: #23272e; --surface-sunken: #14171b; --fg: #e6e8eb; --fg-muted: #9aa4b1; --fg-subtle: #6b7480; --border: #2e333b; --border-strong: #3a4049; --link: #4c9ffe; --link-bg: #16304d; --success: #3fb27f; --danger: #f16d78; --danger-bg: #3a2023; --warning: #ffcd39; --info: #3dd5f3; --sidebar-bg: #16181c; --sidebar-fg: #d5d9de; --sidebar-fg-muted: #9aa4b1; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6); } /* Base do modo escuro + remap das utilidades Bootstrap NÃO adaptativas. No BS 5.3, .text-muted/.text-primary flippam sozinhos com data-bs-theme, mas .bg-white/.bg-light são fixos → precisam de override explícito aqui. */ :root[data-theme="dark"] body { background-color: var(--app-bg); color: var(--fg); } :root[data-theme="dark"] .bg-white { background-color: var(--surface) !important; color: var(--fg); } :root[data-theme="dark"] .bg-light, :root[data-theme="dark"] .main-area { background-color: var(--app-bg) !important; } body { font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: var(--fg); } @media (min-width: 1280px) { body { overflow: hidden!important; } } .btn { font-size: 0.9rem!important; } .scrollspy-table { overflow-y: scroll; height: 40vh!important; } /* Sidebar (position:fixed, largura relativa à viewport) e área principal lado a lado sem sobreposição em qualquer nível de zoom. A área principal recebe a MESMA largura da sidebar como margin-left e o restante como width, então as duas sempre se encaixam. Antes: sidebar com min-width:260px enquanto o main ficava fixo em 85% — quando 15% da viewport < 260px (qualquer largura abaixo de ~1733px, ou zoom acima de 100%) a sidebar invadia o painel central. */ :root { --sidebar-width: max(260px, 15%); } @media (min-width: 992px) { .col-lg-2-layout { flex: 0 0 auto; width: var(--sidebar-width)!important; } .col-lg-10-layout { flex: 0 0 auto; width: calc(100% - var(--sidebar-width))!important; margin-left: var(--sidebar-width)!important; } /* Colapsado (rail): a sidebar vira faixa estreita. O `width` acima usa !important, então o override do rail PRECISA de !important + maior especificidade (.col-lg-2-layout.collapsed = 0,2,0 > .col-lg-2-layout). Sem isto o rail continuava com os 260px do --sidebar-width. --rail-w vem do bundle (InternalLayout.vue), com fallback pra 64px. */ .col-lg-2-layout.collapsed { width: var(--rail-w, 64px)!important; } } @media (min-width: 1280px) { .card-scroll { display:block; max-height: 55vh; overflow:auto!important; } } .open-modal { display: block; } .list-group-accounts-to-move { max-height: 200px; overflow-y: auto; } /* Table domains and accounts */ @media (min-width: 1280px) { .table-scroll-dac { position: relative!important; width:100%; z-index: 1; margin: auto; overflow: auto; max-height: 50vh!important; } .table-scroll-dac thead th { position: -webkit-sticky; position: sticky !important; border: 0!important; top: 0; } /* safari and ios need the tfoot itself to be position:sticky also */ .table-scroll-dac tfoot, .table-scroll-dac tfoot th, .table-scroll-dac tfoot td { position: -webkit-sticky; position: sticky; bottom: 0; z-index:4; } .table-scroll-dac th:first-child { position: -webkit-sticky; position: sticky !important; width: 320px!important; left: 0; z-index: 2; } .table-scroll-dac thead th:first-child, .table-scroll-dac tfoot th:first-child { z-index: 5; } } td, th { vertical-align: middle; height: 50px; } @media (min-width: 1280px) { .thead-especial { width: 99%!important; } } .loader-1 { border: 16px solid var(--border); border-radius: 50%; border-top: 16px solid var(--brand); width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .description-box { background-color: var(--surface); border-left: 4px solid var(--link); padding: 1.5rem; border-radius: 0.25rem; box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; } .chart-container { position: relative; height: 400px; width: 100%; max-width: 600px; margin: 0 auto; } .admin-controls-box { border: 1px dashed var(--danger); background-color: var(--danger-bg); padding: 10px; border-radius: 8px; margin-top: 15px; } .login-banner { /* Mostra a ARTE INTEIRA, sempre proporcional: nunca estica/amassa (corrige o bug do `img-fluid` + altura fixa) e nunca recorta (object-fit:contain, não cover). Largura acompanha a coluna e a altura segue a proporção da imagem; max-height evita estourar telas baixas. */ display: block; width: 100%!important; height: auto!important; max-height: 88vh; object-fit: contain; object-position: center; margin: 0 auto; } .hidden-sm { display: none; } @media (min-width: 1024px) { .hidden-sm { display: block; } } .smoked-background { background-color: rgba(60, 60, 60, 0.4)!important; } .dropdown-menu { position: absolute; background-color: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); list-style: none; padding: 0; margin: 5px 0 0 0; min-width: 250px; max-width: 300px; border-radius: 4px; z-index: 1000; } .dropdown-menu-1 { left: 35%; top: 63vh; } .dropdown-menu-2 { left: 52%; top: 63vh; } .dropdown-background { position: fixed; z-index: 1055; top: 0; left: 0; width: 100%; height: 100%; display: none; } .show-dropdown-background { display: block !important; } .dropdown .dropdown-menu.show { z-index: 1060; } /* Link de identidade (nome/domínio) nas células das tabelas DataTable */ .dt-name-link { color: var(--link); text-decoration: none; font-weight: 600; } .dt-name-link:hover { text-decoration: underline; } /* ============================================================ Padronização das telas de listagem (Tráfego / Arquivamento): barra de ferramentas agrupada, filtros com ícone, cabeçalho retrátil, rodapé de paginação e tags/pills de filtro avançado. Reutilizado por ambas as telas — fonte única de verdade. ============================================================ */ /* Barra de ferramentas agrupada por divisores verticais (CA03) */ .dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; } .dt-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dt-toolbar-divider { width: 1px; align-self: stretch; min-height: 26px; background: var(--border); margin: 0 2px; } .dt-tbtn { display: inline-flex; align-items: center; gap: 6px; } .dt-tbtn > i.bi { font-size: 0.95rem; line-height: 1; } /* Filtros com ícone de contexto interno (CA01) */ .dt-filter .input-group-text { background: var(--surface-2); border-right: 0; color: var(--fg-muted); } .dt-filter .form-control, .dt-filter .form-select { border-left: 0; } .dt-filter .form-control:focus, .dt-filter .form-select:focus { box-shadow: none; border-color: var(--border-strong); } /* Opções de filtro avançado como tags/pills interativas (CA01) */ .dt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--fg-muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .dt-pill:hover { border-color: var(--fg-subtle); background: var(--surface-2); } .dt-pill.is-active { background: var(--link-bg); border-color: var(--link); color: var(--link); } .dt-pill > i.bi { font-size: 0.9rem; } /* Cabeçalho de card com gatilho retrátil (gráfico — CA02) */ .dt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .dt-card-head-title { font-weight: 700; font-size: 0.9rem; color: var(--fg); display: inline-flex; align-items: center; } .dt-collapse-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600; color: var(--fg-muted); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .dt-collapse-btn:hover { background: var(--surface-2); border-color: var(--link); color: var(--link); } .dt-collapse-caret { font-size: 0.8rem; } /* Rodapé de paginação integrado à base do card de resultados (CA05) */ .dt-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 4px 2px; margin-top: 10px; border-top: 1px solid var(--border); } .dt-pager { display: inline-flex; gap: 4px; flex-wrap: wrap; } /* Safe-area do FAB de WhatsApp (position:fixed; right:25px; ~64px de largura). Var ÚNICA e reutilizável: qualquer rodapé de paginação ENCOSTADO À DIREITA consome `--fab-safe` (via a classe utilitária .dt-fab-safe-right ou já embutido no .dt-table-footer) p/ o botão de última página / "Próximo" não ficar sob o FAB. Pagers CENTRALIZADOS não precisam (não colidem) — não aplicar neles p/ não descentralizar. No mobile o FAB sobe (bottom:80px) e o layout é estreito → não aplica. */ :root { --fab-safe: 104px; } @media (min-width: 769px) { .dt-table-footer, .dt-fab-safe-right { padding-right: var(--fab-safe); } } /* ============================================================ Tabelas AUTO-FIT — largura sempre 100%, SEM scroll horizontal. Arrastar a divisória de uma coluna a alarga e encolhe a vizinha à direita na mesma medida (motor: columnAutoFit.ts). Uso: classe .dt-fit-table no + com + em cada vira um card e cada célula vira uma linha "rótulo | valor" (rótulo = header da coluna, via `data-label` no

(menos a última). ============================================================ / .dt-fit-table { table-layout: fixed; width: 100%; max-width: 100%; } .dt-fit-table > thead > tr > th { position: relative; user-select: none; border-right: 1px solid var(--border); / divisória visível: sinaliza que dá p/ arrastar / overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-fit-table > thead > tr > th:last-child { border-right: 0; } .dt-fit-table > tbody > tr > td, .dt-fit-table > tbody > tr > th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / Alça de arraste sobre a divisória direita do cabeçalho. Piso mínimo de largura é ínfimo (26px, em columnAutoFit) — só p/ garantir área de clique. / .dt-col-resizer { position: absolute; top: 0; right: 0; / dentro do	p/ não ser cortada pelo overflow:hidden do cabeçalho / width: 10px; height: 100%; cursor: col-resize; z-index: 30; user-select: none; touch-action: none; } .dt-col-resizer:hover { background: rgba(13, 110, 253, 0.25); } .dt-col-resizer:active { background: rgba(13, 110, 253, 0.45); } / ============================================================ TOOLTIP DE RETICÊNCIAS (ellipsis) — system-wide Pílula única flutuante mostrada ao passar o mouse sobre uma célula de tabela cujo texto está truncado. Motor: JS delegado em src/utils/ellipsisTooltip.ts (detecção geométrica, sem dependência de classe). Ver [[reference_table_modernization_toolkit]]. ============================================================ / .ellipsis-tooltip { position: fixed; top: 0; left: 0; z-index: 4000; / acima de modais/dropdowns bootstrap / pointer-events: none; / nunca bloqueia clique/hover da célula / max-width: 420px; padding: 6px 10px; border-radius: 6px; background: #1f2937; color: #fff; font-size: 12.5px; line-height: 1.45; white-space: normal; / mostra o conteúdo completo, quebrando linha / word-break: break-word; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(2px); transition: opacity 0.09s ease, transform 0.09s ease; } .ellipsis-tooltip.is-visible { opacity: 1; transform: translateY(0); } / ============================================================ MODO CARD MOBILE — padrão system-wide (< 768px). Abaixo de 768px toda tabela marcada com .dt-cardify desmonta a estrutura de tabela: cada
/	+ `::before`). Elimina o esmagamento lateral e o scroll horizontal no celular. Convenção de marcação (o "componente" reusável): - data-label="" em toda célula de dado - .dt-card-title célula de identidade (nome/email/assunto) - .dt-card-actions célula com os botões de ação - .dt-card-check célula só do checkbox de seleção Regra única, global — vale até em componentes com

(menos a última). ============================================================ */ .dt-fit-table { table-layout: fixed; width: 100%; max-width: 100%; } .dt-fit-table > thead > tr > th { position: relative; user-select: none; border-right: 1px solid var(--border); /* divisória visível: sinaliza que dá p/ arrastar */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-fit-table > thead > tr > th:last-child { border-right: 0; } .dt-fit-table > tbody > tr > td, .dt-fit-table > tbody > tr > th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Alça de arraste sobre a divisória direita do cabeçalho. Piso mínimo de largura é ínfimo (26px, em columnAutoFit) — só p/ garantir área de clique. */ .dt-col-resizer { position: absolute; top: 0; right: 0; /* dentro do

p/ não ser cortada pelo overflow:hidden do cabeçalho */ width: 10px; height: 100%; cursor: col-resize; z-index: 30; user-select: none; touch-action: none; } .dt-col-resizer:hover { background: rgba(13, 110, 253, 0.25); } .dt-col-resizer:active { background: rgba(13, 110, 253, 0.45); } /* ============================================================ TOOLTIP DE RETICÊNCIAS (ellipsis) — system-wide Pílula única flutuante mostrada ao passar o mouse sobre uma célula de tabela cujo texto está truncado. Motor: JS delegado em src/utils/ellipsisTooltip.ts (detecção geométrica, sem dependência de classe). Ver [[reference_table_modernization_toolkit]]. ============================================================ */ .ellipsis-tooltip { position: fixed; top: 0; left: 0; z-index: 4000; /* acima de modais/dropdowns bootstrap */ pointer-events: none; /* nunca bloqueia clique/hover da célula */ max-width: 420px; padding: 6px 10px; border-radius: 6px; background: #1f2937; color: #fff; font-size: 12.5px; line-height: 1.45; white-space: normal; /* mostra o conteúdo completo, quebrando linha */ word-break: break-word; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(2px); transition: opacity 0.09s ease, transform 0.09s ease; } .ellipsis-tooltip.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ MODO CARD MOBILE — padrão system-wide (< 768px). Abaixo de 768px toda tabela marcada com .dt-cardify desmonta a estrutura de tabela: cada

+ `::before`). Elimina o esmagamento lateral e o scroll horizontal no celular. Convenção de marcação (o "componente" reusável): - data-label="" em toda célula de dado - .dt-card-title célula de identidade (nome/email/assunto) - .dt-card-actions célula com os botões de ação - .dt-card-check célula só do checkbox de seleção Regra única, global — vale até em componentes com