/*
 * Modo escuro — tema compartilhado por todas as páginas do sistema.
 * Ativado via a classe "dark-mode" no elemento <html> (ver js/theme.js).
 * Usa !important em quase tudo de propósito: cada página tem seu próprio
 * <style> inline com especificidade variada (algumas já usam !important
 * pra tudo, como o sidebar), então é a única forma confiável de garantir
 * que este arquivo sempre vença, independente da ordem de carregamento.
 */

html.dark-mode {
  --dm-bg: #111b21;
  --dm-bg-alt: #0b141a;
  --dm-surface: #202c33;
  --dm-surface-2: #2a3942;
  --dm-surface-3: #182229;
  --dm-border: #2f3b43;
  --dm-text: #e9edef;
  --dm-text-muted: #8696a0;
  --dm-link: #53bdeb;
  --dm-green: #25d366;
  --dm-green-dark: #128c7e;
  --dm-bubble-sent: #005c4b;
  --dm-bubble-received: #202c33;
  color-scheme: dark;
}

/* ===== Base ===== */
html.dark-mode body {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* NÃO inclui span/div aqui de propósito — muita coisa no sistema usa
   <span>/<div> como badge/chip com cor de texto própria e intencional
   (ex: .badge-meta-*, .status-badge, .variable-name). Como html.dark-mode
   h1..li tem especificidade maior que uma classe simples, incluir span/div
   forçaria "inherit" por cima dessas cores mesmo sem !important, deixando
   texto claro sobre fundo claro (badge não escurecido) — foi exatamente
   esse bug que aconteceu antes dessa mudança. */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4,
html.dark-mode h5, html.dark-mode h6, html.dark-mode label,
html.dark-mode p, html.dark-mode li {
  color: inherit;
}

html.dark-mode a { color: var(--dm-link); }

html.dark-mode .text-muted { color: var(--dm-text-muted) !important; }
html.dark-mode .text-dark { color: var(--dm-text) !important; }
html.dark-mode .text-secondary { color: var(--dm-text-muted) !important; }

/* ===== Superfícies genéricas (Bootstrap) ===== */
html.dark-mode .card,
html.dark-mode .page-header,
html.dark-mode .filters-card,
html.dark-mode .table-card,
html.dark-mode .list-group-item,
html.dark-mode .dropdown-menu,
html.dark-mode .modal-content,
html.dark-mode .offcanvas,
html.dark-mode .accordion-item,
html.dark-mode .company-row,
html.dark-mode .qr-code-container,
html.dark-mode .user-card,
html.dark-mode .admin-stats-card {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* Título do modal (ex: "Nova etiqueta") — vem sozinho, direto na cor
   clara, então força explicitamente em vez de confiar em herdar a cor do
   .modal-header (esse .modal-title era o único texto do modal que ainda
   ficava escuro sobre fundo escuro). */
html.dark-mode .modal-title {
  color: var(--dm-text) !important;
}

html.dark-mode .card-header,
html.dark-mode .modal-header,
html.dark-mode .modal-footer,
html.dark-mode .list-group-item-action:hover {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .bg-white,
html.dark-mode .bg-light {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-start,
html.dark-mode .border-end {
  border-color: var(--dm-border) !important;
}

html.dark-mode hr { border-color: var(--dm-border) !important; }

/* ===== Tabelas ===== */
html.dark-mode .table {
  color: var(--dm-text) !important;
  --bs-table-color: var(--dm-text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--dm-surface-2);
  --bs-table-hover-bg: var(--dm-surface-2);
  --bs-table-border-color: var(--dm-border);
}

html.dark-mode .table thead th {
  background-color: var(--dm-surface-3) !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .table tbody td {
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .table tbody tr:hover,
html.dark-mode .contacts-table tbody tr:hover,
html.dark-mode .stats-card:hover,
html.dark-mode .table tbody tr.clickable:hover {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode .linha-ultimo-disparo td {
  background-color: #4a3b12 !important;
  border-color: #6b5518 !important;
}
html.dark-mode .linha-ultimo-disparo:hover td { background-color: #5a481a !important; }

/* ===== Formulários ===== */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode textarea,
html.dark-mode input[type="text"],
html.dark-mode input[type="search"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="number"],
html.dark-mode input[type="date"] {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .form-control::placeholder { color: var(--dm-text-muted) !important; }
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(37, 211, 102, 0.15) !important;
}

html.dark-mode .input-group-text {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .form-check-input {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

/* Busca de conversas (index.html) — o campo em si fica transparente e
   herda a cor do "pill" que o envolve (.search-input-wrapper), em vez de
   ganhar um fundo próprio como os inputs genéricos acima. */
html.dark-mode .search-input-wrapper {
  background-color: var(--dm-surface-2) !important;
}
html.dark-mode .search-input {
  background-color: transparent !important;
  color: var(--dm-text) !important;
}
html.dark-mode .search-input::placeholder {
  color: #5f6f78 !important;
}

/* ===== Botões ===== */
html.dark-mode .btn-outline-secondary,
html.dark-mode #emojiPickerToggle,
html.dark-mode #attachFileDropdownToggle,
html.dark-mode #microphoneBtn {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .btn-outline-secondary:hover,
html.dark-mode #emojiPickerToggle:hover,
html.dark-mode #attachFileDropdownToggle:hover,
html.dark-mode #microphoneBtn:hover {
  background-color: #354954 !important;
  color: var(--dm-text) !important;
}
html.dark-mode .btn-light {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .btn-close {
  filter: invert(1) grayscale(1) brightness(1.8);
}

/* Botões "outline" coloridos do header do chat (transferir, transferir
   departamento, encerrar conversa etc.) — no padrão claro usam texto/borda
   escuros que ficam ilegíveis sobre fundo escuro; mantém a cor semântica
   mas clareia o suficiente pra continuar visível. */
html.dark-mode .btn-outline-dark {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .btn-outline-dark:hover {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .btn-outline-info {
  color: #6fd3f7 !important;
  border-color: #3a6b7d !important;
}
html.dark-mode .btn-outline-info:hover {
  background-color: #16414d !important;
  color: #ffffff !important;
}
html.dark-mode .btn-outline-primary {
  color: var(--dm-green) !important;
  border-color: var(--dm-green-dark) !important;
}
html.dark-mode .btn-outline-primary:hover {
  background-color: var(--dm-green-dark) !important;
  color: #ffffff !important;
}
html.dark-mode .btn-outline-success {
  color: var(--dm-green) !important;
  border-color: var(--dm-green-dark) !important;
}
html.dark-mode .btn-outline-danger {
  color: #f77 !important;
  border-color: #7a3a3a !important;
}
html.dark-mode .btn-outline-warning {
  color: #ffd479 !important;
  border-color: #7a611f !important;
}

/* ===== Estados vazio/carregando ===== */
html.dark-mode .empty-state,
html.dark-mode .loading-state,
html.dark-mode .contacts-empty {
  color: var(--dm-text-muted) !important;
}

/* ===== Log de progresso (disparo) ===== */
html.dark-mode .log-container {
  background-color: var(--dm-surface-3) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .log-item { border-color: var(--dm-border) !important; }
html.dark-mode .notes-cell:hover {
  background-color: var(--dm-surface-2) !important;
}

/* ===== Scrollbar ===== */
html.dark-mode ::-webkit-scrollbar-track { background: var(--dm-bg-alt) !important; }
html.dark-mode ::-webkit-scrollbar-thumb { background: var(--dm-border) !important; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #3b4a52 !important; }

/* ===== Sidebar fixo (components/sidebar.html) ===== */
html.dark-mode .sidebar-fixed,
html.dark-mode .sidebar-header,
html.dark-mode .sidebar-footer {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .sidebar-link { color: var(--dm-text-muted) !important; }
html.dark-mode .sidebar-link:hover,
html.dark-mode .sidebar-link.active {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-green) !important;
}
html.dark-mode .btn-logout {
  border-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}
/* Contêiner de conteúdo de cada tela — cada página define a própria classe
   (ex: .labels-main, .contacts-main), várias com um "background" próprio
   que não seguia o body pro modo escuro. */
html.dark-mode .main-content,
html.dark-mode .labels-main,
html.dark-mode .contacts-main,
html.dark-mode .departamentos-main,
html.dark-mode .shortcuts-main,
html.dark-mode .quick-messages-main,
html.dark-mode .help-main,
html.dark-mode .settings-main,
html.dark-mode .admin-main,
html.dark-mode .status-main,
html.dark-mode .disparo-main,
html.dark-mode .leads-main,
html.dark-mode .flows-main,
html.dark-mode .sequences-main {
  background-color: var(--dm-bg) !important;
}

/* ===== Tela principal do chat (index.html) ===== */
html.dark-mode #app,
html.dark-mode #mainContainer,
html.dark-mode #messagesArea,
html.dark-mode #messageInput {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

html.dark-mode #conversationsList {
  background-color: var(--dm-surface) !important;
}

/* Barra de abas da lista de conversas (Atendimento / Não lidas / Fixadas /
   Encerradas / Grupos). */
html.dark-mode .filter-buttons {
  background-color: var(--dm-surface-2) !important;
}
html.dark-mode .filter-btn {
  color: var(--dm-text-muted) !important;
}
html.dark-mode .filter-btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .filter-btn.active {
  background-color: var(--dm-surface) !important;
  color: var(--dm-green) !important;
}

html.dark-mode .conversation-item {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .conversation-item:hover,
html.dark-mode .conversation-item.active {
  background-color: var(--dm-surface-2) !important;
}
html.dark-mode .conversation-item .text-muted { color: var(--dm-text-muted) !important; }

/* Balão de mensagem — o fundo real fica em .message-content (dentro de
   .message), não em .message; aplicar cor em .message pintaria a linha
   inteira (avatar + espaço vazio), não só o balão. Cobre tanto conversas
   normais/grupos de WhatsApp quanto o chat interno (.internal-message). */
html.dark-mode .message.sent .message-content {
  background-color: var(--dm-bubble-sent) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .message.received .message-content {
  background-color: var(--dm-bubble-received) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .message.sent.internal-message .message-content {
  background-color: #767676 !important;
  color: var(--dm-text) !important;
}
html.dark-mode .message.received.internal-message .message-content {
  background-color: #4e4c57 !important;
  color: var(--dm-text) !important;
}
html.dark-mode .message-content,
html.dark-mode .message-text {
  color: var(--dm-text) !important;
}
html.dark-mode .message-time {
  color: var(--dm-text-muted) !important;
}

/* Citação de resposta (reply) dentro do balão — no padrão claro usa texto
   preto fixo, que fica ilegível sobre fundo escuro. */
html.dark-mode .reply-reference {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode .reply-sender {
  color: var(--dm-green) !important;
}
html.dark-mode .reply-text {
  color: var(--dm-text-muted) !important;
}

html.dark-mode #messageText,
html.dark-mode #sendMessageForm .form-control {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .checkbox-filter-dropdown,
html.dark-mode #etiquetasDropdown {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* ===== Badges de status (mantidos coloridos, só o texto/contraste ajusta) ===== */
html.dark-mode .badge.bg-secondary { background-color: #4a5a63 !important; }
html.dark-mode .badge.bg-light { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; }

/* ===== shortcuts.html ===== */
html.dark-mode .shortcuts-header,
html.dark-mode .accordion-item,
html.dark-mode .accordion-body,
html.dark-mode .media-item,
html.dark-mode .media-info,
html.dark-mode .flow-message-item .message-order {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .accordion-button {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .accordion-button:hover { background-color: #354954 !important; }
html.dark-mode .accordion-button:not(.collapsed) {
  background-color: #4a3f12 !important;
  color: #ffd479 !important;
}
html.dark-mode .shortcut-name,
html.dark-mode .shortcut-message-content,
html.dark-mode .flow-message-item,
html.dark-mode .media-grid,
html.dark-mode .media-icon {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .media-name { color: var(--dm-text) !important; }
html.dark-mode .media-size { color: var(--dm-text-muted) !important; }

/* ===== quick-messages.html ===== */
html.dark-mode .qm-card {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .qm-table th {
  background-color: var(--dm-surface-3) !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .qm-table td {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .qm-table tr:hover td { background-color: var(--dm-surface-2) !important; }
html.dark-mode .qm-name { color: var(--dm-text) !important; }

/* ===== help.html ===== */
html.dark-mode .help-header,
html.dark-mode .help-section,
html.dark-mode .toc {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .variable-card {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .toc a { color: var(--dm-text-muted) !important; }

/* ===== settings.html ===== */
html.dark-mode .settings-header,
html.dark-mode .day-row,
html.dark-mode .message-section {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .day-row.closed { background-color: var(--dm-surface-3) !important; }
html.dark-mode .day-row.closed .time-input-group input,
html.dark-mode .day-row.closed .time-input-group select {
  background-color: var(--dm-surface-2) !important;
}
html.dark-mode .day-name,
html.dark-mode .message-section h4 {
  color: var(--dm-text) !important;
}
html.dark-mode .time-input-group label { color: var(--dm-text-muted) !important; }

/* Menu de opções da mensagem (botão "⋯" no balão) — um tom acima do balão
   recebido (--dm-surface) pra não se confundir com ele. */
html.dark-mode .message-actions-menu {
  background-color: var(--dm-surface-2) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}
html.dark-mode .message-actions-menu-item { color: var(--dm-text) !important; }
html.dark-mode .message-actions-menu-item:hover,
html.dark-mode .message-actions-menu-item:focus-visible {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode .message-actions-menu-item.danger { color: #f1707b !important; }

/* ===== Pesquisa de mensagens dentro da conversa ===== */
html.dark-mode .message-search-bar,
html.dark-mode .message-search-results {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .message-search-result {
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .message-search-result:hover {
  background: var(--dm-surface-2) !important;
}
html.dark-mode .message-search-result-meta,
html.dark-mode .message-search-empty {
  color: var(--dm-text-muted) !important;
}
html.dark-mode .message-search-result-text mark {
  background-color: #ffeb3b !important;
  color: #111b21 !important;
}