/* ============================================================ VARIÁVEIS DE TEMA — CLARO (padrão) ============================================================ */ :root { --primary-green: #22c55e; --primary-blue: #2563eb; --primary-white: #ffffff; --dark-slate: #0f172a; /* Tema Claro */ --bg-page: #f1f5f9; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --text-primary: #0f172a; --text-secondary: #64748b; --border-color: #e2e8f0; --sidebar-bg: #0f172a; --input-bg: #f8fafc; --table-head-bg: #f8fafc; --hover-row: #f1f5f9; } /* ============================================================ MODO ESCURO — ativado pela classe .dark no ============================================================ */ html.dark { --bg-page: #0f172a; --bg-card: #1e293b; --bg-card-hover: #263248; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --border-color: #334155; --sidebar-bg: #020617; --input-bg: #0f172a; --table-head-bg: #1e293b; --hover-row: #263248; } /* ============================================================ APLICAÇÃO DAS VARIÁVEIS ============================================================ */ body { background-color: var(--bg-page) !important; color: var(--text-primary) !important; transition: background-color 0.3s ease, color 0.3s ease; } html.dark .bg-white, html.dark .bg-white\/90 { background-color: var(--bg-card) !important; } html.dark .bg-slate-100 { background-color: var(--bg-page) !important; } html.dark .bg-slate-50 { background-color: var(--table-head-bg) !important; } html.dark .text-slate-800, html.dark .text-slate-900 { color: var(--text-primary) !important; } html.dark .text-slate-500, html.dark .text-slate-600 { color: var(--text-secondary) !important; } html.dark .border-slate-200, html.dark .border-slate-100 { border-color: var(--border-color) !important; } html.dark .hover\:bg-slate-50:hover { background-color: var(--hover-row) !important; } html.dark .divide-slate-100 > * { border-color: var(--border-color) !important; } aside { background-color: var(--sidebar-bg) !important; transition: background-color 0.3s ease; } html.dark input, html.dark textarea, html.dark select { background-color: var(--input-bg) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* ============================================================ BOTÃO TOGGLE DE TEMA ============================================================ */ #theme-toggle { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border: none; background-color: #1e293b; color: #94a3b8; } #theme-toggle:hover { background-color: #334155; color: #f1f5f9; transform: scale(1.1); } #theme-toggle .icon-sun { display: none; } #theme-toggle .icon-moon { display: block; } html.dark #theme-toggle .icon-sun { display: block; } html.dark #theme-toggle .icon-moon { display: none; } /* ============================================================ UTILITÁRIOS DE MARCA ============================================================ */ .bg-brand-green { background-color: var(--primary-green); } .text-brand-green { color: var(--primary-green); } .border-brand-green { border-color: var(--primary-green); } .bg-brand-blue { background-color: var(--primary-blue); } .text-brand-blue { color: var(--primary-blue); } .border-brand-blue { border-color: var(--primary-blue); } .btn-primary { background-color: var(--primary-blue); color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600; transition: all 0.2s; } .btn-primary:hover { background-color: #1d4ed8; transform: translateY(-1px); } .btn-success { background-color: var(--primary-green); color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600; transition: all 0.2s; } .btn-success:hover { background-color: #16a34a; transform: translateY(-1px); } /* ============================================================ SCROLLBAR DISCRETA — SIDEBAR ============================================================ */ .sidebar-scroll { scrollbar-width: thin; /* Firefox */ scrollbar-color: #334155 transparent; /* Firefox: thumb / track */ } .sidebar-scroll::-webkit-scrollbar { width: 4px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 99px; } .sidebar-scroll::-webkit-scrollbar-thumb:hover { background-color: #475569; } /* ============================================================ DARK MODE — CORREÇÕES ESPECÍFICAS ============================================================ */ /* 1. Caixa de descrição do ticket (bg-slate-50 + border-l azul) */ html.dark .bg-slate-50.shadow-inner { background-color: #1e293b !important; color: #cbd5e1 !important; border-color: #3b82f6 !important; } /* 2. Cards do painel_controle (bg-white com border-blue-100 / border-slate-200) */ html.dark .bg-white.rounded-lg { background-color: #1e293b !important; border-color: #334155 !important; } /* 3. Textos internos dos cards em dark */ html.dark .text-slate-700 { color: #cbd5e1 !important; } html.dark .text-slate-600 { color: #94a3b8 !important; } /* 4. Labels dentro dos cards */ html.dark label.text-slate-700, html.dark label.font-bold { color: #94a3b8 !important; } /* 5. Inputs com border sem classe específica */ html.dark input:not([type="checkbox"]):not([type="radio"]), html.dark textarea, html.dark select { background-color: #0f172a !important; color: #f1f5f9 !important; border-color: #334155 !important; } /* 6. Texto dentro de p.text-slate-600 nos cards */ html.dark p.text-slate-600, html.dark p.text-sm.text-slate-600 { color: #94a3b8 !important; } /* 7. Subtextos pequenos */ html.dark p.text-\[10px\].text-slate-500, html.dark .text-slate-500 { color: #64748b !important; } /* 8. bg-green-100 e bg-red-100 de alertas — melhor em dark */ html.dark .bg-green-100 { background-color: #052e16 !important; border-color: #16a34a !important; color: #86efac !important; } html.dark .bg-red-100 { background-color: #2d0a0a !important; border-color: #dc2626 !important; color: #fca5a5 !important; } /* 9. Seções bg-white genéricas em cards de páginas mistas */ html.dark section.bg-white, html.dark div.bg-white { background-color: #1e293b !important; border-color: #334155 !important; } /* 10. Logs / histórico — avatar bg-slate-100 */ html.dark .bg-slate-100 { background-color: #0f172a !important; color: #94a3b8 !important; } /* 11. Novo ticket — selects e campos */ html.dark .bg-slate-900 input, html.dark .bg-slate-900 select, html.dark .bg-slate-900 textarea { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; } /* ============================================================ PAINEL CONTROLE — CARDS DE CONFIGURAÇÃO ============================================================ */ .config-card { background-color: #ffffff; transition: background-color 0.3s ease, border-color 0.3s ease; } html.dark .config-card { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .config-card .text-slate-700, html.dark .config-card label, html.dark .config-card p.text-sm { color: #cbd5e1 !important; } /* ============================================================ EDITAR TICKET — CAIXA DE DESCRIÇÃO ============================================================ */ .description-box { background-color: #f8fafc; color: #334155; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } html.dark .description-box { background-color: #0f172a !important; color: #94a3b8 !important; border-left-color: #3b82f6 !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.4) !important; } /* ============================================================ NOVO TICKET — CARD DO FORMULÁRIO (bg-white/90 backdrop) ============================================================ */ html.dark .bg-white\/90 { background-color: rgba(30, 41, 59, 0.95) !important; border-color: #334155 !important; } html.dark .hover\:shadow-blue-200\/40:hover { box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.15) !important; } /* Tom Select — dark mode */ html.dark .ts-wrapper .ts-control { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; } html.dark .ts-wrapper.full .ts-control, html.dark .ts-wrapper:not(.no-delete) .ts-control { background-color: #0f172a !important; } html.dark .ts-dropdown { background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html.dark .ts-dropdown .option:hover, html.dark .ts-dropdown .option.active { background-color: #2563eb !important; color: #ffffff !important; } /* Labels do formulário */ html.dark label.block { color: #94a3b8 !important; }