/* Sistema de Temas - Controle de Benefícios */

/* Reset básico */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Variáveis do Tema Claro */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --bg-tertiary: #e5e7eb;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --border-color: #d1d5db;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  
  /* Cores Primárias */
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #60a5fa;
  
  /* Cores de Estado */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #06b6d4;
  
  /* Menu Sidebar - Modo Claro */
  --sidebar-bg-from: #4f46e5;
  --sidebar-bg-to: #3b82f6;
  --sidebar-text: #e0e7ff;
  --sidebar-text-active: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.15);
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --sidebar-active: rgba(255, 255, 255, 0.2);
}

/* Variáveis do Tema Escuro */
.dark {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --border-color: #4b5563;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  
  /* Menu Sidebar - Modo Escuro */
  --sidebar-bg-from: #1e293b;
  --sidebar-bg-to: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #f1f5f9;
  --sidebar-border: rgba(148, 163, 184, 0.15);
  --sidebar-hover: rgba(148, 163, 184, 0.1);
  --sidebar-active: rgba(148, 163, 184, 0.2);
}

/* Estilos Base */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Botão de Alternância de Tema - DESATIVADO */
.theme-toggle {
  display: none !important;
}

/* Cards */
.card, .bg-white {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-tertiary) !important;
  cursor: not-allowed;
}

/* Botões */
.btn, button {
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-primary, .bg-blue-600, .bg-blue-500 {
  background-color: var(--primary) !important;
  color: white !important;
}

.btn-primary:hover, .bg-blue-600:hover, .bg-blue-500:hover:not(:disabled) {
  background-color: var(--primary-dark) !important;
}

.bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

.bg-gray-50 {
  background-color: var(--bg-secondary) !important;
}

/* Textos */
.text-gray-900 {
  color: var(--text-primary) !important;
}

.text-gray-600, .text-gray-500 {
  color: var(--text-secondary) !important;
}

.text-gray-700 {
  color: var(--text-primary) !important;
}

/* Bordas */
.border-gray-200, .border-gray-300 {
  border-color: var(--border-color) !important;
}

/* Links */
a {
  color: var(--primary);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-dark);
}

/* Tabelas */
table {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

thead {
  background-color: var(--bg-tertiary);
}

tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
}

tbody tr:hover {
  background-color: var(--bg-tertiary);
}

/* Alertas */
.alert {
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

.alert-success, .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid var(--success);
  color: var(--success) !important;
}

.alert-error, .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid var(--error);
  color: var(--error) !important;
}

.alert-warning, .bg-yellow-100 {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid var(--warning);
  color: var(--warning) !important;
}

.alert-info, .bg-blue-100 {
  background-color: rgba(6, 182, 212, 0.1) !important;
  border: 1px solid var(--info);
  color: var(--info) !important;
}

/* Header */
header {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}

/* Sidebar */
.sidebar {
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
}

.sidebar-item {
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.sidebar-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.sidebar-item.active {
  background-color: var(--primary);
  color: white;
}

/* Sombras */
.shadow-sm {
  box-shadow: var(--shadow) !important;
}

.shadow {
  box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/* ==========================================================================
   Painéis em tom pastel no tema escuro
   ==========================================================================

   As regras acima já resolvem o caso comum: .bg-white, .bg-gray-50/100 e os
   .text-gray-* viram as variáveis do tema. O que escapava eram os painéis de
   destaque coloridos — "Adicionar Novo Desconto" (bg-gradient from-amber-50),
   caixas de aviso em bg-blue-50, resumos em bg-green-50 e afins.

   O resultado era o pior dos dois mundos: o fundo continuava creme/azul claro,
   enquanto os rótulos dentro dele, em .text-gray-700, eram forçados para quase
   branco pela regra de texto — texto claro sobre fundo claro, ilegível.

   Aqui cada tom pastel vira um véu translúcido da mesma cor sobre o fundo
   escuro. Continua sendo um bloco destacado, com a mesma cor de sempre, só que
   legível. Os textos coloridos escuros (text-*-700/800/900) sobem para o tom
   claro correspondente da mesma paleta.

   Duas escolhas que valem registro:

   - :not([class*="dark:bg-"]) e companhia deixam de fora quem já resolveu o
     próprio caso com variante dark: do Tailwind. Quem fez certo continua no
     comando; ninguém precisa desfazer nada.

   - background-image: none apaga o gradiente pastel. Só as classes claras
     (from-*-50/100) entram na lista, então cabeçalho com gradiente forte
     (from-indigo-600 to-purple-600) continua intacto.

   Os tons 100 de vermelho, verde, amarelo e azul ficam de fora de propósito:
   já são tratados como alerta mais acima, e mexer neles mudaria os badges de
   status espalhados pelo sistema. */

.dark .bg-red-50:not([class*="dark:bg-"]),
.dark .from-red-50:not([class*="dark:from-"]),
.dark .to-red-50:not([class*="dark:to-"]) {
  background-color: rgba(239, 68, 68, .13) !important;
  background-image: none !important;
  border-color: rgba(239, 68, 68, .38);
}

.dark .bg-orange-50:not([class*="dark:bg-"]),
.dark .bg-orange-100:not([class*="dark:bg-"]),
.dark .from-orange-50:not([class*="dark:from-"]),
.dark .to-orange-50:not([class*="dark:to-"]) {
  background-color: rgba(249, 115, 22, .13) !important;
  background-image: none !important;
  border-color: rgba(249, 115, 22, .38);
}

.dark .bg-amber-50:not([class*="dark:bg-"]),
.dark .bg-amber-100:not([class*="dark:bg-"]),
.dark .from-amber-50:not([class*="dark:from-"]),
.dark .from-amber-100:not([class*="dark:from-"]),
.dark .to-amber-50:not([class*="dark:to-"]),
.dark .to-amber-100:not([class*="dark:to-"]) {
  background-color: rgba(245, 158, 11, .13) !important;
  background-image: none !important;
  border-color: rgba(245, 158, 11, .38);
}

.dark .bg-yellow-50:not([class*="dark:bg-"]),
.dark .from-yellow-50:not([class*="dark:from-"]),
.dark .to-yellow-50:not([class*="dark:to-"]),
.dark .to-yellow-100:not([class*="dark:to-"]) {
  background-color: rgba(234, 179, 8, .13) !important;
  background-image: none !important;
  border-color: rgba(234, 179, 8, .38);
}

.dark .bg-green-50:not([class*="dark:bg-"]),
.dark .from-green-50:not([class*="dark:from-"]),
.dark .to-green-50:not([class*="dark:to-"]) {
  background-color: rgba(34, 197, 94, .13) !important;
  background-image: none !important;
  border-color: rgba(34, 197, 94, .38);
}

.dark .bg-emerald-50:not([class*="dark:bg-"]),
.dark .bg-emerald-100:not([class*="dark:bg-"]),
.dark .from-emerald-50:not([class*="dark:from-"]),
.dark .to-emerald-50:not([class*="dark:to-"]) {
  background-color: rgba(16, 185, 129, .13) !important;
  background-image: none !important;
  border-color: rgba(16, 185, 129, .38);
}

.dark .bg-teal-50:not([class*="dark:bg-"]),
.dark .bg-teal-100:not([class*="dark:bg-"]),
.dark .from-teal-50:not([class*="dark:from-"]),
.dark .to-teal-50:not([class*="dark:to-"]) {
  background-color: rgba(20, 184, 166, .13) !important;
  background-image: none !important;
  border-color: rgba(20, 184, 166, .38);
}

.dark .bg-cyan-50:not([class*="dark:bg-"]),
.dark .bg-cyan-100:not([class*="dark:bg-"]),
.dark .from-cyan-50:not([class*="dark:from-"]),
.dark .to-cyan-50:not([class*="dark:to-"]) {
  background-color: rgba(6, 182, 212, .13) !important;
  background-image: none !important;
  border-color: rgba(6, 182, 212, .38);
}

.dark .bg-sky-50:not([class*="dark:bg-"]),
.dark .bg-sky-100:not([class*="dark:bg-"]),
.dark .from-sky-50:not([class*="dark:from-"]),
.dark .to-sky-50:not([class*="dark:to-"]) {
  background-color: rgba(14, 165, 233, .13) !important;
  background-image: none !important;
  border-color: rgba(14, 165, 233, .38);
}

.dark .bg-blue-50:not([class*="dark:bg-"]),
.dark .from-blue-50:not([class*="dark:from-"]),
.dark .to-blue-50:not([class*="dark:to-"]) {
  background-color: rgba(59, 130, 246, .13) !important;
  background-image: none !important;
  border-color: rgba(59, 130, 246, .38);
}

.dark .bg-indigo-50:not([class*="dark:bg-"]),
.dark .bg-indigo-100:not([class*="dark:bg-"]),
.dark .from-indigo-50:not([class*="dark:from-"]),
.dark .from-indigo-100:not([class*="dark:from-"]),
.dark .to-indigo-50:not([class*="dark:to-"]),
.dark .to-indigo-100:not([class*="dark:to-"]) {
  background-color: rgba(99, 102, 241, .13) !important;
  background-image: none !important;
  border-color: rgba(99, 102, 241, .38);
}

.dark .bg-purple-50:not([class*="dark:bg-"]),
.dark .bg-purple-100:not([class*="dark:bg-"]),
.dark .from-purple-50:not([class*="dark:from-"]),
.dark .from-purple-100:not([class*="dark:from-"]),
.dark .to-purple-50:not([class*="dark:to-"]),
.dark .to-purple-100:not([class*="dark:to-"]) {
  background-color: rgba(168, 85, 247, .13) !important;
  background-image: none !important;
  border-color: rgba(168, 85, 247, .38);
}

.dark .bg-pink-50:not([class*="dark:bg-"]),
.dark .bg-pink-100:not([class*="dark:bg-"]),
.dark .from-pink-50:not([class*="dark:from-"]),
.dark .to-pink-50:not([class*="dark:to-"]) {
  background-color: rgba(236, 72, 153, .13) !important;
  background-image: none !important;
  border-color: rgba(236, 72, 153, .38);
}

.dark .bg-rose-50:not([class*="dark:bg-"]),
.dark .bg-rose-100:not([class*="dark:bg-"]),
.dark .from-rose-50:not([class*="dark:from-"]),
.dark .to-rose-50:not([class*="dark:to-"]) {
  background-color: rgba(244, 63, 94, .13) !important;
  background-image: none !important;
  border-color: rgba(244, 63, 94, .38);
}

/* Cinzas pastel: seguem as variáveis do tema, como o resto da tela. */
.dark .bg-slate-50:not([class*="dark:bg-"]),
.dark .bg-slate-100:not([class*="dark:bg-"]),
.dark .from-gray-50:not([class*="dark:from-"]),
.dark .from-slate-50:not([class*="dark:from-"]),
.dark .to-gray-50:not([class*="dark:to-"]),
.dark .to-gray-100:not([class*="dark:to-"]),
.dark .to-slate-50:not([class*="dark:to-"]),
.dark .to-slate-100:not([class*="dark:to-"]) {
  background-color: var(--bg-tertiary) !important;
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   Textos escuros coloridos: sobem para o tom claro da mesma paleta.
   São títulos e rótulos dentro dos painéis acima (text-amber-900 em cima de
   bg-amber-50, por exemplo) — no escuro, o tom 700/800/900 fica ilegível.
   -------------------------------------------------------------------------- */

.dark .text-red-700:not([class*="dark:text-"]),
.dark .text-red-800:not([class*="dark:text-"]),
.dark .text-red-900:not([class*="dark:text-"])       { color: #fca5a5 !important; }

.dark .text-orange-700:not([class*="dark:text-"]),
.dark .text-orange-800:not([class*="dark:text-"]),
.dark .text-orange-900:not([class*="dark:text-"])    { color: #fdba74 !important; }

.dark .text-amber-700:not([class*="dark:text-"]),
.dark .text-amber-800:not([class*="dark:text-"]),
.dark .text-amber-900:not([class*="dark:text-"])     { color: #fcd34d !important; }

.dark .text-yellow-700:not([class*="dark:text-"]),
.dark .text-yellow-800:not([class*="dark:text-"]),
.dark .text-yellow-900:not([class*="dark:text-"])    { color: #fde047 !important; }

.dark .text-green-700:not([class*="dark:text-"]),
.dark .text-green-800:not([class*="dark:text-"]),
.dark .text-green-900:not([class*="dark:text-"])     { color: #86efac !important; }

.dark .text-emerald-700:not([class*="dark:text-"]),
.dark .text-emerald-800:not([class*="dark:text-"]),
.dark .text-emerald-900:not([class*="dark:text-"])   { color: #6ee7b7 !important; }

.dark .text-teal-700:not([class*="dark:text-"]),
.dark .text-teal-800:not([class*="dark:text-"]),
.dark .text-teal-900:not([class*="dark:text-"])      { color: #5eead4 !important; }

.dark .text-cyan-700:not([class*="dark:text-"]),
.dark .text-cyan-800:not([class*="dark:text-"]),
.dark .text-cyan-900:not([class*="dark:text-"])      { color: #67e8f9 !important; }

.dark .text-sky-700:not([class*="dark:text-"]),
.dark .text-sky-800:not([class*="dark:text-"]),
.dark .text-sky-900:not([class*="dark:text-"])       { color: #7dd3fc !important; }

.dark .text-blue-700:not([class*="dark:text-"]),
.dark .text-blue-800:not([class*="dark:text-"]),
.dark .text-blue-900:not([class*="dark:text-"])      { color: #93c5fd !important; }

.dark .text-indigo-700:not([class*="dark:text-"]),
.dark .text-indigo-800:not([class*="dark:text-"]),
.dark .text-indigo-900:not([class*="dark:text-"])    { color: #a5b4fc !important; }

.dark .text-purple-700:not([class*="dark:text-"]),
.dark .text-purple-800:not([class*="dark:text-"]),
.dark .text-purple-900:not([class*="dark:text-"])    { color: #d8b4fe !important; }

.dark .text-violet-700:not([class*="dark:text-"]),
.dark .text-violet-800:not([class*="dark:text-"]),
.dark .text-violet-900:not([class*="dark:text-"])    { color: #c4b5fd !important; }

.dark .text-pink-700:not([class*="dark:text-"]),
.dark .text-pink-800:not([class*="dark:text-"]),
.dark .text-pink-900:not([class*="dark:text-"])      { color: #f9a8d4 !important; }

.dark .text-rose-700:not([class*="dark:text-"]),
.dark .text-rose-800:not([class*="dark:text-"]),
.dark .text-rose-900:not([class*="dark:text-"])      { color: #fda4af !important; }

.dark .text-slate-700:not([class*="dark:text-"]),
.dark .text-slate-800:not([class*="dark:text-"]),
.dark .text-slate-900:not([class*="dark:text-"])     { color: var(--text-primary) !important; }

/* text-gray-800 faltava na lista de cinzas lá de cima: é título de painel
   (banco_conta.php:310, conciliacao_asaas.php:187) e, sem tratamento, fica
   quase preto sobre o fundo escuro. Os tons 400 e 300 não entram: no escuro
   já são o cinza apagado que se espera de texto secundário. */
.dark .text-gray-800:not([class*="dark:text-"])      { color: var(--text-primary) !important; }

/* Cinzas de fundo que faltavam. Só a forma direta — hover:bg-gray-200 e afins
   são estado de passagem em botão claro, e o Tailwind resolve por conta. */
.dark .bg-gray-200:not([class*="dark:bg-"]),
.dark .bg-gray-300:not([class*="dark:bg-"]) {
  background-color: var(--bg-tertiary) !important;
}

/* --------------------------------------------------------------------------
   Passar o mouse não pode acender a linha.

   hover:bg-gray-50 e parentes (80 usos, em linha de tabela e item de lista)
   escapavam de tudo acima, que trata só o estado normal: no escuro, a linha
   piscava clara sob o cursor.
   -------------------------------------------------------------------------- */

.dark .hover\:bg-gray-50:hover:not([class*="dark:hover:bg-"]),
.dark .hover\:bg-gray-100:hover:not([class*="dark:hover:bg-"]),
.dark .hover\:bg-gray-200:hover:not([class*="dark:hover:bg-"]),
.dark .hover\:bg-slate-50:hover:not([class*="dark:hover:bg-"]),
.dark .hover\:bg-slate-100:hover:not([class*="dark:hover:bg-"]) {
  background-color: var(--bg-tertiary) !important;
}

.dark .hover\:bg-red-50:hover:not([class*="dark:hover:bg-"]),
.dark .hover\:bg-red-100:hover:not([class*="dark:hover:bg-"])    { background-color: rgba(239, 68, 68, .18) !important; }

.dark .hover\:bg-amber-50:hover:not([class*="dark:hover:bg-"]),
.dark .hover\:bg-amber-100:hover:not([class*="dark:hover:bg-"])  { background-color: rgba(245, 158, 11, .18) !important; }

.dark .hover\:bg-green-50:hover:not([class*="dark:hover:bg-"]),
.dark .hover\:bg-green-100:hover:not([class*="dark:hover:bg-"])  { background-color: rgba(34, 197, 94, .18) !important; }

.dark .hover\:bg-teal-50:hover:not([class*="dark:hover:bg-"])    { background-color: rgba(20, 184, 166, .18) !important; }

.dark .hover\:bg-blue-50:hover:not([class*="dark:hover:bg-"]),
.dark .hover\:bg-blue-100:hover:not([class*="dark:hover:bg-"])   { background-color: rgba(59, 130, 246, .18) !important; }

.dark .hover\:bg-indigo-50:hover:not([class*="dark:hover:bg-"])  { background-color: rgba(99, 102, 241, .18) !important; }

.dark .hover\:bg-purple-50:hover:not([class*="dark:hover:bg-"]),
.dark .hover\:bg-purple-100:hover:not([class*="dark:hover:bg-"]) { background-color: rgba(168, 85, 247, .18) !important; }

/* Botão neutro (Voltar, Cancelar): bg-gray-100 já vira escuro pela regra lá de
   cima, então o texto precisa acompanhar. */
.dark .bg-gray-100.text-gray-700,
.dark .bg-gray-200.text-gray-700,
.dark .bg-gray-100.text-gray-800 {
  color: var(--text-primary) !important;
}

/* Animações de Transição */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}