/* ═════════════════════════════════════════════════════════════════════════
   ☀️🌙 O TEMA DA ROTA PRÓSPERA — claro e escuro   [ID: WEB-TEMA-CSS]
   ═════════════════════════════════════════════════════════════════════════

   🔒 Pedido dele em 06/10/2026: *"assim como tem a função modo claro e modo
   escuro no CRM, faz algo para o rota próspera"*.

   ⚠️ LEIA ANTES DE "ARRUMAR": este arquivo reescreve a COR dos utilitários do
   Tailwind dentro de `.dark`, em vez de espalhar `dark:` por milhares de linhas
   de HTML e de JS. É a mesma receita do CRM (`src/index.css`), de propósito —
   e pelos mesmos dois motivos:

     1. Cobre também o que é pintado pelo JS e o que nasce de dado.
     2. Uma tela nova já nasce com o tema certo, sem ninguém lembrar do `dark:`.

   O preço: casa por NOME DE CLASSE, então `[class~="bg-white"]` não pega
   `bg-white/90`. Por isso as opacidades têm linha própria lá embaixo, e os
   `hover:` usam `[class*=]`.

   🔒 A PALETA É GRAFITE, NÃO AZUL-MARINHO — decisão dele de 05/10/2026 no CRM
   (*"deixa mais black que azul"*), e aqui ela já nasce certa. A régua: cinzas
   com saturação ≤ 6%, matiz ~230°. Uma pitada de azul fica, porque cinza puro
   no escuro parece poeira; mas ela não pode ser NOMEÁVEL — se alguém olhar e
   disser "isso é azul", subiu demais. O indigo da marca tem de ser a única cor
   da tela.

   🔴 O que NÃO obedece a este arquivo: quem pinta por `style=` inline. Na Rota
   isso é só o `_shareCardNode` do `app.js` (o cartão que vira imagem para
   mandar no WhatsApp) — e aquele é certo ficar claro, porque sai do app e vai
   para a conversa de outra pessoa. Antes de dizer que a troca acabou, `grep`
   por hex.

   Afinar o tema é mexer nas nove variáveis abaixo — o resto se ajusta sozinho.
   ═════════════════════════════════════════════════════════════════════════ */

html.dark {
    color-scheme: dark;
    --fundo:        #131419;  /* a tela por trás de tudo */
    --superficie:   #1a1c21;  /* o cartão, um degrau acima do fundo */
    --superficie-2: #23252b;  /* campo, selo neutro, pílula apagada */
    --realce:       #26282f;  /* o mouse em cima */
    --realce-forte: #30323a;  /* o mouse em cima do que já estava realçado */
    --linha:        #2c2e35;  /* borda do cartão */
    --linha-fraca:  #212329;  /* divisória entre linhas de uma lista */
    --menu:         #16181d;  /* o menu da esquerda */
    --menu-pe:      #0d0e11;
}

/* ⚠️ Preto puro (#000) cansa em tela grande e some a borda do cartão. O fundo
   é grafite; quem dá a sensação de "black" é a AUSÊNCIA de matiz. */
.dark body { background: var(--fundo); color: #e8e9ec; }
.dark ::-webkit-scrollbar-thumb { background: #3f4147; }
.dark ::-webkit-scrollbar-thumb:hover { background: #55575f; }

/* ── fundos neutros ─────────────────────────────────────────────────────── */
.dark [class~="bg-white"], .dark [class~="focus:bg-white"]:focus { background-color: var(--superficie); }
.dark [class~="bg-slate-50"], .dark [class~="bg-gray-50"] { background-color: var(--fundo); }
.dark [class~="bg-slate-100"], .dark [class~="bg-gray-100"] { background-color: var(--superficie-2); }
.dark [class~="bg-slate-200"] { background-color: var(--realce-forte); }
.dark [class~="bg-slate-800"] { background-color: var(--superficie-2); }
.dark [class~="bg-slate-900"] { background-color: var(--menu); }
.dark [class~="bg-slate-950"] { background-color: var(--menu-pe); }

/* As mesmas cores com opacidade. ⚠️ `[class~=]` casa o token inteiro, então
   cada uma precisa aparecer aqui com a sua barra — não há atalho.
   🔒 `bg-white/10`, `/15` e `/30` ficam de FORA: aquelas moram em cima do
   painel de degradê escuro, onde o véu branco é o desenho, não o fundo. */
.dark [class~="bg-slate-50/70"], .dark [class~="bg-slate-50/60"],
.dark [class~="bg-slate-50/50"], .dark [class*="hover:bg-slate-50/50"]:hover { background-color: var(--fundo); }
.dark [class~="bg-slate-200/70"] { background-color: var(--superficie-2); }

/* ── o mouse em cima ────────────────────────────────────────────────────── */
.dark [class*="hover:bg-slate-50"]:hover, .dark [class*="hover:bg-gray-50"]:hover { background-color: var(--realce); }
.dark [class*="hover:bg-slate-100"]:hover, .dark [class*="hover:bg-gray-100"]:hover { background-color: var(--realce-forte); }
.dark [class*="hover:bg-slate-200"]:hover { background-color: var(--realce-forte); }
.dark [class*="hover:bg-white"]:hover { background-color: var(--realce); }

/* ── texto ──────────────────────────────────────────────────────────────── */
.dark [class~="text-slate-900"], .dark [class~="text-gray-900"],
.dark [class*="hover:text-slate-900"]:hover { color: #f7f7f9; }
.dark [class~="text-slate-800"], .dark [class*="hover:text-slate-800"]:hover { color: #e8e9ec; }
.dark [class~="text-slate-700"], .dark [class*="hover:text-slate-700"]:hover { color: #c9cad1; }
.dark [class~="text-slate-600"], .dark [class*="hover:text-slate-600"]:hover { color: #a8aab3; }
.dark [class~="text-slate-500"] { color: #8d8f99; }
.dark [class~="text-slate-400"], .dark [class*="hover:text-slate-400"]:hover { color: #7b7d87; }
/* ⚠️ O 300 e o 200 NÃO seguem a escada: no claro eles são cinza-clarinho sobre
   fundo escuro (o painel do mês, os selos do degradê). Escurecê-los sumiria com
   o texto justamente onde ele já estava certo. */
.dark [class~="text-slate-300"] { color: #c0c2ca; }
.dark [class~="text-slate-200"] { color: #dedfe4; }

/* ── linhas ─────────────────────────────────────────────────────────────── */
.dark [class~="border-slate-200"], .dark [class~="border-gray-200"] { border-color: var(--linha); }
.dark [class~="border-slate-300"] { border-color: #3d3f47; }
.dark [class~="border-slate-100"], .dark [class~="border-slate-50"] { border-color: var(--linha-fraca); }
.dark [class~="border-slate-800"] { border-color: #1f2126; }
.dark [class~="divide-slate-100"] > * + *, .dark [class~="divide-slate-200"] > * + * { border-color: var(--linha-fraca); }
.dark [class*="hover:border-slate-200"]:hover { border-color: #3d3f47; }
.dark [class*="hover:border-slate-400"]:hover { border-color: #6b6d78; }
.dark [class~="ring-white"] { --tw-ring-color: var(--superficie); }

/* ═════════════════════════════════════════════════════════════════════════
   AS CORES COM RECADO
   🔒 Marca e selos NÃO escurecem junto: eles existem para se destacar. O que
   muda é o fundo (que no claro é um véu pastel e no escuro vira véu
   translúcido) e o texto, que clareia para continuar legível em cima dele.
   ═════════════════════════════════════════════════════════════════════════ */
.dark [class~="bg-indigo-50"] { background-color: rgba(99,102,241,.18); }
.dark [class~="bg-indigo-100"] { background-color: rgba(99,102,241,.24); }
.dark [class*="hover:bg-indigo-50"]:hover { background-color: rgba(99,102,241,.32); }
.dark [class*="hover:bg-indigo-100"]:hover { background-color: rgba(99,102,241,.42); }
.dark [class~="border-indigo-100"], .dark [class~="border-indigo-200"] { border-color: rgba(99,102,241,.3); }
.dark [class*="hover:border-indigo-300"]:hover { border-color: #6366f1; }
.dark [class~="text-indigo-600"], .dark [class~="text-indigo-700"], .dark [class~="text-indigo-800"],
.dark [class*="hover:text-indigo-700"]:hover { color: #a5b4fc; }

.dark [class~="bg-amber-50"], .dark [class~="bg-amber-100"],
.dark [class~="bg-yellow-50"], .dark [class~="bg-yellow-100"] { background-color: rgba(245,158,11,.16); }
.dark [class~="text-amber-900"], .dark [class~="text-amber-800"],
.dark [class~="text-amber-700"], .dark [class~="text-amber-600"] { color: #fcd34d; }
.dark [class~="border-amber-200"], .dark [class~="border-amber-100"] { border-color: rgba(245,158,11,.35); }

.dark [class~="bg-rose-50"], .dark [class~="bg-rose-100"],
.dark [class~="bg-red-50"], .dark [class~="bg-red-100"] { background-color: rgba(244,63,94,.16); }
.dark [class~="text-rose-900"], .dark [class~="text-rose-800"], .dark [class~="text-rose-700"],
.dark [class~="text-rose-600"], .dark [class~="text-red-700"], .dark [class~="text-red-600"] { color: #fda4af; }
.dark [class~="border-rose-200"], .dark [class~="border-red-200"] { border-color: rgba(244,63,94,.35); }

.dark [class~="bg-emerald-50"], .dark [class~="bg-emerald-100"],
.dark [class~="bg-green-50"], .dark [class~="bg-green-100"] { background-color: rgba(16,185,129,.16); }
.dark [class~="text-emerald-800"], .dark [class~="text-emerald-700"], .dark [class~="text-emerald-600"],
.dark [class~="text-green-700"], .dark [class~="text-green-600"] { color: #6ee7b7; }
.dark [class~="border-emerald-200"], .dark [class~="border-green-200"] { border-color: rgba(16,185,129,.35); }

.dark [class~="bg-sky-50"], .dark [class~="bg-sky-100"],
.dark [class~="bg-blue-50"], .dark [class~="bg-blue-100"] { background-color: rgba(14,165,233,.16); }
.dark [class~="text-sky-800"], .dark [class~="text-sky-700"], .dark [class~="text-sky-600"],
.dark [class~="text-blue-800"], .dark [class~="text-blue-700"], .dark [class~="text-blue-600"] { color: #7dd3fc; }
.dark [class~="border-sky-200"], .dark [class~="border-blue-200"] { border-color: rgba(14,165,233,.35); }

.dark [class~="bg-violet-50"], .dark [class~="bg-violet-100"],
.dark [class~="bg-purple-50"], .dark [class~="bg-purple-100"] { background-color: rgba(139,92,246,.16); }
.dark [class~="text-violet-700"], .dark [class~="text-violet-600"],
.dark [class~="text-purple-700"], .dark [class~="text-purple-600"] { color: #c4b5fd; }

/* Botão cheio da marca: continua cheio, só um tom abaixo do clarão do dia. */
.dark [class~="bg-indigo-600"] { background-color: #4f46e5; }
.dark [class*="hover:bg-indigo-700"]:hover { background-color: #4338ca; }

/* ── formulário ─────────────────────────────────────────────────────────── */
/* A lista do <select> é desenhada pelo sistema: sem isto ela abre branca. */
.dark select option { background: var(--superficie); }
.dark input, .dark textarea, .dark select { color: #e8e9ec; }
.dark input::placeholder, .dark textarea::placeholder { color: #6a6c76; }
/* 🔴 O seletor de data e o de cor desenham o próprio ícone em PRETO: sobre o
   campo escuro ele vira um borrão invisível. */
.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.75); }

/* ── a imagem no escuro ─────────────────────────────────────────────────── */
/* 🔒 Foto NÃO leva filtro: a capa da viagem e as fotos do álbum são o retrato
   do lugar, e escurecê-las seria mentir sobre o que ele fotografou. Só o que
   é desenho de interface (o logo) ganha um tom a menos de brilho. */
.dark .logo-da-marca { filter: brightness(.95); }

/* ═════════════════════════════════════════════════════════════════════════
   🔴 OS DOIS BURACOS DA RECEITA — achados na primeira pintura, 06/10/2026
   ═════════════════════════════════════════════════════════════════════════ */

/* 1. DENTRO DE UM PAINEL DE DEGRADÊ, NADA MUDA.
      Ali o fundo já é escuro no claro e no escuro, e o `bg-white` não é
      superfície: é o botão branco desenhado EM CIMA do degradê. Escurecer
      aquilo some com o botão — foi o que aconteceu com o "Adicionar Despesa"
      do painel do mês. */
.dark [class*="bg-gradient-to"] [class~="bg-white"] { background-color: #fff; }
.dark [class*="bg-gradient-to"] [class*="hover:bg-white"]:hover { background-color: #fff; }
.dark [class*="bg-gradient-to"] [class~="text-slate-900"],
.dark [class*="bg-gradient-to"] [class~="text-slate-800"] { color: #0f172a; }
.dark [class*="bg-gradient-to"] [class~="text-slate-300"] { color: #cbd5e1; }

/* 2. SOMBRA COLORIDA CLARA VIRA HALO.
      `shadow-indigo-100` é um brilho quase branco: no claro ele desenha o
      painel contra a página, no escuro vira um anel aceso em volta. A sombra
      no escuro é PRETA, como manda a física da tela. */
.dark [class*="shadow-indigo-100"], .dark [class*="shadow-slate-100"] {
    --tw-shadow-color: rgba(0,0,0,.55);
    --tw-shadow: 0 10px 15px -3px rgba(0,0,0,.55), 0 4px 6px -4px rgba(0,0,0,.55);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* 3. O BOTÃO QUE FLUTUA EM CIMA DE UMA FOTO CONTINUA BRANCO.
      `bg-white/90` na Rota é sempre isso: o "Pôr uma foto" e a lixeira em cima
      da capa da viagem, e o "usar como capa" em cima da miniatura do álbum.
      🔴 A regra do degradê (1) não serve aqui, porque o que está embaixo é uma
      FOTO quando a viagem tem capa — e foto não leva filtro. Então o botão é
      branco nos dois temas, com o texto escuro junto; senão ele vira um borrão
      cinza em cima da imagem. */
.dark [class~="bg-white/90"] { background-color: rgba(255,255,255,.9); }
.dark [class~="bg-white/90"][class*="text-slate-"] { color: #334155; }
.dark [class~="bg-white/90"][class*="border-slate-"] { border-color: #e2e8f0; }