﻿/* dark-mode.css - Estilos para Modo Escuro */

/* Variáveis CSS para cores do modo escuro */
:root {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-bg-tertiary: #3d3d3d;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-border: #4a4a4a;
    --dark-hover: #4a4a4a;
    --dark-input-bg: #2d2d2d;
    --dark-input-border: #4a4a4a;
}

/* Aplicar modo escuro quando a classe 'dark-mode' está no body */
body.dark-mode {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Page Wrapper */
body.dark-mode #page-wrapper {
    background-color: var(--dark-bg-primary) !important;
}

body.dark-mode #page-wrapper.gray-bg {
    background-color: var(--dark-bg-primary) !important;
}

/* Navigation Sidebar */
body.dark-mode #side-navbar {
    background-color: var(--dark-bg-secondary) !important;
    border-right: 1px solid var(--dark-border) !important;
}

body.dark-mode #side-navbar .nav > li > a {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #side-navbar .nav > li > a:hover,
body.dark-mode #side-navbar .nav > li > a:focus {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #side-navbar .nav > li.active > a {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #side-navbar .nav-second-level > li > a {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode #side-navbar .nav-second-level > li > a:hover {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Top Navbar */
body.dark-mode .navbar-static-top {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode .navbar-static-top.white-bg {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .ibox-content {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ibox-content h3,
body.dark-mode .ibox-content .font-bold {
    color: var(--dark-text-primary) !important;
}

/* Tabelas */
body.dark-mode .table {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .table thead th {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .table tbody td {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .table-bordered {
    border-color: var(--dark-border) !important;
}

/* Modais */
body.dark-mode .modal-content {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .modal-header {
    background-color: var(--dark-bg-tertiary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .modal-title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .modal-body {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .modal-footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* Formulários e Inputs */
body.dark-mode .form-control {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .form-control:focus {
    background-color: var(--dark-input-bg) !important;
    border-color: #5a9fd4 !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .form-control::placeholder {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode label,
body.dark-mode .font-normal,
body.dark-mode .parametro-label {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .form-group {
    color: var(--dark-text-primary) !important;
}

/* Selects e Dropdowns */
body.dark-mode .chosen-container-single .chosen-single {
    background: var(--dark-input-bg) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .modal .chosen-container-single .chosen-single {
    background: var(--dark-input-bg) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .chosen-container .chosen-drop {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .chosen-container .chosen-results li {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .chosen-container .chosen-results li.highlighted {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Botões */
body.dark-mode .btn-default {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .btn-default:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Chat e Mensagens */
body.dark-mode .supervisor-consults-title h1 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .supervisor-consults-body {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .text-danger {
    color: #ff6b6b !important;
}

body.dark-mode .text-white {
    color: var(--dark-text-primary) !important;
}

/* Alertas */
body.dark-mode .alert {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .alert-info {
    background-color: #1e3a5f !important;
    border-color: #2d5a8a !important;
    color: #b8d4f0 !important;
}

/* Badges e Labels */
body.dark-mode .badge,
body.dark-mode .label {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .badge-warning,
body.dark-mode .label-warning {
    background-color: #856404 !important;
    color: #fff !important;
}

/* Textarea */
body.dark-mode textarea.form-control {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Input Group */
body.dark-mode .input-group-addon {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Radio e Checkbox */
body.dark-mode .radio-inline,
body.dark-mode .checkbox-inline {
    color: var(--dark-text-primary) !important;
}

/* Footer */
body.dark-mode footer {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

body.dark-mode .footer {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* Scrollbar personalizada para modo escuro */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dark-bg-tertiary);
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-hover);
}

/* Botão de Toggle do Modo Escuro */
.dark-mode-toggle {
    position: fixed;
    top: 5%;
    right: 15px;
    z-index: 10000;
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.dark-mode-toggle i {
    font-size: 20px;
    color: #f0c674;
    display: inline-block !important;
    visibility: visible !important;
    transition: all 0.3s ease;
}

body.dark-mode .dark-mode-toggle {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

body.dark-mode .dark-mode-toggle i {
    color: #f0c674;
}

/* Ícone sol quando está no modo escuro (para voltar ao claro) */
body.dark-mode .dark-mode-toggle i.fa-sun-o {
    color: #f0c674;
}

/* Ícone lua quando está no modo claro (para ir ao escuro) */
.dark-mode-toggle i.fa-moon-o {
    color: #4a90e2;
}

/* Ajustes para elementos específicos do chat */
body.dark-mode #mainconsultpanel,
body.dark-mode #mainconsultchat,
body.dark-mode #mainchatreference {
    background-color: var(--dark-bg-primary) !important;
}

/* Tabs */
body.dark-mode .nav-tabs {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .nav-tabs > li > a {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .nav-tabs > li > a:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .nav-tabs > li.active > a {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) var(--dark-border) transparent !important;
    color: var(--dark-text-primary) !important;
}

/* ============================================
   ESTILOS ADICIONAIS PARA MODO ESCURO
   ============================================ */

/* ========== PÁGINA DE LOGIN ========== */

/* Container principal do login */
body.dark-mode .middle-box,
body.dark-mode .loginscreen {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Container do formulário de login */
body.dark-mode #divlogin {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Logo name */
body.dark-mode .logo-name {
    background-color: transparent !important;
    color: var(--dark-text-primary) !important;
}

/* Parágrafo "Bem-vindo" */
body.dark-mode .loginscreen p {
    color: var(--dark-text-primary) !important;
}

/* Parágrafo com classe m-t (copyright) */
body.dark-mode p.m-t,
body.dark-mode .m-t {
    color: var(--dark-text-secondary) !important;
}

    body.dark-mode p.m-t small {
        color: var(--dark-text-secondary) !important;
    }

/* ========== NAV-HEADER (Sidebar) - CORRIGIDO ========== */

body.dark-mode .nav-header {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #side-menu .nav-header {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .nav-header .text-muted {
    color: var(--dark-text-secondary) !important;
}

/* ========== LIINTERACAO E LIINTERACAOATIVA - ESTADOS ATIVOS ========== */

/* Quando os elementos estão expandidos/ativos */
body.dark-mode #liinteracao.active,
body.dark-mode #liinteracao.mm-active {
    background: var(--dark-bg-secondary) !important;
}

body.dark-mode #liinteracaoativa.active,
body.dark-mode #liinteracaoativa.mm-active {
    background: var(--dark-bg-secondary) !important;
}

/* Links dentro dos elementos ativos */
body.dark-mode #liinteracao.active > a,
body.dark-mode #liinteracao.mm-active > a {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #liinteracaoativa.active > a,
body.dark-mode #liinteracaoativa.mm-active > a {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* ========== ELEMENTOS CRIADOS POR CreatSession E CreatSessionTransf ========== */

/* Chat Session */
body.dark-mode .chat-session {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Metadesigner */
body.dark-mode .metadesigner {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Chat Discussion */
body.dark-mode .chat-discussion {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Chat Message Form */
body.dark-mode .chat-message-form {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* Botões dentro do chat-message-form */
body.dark-mode .chat-message-form .btn-primary {
    background: #0d7377 !important;
    border-color: #0a5a5d !important;
    color: #fff !important;
}

body.dark-mode .chat-message-form .btn-primary:hover,
body.dark-mode .chat-message-form .btn-primary:focus {
    background: #0f8a8f !important;
    border-color: #0d7377 !important;
    color: #fff !important;
}

body.dark-mode .chat-message-form .btn-info {
    background: #2d5a8a !important;
    border-color: #1e3f5f !important;
    color: #fff !important;
}

body.dark-mode .chat-message-form .btn-info:hover,
body.dark-mode .chat-message-form .btn-info:focus {
    background: #3a6ba3 !important;
    border-color: #2d5a8a !important;
    color: #fff !important;
}

body.dark-mode .chat-message-form .btn-enviar {
    background: #0d7377 !important;
    border-color: #0a5a5d !important;
    color: #fff !important;
}

body.dark-mode .chat-message-form .btn-enviar:hover,
body.dark-mode .chat-message-form .btn-enviar:focus {
    background: #0f8a8f !important;
    border-color: #0d7377 !important;
    color: #fff !important;
}

/* Metacolor (Metadados) */
body.dark-mode .metacolor {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

    body.dark-mode .metacolor span,
    body.dark-mode .metacolor .font-normal {
        color: var(--dark-text-primary) !important;
    }

    body.dark-mode .metacolor strong {
        color: var(--dark-text-primary) !important;
    }

/* ========== ELEMENTOS CRIADOS DINAMICAMENTE PELO CreatSession ========== */

/* Elementos li com id terminando em "_list" (grupos de interações) */
body.dark-mode li[id$="_list"] {
    background: var(--dark-bg-secondary) !important;
}

body.dark-mode li[id$="_list"] > a {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode li[id$="_list"] > a:hover {
    background: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Navegação de terceiro nível (nav-third-level) */
body.dark-mode .nav-third-level {
    background: var(--dark-bg-secondary) !important;
}

body.dark-mode .nav-third-level > li {
    background: var(--dark-bg-secondary) !important;
}

body.dark-mode .nav-third-level > li > a {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .nav-third-level > li > a:hover {
    background: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Elementos li individuais de interação (id terminando em "_nav") */
body.dark-mode li[id$="_nav"] {
    background: var(--dark-bg-secondary) !important;
}

body.dark-mode li[id$="_nav"] > a {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode li[id$="_nav"] > a:hover,
body.dark-mode li[id$="_nav"] > a:focus {
    background: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Quando o item de navegação está ativo/selecionado */
body.dark-mode li[id$="_nav"].active,
body.dark-mode li[id$="_nav"].mm-active {
    background: var(--dark-hover) !important;
}

body.dark-mode li[id$="_nav"].active > a,
body.dark-mode li[id$="_nav"].mm-active > a {
    background: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Navegação de segundo nível (nav-second-level) dentro das listas de interação */
body.dark-mode #nav_interacoes,
body.dark-mode #nav_interacoes_ativas {
    background: var(--dark-bg-secondary) !important;
}

body.dark-mode #nav_interacoes > li,
body.dark-mode #nav_interacoes_ativas > li {
    background: var(--dark-bg-secondary) !important;
}

body.dark-mode #nav_interacoes > li > a,
body.dark-mode #nav_interacoes_ativas > li > a {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #nav_interacoes > li > a:hover,
body.dark-mode #nav_interacoes_ativas > li > a:hover {
    background: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Links primários na navegação */
body.dark-mode .nav > li > a.primary {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .nav > li > a.primary:hover {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Links primários dentro das navegações */
body.dark-mode #nav_interacoes .primary,
body.dark-mode #nav_interacoes_ativas .primary,
body.dark-mode .nav-third-level .primary {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #nav_interacoes .primary:hover,
body.dark-mode #nav_interacoes_ativas .primary:hover,
body.dark-mode .nav-third-level .primary:hover {
    background: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Labels e Badges nas navegações */
body.dark-mode .label-primary,
body.dark-mode .badge-primary {
    background-color: #2d5a8a !important;
    color: #fff !important;
}

body.dark-mode .badge-danger {
    background-color: #8b2e2e !important;
    color: #fff !important;
}

body.dark-mode .label.label-primary {
    background-color: #2d5a8a !important;
    color: #fff !important;
}

/* Números de telefone na navegação */
body.dark-mode #side-menu span[id$="_navnum"] {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode #nav_interacoes span[id$="_navnum"],
body.dark-mode #nav_interacoes_ativas span[id$="_navnum"],
body.dark-mode .nav-third-level span[id$="_navnum"] {
    color: var(--dark-text-secondary) !important;
}

/* ========== MENSAGENS DE CHAT ========== */

/* Mensagens de chat */
body.dark-mode .message-chat {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .message-author-chat {
    color: var(--dark-text-primary) !important;
}

    body.dark-mode .message-author-chat b {
        color: var(--dark-text-primary) !important;
    }

body.dark-mode .message-content {
    color: var(--dark-text-primary) !important;
}

/* Mensagens à esquerda (cliente) */
body.dark-mode .chat-message-left {
    background: #3d3d3d !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .message.chat-message-left {
    background: #3d3d3d !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-message-left .message-chat {
    background: #3d3d3d !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .message-chat.chat-message-left {
    background: #3d3d3d !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-message-left .message-chat.sb2:before,
body.dark-mode .message-chat.chat-message-left.sb2:before {
    border-right-color: #3d3d3d !important;
    border-top-color: #3d3d3d !important;
}

body.dark-mode .chat-message-left.sb2:before,
body.dark-mode .message.chat-message-left.sb2:before {
    border-right-color: #3d3d3d !important;
    border-top-color: #3d3d3d !important;
}

/* Mensagens à direita (agente) */
body.dark-mode .chat-message-right {
    background: #0d7377 !important;
    color: #fff !important;
}

body.dark-mode .message.chat-message-right {
    background: #0d7377 !important;
    color: #fff !important;
}

body.dark-mode .chat-message-right .message-chat {
    background: #0d7377 !important;
    color: #fff !important;
}

body.dark-mode .message-chat.chat-message-right {
    background: #0d7377 !important;
    color: #fff !important;
}

body.dark-mode .chat-message-right .message-chat.sb1:before,
body.dark-mode .message-chat.chat-message-right.sb1:before {
    border-left-color: #0d7377 !important;
    border-top-color: #0d7377 !important;
}

body.dark-mode .chat-message-right.sb1:before,
body.dark-mode .message.chat-message-right.sb1:before {
    border-left-color: #0d7377 !important;
    border-top-color: #0d7377 !important;
}

/* Mensagens do sistema */
body.dark-mode .chat-message-sistema {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
}

    body.dark-mode .chat-message-sistema .message-author-chat {
        color: var(--dark-text-secondary) !important;
    }

/* ========== PAINÉIS E PANELS ========== */

body.dark-mode .panel {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .panel-default {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .panel-heading {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .panel-title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .panel-body {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .panel-footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* ========== TABS ========== */

body.dark-mode .interaction-tabs {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

    body.dark-mode .interaction-tabs > li > a {
        color: var(--dark-text-primary) !important;
    }

        body.dark-mode .interaction-tabs > li > a:hover {
            background-color: var(--dark-hover) !important;
            color: var(--dark-text-primary) !important;
        }

    body.dark-mode .interaction-tabs > li.active > a {
        background-color: var(--dark-bg-primary) !important;
        border-color: var(--dark-border) var(--dark-border) transparent !important;
        color: var(--dark-text-primary) !important;
    }

/* ========== BOTÕES DE INTERAÇÃO ========== */

body.dark-mode .discussion-btn-group .btn-white {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

    body.dark-mode .discussion-btn-group .btn-white:hover {
        background-color: var(--dark-hover) !important;
        border-color: var(--dark-border) !important;
        color: var(--dark-text-primary) !important;
    }

/* ========== TEXTAREA E INPUTS DE MENSAGEM ========== */

body.dark-mode .message-input {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

    body.dark-mode .message-input:focus {
        background-color: var(--dark-input-bg) !important;
        border-color: #5a9fd4 !important;
        color: var(--dark-text-primary) !important;
    }

    body.dark-mode .message-input::placeholder {
        color: var(--dark-text-secondary) !important;
    }

/* ========== LABELS E CONTROLES ========== */

body.dark-mode .control-label {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .control-label-margin {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .char-limit {
    color: var(--dark-text-secondary) !important;
}

    body.dark-mode .char-limit strong {
        color: var(--dark-text-primary) !important;
    }

/* ========== CONTAINERS DE CHAT ========== */

body.dark-mode .chat-discussion-header {
    background-color: var(--dark-bg-tertiary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .discussion-header {
    color: var(--dark-text-primary) !important;
}

    body.dark-mode .discussion-header strong {
        color: var(--dark-text-primary) !important;
    }

body.dark-mode .chat-discussion-body {
    background-color: var(--dark-bg-primary) !important;
}

body.dark-mode .chat-discussion-footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* ========== CONSULTAS E SUPERVISORES ========== */

body.dark-mode .consult-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

    body.dark-mode .consult-container .panel-heading {
        background-color: var(--dark-bg-tertiary) !important;
        color: var(--dark-text-primary) !important;
    }

body.dark-mode .consult-panel-title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .supervisors-list-body {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .supervisor-list-item {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .supervisor-name {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .consult-chat-title {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .consult-chat-discussion {
    background-color: var(--dark-bg-primary) !important;
}

body.dark-mode .consult-chat-footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top-color: var(--dark-border) !important;
}

body.dark-mode .consult-input {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .consult-chat-system-message {
    color: var(--dark-text-secondary) !important;
}

/* ========== BILHETE ========== */

body.dark-mode .ticket-label {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ticket-input {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ticket-body {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .ticket-button-group {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-input-border) !important;
}

/* Botões ticket-btn no modo escuro */
body.dark-mode .ticket-btn {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ticket-btn:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Ícones glyphicon dentro dos botões ticket-btn */
body.dark-mode .ticket-btn .glyphicon {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ticket-btn .glyphicon-paperclip {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ticket-btn .glyphicon-paperclip:before {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ticket-btn span.glyphicon {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ticket-btn span.glyphicon:before {
    color: var(--dark-text-primary) !important;
}

/* ========== HISTÓRICO ========== */

body.dark-mode .history-discussion {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .collapse-history-header {
    color: var(--dark-text-primary) !important;
}

    body.dark-mode .collapse-history-header strong {
        color: var(--dark-text-primary) !important;
    }

/* ========== EMOJIS E RESPOSTAS RÁPIDAS ========== */

body.dark-mode .emoji-container,
body.dark-mode .answer-container,
body.dark-mode .temporary-file-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .emoji-grid,
body.dark-mode .answer-list {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .answer-item .answer-text {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

    body.dark-mode .answer-item .answer-text:hover {
        background-color: var(--dark-hover) !important;
        color: var(--dark-text-primary) !important;
    }

body.dark-mode .answer-empty {
    color: var(--dark-text-secondary) !important;
}

/* ========== FILE PREVIEW ========== */

body.dark-mode .file-preview {
    background-color: var(--dark-bg-secondary) !important;
}

/* ========== LIST GROUP ========== */

body.dark-mode .list-group-item {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .list-group-item-info {
    background-color: #1e3a5f !important;
    border-color: #2d5a8a !important;
    color: #b8d4f0 !important;
}

body.dark-mode .list-group-item-success {
    background-color: #1e4d1e !important;
    border-color: #2d6a2d !important;
    color: #b8e0b8 !important;
}

body.dark-mode .list-group-item-danger {
    background-color: #4d1e1e !important;
    border-color: #6a2d2d !important;
    color: #e0b8b8 !important;
}

/* ========== SEPARADORES DE CHAT ========== */

body.dark-mode .chat-separator {
    color: var(--dark-text-secondary) !important;
}

    body.dark-mode .chat-separator hr {
        border-color: var(--dark-border) !important;
    }

/* ========== AJUSTES GERAIS ========== */

body.dark-mode .flex-container {
    background-color: transparent !important;
}

body.dark-mode .full-height {
    background-color: transparent !important;
}

/* Garantir que elementos dinâmicos também recebam os estilos */
body.dark-mode [id$="_chat"] {
    background-color: var(--dark-bg-primary) !important;
}

body.dark-mode [id$="_chat_discussion"] {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode [id$="_metadado"] {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

/* ========== RADIO INLINE E LABELS NO MODO ESCURO ========== */

/* Garantir que os textos dentro de radio-inline tenham cor correta no modo escuro */
body.dark-mode .radio-inline {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .radio-inline strong {
    color: var(--dark-text-primary) !important;
    font-weight: bold !important;
}

/* Especificamente para os labels de Envio de Template e Envio de Mensagem */
body.dark-mode .radio-group .radio-inline strong {
    color: var(--dark-text-primary) !important;
}

/* Para sobrescrever estilos inline aplicados pelo JavaScript */
body.dark-mode label.radio-inline strong {
    color: var(--dark-text-primary) !important;
}

/* Seletores específicos para garantir que sobrescrevam estilos inline */
body.dark-mode label.radio-inline strong[style*="color"] {
    color: var(--dark-text-primary) !important;
}

/* Para quando o texto está bold (aplicado pelo JavaScript) */
body.dark-mode label.radio-inline strong[style*="font-weight: bold"],
body.dark-mode label.radio-inline strong[style*="font-weight:bold"] {
    color: var(--dark-text-primary) !important;
}

/* Para quando o texto está normal (disabled) */
body.dark-mode label.radio-inline strong[style*="font-weight: normal"],
body.dark-mode label.radio-inline strong[style*="font-weight:normal"] {
    color: var(--dark-text-secondary) !important;
}

/* ========== SWEETALERT (SWAL) MODAL ========== */

body.dark-mode .swal-modal {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .swal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .swal-title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .swal-text {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .swal-content {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .swal-content__input {
    background: var(--dark-input-bg) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .swal-button {
    background: #0d7377 !important;
    color: #fff !important;
    border: none !important;
}

body.dark-mode .swal-button:hover {
    background: #0f8a8f !important;
    color: #fff !important;
}

body.dark-mode .swal-button--confirm {
    background: #0d7377 !important;
    color: #fff !important;
}

body.dark-mode .swal-button--confirm:hover {
    background: #0f8a8f !important;
    color: #fff !important;
}

body.dark-mode .swal-button--cancel {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .swal-button--cancel:hover {
    background: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .swal-icon {
    border-color: var(--dark-border) !important;
}

body.dark-mode .swal-icon::before {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .swal-icon::after {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .swal-icon--success {
    border-color: #0d7377 !important;
}

body.dark-mode .swal-icon--success__line {
    background-color: #0d7377 !important;
}

body.dark-mode .swal-icon--success__ring {
    border-color: #0d7377 !important;
}

body.dark-mode .swal-icon--success__hide-corners {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .swal-icon--error {
    border-color: #d9534f !important;
}

body.dark-mode .swal-icon--error__line {
    background-color: #d9534f !important;
}

body.dark-mode .swal-icon--warning {
    border-color: #f0ad4e !important;
}

body.dark-mode .swal-icon--warning__body {
    background-color: #f0ad4e !important;
}

body.dark-mode .swal-icon--info {
    border-color: #2d5a8a !important;
}

body.dark-mode .swal-icon--info::before {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .swal-icon--info::after {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode #ToggleAudioBtn,
body.dark-mode #audioSliderDiv #ToggleAudioBtn,
body.dark-mode #audioSliderDiv .glyphicon {
    color: #333 !important;
}
