/* ============================================================================ Camada de temas (claro/escuro). Carregada DEPOIS de site.css/support-chat.css, então suas regras vencem por ordem. Estratégia: tokens de aplicação com valores claros que espelham o visual atual (modo claro fica idêntico) e são invertidos no modo escuro; as superfícies estruturais passam a ler esses tokens, de forma que trocar o tema é apenas trocar os valores das variáveis. Preferência resolvida no servidor e aplicada em : - light -> tokens claros - dark -> tokens escuros - system -> segue prefers-color-scheme do SO ============================================================================ */ :root { /* Superfícies e texto (modo claro = aparência atual) */ --app-bg: #ffffff; /* fundo de página / workspace */ --app-bg-muted: #f4f7fb; /* fundos sutis (canvas cinza) */ --app-surface: #ffffff; /* cards, painéis, menus */ --app-surface-2: #f7f9fc; /* sidebar, cabeçalhos de painel */ --app-surface-hover: #edf2f7; /* hover de itens de navegação */ --app-text: #11233d; /* texto principal */ --app-text-muted: #617086; /* texto secundário */ --app-border: #dce5ef; /* bordas e divisórias */ --app-input-bg: #ffffff; --app-input-border: #cedae6; --app-shadow: 0 18px 50px rgba(12, 35, 65, .10); color-scheme: light; } /* ---- Paleta escura (aplicada por atributo explícito e por preferência do SO) ---- */ :root[data-theme="dark"] { --app-bg: #0e131a; --app-bg-muted: #10161f; --app-surface: #151c26; --app-surface-2: #121824; --app-surface-hover: #1d2634; --app-text: #e7ecf3; --app-text-muted: #9aa7b8; --app-border: #263140; --app-input-bg: #131a24; --app-input-border: #2c3746; --app-shadow: 0 18px 50px rgba(0, 0, 0, .45); /* Tokens legados de site.css consumidos por muitos componentes */ --ink: var(--app-text); --muted: var(--app-text-muted); --line: var(--app-border); --surface: var(--app-surface); --canvas: var(--app-bg); --sidebar-bg: var(--app-surface-2); --sidebar-hover: var(--app-surface-hover); /* --sidebar-active em site.css mistura a marca com "white" (color-mix(...,white)) — fixo claro, nunca escurece. Sem este remap o item ativo da sidebar e o ícone do menu de conta ficam com um chip claro flutuando sobre a superfície escura. */ --sidebar-active: color-mix(in srgb, var(--brand-primary) 20%, var(--app-surface)); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --app-bg: #0e131a; --app-bg-muted: #10161f; --app-surface: #151c26; --app-surface-2: #121824; --app-surface-hover: #1d2634; --app-text: #e7ecf3; --app-text-muted: #9aa7b8; --app-border: #263140; --app-input-bg: #131a24; --app-input-border: #2c3746; --app-shadow: 0 18px 50px rgba(0, 0, 0, .45); --ink: var(--app-text); --muted: var(--app-text-muted); --line: var(--app-border); --surface: var(--app-surface); --canvas: var(--app-bg); --sidebar-bg: var(--app-surface-2); --sidebar-hover: var(--app-surface-hover); --sidebar-active: color-mix(in srgb, var(--brand-primary) 20%, var(--app-surface)); color-scheme: dark; } } /* ===== Superfícies estruturais re-apontadas para os tokens ===== */ body { background: var(--app-bg); color: var(--app-text); } .app-workspace, .admin-shell, .record-page { background: var(--app-bg); } .app-sidebar { background: var(--app-surface-2); border-right-color: var(--app-border); color: var(--app-text); } .sidebar-separator, .sidebar-footer { border-color: var(--app-border); background: transparent; } .app-footer { background: var(--app-surface); border-top-color: var(--app-border); } .mobile-header { background: color-mix(in srgb, var(--app-surface) 94%, transparent); border-bottom-color: var(--app-border); } .panel, .metric-card, .provider-usage-card, .capability-card, .detail-card, .execution-facts, .execution-metrics, .config-flow, .config-flow article { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } .panel-heading, .config-flow article { border-color: var(--app-border); } /* Texto */ .app-main h1, .app-main h2, .app-main h3, .sidebar-link, .account-copy strong { color: var(--app-text); } .muted-text, .page-header p, .section-heading > p { color: var(--app-text-muted); } /* Navegação */ .sidebar-link { color: color-mix(in srgb, var(--app-text) 78%, transparent); } .sidebar-link:hover, .sidebar-link:focus { background: var(--app-surface-hover); color: var(--app-text); } .account-chip:hover { background: var(--app-surface-hover); } /* Menu da conta / dropdown */ .account-menu-panel { background: var(--app-surface); border-color: var(--app-border); box-shadow: var(--app-shadow); } .account-menu-panel a, .account-menu-panel button { color: color-mix(in srgb, var(--app-text) 80%, transparent); } .account-menu-panel a:hover, .account-menu-panel button:hover { background: var(--app-surface-hover); color: var(--app-text); } .account-menu-panel form { border-top-color: var(--app-border); } /* Formulários */ .app-main .form-control, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea { background: var(--app-input-bg); border-color: var(--app-input-border); color: var(--app-text); } :root[data-theme="dark"] .button-secondary, :root[data-theme="dark"] .app-main .btn-outline-secondary { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } /* Tabelas */ :root[data-theme="dark"] table, :root[data-theme="dark"] .table { color: var(--app-text); } :root[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--app-border); background: transparent; } :root[data-theme="dark"] thead th { color: var(--app-text-muted); } :root[data-theme="dark"] .chat-message-body .table-scroll { border-color: var(--app-border); } :root[data-theme="dark"] .chat-message-body th { background: var(--app-surface-2); color: var(--app-text-muted); border-bottom-color: var(--app-border); } :root[data-theme="dark"] .chat-message-body td { border-top-color: var(--app-border); } :root[data-theme="dark"] .chat-message-body tr:hover td { background: var(--app-surface-hover); } /* Modais Bootstrap (.modal-content): o Bootstrap define fundo branco fixo na própria classe, nunca sobrescrito — cabeçalho/corpo do modal ficavam brancos mesmo com o rodapé (.modal-footer, estilizado à parte) já escuro. O ícone padrão do botão de fechar também é um X preto, invisível em fundo escuro sem inverter. */ :root[data-theme="dark"] .modal-content { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.7); } /* Diálogos/modais nativos */ dialog { box-sizing: border-box; margin: auto; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } /* Placeholder mais legível no escuro */ :root[data-theme="dark"] ::placeholder { color: color-mix(in srgb, var(--app-text-muted) 80%, transparent); } /* Cards de destaque do Admin: .metric-card.accent e .capability-card.featured têm 2 classes (especificidade maior que a regra genérica de .metric-card/.capability-card acima) e permaneciam brancos no escuro. Precisam de seletor com especificidade igual ou maior. */ :root[data-theme="dark"] .metric-card.accent, :root[data-theme="dark"] .capability-card.featured { background: var(--app-surface); border-color: var(--app-border); } /* ===== Chat de suporte (support-chat.css) ===== support-chat.css usa cores fixas para quase todas as superfícies (fundo #fff/#f8f8f8/etc.), enquanto o texto interno herda var(--app-text)/var(--ink) — que passam a ser claros no modo escuro. Sem estes overrides o resultado é texto claro sobre fundo claro em quase todo o chat. */ :root[data-theme="dark"] .support-chat-page, :root[data-theme="dark"] .support-chat-header, :root[data-theme="dark"] .support-portal-shell, :root[data-theme="dark"] .support-portal-topbar, :root[data-theme="dark"] .chat-panel, :root[data-theme="dark"] .chat-composer, :root[data-theme="dark"] .chat-app-launcher-trigger, :root[data-theme="dark"] .chat-app-launcher-popover, :root[data-theme="dark"] .chat-app-launcher-dialog, :root[data-theme="dark"] .chat-app-launcher-search, :root[data-theme="dark"] .chat-app-launcher-modal-search, :root[data-theme="dark"] .chat-app-launcher-card, :root[data-theme="dark"] .chat-account-popover, :root[data-theme="dark"] .chat-new-session, :root[data-theme="dark"] .chat-context-setup-card, :root[data-theme="dark"] .chat-confirm-card, :root[data-theme="dark"] .chat-context-breadcrumb, :root[data-theme="dark"] .chat-lookup-control, :root[data-theme="dark"] .chat-lookup-options, :root[data-theme="dark"] .row-menu-panel, :root[data-theme="dark"] .chat-message-attachment, :root[data-theme="dark"] .chat-account-feedback { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] .chat-context-card, :root[data-theme="dark"] .agent-presence, :root[data-theme="dark"] .agent-presence.is-readonly, :root[data-theme="dark"] .chat-attachment-chip, :root[data-theme="dark"] .chat-app-launcher-search, :root[data-theme="dark"] .chat-app-launcher-modal-search, :root[data-theme="dark"] .chat-share-row { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] .chat-field select, :root[data-theme="dark"] .chat-composer textarea, :root[data-theme="dark"] .chat-lookup-control input { background: var(--app-input-bg); border-color: var(--app-input-border); color: var(--app-text); } :root[data-theme="dark"] .chat-field select:disabled, :root[data-theme="dark"] .chat-composer textarea:disabled { background: var(--app-surface-2); color: var(--app-text-muted); -webkit-text-fill-color: var(--app-text-muted); } /* Balão de mensagem: usuário e sistema tinham fundo claro fixo — precisam de override explícito. Agente também: .chat-message.agent .chat-message-body tem background:#fff fixo em support-chat.css, então o texto (var(--app-text), quase branco no dark) ficava sem contraste sobre o cartão ainda claro. */ :root[data-theme="dark"] .chat-message.agent .chat-message-body { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] .chat-message.user .chat-message-body { background: var(--app-surface-hover); color: var(--app-text); border-color: transparent; } :root[data-theme="dark"] .chat-message.system .chat-message-body { background: color-mix(in srgb, #b52f42 22%, var(--app-surface)); border-color: color-mix(in srgb, #b52f42 40%, var(--app-border)); color: #ffd7dc; } :root[data-theme="dark"] .chat-message.system .chat-message-icon { background: color-mix(in srgb, #b52f42 30%, var(--app-surface)); color: #ffb3bd; } :root[data-theme="dark"] .chat-message-icon, :root[data-theme="dark"] .chat-message.agent .chat-message-icon, :root[data-theme="dark"] .chat-welcome > span { background: var(--app-surface-2); } /* Painel "Sobre este projeto" (.chat-inspector*) e as duas barras de busca (.chat-history-search / .chat-inspector-search) tinham fundo/texto claros fixos em support-chat.css, sem nenhum override dark — mesmo bug do balão do agente acima. */ :root[data-theme="dark"] .chat-inspector { border-left-color: var(--app-border); background: var(--app-surface); } :root[data-theme="dark"] .chat-inspector-head, :root[data-theme="dark"] .chat-inspector-card { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] .chat-inspector-empty, :root[data-theme="dark"] .chat-inspector-no-results { color: var(--app-text-muted); } :root[data-theme="dark"] .chat-inspector-empty small { color: var(--app-text-muted); } :root[data-theme="dark"] .chat-history-search, :root[data-theme="dark"] .chat-inspector-search { background: var(--app-input-bg); border-color: var(--app-input-border); color: var(--app-text-muted); } :root[data-theme="dark"] .chat-history-search input, :root[data-theme="dark"] .chat-inspector-search input { color: var(--app-text); } :root[data-theme="dark"] .chat-message-body code { background: var(--app-surface-2); color: var(--app-text); } :root[data-theme="dark"] .chat-message-body blockquote { border-left-color: var(--app-border); color: var(--app-text-muted); } :root[data-theme="dark"] .chat-warning, :root[data-theme="dark"] .chat-error, :root[data-theme="dark"] .chat-diff-before { background: color-mix(in srgb, #a73542 22%, var(--app-surface)); border-color: color-mix(in srgb, #a73542 40%, var(--app-border)); color: #ffc6cc; } :root[data-theme="dark"] .chat-diff-after { background: color-mix(in srgb, #1a7048 22%, var(--app-surface)); border-color: color-mix(in srgb, #1a7048 40%, var(--app-border)); color: #b9f2d3; } :root[data-theme="dark"] .chat-context-summary { background: color-mix(in srgb, #168b68 18%, var(--app-surface)); border-color: color-mix(in srgb, #168b68 40%, var(--app-border)); } :root[data-theme="dark"] .chat-context-summary small { color: #6fe0bd; } :root[data-theme="dark"] .chat-context-summary strong, :root[data-theme="dark"] .chat-context-summary span { color: var(--app-text); } :root[data-theme="dark"] .agent-presence.is-develop { background: color-mix(in srgb, #b45309 20%, var(--app-surface)); border-color: color-mix(in srgb, #b45309 45%, var(--app-border)); } /* Textos com cor fixa (legíveis apenas sobre fundo claro) — realinhar para os tokens. */ :root[data-theme="dark"] .support-chat-header p, :root[data-theme="dark"] .chat-context-card > p, :root[data-theme="dark"] .chat-field span, :root[data-theme="dark"] .chat-composer small, :root[data-theme="dark"] .chat-model-reduction, :root[data-theme="dark"] .chat-history-heading span, :root[data-theme="dark"] .chat-history-heading small, :root[data-theme="dark"] .chat-history-group-title strong, :root[data-theme="dark"] .chat-history-group-title span, :root[data-theme="dark"] .chat-history-group-copy strong, :root[data-theme="dark"] .chat-history-group-copy > span, :root[data-theme="dark"] .chat-history-item, :root[data-theme="dark"] .chat-history-item span, :root[data-theme="dark"] .chat-history-item small, :root[data-theme="dark"] .chat-history-group-count, :root[data-theme="dark"] .chat-context-details summary strong, :root[data-theme="dark"] .chat-context-details summary small, :root[data-theme="dark"] .chat-context-details summary i, :root[data-theme="dark"] .chat-admin-return, :root[data-theme="dark"] .chat-account-identity, :root[data-theme="dark"] .chat-account-copy strong, :root[data-theme="dark"] .chat-account-copy small, :root[data-theme="dark"] .chat-account-row button, :root[data-theme="dark"] .chat-account-chevron, :root[data-theme="dark"] .chat-account-action, :root[data-theme="dark"] .chat-account-action small, :root[data-theme="dark"] .chat-app-launcher-trigger, :root[data-theme="dark"] .chat-app-launcher-current > small, :root[data-theme="dark"] .chat-app-launcher-current-copy small, :root[data-theme="dark"] .chat-app-launcher-chevron, :root[data-theme="dark"] .chat-app-launcher-heading, :root[data-theme="dark"] .chat-app-launcher-item, :root[data-theme="dark"] .chat-app-launcher-item-copy small, :root[data-theme="dark"] .chat-app-launcher-empty, :root[data-theme="dark"] .chat-app-launcher-modal header p, :root[data-theme="dark"] .chat-app-launcher-card, :root[data-theme="dark"] .chat-app-launcher-card-title small, :root[data-theme="dark"] .chat-app-launcher-card-description, :root[data-theme="dark"] .chat-lookup > label, :root[data-theme="dark"] .chat-lookup-control > span, :root[data-theme="dark"] .chat-lookup-control input:disabled, :root[data-theme="dark"] .chat-lookup-options button, :root[data-theme="dark"] .chat-lookup-options small, :root[data-theme="dark"] .chat-lookup-empty, :root[data-theme="dark"] .chat-context-setup-card > p, :root[data-theme="dark"] .chat-context-breadcrumb strong, :root[data-theme="dark"] .chat-confirm-card header p, :root[data-theme="dark"] .chat-confirm-body, :root[data-theme="dark"] .row-menu-toggle, :root[data-theme="dark"] .row-menu-panel button, :root[data-theme="dark"] .chat-message-attachment, :root[data-theme="dark"] .chat-attachment-chip, :root[data-theme="dark"] .chat-attachment-chip-name, :root[data-theme="dark"] .chat-attach-button, :root[data-theme="dark"] .chat-record-button, :root[data-theme="dark"] .chat-copy-button, :root[data-theme="dark"] .chat-activity-line { color: var(--app-text-muted); } /* Estado "gravando" mantém o vermelho próprio também no escuro (especificidade acima dos grupos). */ :root[data-theme="dark"] .chat-record-button.is-recording, :root[data-theme="dark"] .chat-record-button.is-recording:hover { color: #fff; background: #d33a3a; } :root[data-theme="dark"] .chat-history-group-title strong, :root[data-theme="dark"] .chat-history-item span, :root[data-theme="dark"] .chat-account-identity, :root[data-theme="dark"] .chat-account-copy strong, :root[data-theme="dark"] .chat-app-launcher-current-copy strong, :root[data-theme="dark"] .chat-app-launcher-item-copy strong, :root[data-theme="dark"] .chat-app-launcher-card-title strong, :root[data-theme="dark"] .chat-context-breadcrumb strong, :root[data-theme="dark"] .chat-confirm-card h2 { color: var(--app-text); } /* Hovers e estados sobre as superfícies acima */ :root[data-theme="dark"] .chat-new-session:hover, :root[data-theme="dark"] .chat-history-item:hover, :root[data-theme="dark"] .chat-history-item.is-active, :root[data-theme="dark"] .chat-history-group-title:hover, :root[data-theme="dark"] .chat-context-details summary:hover, :root[data-theme="dark"] .chat-admin-return:hover, :root[data-theme="dark"] .chat-account-identity:hover, :root[data-theme="dark"] .chat-account-row button:hover, :root[data-theme="dark"] .chat-account-trigger:hover, :root[data-theme="dark"] .chat-account-menu[open] > .chat-account-trigger, :root[data-theme="dark"] .chat-account-action:hover, :root[data-theme="dark"] .chat-app-launcher-trigger:hover, :root[data-theme="dark"] .chat-app-launcher[open] > .chat-app-launcher-trigger, :root[data-theme="dark"] .chat-app-launcher-item:hover, :root[data-theme="dark"] .chat-app-launcher-viewall:hover, :root[data-theme="dark"] .chat-lookup-options button:hover, :root[data-theme="dark"] .row-menu-toggle:hover, :root[data-theme="dark"] .row-menu-panel button:hover, :root[data-theme="dark"] .chat-message-attachment:hover, :root[data-theme="dark"] .chat-attachment-remove:hover, :root[data-theme="dark"] .chat-attach-button:hover, :root[data-theme="dark"] .chat-record-button:hover, :root[data-theme="dark"] .chat-app-launcher-modal-close:hover, :root[data-theme="dark"] .chat-copy-button:hover { background: var(--app-surface-hover); } :root[data-theme="dark"] .chat-app-launcher-item.is-active { background: color-mix(in srgb, var(--brand-primary, #0877D1) 20%, var(--app-surface)); } :root[data-theme="dark"] .chat-app-launcher-card.is-active { border-color: var(--brand-primary, #0877D1); background: color-mix(in srgb, var(--brand-primary, #0877D1) 14%, var(--app-surface)); } :root[data-theme="dark"] .chat-composer.is-processing { background: linear-gradient(110deg, var(--app-surface) 15%, var(--app-surface-2) 48%, var(--app-surface) 82%); border-color: var(--app-border); } :root[data-theme="dark"] .chat-composer.is-processing textarea:disabled { color: var(--app-text-muted); -webkit-text-fill-color: var(--app-text-muted); } /* Popover de conta do chat: .chat-account-logout tem um fundo fixo próprio, que a regra genérica de .chat-account-action (acima) não cobre. */ :root[data-theme="dark"] .chat-account-logout { background: var(--app-surface); } :root[data-theme="dark"] .chat-account-popover-header, :root[data-theme="dark"] .chat-account-popover nav { border-bottom-color: var(--app-border); } /* Vários :hover do chat fixam background E color juntos (ex.: color:#111/#303030/#26313d) — a regra genérica de hover (acima) só re-aponta o background para var(--app-surface-hover); sem isto o texto permanece escuro fixo sobre a superfície de hover, que também é escura. */ :root[data-theme="dark"] .chat-admin-return:hover, :root[data-theme="dark"] .chat-account-identity:hover, :root[data-theme="dark"] .chat-account-row button:hover, :root[data-theme="dark"] .chat-account-action:hover, :root[data-theme="dark"] .chat-account-action:focus-visible, :root[data-theme="dark"] .row-menu-toggle:hover, :root[data-theme="dark"] .row-menu-toggle[aria-expanded="true"], :root[data-theme="dark"] .chat-attachment-remove:hover, :root[data-theme="dark"] .chat-attachment-remove:focus-visible, :root[data-theme="dark"] .chat-attach-button:hover, :root[data-theme="dark"] .chat-record-button:hover, :root[data-theme="dark"] .chat-app-launcher-modal-close:hover { color: var(--app-text); } /* Ícones-chip do chat que ficaram fora da varredura de badges/pills acima: chip de erro (pastel vermelho) e chip neutro do app launcher, ambos com fundo fixo claro. */ :root[data-theme="dark"] .account-menu-panel button > span:first-child, :root[data-theme="dark"] .chat-confirm-icon, :root[data-theme="dark"] .chat-share-row-remove:hover { background: color-mix(in srgb, #c83949 20%, var(--app-surface)); color: #ff9aa8; } :root[data-theme="dark"] .chat-attachment-chip.is-error { background: color-mix(in srgb, #a73542 20%, var(--app-surface)); border-color: color-mix(in srgb, #a73542 40%, var(--app-border)); color: #ffc6cc; } :root[data-theme="dark"] .chat-app-launcher-waffle { background: var(--app-surface-2); color: var(--app-text-muted); } /* ===== Admin: configuration.css (setup de provider/tenant, listagens, formulários) ===== Mesmo problema do chat: fundo fixo claro + texto herdado de var(--ink)/var(--app-text). */ :root[data-theme="dark"] .codex-auth, :root[data-theme="dark"] .auth-option, :root[data-theme="dark"] .setup-steps, :root[data-theme="dark"] .setup-card, :root[data-theme="dark"] .setup-summary, :root[data-theme="dark"] .row-menu-toggle, :root[data-theme="dark"] .row-menu-panel, :root[data-theme="dark"] .record-action, :root[data-theme="dark"] .lookup-results, :root[data-theme="dark"] .lookup-results button, :root[data-theme="dark"] .toggle-field, :root[data-theme="dark"] .app-dropdown, :root[data-theme="dark"] .operation-toast, :root[data-theme="dark"] .button-danger { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] .auth-option:has(input:checked) { background: color-mix(in srgb, var(--brand-primary, #0877D1) 12%, var(--app-surface)); } :root[data-theme="dark"] .auth-note { background: color-mix(in srgb, #3f6c92 22%, var(--app-surface)); border-color: color-mix(in srgb, #3f6c92 40%, var(--app-border)); color: var(--app-text); } :root[data-theme="dark"] .device-code { background: color-mix(in srgb, #0f7ac2 14%, var(--app-surface)); border-color: color-mix(in srgb, #0f7ac2 35%, var(--app-border)); color: var(--app-text); } :root[data-theme="dark"] .success-banner { background: color-mix(in srgb, #18a97c 18%, var(--app-surface)); border-color: color-mix(in srgb, #18a97c 40%, var(--app-border)); color: #6fe0bd; } :root[data-theme="dark"] .production-warning { background: color-mix(in srgb, #f2c85d 20%, var(--app-surface)); border-color: color-mix(in srgb, #f2c85d 45%, var(--app-border)); color: #e8c877; } :root[data-theme="dark"] .list-controls, :root[data-theme="dark"] .check-group, :root[data-theme="dark"] .premium-modal .modal-footer, :root[data-theme="dark"] .wizard-body, :root[data-theme="dark"] .lookup-input, :root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea, :root[data-theme="dark"] .copy-value, :root[data-theme="dark"] .icon-button { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] .icon-button[aria-pressed="true"] { background: color-mix(in srgb, var(--brand-primary, #0877D1) 16%, var(--app-surface)); } /* .icon-button (project-detail.css / project-wizard.css) fixa border-color:#a9cee7 no hover/pressed, independente do tema — sem este override o botão fica com uma borda azul-clara "lavada" sobre fundo escuro. Não afeta o par já tratado localmente em .wizard-page .workspace-card .icon-button (mais específico, continua vencendo). */ :root[data-theme="dark"] .icon-button:hover, :root[data-theme="dark"] .icon-button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--brand-primary, #0877D1) 35%, var(--app-border)); } :root[data-theme="dark"] .setup-card summary p, :root[data-theme="dark"] .setup-card summary small, :root[data-theme="dark"] .field > small, :root[data-theme="dark"] .field-validation-error, :root[data-theme="dark"] .validation-summary, :root[data-theme="dark"] .check-field small, :root[data-theme="dark"] .row-menu-panel a, :root[data-theme="dark"] .row-menu-panel button, :root[data-theme="dark"] .summary-body span, :root[data-theme="dark"] .summary-list h3, :root[data-theme="dark"] .summary-list > p, :root[data-theme="dark"] .summary-list small, :root[data-theme="dark"] .empty-list, :root[data-theme="dark"] .detail-field small, :root[data-theme="dark"] .danger-zone p, :root[data-theme="dark"] .toggle-field small { color: var(--app-text-muted); } :root[data-theme="dark"] .row-menu-panel a:hover, :root[data-theme="dark"] .row-menu-panel button:hover, :root[data-theme="dark"] .row-menu-toggle:hover, :root[data-theme="dark"] .row-menu-toggle[aria-expanded="true"], :root[data-theme="dark"] .record-action:hover, :root[data-theme="dark"] .icon-button:hover, :root[data-theme="dark"] .lookup-results button:hover, :root[data-theme="dark"] .lookup-results button:focus, :root[data-theme="dark"] .profile-project-table tbody tr:hover td { background: var(--app-surface-hover); } :root[data-theme="dark"] .row-menu-danger:hover { background: color-mix(in srgb, #c83949 20%, var(--app-surface)); color: #ff9aa8; } :root[data-theme="dark"] .validation-summary ul { background: color-mix(in srgb, #c83949 22%, var(--app-surface)); color: #ffc6cc; } :root[data-theme="dark"] .status-pill.muted { background: var(--app-surface-2); color: var(--app-text-muted); } :root[data-theme="dark"] .danger-zone { background: color-mix(in srgb, #c83949 12%, var(--app-surface)); border-color: color-mix(in srgb, #c83949 30%, var(--app-border)); } :root[data-theme="dark"] .danger-zone strong { color: #ffb3bd; } /* ===== Admin: Execuções (executions.css) — cabeçalho, facts/metrics e conversa ===== */ :root[data-theme="dark"] .execution-breadcrumb, :root[data-theme="dark"] .executions-scroll-status, :root[data-theme="dark"] .synthesis-item p, :root[data-theme="dark"] .execution-tabs button, :root[data-theme="dark"] .conversation-sort, :root[data-theme="dark"] .message-body header, :root[data-theme="dark"] .execution-events time, :root[data-theme="dark"] .execution-events p { color: var(--app-text-muted); } :root[data-theme="dark"] .execution-breadcrumb a { color: var(--app-text-muted); } :root[data-theme="dark"] .execution-facts, :root[data-theme="dark"] .execution-metrics, :root[data-theme="dark"] .conversation-sort select, :root[data-theme="dark"] .message-expand { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] .execution-facts > *, :root[data-theme="dark"] .execution-metrics > * { border-right-color: var(--app-border); } :root[data-theme="dark"] .fact-icon, :root[data-theme="dark"] .message-avatar { background: color-mix(in srgb, var(--brand-primary, #1478d0) 16%, var(--app-surface)); } :root[data-theme="dark"] .message-avatar.system { background: color-mix(in srgb, #b1801f 22%, var(--app-surface)); color: #e8c877; } :root[data-theme="dark"] .message-avatar.agent { background: color-mix(in srgb, var(--violet, #7c3aed) 20%, var(--app-surface)); } :root[data-theme="dark"] .synthesis-mark { background: color-mix(in srgb, var(--brand-primary, #7c3aed) 20%, var(--app-surface)); } :root[data-theme="dark"] .synthesis-item { border-right-color: var(--app-border); } :root[data-theme="dark"] .message-body { background: var(--app-surface-2); border-color: var(--app-border); } :root[data-theme="dark"] .execution-message.user .message-body { background: color-mix(in srgb, var(--brand-primary, #1478d0) 10%, var(--app-surface-2)); } :root[data-theme="dark"] .execution-message.system .message-body { background: color-mix(in srgb, #e0a41c 14%, var(--app-surface-2)); } :root[data-theme="dark"] .execution-message pre { color: var(--app-text); } :root[data-theme="dark"] .execution-events li::before { background: var(--app-border); } :root[data-theme="dark"] .event-index { background: color-mix(in srgb, var(--brand-primary, #1478d0) 16%, var(--app-surface)); } :root[data-theme="dark"] .execution-events li:first-child .event-index { background: color-mix(in srgb, var(--green, #16a06f) 20%, var(--app-surface)); } /* ===== Admin: Detalhe de projeto (project-detail.css) ===== */ :root[data-theme="dark"] .record-breadcrumb { color: var(--app-text-muted); } :root[data-theme="dark"] .readiness-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #0877D1) 12%, var(--app-surface)), var(--app-surface) 55%); border-color: var(--app-border); } :root[data-theme="dark"] .readiness-hero > div > p { color: var(--app-text-muted); } :root[data-theme="dark"] .readiness-signals { background: var(--app-surface); border-color: var(--app-border); } :root[data-theme="dark"] .readiness-signal + .readiness-signal, :root[data-theme="dark"] .readiness-gap { border-color: var(--app-border); } :root[data-theme="dark"] .readiness-signal small, :root[data-theme="dark"] .workspace-card header p, :root[data-theme="dark"] .workspace-preview-status { color: var(--app-text-muted); } :root[data-theme="dark"] .signal-mark.is-pending { background: var(--app-surface-hover); } :root[data-theme="dark"] .card-glyph.blue { background: color-mix(in srgb, var(--blue, #168bd1) 20%, var(--app-surface)); } :root[data-theme="dark"] .card-glyph.slate { background: var(--app-surface-2); color: var(--app-text-muted); } :root[data-theme="dark"] .card-glyph.cyan { background: color-mix(in srgb, var(--brand-primary, #0b93cd) 20%, var(--app-surface)); } :root[data-theme="dark"] .info-row + .info-row { border-color: var(--app-border); } :root[data-theme="dark"] .info-row dt { color: var(--app-text-muted); } :root[data-theme="dark"] .info-row.stacked dd { color: var(--app-text); } :root[data-theme="dark"] .copy-value code { color: var(--app-text); } :root[data-theme="dark"] .copy-value button:hover { background: var(--app-surface-hover); } :root[data-theme="dark"] .card-note { background: color-mix(in srgb, #3f6c92 20%, var(--app-surface)); border-color: color-mix(in srgb, #3f6c92 40%, var(--app-border)); color: var(--app-text); } :root[data-theme="dark"] .card-error { background: color-mix(in srgb, #9e414e 20%, var(--app-surface)); border-color: color-mix(in srgb, #9e414e 40%, var(--app-border)); color: #ffc6cc; } :root[data-theme="dark"] .workspace-preview-dialog { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } :root[data-theme="dark"] .workspace-preview-head { background: linear-gradient(180deg, var(--app-surface), var(--app-surface-2)); border-bottom-color: var(--app-border); } :root[data-theme="dark"] .workspace-preview-head p { color: var(--app-text-muted); } :root[data-theme="dark"] .workspace-preview-close { color: var(--app-text-muted); } :root[data-theme="dark"] .workspace-preview-close:hover { background: var(--app-surface-hover); color: var(--app-text); } :root[data-theme="dark"] .workspace-preview-meta { background: var(--app-surface-2); border-bottom-color: var(--app-border); color: var(--app-text-muted); } :root[data-theme="dark"] .workspace-preview-badge { background: color-mix(in srgb, var(--brand-primary, #168bd1) 20%, var(--app-surface)); color: color-mix(in srgb, var(--brand-primary, #168bd1) 55%, white); } :root[data-theme="dark"] .workspace-preview-body { background: linear-gradient(180deg, var(--app-surface-2), var(--app-bg)); } :root[data-theme="dark"] .workspace-preview-error { background: color-mix(in srgb, #9e414e 20%, var(--app-surface)); border-color: color-mix(in srgb, #9e414e 40%, var(--app-border)); color: #ffc6cc; } :root[data-theme="dark"] .file-tree-row:hover { background: var(--app-surface-hover); } /* .readiness-gap usa cor âmbar fixa (#8a6420) para o aviso de "lacuna" — no escuro fica escura demais sobre fundo escuro; realinhada para o mesmo âmbar já usado em outros avisos do tema escuro (.production-warning, .live-badge.is-stale). */ :root[data-theme="dark"] .readiness-gap { color: #e8c877; } /* .workspace-preview-code (project-detail.css) já é um visor de código propositalmente escuro em qualquer tema (como o equivalente .wizard-page .workspace-preview-code), mas sua borda clara fixa (#dde6ef) fica destacada demais sobre o card escuro ao redor. Mesmo valor usado no par já tratado localmente em project-wizard.css. */ :root[data-theme="dark"] .workspace-preview-code { border-color: #213249; } /* ===== Perfil (profile-edit.css / profile-avatar-cropper.css) — "Editar perfil" ===== */ :root[data-theme="dark"] .profile-edit-page, :root[data-theme="dark"] .profile-page { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary, #0877D1) 6%, var(--app-bg)), var(--app-bg) 250px); } :root[data-theme="dark"] .profile-back-link, :root[data-theme="dark"] .profile-back, :root[data-theme="dark"] .profile-search span, :root[data-theme="dark"] .profile-form-grid .field small, :root[data-theme="dark"] .profile-app-copy small, :root[data-theme="dark"] .profile-permission small, :root[data-theme="dark"] .profile-project-name small, :root[data-theme="dark"] .profile-project-action, :root[data-theme="dark"] .profile-legend, :root[data-theme="dark"] .profile-photo-panel p, :root[data-theme="dark"] .profile-photo-panel > small, :root[data-theme="dark"] .profile-heading p, :root[data-theme="dark"] .profile-section-title p, :root[data-theme="dark"] .avatar-crop-card header p, :root[data-theme="dark"] .avatar-crop-zoom span { color: var(--app-text-muted); } :root[data-theme="dark"] .profile-menu-button, :root[data-theme="dark"] .profile-summary-card, :root[data-theme="dark"] .profile-form-card, :root[data-theme="dark"] .profile-permissions-card, :root[data-theme="dark"] .profile-search input, :root[data-theme="dark"] .profile-app-card, :root[data-theme="dark"] .profile-permission, :root[data-theme="dark"] .profile-project-table-wrap, :root[data-theme="dark"] .profile-project-table, :root[data-theme="dark"] .profile-shell, :root[data-theme="dark"] .profile-form-grid .field input, :root[data-theme="dark"] .profile-form-grid .field textarea, :root[data-theme="dark"] .profile-field input, :root[data-theme="dark"] .profile-photo-button, :root[data-theme="dark"] .avatar-crop-card { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] .profile-summary-card-hero { background: linear-gradient(145deg, color-mix(in srgb, var(--brand-primary, #0877D1) 22%, var(--app-surface)), var(--app-surface) 58%); } :root[data-theme="dark"] .profile-summary-pill { background: color-mix(in srgb, var(--brand-primary, #0877D1) 14%, var(--app-surface-2)); color: var(--app-text); } :root[data-theme="dark"] .profile-summary-stat { border-top-color: var(--app-border); } :root[data-theme="dark"] .profile-progress-track { background: var(--app-surface-2); } :root[data-theme="dark"] .profile-tool-button.is-active { border-color: var(--brand-primary, #0877D1); background: color-mix(in srgb, var(--brand-primary, #0877D1) 16%, var(--app-surface)); } :root[data-theme="dark"] .profile-app-chevron { background: var(--app-surface-2); color: var(--app-text-muted); } :root[data-theme="dark"] .profile-project-table thead th { background: var(--app-surface-2); color: var(--app-text-muted); } :root[data-theme="dark"] .profile-project-table tbody td { border-top-color: var(--app-border); } :root[data-theme="dark"] .profile-summary-copy p, :root[data-theme="dark"] .profile-summary-head p, :root[data-theme="dark"] .profile-card-header p, :root[data-theme="dark"] .profile-empty-state p { color: var(--app-text-muted); } :root[data-theme="dark"] .profile-empty-state > span { background: color-mix(in srgb, var(--brand-primary, #0877D1) 16%, var(--app-surface)); } :root[data-theme="dark"] .profile-edit-validation ul, :root[data-theme="dark"] .profile-validation ul { background: color-mix(in srgb, #b63e4d 20%, var(--app-surface)); color: #ffc6cc; } :root[data-theme="dark"] .profile-photo-panel { background: var(--app-surface-2); border-right-color: var(--app-border); } :root[data-theme="dark"] .profile-section-title, :root[data-theme="dark"] .profile-actions, :root[data-theme="dark"] .profile-radio-note { border-color: var(--app-border); } :root[data-theme="dark"] .profile-field input[readonly] { background: var(--app-surface-2); color: var(--app-text-muted); } :root[data-theme="dark"] .avatar-crop-close { background: var(--app-surface-2); color: var(--app-text-muted); } :root[data-theme="dark"] .avatar-crop-close:hover { background: var(--app-surface-hover); color: var(--app-text); } :root[data-theme="dark"] .avatar-crop-error { background: color-mix(in srgb, #a73542 22%, var(--app-surface)); color: #ffc6cc; } /* ===== Trocar senha (change-password.css) ===== */ :root[data-theme="dark"] .password-page { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #0877D1) 8%, var(--app-bg)) 0%, var(--app-bg) 45%, var(--app-bg-muted) 100%); } :root[data-theme="dark"] .password-back, :root[data-theme="dark"] .password-intro > p, :root[data-theme="dark"] .password-security-note small, :root[data-theme="dark"] .password-card > header small, :root[data-theme="dark"] .password-card > header p, :root[data-theme="dark"] .password-strength-heading span, :root[data-theme="dark"] .password-strength li, :root[data-theme="dark"] .password-help { color: var(--app-text-muted); } :root[data-theme="dark"] .password-security-note { border-top-color: var(--app-border); } :root[data-theme="dark"] .password-security-note > span { background: color-mix(in srgb, #11805f 22%, var(--app-surface)); color: #6fe0bd; } :root[data-theme="dark"] .password-card { border-color: var(--app-border); background: color-mix(in srgb, var(--app-surface) 94%, transparent); } :root[data-theme="dark"] .password-card > header { border-bottom-color: var(--app-border); } :root[data-theme="dark"] .password-validation { background: color-mix(in srgb, #a82e40 22%, var(--app-surface)); border-color: color-mix(in srgb, #a82e40 40%, var(--app-border)); color: #ffc6cc; } :root[data-theme="dark"] .password-field > span:first-child { color: var(--app-text); } :root[data-theme="dark"] .password-input-wrap input { background: var(--app-input-bg); border-color: var(--app-input-border); color: var(--app-text); } :root[data-theme="dark"] .password-input-wrap button { color: var(--app-text-muted); } :root[data-theme="dark"] .password-input-wrap button:hover { background: var(--app-surface-hover); color: var(--app-text); } :root[data-theme="dark"] .password-strength { background: var(--app-surface-2); border-color: var(--app-border); } :root[data-theme="dark"] .password-strength li i { border-color: var(--app-border); } :root[data-theme="dark"] .password-submit:disabled { background: var(--app-surface-2); color: var(--app-text-muted); } /* ===== Detalhe de conexão Salesforce (related-records.css) ===== */ :root[data-theme="dark"] .credential-value strong { color: var(--app-text); } /* ===== Botões primários: o brilho de sombra colorida (pensado para fundo claro, onde uma sombra azulada lê como "luz ambiente") vira um halo neon sobre um fundo quase preto. No escuro, a elevação passa a ler como sombra neutra (preto), e o gradiente é escurecido ~12-15% para o botão se integrar à superfície em vez de "flutuar" sobre ela. ===== */ :root[data-theme="dark"] .button-primary, :root[data-theme="dark"] .app-main .btn-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent, #25a9e8) 88%, black), color-mix(in srgb, var(--brand-primary, #0877d1) 84%, black)); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .button-primary:hover, :root[data-theme="dark"] .app-main .btn-primary:hover { box-shadow: 0 12px 26px rgba(0, 0, 0, .55); } :root[data-theme="dark"] .password-submit { background: linear-gradient(135deg, color-mix(in srgb, #118bd8 88%, black), color-mix(in srgb, #0872c8 84%, black)); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .password-submit:not(:disabled):hover { box-shadow: 0 12px 26px rgba(0, 0, 0, .55); } :root[data-theme="dark"] .password-lock { background: linear-gradient(145deg, color-mix(in srgb, #0b84d2 88%, black), color-mix(in srgb, #0869b2 84%, black)); box-shadow: 0 8px 18px rgba(0, 0, 0, .4); } :root[data-theme="dark"] .profile-app-icon { box-shadow: 0 10px 24px rgba(0, 0, 0, .4); } :root[data-theme="dark"] .tenant-icon-preview, :root[data-theme="dark"] .account-modal-avatar-preview, :root[data-theme="dark"] .profile-avatar-preview, :root[data-theme="dark"] .avatar-crop-dialog .password-lock { box-shadow: 0 10px 24px rgba(0, 0, 0, .4); } /* ===== Badges/pills e ícones-chip: fundo pastel + texto saturado (pensados para fundo branco) tornavam-se um chip claro mal-integrado sobre fundo escuro. O acento (cor do texto/ícone) já é preservado — só o fundo pastel é escurecido para a superfície. ===== */ :root[data-theme="dark"] .status-pill.success, :root[data-theme="dark"] .execution-state.success, :root[data-theme="dark"] .state-badge { background: color-mix(in srgb, #13805f 26%, var(--app-surface)); border-color: color-mix(in srgb, #13805f 45%, var(--app-border)); color: #6fe0bd; } :root[data-theme="dark"] .status-pill.danger, :root[data-theme="dark"] .execution-state.danger { background: color-mix(in srgb, #c53c4a 26%, var(--app-surface)); border-color: color-mix(in srgb, #c53c4a 45%, var(--app-border)); color: #ff9aa8; } :root[data-theme="dark"] .status-pill.running, :root[data-theme="dark"] .execution-state.running { background: color-mix(in srgb, #0872c8 26%, var(--app-surface)); border-color: color-mix(in srgb, #0872c8 45%, var(--app-border)); color: #7cc3ef; } :root[data-theme="dark"] .state-badge.inactive { background: var(--app-surface-2); color: var(--app-text-muted); } :root[data-theme="dark"] .live-badge { background: color-mix(in srgb, #168b68 22%, var(--app-surface)); border-color: color-mix(in srgb, #168b68 42%, var(--app-border)); color: #6fe0bd; } :root[data-theme="dark"] .live-badge.is-stale { background: color-mix(in srgb, #8a6d1c 26%, var(--app-surface)); border-color: color-mix(in srgb, #8a6d1c 45%, var(--app-border)); color: #e8c877; } :root[data-theme="dark"] .metric-icon.blue, :root[data-theme="dark"] .metric-icon.violet, :root[data-theme="dark"] .card-glyph.blue, :root[data-theme="dark"] .card-glyph.cyan, :root[data-theme="dark"] .integration-icon.sf, :root[data-theme="dark"] .integration-icon.ai, :root[data-theme="dark"] .record-avatar { background: color-mix(in srgb, var(--brand-primary, #168bd1) 22%, var(--app-surface)); } :root[data-theme="dark"] .provider-mark.codex { background: color-mix(in srgb, #168bd1 22%, var(--app-surface)); } :root[data-theme="dark"] .metric-icon.green { background: color-mix(in srgb, var(--green, #13a879) 22%, var(--app-surface)); } :root[data-theme="dark"] .metric-icon.red { background: color-mix(in srgb, var(--red, #e24b5b) 22%, var(--app-surface)); } :root[data-theme="dark"] .card-glyph.slate, :root[data-theme="dark"] .integration-icon.git { background: var(--app-surface-2); color: var(--app-text-muted); } :root[data-theme="dark"] .provider-mark.claude { background: color-mix(in srgb, #b7562e 24%, var(--app-surface)); color: #f0a878; }