/**
 * ═══════════════════════════════════════════════════════════════
 * THEME SYSTEM v5.0 - UTILITARIOS E CONTRASTE DE ICONES
 * ═══════════════════════════════════════════════════════════════
 *
 * @description Utilitarios de tema, contraste de icones e color-scheme
 * @version 5.0.0
 * @date 2026-02-05
 * @author ERP.DOTCOMPANY
 * @license Proprietary
 *
 * IMPORTANTE:
 * - Todas as variaveis CSS estao em _css-variables.css (UNICA fonte)
 * - Este arquivo contem apenas: color-scheme, utilitarios e icon contrast
 * - NAO defina variaveis --theme-* ou --color-* aqui
 *
 * ═══════════════════════════════════════════════════════════════
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CSS color-scheme (Browser Integrations)
   Afeta scrollbars, form controls nativos, etc
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root, html.theme-light, html.theme-roxo, html.theme-bordo,
html.theme-malva, html.theme-oliva, html.theme-nevoa, html.theme-taupe {
  color-scheme: light;
}

html.theme-dark, .dark {
  color-scheme: dark;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎯 APLICAÇÃO DAS CORES - Classes Utilitárias
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Backgrounds */
.theme-bg-page {
  background-color: var(--theme-background);
}

.theme-bg-surface {
  background-color: var(--theme-surface);
}

.theme-bg-elevated {
  background-color: var(--theme-surface-elevated);
}

/* Textos */
.theme-text-primary {
  color: var(--theme-text-primary);
}

.theme-text-secondary {
  color: var(--theme-text-secondary);
}

.theme-text-muted {
  color: var(--theme-text-muted);
}

/* Bordas */
.theme-border {
  border-color: var(--theme-border);
}

/* Sombras */
.theme-shadow {
  box-shadow: var(--theme-shadow);
}

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📊 SISTEMA DE CONTRASTE INTELIGENTE PARA ÍCONES v2.0
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   PROBLEMA RESOLVIDO:
   - Ícones transparentes/invisíveis em cards com backgrounds coloridos
   - Baixo contraste entre ícone e fundo (especialmente em light mode)
   - Cores que se misturam com o card

   SOLUÇÃO:
   - Light Mode: Ícones usam cores mais escuras (700/800) para contraste
   - Dark Mode: Backgrounds mais opacos + ícones mais claros (300/400)
   - Contraste mínimo WCAG AA: 4.5:1

   ATUALIZADO: 31/01/2026
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ═══════════════════════════════════════════════════════════════
   🌞 LIGHT MODE - ÍCONES COM ALTO CONTRASTE
   Ícones em backgrounds claros (-50, -100) precisam de cores escuras
   ═══════════════════════════════════════════════════════════════ */

/**
 * REGRA PRINCIPAL: Quando um ícone está dentro de um card com
 * background claro, automaticamente usar cor mais escura (700/800)
 */

/* Cards com gradiente de fundo claro → ícones mais escuros */
/* NOTA: Excluir header (#header-desktop-component) que tem fundo ESCURO com ícones BRANCOS */
[class*="bg-gradient-to"][class*="from-"][class*="-50"] i[class*="bi-"],
[class*="bg-gradient-to"][class*="to-"][class*="-50"] i[class*="bi-"],
.dc-card[class*="bg-"][class*="-50"] > div i[class*="bi-"],
.card[class*="bg-"][class*="-50"] > div i[class*="bi-"],
[class*="bg-"][class*="-50"]:not(body):not(html) > div:not(#header-desktop-component) > i[class*="bi-"],
[class*="bg-"][class*="-50"] i[class*="text-"][class*="-600"] {
  filter: brightness(0.75) saturate(1.3);
}

/* Header: NUNCA escurecer ícones (fundo escuro, ícones devem ser brancos) */
#header-desktop-component i[class*="bi-"],
#header-desktop-component svg,
#header-mobile-component i[class*="bi-"],
#header-mobile-component svg,
header i[class*="bi-"],
header svg {
  filter: none !important;
}

/* Header mobile: action buttons com ícones brancos */
#header-mobile-component .hmc-action-btn i,
#header-mobile-component button i {
  color: rgba(255, 255, 255, 0.9) !important;
  filter: none !important;
}

/* Correções específicas por cor - Light Mode */
/* Violet/Purple */
.bg-violet-50 .text-violet-600,
.bg-purple-50 .text-purple-600,
[class*="from-violet-50"] .text-violet-600,
[class*="from-purple-50"] .text-purple-600 {
  color: #5b21b6 !important; /* violet-800 */
}

/* Blue */
.bg-blue-50 .text-blue-600,
[class*="from-blue-50"] .text-blue-600 {
  color: #1e40af !important; /* blue-800 */
}

/* Indigo */
.bg-indigo-50 .text-indigo-600,
[class*="from-indigo-50"] .text-indigo-600 {
  color: #3730a3 !important; /* indigo-800 */
}

/* Green/Emerald */
.bg-green-50 .text-green-600,
.bg-emerald-50 .text-emerald-600,
[class*="from-green-50"] .text-green-600,
[class*="from-emerald-50"] .text-emerald-600 {
  color: #166534 !important; /* green-800 */
}

/* Teal/Cyan */
.bg-teal-50 .text-teal-600,
.bg-cyan-50 .text-cyan-600,
[class*="from-teal-50"] .text-teal-600,
[class*="from-cyan-50"] .text-cyan-600 {
  color: #115e59 !important; /* teal-800 */
}

/* Sky */
.bg-sky-50 .text-sky-600,
[class*="from-sky-50"] .text-sky-600 {
  color: #075985 !important; /* sky-800 */
}

/* Amber/Orange */
.bg-amber-50 .text-amber-600,
.bg-orange-50 .text-orange-600,
[class*="from-amber-50"] .text-amber-600,
[class*="from-orange-50"] .text-orange-600 {
  color: #92400e !important; /* amber-800 */
}

/* Red/Rose */
.bg-red-50 .text-red-600,
.bg-rose-50 .text-rose-600,
[class*="from-red-50"] .text-red-600,
[class*="from-rose-50"] .text-rose-600 {
  color: #991b1b !important; /* red-800 */
}

/* Pink/Fuchsia */
.bg-pink-50 .text-pink-600,
.bg-fuchsia-50 .text-fuchsia-600,
[class*="from-pink-50"] .text-pink-600,
[class*="from-fuchsia-50"] .text-fuchsia-600 {
  color: #9d174d !important; /* pink-800 */
}

/* Yellow/Lime */
.bg-yellow-50 .text-yellow-600,
.bg-lime-50 .text-lime-600,
[class*="from-yellow-50"] .text-yellow-600,
[class*="from-lime-50"] .text-lime-600 {
  color: #854d0e !important; /* yellow-800 */
}

/* Slate/Gray */
.bg-slate-50 .text-slate-600,
.bg-gray-50 .text-gray-600,
[class*="from-slate-50"] .text-slate-600,
[class*="from-gray-50"] .text-gray-600 {
  color: #1e293b !important; /* slate-800 */
}

/* ═══════════════════════════════════════════════════════════════
   🌙 DARK MODE - BACKGROUNDS E ÍCONES AJUSTADOS
   ═══════════════════════════════════════════════════════════════ */

/**
 * PROBLEMA: Cards com bg-{color}-50 ficam ilegíveis em dark mode
 * SOLUÇÃO: Backgrounds mais opacos (50%) + ícones mais claros (300/400)
 */

/* Backgrounds coloridos claros → versões mais escuras em dark mode */
.dark .bg-purple-50 { background-color: rgb(88 28 135 / 0.5) !important; }
.dark .bg-violet-50 { background-color: rgb(76 29 149 / 0.5) !important; }
.dark .bg-blue-50 { background-color: rgb(30 58 138 / 0.5) !important; }
.dark .bg-indigo-50 { background-color: rgb(49 46 129 / 0.5) !important; }
.dark .bg-orange-50 { background-color: rgb(154 52 18 / 0.5) !important; }
.dark .bg-amber-50 { background-color: rgb(146 64 14 / 0.5) !important; }
.dark .bg-green-50 { background-color: rgb(20 83 45 / 0.5) !important; }
.dark .bg-emerald-50 { background-color: rgb(6 78 59 / 0.5) !important; }
.dark .bg-teal-50 { background-color: rgb(19 78 74 / 0.5) !important; }
.dark .bg-cyan-50 { background-color: rgb(22 78 99 / 0.5) !important; }
.dark .bg-sky-50 { background-color: rgb(12 74 110 / 0.5) !important; }
.dark .bg-red-50 { background-color: rgb(127 29 29 / 0.5) !important; }
.dark .bg-rose-50 { background-color: rgb(136 19 55 / 0.5) !important; }
.dark .bg-yellow-50 { background-color: rgb(113 63 18 / 0.5) !important; }
.dark .bg-lime-50 { background-color: rgb(63 98 18 / 0.5) !important; }
.dark .bg-pink-50 { background-color: rgb(131 24 67 / 0.5) !important; }
.dark .bg-fuchsia-50 { background-color: rgb(112 26 117 / 0.5) !important; }
.dark .bg-slate-50 { background-color: rgb(30 41 59 / 0.5) !important; }
.dark .bg-gray-50 { background-color: rgb(31 41 55 / 0.5) !important; }

/* Backgrounds -100 também precisam de ajuste em dark mode */
.dark .bg-purple-100 { background-color: rgb(88 28 135 / 0.4) !important; }
.dark .bg-violet-100 { background-color: rgb(76 29 149 / 0.4) !important; }
.dark .bg-blue-100 { background-color: rgb(30 58 138 / 0.4) !important; }
.dark .bg-indigo-100 { background-color: rgb(49 46 129 / 0.4) !important; }
.dark .bg-orange-100 { background-color: rgb(154 52 18 / 0.4) !important; }
.dark .bg-amber-100 { background-color: rgb(146 64 14 / 0.4) !important; }
.dark .bg-green-100 { background-color: rgb(20 83 45 / 0.4) !important; }
.dark .bg-emerald-100 { background-color: rgb(6 78 59 / 0.4) !important; }
.dark .bg-teal-100 { background-color: rgb(19 78 74 / 0.4) !important; }
.dark .bg-cyan-100 { background-color: rgb(22 78 99 / 0.4) !important; }
.dark .bg-sky-100 { background-color: rgb(12 74 110 / 0.4) !important; }
.dark .bg-red-100 { background-color: rgb(127 29 29 / 0.4) !important; }
.dark .bg-rose-100 { background-color: rgb(136 19 55 / 0.4) !important; }
.dark .bg-yellow-100 { background-color: rgb(113 63 18 / 0.4) !important; }
.dark .bg-lime-100 { background-color: rgb(63 98 18 / 0.4) !important; }
.dark .bg-pink-100 { background-color: rgb(131 24 67 / 0.4) !important; }
.dark .bg-fuchsia-100 { background-color: rgb(112 26 117 / 0.4) !important; }

/* Textos cinzas - melhor contraste em dark mode */
.dark .text-gray-400 { color: rgb(209 213 219) !important; }
.dark .text-gray-500 { color: rgb(209 213 219) !important; }
.dark .text-gray-600 { color: rgb(229 231 235) !important; }
.dark .text-gray-700 { color: rgb(243 244 246) !important; }
.dark .text-slate-400 { color: rgb(203 213 225) !important; }
.dark .text-slate-500 { color: rgb(203 213 225) !important; }
.dark .text-slate-600 { color: rgb(226 232 240) !important; }

/* Ícones coloridos em dark mode - versões mais claras/vibrantes */
.dark .text-purple-600 { color: rgb(192 132 252) !important; } /* purple-400 */
.dark .text-violet-600 { color: rgb(167 139 250) !important; } /* violet-400 */
.dark .text-blue-600 { color: rgb(96 165 250) !important; }    /* blue-400 */
.dark .text-indigo-600 { color: rgb(129 140 248) !important; } /* indigo-400 */
.dark .text-orange-600 { color: rgb(251 146 60) !important; }  /* orange-400 */
.dark .text-amber-600 { color: rgb(251 191 36) !important; }   /* amber-400 */
.dark .text-green-600 { color: rgb(74 222 128) !important; }   /* green-400 */
.dark .text-emerald-600 { color: rgb(52 211 153) !important; } /* emerald-400 */
.dark .text-teal-600 { color: rgb(45 212 191) !important; }    /* teal-400 */
.dark .text-cyan-600 { color: rgb(34 211 238) !important; }    /* cyan-400 */
.dark .text-sky-600 { color: rgb(56 189 248) !important; }     /* sky-400 */
.dark .text-red-600 { color: rgb(252 165 165) !important; }    /* red-300 */
.dark .text-rose-600 { color: rgb(253 164 175) !important; }   /* rose-300 */
.dark .text-yellow-600 { color: rgb(253 224 71) !important; }  /* yellow-300 */
.dark .text-lime-600 { color: rgb(190 242 100) !important; }   /* lime-300 */
.dark .text-pink-600 { color: rgb(244 114 182) !important; }   /* pink-400 */
.dark .text-fuchsia-600 { color: rgb(232 121 249) !important; }/* fuchsia-400 */

/* Ícones -400 em dark mode também precisam ser mais claros */
.dark .text-purple-400 { color: rgb(216 180 254) !important; } /* purple-300 */
.dark .text-violet-400 { color: rgb(196 181 253) !important; } /* violet-300 */
.dark .text-blue-400 { color: rgb(147 197 253) !important; }   /* blue-300 */
.dark .text-indigo-400 { color: rgb(165 180 252) !important; } /* indigo-300 */
.dark .text-green-400 { color: rgb(134 239 172) !important; }  /* green-300 */
.dark .text-emerald-400 { color: rgb(110 231 183) !important; }/* emerald-300 */
.dark .text-teal-400 { color: rgb(94 234 212) !important; }    /* teal-300 */
.dark .text-cyan-400 { color: rgb(103 232 249) !important; }   /* cyan-300 */
.dark .text-sky-400 { color: rgb(125 211 252) !important; }    /* sky-300 */
.dark .text-amber-400 { color: rgb(252 211 77) !important; }   /* amber-300 */
.dark .text-orange-400 { color: rgb(253 186 116) !important; } /* orange-300 */

/* ═══════════════════════════════════════════════════════════════
   🎨 CLASSES UTILITÁRIAS PARA ÍCONES EM CARDS
   Use estas classes para garantir contraste em qualquer situação
   ═══════════════════════════════════════════════════════════════ */

/**
 * .card-icon-contrast: Aplique em ícones para garantir contraste automático
 * Funciona em light e dark mode, ajusta cor baseado no contexto
 */
.card-icon-contrast {
  filter: brightness(0.85) saturate(1.2);
  transition: filter 0.2s ease;
}

.dark .card-icon-contrast {
  filter: brightness(1.2) saturate(1.1);
}

/**
 * .card-icon-glow: Adiciona efeito de brilho sutil ao ícone
 * Melhora visibilidade em qualquer background
 */
.card-icon-glow {
  text-shadow: 0 0 8px currentColor;
}

.dark .card-icon-glow {
  text-shadow: 0 0 12px currentColor;
}

/**
 * .icon-high-contrast: Força máximo contraste
 * Use quando o ícone PRECISA ser muito visível
 */
.icon-high-contrast {
  filter: contrast(1.5) saturate(1.3) !important;
}

.dark .icon-high-contrast {
  filter: brightness(1.3) saturate(1.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   🔧 CORREÇÕES ESPECÍFICAS PARA GRADIENTES EM CARDS
   Cards com bg-gradient-to-br que usam cores claras
   ═══════════════════════════════════════════════════════════════ */

/* Gradientes com cores claras → ícones precisam de mais contraste */
[class*="bg-gradient-to-br"][class*="from-violet-50"] i,
[class*="bg-gradient-to-br"][class*="from-purple-50"] i,
[class*="bg-gradient-to-br"][class*="from-blue-50"] i,
[class*="bg-gradient-to-br"][class*="from-indigo-50"] i,
[class*="bg-gradient-to-br"][class*="from-green-50"] i,
[class*="bg-gradient-to-br"][class*="from-emerald-50"] i,
[class*="bg-gradient-to-br"][class*="from-teal-50"] i,
[class*="bg-gradient-to-br"][class*="from-cyan-50"] i,
[class*="bg-gradient-to-br"][class*="from-sky-50"] i,
[class*="bg-gradient-to-br"][class*="from-amber-50"] i,
[class*="bg-gradient-to-br"][class*="from-orange-50"] i,
[class*="bg-gradient-to-br"][class*="from-yellow-50"] i,
[class*="bg-gradient-to-br"][class*="from-red-50"] i,
[class*="bg-gradient-to-br"][class*="from-pink-50"] i,
[class*="bg-gradient-to-br"][class*="from-slate-50"] i {
  filter: brightness(0.8) saturate(1.25);
}

/* Em dark mode, não aplicar o filtro de escurecimento */
.dark [class*="bg-gradient-to-br"][class*="from-violet-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-purple-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-blue-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-indigo-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-green-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-emerald-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-teal-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-cyan-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-sky-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-amber-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-orange-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-yellow-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-red-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-pink-50"] i,
.dark [class*="bg-gradient-to-br"][class*="from-slate-50"] i {
  filter: brightness(1.15) saturate(1.1);
}

/* ═══════════════════════════════════════════════════════════════
   🎯 DASHBOARD ICON GLOW - Efeito especial para ícones em dashboards
   Usado na macro stat_card do base_dashboard.html
   ═══════════════════════════════════════════════════════════════ */

.dashboard-icon-glow {
  position: relative;
}

.dashboard-icon-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: inherit;
  filter: blur(8px);
  opacity: 0.4;
  border-radius: inherit;
  z-index: -1;
}

.dark .dashboard-icon-glow::before {
  opacity: 0.5;
  filter: blur(10px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📜 SCROLLBARS - Estilização Customizada
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Light Mode Scrollbar */
/* Scrollbar - Definido em theme-styles.css (linhas 80-102, 860-868) */
/* Este arquivo apenas define variáveis de tema, scrollbars ficam centralizados */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ::selection - Seleção de Texto
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

::selection {
  background-color: rgba(var(--theme-primary-rgb), 0.3);
  color: var(--theme-text-primary);
}

.dark ::selection {
  background-color: rgba(167, 139, 250, 0.3);
  color: var(--theme-text-primary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 RESPONSIVIDADE - Mobile Adjustments
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  :root {
    /* Ajustes de tamanhos para mobile */
    --theme-radius: 6px;
    --theme-radius-md: 10px;
    --theme-radius-lg: 14px;
  }

  /* Scrollbars mobile - Definido em base_form_mobile_fix.css */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎨 CHART.JS INTEGRATION - Colors for Dark Mode
   Cores automáticas para gráficos Chart.js
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/**
 * Variáveis CSS para uso em Chart.js
 * Usar: getComputedStyle(document.documentElement).getPropertyValue('--chart-text')
 */

/* Chart.js vars: definidas em _css-variables.css (unica fonte) */

/* ═══════════════════════════════════════════════════════════════
   📚 DOCUMENTAÇÃO INLINE - Como Usar
   ═══════════════════════════════════════════════════════════════

   ## 1. TOGGLE DE TEMA (Botões)

   <button onclick="window.Theme.toggle()">
     Toggle Tema
   </button>

   ## 2. DEFINIR TEMA ESPECÍFICO

   <button onclick="window.Theme.set('dark')">Dark</button>
   <button onclick="window.Theme.set('light')">Light</button>

   ## 3. USAR VARIÁVEIS CSS

   .meu-componente {
     background: var(--theme-surface);
     color: var(--theme-text-primary);
     border: 1px solid var(--theme-border);
     box-shadow: var(--theme-shadow);
   }

   ## 4. CLASSES TAILWIND COM DARK MODE

   <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
     Conteúdo adaptativo
   </div>

   ## 5. ALPINE.JS INTEGRATION

   <div x-data>
     <button @click="$store.theme.toggle()">
       <span x-text="$store.theme.isDark ? '☀️' : '🌙'"></span>
     </button>
   </div>

   ## 6. CHART.JS COLORS

   const textColor = getComputedStyle(document.documentElement)
     .getPropertyValue('--chart-text');

   new Chart(ctx, {
     options: {
       plugins: {
         legend: {
           labels: { color: textColor }
         }
       }
     }
   });

   ═══════════════════════════════════════════════════════════════ */