/** * Sistema de Temas - HI Transportes Helpdesk * Suporte a Tema Claro e Escuro * * Uso: Aplicar data-theme="light" ou data-theme="dark" no */ /* ======================================== VARIÁVEIS DO TEMA CLARO (Padrão) ======================================== */ :root, [data-theme="light"] { /* Cores Primárias */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-light: #dbeafe; --color-primary-dark: #1d4ed8; /* Cores Secundárias */ --color-secondary: #6b7280; --color-secondary-hover: #4b5563; --color-secondary-light: #f3f4f6; /* Cores de Status */ --color-success: #10b981; --color-success-light: #d1fae5; --color-success-dark: #059669; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-warning-dark: #d97706; --color-danger: #ef4444; --color-danger-light: #fee2e2; --color-danger-dark: #dc2626; --color-info: #3b82f6; --color-info-light: #dbeafe; --color-info-dark: #2563eb; /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --bg-hover: #f3f4f6; --bg-active: #e5e7eb; --bg-card: #ffffff; --bg-modal: #ffffff; --bg-dropdown: #ffffff; --bg-input: #ffffff; --bg-sidebar: #ffffff; --bg-navbar: #ffffff; --bg-footer: #f9fafb; /* Textos */ --text-primary: #111827; --text-secondary: #4b5563; --text-tertiary: #6b7280; --text-muted: #9ca3af; --text-inverted: #ffffff; --text-link: #3b82f6; --text-link-hover: #2563eb; --text-on-primary: #ffffff; /* Texto sobre cor primária (botões verdes) */ /* Bordas */ --border-primary: #e5e7eb; --border-secondary: #d1d5db; --border-focus: #3b82f6; --border-error: #ef4444; /* Sombras */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Overlays */ --overlay-light: rgba(255, 255, 255, 0.8); --overlay-dark: rgba(0, 0, 0, 0.5); /* Scrollbar */ --scrollbar-bg: #f3f4f6; --scrollbar-thumb: #d1d5db; --scrollbar-thumb-hover: #9ca3af; /* Específicos de componentes */ --table-header-bg: #f9fafb; --table-row-hover: #f3f4f6; --table-border: #e5e7eb; --badge-bg: #e5e7eb; --badge-text: #374151; --code-bg: #f3f4f6; --code-text: #1f2937; /* Gradientes */ --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); --gradient-secondary: linear-gradient(135deg, #6b7280 0%, #374151 100%); --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%); /* Transições */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; } /* ======================================== VARIÁVEIS DO TEMA ESCURO ======================================== */ [data-theme="dark"] { /* Cores Primárias */ --color-primary: #60a5fa; --color-primary-hover: #3b82f6; --color-primary-light: #1e3a5f; --color-primary-dark: #93c5fd; /* Cores Secundárias */ --color-secondary: #9ca3af; --color-secondary-hover: #d1d5db; --color-secondary-light: #374151; /* Cores de Status */ --color-success: #34d399; --color-success-light: #064e3b; --color-success-dark: #6ee7b7; --color-warning: #fbbf24; --color-warning-light: #78350f; --color-warning-dark: #fcd34d; --color-danger: #f87171; --color-danger-light: #7f1d1d; --color-danger-dark: #fca5a5; --color-info: #60a5fa; --color-info-light: #1e3a5f; --color-info-dark: #93c5fd; /* Backgrounds */ --bg-primary: #0B0F19; --bg-secondary: #1F2937; --bg-tertiary: #111827; --bg-hover: rgba(255, 255, 255, 0.05); --bg-active: rgba(255, 255, 255, 0.08); --bg-card: #1F2937; --bg-modal: #1F2937; --bg-dropdown: #1F2937; --bg-input: #111827; --bg-sidebar: #111827; --bg-navbar: #111827; --bg-footer: #0B0F19; /* Textos */ --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-tertiary: #94A3B8; --text-muted: #64748B; --text-inverted: #0F172A; --text-link: #60A5FA; --text-link-hover: #93C5FD; --text-on-primary: #ffffff; /* Texto sobre cor primária (botões verdes) */ /* Bordas */ --border-primary: rgba(255, 255, 255, 0.08); --border-secondary: rgba(255, 255, 255, 0.15); --border-focus: #3B82F6; --border-error: #F87171; /* Sombras */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4); /* Overlays */ --overlay-light: rgba(31, 41, 55, 0.8); --overlay-dark: rgba(0, 0, 0, 0.7); /* Scrollbar */ --scrollbar-bg: #1f2937; --scrollbar-thumb: #4b5563; --scrollbar-thumb-hover: #6b7280; /* Específicos de componentes */ --table-header-bg: #374151; --table-row-hover: #374151; --table-border: #4b5563; --badge-bg: #374151; --badge-text: #e5e7eb; --code-bg: #374151; --code-text: #e5e7eb; /* Gradientes */ --gradient-primary: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); --gradient-secondary: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%); --gradient-success: linear-gradient(135deg, #34d399 0%, #10b981 100%); } /* ======================================== ESTILOS GLOBAIS COM VARIÁVEIS ======================================== */ /* Body e HTML */ html { transition: background-color var(--transition-normal), color var(--transition-normal); } body { background-color: var(--bg-secondary); color: var(--text-primary); transition: background-color var(--transition-normal), color var(--transition-normal); } /* Links */ a { color: var(--text-link); transition: color var(--transition-fast); } a:hover { color: var(--text-link-hover); } /* Scrollbar personalizada */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-bg); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); } /* ======================================== COMPONENTES COM TEMA ======================================== */ /* Cards */ .theme-card { background-color: var(--bg-card); border: 1px solid var(--border-primary); box-shadow: var(--shadow-md); transition: all var(--transition-normal); } .theme-card:hover { box-shadow: var(--shadow-lg); } /* Inputs e Forms */ .theme-input { background-color: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); transition: all var(--transition-fast); } .theme-input:focus { border-color: var(--border-focus); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .theme-input::placeholder { color: var(--text-muted); } /* Botões */ .theme-btn { transition: all var(--transition-fast); } .theme-btn-primary { background-color: var(--color-primary); color: var(--text-inverted); } .theme-btn-primary:hover { background-color: var(--color-primary-hover); } .theme-btn-secondary { background-color: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-primary); } .theme-btn-secondary:hover { background-color: var(--bg-hover); } /* Tabelas */ .theme-table { background-color: var(--bg-card); border: 1px solid var(--table-border); } .theme-table th { background-color: var(--table-header-bg); color: var(--text-primary); border-bottom: 1px solid var(--table-border); } .theme-table td { border-bottom: 1px solid var(--table-border); color: var(--text-secondary); } .theme-table tr:hover { background-color: var(--table-row-hover); } /* Modais */ .theme-modal { background-color: var(--bg-modal); border: 1px solid var(--border-primary); box-shadow: var(--shadow-xl); } .theme-modal-overlay { background-color: var(--overlay-dark); } /* Dropdowns */ .theme-dropdown { background-color: var(--bg-dropdown); border: 1px solid var(--border-primary); box-shadow: var(--shadow-lg); } .theme-dropdown-item { color: var(--text-primary); transition: background-color var(--transition-fast); } .theme-dropdown-item:hover { background-color: var(--bg-hover); } /* Sidebar */ .theme-sidebar { background-color: var(--bg-sidebar); border-right: 1px solid var(--border-primary); } /* Sidebar Items */ .sidebar-item { color: var(--text-secondary); transition: all var(--transition-fast); } .sidebar-item:hover { background-color: var(--bg-hover); color: var(--text-primary); } .sidebar-item.active { background-color: var(--color-primary-light); color: var(--color-primary); font-weight: 600; } [data-theme="dark"] .sidebar-item.active { background-color: rgba(59, 130, 246, 0.15); color: #60a5fa; } /* Navbar */ .theme-navbar { background-color: var(--bg-navbar); border-bottom: 1px solid var(--border-primary); box-shadow: var(--shadow-sm); } /* Badges */ .theme-badge { background-color: var(--badge-bg); color: var(--badge-text); } /* Alerts */ .theme-alert { border-radius: 0.5rem; padding: 1rem; } .theme-alert-success { background-color: var(--color-success-light); color: var(--color-success-dark); border: 1px solid var(--color-success); } .theme-alert-warning { background-color: var(--color-warning-light); color: var(--color-warning-dark); border: 1px solid var(--color-warning); } .theme-alert-danger { background-color: var(--color-danger-light); color: var(--color-danger-dark); border: 1px solid var(--color-danger); } .theme-alert-info { background-color: var(--color-info-light); color: var(--color-info-dark); border: 1px solid var(--color-info); } /* Code blocks */ .theme-code { background-color: var(--code-bg); color: var(--code-text); border-radius: 0.375rem; padding: 0.25rem 0.5rem; font-family: monospace; } /* ======================================== UTILITÁRIOS DE TEMA ======================================== */ /* Backgrounds */ .theme-bg-primary { background-color: var(--bg-primary); } .theme-bg-secondary { background-color: var(--bg-secondary); } .theme-bg-tertiary { background-color: var(--bg-tertiary); } .theme-bg-card { background-color: var(--bg-card); } /* Textos */ .theme-text-primary { color: var(--text-primary); } .theme-text-secondary { color: var(--text-secondary); } .theme-text-tertiary { color: var(--text-tertiary); } .theme-text-muted { color: var(--text-muted); } /* Bordas */ .theme-border { border-color: var(--border-primary); } .theme-border-secondary { border-color: var(--border-secondary); } /* ======================================== OVERRIDE PARA TAILWIND (Tema Escuro) ======================================== */ [data-theme="dark"] { /* Override para classes do Tailwind que usam cores fixas */ /* Backgrounds brancos */ .bg-white { background-color: var(--bg-card) !important; } .bg-gray-50 { background-color: var(--bg-secondary) !important; } .bg-gray-100 { background-color: var(--bg-tertiary) !important; } .bg-gray-200 { background-color: #4b5563 !important; } /* Textos */ .text-gray-900, .text-gray-800 { color: var(--text-primary) !important; } .text-gray-700, .text-gray-600 { color: var(--text-secondary) !important; } .text-gray-500, .text-gray-400 { color: var(--text-tertiary) !important; } /* Bordas */ .border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border-primary) !important; } /* Hover states */ .hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover { background-color: var(--bg-hover) !important; } /* Divide */ .divide-gray-200 > * + * { border-color: var(--border-primary) !important; } /* Placeholders */ .placeholder-gray-400::placeholder, .placeholder-gray-500::placeholder { color: var(--text-muted) !important; } /* Focus rings */ .focus\:ring-blue-500:focus { --tw-ring-color: var(--color-primary) !important; } .focus\:border-blue-500:focus { border-color: var(--border-focus) !important; } /* Inputs e Selects */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], textarea, select { background-color: var(--bg-input) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; } input::placeholder, textarea::placeholder { color: var(--text-muted) !important; } /* Card shadow class personalizada */ .card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important; } /* Tables */ table th { background-color: var(--table-header-bg) !important; color: var(--text-primary) !important; } table td { border-color: var(--table-border) !important; } table tr:hover td { background-color: var(--table-row-hover) !important; } /* Links coloridos */ a.text-blue-600, a.text-blue-700, .text-blue-600, .text-blue-700 { color: #60a5fa !important; } a.text-blue-600:hover, a.text-blue-700:hover { color: #93c5fd !important; } /* Shadows mais suaves no dark */ .shadow, .shadow-md, .shadow-lg { --tw-shadow-color: rgba(0, 0, 0, 0.4) !important; } } /* ======================================== ANIMAÇÃO DE TRANSIÇÃO DE TEMA ======================================== */ .theme-transition, .theme-transition * { transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal) !important; } /* ======================================== CLASSES UTILITÁRIAS DE TEMA ======================================== */ /* Textos */ .theme-text-primary { color: var(--text-primary) !important; } .theme-text-secondary { color: var(--text-secondary) !important; } .theme-text-muted { color: var(--text-muted) !important; } /* Backgrounds */ .theme-bg { background-color: var(--bg-primary) !important; } .theme-bg-secondary { background-color: var(--bg-secondary) !important; } .theme-card-bg { background-color: var(--bg-card) !important; } /* Hover states */ .theme-hover-bg:hover { background-color: var(--bg-hover) !important; } /* Borders */ .theme-border { border-color: var(--border-primary) !important; } /* Header específico */ .theme-header { background-color: var(--bg-navbar); border-bottom: 1px solid var(--border-primary); transition: background-color var(--transition-normal), border-color var(--transition-normal); } /* Ícones de tema - controle de visibilidade */ .theme-icon-sun { display: none; } .theme-icon-moon { display: inline-block; } [data-theme="dark"] .theme-icon-sun { display: inline-block; } [data-theme="dark"] .theme-icon-moon { display: none; } /* ======================================== TOGGLE DE TEMA ======================================== */ .theme-toggle { position: relative; width: 56px; height: 28px; background-color: var(--bg-tertiary); border-radius: 9999px; cursor: pointer; transition: background-color var(--transition-fast); border: 2px solid var(--border-primary); } .theme-toggle:hover { background-color: var(--bg-hover); } .theme-toggle-slider { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: var(--color-primary); border-radius: 50%; transition: transform var(--transition-fast); display: flex; align-items: center; justify-content: center; } [data-theme="dark"] .theme-toggle-slider { transform: translateX(28px); } .theme-toggle-icon { font-size: 12px; color: white; } /* ======================================== ACESSIBILIDADE ======================================== */ /* Focus visible para navegação por teclado */ *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { :root, [data-theme="light"] { --border-primary: #000000; --text-primary: #000000; } [data-theme="dark"] { --border-primary: #ffffff; --text-primary: #ffffff; } } /* ======================================== ESTILOS PARA COMPONENTES ESPECÍFICOS ======================================== */ /* Quill Editor no modo escuro */ [data-theme="dark"] .ql-toolbar { background-color: var(--bg-terciary) !important; border-color: var(--border-primary) !important; } [data-theme="dark"] .ql-container { background-color: var(--bg-input) !important; border-color: var(--border-primary) !important; } [data-theme="dark"] .ql-editor { color: var(--text-primary) !important; } [data-theme="dark"] .ql-editor.ql-blank::before { color: var(--text-muted) !important; } [data-theme="dark"] .ql-stroke { stroke: var(--text-secondary) !important; } [data-theme="dark"] .ql-fill { fill: var(--text-secondary) !important; } [data-theme="dark"] .ql-picker-label { color: var(--text-secondary) !important; } [data-theme="dark"] .ql-picker-options { background-color: var(--bg-dropdown) !important; border-color: var(--border-primary) !important; } [data-theme="dark"] .ql-picker-item { color: var(--text-primary) !important; } /* SweetAlert2 no modo escuro */ [data-theme="dark"] .swal2-popup { background-color: var(--bg-card) !important; color: var(--text-primary) !important; } [data-theme="dark"] .swal2-title { color: var(--text-primary) !important; } [data-theme="dark"] .swal2-html-container { color: var(--text-secondary) !important; } [data-theme="dark"] .swal2-confirm { background-color: var(--color-primary) !important; color: #fff !important; } [data-theme="dark"] .swal2-cancel { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-textarea { background-color: var(--bg-input) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; } /* ======================================== NOTIFICAÇÕES - DROPDOWN (Tema Escuro) ======================================== */ /* Backgrounds coloridos claros → escuros no dark mode */ [data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; } [data-theme="dark"] .bg-green-50 { background-color: rgba(16, 185, 129, 0.1) !important; } [data-theme="dark"] .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.1) !important; } [data-theme="dark"] .bg-purple-50 { background-color: rgba(139, 92, 246, 0.1) !important; } [data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; } [data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; } [data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1) !important; } /* Textos coloridos que precisam ser mais claros no dark mode */ [data-theme="dark"] .text-blue-800 { color: #93c5fd !important; } [data-theme="dark"] .text-green-800 { color: #6ee7b7 !important; } [data-theme="dark"] .text-yellow-800 { color: #fcd34d !important; } [data-theme="dark"] .text-purple-800 { color: #c4b5fd !important; } [data-theme="dark"] .text-red-800 { color: #fca5a5 !important; } [data-theme="dark"] .text-amber-700 { color: #fcd34d !important; } [data-theme="dark"] .text-green-700 { color: #6ee7b7 !important; } [data-theme="dark"] .text-red-700 { color: #fca5a5 !important; } [data-theme="dark"] .text-yellow-700 { color: #fcd34d !important; } [data-theme="dark"] .text-purple-700 { color: #c4b5fd !important; } [data-theme="dark"] .text-red-600 { color: #f87171 !important; } [data-theme="dark"] .text-green-600 { color: #34d399 !important; } [data-theme="dark"] .text-yellow-600 { color: #fbbf24 !important; } [data-theme="dark"] .text-purple-600 { color: #a78bfa !important; } /* Bordas coloridas no dark mode */ [data-theme="dark"] .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; } [data-theme="dark"] .border-green-200 { border-color: rgba(16, 185, 129, 0.3) !important; } [data-theme="dark"] .border-yellow-200 { border-color: rgba(245, 158, 11, 0.3) !important; } [data-theme="dark"] .border-purple-200 { border-color: rgba(139, 92, 246, 0.3) !important; } [data-theme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; } [data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; } /* Backgrounds coloridos de badges/status */ [data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; } [data-theme="dark"] .bg-green-100 { background-color: rgba(16, 185, 129, 0.15) !important; } [data-theme="dark"] .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.15) !important; } [data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; } [data-theme="dark"] .bg-purple-100 { background-color: rgba(139, 92, 246, 0.15) !important; } /* Hover no dropdown de notificações */ [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: rgba(255, 255, 255, 0.05) !important; } /* Hover em botões/links coloridos no dark mode */ [data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.1) !important; } [data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.1) !important; } [data-theme="dark"] .hover\:bg-green-50:hover { background-color: rgba(16, 185, 129, 0.1) !important; } [data-theme="dark"] .hover\:bg-blue-200:hover { background-color: rgba(59, 130, 246, 0.2) !important; } [data-theme="dark"] .hover\:bg-red-200:hover { background-color: rgba(239, 68, 68, 0.2) !important; } [data-theme="dark"] .hover\:bg-green-200:hover { background-color: rgba(16, 185, 129, 0.2) !important; } /* Tailwind Typography (prose) no modo escuro */ [data-theme="dark"] .prose { color: var(--text-primary) !important; } [data-theme="dark"] .prose h1, [data-theme="dark"] .prose h2, [data-theme="dark"] .prose h3, [data-theme="dark"] .prose h4, [data-theme="dark"] .prose strong { color: var(--text-primary) !important; } [data-theme="dark"] .prose p, [data-theme="dark"] .prose li, [data-theme="dark"] .prose td, [data-theme="dark"] .prose th { color: var(--text-secondary) !important; } [data-theme="dark"] .prose a { color: var(--text-link) !important; } [data-theme="dark"] .prose blockquote { color: var(--text-tertiary) !important; border-left-color: var(--border-secondary) !important; } [data-theme="dark"] .prose code { color: var(--code-text) !important; background-color: var(--code-bg) !important; } [data-theme="dark"] .prose pre { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .prose hr { border-color: var(--border-primary) !important; } /* Select2 no modo escuro (se usado) */ [data-theme="dark"] .select2-container--default .select2-selection--single { background-color: var(--bg-input) !important; border-color: var(--border-primary) !important; } [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary) !important; } [data-theme="dark"] .select2-dropdown { background-color: var(--bg-dropdown) !important; border-color: var(--border-primary) !important; } [data-theme="dark"] .select2-results__option { color: var(--text-primary) !important; } [data-theme="dark"] .select2-results__option--highlighted { background-color: var(--bg-hover) !important; } /* Fancybox no modo escuro */ [data-theme="dark"] .fancybox__toolbar { background-color: var(--bg-card) !important; } /* File drop zone no modo escuro */ [data-theme="dark"] .file-drop-zone { border-color: var(--border-primary) !important; background-color: var(--bg-secondary) !important; } [data-theme="dark"] .file-drop-zone.dragover { border-color: var(--color-success) !important; background-color: rgba(16, 185, 129, 0.1) !important; } /* ======================================== CLASSES UTILITÁRIAS DO SISTEMA DE TEMAS ======================================== */ /* Backgrounds */ .theme-bg-primary { background-color: var(--bg-primary); } .theme-bg-secondary { background-color: var(--bg-secondary); } .theme-bg-card { background-color: var(--bg-card); } .theme-bg-input { background-color: var(--bg-input); } .theme-bg-hover:hover { background-color: var(--bg-hover); } /* Textos */ .theme-text-primary { color: var(--text-primary); } .theme-text-secondary { color: var(--text-secondary); } .theme-text-muted { color: var(--text-muted); } /* Bordas */ .theme-border { border-color: var(--border-primary); } .theme-border-light { border-color: var(--border-light); } /* Gradientes */ .theme-gradient-header { background: var(--gradient-primary); } /* Estados especiais */ .theme-sidebar-header { background: linear-gradient(135deg, var(--color-primary-light) 0%, rgba(59, 130, 246, 0.1) 100%); } /* Componentes específicos */ .theme-card { background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border-light); } .theme-card:hover { background-color: var(--bg-hover); } .theme-input { background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border-primary); } .theme-input:focus { border-color: var(--color-primary); } .theme-button-primary { background-color: var(--color-primary); color: white; } .theme-button-primary:hover { background-color: var(--color-primary-hover); } /* Item selecionado na lista */ .selected-item { background-color: var(--color-primary-light) !important; } [data-theme="dark"] .selected-item { background-color: var(--color-primary-dark) !important; opacity: 0.2; } /* ======================================== ESTILOS PREMIUM DE DESIGN (UX/UI SENIOR) ======================================== */ [data-theme="dark"] .dashboard-bg { background-color: #0B0F19 !important; } .metric-card { background-color: var(--bg-card); border: 1px solid var(--border-primary); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; border-radius: 0.75rem; /* 12px */ } .metric-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--color-primary); opacity: 0.8; } .metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .table-container-card { background-color: var(--bg-card); border: 1px solid var(--border-primary); box-shadow: var(--shadow-md); border-radius: 12px; overflow: hidden; margin-bottom: 2rem; } .custom-table-header { background-color: var(--table-header-bg); border-bottom: 2px solid var(--border-primary); } .custom-table-header th { color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; padding: 1rem 1.5rem; } .zebra-row:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); } .hover-row-effect:hover { background-color: var(--bg-hover) !important; transition: background-color 0.15s ease; } /* Melhora o contraste de inputs em Dark Mode */ [data-theme="dark"] .form-input-premium { background-color: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--border-primary) !important; color: var(--text-primary) !important; border-radius: 0.5rem; } .filters-surface { background-color: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-primary); border-radius: 1rem; padding: 1.5rem; } /* Badge Premium */ .badge-premium { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 0.25rem 0.65rem; border-radius: 9999px; letter-spacing: 0.025em; } /* Scrollbar Sutil para o App */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0B0F19; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1F2937; border-radius: 5px; border: 2px solid #0B0F19; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #374151; }