/**
 * EZContact Dark Mode
 * Activa agregando clase 'dark-mode' al body
 */

/* Variables oscuras */
body.dark-mode {
  --dark-bg-primary: #0f0f1a;
  --dark-bg-secondary: #1a1a2e;
  --dark-bg-tertiary: #252542;
  --dark-bg-hover: #2d2d4a;
  --dark-text-primary: #e4e4e4;
  --dark-text-secondary: #a8a8b8;
  --dark-text-muted: #6c6c8a;
  --dark-border: #3a3a5a;
  --dark-accent: #4d9fff;
  --dark-accent-green: #2cc4b9;
}

/* ================================
   FONDOS PRINCIPALES
   ================================ */

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

body.dark-mode .chat-layout {
  background: var(--dark-bg-primary) !important;
}

/* ================================
   PANEL IZQUIERDO - LISTA DE CHATS
   (Selectores específicos para sobreescribir assets/css/style.css)
   ================================ */

body.dark-mode .chat-leftbar,
body.dark-mode #chat-leftbar,
html body.dark-mode .chat-leftbar {
  background: var(--dark-bg-secondary) !important;
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .chat-listbar,
html body.dark-mode .chat-listbar {
  background: var(--dark-bg-secondary) !important;
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .chat-left-headbar,
body.dark-mode .chat-leftbar .chat-left-headbar,
html body.dark-mode .chat-leftbar .chat-left-headbar {
  background: var(--dark-bg-tertiary) !important;
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .chat-left-search,
body.dark-mode .chat-leftbar .chat-left-search,
html body.dark-mode .chat-leftbar .chat-left-search {
  background: var(--dark-bg-secondary) !important;
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .chat-left-body,
body.dark-mode .chat-leftbar .chat-left-body,
html body.dark-mode .chat-leftbar .chat-left-body {
  background: var(--dark-bg-secondary) !important;
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .chat-left-search input,
body.dark-mode .chat-left-search .form-control {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

/* Items de la lista de chats */
body.dark-mode .chat-listbar .nav-link,
body.dark-mode .chat-userlist .nav-link,
body.dark-mode [role="tablist"] .nav-link,
body.dark-mode .chat-listbar .media {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-listbar .nav-link:hover,
body.dark-mode .chat-userlist .nav-link:hover,
body.dark-mode [role="tablist"] .nav-link:hover {
  background: var(--dark-bg-hover) !important;
}

body.dark-mode .chat-listbar .nav-link.active,
body.dark-mode .chat-userlist .nav-link.active,
body.dark-mode [role="tablist"] .nav-link.active {
  background: var(--dark-bg-tertiary) !important;
  border-left: 3px solid var(--dark-accent) !important;
}

/* Texto en lista de chats */
body.dark-mode .chat-listbar h5,
body.dark-mode .chat-listbar h6,
body.dark-mode .chat-listbar p,
body.dark-mode .chat-listbar span,
body.dark-mode .chat-userlist h5,
body.dark-mode .chat-userlist p {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-listbar .text-muted,
body.dark-mode .chat-userlist .text-muted {
  color: var(--dark-text-muted) !important;
}

/* ================================
   PANEL DERECHO - ÁREA DE CHAT
   ================================ */

body.dark-mode .chat-rightbar,
body.dark-mode #chat-rightbar {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .chat-detail {
  background: var(--dark-bg-tertiary) !important;
}

body.dark-mode .chat-content {
  background: var(--dark-bg-primary) !important;
}

body.dark-mode .chat-right-headbar {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

/* Input de mensaje */
body.dark-mode .chat-footer,
body.dark-mode .chat-bottom {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .chat-footer input,
body.dark-mode .chat-footer textarea,
body.dark-mode .chat-bottom input {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-footer input::placeholder {
  color: var(--dark-text-muted) !important;
}

/* ================================
   MENSAJES
   ================================ */

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

body.dark-mode .chat-message-right .chat-message-text {
  background: var(--dark-accent) !important;
  color: #ffffff !important;
}

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

/* ================================
   HEADER Y NAVEGACIÓN
   ================================ */

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

/* Iconos del header */
body.dark-mode .chat-left-headbar a,
body.dark-mode .chat-left-headbar i {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-left-headbar a:hover {
  color: var(--dark-accent) !important;
}

/* ================================
   MENÚ INFERIOR (MOBILE)
   ================================ */

body.dark-mode .bottom-menu,
body.dark-mode .tab-content,
body.dark-mode .nav-pills,
body.dark-mode [role="tabpanel"] {
  background: var(--dark-bg-secondary) !important;
}

body.dark-mode .bottom-menu a,
body.dark-mode .bottom-menu i {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .bottom-menu a.active,
body.dark-mode .bottom-menu a:hover {
  color: var(--dark-accent) !important;
}

/* ================================
   TABS
   ================================ */

body.dark-mode .nav-tabs {
  border-color: var(--dark-border) !important;
  background: var(--dark-bg-secondary) !important;
}

body.dark-mode .nav-tabs .nav-link {
  color: var(--dark-text-secondary) !important;
  background: transparent !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

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

/* ================================
   FORMULARIOS
   ================================ */

body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode textarea,
body.dark-mode select {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .form-control:focus {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-accent) !important;
  color: var(--dark-text-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(77, 159, 255, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
  color: var(--dark-text-muted) !important;
}

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

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

/* ================================
   CARDS
   ================================ */

body.dark-mode .card {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

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

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

body.dark-mode .card-footer {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

/* ================================
   TABLAS
   ================================ */

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

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

body.dark-mode .table td,
body.dark-mode .table th {
  border-color: var(--dark-border) !important;
  background: var(--dark-bg-secondary) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background: var(--dark-bg-tertiary) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) td {
  background: var(--dark-bg-tertiary) !important;
}

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

body.dark-mode .table-hover tbody tr:hover td {
  background: var(--dark-bg-hover) !important;
}

/* ================================
   MODALES
   ================================ */

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

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

body.dark-mode .modal-header .close,
body.dark-mode .modal-header .btn-close {
  color: var(--dark-text-primary) !important;
  opacity: 0.8;
}

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

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

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

/* ================================
   DROPDOWNS
   ================================ */

body.dark-mode .dropdown-menu {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

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

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

body.dark-mode .dropdown-header {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .dropdown-divider {
  border-color: var(--dark-border) !important;
}

/* ================================
   ALERTAS
   ================================ */

body.dark-mode .alert-warning {
  background: rgba(255, 193, 7, 0.15) !important;
  color: #ffc107 !important;
  border-color: rgba(255, 193, 7, 0.3) !important;
}

body.dark-mode .alert-info {
  background: rgba(23, 162, 184, 0.15) !important;
  color: #17a2b8 !important;
  border-color: rgba(23, 162, 184, 0.3) !important;
}

body.dark-mode .alert-success {
  background: rgba(40, 167, 69, 0.15) !important;
  color: #28a745 !important;
  border-color: rgba(40, 167, 69, 0.3) !important;
}

body.dark-mode .alert-danger {
  background: rgba(220, 53, 69, 0.15) !important;
  color: #dc3545 !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
}

/* ================================
   TÍTULOS Y TEXTO
   ================================ */

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode .h1, body.dark-mode .h2, body.dark-mode .h3,
body.dark-mode .h4, body.dark-mode .h5, body.dark-mode .h6 {
  color: var(--dark-text-primary) !important;
}

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

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

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

body.dark-mode a {
  color: var(--dark-accent) !important;
}

body.dark-mode a:hover {
  color: #6db3ff !important;
}

/* ================================
   UTILIDADES DE FONDO
   ================================ */

body.dark-mode .bg-white {
  background: var(--dark-bg-secondary) !important;
}

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

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

/* ================================
   SWEETALERT2
   ================================ */

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

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

body.dark-mode .swal2-html-container {
  color: var(--dark-text-secondary) !important;
}

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

/* ================================
   DATATABLES
   ================================ */

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

body.dark-mode .dataTables_filter input,
body.dark-mode .dataTables_length select {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .dataTables_info {
  color: var(--dark-text-secondary) !important;
}

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

body.dark-mode .paginate_button.current {
  background: var(--dark-accent) !important;
  border-color: var(--dark-accent) !important;
  color: #fff !important;
}

/* ================================
   SCROLLBAR
   ================================ */

body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

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

/* ================================
   ESPECÍFICOS DE EZCONTACT
   ================================ */

/* Tags de estado */
body.dark-mode .badge {
  opacity: 0.9;
}

/* Lista de usuarios/contactos */
body.dark-mode .contact-list,
body.dark-mode .user-list {
  background: var(--dark-bg-secondary) !important;
}

/* EZ-body (contenedor principal en algunas vistas) */
body.dark-mode .ez-body {
  background: var(--dark-bg-secondary) !important;
}

/* Sidebar de perfil/info */
body.dark-mode .profile-sidebar,
body.dark-mode .user-info-sidebar {
  background: var(--dark-bg-secondary) !important;
}

/* Empty state */
body.dark-mode .empty-chat,
body.dark-mode .no-chat-selected {
  background: var(--dark-bg-primary) !important;
  color: var(--dark-text-muted) !important;
}

/* ================================
   SETTINGS / PREFERENCES PAGE
   ================================ */

body.dark-mode .settings-layout {
  background: var(--dark-bg-secondary) !important;
}

body.dark-mode .settings-sidebar {
  background: var(--dark-bg-secondary) !important;
}

body.dark-mode .settings-sidebar .nav-link {
  color: var(--dark-text-primary) !important;
  background: transparent !important;
}

body.dark-mode .settings-sidebar .nav-link:hover {
  background: var(--dark-bg-hover) !important;
}

body.dark-mode .settings-sidebar .nav-link.active {
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-accent) !important;
}

body.dark-mode .settings-sidebar .nav-link i {
  color: var(--dark-text-secondary) !important;
}

/* Tab panes en settings */
body.dark-mode .tab-pane {
  background: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .tab-content {
  background: var(--dark-bg-secondary) !important;
}

/* Contenedor principal del content */
body.dark-mode .content-card,
body.dark-mode .content-area,
body.dark-mode .main-content {
  background: var(--dark-bg-secondary) !important;
}

/* Row dentro de settings */
body.dark-mode .settings-layout .row {
  background: var(--dark-bg-secondary) !important;
}

/* ================================
   BOTTOM MENU
   ================================ */

body.dark-mode [data-bottom-menu],
body.dark-mode .bottom-menu-container,
body.dark-mode #bottom-menu {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode [data-bottom-menu] a,
body.dark-mode .bottom-menu-container a {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode [data-bottom-menu] a.active,
body.dark-mode [data-bottom-menu] a:hover {
  color: var(--dark-accent) !important;
}

/* ================================
   CATCH-ALL PARA FONDOS BLANCOS
   ================================ */

/* Asegurar que el html y body cubran todo */
html.dark-mode,
body.dark-mode {
  background: var(--dark-bg-primary) !important;
  min-height: 100vh;
}

/* Cualquier div directo del body */
body.dark-mode > div {
  background: var(--dark-bg-primary) !important;
}

/* Todos los paneles y contenedores comunes */
body.dark-mode .panel,
body.dark-mode .panel-body,
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode .wrapper,
body.dark-mode .page-wrapper,
body.dark-mode .main-wrapper {
  background: var(--dark-bg-primary) !important;
}

/* Pills navigation */
body.dark-mode .nav-pills {
  background: transparent !important;
}

body.dark-mode .nav-pills .nav-link {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .nav-pills .nav-link.active {
  background: var(--dark-accent) !important;
  color: #fff !important;
}

/* Section titles */
body.dark-mode .section-title,
body.dark-mode .section-subtitle {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .section-subtitle {
  color: var(--dark-text-secondary) !important;
}

/* Profile detail */
body.dark-mode .profile-detail {
  background: var(--dark-bg-secondary) !important;
}

body.dark-mode .profile-detail li {
  border-color: var(--dark-border) !important;
}

body.dark-mode .profile-detail .media-body p {
  color: var(--dark-text-secondary) !important;
}

/* List groups */
body.dark-mode .list-group {
  background: var(--dark-bg-secondary) !important;
}

body.dark-mode .list-group-item {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .list-group-item:hover {
  background: var(--dark-bg-hover) !important;
}

/* AI Agents list */
body.dark-mode #aiagents .list-group-item {
  background: var(--dark-bg-tertiary) !important;
}

/* Asegurar que no haya fondos blancos escapados */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background-color: #fff"] {
  background: var(--dark-bg-secondary) !important;
}

/* ================================
   SEARCH INPUT
   ================================ */

body.dark-mode #btnBuscar,
body.dark-mode input[placeholder="Search"],
body.dark-mode input[placeholder="Buscar"],
body.dark-mode .chat-left-search input,
body.dark-mode .chat-left-search .input-group,
body.dark-mode .chat-left-search .input-group-append,
body.dark-mode .chat-left-search button {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .input-group {
  background: var(--dark-bg-tertiary) !important;
}

body.dark-mode .input-group-append,
body.dark-mode .input-group-prepend {
  background: var(--dark-bg-tertiary) !important;
}

body.dark-mode .input-group-append button,
body.dark-mode .input-group-append .btn {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-secondary) !important;
}

/* ================================
   CHAT INPUT / FOOTER
   ================================ */

body.dark-mode .chat-body,
body.dark-mode .chat-body-inner {
  background: var(--dark-bg-primary) !important;
}

body.dark-mode .chat-footer,
body.dark-mode .chat-input,
body.dark-mode .chat-send,
body.dark-mode .message-input,
body.dark-mode .write-message,
body.dark-mode [class*="chat-input"],
body.dark-mode [class*="message-input"] {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .chat-footer input,
body.dark-mode .chat-footer textarea,
body.dark-mode .chat-input input,
body.dark-mode .chat-input textarea,
body.dark-mode input[placeholder*="message"],
body.dark-mode input[placeholder*="Message"],
body.dark-mode input[placeholder*="mensaje"],
body.dark-mode input[placeholder*="Write"] {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

/* Chat detail header (área gris arriba del chat) */
body.dark-mode .chat-detail-header,
body.dark-mode .chat-header,
body.dark-mode .chat-top,
body.dark-mode .chat-info {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

/* El contenedor del área de mensajes */
body.dark-mode .chat-messages,
body.dark-mode .messages-container,
body.dark-mode .chat-body {
  background: var(--dark-bg-primary) !important;
}

/* Área vacía cuando no hay chat seleccionado */
body.dark-mode .no-chat,
body.dark-mode .select-chat,
body.dark-mode .chat-empty {
  background: var(--dark-bg-primary) !important;
  color: var(--dark-text-muted) !important;
}

/* ================================
   ICONOS Y BOTONES DEL CHAT
   ================================ */

body.dark-mode .chat-footer button,
body.dark-mode .chat-footer .btn,
body.dark-mode .chat-input button,
body.dark-mode .send-btn {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-footer button:hover,
body.dark-mode .chat-input button:hover {
  background: var(--dark-bg-hover) !important;
}

body.dark-mode .chat-footer i,
body.dark-mode .chat-input i {
  color: var(--dark-text-secondary) !important;
}

/* ================================
   MEDIA Y ATTACHMENTS
   ================================ */

body.dark-mode .attach-menu,
body.dark-mode .attachment-btn,
body.dark-mode .file-input-wrapper {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

/* ================================
   SEPARADORES Y BORDES
   ================================ */

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

body.dark-mode .divider,
body.dark-mode .separator {
  background: var(--dark-border) !important;
  border-color: var(--dark-border) !important;
}

/* ================================
   CHAT BOTTOM - INPUT DE MENSAJE
   ================================ */

body.dark-mode .chat-bottom {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .chat-bottom .input-group {
  background: var(--dark-bg-tertiary) !important;
  border-radius: 8px;
}

body.dark-mode .chat-bottom .input-group-prepend,
body.dark-mode .chat-bottom .input-group-append {
  background: transparent !important;
}

body.dark-mode .chat-bottom textarea,
body.dark-mode .chat-bottom input,
body.dark-mode #twilio_message {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-bottom a,
body.dark-mode .chat-bottom i {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .chat-bottom a:hover {
  color: var(--dark-accent) !important;
}

/* Template message bar */
body.dark-mode .template-messagebar {
  background: var(--dark-bg-secondary) !important;
}

body.dark-mode .template-messagebar label {
  color: var(--dark-text-primary) !important;
}

/* ================================
   BORDES DEL PANEL IZQUIERDO
   ================================ */

body.dark-mode .chat-leftbar,
body.dark-mode #chat-leftbar {
  border-right-color: var(--dark-border) !important;
}

body.dark-mode .chat-listbar {
  border-color: var(--dark-border) !important;
}

/* Bordes entre elementos de la lista */
body.dark-mode .chat-listbar .nav-link,
body.dark-mode .chat-userlist .nav-link {
  border-bottom-color: var(--dark-border) !important;
}

/* El contenedor principal del chat list */
body.dark-mode .chat-left-search {
  border-bottom-color: var(--dark-border) !important;
}

/* Scroll area */
body.dark-mode .chat-listbar-scroll,
body.dark-mode .simplebar-content,
body.dark-mode .simplebar-scroll-content {
  background: var(--dark-bg-secondary) !important;
}

/* El área alrededor del menú inferior */
body.dark-mode .pills-tab-justified,
body.dark-mode #pills-tab-justifiedContent {
  background: var(--dark-bg-secondary) !important;
}

body.dark-mode .tab-pane.active {
  background: var(--dark-bg-secondary) !important;
}

/* Asegurar que los tabs del bottom menu estén bien */
body.dark-mode .bottom-tabs,
body.dark-mode [role="tablist"] {
  background: var(--dark-bg-secondary) !important;
}

/* ================================
   BOTTOM MENU (MENÚ INFERIOR)
   ================================ */

body.dark-mode .chat-menu {
  background: var(--dark-bg-tertiary) !important;
  border-top: 1px solid var(--dark-border) !important;
}

body.dark-mode .chat-menu .nav,
body.dark-mode .chat-menu .nav-pills,
body.dark-mode .chat-menu ul {
  background: var(--dark-bg-tertiary) !important;
}

body.dark-mode .chat-menu .nav-item {
  background: var(--dark-bg-tertiary) !important;
}

body.dark-mode .chat-menu .nav-link {
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-secondary) !important;
  border-color: transparent !important;
}

body.dark-mode .chat-menu .nav-link:hover {
  color: var(--dark-text-primary) !important;
  background: var(--dark-bg-hover) !important;
}

body.dark-mode .chat-menu .nav-link.active {
  background: var(--dark-accent) !important;
  color: #fff !important;
}

body.dark-mode .chat-menu .nav-link i {
  color: inherit !important;
}

/* Nav pills justified específico */
body.dark-mode #pills-tab-justified,
body.dark-mode .nav-pills.nav-justified {
  background: var(--dark-bg-tertiary) !important;
}

body.dark-mode #pills-tab-justified .nav-item,
body.dark-mode .nav-pills.nav-justified .nav-item {
  background: var(--dark-bg-tertiary) !important;
}

body.dark-mode #pills-tab-justified .nav-link,
body.dark-mode .nav-pills.nav-justified .nav-link {
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-secondary) !important;
}

body.dark-mode #pills-tab-justified .nav-link.active,
body.dark-mode .nav-pills.nav-justified .nav-link.active {
  background: var(--dark-accent) !important;
  color: #fff !important;
}

/* ================================
   SETTINGS PAGE - ÁREA COMPLETA
   ================================ */

/* Contenedor principal de pills */
body.dark-mode #pills-tab-justifiedContent {
  background: var(--dark-bg-primary) !important;
}

body.dark-mode #pills-tab-justifiedContent > .tab-pane {
  background: var(--dark-bg-primary) !important;
}

/* El área del body en settings */
body.dark-mode .ez-body {
  background: var(--dark-bg-primary) !important;
}

/* Row de settings */
body.dark-mode .settings-layout {
  background: var(--dark-bg-primary) !important;
}

body.dark-mode .settings-layout > .row {
  background: var(--dark-bg-primary) !important;
}

/* Columna del contenido de settings */
body.dark-mode .settings-layout .col-md-9,
body.dark-mode .settings-layout .col-md-3 {
  background: transparent !important;
}

/* Tab content dentro de settings */
body.dark-mode .settings-layout .tab-content {
  background: var(--dark-bg-secondary) !important;
  border-radius: 8px;
  padding: 15px;
}

/* Cada tab pane dentro de settings */
body.dark-mode .settings-layout .tab-pane {
  background: var(--dark-bg-secondary) !important;
}

/* Área después de la tabla */
body.dark-mode .table-responsive {
  background: var(--dark-bg-secondary) !important;
}

/* El contenedor chat-listbar en settings */
body.dark-mode .chat-listbar {
  background: var(--dark-bg-secondary) !important;
  min-height: 100%;
}

/* Área vacía/espacio restante */
body.dark-mode .chat-leftbar::after,
body.dark-mode .tab-pane::after {
  background: var(--dark-bg-primary) !important;
}

/* Content card en settings */
body.dark-mode .content-card {
  background: var(--dark-bg-secondary) !important;
  border-radius: 8px;
  min-height: 100%;
}

/* Chat settingbar y left body */
body.dark-mode .chat-settingbar,
body.dark-mode .chat-left-body {
  background: var(--dark-bg-primary) !important;
}

/* Chat userlist en settings */
body.dark-mode .chat-userlist {
  background: var(--dark-bg-primary) !important;
}

/* Asegurar que todo el HTML tenga fondo oscuro */
html {
  background: var(--dark-bg-primary);
}

body.dark-mode,
body.dark-mode html {
  background: var(--dark-bg-primary) !important;
}

/* Cualquier elemento con fondo blanco por defecto */
body.dark-mode div {
  background-color: inherit;
}

/* Específicamente para el área debajo del contenido */
body.dark-mode .ez-body > * {
  background: var(--dark-bg-primary) !important;
}

body.dark-mode .ez-body .chat-userlist {
  background: var(--dark-bg-primary) !important;
}

body.dark-mode .ez-body .chat-settingbar {
  background: var(--dark-bg-primary) !important;
}

body.dark-mode .ez-body .chat-left-body {
  background: var(--dark-bg-primary) !important;
}

body.dark-mode .ez-body .row {
  background: var(--dark-bg-primary) !important;
}