/** * Modo escuro — paleta PRETA/neutra (sem azul slate). * Ativado com class="dark" em . */ html.dark { color-scheme: dark; --dm-bg: #000000; --dm-bg-elevated: #121212; --dm-bg-card: #141414; --dm-bg-muted: #262626; --dm-bg-hover: #2a2a2a; --dm-border: #333333; --dm-border-light: #404040; --dm-text: #fafafa; --dm-text-secondary: #d4d4d4; --dm-text-muted: #a3a3a3; --dm-input-bg: #141414; --dm-accent: #e5e5e5; --dm-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); } /* ========== Base ========== */ html.dark, html.dark body { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } html.dark #app-container, html.dark #app, html.dark main, html.dark [id^="view-"] { color: inherit; background-color: transparent; } html.dark #app-container { background-color: var(--dm-bg) !important; min-height: 100vh; } html.dark footer { background: var(--dm-bg) !important; background-image: none !important; border-color: var(--dm-border) !important; } html.dark footer p { color: var(--dm-text-muted) !important; } html.dark #loading-auth { background-color: var(--dm-bg) !important; } /* ========== Fundos Tailwind ========== */ html.dark .bg-white, html.dark .bg-white\/90, html.dark .bg-white\/80, html.dark .bg-white\/70 { background-color: var(--dm-bg-card) !important; } html.dark .bg-white\/20, html.dark .bg-white\/10 { background-color: rgba(255, 255, 255, 0.08) !important; } html.dark .bg-gray-50 { background-color: var(--dm-bg) !important; } html.dark .bg-gray-100 { background-color: var(--dm-bg-muted) !important; } html.dark .bg-gray-200 { background-color: var(--dm-border-light) !important; } html.dark .bg-gray-300 { background-color: #525252 !important; } html.dark .bg-gray-400 { background-color: #525252 !important; } html.dark .bg-gray-500 { background-color: #404040 !important; } html.dark .bg-slate-500, html.dark .bg-slate-600 { background-color: #404040 !important; } html.dark .from-slate-50 { --tw-gradient-from: #1a1a1a !important; } html.dark .to-white { --tw-gradient-to: #121212 !important; } html.dark .from-slate-500 { --tw-gradient-from: #404040 !important; } html.dark .to-slate-600 { --tw-gradient-to: #262626 !important; } html.dark .bg-gradient-to-br.from-slate-500, html.dark .bg-gradient-to-br.from-slate-500.to-slate-600 { background: #262626 !important; } html.dark .text-slate-500 { color: var(--dm-text-muted) !important; } html.dark .border-gray-100 { border-color: var(--dm-border) !important; } html.dark .bg-amber-50 { background-color: #1f1a0a !important; } html.dark .text-amber-800 { color: #fcd34d !important; } html.dark .text-orange-800 { color: #fdba74 !important; } html.dark .bg-blue-50 { background-color: #1a1a1a !important; border-color: #404040 !important; } html.dark .bg-green-50 { background-color: #141414 !important; border-color: #404040 !important; } html.dark .bg-red-50 { background-color: #1a0a0a !important; } html.dark .bg-yellow-50, html.dark .bg-amber-50 { background-color: #1a1508 !important; } html.dark .bg-purple-50 { background-color: #1a141a !important; } html.dark .bg-indigo-50 { background-color: #141414 !important; } html.dark .bg-orange-50 { background-color: #1a1008 !important; } html.dark .bg-blue-100 { background-color: #1f1f1f !important; } html.dark .bg-green-100 { background-color: #141414 !important; } html.dark .bg-red-100 { background-color: #1f1414 !important; } html.dark .bg-yellow-100 { background-color: #1f1a0a !important; } html.dark .bg-purple-100 { background-color: #1a141f !important; } html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover { background-color: var(--dm-bg-hover) !important; } html.dark .hover\:bg-white\/20:hover, html.dark .hover\:bg-white\/30:hover { background-color: rgba(255, 255, 255, 0.12) !important; } html.dark .hover\:bg-blue-50:hover { background-color: var(--dm-bg-hover) !important; } html.dark .hover\:bg-red-50:hover { background-color: #2a1515 !important; } /* ========== Texto ========== */ html.dark .text-gray-900, html.dark .text-gray-800 { color: var(--dm-text) !important; } html.dark .text-gray-700, html.dark .text-gray-600 { color: var(--dm-text-secondary) !important; } html.dark .text-gray-500, html.dark .text-gray-400, html.dark .text-gray-300 { color: var(--dm-text-muted) !important; } html.dark .text-black { color: var(--dm-text) !important; } html.dark .text-blue-900, html.dark .text-blue-800 { color: #e5e5e5 !important; } html.dark .text-blue-700, html.dark .text-blue-600 { color: #d4d4d4 !important; } html.dark .text-blue-500 { color: #a3a3a3 !important; } html.dark .text-blue-100 { color: #d4d4d4 !important; } html.dark .text-green-900, html.dark .text-green-800 { color: #d4d4d4 !important; } html.dark .text-green-700, html.dark .text-green-600, html.dark .text-green-500 { color: #86efac !important; } html.dark .text-red-900, html.dark .text-red-800, html.dark .text-red-700, html.dark .text-red-600, html.dark .text-red-500 { color: #fca5a5 !important; } html.dark .text-yellow-900, html.dark .text-yellow-800, html.dark .text-yellow-700, html.dark .text-yellow-600, html.dark .text-yellow-500 { color: #fcd34d !important; } html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d !important; } html.dark .text-purple-800, html.dark .text-purple-600 { color: #d8b4fe !important; } html.dark .text-indigo-600 { color: #c4b5fd !important; } html.dark .text-orange-600 { color: #fdba74 !important; } /* ========== Bordas ========== */ html.dark .border-gray-50, html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--dm-border) !important; } html.dark .border-blue-400, html.dark .border-blue-500 { border-color: #737373 !important; } html.dark .border-green-400 { border-color: #4ade80 !important; } html.dark .border-yellow-400, html.dark .border-amber-400 { border-color: #facc15 !important; } html.dark .border-red-400 { border-color: #f87171 !important; } html.dark .border-purple-400 { border-color: #a78bfa !important; } html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]), html.dark .divide-y.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border) !important; } html.dark .border-gray-100\/80 { border-color: var(--dm-border) !important; } /* ========== Formulários ========== */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]), html.dark select, html.dark textarea { background-color: var(--dm-input-bg) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--dm-text-muted) !important; } html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled, html.dark input[readonly], html.dark input.bg-gray-100, html.dark .bg-gray-100[readonly] { background-color: var(--dm-bg-muted) !important; color: var(--dm-text-muted) !important; } html.dark input[type="checkbox"], html.dark input[type="radio"] { accent-color: #fafafa; } html.dark .focus\:ring-blue-500:focus, html.dark .focus\:border-blue-500:focus { --tw-ring-color: #737373 !important; border-color: #a3a3a3 !important; } html.dark .focus\:ring-offset-2:focus { --tw-ring-offset-color: var(--dm-bg) !important; } /* ========== Tabelas ========== */ html.dark table { color: var(--dm-text); } html.dark thead, html.dark table thead, html.dark th { background-color: var(--dm-bg-muted) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark td { border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } html.dark tbody tr:hover, html.dark tr.hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-50:hover { background-color: var(--dm-bg-hover) !important; } html.dark tfoot tr { background-color: var(--dm-bg-muted) !important; } /* ========== Cards / sombras ========== */ html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: var(--dm-shadow) !important; } html.dark .rounded-2xl, html.dark .rounded-xl, html.dark .rounded-lg { border-color: var(--dm-border); } /* ========== Navegação ========== */ html.dark .nav-button { color: var(--dm-text-muted) !important; background: transparent !important; } html.dark .nav-button:hover { background-color: var(--dm-bg-hover) !important; color: var(--dm-text) !important; } html.dark .nav-button.active { background-color: var(--dm-bg-muted) !important; color: var(--dm-text) !important; border-bottom-color: var(--dm-accent) !important; } html.dark #main-nav, html.dark .nav-container { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark #mobile-menu-toggle { background-color: #262626 !important; color: var(--dm-text) !important; } html.dark #mobile-menu-toggle.active { background-color: #404040 !important; } @media (max-width: 640px) { html.dark .nav-button { border-bottom-color: var(--dm-border) !important; } html.dark .nav-container { border: 1px solid var(--dm-border) !important; } } /* ========== Modais ========== */ html.dark .modal-backdrop { background-color: rgba(0, 0, 0, 0.85) !important; } html.dark [id^="modal-"] > div, html.dark [id^="modal-"] .bg-white, html.dark .modal-content { background-color: var(--dm-bg-card) !important; color: var(--dm-text) !important; } /* ========== Dashboard header (gradiente → preto com borda) ========== */ html.dark #view-dashboard .bg-gradient-to-r { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important; border: 1px solid var(--dm-border) !important; } html.dark #view-dashboard .bg-gradient-to-r h2, html.dark #view-dashboard .bg-gradient-to-r p, html.dark #view-dashboard .bg-gradient-to-r .text-white { color: var(--dm-text) !important; } html.dark .dashboard-filter-btn.active { background-color: var(--dm-bg-muted) !important; color: var(--dm-text) !important; box-shadow: none !important; } html.dark .dashboard-filter-btn:not(.active) { color: var(--dm-text-muted) !important; } html.dark .status-chart-container { background: var(--dm-bg-card) !important; } html.dark .status-legend { background: rgba(26, 26, 26, 0.95) !important; border-color: var(--dm-border) !important; } html.dark .dashboard-skeleton { background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 37%, #1a1a1a 63%) !important; } html.dark .chart-bar-container { background-color: var(--dm-bg-muted) !important; } html.dark .chart-bar-container:hover { background-color: var(--dm-bg-hover) !important; } /* ========== Pedidos / listas ========== */ html.dark .order-item:hover, html.dark .order-item.hover\:bg-gray-50:hover { background-color: var(--dm-bg-hover) !important; } html.dark .status-report-card { background-color: var(--dm-bg-card) !important; } html.dark .status-report-card .text-2xl { color: var(--dm-text) !important; } /* ========== OC / Estoque / componentes styles.css ========== */ html.dark .oc-supplier-page { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .oc-header h1 { color: var(--dm-text) !important; } html.dark .oc-header p, html.dark .oc-order-info p, html.dark .oc-footer p { color: var(--dm-text-muted) !important; } html.dark .oc-order-info { background: var(--dm-bg-muted) !important; } html.dark .oc-order-info h3, html.dark .oc-items-table h3, html.dark .oc-commercial-table h3 { color: var(--dm-text) !important; } html.dark .oc-supplier-page table { background: var(--dm-bg-card) !important; } html.dark .oc-supplier-page th { background: var(--dm-bg-muted) !important; color: var(--dm-text) !important; } html.dark .oc-supplier-page td { color: var(--dm-text-secondary) !important; border-color: var(--dm-border) !important; } html.dark .oc-supplier-page tbody tr:hover { background: var(--dm-bg-hover) !important; } html.dark .oc-supplier-page tfoot tr { background: var(--dm-bg-muted) !important; color: var(--dm-text) !important; } html.dark .oc-supplier-page tfoot tr:last-child { background: #262626 !important; color: var(--dm-text) !important; } html.dark .stock-summary-card, html.dark .stock-filters { background: var(--dm-bg-card) !important; color: var(--dm-text) !important; } html.dark .stock-summary-label, html.dark .stock-filters h3, html.dark .filter-checkbox label { color: var(--dm-text-muted) !important; } html.dark .waitlist-item-row { background-color: var(--dm-bg-card) !important; } /* ========== Dropdowns genéricos ========== */ html.dark .item-dropdown, html.dark #supplier-dropdown, html.dark [id="supplier-dropdown"] { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .supplier-dropdown-item { border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .supplier-dropdown-item:hover { background-color: var(--dm-bg-hover) !important; } html.dark .supplier-dropdown-item .supplier-category { color: var(--dm-text-muted) !important; } html.dark .supplier-dropdown-item.selected { background-color: #404040 !important; color: var(--dm-text) !important; } /* ========== Rich text ========== */ html.dark .rich-text-editor { border-color: var(--dm-border) !important; background: var(--dm-bg-card) !important; } html.dark .rich-text-toolbar { background: var(--dm-bg-muted) !important; border-bottom-color: var(--dm-border) !important; } html.dark .rich-text-toolbar button, html.dark .rich-text-toolbar label.rte-color-btn { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .rich-text-toolbar button:hover, html.dark .rich-text-toolbar label.rte-color-btn:hover, html.dark .rich-text-toolbar button.is-active { background: var(--dm-bg-hover) !important; border-color: var(--dm-accent) !important; } html.dark .rich-text-content, html.dark .rich-text-readonly { background: var(--dm-input-bg) !important; color: var(--dm-text) !important; } html.dark .rich-text-content a, html.dark .rich-text-readonly a { color: #93c5fd; } html.dark label { color: var(--dm-text-secondary); } /* ========== Status / urgência (tons escuros, sem azul) ========== */ html.dark .status-pendente { background-color: #3d2e0a; color: #fde68a; } html.dark .status-em-cotacao { background-color: #2a2a2a; color: #e5e5e5; } html.dark .status-aguardando-aprovacao { background-color: #3d2e0a; color: #fde68a; } html.dark .status-aprovado { background-color: #14532d; color: #bbf7d0; } html.dark .status-concluido { background-color: #262626; color: #d4d4d4; } html.dark .status-cancelado { background-color: #3f1515; color: #fecaca; } html.dark .status-aguardando-compra { background-color: #2e1a3d; color: #e9d5ff; } html.dark .status-aguardando-entrega { background-color: #3f1515; color: #fecaca; } html.dark .status-entregue { background-color: #14532d; color: #bbf7d0; } html.dark .urgency-Normal { background-color: #262626; color: #e5e5e5; } html.dark .urgency-Urgente { background-color: #3d2e0a; color: #fef08a; } html.dark .urgency-Muito-Urgente { background-color: #3f1515; color: #fecaca; } html.dark .delivery-due-today { background-color: #2a2008 !important; border-color: #ca8a04 !important; } html.dark .delivery-late { background-color: #2a0f0f !important; border-color: #dc2626 !important; } html.dark .delivery-on-time { border-color: #22c55e !important; } /* ========== Badges / tags cinza ========== */ html.dark .bg-gray-200.text-gray-600, html.dark span.bg-gray-200 { background-color: #404040 !important; color: #e5e5e5 !important; } html.dark .line-through { color: var(--dm-text-muted) !important; } /* ========== Details ========== */ html.dark details, html.dark summary { color: var(--dm-text); } /* ========== Botões header auxiliares ========== */ html.dark #theme-toggle-btn { background-color: var(--dm-bg-muted) !important; color: var(--dm-text) !important; border: 1px solid var(--dm-border); } html.dark #theme-toggle-btn:hover { background-color: var(--dm-bg-hover) !important; } html.dark #btn-update-history { background-color: #404040 !important; } html.dark #notification-button { background-color: #404040 !important; } /* Botões de ação coloridos — manter cores mas levemente mais escuros */ html.dark .bg-blue-600 { background-color: #2563eb !important; } html.dark .bg-green-600 { background-color: #16a34a !important; } html.dark .bg-red-500, html.dark .bg-red-600 { background-color: #dc2626 !important; } html.dark .bg-purple-600 { background-color: #7c3aed !important; } html.dark .loading-skeleton { background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 37%, #1a1a1a 63%) !important; } html.dark .backdrop-blur, html.dark .backdrop-blur-sm, html.dark .backdrop-blur-md { background-color: rgba(18, 18, 18, 0.85) !important; } html.dark .ring-gray-200, html.dark .ring-gray-300 { --tw-ring-color: var(--dm-border) !important; } html.dark .chart-bar { background: linear-gradient(90deg, #525252 0%, #737373 100%) !important; } /* ========== Mobile (mobile.css) ========== */ html.dark .mobile-nav-btn { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } html.dark .mobile-nav-btn.active, html.dark .mobile-nav-btn.active:hover { background: var(--dm-bg-muted) !important; color: var(--dm-text) !important; border-color: var(--dm-border-light) !important; } html.dark #mobile-menu-toggle.active { background-color: #404040 !important; } /* ========== Login ========== */ html.dark body.login-page { background-color: #000 !important; } html.dark body.login-page .login-panel-wrap { background: linear-gradient(to bottom, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.92) 50%, #000 100%) !important; } html.dark body.login-page .login-panel { background: rgba(18, 18, 18, 0.96) !important; border-color: var(--dm-border) !important; } @media (min-width: 1024px) { html.dark body.login-page .login-panel { background: rgba(18, 18, 18, 0.92) !important; } } /* ========== Scrollbar ========== */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: #000; } html.dark ::-webkit-scrollbar-thumb { background: #404040; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #525252; } /* ========== Logo ========== */ html.dark header img[alt*="Logo"], html.dark header img[alt*="TEN"] { filter: brightness(1.08); } /* ========== Lapidação: gradientes pastéis (seções/cards) ========== */ html.dark .from-blue-50, html.dark .from-purple-50, html.dark .from-green-50, html.dark .from-red-50, html.dark .from-yellow-50, html.dark .from-orange-50, html.dark .from-amber-50, html.dark .to-blue-100, html.dark .to-purple-100, html.dark .to-green-100, html.dark .to-red-100, html.dark .to-yellow-100, html.dark .to-orange-100, html.dark .to-amber-100, html.dark .bg-gradient-to-br.from-blue-50, html.dark .bg-gradient-to-br.from-purple-50, html.dark .bg-gradient-to-r.from-blue-50, html.dark .bg-gradient-to-r.from-purple-50 { --tw-gradient-from: var(--dm-bg-muted) !important; --tw-gradient-to: var(--dm-bg-card) !important; } html.dark .bg-gradient-to-br.from-blue-50.to-blue-100, html.dark .bg-gradient-to-br.from-purple-50.to-purple-100, html.dark .bg-gradient-to-br.from-green-50.to-green-100, html.dark .bg-gradient-to-br.from-red-50.to-red-100, html.dark .bg-gradient-to-br.from-yellow-50.to-yellow-100, html.dark .bg-gradient-to-br.from-orange-50.to-orange-100, html.dark .bg-gradient-to-br.from-amber-50.to-amber-100, html.dark .bg-gradient-to-br.from-indigo-50.to-indigo-100, html.dark .bg-gradient-to-br.from-violet-50.to-violet-100, html.dark .bg-gradient-to-br.from-teal-50.to-teal-100, html.dark .bg-gradient-to-r.from-blue-50.to-blue-100, html.dark .bg-gradient-to-r.from-purple-50.to-purple-100, html.dark .bg-gradient-to-r.from-green-50.to-green-100, html.dark .bg-gradient-to-r.from-amber-50.to-orange-50, html.dark .bg-gradient-to-r.from-gray-50.to-gray-100 { background-image: none !important; background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } /* Cards de estatísticas — Usuários (todos uniformes no escuro) */ html.dark #view-users .grid > div { background-image: none !important; background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark #view-users .grid p[class*="text-"][class*="-700"], html.dark #view-users .grid p[class*="text-"][class*="-800"] { color: var(--dm-text) !important; } html.dark #view-users .bg-gradient-to-r.from-gray-50.to-gray-100 { background-color: var(--dm-bg-muted) !important; background-image: none !important; } html.dark #view-users .bg-blue-100 { background-color: var(--dm-bg-muted) !important; } html.dark #view-users .text-blue-600 { color: var(--dm-text-muted) !important; } /* Economia no dashboard */ html.dark .bg-gradient-to-r.from-green-50.to-green-100 { background-color: var(--dm-bg-muted) !important; background-image: none !important; border-color: var(--dm-border) !important; } html.dark .text-green-600 { color: #86efac !important; } html.dark .text-green-800 { color: #bbf7d0 !important; } html.dark .text-green-900 { color: var(--dm-text) !important; } html.dark .border-green-200 { border-color: var(--dm-border) !important; } html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-teal-700, html.dark .text-teal-800, html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-red-700, html.dark .text-red-800 { color: var(--dm-text) !important; } html.dark .border-indigo-200, html.dark .border-violet-200, html.dark .border-teal-200, html.dark .border-yellow-200, html.dark .border-orange-200, html.dark .border-green-200 { border-color: var(--dm-border) !important; } /* Resumo de cotações (accordion + cards — styles.css hardcoded) */ html.dark #quote-visual-summary-container { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border); } html.dark .quote-summary-accordion { border-color: var(--dm-border) !important; background-color: var(--dm-bg-card) !important; } html.dark .quote-summary-accordion summary { background-color: var(--dm-bg-muted) !important; color: var(--dm-text) !important; border-color: var(--dm-border); } html.dark .quote-summary-accordion summary::after { color: var(--dm-text-muted) !important; } html.dark .quote-summary-accordion .accordion-body { background-color: var(--dm-bg-card) !important; border-top-color: var(--dm-border) !important; } html.dark .quote-summary-accordion .bg-green-100, html.dark .quote-summary-accordion .bg-blue-100, html.dark .quote-summary-accordion .bg-purple-100, html.dark .quote-summary-accordion .bg-orange-100 { background-color: #141414 !important; } html.dark .quote-summary-accordion .text-green-800, html.dark .quote-summary-accordion .text-green-900, html.dark .quote-summary-accordion .text-blue-800, html.dark .quote-summary-accordion .text-blue-900, html.dark .quote-summary-accordion .text-purple-800, html.dark .quote-summary-accordion .text-purple-900, html.dark .quote-summary-accordion .text-orange-800, html.dark .quote-summary-accordion .text-orange-900 { color: var(--dm-text) !important; } html.dark .quote-summary-accordion .text-green-700, html.dark .quote-summary-accordion .text-blue-700, html.dark .quote-summary-accordion .text-purple-700, html.dark .quote-summary-accordion .text-orange-700 { color: var(--dm-text-muted) !important; } html.dark .quote-summary-accordion .border-green-500, html.dark .quote-summary-accordion .border-blue-500, html.dark .quote-summary-accordion .border-purple-500, html.dark .quote-summary-accordion .border-orange-500 { border-color: var(--dm-border-light) !important; } html.dark .quote-summary-accordion thead tr.bg-gray-100 { background-color: var(--dm-bg-muted) !important; } /* Cabeçalhos de seção com gradiente colorido forte → neutro */ html.dark .bg-gradient-to-r.from-blue-600.to-purple-600, html.dark .bg-gradient-to-r.from-slate-50.to-white, html.dark .bg-gradient-to-r.from-amber-50.to-orange-50 { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important; background-image: none !important; } html.dark .bg-gradient-to-r.from-blue-600.to-purple-600 .text-white, html.dark .bg-gradient-to-r.from-blue-600.to-purple-600 h2, html.dark .bg-gradient-to-r.from-blue-600.to-purple-600 h3, html.dark .bg-gradient-to-r.from-blue-600.to-purple-600 p { color: var(--dm-text) !important; } html.dark .text-blue-100 { color: var(--dm-text-muted) !important; } /* Ícones KPI do dashboard (gradiente br → cinza escuro) */ html.dark .bg-gradient-to-br.from-blue-500, html.dark .bg-gradient-to-br.from-green-500, html.dark .bg-gradient-to-br.from-yellow-500, html.dark .bg-gradient-to-br.from-red-500, html.dark .bg-gradient-to-br.from-purple-500, html.dark .bg-gradient-to-br.from-orange-500, html.dark .bg-gradient-to-br.from-indigo-500, html.dark .bg-gradient-to-br.from-slate-500 { background: var(--dm-bg-muted) !important; background-image: none !important; } /* Avatar / círculos decorativos pastéis */ html.dark .bg-gradient-to-br.from-blue-100.to-purple-100 { background: var(--dm-bg-muted) !important; background-image: none !important; } /* Badges de função (usuários) — fundo escuro, texto colorido */ html.dark .bg-gradient-to-r.from-yellow-100, html.dark .bg-gradient-to-r.from-red-100, html.dark .bg-gradient-to-r.from-green-100, html.dark .bg-gradient-to-r.from-purple-100, html.dark .bg-gradient-to-r.from-indigo-100, html.dark .bg-gradient-to-r.from-violet-100, html.dark .bg-gradient-to-r.from-teal-100, html.dark .bg-gradient-to-r.from-gray-100 { background-image: none !important; background-color: #2a2a2a !important; } html.dark .bg-gradient-to-r.from-yellow-100 .border-yellow-300, html.dark span.border-yellow-300, html.dark span.border-red-300, html.dark span.border-green-300, html.dark span.border-purple-300, html.dark span.border-indigo-300, html.dark span.border-violet-300, html.dark span.border-teal-300 { border-color: var(--dm-border-light) !important; } html.dark .border-blue-200, html.dark .border-purple-200, html.dark .border-red-200, html.dark .border-amber-200, html.dark .border-orange-200, html.dark .border-green-200 { border-color: var(--dm-border) !important; } html.dark .border-red-200 { border-color: #5c2a2a !important; } /* ========== Filtros dashboard / financeiro ========== */ html.dark #dashboard-filters { background-color: rgba(255, 255, 255, 0.06) !important; } html.dark .dashboard-filter-btn.active, html.dark .finance-filter-btn.active { background-color: var(--dm-bg-muted) !important; color: var(--dm-text) !important; box-shadow: none !important; } html.dark .finance-filter-btn:not(.active) { color: var(--dm-text-muted) !important; } html.dark .finance-filter-btn:not(.active):hover { background-color: rgba(255, 255, 255, 0.06) !important; } html.dark .hover\:bg-white\/50:hover { background-color: rgba(255, 255, 255, 0.08) !important; } /* ========== Notificações ========== */ html.dark #notification-panel { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } html.dark .notification-panel-header { background-color: var(--dm-bg-muted) !important; border-color: var(--dm-border) !important; } html.dark .notification-item { border-color: var(--dm-border) !important; } html.dark .notification-item:hover { background-color: var(--dm-bg-hover) !important; } /* ========== Modais — rodapé, ícones, overlay ========== */ html.dark .modal-close:hover { background-color: var(--dm-bg-hover) !important; color: var(--dm-text) !important; } html.dark #modal-negotiation-history .bg-amber-100 { background-color: #3d2e0a !important; color: #fcd34d !important; } html.dark #modal-negotiation-history .border-b.border-gray-200.bg-gray-50, html.dark [id^="modal-"] .border-t.border-gray-200.bg-gray-50 { background-color: var(--dm-bg-muted) !important; border-color: var(--dm-border) !important; } html.dark .bg-black.bg-opacity-50, html.dark .bg-black\/50 { background-color: rgba(0, 0, 0, 0.82) !important; } /* ========== Cards de status / relatório ========== */ html.dark .status-report-card.bg-blue-50, html.dark .status-report-card.bg-green-50, html.dark .status-report-card.bg-yellow-50, html.dark .status-report-card.bg-red-50, html.dark .status-report-card.bg-purple-50, html.dark .status-report-card.bg-gray-50, html.dark .bg-blue-50.border-l-4, html.dark .bg-gray-50.border-l-4 { background-color: var(--dm-bg-card) !important; } html.dark .bg-gray-200.rounded-full { background-color: var(--dm-border-light) !important; } /* ========== Botões secundários / voltar ========== */ html.dark .bg-gray-200.text-gray-800, html.dark button.bg-gray-200 { background-color: var(--dm-bg-muted) !important; color: var(--dm-text) !important; } html.dark .hover\:bg-gray-300:hover, html.dark button.hover\:bg-gray-300:hover { background-color: var(--dm-bg-hover) !important; } html.dark .hover\:bg-gray-600:hover, html.dark .hover\:bg-gray-500:hover { background-color: #525252 !important; } html.dark .hover\:bg-gray-100\/80:hover, html.dark .hover\:bg-gray-100:hover { background-color: var(--dm-bg-hover) !important; } /* ========== Anexos / alertas ========== */ html.dark .view-attachment-btn, html.dark .bg-blue-100.hover\:bg-blue-200 { background-color: #2a2a2a !important; color: #93c5fd !important; border-color: var(--dm-border) !important; } html.dark .view-attachment-btn:hover { background-color: var(--dm-bg-hover) !important; } html.dark .bg-blue-100.border-l-4 { background-color: #1f2937 !important; } html.dark .border-b-2.border-gray-300 { border-color: var(--dm-border) !important; } html.dark tr.border-b.border-gray-200.hover\:bg-gray-50:hover { background-color: var(--dm-bg-hover) !important; } html.dark tbody.bg-white { background-color: transparent !important; } /* ========== Lista de espera / templates ========== */ html.dark .waitlist-item, html.dark .stock-item, html.dark .delivery-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark .waitlist-status-badge.bg-gray-100 { background-color: #404040 !important; color: #e5e5e5 !important; } html.dark .bg-blue-50.border.border-blue-200 { background-color: #1a1f2e !important; border-color: var(--dm-border) !important; } /* ========== Analytics ========== */ html.dark .analytics-header, html.dark .kpi-card, html.dark .chart-container, html.dark .forecasts-section, html.dark .recommendations-section, html.dark .detailed-metrics { background-color: var(--dm-bg-card) !important; color: var(--dm-text) !important; } html.dark .recommendation-card.bg-gray-50 { background-color: var(--dm-bg-muted) !important; } /* ========== Mobile nav (#main-nav branco no styles.css) ========== */ @media (max-width: 640px) { html.dark #main-nav { background: var(--dm-bg-card) !important; box-shadow: var(--dm-shadow) !important; } } /* Textura do header dashboard — mais discreta no escuro */ html.dark #view-dashboard .bg-gradient-to-r::before { opacity: 0.08; } /* ========== Links e seleção ========== */ html.dark a:not([class*="bg-"]):not(.text-white) { color: #93c5fd; } html.dark ::selection { background: #404040; color: #fafafa; } /* ========== Print — manter claro ========== */ @media print { html.dark body, html.dark .bg-white { background: white !important; color: black !important; } }