/* ═══════════════════════════════════════════════════════════════════
   wt-tema.css — o modo escuro do sistema WaveTech
   ═══════════════════════════════════════════════════════════════════
   O sistema inteiro pinta a partir de uma lista de cores com nome, que
   nasce no wt-nav.js. Aqui essa lista é redefinida quando a pessoa liga
   o modo escuro — e só isso já vira a maior parte das telas.

   POR QUE `html[data-tema="escuro"]` E NÃO `:root`:
   as duas listas precisam conviver no mesmo navegador, e esta tem que
   ganhar da outra sem depender de qual arquivo carregou primeiro.
   `html[...]` pesa mais que `:root`, então ganha sempre.

   O claro continua sendo o padrão: sem a marca no <html>, nada aqui
   vale. Ninguém cai no escuro sem ter pedido.
   ═══════════════════════════════════════════════════════════════════ */

html[data-tema="escuro"] {
  /* ── O VERDE DA CASA, E SÓ ELE ──────────────────────────────────
     A página inteira desce pro verde profundo da marca (#052B2F, o
     mesmo do topo da barra lateral). Nada de preto nem de cinza: o
     escuro daqui é a WaveTech com a luz baixa, não outro sistema.

     A barra lateral desce mais um degrau pra continuar sendo uma
     barra — se ela ficasse igual à página, sumiria dentro dela.
     E o cartão sobe um degrau, pra flutuar acima do papel.

              barra  #03191C   ← mais fundo
              papel  #052B2F   ← o verde da marca
             cartão  #0A3D42   ← sobe pra se destacar
     ──────────────────────────────────────────────────────────── */
  --wt-side: #03191C;
  --wt-side2: #07343A;
  --wt-side-ink: #CFE6E5;
  --wt-side-mut: #7FA6A9;

  --wt-paper: #052B2F;
  --wt-card: #0A3D42;
  --wt-surf2: #073338;   /* faixas e cabeçalhos dentro do cartão */
  --wt-surf3: #06272B;
  --wt-line: #17555B;

  /* o teal da marca sobe pra brilhar em cima do verde escuro */
  --wt-em: #00B6BF;
  --wt-em2: #35D6DD;
  --wt-em-soft: rgba(53, 214, 221, .14);
  --wt-em-ink: #8AE7EC;

  --wt-amber: #D8A860;
  --wt-amber2: #E7C489;

  --wt-ink: #EAF6F5;
  --wt-mut: #A3C4C4;
  --wt-mut2: #7BA0A2;

  --wt-sh: 0 1px 3px rgba(0, 20, 22, .40), 0 8px 24px rgba(0, 20, 22, .46);

  /* semáforo puxado pro claro: em cima de verde escuro, o verde e o
     vermelho de dia ficam sujos e quase se confundem entre si */
  --wt-ok: #35D6A5;    --wt-ok-soft: rgba(53, 214, 165, .15);   --wt-ok-ink: #74E7C2;
  --wt-danger: #FF7A66; --wt-danger-soft: rgba(255, 122, 102, .15); --wt-danger-ink: #FF9E8E;
  --wt-warn: #F0BE68;  --wt-warn-soft: rgba(240, 190, 104, .15); --wt-warn-ink: #F6D496;
  --wt-info: #7FB6F0;  --wt-info-soft: rgba(127, 182, 240, .15);

  /* as 5 clínicas: no claro a escala vai do verde fechado ao aberto; no
     escuro ela sobe inteira, senão São Paulo (o tom mais fechado) some
     dentro do fundo — foi o que aconteceu no primeiro corte */
  --wt-c1: #3FBCC6; --wt-c2: #4ACDD5; --wt-c3: #5FDCE3; --wt-c4: #7DE8EE; --wt-c5: #A8F2F5;
  --wt-roxo: #B79BF5; --wt-indigo: #9BA6F7; --wt-ciano: #4FD3E0;

  /* a faixa de topo: o mesmo papel translúcido, no verde da casa */
  --wt-topo1: rgba(10, 61, 66, .94);
  --wt-topo2: rgba(6, 39, 43, .90);

  /* ── o segundo conjunto de nomes ──
     Treze telas foram escritas antes da lista comum e batizaram as
     cores de outro jeito (--wt-green em vez de --wt-em, --wt-dark em
     vez de --wt-ink). Elas declaram isso no próprio :root; como este
     bloco pesa mais, ganha das duas. */
  --wt-green: #35D6DD;
  --wt-green-dark: #00B6BF;
  --wt-dark: #EAF6F5;
  --wt-bg: #052B2F;
  --wt-border: #17555B;
  --wt-muted: #A3C4C4;
  --wt-text-muted: #A3C4C4;
  --wt-yellow: #FFC24D;

  color-scheme: dark;   /* barra de rolagem, campos e menus do navegador */
}


/* o fundo tem brumas de cor por cima do papel; no escuro elas precisam
   ser mais discretas, senão viram manchas */
html[data-tema="escuro"] body {
  background:
    radial-gradient(900px 520px at 100% -8%, rgba(231, 196, 137, .06), transparent 62%),
    radial-gradient(760px 420px at -8% 104%, rgba(53, 214, 221, .07), transparent 60%),
    var(--wt-paper) !important;
}

/* ── remendos gerais ──────────────────────────────────────────────
   Pontos onde a cor foi escrita direto no lugar, em vez de sair da
   lista. São os que aparecem em quase toda tela; o resto vai sendo
   apontado pra lista tela por tela. */
html[data-tema="escuro"] .md,
html[data-tema="escuro"] .modal,
html[data-tema="escuro"] .painel,
html[data-tema="escuro"] .card,
html[data-tema="escuro"] .box {
  background-color: var(--wt-card);
  color: var(--wt-ink);
}

html[data-tema="escuro"] input,
html[data-tema="escuro"] select,
html[data-tema="escuro"] textarea {
  background: #06282C !important;
  border-color: var(--wt-line) !important;
  color: var(--wt-ink) !important;
}
html[data-tema="escuro"] input::placeholder,
html[data-tema="escuro"] textarea::placeholder { color: var(--wt-mut2) }
html[data-tema="escuro"] input:focus,
html[data-tema="escuro"] select:focus,
html[data-tema="escuro"] textarea:focus {
  background: #093A3F !important;
  border-color: var(--wt-em2) !important;
}

/* o seletor de data e hora do navegador desenha um ícone preto sobre
   fundo escuro; isto o clareia */
html[data-tema="escuro"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-tema="escuro"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.7);
}

/* Tailwind: as telas de configuração usam classes fixas de cor.
   Enquanto elas não são convertidas, ficam legíveis por aqui. */
html[data-tema="escuro"] .bg-white { background-color: var(--wt-card) !important }
html[data-tema="escuro"] [class*="bg-stone-50"],
html[data-tema="escuro"] [class*="bg-stone-100"] { background-color: var(--wt-surf2) !important }
html[data-tema="escuro"] [class*="border-stone-"] { border-color: var(--wt-line) !important }
html[data-tema="escuro"] [class*="text-stone-9"],
html[data-tema="escuro"] [class*="text-stone-8"],
html[data-tema="escuro"] [class*="text-stone-7"] { color: var(--wt-ink) !important }
html[data-tema="escuro"] [class*="text-stone-5"],
html[data-tema="escuro"] [class*="text-stone-4"],
html[data-tema="escuro"] [class*="text-stone-3"] { color: var(--wt-mut) !important }

/* Os campos e filtros levam um risco branco por dentro, no topo — é o que
   dá o relevo de papel no modo claro. Em fundo escuro esse risco vira uma
   linha acesa em volta de tudo. Fica, mas quase invisível. */
html[data-tema="escuro"] .fsel,
html[data-tema="escuro"] .psel,
html[data-tema="escuro"] .dinp,
html[data-tema="escuro"] .qinput,
html[data-tema="escuro"] .bs,
html[data-tema="escuro"] .hjb,
html[data-tema="escuro"] .wnb,
html[data-tema="escuro"] .mnav-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  border-color: var(--wt-line) !important;
}

/* Botões que no claro são "o verde bem escuro com letra branca". No escuro
   essa mesma cor virou o texto da tela, então eles precisam de outra: viram
   o teal da marca, que continua lendo como botão. */
html[data-tema="escuro"] .bg-wt-dark,
html[data-tema="escuro"] .btn-primary,
html[data-tema="escuro"] .step.cur .step-dot,
html[data-tema="escuro"] .rb.on {
  background: var(--wt-em) !important;
  color: #fff !important;
  border-color: var(--wt-em) !important;
}

/* ── o botão que troca ────────────────────────────────────────────
   Mora no rodapé da barra lateral, ao lado do perfil e do sair. */
.wt-tema {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .14); background: transparent;
  color: var(--wt-side-mut); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .16s; padding: 0;
}
.wt-tema:hover { background: rgba(255, 255, 255, .08); color: #fff }
.wt-tema:focus-visible { outline: 2px solid rgba(0, 156, 163, .6); outline-offset: 1px }
.wt-tema svg { width: 15px; height: 15px }
/* mostra a lua no claro (o que vai acontecer se clicar) e o sol no escuro */
.wt-tema .wt-sol { display: none }
html[data-tema="escuro"] .wt-tema .wt-sol { display: block }
html[data-tema="escuro"] .wt-tema .wt-lua { display: none }

@media (prefers-reduced-motion: reduce) {
  .wt-tema { transition: none }
}