/** * GLOBAL THEME CSS - ERP Milhas * Sistema de tema com CSS Variables * * ARQUITETURA: * - Variaveis definidas no :root (tema claro) e html.dark-mode (tema escuro) * - Estilos base usam variaveis (aplicam em ambos os modos) * - Overrides de Tailwind usam prefixo body.dark-mode (so aplicam em dark) * * ANTI-FOUC (Flash of Unstyled Content): * - Incluir theme-early-apply.js ANTES deste CSS * - Isso adiciona classe dark-mode ao antes do CSS carregar * * COMO USAR: * 1. Incluir theme-early-apply.js no (PRIMEIRO!) * 2. Incluir este CSS no * 3. Incluir global-settings-manager.js * 4. O tema sera aplicado automaticamente via classe no */ /* Fonte global do app (identidade tipográfica unificada). Ver bloco "SKIN GLOBAL" no fim. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ============================================ ANTI-FOUC: Prevencao de Flash Branco Estas regras aplicam ANTES do JavaScript usando apenas html.dark-mode como seletor ============================================ */ html.dark-mode { background-color: #0f0f0f !important; } html.dark-mode body { background-color: #0f0f0f !important; color: #f5f5f5 !important; } /* Forcando cores escuras em elementos comuns ANTES do JS */ html.dark-mode .bg-white, html.dark-mode .bg-gray-50, html.dark-mode .bg-gray-100, html.dark-mode .bg-slate-50, html.dark-mode .bg-slate-100 { background-color: #1f1f1f !important; } html.dark-mode [class*="bg-white"]:not(.sidebar *):not(.modern-sidebar *) { background-color: #1f1f1f !important; } /* ANTI-FOUC: Botoes coloridos (bg-*-50) - aplicar ANTES do body existir */ html.dark-mode .bg-red-50, html.dark-mode [class*="bg-red-50"] { background-color: rgba(239, 68, 68, 0.15) !important; } html.dark-mode .bg-green-50, html.dark-mode [class*="bg-green-50"] { background-color: rgba(34, 197, 94, 0.15) !important; } html.dark-mode .bg-blue-50, html.dark-mode [class*="bg-blue-50"] { background-color: rgba(59, 130, 246, 0.15) !important; } html.dark-mode .bg-orange-50, html.dark-mode [class*="bg-orange-50"] { background-color: rgba(249, 115, 22, 0.15) !important; } html.dark-mode .bg-purple-50, html.dark-mode [class*="bg-purple-50"] { background-color: rgba(168, 85, 247, 0.15) !important; } html.dark-mode .bg-cyan-50, html.dark-mode [class*="bg-cyan-50"] { background-color: rgba(6, 182, 212, 0.15) !important; } html.dark-mode .bg-yellow-50, html.dark-mode [class*="bg-yellow-50"] { background-color: rgba(234, 179, 8, 0.15) !important; } html.dark-mode .bg-teal-50, html.dark-mode [class*="bg-teal-50"] { background-color: rgba(20, 184, 166, 0.15) !important; } html.dark-mode .bg-indigo-50, html.dark-mode [class*="bg-indigo-50"] { background-color: rgba(99, 102, 241, 0.15) !important; } html.dark-mode .bg-pink-50, html.dark-mode [class*="bg-pink-50"] { background-color: rgba(236, 72, 153, 0.15) !important; } /* ANTI-FOUC: Botoes coloridos (bg-*-100) */ html.dark-mode .bg-red-100, html.dark-mode [class*="bg-red-100"] { background-color: rgba(239, 68, 68, 0.25) !important; } html.dark-mode .bg-green-100, html.dark-mode [class*="bg-green-100"] { background-color: rgba(34, 197, 94, 0.25) !important; } html.dark-mode .bg-blue-100, html.dark-mode [class*="bg-blue-100"] { background-color: rgba(59, 130, 246, 0.25) !important; } html.dark-mode .bg-orange-100, html.dark-mode [class*="bg-orange-100"] { background-color: rgba(249, 115, 22, 0.25) !important; } html.dark-mode .bg-purple-100, html.dark-mode [class*="bg-purple-100"] { background-color: rgba(168, 85, 247, 0.25) !important; } html.dark-mode .bg-cyan-100, html.dark-mode [class*="bg-cyan-100"] { background-color: rgba(6, 182, 212, 0.25) !important; } /* ANTI-FOUC: Bordas coloridas */ html.dark-mode .border-red-200, html.dark-mode [class*="border-red-200"] { border-color: rgba(239, 68, 68, 0.4) !important; } html.dark-mode .border-green-200, html.dark-mode [class*="border-green-200"] { border-color: rgba(34, 197, 94, 0.4) !important; } html.dark-mode .border-blue-200, html.dark-mode [class*="border-blue-200"] { border-color: rgba(59, 130, 246, 0.4) !important; } html.dark-mode .border-orange-200, html.dark-mode [class*="border-orange-200"] { border-color: rgba(249, 115, 22, 0.4) !important; } html.dark-mode .border-purple-200, html.dark-mode [class*="border-purple-200"] { border-color: rgba(168, 85, 247, 0.4) !important; } html.dark-mode .border-cyan-200, html.dark-mode [class*="border-cyan-200"] { border-color: rgba(6, 182, 212, 0.4) !important; } /* ANTI-FOUC: Gradientes de botoes (como o de despesa/milhas) */ html.dark-mode .bg-gradient-to-r.from-red-50.to-purple-50, html.dark-mode [class*="from-red-50"][class*="to-purple-50"] { background: linear-gradient(to right, rgba(239, 68, 68, 0.15), rgba(168, 85, 247, 0.15)) !important; } /* ANTI-FOUC: Cards de Personalizacao e Integracoes */ html.dark-mode .personalization-card, html.dark-mode .integration-card, html.dark-mode .config-card { background-color: #1f1f1f !important; border-color: #333333 !important; } html.dark-mode .personalization-card .card-title, html.dark-mode .integration-card h3, html.dark-mode .config-card h2, html.dark-mode .config-card h3 { color: #f5f5f5 !important; } html.dark-mode .personalization-card .card-description, html.dark-mode .personalization-card .card-features li, html.dark-mode .integration-card p, html.dark-mode .integration-card span, html.dark-mode .config-card p { color: #a3a3a3 !important; } html.dark-mode .personalization-card .card-icon { background: linear-gradient(135deg, #262626 0%, #1f1f1f 100%) !important; } /* ANTI-FOUC: Image Uploader Component */ html.dark-mode .image-uploader__dropzone { background-color: #262626 !important; border-color: #333333 !important; } html.dark-mode .image-uploader__placeholder { color: #a3a3a3 !important; } html.dark-mode .image-uploader__placeholder i, html.dark-mode .image-uploader__placeholder p { color: #a3a3a3 !important; } /* ANTI-FOUC: Remover seta extra dos selects */ html.dark-mode select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } /* ANTI-FOUC: Fluxo de Caixa (fluxo-caixa-conta.html) */ html.dark-mode .balance-card { background-color: #1f1f1f !important; border-color: #333333 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html.dark-mode .balance-card .text-gray-600, html.dark-mode .balance-card .text-sm { color: #a3a3a3 !important; } html.dark-mode .balance-card .text-gray-900, html.dark-mode .balance-card .text-xl { color: #f5f5f5 !important; } html.dark-mode .month-selector { background-color: #1f1f1f !important; border-color: #333333 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html.dark-mode .month-display { color: #f5f5f5 !important; } html.dark-mode .month-button { background-color: #262626 !important; color: #a3a3a3 !important; } html.dark-mode .month-button:hover { background-color: #333333 !important; color: #f5f5f5 !important; } html.dark-mode .transaction-header { background-color: #1a1a1a !important; border-color: #333333 !important; color: #a3a3a3 !important; } html.dark-mode .transaction-row { border-color: #262626 !important; } html.dark-mode .transaction-row:hover { background-color: #262626 !important; } /* ANTI-FOUC: Stats cards em personalizacao.html */ html.dark-mode .bg-white.rounded-lg.p-6.border, html.dark-mode .bg-white.rounded-lg.p-6.border-gray-200 { background-color: #1f1f1f !important; border-color: #333333 !important; } /* ANTI-FOUC: Log de atividades em integracoes.html */ html.dark-mode .space-y-3 .bg-gray-50, html.dark-mode .p-3.bg-gray-50 { background-color: #262626 !important; } html.dark-mode .bg-red-50.border-red-200 { background-color: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.4) !important; } html.dark-mode .text-red-800 { color: #fca5a5 !important; } html.dark-mode .text-red-600 { color: #f87171 !important; } /* ANTI-FOUC: Development notice em integracoes.html */ html.dark-mode .config-card.bg-blue-50, html.dark-mode .bg-blue-50.border-blue-200 { background-color: rgba(59, 130, 246, 0.15) !important; border-color: rgba(59, 130, 246, 0.3) !important; } html.dark-mode .text-blue-900 { color: #93c5fd !important; } html.dark-mode .text-blue-700 { color: #60a5fa !important; } /* ============================================ VARIAVEIS CSS - TEMA CLARO (PADRAO) ============================================ */ :root { /* Backgrounds */ --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-input: #ffffff; --bg-hover: #f1f5f9; --bg-modal: rgba(0, 0, 0, 0.5); --bg-table-header: #f8fafc; --bg-table-row-hover: #f1f5f9; /* Textos */ --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --text-light: #9ca3af; --text-inverse: #ffffff; /* Bordas */ --border-color: #e2e8f0; --border-light: #f1f5f9; --border-focus: #3b82f6; /* Sombras */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Cores de Feedback */ --color-success: #10b981; --color-success-bg: #ecfdf5; --color-success-border: #10b981; --color-error: #ef4444; --color-error-bg: #fef2f2; --color-error-border: #ef4444; --color-warning: #f59e0b; --color-warning-bg: #fffbeb; --color-warning-border: #f59e0b; --color-info: #3b82f6; --color-info-bg: #eff6ff; --color-info-border: #3b82f6; /* Cores Primarias */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-light: #dbeafe; /* Sidebar - Sempre escura em ambos os modos */ --sidebar-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); --sidebar-text: #94a3b8; --sidebar-text-hover: #ffffff; --sidebar-border: rgba(148, 163, 184, 0.1); /* Scrollbar — FONTE ÚNICA: mude aqui e vale para TODO o sistema */ --scrollbar-track: #f1f5f9; --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover: #94a3b8; --scrollbar-width: 14px; /* largura/altura da barra em todo o sistema */ --scrollbar-radius: 7px; /* arredondamento do thumb/track */ /* Select arrow */ --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); /* Feedbacks/valores aplicados via inline-style por JS (#35). Como inline style vence CSS, expomos como variáveis: o JS seta style.background='var(--task-done-bg)' e a cor segue o tema. */ --task-flash-warning: #fef3c7; --task-done-bg: #dcfce7; --task-done-flash: #bbf7d0; --task-reschedule-bg: #dbeafe; --val-positive: #059669; /* verde de valor (estimado, a receber) */ --val-accent: #7c3aed; /* roxo de valor (milheiro) */ } /* ============================================ VARIAVEIS CSS - TEMA ESCURO Baseado em Google Material Design Dark Theme WCAG AA Contrast Guidelines (4.5:1 minimo) ============================================ */ html.dark-mode { color-scheme: dark !important; /* Backgrounds - Tons mais escuros para contraste real */ --bg-primary: #0f0f0f; --bg-secondary: #171717; --bg-card: #1f1f1f; --bg-input: #262626; --bg-hover: #2a2a2a; --bg-modal: rgba(0, 0, 0, 0.85); --bg-table-header: #171717; --bg-table-row-hover: #2a2a2a; /* Textos - Contraste adequado */ --text-primary: #f5f5f5; --text-secondary: #d4d4d4; --text-muted: #a3a3a3; --text-light: #737373; --text-inverse: #0f0f0f; /* Bordas */ --border-color: #333333; --border-light: #404040; --border-focus: #60a5fa; /* Sombras */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.7); /* Cores de Feedback */ --color-success: #4ade80; --color-success-bg: rgba(34, 197, 94, 0.15); --color-success-border: #22c55e; --color-error: #f87171; --color-error-bg: rgba(239, 68, 68, 0.15); --color-error-border: #ef4444; --color-warning: #fbbf24; --color-warning-bg: rgba(245, 158, 11, 0.15); --color-warning-border: #f59e0b; --color-info: #60a5fa; --color-info-bg: rgba(59, 130, 246, 0.15); --color-info-border: #3b82f6; /* Cores Primarias */ --color-primary: #60a5fa; --color-primary-hover: #3b82f6; --color-primary-light: rgba(59, 130, 246, 0.2); /* Sidebar - Manter escura */ --sidebar-bg: linear-gradient(180deg, #0f0f0f 0%, #000000 100%); --sidebar-text: #a3a3a3; --sidebar-text-hover: #ffffff; --sidebar-border: #262626; /* Scrollbar */ --scrollbar-track: #171717; --scrollbar-thumb: #404040; --scrollbar-thumb-hover: #525252; /* Select arrow */ --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a3a3a3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); /* Feedbacks/valores inline-style por JS — variantes escuras (#35) */ --task-flash-warning: rgba(245, 158, 11, 0.22); --task-done-bg: rgba(34, 197, 94, 0.20); --task-done-flash: rgba(34, 197, 94, 0.32); --task-reschedule-bg: rgba(59, 130, 246, 0.22); --val-positive: #4ade80; --val-accent: #a78bfa; } /* ============================================ ESTILOS BASE - APLICAM EM AMBOS OS MODOS Usam variaveis que mudam conforme o tema ============================================ */ body { background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.2s ease, color 0.2s ease; } /* Forcamos o fundo do body em dark mode pois algumas paginas tem bg-gray-50 inline */ body.dark-mode { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } /* ============================================ SIDEBAR - Estilos fixos (sempre escura) ============================================ */ .modern-sidebar, .sidebar, nav.modern-sidebar { background: var(--sidebar-bg) !important; } .modern-sidebar .nav-item, .sidebar .nav-item, .nav-link { color: var(--sidebar-text) !important; } .modern-sidebar .nav-item:hover, .sidebar .nav-item:hover, .nav-link:hover, .modern-sidebar .nav-item.active, .sidebar .nav-item.active, .nav-link.active { color: var(--sidebar-text-hover) !important; } /* ============================================ SCROLLBARS - Base com variaveis ============================================ */ ::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--scrollbar-radius); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ============================================ ESTILOS DARK MODE - Overrides de Tailwind Estes so aplicam quando body.dark-mode ============================================ */ /* Cards e Containers */ body.dark-mode .config-card, body.dark-mode .card, body.dark-mode .panel, body.dark-mode .module-card, body.dark-mode [class*="bg-white"]:not(.sidebar *):not(.modern-sidebar *) { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-sm); } body.dark-mode .config-card:hover, body.dark-mode .card:hover { box-shadow: var(--shadow-md); border-color: var(--border-light) !important; } /* Cards de Personalizacao (personalizacao.html) */ body.dark-mode .personalization-card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } body.dark-mode .personalization-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-light) !important; } body.dark-mode .personalization-card .card-title { color: var(--text-primary) !important; } body.dark-mode .personalization-card:hover .card-title { color: #60a5fa !important; } body.dark-mode .personalization-card .card-description { color: var(--text-muted) !important; } body.dark-mode .personalization-card .card-features li { color: var(--text-secondary) !important; } body.dark-mode .personalization-card .card-icon { background: linear-gradient(135deg, #262626 0%, #1f1f1f 100%) !important; } body.dark-mode .personalization-card:hover .card-icon { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important; } /* Cards de Integracoes (integracoes.html) */ body.dark-mode .integration-card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } body.dark-mode .integration-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-light) !important; } body.dark-mode .integration-card h3 { color: var(--text-primary) !important; } body.dark-mode .integration-card p { color: var(--text-muted) !important; } body.dark-mode .integration-card span { color: var(--text-muted) !important; } /* Status badges das integracoes */ body.dark-mode .status-badge.status-connected { background-color: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; } body.dark-mode .status-badge.status-available { background-color: rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; } body.dark-mode .status-badge.status-disconnected { background-color: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; } /* Log de atividades nas integracoes */ body.dark-mode .integration-card + .space-y-3 .bg-gray-50, body.dark-mode [class*="bg-gray-50"]:not(.sidebar *) { background-color: var(--bg-hover) !important; } body.dark-mode .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; } body.dark-mode .text-red-800 { color: #fca5a5 !important; } body.dark-mode .text-red-600 { color: #f87171 !important; } /* Toggle switches nas integracoes */ body.dark-mode .toggle-slider { background-color: #404040 !important; } body.dark-mode input:checked + .toggle-slider { background-color: #3b82f6 !important; } /* Image Uploader Component (modais de instituicoes, etc) */ body.dark-mode .image-uploader__dropzone { background-color: var(--bg-input) !important; border-color: var(--border-color) !important; } body.dark-mode .image-uploader__dropzone:hover { background-color: var(--bg-hover) !important; border-color: var(--border-focus) !important; } body.dark-mode .image-uploader__dropzone.drag-over { background-color: rgba(59, 130, 246, 0.15) !important; border-color: var(--border-focus) !important; } body.dark-mode .image-uploader__placeholder { color: var(--text-muted) !important; } body.dark-mode .image-uploader__placeholder i { color: var(--text-muted) !important; } body.dark-mode .image-uploader__placeholder p { color: var(--text-muted) !important; } body.dark-mode .image-uploader__error { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; } /* SELECT no dark: usar o controle NATIVO (appearance:auto) + color-scheme:dark. appearance:none força o Chrome/Windows a usar o popup "custom", cujo item DESTACADO cai na cor de seleção cinza-clara do SO (ilegível — filtro "Todas as contas"). Com appearance:auto o popup é 100% nativo e o color-scheme:dark o desenha escuro, COM o highlight escuro nativo. A seta nativa volta -> remover a SVG p/ não duplicar. */ body.dark-mode select { -webkit-appearance: auto !important; -moz-appearance: auto !important; appearance: auto !important; color-scheme: dark !important; background-image: none !important; } /* Fluxo de Caixa (fluxo-caixa-conta.html) */ body.dark-mode .balance-card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-sm); } body.dark-mode .balance-card .text-gray-600, body.dark-mode .balance-card .text-sm.text-gray-600 { color: var(--text-muted) !important; } body.dark-mode .balance-card .text-gray-900, body.dark-mode .balance-card .text-xl.font-bold { color: var(--text-primary) !important; } body.dark-mode .month-selector { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-sm); } body.dark-mode .month-display { color: var(--text-primary) !important; } body.dark-mode .month-button { background-color: var(--bg-hover) !important; color: var(--text-muted) !important; } body.dark-mode .month-button:hover { background-color: #333333 !important; color: var(--text-primary) !important; } body.dark-mode .transaction-header { background-color: #1a1a1a !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; } body.dark-mode .transaction-row { border-color: var(--border-color) !important; } body.dark-mode .transaction-row:hover { background-color: var(--bg-hover) !important; } body.dark-mode .transaction-row .text-gray-600 { color: var(--text-muted) !important; } body.dark-mode .transaction-row .text-gray-900, body.dark-mode .transaction-row .font-medium { color: var(--text-primary) !important; } /* Textos e Titulos */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--text-primary); } /* Classes de texto Tailwind */ body.dark-mode .text-gray-900 { color: var(--text-primary) !important; } body.dark-mode .text-gray-800 { color: var(--text-primary) !important; } body.dark-mode .text-gray-700 { color: var(--text-secondary) !important; } body.dark-mode .text-gray-600 { color: var(--text-muted) !important; } body.dark-mode .text-gray-500 { color: var(--text-muted) !important; } body.dark-mode .text-gray-400 { color: var(--text-light) !important; } /* Cores de texto para stats */ body.dark-mode .text-blue-600 { color: #60a5fa !important; } body.dark-mode .text-green-600 { color: #34d399 !important; } body.dark-mode .text-purple-600 { color: #a78bfa !important; } body.dark-mode .text-orange-600 { color: #fb923c !important; } body.dark-mode .text-red-600 { color: #f87171 !important; } body.dark-mode .text-yellow-600 { color: #fbbf24 !important; } /* AMARRAÇÃO GLOBAL — texto de MARCA em tom escuro (-700/-800/-900) é ilegível no dark (texto escuro sobre fundo escuro/translúcido: badges roxos "Milhas", números text-green-900 dos cards de stat, etc.). Mapeia toda a paleta Tailwind escura para o tom -300 (claro) da MESMA cor. Cobre qualquer badge/stat criado depois. */ body.dark-mode .text-red-700, body.dark-mode .text-red-800, body.dark-mode .text-red-900 { color: #fca5a5 !important; } body.dark-mode .text-orange-700, body.dark-mode .text-orange-800, body.dark-mode .text-orange-900 { color: #fdba74 !important; } body.dark-mode .text-amber-700, body.dark-mode .text-amber-800, body.dark-mode .text-amber-900 { color: #fcd34d !important; } body.dark-mode .text-yellow-700, body.dark-mode .text-yellow-800, body.dark-mode .text-yellow-900 { color: #fde047 !important; } body.dark-mode .text-lime-700, body.dark-mode .text-lime-800, body.dark-mode .text-lime-900 { color: #bef264 !important; } body.dark-mode .text-green-700, body.dark-mode .text-green-800, body.dark-mode .text-green-900 { color: #86efac !important; } body.dark-mode .text-emerald-700, body.dark-mode .text-emerald-800, body.dark-mode .text-emerald-900 { color: #6ee7b7 !important; } body.dark-mode .text-teal-700, body.dark-mode .text-teal-800, body.dark-mode .text-teal-900 { color: #5eead4 !important; } body.dark-mode .text-cyan-700, body.dark-mode .text-cyan-800, body.dark-mode .text-cyan-900 { color: #67e8f9 !important; } body.dark-mode .text-sky-700, body.dark-mode .text-sky-800, body.dark-mode .text-sky-900 { color: #7dd3fc !important; } body.dark-mode .text-blue-700, body.dark-mode .text-blue-800, body.dark-mode .text-blue-900 { color: #93c5fd !important; } body.dark-mode .text-indigo-700, body.dark-mode .text-indigo-800, body.dark-mode .text-indigo-900 { color: #a5b4fc !important; } body.dark-mode .text-violet-700, body.dark-mode .text-violet-800, body.dark-mode .text-violet-900 { color: #c4b5fd !important; } body.dark-mode .text-purple-700, body.dark-mode .text-purple-800, body.dark-mode .text-purple-900 { color: #d8b4fe !important; } body.dark-mode .text-fuchsia-700, body.dark-mode .text-fuchsia-800, body.dark-mode .text-fuchsia-900 { color: #f0abfc !important; } body.dark-mode .text-pink-700, body.dark-mode .text-pink-800, body.dark-mode .text-pink-900 { color: #f9a8d4 !important; } body.dark-mode .text-rose-700, body.dark-mode .text-rose-800, body.dark-mode .text-rose-900 { color: #fda4af !important; } /* Inputs e Formularios */ body.dark-mode input, body.dark-mode select, body.dark-mode textarea, body.dark-mode .form-control, body.dark-mode .select-styled { background-color: var(--bg-input) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { border-color: var(--border-focus) !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25); } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: var(--text-light) !important; } body.dark-mode input:disabled, body.dark-mode select:disabled, body.dark-mode textarea:disabled { background-color: var(--bg-hover) !important; color: var(--text-light) !important; cursor: not-allowed; } /* Select dropdown arrow — SÓ p/ dropdowns custom (.select-styled). O fechado já é vencido por body.dark-mode select { background }. */ /* Labels */ body.dark-mode label { color: var(--text-secondary); } /* Botoes */ body.dark-mode button.bg-gray-100, body.dark-mode button.bg-gray-50, body.dark-mode .btn-secondary { background-color: var(--bg-input) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } body.dark-mode button.bg-gray-100:hover, body.dark-mode button.bg-gray-50:hover, body.dark-mode .btn-secondary:hover { background-color: var(--bg-hover) !important; } body.dark-mode button.bg-red-50, body.dark-mode .btn-danger-light { background-color: var(--color-error-bg) !important; border-color: var(--color-error-border) !important; color: var(--color-error) !important; } /* Tabelas */ body.dark-mode table, body.dark-mode .table { background-color: var(--bg-card); border-color: var(--border-color); } body.dark-mode thead, body.dark-mode th { background-color: var(--bg-table-header) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } body.dark-mode tbody tr { background-color: var(--bg-card); border-color: var(--border-color); } body.dark-mode tbody tr:hover { background-color: var(--bg-table-row-hover) !important; } body.dark-mode td { border-color: var(--border-color) !important; color: var(--text-secondary); } /* Tailwind: a classe `bg-opacity-40` NÃO foi gerada no tailwind.css tokenizado (só existem bg-opacity-30 e bg-opacity-50). Sem ela, `bg-black bg-opacity-40` caía no fallback --tw-bg-opacity:1 → PRETO OPACO 100%, fazendo o overlay de ~42 modais "pretejar tudo" em light mode. Reidratamos a classe aqui (sem rebuildar o tailwind, que regride o tema). */ .bg-opacity-40 { --tw-bg-opacity: 0.4; } /* Modais - Alta especificidade para sobrescrever inline styles */ body.dark-mode .modal-backdrop, body.dark-mode .modal-overlay { background-color: var(--bg-modal); } html.dark-mode body.dark-mode .modal-content, html.dark-mode body.dark-mode .modal-dialog, html.dark-mode .modal-content, html.dark-mode .modal-dialog, body.dark-mode .modal-content, body.dark-mode .modal-dialog, .dark-mode .modal-content, .dark-mode .modal-dialog, body.dark-mode .modal > div[class*="bg-white"], body.dark-mode .modal .bg-white { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } body.dark-mode .modal-header, body.dark-mode .modal-footer { border-color: var(--border-color) !important; } /* Dropdowns */ body.dark-mode .dropdown-menu, body.dark-mode [class*="dropdown"] > ul, body.dark-mode .autocomplete-results, body.dark-mode .autocomplete-dropdown, body.dark-mode .location-autocomplete-dropdown { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-lg); } body.dark-mode .dropdown-item, body.dark-mode .dropdown-menu li, body.dark-mode .autocomplete-item { color: var(--text-secondary) !important; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-menu li:hover, body.dark-mode .autocomplete-item:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } /* Bordas e Divisores */ body.dark-mode .border, body.dark-mode .border-t, body.dark-mode .border-b, body.dark-mode .border-l, body.dark-mode .border-r, body.dark-mode [class*="border-gray"], body.dark-mode [class*="border-slate"] { border-color: var(--border-color) !important; } body.dark-mode hr, body.dark-mode .divider { border-color: var(--border-color) !important; } /* Backgrounds Tailwind - Cores neutras */ body.dark-mode .bg-gray-50, body.dark-mode .bg-gray-100, body.dark-mode .bg-slate-50, body.dark-mode .bg-slate-100 { background-color: var(--bg-input) !important; } body.dark-mode .bg-gray-200 { background-color: var(--bg-hover) !important; } /* Backgrounds Tailwind - Cores *-50 (containers claros) */ body.dark-mode .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; } body.dark-mode .bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; } body.dark-mode .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.15) !important; } body.dark-mode .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; } body.dark-mode .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; } body.dark-mode .bg-pink-50 { background-color: rgba(236, 72, 153, 0.15) !important; } body.dark-mode .bg-orange-50 { background-color: rgba(249, 115, 22, 0.15) !important; } body.dark-mode .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; } body.dark-mode .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.15) !important; } body.dark-mode .bg-teal-50 { background-color: rgba(20, 184, 166, 0.15) !important; } /* Backgrounds Tailwind - Cores *-100 (icones/badges) */ body.dark-mode .bg-blue-100 { background-color: rgba(59, 130, 246, 0.25) !important; } body.dark-mode .bg-green-100 { background-color: rgba(34, 197, 94, 0.25) !important; } body.dark-mode .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.25) !important; } body.dark-mode .bg-purple-100 { background-color: rgba(168, 85, 247, 0.25) !important; } body.dark-mode .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.25) !important; } body.dark-mode .bg-pink-100 { background-color: rgba(236, 72, 153, 0.25) !important; } body.dark-mode .bg-orange-100 { background-color: rgba(249, 115, 22, 0.25) !important; } body.dark-mode .bg-red-100 { background-color: rgba(239, 68, 68, 0.25) !important; } body.dark-mode .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.25) !important; } body.dark-mode .bg-teal-100 { background-color: rgba(20, 184, 166, 0.25) !important; } /* Gradientes de Stats/Cards */ body.dark-mode .bg-gradient-to-br.from-blue-50, body.dark-mode [class*="from-blue-50"] { background: linear-gradient(to bottom right, #1e3a5f, #1e40af) !important; border-color: #3b82f6 !important; } body.dark-mode .bg-gradient-to-br.from-green-50, body.dark-mode [class*="from-green-50"] { background: linear-gradient(to bottom right, #064e3b, #065f46) !important; border-color: #10b981 !important; } body.dark-mode .bg-gradient-to-br.from-purple-50, body.dark-mode [class*="from-purple-50"] { background: linear-gradient(to bottom right, #4c1d95, #5b21b6) !important; border-color: #8b5cf6 !important; } body.dark-mode .bg-gradient-to-br.from-orange-50, body.dark-mode [class*="from-orange-50"] { background: linear-gradient(to bottom right, #7c2d12, #9a3412) !important; border-color: #f97316 !important; } body.dark-mode .bg-gradient-to-br.from-red-50, body.dark-mode [class*="from-red-50"] { background: linear-gradient(to bottom right, #7f1d1d, #991b1b) !important; border-color: #ef4444 !important; } body.dark-mode .bg-gradient-to-br.from-yellow-50, body.dark-mode [class*="from-yellow-50"] { background: linear-gradient(to bottom right, #78350f, #92400e) !important; border-color: #f59e0b !important; } /* Badges e Tags */ body.dark-mode .badge, body.dark-mode .tag { background-color: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-color); } body.dark-mode .badge-success { background-color: var(--color-success-bg) !important; color: var(--color-success) !important; } body.dark-mode .badge-error { background-color: var(--color-error-bg) !important; color: var(--color-error) !important; } body.dark-mode .badge-warning { background-color: var(--color-warning-bg) !important; color: var(--color-warning) !important; } body.dark-mode .badge-info { background-color: var(--color-info-bg) !important; color: var(--color-info) !important; } /* Badges de papel/role */ body.dark-mode .papel-cliente { background-color: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; } body.dark-mode .papel-fornecedor { background-color: rgba(245, 158, 11, 0.2) !important; color: #fcd34d !important; } body.dark-mode .papel-colaborador { background-color: rgba(16, 185, 129, 0.2) !important; color: #6ee7b7 !important; } body.dark-mode .papel-cpf-gerenciado { background-color: rgba(139, 92, 246, 0.2) !important; color: #c4b5fd !important; } body.dark-mode .papel-passageiro { background-color: rgba(6, 182, 212, 0.2) !important; color: #67e8f9 !important; } /* Loading Overlay */ body.dark-mode .loading-overlay { background: var(--bg-modal); } body.dark-mode .loading-overlay p, body.dark-mode .loading-overlay span { color: var(--text-secondary); } /* Paginacao */ body.dark-mode .pagination, body.dark-mode .page-link { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); } body.dark-mode .page-link:hover { background-color: var(--bg-hover); color: var(--text-primary); } body.dark-mode .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--text-inverse); } /* Toggle Switch */ body.dark-mode .toggle-slider { background-color: var(--scrollbar-thumb); } body.dark-mode input:checked + .toggle-slider { background-color: var(--color-primary); } /* Alertas e Notificacoes */ body.dark-mode .alert-success { background-color: var(--color-success-bg) !important; border-color: var(--color-success-border) !important; color: var(--color-success) !important; } body.dark-mode .alert-error, body.dark-mode .alert-danger { background-color: var(--color-error-bg) !important; border-color: var(--color-error-border) !important; color: var(--color-error) !important; } body.dark-mode .alert-warning { background-color: var(--color-warning-bg) !important; border-color: var(--color-warning-border) !important; color: var(--color-warning) !important; } body.dark-mode .alert-info { background-color: var(--color-info-bg) !important; border-color: var(--color-info-border) !important; color: var(--color-info) !important; } /* Tooltips */ body.dark-mode .tooltip, body.dark-mode [role="tooltip"] { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-md); } /* Tabs */ body.dark-mode .tab-active { border-bottom-color: var(--color-primary); color: var(--color-primary); } body.dark-mode .nav-tabs .nav-link { color: var(--text-secondary); } body.dark-mode .nav-tabs .nav-link:hover { color: var(--text-primary); } body.dark-mode .nav-tabs .nav-link.active { background-color: var(--bg-card); color: var(--color-primary); border-color: var(--border-color) var(--border-color) var(--bg-card); } /* Toasts / Notifications */ body.dark-mode .toast { background-color: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-lg); } body.dark-mode .toast-body { color: var(--text-primary); } /* Accordions / Collapsibles */ body.dark-mode .accordion-item { background-color: var(--bg-card); border-color: var(--border-color); } body.dark-mode .accordion-header, body.dark-mode .accordion-button { background-color: var(--bg-secondary); color: var(--text-primary); } body.dark-mode .accordion-button:not(.collapsed) { background-color: var(--color-primary-light); color: var(--color-primary); } /* Progress Bars */ body.dark-mode .progress { background-color: var(--bg-hover); } body.dark-mode .progress-bar { background-color: var(--color-primary); } /* Form Groups e Labels */ body.dark-mode .form-group label, body.dark-mode .input-group-text { color: var(--text-secondary); background-color: var(--bg-input); border-color: var(--border-color); } /* Checkbox e Radio */ body.dark-mode input[type="checkbox"], body.dark-mode input[type="radio"] { accent-color: var(--color-primary); } /* Labels com radio/checkbox selecionados - corrigir fundo branco */ body.dark-mode label:has(input[type="radio"]:checked), body.dark-mode label:has(input[type="checkbox"]:checked) { background-color: rgba(6, 182, 212, 0.15) !important; border-color: #06b6d4 !important; } body.dark-mode label:has(input[type="radio"]):not(:has(input:checked)), body.dark-mode label:has(input[type="checkbox"]):not(:has(input:checked)) { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } body.dark-mode label:has(input[type="radio"]):hover, body.dark-mode label:has(input[type="checkbox"]):hover { border-color: #0891b2 !important; background-color: rgba(6, 182, 212, 0.1) !important; } /* Links */ body.dark-mode a:not(.nav-item):not(.nav-link) { color: var(--color-primary); } body.dark-mode a:not(.nav-item):not(.nav-link):hover { color: var(--color-primary-hover); } /* Code e Pre */ body.dark-mode code, body.dark-mode pre { background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); } /* Empty State / No Data */ body.dark-mode .empty-state, body.dark-mode .no-data { color: var(--text-muted); } /* Filtros e Search */ body.dark-mode .search-box, body.dark-mode .filter-box { background-color: var(--bg-input); border-color: var(--border-color); } body.dark-mode .search-box:focus-within, body.dark-mode .filter-box:focus-within { border-color: var(--border-focus); } /* Chips / Tags Inline */ body.dark-mode .chip, body.dark-mode .tag-inline { background-color: var(--bg-hover); color: var(--text-secondary); } body.dark-mode .chip:hover, body.dark-mode .tag-inline:hover { background-color: var(--border-light); } /* Container de cartoes de credito */ body.dark-mode .cartoes-container, body.dark-mode .cards-grid { background-color: var(--bg-secondary); } /* Container de cartoes arrastavel (pagina cartoes) */ body.dark-mode .draggable-credit-card-container { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } /* Calendario */ body.dark-mode .calendar-cell, body.dark-mode .calendar-day { background-color: var(--bg-card); color: var(--text-secondary); } body.dark-mode .calendar-day-today { background-color: rgba(59, 130, 246, 0.3) !important; color: var(--text-primary) !important; } body.dark-mode .calendar-day:hover { background-color: var(--bg-hover); } /* Bank logo em cartoes */ body.dark-mode .bank-logo { background-color: rgba(255, 255, 255, 0.15) !important; } /* ============================================ SUMMARY CARDS - Usados em Contas a Pagar/Receber, Cartoes (Classes definidas em inline