/* Vision Desk - Dark Mode Theme */

/* Configuração de tema */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --card-bg: #ffffff;
  --modal-bg: #ffffff;
  --input-bg: #ffffff;
  --select-bg: #ffffff;
}

/* Dark Mode */
body.dark-mode {
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --bg-tertiary: #374151;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --border-color: #4b5563;
  --card-bg: #374151;
  --modal-bg: #1f2937;
  --input-bg: #374151;
  --select-bg: #374151;
}

/* Aplicar variáveis CSS */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Forçar fundo escuro no body em dark mode */
body.dark-mode {
  background-color: #111827 !important;
  color: #f9fafb !important;
}

/* Container principal */
body.dark-mode .container {
  background-color: transparent !important;
}

/* Modais */
body.dark-mode .bg-white {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

/* Fundo principal da página */
body.dark-mode.bg-gray-50 {
  background-color: #111827 !important;
}

/* Cards e painéis */
body.dark-mode .bg-gray-50:not(body),
body.dark-mode .bg-gray-100 {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .bg-gray-200 {
  background-color: var(--bg-tertiary) !important;
}

/* Cards escuros do dashboard */
body.dark-mode [class*="bg-gray-800"],
body.dark-mode [class*="bg-slate-800"] {
  background-color: #1e293b !important;
  color: var(--text-primary) !important;
}

/* Textos */
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900 {
  color: var(--text-primary) !important;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 {
  color: var(--text-secondary) !important;
}

body.dark-mode .text-gray-400 {
  color: #9ca3af !important;
}

body.dark-mode .text-gray-300 {
  color: #d1d5db !important;
}

/* Bordas */
body.dark-mode .border,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
  border-color: var(--border-color) !important;
}

/* Inputs e Selects */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="file"],
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.7;
}

/* Select options */
body.dark-mode select option {
  background-color: var(--select-bg) !important;
  color: var(--text-primary) !important;
}

/* Hover states */
body.dark-mode input:hover,
body.dark-mode textarea:hover,
body.dark-mode select:hover {
  border-color: #6b7280 !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1) !important;
}

/* Botões secundários */
body.dark-mode .bg-gray-300 {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .bg-gray-300:hover {
  background-color: #4b5563 !important;
}

/* Seção de catálogo com gradiente teal */
body.dark-mode .bg-gradient-to-r.from-teal-50.to-cyan-50 {
  background: linear-gradient(to right, #134e4a, #164e63) !important;
  border-color: #0f766e !important;
}

body.dark-mode .border-teal-200,
body.dark-mode .border-teal-300 {
  border-color: #0f766e !important;
}

body.dark-mode .bg-teal-50 {
  background-color: #134e4a !important;
}

body.dark-mode .text-teal-600,
body.dark-mode .text-teal-700 {
  color: #5eead4 !important;
}

/* Seção de gerenciamento azul */
body.dark-mode .bg-blue-50 {
  background-color: #1e3a5f !important;
}

body.dark-mode .border-blue-200,
body.dark-mode .border-blue-300 {
  border-color: #1e40af !important;
}

/* Área de comentários e anexos */
body.dark-mode .bg-gray-50.border {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}

/* Badges e labels */
body.dark-mode .bg-green-100 {
  background-color: #065f46 !important;
}

body.dark-mode .text-green-800 {
  color: #d1fae5 !important;
}

body.dark-mode .bg-red-100 {
  background-color: #7f1d1d !important;
}

body.dark-mode .text-red-800 {
  color: #fecaca !important;
}

body.dark-mode .bg-yellow-100 {
  background-color: #78350f !important;
}

body.dark-mode .text-yellow-800 {
  color: #fef3c7 !important;
}

body.dark-mode .bg-blue-100 {
  background-color: #1e3a8a !important;
}

body.dark-mode .text-blue-800 {
  color: #bfdbfe !important;
}

body.dark-mode .bg-purple-100 {
  background-color: #581c87 !important;
}

body.dark-mode .text-purple-800 {
  color: #e9d5ff !important;
}

body.dark-mode .bg-orange-100 {
  background-color: #7c2d12 !important;
}

body.dark-mode .text-orange-800 {
  color: #fed7aa !important;
}

/* Tabelas */
body.dark-mode table {
  background-color: var(--card-bg) !important;
}

body.dark-mode th {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.dark-mode tr:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Scrollbar (dark mode) */
body.dark-mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Theme Toggle Button */
.theme-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}

body.dark-mode .theme-toggle {
  background: rgba(0, 0, 0, 0.2);
}

body.dark-mode .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Disabled states */
body.dark-mode select:disabled,
body.dark-mode input:disabled,
body.dark-mode textarea:disabled {
  background-color: #1f2937 !important;
  color: #6b7280 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Alertas e notificações */
body.dark-mode .bg-yellow-50 {
  background-color: #78350f !important;
  border-color: #92400e !important;
}

body.dark-mode .text-yellow-800 {
  color: #fef3c7 !important;
}

/* Shadow adjustments */
body.dark-mode .shadow-md,
body.dark-mode .shadow-lg,
body.dark-mode .shadow-xl {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Dropdown menus */
body.dark-mode .dropdown-menu {
  background-color: var(--modal-bg) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .dropdown-item:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Focus rings em dark mode */
body.dark-mode *:focus {
  outline-color: #6366f1 !important;
}

/* Transições suaves */
body,
body * {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Evitar transição no carregamento */
body.no-transition,
body.no-transition * {
  transition: none !important;
}

/* ========================================
   MODAIS - Correção de tema
   ======================================== */

/* Modal de Change Management e outros modais personalizados */
body.dark-mode .modal-content {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .modal-header {
  background-color: var(--bg-tertiary) !important;
  border-bottom-color: var(--border-color) !important;
}

body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3 {
  color: var(--text-primary) !important;
}

body.dark-mode .modal-body {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

/* Tabs dentro dos modais */
body.dark-mode .catalog-tab {
  color: var(--text-secondary) !important;
  border-bottom-color: transparent !important;
}

body.dark-mode .catalog-tab:hover {
  color: var(--text-primary) !important;
}

body.dark-mode .catalog-tab.active {
  color: #60a5fa !important;
  border-bottom-color: #60a5fa !important;
}

/* Botões dentro dos modais */
body.dark-mode .modal button.close {
  color: var(--text-secondary) !important;
}

body.dark-mode .modal button.close:hover {
  color: var(--text-primary) !important;
}

/* Labels e textos dentro dos modais */
body.dark-mode .modal label {
  color: var(--text-primary) !important;
}

body.dark-mode .modal .text-sm,
body.dark-mode .modal .text-xs {
  color: var(--text-secondary) !important;
}

/* Seções com fundo cinza claro (ex: Priorização e Risco) */
body.dark-mode .modal .bg-gray-50,
body.dark-mode .modal .bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

/* Inputs e textareas dentro dos modais */
body.dark-mode .modal input,
body.dark-mode .modal textarea,
body.dark-mode .modal select {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Dividers */
body.dark-mode .modal .border-t,
body.dark-mode .modal .border-b {
  border-color: var(--border-color) !important;
}

/* Seções informativas (com fundo colorido) */
body.dark-mode .modal .bg-blue-50 {
  background-color: #1e3a8a !important;
}

body.dark-mode .modal .bg-green-50 {
  background-color: #065f46 !important;
}

body.dark-mode .modal .bg-yellow-50 {
  background-color: #78350f !important;
}

/* Texto de help/hint */
body.dark-mode .modal .text-gray-500,
body.dark-mode .modal .text-gray-600 {
  color: var(--text-secondary) !important;
}

/* ========================================
   FIX: Modais específicos
   ======================================== */

/* Modal de Change Management */
body.dark-mode #changeManagementModal .bg-white {
  background-color: var(--modal-bg) !important;
}

body.dark-mode #changeManagementModal .text-gray-700,
body.dark-mode #changeManagementModal .text-gray-800,
body.dark-mode #changeManagementModal .text-gray-900 {
  color: var(--text-primary) !important;
}

/* Modal de Aprovações */
body.dark-mode #approvalsModal .bg-white {
  background-color: var(--modal-bg) !important;
}

/* Modal de Workflows */
body.dark-mode #workflowsManagementModal .bg-white {
  background-color: var(--modal-bg) !important;
}

/* Modal de Catálogo */
body.dark-mode #catalogBrowserModal .bg-white {
  background-color: var(--modal-bg) !important;
}

/* Modal de Tickets */
body.dark-mode #newTicketModal .bg-white,
body.dark-mode #editTicketModal .bg-white,
body.dark-mode #ticketDetailModal .bg-white {
  background-color: var(--modal-bg) !important;
}

/* ========================================
   Correção de badges dentro de modais
   ======================================== */

body.dark-mode .modal .badge {
  border: 1px solid transparent;
}

body.dark-mode .modal .badge-success {
  background-color: #065f46 !important;
  color: #d1fae5 !important;
  border-color: #059669 !important;
}

body.dark-mode .modal .badge-danger {
  background-color: #7f1d1d !important;
  color: #fecaca !important;
  border-color: #dc2626 !important;
}

body.dark-mode .modal .badge-warning {
  background-color: #78350f !important;
  color: #fef3c7 !important;
  border-color: #f59e0b !important;
}

body.dark-mode .modal .badge-info {
  background-color: #1e3a8a !important;
  color: #bfdbfe !important;
  border-color: #3b82f6 !important;
}

body.dark-mode .modal .badge-secondary {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}