/*
 * Utilitarios de cor que as paginas de relatorio usam e o Filament nao entrega.
 *
 * O painel admin roda com o CSS compilado do proprio Filament, que so inclui as
 * escalas que ele mesmo usa: gray e primary. As paginas de relatorio foram
 * escritas com Tailwind completo na cabeca e pedem verde, vermelho, amarelo,
 * azul e roxo — classes que simplesmente nao existem no bundle. O resultado no
 * navegador:
 *
 *   bg-green-600  -> transparente  (o botao "Exportar XLSX" sumia no fundo escuro)
 *   bg-red-100    -> transparente  (badges de status sem fundo nenhum)
 *   dark:text-gray-300 -> nao aplicava, e o texto ficava cinza-escuro
 *                         sobre fundo escuro, ilegivel
 *
 * Carregado depois do CSS do Filament, via renderHook em VictorPanelProvider.
 * Valores sao os da paleta padrao do Tailwind.
 *
 * Se algum dia o painel ganhar um tema custom compilado (make:filament-theme),
 * este arquivo deixa de ser necessario.
 */

/* ── Cinzas que faltam no modo escuro ─────────────────────────────── */
/* O seletor precisa do prefixo escapado: a classe no HTML e literalmente
   "dark:text-gray-300", entao em CSS vira .dark .dark\:text-gray-300 */
.dark .dark\:text-gray-300 { color: #d4d4d8; }
.dark .dark\:text-gray-500 { color: #a1a1aa; }
.dark .dark\:text-gray-100 { color: #f4f4f5; }
.bg-gray-50  { background-color: #fafafa; }
.bg-gray-100 { background-color: #f4f4f5; }

/* ── Verde ────────────────────────────────────────────────────────── */
.bg-green-50  { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }
.bg-green-700 { background-color: #15803d; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }
.hover\:bg-green-700:hover { background-color: #15803d; }
.dark .dark\:bg-green-900 { background-color: #14532d; }
.dark .dark\:text-green-400 { color: #4ade80; }
.dark .dark\:text-green-300 { color: #86efac; }

/* ── Vermelho ─────────────────────────────────────────────────────── */
.bg-red-50  { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-200 { background-color: #fecaca; }
.bg-red-500 { background-color: #ef4444; }
.bg-red-600 { background-color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.dark .dark\:bg-red-900 { background-color: #7f1d1d; }
.dark .dark\:text-red-400 { color: #f87171; }
.dark .dark\:text-red-300 { color: #fca5a5; }

/* ── Amarelo ──────────────────────────────────────────────────────── */
.bg-yellow-50  { background-color: #fefce8; }
.bg-yellow-100 { background-color: #fef9c3; }
.bg-yellow-200 { background-color: #fef08a; }
.bg-yellow-500 { background-color: #eab308; }
.text-yellow-700 { color: #a16207; }
.text-yellow-800 { color: #854d0e; }
.dark .dark\:bg-yellow-900 { background-color: #713f12; }
.dark .dark\:text-yellow-400 { color: #facc15; }
.dark .dark\:text-yellow-300 { color: #fde047; }

/* ── Azul ─────────────────────────────────────────────────────────── */
.bg-blue-50  { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-600 { background-color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.dark .dark\:bg-blue-900 { background-color: #1e3a8a; }
.dark .dark\:text-blue-400 { color: #60a5fa; }

/* ── Roxo ─────────────────────────────────────────────────────────── */
.bg-purple-100 { background-color: #f3e8ff; }
.text-purple-700 { color: #7e22ce; }
.dark .dark\:bg-purple-900 { background-color: #581c87; }
.dark .dark\:text-purple-400 { color: #c084fc; }

/* ── Fundos coloridos com opacidade (badges no modo escuro) ─────── */
/* Tailwind escreve a opacidade como sufixo /40 na propria classe. */
.dark .dark\:bg-green-900\/10 { background-color: rgba(20,83,45, 0.10); }
.dark .dark\:bg-green-900\/20 { background-color: rgba(20,83,45, 0.20); }
.dark .dark\:bg-green-900\/30 { background-color: rgba(20,83,45, 0.30); }
.dark .dark\:bg-green-900\/40 { background-color: rgba(20,83,45, 0.40); }
.dark .dark\:bg-green-900\/50 { background-color: rgba(20,83,45, 0.50); }
.dark .dark\:bg-red-900\/10 { background-color: rgba(127,29,29, 0.10); }
.dark .dark\:bg-red-900\/20 { background-color: rgba(127,29,29, 0.20); }
.dark .dark\:bg-red-900\/30 { background-color: rgba(127,29,29, 0.30); }
.dark .dark\:bg-red-900\/40 { background-color: rgba(127,29,29, 0.40); }
.dark .dark\:bg-red-900\/50 { background-color: rgba(127,29,29, 0.50); }
.dark .dark\:bg-yellow-900\/10 { background-color: rgba(113,63,18, 0.10); }
.dark .dark\:bg-yellow-900\/20 { background-color: rgba(113,63,18, 0.20); }
.dark .dark\:bg-yellow-900\/30 { background-color: rgba(113,63,18, 0.30); }
.dark .dark\:bg-yellow-900\/40 { background-color: rgba(113,63,18, 0.40); }
.dark .dark\:bg-yellow-900\/50 { background-color: rgba(113,63,18, 0.50); }
.dark .dark\:bg-blue-900\/10 { background-color: rgba(30,58,138, 0.10); }
.dark .dark\:bg-blue-900\/20 { background-color: rgba(30,58,138, 0.20); }
.dark .dark\:bg-blue-900\/30 { background-color: rgba(30,58,138, 0.30); }
.dark .dark\:bg-blue-900\/40 { background-color: rgba(30,58,138, 0.40); }
.dark .dark\:bg-blue-900\/50 { background-color: rgba(30,58,138, 0.50); }
.dark .dark\:bg-purple-900\/10 { background-color: rgba(88,28,135, 0.10); }
.dark .dark\:bg-purple-900\/20 { background-color: rgba(88,28,135, 0.20); }
.dark .dark\:bg-purple-900\/30 { background-color: rgba(88,28,135, 0.30); }
.dark .dark\:bg-purple-900\/40 { background-color: rgba(88,28,135, 0.40); }
.dark .dark\:bg-purple-900\/50 { background-color: rgba(88,28,135, 0.50); }

.bg-gray-700\/40 { background-color: rgba(63, 63, 70, 0.40); }
.bg-gray-50\/50 { background-color: rgba(250, 250, 250, 0.50); }

/* ── Colunas de grid ──────────────────────────────────────────────── */
/* O bundle do Filament so traz sm:grid-cols-3, que e o que ele usa.
   Os relatorios pedem 2, 4 e 6 colunas em varios breakpoints. */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
    /* sm:grid-cols-3 existe no Filament, mas este arquivo carrega depois: sem
       redeclarar, o .grid-cols-1 acima passaria a vencer e os cards de resumo
       cairiam para uma coluna so. */
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}