/* Modo noturno: excecoes escritas a mao. O grosso das cores e automatico
   (flua-cores.css, gerado por scripts/modo-noturno/gerar-cores.js); aqui fica
   so o que a inversao automatica erra. Toda regra comeca com
   :root[data-theme="dark"] -- tema.js sempre poe o atributo, inclusive quando
   segue o sistema -- e a especificidade extra vence o CSS da pagina.
   Regra de uma tela so vai na camada <pagina>-flua.css dela, com o mesmo prefixo. */

/* Logo navy da marca (login, launcher, cabecalhos): some no fundo escuro.
   O logo branco do topo do shell (flua-logo-branco.svg) nao entra. */
:root[data-theme="dark"] img[src*="flua-logo.svg"] {
  filter: brightness(0) invert(0.93);
}

/* ---------- Modulos de cobranca compartilhados (orcamentos, Novo Atendimento, agenda) ----------
   recebimento-dinheiro.js, valor-cobranca.js e terminal.js injetam CSS proprio (texto de
   <style> montado por JS), que a conversao automatica nao alcanca. Os style= inline de
   valor-cobranca.js so cedem com !important; o seletor por atributo pega so a variante
   exata que o modulo escreve. Nesta folha, var(--h-X, #X) = "a versao escura de X". */
:root[data-theme="dark"] #srd-modal .srd-card {
  background: var(--h-ffffff, #fff);
}
:root[data-theme="dark"] #srd-modal .srd-aviso,
:root[data-theme="dark"] .svc-aviso,
:root[data-theme="dark"] .sim-terminal-aviso {
  color: var(--h-9a5a00, #9A5A00);
}

/* Caixa grande do valor (valor-cobranca.js, tons roxo e verde em style=) */
:root[data-theme="dark"] .svc-caixa[style*="#EEF1F3"] {
  background: var(--h-eef1f3, #EEF1F3) !important;
  border-color: var(--h-c6d0d8, #C6D0D8) !important;
  color: var(--h-0b2c45, #0B2C45) !important;
}
:root[data-theme="dark"] .svc-caixa[style*="#E3EFEC"] {
  background: var(--h-e3efec, #E3EFEC) !important;
  border-color: var(--h-b9d7cf, #B9D7CF) !important;
  color: var(--h-17765f, #17765F) !important;
}
:root[data-theme="dark"] .svc-caixa > span {
  color: var(--h-55697a, #55697A);
}

/* Linhas do pagamento dividido (pagamento-dividido.js): os style= inline ja saem
   convertidos (gerar-cores.js entende ${cond ? '#a' : '#b'}). So o alerta ambar
   do "selecione o caixa" (classe .simpd-caixa--pendente, posta pelo modulo) precisa
   continuar aceso -- o pastel #fbbf24 viraria um ambar escuro apagado. */
:root[data-theme="dark"] .simpd-caixa--pendente {
  border-color: #F0B65A !important;
}
:root[data-theme="dark"] .simpd-parte select,
:root[data-theme="dark"] .simpd-parte input {
  color: var(--h-0b2c45, #0B2C45);
}

/* Terminal favorito (terminal.js): --color-primary nao existe em todas as telas e
   o fallback cru (navy) some no fundo escuro */
:root[data-theme="dark"] .sim-terminal-salvar,
:root[data-theme="dark"] .sim-terminal-fav-usar {
  color: var(--h-0b2c45, #0B2C45);
}
:root[data-theme="dark"] .sim-terminal-fav {
  border-color: var(--h-c6d0d8, #C6D0D8);
  background: var(--h-fbfaf7, #FBFAF7);
}
:root[data-theme="dark"] .sim-terminal-fav-remover {
  color: var(--h-8a99a6, #8A99A6);
}
:root[data-theme="dark"] .sim-terminal-fav-remover:hover {
  color: var(--h-b4233a, #B4233A);
}

/* Selo de assinante e aviso de cadastro duplicado da busca de paciente (busca-paciente.js,
   CSS injetado com hex cru): agenda, orcamentos, enfermagem, cupons, odontograma */
:root[data-theme="dark"] .badge-cartao-assinante {
  background: var(--h-f3ebe0, #F3EBE0);
  color: var(--h-9a5a00, #9A5A00);
  border-color: rgba(240, 182, 90, 0.35); /* literal: var(--rgb-*) aqui daria a versao escura do ambar */
}
:root[data-theme="dark"] .aviso-cadastro-dup.is-uso {
  color: var(--h-047857, #047857);
}
:root[data-theme="dark"] .aviso-cadastro-dup.is-parado {
  color: var(--h-b4233a, #B4233A);
}

/* ---------- Fundo e caixa dos modais compartilhados (frente shell) ----------
   O veu navy rgba(11,44,69,.6) escurece a tela clara; sobre a tela escura ele da
   quase a mesma cor do fundo e a caixa do modal (azul-noite) se perdia nele.
   No escuro o veu fica mais preto e a caixa ganha um contorno claro de 1px
   (box-shadow, para nao mexer no tamanho). #srd-modal/.srd-overlay ficam no
   bloco dos modulos de cobranca. */
:root[data-theme="dark"] .modal-overlay,
:root[data-theme="dark"] .agenda-modal-overlay,
:root[data-theme="dark"] .alert-overlay,
:root[data-theme="dark"] .fd-fundo,
:root[data-theme="dark"] .flua-modal-overlay,
:root[data-theme="dark"] .mural-overlay,
:root[data-theme="dark"] .mural-dialogo-fundo,
:root[data-theme="dark"] .modal-novo-atendimento {
  background-color: rgba(2, 9, 15, 0.72);
}
:root[data-theme="dark"] #cartModal,
:root[data-theme="dark"] #checkoutModal,
:root[data-theme="dark"] .cart-choice-overlay {
  background-color: rgba(2, 9, 15, 0.78) !important;
}
/* Overlays montados por JS (agenda.js, orcamentos.js, novo-atendimento.js). Com
   el.style.cssText o navegador reescreve o atributo com espacos -- as duas formas. */
:root[data-theme="dark"] [style*="background:rgba(11,44,69,0.6)"],
:root[data-theme="dark"] [style*="background: rgba(11, 44, 69, 0.6)"] {
  background: rgba(2, 9, 15, 0.72) !important;
}
:root[data-theme="dark"] .alert-content,
:root[data-theme="dark"] .fd-caixa,
:root[data-theme="dark"] .agenda-modal,
:root[data-theme="dark"] .flua-modal,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .mural-dialogo {
  box-shadow: 0 0 0 1px rgba(232, 238, 243, 0.12), 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* "Faltam preencher" (campos-obrigatorios.js injeta CSS com hex cru): faixa creme
   clara no meio do modal escuro. Vale para todas as telas que usam
   SimCampos.checar, inclusive o Novo Atendimento. */
:root[data-theme="dark"] .sim-campos-aviso {
  background: var(--status-maint-bg);
  border-color: rgba(240, 182, 90, 0.4);
  color: var(--status-maint);
}
:root[data-theme="dark"] .sim-campo-faltando {
  outline-color: var(--status-maint) !important;
  background-color: var(--status-maint-bg);
}

/* Fila do medico (fila-medico.js, cor em style=): o triangulo de prioridade ativo
   e ambar escuro (#9A5A00) e o inativo cinza claro (#C6D0D8) -- no escuro o
   inativo brilhava mais que o ativo. Inverte a enfase sem mexer no claro. */
:root[data-theme="dark"] [data-sim-prioridade][data-sim-prioridade-estado="S"] {
  color: var(--status-maint) !important;
}
:root[data-theme="dark"] [data-sim-prioridade][data-sim-prioridade-estado="N"] {
  color: rgba(232, 238, 243, 0.32) !important;
}

/* Campo nativo SEM fundo proprio (prompt do showPrompt, .fd-campo, inputs montados
   por JS): com color-scheme dark o navegador pinta cinza #3B3B3B, que nao e da
   paleta. Especificidade zero (:where) -- qualquer regra da tela vence esta; ela so
   preenche o que ninguem pintou, com o equivalente escuro do branco. */
:where(:root[data-theme="dark"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"]), textarea, select) {
  background-color: var(--h-ffffff, #fff);
  color: var(--flua-navy);
}

/* Variaveis da MARCA (--color-primary*): servir-pagina.js (brand-ssr) e brand.js
   (applyBrand) as gravam com hex cru, calculado da cor primaria -- a conversao
   automatica nao alcanca. No escuro elas passam a apontar para os tokens Flua.
   !important porque o brand.js grava no style do <html> (inline sem !important). */
:root[data-theme="dark"] {
  --color-primary: var(--flua-navy) !important;
  --color-primary-dark: var(--primary-dark) !important;
  --color-primary-darker: var(--primary-dark) !important;
  --color-primary-light: var(--h-eef1f3, #EEF1F3) !important;
  --color-primary-lighter: var(--gray-100) !important;
  --color-secondary: var(--primary-light) !important;
  --color-accent: var(--primary-light) !important;
  --color-sidebar-bg: var(--h-eef1f3, #EEF1F3) !important;
  --color-text-on-primary: var(--flua-white) !important;
}

/* Seta dos selects dos modais compartilhados: e um SVG em data-URI (cor dentro da
   URL, fora da conversao) em #55697A, que no escuro ficava ~2,4:1. Mesma seta,
   em --text-muted escuro (#A3B3C0). */
:root[data-theme="dark"] .agenda-modal select,
:root[data-theme="dark"] .alert-overlay select,
:root[data-theme="dark"] .modal-novo-atendimento select,
:root[data-theme="dark"] #srd-modal .srd-select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M1%201.5l5%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22%23A3B3C0%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* SimTema.lerNoClaro (tema.js) troca o tema por um instante para LER cores do
   claro; sem isto, --transition: all faria tudo animar na ida e na volta. */
:root[data-tema-lendo] *,
:root[data-tema-lendo] *::before,
:root[data-tema-lendo] *::after {
  transition: none !important;
}