/* Camada de tema escuro do Núcleo.
 *
 * As folhas de cada página foram escritas só para o tema claro: há mais de 200
 * seletores com fundo branco espalhados. Em vez de reescrever todas, esta
 * camada redefine os tokens compartilhados e cobre as peças que se repetem
 * (cabeçalho, container, card, modal, tabela, formulário).
 *
 * Carregue como ÚLTIMA folha da página, para vencer no empate de especificidade.
 * Tudo aqui é escopado em .theme-dark: no tema claro este arquivo não faz nada.
 */

/* Paleta propria. Os nomes --nc-* sao exclusivos desta camada, entao podem
   viver em qualquer pagina sem afetar nada. */
.theme-dark {
  --nc-fundo: #0f172a;
  --nc-fundo-2: #0b1222;
  --nc-superficie: #0b1222;
  --nc-superficie-2: #152136;
  --nc-linha: #1e293b;
  --nc-texto: #e5e7eb;
  --nc-texto-medio: #cbd5e1;
  --nc-texto-fraco: #94a3b8;
  --nc-azul: #4f9dff;
  --nc-laranja: #ff9a3c;
  --nucleo-bg: var(--nc-fundo);
  --nucleo-card: var(--nc-superficie);
  --nucleo-line: var(--nc-linha);
  --nucleo-text: var(--nc-texto);
  --nucleo-muted: var(--nc-texto-fraco);
  --bg: var(--nc-fundo);
  --card: var(--nc-superficie);
  --text: var(--nc-texto);
  --muted: var(--nc-texto-fraco);
  --border: var(--nc-linha);
  color-scheme: dark;
}

/* Os tokens ALHEIOS so podem ser redefinidos dentro das ferramentas. Fora
   delas isso vazava: o --cor-primaria-azul do style.css pinta os titulos, e o
   painel tem a propria paleta escura, que nao deve ser sobrescrita. */
body.nucleo-tool-shell.theme-dark {
  /* tokens do theme-vars.css */
  --bg: var(--nc-fundo);
  --card: var(--nc-superficie);
  --text: var(--nc-texto);
  --muted: var(--nc-texto-fraco);
  --border: var(--nc-linha);
  --shadow: 0 8px 22px rgba(0, 0, 0, .45);

  /* tokens do style.css */
  --cor-texto-principal: var(--nc-texto);
  --fundo-claro: var(--nc-fundo);
  --cor-primaria-azul: var(--nc-azul);

  /* tokens do nucleo-dashboard.css */
  --nucleo-bg: var(--nc-fundo);
  --nucleo-card: var(--nc-superficie);
  --nucleo-line: var(--nc-linha);
  --nucleo-text: var(--nc-texto);
  --nucleo-muted: var(--nc-texto-fraco);

  color-scheme: dark;
}

/* Dentro das ferramentas o tema escuro vale inteiro. */
body.nucleo-tool-shell.theme-dark {
  background-color: var(--nc-fundo);
  color: var(--nc-texto);
}

/* Fora delas, escurece so o cabecalho: o corpo das telas de conta, cadastro,
   contratacao e painel foi desenhado para fundo claro e fica ilegivel se
   invertido pela metade. */
body.theme-dark:not(.nucleo-tool-shell) .header,
body.theme-dark:not(.nucleo-tool-shell) .topbar {
  background-color: var(--nc-fundo-2);
  border-bottom-color: var(--nc-linha);
  color: var(--nc-texto);
}
body.theme-dark:not(.nucleo-tool-shell) .header a,
body.theme-dark:not(.nucleo-tool-shell) .header .header-title,
body.theme-dark:not(.nucleo-tool-shell) .topbar a { color: var(--nc-texto); }

/* Campos de autenticacao, cadastro, perfil e demais formularios fora das
   ferramentas. Cor explicita evita texto branco sobre input claro. */
body.theme-dark:not(.nucleo-tool-shell) input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark:not(.nucleo-tool-shell) select,
body.theme-dark:not(.nucleo-tool-shell) textarea {
  border-color: #33465e !important;
  background-color: #152136 !important;
  color: #f1f5f9 !important;
  caret-color: #f1f5f9;
  color-scheme: dark;
}
body.theme-dark:not(.nucleo-tool-shell) input::placeholder,
body.theme-dark:not(.nucleo-tool-shell) textarea::placeholder { color: #91a4bb !important; opacity: 1; }
body.theme-dark:not(.nucleo-tool-shell) input:focus,
body.theme-dark:not(.nucleo-tool-shell) select:focus,
body.theme-dark:not(.nucleo-tool-shell) textarea:focus {
  border-color: #5ca4f5 !important;
  background-color: #182840 !important;
  box-shadow: 0 0 0 4px rgba(79,157,255,.16) !important;
}
body.theme-dark:not(.nucleo-tool-shell) input:disabled,
body.theme-dark:not(.nucleo-tool-shell) select:disabled {
  border-color: #27384d !important;
  background-color: #101c2d !important;
  color: #91a4bb !important;
}
body.theme-dark .password-toggle { color: #c4d2e3 !important; }
body.theme-dark .password-toggle:hover,
body.theme-dark .password-toggle:focus-visible { color: #fff !important; }
body.theme-dark input:-webkit-autofill,
body.theme-dark input:-webkit-autofill:hover,
body.theme-dark input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f5f9 !important;
  box-shadow: 0 0 0 1000px #152136 inset !important;
  caret-color: #f1f5f9;
}

/* ---------- superfícies ---------- */
body.nucleo-tool-shell.theme-dark .header,
body.nucleo-tool-shell.theme-dark .topbar,
body.nucleo-tool-shell.theme-dark .container,
body.nucleo-tool-shell.theme-dark .card,
body.nucleo-tool-shell.theme-dark .box,
body.nucleo-tool-shell.theme-dark .panel,
body.nucleo-tool-shell.theme-dark .admin-card,
body.nucleo-tool-shell.theme-dark .profile-card,
body.nucleo-tool-shell.theme-dark .sub-card,
body.nucleo-tool-shell.theme-dark .sub-item,
body.nucleo-tool-shell.theme-dark .dash-card,
body.nucleo-tool-shell.theme-dark .modal-box,
body.nucleo-tool-shell.theme-dark .modal-card,
body.nucleo-tool-shell.theme-dark .code-box,
body.nucleo-tool-shell.theme-dark .tool-card,
body.nucleo-tool-shell.theme-dark .empty,
body.nucleo-tool-shell.theme-dark .skeleton,
body.nucleo-tool-shell.theme-dark .admin-toolbar,
body.nucleo-tool-shell.theme-dark .admin-search,
body.nucleo-tool-shell.theme-dark .bundle-card {
  background-color: var(--nc-superficie);
  border-color: var(--nc-linha);
  color: var(--nc-texto);
}

body.nucleo-tool-shell.theme-dark .header,
body.nucleo-tool-shell.theme-dark .topbar {
  background-color: var(--nc-fundo-2);
  border-bottom-color: var(--nc-linha);
}

/* ---------- texto ---------- */
body.nucleo-tool-shell.theme-dark h1,
body.nucleo-tool-shell.theme-dark h2,
body.nucleo-tool-shell.theme-dark h3,
body.nucleo-tool-shell.theme-dark h4,
body.nucleo-tool-shell.theme-dark strong,
body.nucleo-tool-shell.theme-dark b,
body.nucleo-tool-shell.theme-dark label,
body.nucleo-tool-shell.theme-dark th {
  color: var(--nc-texto);
}
body.nucleo-tool-shell.theme-dark .brand__title { color: #e5e7eb !important; }

body.nucleo-tool-shell.theme-dark p,
body.nucleo-tool-shell.theme-dark td,
body.nucleo-tool-shell.theme-dark li,
body.nucleo-tool-shell.theme-dark small,
body.nucleo-tool-shell.theme-dark .muted,
body.nucleo-tool-shell.theme-dark .sub,
body.nucleo-tool-shell.theme-dark .hint {
  color: var(--nc-texto-medio);
}

/* Link no conteudo fica azul; o menu lateral e o cabecalho tem cor propria e
   ficam de fora, senao todo item do menu virava link azul. */
body.nucleo-tool-shell.theme-dark a { color: var(--nc-azul); }
body.nucleo-tool-shell.theme-dark .nucleo-sidebar a,
body.nucleo-tool-shell.theme-dark .nucleo-sidebar button,
body.nucleo-tool-shell.theme-dark .nucleo-topbar a,
body.nucleo-tool-shell.theme-dark .public-sidebar a,
body.nucleo-tool-shell.theme-dark .public-sidebar button { color: #aebed1; }
body.nucleo-tool-shell.theme-dark .nucleo-sidebar a:hover,
body.nucleo-tool-shell.theme-dark .nucleo-sidebar button:hover,
body.nucleo-tool-shell.theme-dark .nucleo-sidebar a.active,
body.nucleo-tool-shell.theme-dark .public-sidebar a:hover,
body.nucleo-tool-shell.theme-dark .public-sidebar a.active { color: #fff; }

/* ---------- formulários ---------- */
body.nucleo-tool-shell.theme-dark input,
body.nucleo-tool-shell.theme-dark select,
body.nucleo-tool-shell.theme-dark textarea {
  background-color: var(--nc-fundo-2);
  border-color: var(--nc-linha);
  color: var(--nc-texto);
}

body.nucleo-tool-shell.theme-dark input::placeholder,
body.nucleo-tool-shell.theme-dark textarea::placeholder { color: var(--nc-texto-fraco); }

body.nucleo-tool-shell.theme-dark input:focus,
body.nucleo-tool-shell.theme-dark select:focus,
body.nucleo-tool-shell.theme-dark textarea:focus {
  border-color: var(--nc-azul);
  outline-color: var(--nc-azul);
}

/* ---------- tabelas ---------- */
body.nucleo-tool-shell.theme-dark table { color: var(--nc-texto); }
body.nucleo-tool-shell.theme-dark thead th { background-color: var(--nc-superficie-2); color: var(--nc-texto); }
body.nucleo-tool-shell.theme-dark tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, .025); }
body.nucleo-tool-shell.theme-dark tbody tr:hover { background-color: rgba(79, 157, 255, .10); }
body.nucleo-tool-shell.theme-dark td,
body.nucleo-tool-shell.theme-dark th { border-color: var(--nc-linha); }

/* ---------- botões neutros ---------- */
body.nucleo-tool-shell.theme-dark button.secondary,
body.nucleo-tool-shell.theme-dark .btn-secondary,
body.nucleo-tool-shell.theme-dark .row-btn,
body.nucleo-tool-shell.theme-dark .cancel-btn,
body.nucleo-tool-shell.theme-dark .actions button {
  background-color: var(--nc-superficie-2);
  border-color: var(--nc-linha);
  color: var(--nc-texto);
}

body.nucleo-tool-shell.theme-dark button.secondary:hover,
body.nucleo-tool-shell.theme-dark .btn-secondary:hover,
body.nucleo-tool-shell.theme-dark .row-btn:hover,
body.nucleo-tool-shell.theme-dark .cancel-btn:hover,
body.nucleo-tool-shell.theme-dark .actions button:hover { background-color: #1c2b44; }

/* Laranja e azul de marca continuam legíveis: só o texto branco é garantido. */
body.nucleo-tool-shell.theme-dark .primary,
body.nucleo-tool-shell.theme-dark button.primary,
body.nucleo-tool-shell.theme-dark .btn-primary { color: #fff; }

/* ---------- divisores e sombras ---------- */
body.nucleo-tool-shell.theme-dark hr,
body.nucleo-tool-shell.theme-dark .divider { border-color: var(--nc-linha); background-color: var(--nc-linha); }

/* O logo negativo já vem trocado pelo tema.js; aqui só evitamos halo branco. */
body.nucleo-tool-shell.theme-dark .logo img,
body.nucleo-tool-shell.theme-dark .brand img { background: none; }

/* ==================================================================
   FERRAMENTAS
   Pressão do Vento e FDVE já tratam o tema escuro por conta própria e
   servem de referência. As demais só cobrem parte das peças, então aqui
   vão as que ficaram claras, usando a mesma paleta delas.
   ================================================================== */
body.nucleo-tool-shell.theme-dark .hero,
body.nucleo-tool-shell.theme-dark .hero-banner,
body.nucleo-tool-shell.theme-dark .formula-box,
body.nucleo-tool-shell.theme-dark .log-box,
body.nucleo-tool-shell.theme-dark .vk-box,
body.nucleo-tool-shell.theme-dark .table-wrap,
body.nucleo-tool-shell.theme-dark .readonly,
body.nucleo-tool-shell.theme-dark .tooltip-text,
body.nucleo-tool-shell.theme-dark .stepbtn {
  background: var(--nc-superficie);
  border-color: var(--nc-linha);
  color: var(--nc-texto);
}

body.nucleo-tool-shell.theme-dark .result-section__title,
body.nucleo-tool-shell.theme-dark .tabela-resultado th,
body.nucleo-tool-shell.theme-dark .norma-badge {
  background: var(--nc-superficie-2);
  color: var(--nc-texto);
  border-color: var(--nc-linha);
}

/* Botões neutros. Os primários ficam de fora: a cor deles é da marca. */
body.nucleo-tool-shell.theme-dark .btn--secondary,
body.nucleo-tool-shell.theme-dark .btn--ghost,
body.nucleo-tool-shell.theme-dark .btn-secundario,
body.nucleo-tool-shell.theme-dark .btn-upload,
body.nucleo-tool-shell.theme-dark .import-menu > .btn {
  background: var(--nc-superficie-2);
  border-color: var(--nc-linha);
  color: var(--nc-texto);
}

/* Desenho técnico e esquema vivem em fundo claro por natureza: mantém a
   moldura branca para o traço não sumir. */
body.nucleo-tool-shell.theme-dark .canvas-wrap,
body.nucleo-tool-shell.theme-dark .esquema,
body.nucleo-tool-shell.theme-dark canvas { background: #fff; border-radius: 8px; }
body.nucleo-tool-shell.theme-dark .section-chart,
body.nucleo-tool-shell.theme-dark .plotly-chart,
body.nucleo-tool-shell.theme-dark .modal-grafico__chart,
body.nucleo-tool-shell.theme-dark .js-plotly-plot,
body.nucleo-tool-shell.theme-dark .plot-container,
body.nucleo-tool-shell.theme-dark .svg-container { background: #fff !important; }

/* Contraste nas ferramentas: varredura automatica.
   Gerado por auditoria de contraste: cada cor abaixo media menos de 4.5:1
   sobre a superficie escura. Cinza virou token da paleta; cor com
   significado foi clareada mantendo o matiz. */
body.nucleo-tool-shell.theme-dark .calc-status { color: #cc5e0a; }  /* era #b45309 */
body.nucleo-tool-shell.theme-dark .calc-status.ok { color: #1f8f4a; }  /* era #166534 */
body.nucleo-tool-shell.theme-dark .card label { color: #e8eefb; }  /* era #333 */
body.nucleo-tool-shell.theme-dark .choice-svg { color: #207eda; }  /* era #185FA5 */
body.nucleo-tool-shell.theme-dark .crit-list .cli .cbadge { color: #3884c3; }  /* era #08131c */
body.nucleo-tool-shell.theme-dark .figure .hint { color: #b6c6d9; }  /* era #6b7280 */
body.nucleo-tool-shell.theme-dark .resultado-aprovado i { color: #23933c; }  /* era #1E7E34 */
body.nucleo-tool-shell.theme-dark .resultado-aprovado span { color: #23933c; }  /* era #1E7E34 */
body.nucleo-tool-shell.theme-dark .resultado-reprovado i { color: #d55144; }  /* era #C0392B */
body.nucleo-tool-shell.theme-dark .resultado-reprovado span { color: #d55144; }  /* era #C0392B */
body.nucleo-tool-shell.theme-dark .status-bad { color: #d55144; }  /* era #C0392B */
body.nucleo-tool-shell.theme-dark .status-ok { color: #23933c; }  /* era #1E7E34 */
body.nucleo-tool-shell.theme-dark .valor-nok { color: #d55144; }  /* era #C0392B */
body.nucleo-tool-shell.theme-dark .valor-ok { color: #23933c; }  /* era #1E7E34 */
body.nucleo-tool-shell.theme-dark .wizard-step.passado .wizard-label { color: #23933c; }  /* era #1e7e34 */
body.nucleo-tool-shell.theme-dark label { color: #e8eefb; }  /* era #333 */

/* Caixas com fundo proprio no tema escuro.
   Elas trazem o proprio fundo claro, entao nao basta clarear o texto: a caixa
   inteira precisa virar. A cor do significado fica na borda, e o texto de
   paragrafo longo fica neutro, que cansa menos que um bloco inteiro colorido. */
body.nucleo-tool-shell.theme-dark .scope-note {
  background: rgba(157, 196, 100, .10);
  border-color: rgba(157, 196, 100, .38);
  color: #d5e0ec;
}
body.nucleo-tool-shell.theme-dark .nota-info {
  background: rgba(245, 158, 11, .12);
  border-left-color: #f59e0b;
  color: #e7dcc6;
}
body.nucleo-tool-shell.theme-dark .result-banner--ok {
  background: rgba(34, 197, 94, .13);
  border-color: rgba(34, 197, 94, .38);
  color: #86efac;
}
body.nucleo-tool-shell.theme-dark .result-banner--nok {
  background: rgba(239, 68, 68, .13);
  border-color: rgba(239, 68, 68, .38);
  color: #fca5a5;
}

/* Titulos do termo dentro do modal: o corpo ja escurece pelo .modal-content,
   mas os <h4> e <strong> precisam de cor propria para continuarem sendo
   hierarquia, e nao texto igual ao resto. O /contratar/ forca tema claro,
   entao na pratica isto vale para o modal da home. */
body.theme-dark #termsModal .modal-content h3,
body.theme-dark #termsModal .modal-content h4,
body.theme-dark #termsModal .modal-content strong { color: #e8edf6; }
