/* Estilos customizados complementares para o tema Kommo/Linear */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
html.dark {
    color-scheme: dark;
    --bg-main: #090d16;
    --bg-card: #111827;
    --bg-card-hover: #162035;
    --border-color: #1e293b;
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
}

/* Utilitário para ocultar scrollbar visual mantendo rolagem funcional */
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* ======================================================== */
/* CORREÇÃO DE LEGIBILIDADE NO MODO DARK (SELECTS & TAGS)  */
/* ======================================================== */
select {
    color-scheme: dark;
}

select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

select option:checked,
select option:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

html.light select {
    color-scheme: light;
}

html.light select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-main);
    color: #f1f5f9;
}

/* Transição suave ao alternar temas */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #090d16;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Efeito Drag & Drop */
.kanban-card {
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.kanban-card:active {
    cursor: grabbing;
}
.kanban-card.is-dragging {
    opacity: 0.4;
    transform: scale(0.97);
}

.kanban-column-body {
    transition: background-color 0.2s ease, border-color 0.2s ease;
    min-height: 450px;
}
.kanban-column-body.drag-over {
    background-color: rgba(59, 130, 246, 0.08);
    border-color: #3b82f6 !important;
}

/* Animações da Gaveta (Drawer) */
.drawer-backdrop {
    transition: opacity 0.25s ease-in-out;
}
.drawer-content {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-hidden .drawer-backdrop {
    opacity: 0;
    pointer-events: none;
}
.drawer-hidden .drawer-content {
    transform: translateX(100%);
}

/* Balões de Chat da Timeline */
.timeline-bubble-outbound {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.timeline-bubble-inbound {
    background: #1e293b;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

/* Pulse de status */
@keyframes softPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.badge-pulse {
    animation: softPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ======================================================== */
/* TEMA CLARO (LIGHT MODE) OVERRIDES                        */
/* ======================================================== */
html.light {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

/* Backgrounds principais do app */
html.light body,
html.light #app-layout,
html.light .bg-\[\#090D16\] {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* ======================================================== */
/* TELA DE LOGIN NO MODO CLARO                              */
/* ======================================================== */
html.light #view-login {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 50%, #f5f3ff 100%) !important;
    color: #0f172a !important;
}

/* Remove os glows escuros do fundo do login no claro */
html.light #view-login > div.absolute {
    opacity: 0.4;
}

/* Card central do login */
html.light #view-login > div.relative {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.12), 0 8px 20px -6px rgba(0, 0, 0, 0.06) !important;
}

/* Subtítulo e labels dentro do login */
html.light #login-header-subtitle,
html.light #view-login label,
html.light #view-login .text-slate-300,
html.light #view-login .text-slate-400 {
    color: #64748b !important;
}

/* Inputs do login */
html.light #view-login input {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html.light #view-login input:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}
html.light #view-login input::placeholder {
    color: #94a3b8 !important;
}

/* Botão "Esqueceu a senha?" */
html.light #btn-goto-forgot {
    color: #2563eb !important;
}
html.light #btn-goto-forgot:hover {
    color: #1d4ed8 !important;
}

/* Toggle de olho na senha */
html.light #btn-toggle-login-password svg,
html.light #btn-toggle-reset-password svg {
    color: #94a3b8 !important;
}
html.light #btn-toggle-login-password:hover svg,
html.light #btn-toggle-reset-password:hover svg {
    color: #64748b !important;
}

/* Botão do tema no canto do login */
html.light #btn-theme-toggle-login {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
html.light #btn-theme-toggle-login:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Seção "Voltar ao login" na recuperação */
html.light #btn-back-to-login {
    color: #64748b !important;
}
html.light #btn-back-to-login:hover {
    color: #334155 !important;
}

/* Borda separadora na recuperação */
html.light #container-forgot-password > div:first-child {
    border-color: #e2e8f0 !important;
}

/* Textos de ajuda no forgot-password */
html.light #view-login p.text-slate-400 {
    color: #64748b !important;
}

/* Box de código simulado */
html.light #forgot-simulated-code-box {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}
html.light #forgot-simulated-code-box span {
    color: #1e40af !important;
}
html.light #forgot-generated-code-display {
    background-color: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e3a8a !important;
}

/* Superfícies e Cards Gerais (Exclui estritamente backdrops de modais e drawers) */
html.light [class*="bg-slate-950"]:not([id*="backdrop"]):not([class*="backdrop"]):not(.fixed.inset-0):not(#view-login *) {
    background-color: #ffffff !important;
}

html.light [class*="bg-slate-900"]:not([id*="backdrop"]):not([class*="backdrop"]):not(.fixed.inset-0):not(#view-login *) {
    background-color: #f8fafc !important;
}

html.light [class*="bg-slate-800"]:not([id*="backdrop"]):not([class*="backdrop"]):not(.fixed.inset-0) {
    background-color: #f1f5f9 !important;
}

/* ======================================================== */
/* BACKDROPS GLOBAIS DE TODOS OS MODAIS E POPUPS DO SISTEMA */
/* O fundo atrás dos popups DEVE ser escuro e translúcido,  */
/* mantendo o CRM visível ao fundo sem nenhuma tela branca  */
/* ======================================================== */
[id*="backdrop"],
.drawer-backdrop,
[id^="modal-"] > div.fixed.inset-0:first-child,
div[onclick*="close"][class*="fixed inset-0"],
div[onclick*="Modal"][class*="fixed inset-0"] {
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

html.light [id*="backdrop"],
html.light .drawer-backdrop,
html.light [id^="modal-"] > div.fixed.inset-0:first-child,
html.light div[onclick*="close"][class*="fixed inset-0"],
html.light div[onclick*="Modal"][class*="fixed inset-0"] {
    background-color: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

html.light [class*="border-slate-800"],
html.light [class*="border-slate-700"] {
    border-color: #e2e8f0 !important;
}

html.light aside#sidebar-nav,
html.light header#top-bar,
html.light #profile-dropdown,
html.light .modal-content,
html.light [id^="modal-"] > div.relative,
html.light .drawer-content,
html.light #quick-replies-popover {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Tipografia */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
    color: #0f172a !important;
}

html.light .text-white:not(button *):not(button):not(.btn *):not(.btn):not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-amber"]):not([class*="bg-indigo"]):not([class*="badge"]) {
    color: #0f172a !important;
}

html.light .text-slate-100,
html.light .text-slate-200 {
    color: #1e293b !important;
}

html.light .text-slate-300 {
    color: #334155 !important;
}

html.light .text-slate-400 {
    color: #64748b !important;
}

html.light .text-slate-500 {
    color: #64748b !important;
}

/* Inputs, Selects e Textareas */
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 1px #3b82f6 !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
    color: #94a3b8 !important;
}

/* ======================================================== */
/* KANBAN EM MODO CLARO                                     */
/* ======================================================== */
html.light .kanban-column {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

html.light .kanban-column > div:first-child {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light .kanban-column h2 {
    color: #0f172a !important;
}

html.light .kanban-column span.bg-slate-900 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

html.light .kanban-column-body {
    background-color: #f8fafc !important;
}

html.light .kanban-column-body .border-dashed {
    border-color: #cbd5e1 !important;
    color: #64748b !important;
    background-color: #ffffff !important;
}

html.light .kanban-card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
}

html.light .kanban-card:hover {
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.08), 0 3px 6px -3px rgba(0, 0, 0, 0.05) !important;
    border-color: #cbd5e1 !important;
}

html.light .kanban-column-body.drag-over {
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-color: #3b82f6 !important;
}

/* ======================================================== */
/* DASHBOARD DE MÉTRICAS EM MODO CLARO                      */
/* ======================================================== */
html.light #view-metrics [class*="bg-slate-900"],
html.light #view-metrics [class*="bg-slate-950"],
html.light #view-metrics .rounded-2xl {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

html.light #metric-total-leads {
    color: #0f172a !important;
}

html.light #view-metrics h2,
html.light #view-metrics h3,
html.light #view-metrics span.text-white {
    color: #0f172a !important;
}

html.light #view-metrics span.text-slate-400,
html.light #view-metrics span.text-slate-500 {
    color: #64748b !important;
}

html.light #view-metrics .w-full.h-2\.5 {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

html.light #metrics-period-filters {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html.light .metric-filter-btn:not(.bg-blue-600):not(.bg-cyan-500\/20) {
    color: #64748b !important;
}
html.light .metric-filter-btn:not(.bg-blue-600):not(.bg-cyan-500\/20):hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}

html.light #metric-provider-cards > div {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* ======================================================== */
/* ÁREA DEDICADA DE CONVERSAS (WHATSAPP INBOX)              */
/* ======================================================== */
html.light #view-conversations {
    background-color: #f8fafc !important;
}

html.light #view-conversations aside {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #view-conversations aside > div:first-child {
    border-color: #f1f5f9 !important;
}

html.light #view-conversations section {
    background-color: #f8fafc !important;
}

html.light #view-conversations .conv-contact-item {
    border-color: #f1f5f9 !important;
    background-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
html.light #view-conversations .conv-contact-item:hover {
    background-color: #f8fafc !important;
}
html.light #view-conversations .conv-contact-item.active {
    background-color: #ecfdf5 !important;
    border-left: 4px solid #059669 !important;
}

html.light #view-conversations .conv-contact-item h4 {
    color: #0f172a !important;
}

html.light #view-conversations .conv-contact-item span.text-slate-500 {
    color: #64748b !important;
}

html.light #view-conversations #conv-active-chat > div:first-child,
html.light #view-conversations #conv-active-chat > div:last-child {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #view-conversations #conv-messages-container {
    background-color: #f8fafc !important;
}

/* Tabela de Clientes 360 */
html.light table tbody tr {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html.light table tbody tr:hover {
    background-color: #f8fafc !important;
}
html.light table thead {
    background-color: #f1f5f9 !important;
}

/* Hovers de menu e botões secundários */
html.light .hover\:bg-slate-900:hover,
html.light .hover\:bg-slate-900\/50:hover,
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-800\/80:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Scrollbars no tema claro */
html.light ::-webkit-scrollbar-track {
    background: #f8fafc;
}
html.light ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
html.light ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Balões da Timeline de Conversas */
html.light .timeline-bubble-inbound {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
html.light .timeline-bubble-inbound,
html.light .timeline-bubble-inbound *,
html.light .timeline-bubble-inbound div,
html.light .timeline-bubble-inbound p,
html.light .timeline-bubble-inbound span,
html.light .timeline-bubble-inbound a {
    color: #0f172a !important;
}

html.light .timeline-bubble-outbound {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
    box-shadow: 0 1px 3px 0 rgba(37, 99, 235, 0.2) !important;
}
html.light .timeline-bubble-outbound,
html.light .timeline-bubble-outbound *,
html.light .timeline-bubble-outbound div,
html.light .timeline-bubble-outbound p,
html.light .timeline-bubble-outbound span,
html.light .timeline-bubble-outbound a {
    color: #ffffff !important;
}

/* Header do Chat no Modo Claro */
html.light #view-conversations #conv-active-chat > div:first-child {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Seletor de Etapa no Header do Chat */
html.light #view-conversations div:has(> #conv-select-stage) {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
html.light #conv-select-stage {
    color: #0f172a !important;
    font-weight: 600 !important;
}
html.light #conv-select-stage option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ======================================================== */
/* BOTÕES DE AÇÃO DO HEADER DE CONVERSAS (MODO CLARO & ESCURO) */
/* ======================================================== */
html.light #btn-conv-open-360 {
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
html.light #btn-conv-open-360:hover {
    background-color: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}
html.light #btn-conv-open-360 svg {
    color: #2563eb !important;
}

/* Botão Cobrança PIX */
#btn-conv-pix-charge {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
#btn-conv-pix-charge:hover {
    background-color: rgba(16, 185, 129, 0.22) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    color: #6ee7b7 !important;
}
html.light #btn-conv-pix-charge {
    background-color: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #047857 !important;
}
html.light #btn-conv-pix-charge:hover {
    background-color: #d1fae5 !important;
    border-color: #6ee7b7 !important;
    color: #065f46 !important;
}

/* Botão Transferir Atendimento */
#btn-conv-transfer-lead {
    background-color: rgba(99, 102, 241, 0.12) !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    color: #818cf8 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
#btn-conv-transfer-lead:hover {
    background-color: rgba(99, 102, 241, 0.22) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
    color: #a5b4fc !important;
}
#btn-conv-transfer-lead svg {
    color: #818cf8 !important;
}
html.light #btn-conv-transfer-lead {
    background-color: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    color: #4338ca !important;
}
html.light #btn-conv-transfer-lead:hover {
    background-color: #e0e7ff !important;
    border-color: #a5b4fc !important;
    color: #3730a3 !important;
}
html.light #btn-conv-transfer-lead svg {
    color: #4f46e5 !important;
}

/* Botão Disparar Fluxo Visual */
#btn-conv-trigger-flow {
    background-color: rgba(6, 182, 212, 0.12) !important;
    border: 1px solid rgba(6, 182, 212, 0.35) !important;
    color: #22d3ee !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
#btn-conv-trigger-flow:hover {
    background-color: rgba(6, 182, 212, 0.22) !important;
    border-color: rgba(6, 182, 212, 0.6) !important;
    color: #67e8f9 !important;
}
#btn-conv-trigger-flow svg {
    color: #22d3ee !important;
}
html.light #btn-conv-trigger-flow {
    background-color: #ecfeff !important;
    border: 1px solid #a5f3fc !important;
    color: #0e7490 !important;
}
html.light #btn-conv-trigger-flow:hover {
    background-color: #cffafe !important;
    border-color: #67e8f9 !important;
    color: #155e75 !important;
}
html.light #btn-conv-trigger-flow svg {
    color: #0891b2 !important;
}

/* Botão Simular Resposta no Header do Chat */
#btn-conv-simulate-reply {
    background-color: rgba(168, 85, 247, 0.12) !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    color: #c084fc !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
#btn-conv-simulate-reply:hover {
    background-color: rgba(168, 85, 247, 0.22) !important;
    border-color: rgba(168, 85, 247, 0.6) !important;
    color: #d8b4fe !important;
}
#btn-conv-simulate-reply svg {
    color: #c084fc !important;
}
html.light #btn-conv-simulate-reply {
    background-color: #faf5ff !important;
    border: 1px solid #e9d5ff !important;
    color: #7e22ce !important;
}
html.light #btn-conv-simulate-reply:hover {
    background-color: #f3e8ff !important;
    border-color: #d8b4fe !important;
    color: #6b21a8 !important;
}
html.light #btn-conv-simulate-reply svg {
    color: #9333ea !important;
}

/* Botão Ligar no Header de Conversa */
#btn-conv-call {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
}
#btn-conv-call:hover {
    background-color: rgba(16, 185, 129, 0.22) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    color: #6ee7b7 !important;
}
html.light #btn-conv-call {
    background-color: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #047857 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
html.light #btn-conv-call:hover {
    background-color: #d1fae5 !important;
    border-color: #6ee7b7 !important;
    color: #065f46 !important;
}
html.light #btn-conv-call svg {
    color: #059669 !important;
}

/* Botão Mais Opções e Dropdown no Header */
html.light #btn-conv-more-actions {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
html.light #btn-conv-more-actions:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
html.light #btn-conv-more-actions svg {
    color: #64748b !important;
}
html.light #conv-more-actions-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}
html.light #conv-more-actions-dropdown > div:first-child {
    color: #64748b !important;
    border-color: #f1f5f9 !important;
}
html.light #conv-more-actions-dropdown button {
    color: #1e293b !important;
}
html.light #conv-more-actions-dropdown button:hover {
    background-color: #f8fafc !important;
}
html.light #conv-more-actions-dropdown button .text-slate-400 {
    color: #64748b !important;
}

/* Barra de Controles e Tags do Atendimento */
html.light #conv-controls-bar {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html.light #conv-controls-bar span.text-slate-400 {
    color: #64748b !important;
}
html.light #btn-conv-add-tag {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
html.light #btn-conv-add-tag:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
html.light #conv-tag-dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}
html.light #conv-tag-dropdown-menu button {
    color: #1e293b !important;
}
html.light #conv-tag-dropdown-menu button:hover {
    background-color: #f8fafc !important;
}

/* ======================================================== */
/* PADRONIZAÇÃO DOS BOTÕES DO COMPOSER DE CONVERSA          */
/* ======================================================== */
#btn-conv-attach,
#btn-conv-quick-replies,
#btn-conv-ai-suggest,
#btn-conv-mic {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

#btn-conv-attach svg,
#btn-conv-ai-suggest svg,
#btn-conv-mic svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

#btn-conv-quick-replies span {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Modo Escuro */
html.dark #btn-conv-attach,
html.dark #btn-conv-quick-replies,
html.dark #btn-conv-ai-suggest,
html.dark #btn-conv-mic {
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
}
html.dark #btn-conv-attach:hover {
    background-color: #1e293b !important;
}
html.dark #btn-conv-quick-replies:hover {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}
html.dark #btn-conv-ai-suggest:hover {
    background-color: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}
html.dark #btn-conv-mic:hover {
    background-color: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
}

/* Modo Claro - Padronização Visual Limpa */
html.light #btn-conv-attach,
html.light #btn-conv-quick-replies,
html.light #btn-conv-ai-suggest,
html.light #btn-conv-mic {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

html.light #btn-conv-attach:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}
html.light #btn-conv-attach svg {
    color: #475569 !important;
}

html.light #btn-conv-quick-replies:hover {
    background-color: #fffbeb !important;
    border-color: #fcd34d !important;
}
html.light #btn-conv-quick-replies span {
    color: #d97706 !important;
}

html.light #btn-conv-ai-suggest:hover {
    background-color: #eef2ff !important;
    border-color: #a5b4fc !important;
}
html.light #btn-conv-ai-suggest svg {
    color: #4f46e5 !important;
}

html.light #btn-conv-mic:hover {
    background-color: #fff1f2 !important;
    border-color: #fecdd3 !important;
}
html.light #btn-conv-mic svg {
    color: #e11d48 !important;
}

#btn-conv-send-submit {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
}

#conv-message-input {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
}

/* Altura uniforme nos botões do header do atendimento */
#btn-conv-call,
#btn-conv-transfer-lead,
#btn-conv-more-actions {
    height: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
}
#view-conversations div:has(> #conv-select-stage) {
    height: 32px !important;
    box-sizing: border-box !important;
}
html.light #conv-recording-bar {
    background-color: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}
html.light #conv-recording-bar .text-rose-300 {
    color: #9f1239 !important;
}
html.light #conv-recording-timer {
    background-color: #ffe4e6 !important;
    color: #9f1239 !important;
}
html.light #conv-ai-popover {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}
html.light #conv-ai-popover > div:first-child {
    border-color: #e2e8f0 !important;
    color: #4338ca !important;
}

/* Modal de Confirmação Moderno */
html.light #modal-confirm-dialog .bg-slate-900 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}
html.light #confirm-dialog-title {
    color: #0f172a !important;
}
html.light #confirm-dialog-message {
    color: #475569 !important;
}
html.light #btn-confirm-dialog-cancel {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}
html.light #btn-confirm-dialog-cancel:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Tipografia e controles de Conversas no tema claro */
html.light #view-conversations #conv-header-name,
html.light #view-conversations h2,
html.light #view-conversations h3 {
    color: #0f172a !important;
}

html.light #view-conversations #conv-header-phone,
html.light #view-conversations #conv-header-service,
html.light #view-conversations #conv-total-count {
    color: #64748b !important;
}

html.light #conv-search-input {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
html.light #conv-search-input::placeholder {
    color: #94a3b8 !important;
}
html.light #conv-search-input:focus {
    background-color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

html.light #conv-message-input {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html.light #conv-message-input::placeholder {
    color: #94a3b8 !important;
}
html.light #conv-message-input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

html.light #conv-quick-replies-popover {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

html.light #conv-quick-replies-popover-list button {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #conv-quick-replies-popover-list button:hover {
    background-color: #fef3c7 !important;
    border-color: #fcd34d !important;
}

html.light #conv-quick-replies-popover-list button .text-slate-200 {
    color: #0f172a !important;
}

html.light #conv-quick-replies-popover-list button .text-slate-400 {
    color: #64748b !important;
}

html.light #conv-media-preview-container {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light #conv-media-preview-name {
    color: #0f172a !important;
}

html.light #conv-empty-state h3 {
    color: #0f172a !important;
}

html.light #conv-empty-state p {
    color: #64748b !important;
}

html.light #view-metrics #metric-conversion-rate,
html.light #view-metrics #metric-whatsapp-success-rate,
html.light #view-metrics #metric-tmr,
html.light #view-metrics #metric-inbound-count,
html.light #view-metrics #metric-outbound-count {
    color: #0f172a !important;
}

/* ======================================================== */
/* MODAL FICHA 360° DO CLIENTE NO TEMA CLARO                */
/* ======================================================== */
html.light #modal-customer-360 .bg-slate-950,
html.light #modal-customer-360 .bg-slate-950\/70,
html.light #modal-customer-360 .bg-slate-950\/80 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #modal-customer-360 .bg-slate-900\/60,
html.light #modal-customer-360 .bg-slate-900\/50,
html.light #modal-customer-360 .bg-slate-900 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #modal-customer-360 h3,
html.light #modal-customer-360 h4,
html.light #modal-customer-360 #c360-name {
    color: #0f172a !important;
}

html.light #modal-customer-360 #c360-stat-appointments,
html.light #modal-customer-360 #c360-stat-messages,
html.light #modal-customer-360 #c360-stat-first-contact,
html.light #modal-customer-360 #c360-stat-next-appointment,
html.light #modal-customer-360 #c360-detail-service,
html.light #modal-customer-360 #c360-detail-agent {
    color: #0f172a !important;
}

html.light #modal-customer-360 #c360-detail-notes {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

html.light #modal-customer-360 span.text-slate-400 {
    color: #64748b !important;
}

html.light #modal-customer-360 span.text-slate-300 {
    color: #334155 !important;
}

html.light #modal-customer-360 .border-slate-800,
html.light #modal-customer-360 .border-slate-800\/80,
html.light #modal-customer-360 .border-slate-800\/60,
html.light #modal-customer-360 .border-slate-800\/40 {
    border-color: #e2e8f0 !important;
}

/* ======================================================== */
/* MODAL PIX QR CODE & ETIQUETAS NO TEMA CLARO              */
/* ======================================================== */
html.light #modal-pix-qrcode .bg-slate-950 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #modal-pix-qrcode .bg-slate-900\/40,
html.light #modal-pix-qrcode .bg-slate-900 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #modal-pix-qrcode h3 {
    color: #0f172a !important;
}

html.light #modal-pix-qrcode #pix-modal-payload {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html.light #drawer-tags-section,
html.light #drawer-tags-section .bg-slate-900\/60 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* ======================================================== */
/* CONSTRUTOR VISUAL DE FLUXOS (CANVAS, DRAG & DROP)       */
/* ======================================================== */
#vb-canvas-container {
    user-select: none;
    -webkit-user-select: none;
}

#vb-canvas-container.cursor-grab {
    cursor: grab !important;
}

#vb-canvas-container.cursor-grabbing,
#vb-canvas-container.cursor-grabbing * {
    cursor: grabbing !important;
}

#vb-viewport {
    will-change: transform;
}

/* Nós e handles continuam interativos com layer pointer-events: none */
#vb-nodes-layer .pointer-events-auto {
    pointer-events: auto !important;
}

#vb-svg-layer path {
    pointer-events: stroke;
}

html.light #vb-grid-background {
    opacity: 0.35 !important;
}

html.light .vb-handle-target {
    border-color: #ffffff !important;
    background-color: #64748b !important;
}

html.light .vb-handle-target:hover {
    background-color: #4f46e5 !important;
}

/* ======================================================== */
/* SIDEBAR E NAVEGAÇÃO NO MODO CLARO                        */
/* ======================================================== */
html.light #sidebar-nav {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #sidebar-nav > div:first-child {
    border-color: #e2e8f0 !important;
}

/* Seções de separador "Visualizações", "Ferramentas" */
html.light #sidebar-nav nav .text-slate-500 {
    color: #94a3b8 !important;
}

/* Botões de navegação — estado normal */
html.light #sidebar-nav nav button {
    color: #475569 !important;
}
html.light #sidebar-nav nav button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

/* Estado ativo */
html.light #sidebar-nav nav button.active,
html.light #sidebar-nav nav button[class*="bg-blue"],
html.light #sidebar-nav nav button[class*="text-blue"] {
    color: #1d4ed8 !important;
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}

/* Badge "CRM" no topo da sidebar */
html.light #sidebar-nav span.bg-blue-500\/10 {
    background-color: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}

/* Divisores da sidebar */
html.light #sidebar-nav .border-b,
html.light #sidebar-nav [class*="border-slate-800"] {
    border-color: #f1f5f9 !important;
}

/* Rodapé da sidebar (perfil do usuário) */
html.light #sidebar-nav > div:last-child {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #sidebar-user-name {
    color: #0f172a !important;
}
html.light #sidebar-user-role,
html.light #sidebar-user-email {
    color: #64748b !important;
}

/* ======================================================== */
/* TOPBAR / HEADER PRINCIPAL NO MODO CLARO                  */
/* ======================================================== */
html.light #top-bar {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #top-bar h1,
html.light #top-bar h2 {
    color: #0f172a !important;
}

html.light #top-bar .text-slate-400 {
    color: #94a3b8 !important;
}

html.light #btn-theme-toggle,
html.light #btn-notifications {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}
html.light #btn-theme-toggle:hover,
html.light #btn-notifications:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ======================================================== */
/* MODO ESCURO — SCROLLBAR REFINADA                         */
/* ======================================================== */
html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #1e293b;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* ======================================================== */
/* BADGES E NOTIFICAÇÕES EM MODO CLARO                      */
/* ======================================================== */
html.light .bg-rose-500\/10 { background-color: #fef2f2 !important; }
html.light .bg-emerald-500\/10 { background-color: #ecfdf5 !important; }
html.light .bg-amber-500\/10 { background-color: #fffbeb !important; }
html.light .bg-blue-500\/10 { background-color: #eff6ff !important; }

/* ======================================================== */
/* VIEWS PRINCIPAIS (FORMULÁRIOS, AUTOMAÇÕES, ETC.)         */
/* ======================================================== */
html.light #view-forms h2,
html.light #view-automations h2,
html.light #view-settings h2,
html.light #view-campaigns h2,
html.light #view-chatbot h2,
html.light #view-team h2 { color: #0f172a !important; }

html.light #view-forms p,
html.light #view-automations p,
html.light #view-settings p,
html.light #view-campaigns p { color: #64748b !important; }

html.light #view-forms [class*="bg-slate-900"],
html.light #view-automations [class*="bg-slate-900"],
html.light #view-settings [class*="bg-slate-900"],
html.light #view-campaigns [class*="bg-slate-900"],
html.light #view-chatbot [class*="bg-slate-900"],
html.light #view-team [class*="bg-slate-900"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #view-forms .text-slate-100,
html.light #view-automations .text-slate-100,
html.light #view-settings .text-slate-100,
html.light #view-campaigns .text-slate-100,
html.light #view-chatbot .text-slate-100,
html.light #view-team .text-slate-100 { color: #0f172a !important; }

html.light #view-forms .text-slate-400,
html.light #view-automations .text-slate-400,
html.light #view-settings .text-slate-400,
html.light #view-campaigns .text-slate-400 { color: #64748b !important; }