/* ==========================================================================
   MODO ESCURO GLOBAL — carregado SOMENTE com a flag UI_MODO_ESCURO_GLOBAL.
   Tudo aqui vale apenas com a classe .dark no <html> (preferência do sistema ou
   botão da barra lateral). Só mexe em cor: nenhuma regra de posição, altura,
   padding, fonte ou safe-area, para não interferir nos ajustes de iPhone de
   base.html (ver RESPONSIVIDADE_IPHONE.md). Complementa, sem substituir, as
   regras .dark que o chat já tem em base.html.
   Paleta: página #111827 · cartão #1f2937 · elevado #374151 · borda #374151.
   ========================================================================== */

html.dark { color-scheme: dark; }

/* Variáveis do CRM (crm_cards.css) */
html.dark {
    --bg-surface: #1f2937;
    --bg-page: #111827;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --border: #374151;
}

.dark body { background-color: #111827; color: #e5e7eb; }
.dark body.bg-app,
.dark body.bg-bg { background-color: #111827; }
.dark main { background-color: #111827; }

/* ---------- Superfícies ---------- */
.dark .bg-white { background-color: #1f2937; }
.dark .bg-gray-50,
.dark .bg-gray-50\/50 { background-color: #172033; }
.dark .bg-gray-100,
.dark .bg-gray-100\/50 { background-color: #273244; }
.dark .bg-gray-200 { background-color: #374151; }
.dark .bg-slate-50 { background-color: #172033; }
.dark .bg-slate-100 { background-color: #273244; }
.dark .glass-effect { background: rgba(31, 41, 55, 0.9); }

.dark .hover\:bg-gray-50:hover { background-color: #273244; }
.dark .hover\:bg-gray-100:hover { background-color: #2f3b4f; }
.dark .hover\:bg-gray-200:hover { background-color: #3b475a; }
.dark .hover\:bg-white:hover { background-color: #273244; }

/* Degradês claros */
.dark .from-white { --tw-gradient-from: #1f2937 var(--tw-gradient-from-position); --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .from-gray-50 { --tw-gradient-from: #172033 var(--tw-gradient-from-position); --tw-gradient-to: rgb(23 32 51 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .to-white { --tw-gradient-to: #1f2937 var(--tw-gradient-to-position); }
.dark .to-gray-50 { --tw-gradient-to: #172033 var(--tw-gradient-to-position); }

/* ---------- Textos ---------- */
.dark .text-gray-900 { color: #f9fafb; }
.dark .text-gray-800 { color: #f3f4f6; }
.dark .text-gray-700 { color: #e5e7eb; }
.dark .text-gray-600 { color: #d1d5db; }
.dark .text-gray-500 { color: #9ca3af; }
.dark .text-gray-400 { color: #9ca3af; }
.dark .text-slate-800 { color: #f3f4f6; }
.dark .text-slate-700 { color: #e5e7eb; }
.dark .text-slate-600 { color: #d1d5db; }
.dark .text-slate-500 { color: #9ca3af; }

.dark .hover\:text-gray-800:hover,
.dark .hover\:text-gray-700:hover,
.dark .hover\:text-gray-600:hover { color: #f3f4f6; }

.dark .placeholder-gray-400::placeholder,
.dark .placeholder-gray-500::placeholder { color: #9ca3af; }

/* ---------- Bordas e divisores ---------- */
.dark .border-gray-50,
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-slate-100,
.dark .border-slate-200 { border-color: #374151; }
.dark .border-gray-300 { border-color: #4b5563; }
.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }
.dark .ring-gray-50,
.dark .ring-gray-100 { --tw-ring-color: #374151; }

/* ---------- Matizes claras de status (fundos -50/-100, textos -600..-900, bordas -100/-200) ---------- */
.dark .bg-blue-50, .dark .bg-blue-100 { background-color: rgba(30, 64, 175, 0.28); }
.dark .bg-indigo-50, .dark .bg-indigo-100 { background-color: rgba(49, 46, 129, 0.35); }
.dark .bg-purple-50, .dark .bg-purple-100 { background-color: rgba(88, 28, 135, 0.35); }
.dark .bg-red-50, .dark .bg-red-100 { background-color: rgba(127, 29, 29, 0.35); }
.dark .bg-orange-50, .dark .bg-orange-100 { background-color: rgba(154, 52, 18, 0.35); }
.dark .bg-yellow-50, .dark .bg-yellow-100 { background-color: rgba(113, 63, 18, 0.35); }
.dark .bg-amber-50, .dark .bg-amber-100 { background-color: rgba(120, 53, 15, 0.35); }
.dark .bg-green-50, .dark .bg-green-100 { background-color: rgba(22, 101, 52, 0.35); }
.dark .bg-emerald-50, .dark .bg-emerald-100 { background-color: rgba(6, 95, 70, 0.35); }
.dark .bg-teal-50, .dark .bg-teal-100 { background-color: rgba(17, 94, 89, 0.35); }
.dark .bg-sky-50, .dark .bg-sky-100 { background-color: rgba(12, 74, 110, 0.35); }
.dark .bg-pink-50, .dark .bg-pink-100 { background-color: rgba(131, 24, 67, 0.35); }

.dark .hover\:bg-blue-50:hover { background-color: rgba(30, 64, 175, 0.35); }
.dark .hover\:bg-red-50:hover,
.dark .hover\:bg-red-100:hover { background-color: rgba(127, 29, 29, 0.45); }
.dark .hover\:bg-purple-50:hover { background-color: rgba(88, 28, 135, 0.45); }
.dark .hover\:bg-orange-50:hover { background-color: rgba(154, 52, 18, 0.45); }
.dark .hover\:bg-green-50:hover { background-color: rgba(22, 101, 52, 0.45); }
.dark .hover\:bg-indigo-50:hover { background-color: rgba(49, 46, 129, 0.45); }

.dark .text-blue-600, .dark .text-blue-700, .dark .text-blue-800 { color: #93c5fd; }
.dark .text-indigo-600, .dark .text-indigo-700 { color: #a5b4fc; }
.dark .text-purple-600, .dark .text-purple-700 { color: #d8b4fe; }
.dark .text-red-600, .dark .text-red-700, .dark .text-red-800 { color: #fca5a5; }
.dark .text-orange-600, .dark .text-orange-700 { color: #fdba74; }
.dark .text-yellow-600, .dark .text-yellow-700, .dark .text-yellow-800, .dark .text-yellow-900 { color: #fde68a; }
.dark .text-amber-600, .dark .text-amber-700 { color: #fcd34d; }
.dark .text-green-600, .dark .text-green-700, .dark .text-green-800 { color: #86efac; }
.dark .text-emerald-600, .dark .text-emerald-700 { color: #6ee7b7; }
.dark .text-teal-600, .dark .text-teal-700 { color: #5eead4; }
.dark .hover\:text-blue-600:hover { color: #93c5fd; }
.dark .hover\:text-indigo-600:hover { color: #a5b4fc; }

.dark .border-blue-100, .dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.35); }
.dark .border-red-100, .dark .border-red-200 { border-color: rgba(239, 68, 68, 0.35); }
.dark .border-green-100, .dark .border-green-200 { border-color: rgba(34, 197, 94, 0.35); }
.dark .border-yellow-100, .dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.35); }
.dark .border-purple-100, .dark .border-purple-200 { border-color: rgba(168, 85, 247, 0.35); }
.dark .border-orange-100, .dark .border-orange-200 { border-color: rgba(249, 115, 22, 0.35); }
.dark .border-indigo-100, .dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.35); }

/* ---------- Formulários ---------- */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.bg-transparent),
.dark select:not(.bg-transparent),
.dark textarea:not(.bg-transparent) {
    background-color: #111827;
    color: #f3f4f6;
    border-color: #4b5563;
}
.dark input::placeholder,
.dark textarea::placeholder { color: #9ca3af; opacity: 1; }
.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled { background-color: #1f2937; color: #6b7280; }
.dark option { background-color: #1f2937; color: #f3f4f6; }
.dark input.bg-transparent,
.dark textarea.bg-transparent { color: #f3f4f6; }

/* Tom Select (tema bootstrap5) */
.dark .ts-control,
.dark .ts-wrapper.single .ts-control,
.dark .ts-wrapper.multi .ts-control {
    background-color: #111827 !important; /* base.html fixa .ts-control em #f9fafb com !important */
    border-color: #4b5563 !important;
    color: #f3f4f6;
}
.dark .ts-control input { color: #f3f4f6; }
.dark .ts-wrapper.multi .ts-control > div { background-color: #374151; color: #f3f4f6; border-color: #4b5563; }
.dark .ts-dropdown,
.dark .ts-dropdown.form-control,
.dark .ts-dropdown .optgroup-header {
    background-color: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}
.dark .ts-dropdown .option { color: #e5e7eb; }
.dark .ts-dropdown .active,
.dark .ts-dropdown .option:hover { background-color: #374151; color: #ffffff; }
.dark .ts-dropdown .no-results,
.dark .ts-dropdown .create { color: #9ca3af; }

/* ---------- Tabelas, listas, modais ---------- */
.dark table { color: #e5e7eb; }
.dark thead { background-color: #172033; }
.dark tbody tr:hover { background-color: #273244; }
.dark hr { border-color: #374151; }
.dark ::selection { background-color: rgba(99, 102, 241, 0.4); }
.dark code,
.dark pre { background-color: #111827; color: #e5e7eb; }

/* ---------- Gráficos (ApexCharts) ---------- */
.dark .apexcharts-text,
.dark .apexcharts-legend-text,
.dark .apexcharts-xaxis-label,
.dark .apexcharts-yaxis-label,
.dark .apexcharts-datalabel-label,
.dark .apexcharts-title-text { fill: #d1d5db !important; color: #d1d5db !important; }
.dark .apexcharts-gridline,
.dark .apexcharts-xaxis-tick,
.dark .apexcharts-xaxis line,
.dark .apexcharts-yaxis line { stroke: #374151 !important; }
.dark .apexcharts-tooltip,
.dark .apexcharts-xaxistooltip,
.dark .apexcharts-yaxistooltip {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
    box-shadow: none !important;
}
.dark .apexcharts-tooltip-title { background: #111827 !important; border-bottom-color: #374151 !important; }
.dark .apexcharts-menu { background: #1f2937 !important; border-color: #374151 !important; color: #f3f4f6 !important; }
.dark .apexcharts-menu-item:hover { background: #374151 !important; }

/* ---------- CRM (crm_cards.css: cores fixas) ---------- */
.dark .card-footer,
.dark .crm-table th { background: #172033; }
.dark .crm-table tr:hover { background-color: #273244; }
.dark .list-wrapper,
.dark .btn-icon { background: #1f2937; }
.dark .btn-icon:hover { background: rgba(30, 64, 175, 0.4); }
.dark .btn-icon.delete:hover { background: rgba(127, 29, 29, 0.45); }
.dark .loader-overlay { background-color: rgba(17, 24, 39, 0.8); }

/* ---------- Estilos inline (cards e listas do CRM/configurações; só dá para vencer com !important) ---------- */
.dark [style*="background: white"] { background: #1f2937 !important; }
.dark [style*="border: 1px solid #e5e7eb"] { border-color: #374151 !important; }
.dark [style*="background: #f9fafb"],
.dark [style*="background: #f3f4f6"] { background: #273244 !important; }
.dark [style*="color: #374151"] { color: #e5e7eb !important; }
.dark [style*="color: #111827"] { color: #f9fafb !important; }
.dark [style*="color: #6b7280"] { color: #9ca3af !important; }
.dark [style*="background: #e0e7ff"] { background: rgba(49, 46, 129, 0.55) !important; color: #c7d2fe !important; }
.dark [style*="background: #dcfce7"] { background: rgba(22, 101, 52, 0.45) !important; }
.dark [style*="background: #fef2f2"] { background: rgba(127, 29, 29, 0.45) !important; }
.dark [style*="background: #eff6ff"] { background: rgba(30, 64, 175, 0.4) !important; }

/* Editor de prompt da fila (modal_fila.html fixa o fundo por id) */
.dark #id_prompt_especialista { background-color: #111827; color: #f3f4f6; border-color: #4b5563; }