/* =====================================================
   Ecnexis Dark Mode - Unified & Variable Based
===================================================== */
:root {
    /* Base backgrounds */
    --ecx-bg-main: #0e1117;
    --ecx-bg-surface: #151a23;
    --ecx-bg-surface-alt: #1a2035;
    --ecx-bg-surface-deep: #1f283e;
    --ecx-bg-hover: #171e2f;
    --ecx-sidebar-bg: #0e1117;
    --ecx-header-bg: #0e1117;
    --ecx-bg-modal: #1c2331;

    /* Text */
    --ecx-text-primary: #e6eaf2;
    --ecx-text-secondary: rgba(230, 234, 242, 0.85);
    --ecx-text-muted: #9aa4b2;
    --ecx-text-soft: rgba(169, 175, 187, 0.82);
    --ecx-text-white: #ffffff;

    /* Borders & separators */
    --ecx-border-soft: rgba(181, 181, 181, 0.1);
    --ecx-border-medium: #2f374b;
    --ecx-border-strong: #293247;

    /* Brand & Feedback */
    --ecx-primary: #01c8ef;
    --ecx-secondary: #172f78;
    --ecx-shadow-header: #121727;
}

/* Base Body */
body[data-background-color="dark"] {
    background: var(--ecx-bg-main) !important;
    color: var(--ecx-text-secondary) !important;
}

/* =====================================================
   Typography & Headers
===================================================== */
body[data-background-color="dark"] .main-panel h1,
body[data-background-color="dark"] .main-panel h2,
body[data-background-color="dark"] .main-panel h3,
body[data-background-color="dark"] .main-panel h4,
body[data-background-color="dark"] .main-panel h5,
body[data-background-color="dark"] .main-panel h6,
body[data-background-color="dark"] .main-panel .h1,
body[data-background-color="dark"] .main-panel .h2,
body[data-background-color="dark"] .main-panel .h3,
body[data-background-color="dark"] .main-panel .h4,
body[data-background-color="dark"] .main-panel .h5,
body[data-background-color="dark"] .main-panel .h6,
body[data-background-color="dark"] .main-panel label,
body[data-background-color="dark"] .card-title,
body[data-background-color="dark"] .badge-count {
    color: var(--ecx-text-primary) !important;
}

body[data-background-color="dark"] .text-muted,
body[data-background-color="dark"] .page-category,
body[data-background-color="dark"] .card-category {
    color: var(--ecx-text-muted) !important;
}

body[data-background-color="dark"] .main-panel p,
body[data-background-color="dark"] .main-panel input[type="file"],
body[data-background-color="dark"] .page-title,
body[data-background-color="dark"] .breadcrumbs li a {
    color: var(--ecx-text-soft) !important;
}

/* =====================================================
   Cards & Containers
===================================================== */
/* Transparent Cards */
body[data-background-color="dark"] .card:not(.card-primary, .card-secondary, .card-info, .card-success, .card-warning, .card-danger, .card-list-messages),
body[data-background-color="dark"] .row-card-no-pd,
body[data-background-color="dark"] .card-list-messages {
    background: transparent !important;
}

/* Colored/Surface Cards */
body[data-background-color="dark"] .card-pricing2,
body[data-background-color="dark"] .accordion .card,
body[data-background-color="dark"] .conversations .message-header {
    background: var(--ecx-bg-surface-alt) !important;
}

/* Card States (Primary, Success, etc) */
body[data-background-color="dark"] .card-primary, 
body[data-background-color="dark"] .card-secondary, 
body[data-background-color="dark"] .card-success, 
body[data-background-color="dark"] .card-danger, 
body[data-background-color="dark"] .card-warning, 
body[data-background-color="dark"] .card-info {
    color: var(--ecx-text-white) !important;
}

body[data-background-color="dark"] .card-primary .card-title,
body[data-background-color="dark"] .card-primary p,
body[data-background-color="dark"] .card-primary i {
    color: var(--ecx-text-white) !important;
}

/* =====================================================
   Tables, Borders & Dividers
===================================================== */
body[data-background-color="dark"] .table td,
body[data-background-color="dark"] .table th,
body[data-background-color="dark"] .breadcrumbs,
body[data-background-color="dark"] .separator-dashed,
body[data-background-color="dark"] .separator-solid,
body[data-background-color="dark"] .separator-dot,
body[data-background-color="dark"] .list-group .list-group-item,
body[data-background-color="dark"] .page-divider,
body[data-background-color="dark"] .card .card-header,
body[data-background-color="dark"] .card .card-footer,
body[data-background-color="dark"] .nav-line,
body[data-background-color="dark"] .activity-feed .feed-item {
    border-color: var(--ecx-border-soft) !important;
}

/* =====================================================
   Forms & Navigation
===================================================== */
body[data-background-color="dark"] .form-control,
body[data-background-color="dark"] .form-select,
body[data-background-color="dark"] .form-group-default,
body[data-background-color="dark"] .select2-container--bootstrap .select2-selection,
body[data-background-color="dark"] select option {
    background-color: var(--ecx-bg-surface-alt) !important;
    color: var(--ecx-text-white) !important;
    border-color: var(--ecx-border-medium) !important;
}

body[data-background-color="dark"] .input-group-text {
    border-color: var(--ecx-border-medium) !important;
    background-color: var(--ecx-bg-surface-deep) !important;
    color: var(--ecx-text-white) !important;
}

body[data-background-color="dark"] .nav-pills .nav-link:not(.active) {
    background: var(--ecx-bg-surface-alt) !important;
    color: #a0aaac !important;
    border-color: #20263d !important;
}

/* =====================================================
   Timeline & Lists
===================================================== */
body[data-background-color="dark"] .timeline:before,
body[data-background-color="dark"] .progress {
    background-color: var(--ecx-border-soft) !important;
}

body[data-background-color="dark"] .list-group-item.unread,
body[data-background-color="dark"] .mail-wrapper .email-list-item.unread {
    background: #151a2b !important;
}

body[data-background-color="dark"] .mail-wrapper .email-list-item:hover {
    background: var(--ecx-bg-hover) !important;
}

/* =====================================================
   Footer & Misc
===================================================== */
body[data-background-color="dark"] .footer {
    border-top: 1px solid var(--ecx-border-strong) !important;
    background: var(--ecx-bg-main) !important;
}

body[data-background-color="dark"] .main-header, body[data-background-color="dark"] .main-header .navbar {
    background: var(--ecx-bg-main) !important;
    box-shadow: 0px 0px 5px var(--ecx-shadow-header) !important;
}

body[data-background-color="dark"] .jvm-zoom-btn {
    background: #fff !important;
    color: #292929 !important;
}

.logo-header[data-background-color="dark"] {
  background: var(--ecx-header-bg) !important;}

body[data-background-color="dark"] .navbar .navbar-header {
  background: var(--ecx-header-bg) !important;}

body[data-background-color="dark"] .main-header .navbar .topbar-icon a {
    color: var(--color-muted) !important;
}


/* =====================================================
   Sidebar (Navegación Lateral)
===================================================== */
.sidebar[data-background-color="dark"] {
    background: var(--ecx-sidebar-bg) !important;
    color: var(--ecx-text-muted) !important;
}

.sidebar[data-background-color="dark"] .user {
    border-color: var(--ecx-border-soft) !important;
}

.sidebar[data-background-color="dark"] .user .info a > span {
    color: var(--ecx-text-sidebar) !important;
}

.sidebar[data-background-color="dark"] .user .info a > span .user-level {
    color: #8d9498 !important;
}

/* Sidebar Nav Items */
.sidebar[data-background-color="dark"] .nav > .nav-item a {
    color: var(--ecx-text-sidebar) !important;
}

.sidebar[data-background-color="dark"] .nav .nav-item > a:hover, 
.sidebar[data-background-color="dark"] .nav .nav-item > a:focus, 
.sidebar[data-background-color="dark"] .nav .nav-item.submenu,
.sidebar[data-background-color="dark"] .nav .nav-item.active > a {
    background: var(--ecx-nav-active) !important;
}

.sidebar[data-background-color="dark"] .nav .nav-item.submenu > a {
    background: transparent !important;
}

/* Sidebar Active Text States */
.sidebar[data-background-color="dark"] .nav > .nav-item.active > a p,
.sidebar[data-background-color="dark"] .nav > .nav-item.active a:hover p,
.sidebar[data-background-color="dark"] .nav > .nav-item.active a:focus p {
    color: var(--ecx-text-white) !important;
}

.sidebar[data-background-color="dark"] .nav > .nav-item a:hover p, 
.sidebar[data-background-color="dark"] .nav > .nav-item a:focus p, 
.sidebar[data-background-color="dark"] .nav > .nav-item a[data-toggle="collapse"][aria-expanded="true"] p {
    color: var(--ecx-text-sidebar) !important;
}

/* Custom Scrollbar Sidebar */
.sidebar[data-background-color="dark"] .scrollbar-inner > .scroll-element .scroll-bar {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Más discreto que el blanco puro */
}

.sidebar[data-background-color="dark"] .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar, 
.sidebar[data-background-color="dark"] .scrollbar-inner > .scroll-element:hover .scroll-bar {
    background-color: rgba(255, 255, 255, 0.4) !important;
}
.sidebar[data-background-color="dark"] .nav .nav-item.active > a {
    background: rgba(1, 200, 239, 0.15) !important; /* Usamos el azul primario con transparencia */
    border-radius: 5px !important;
    margin: 0 10px !important;
}
/* Texto e Icono del ítem activo */
.sidebar[data-background-color="dark"] .nav .nav-item.active > a p, 
.sidebar[data-background-color="dark"] .nav .nav-item.active > a i {
    color: var(--ecx-primary) !important; /* Cambiamos el gris oscuro por el azul brillante */
    font-weight: 600 !important;
}

/* Indicador lateral (si tu plantilla lo usa) */
.sidebar[data-background-color="dark"] .nav .nav-item.active > a:before {
    background: var(--ecx-primary) !important;
}

/* Hover para los ítems no activos para que no se pierdan */
.sidebar[data-background-color="dark"] .nav .nav-item:not(.active) > a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* =====================================================
   Modals Dark Mode
===================================================== */

body[data-background-color="dark"] .modal-content {
    background-color: var(--ecx-bg-modal) !important;
    border: 1px solid var(--ecx-border-medium) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body[data-background-color="dark"] .modal-header {
    border-bottom: 1px solid var(--ecx-border-soft) !important;
}

/* El modal-header con bg-danger debe mantener su color, 
   pero ajustamos el borde para que no desentone */
body[data-background-color="dark"] .modal-header.bg-danger {
    background-color: #d93544 !important; /* Un rojo un poco más oscuro y elegante */
    border-bottom: none !important;
}

body[data-background-color="dark"] .modal-body {
    color: var(--ecx-text-secondary) !important;
}

body[data-background-color="dark"] .modal-body strong {
    color: var(--ecx-text-white) !important;
}

body[data-background-color="dark"] .modal-footer {
    background-color: transparent;
    border-top: 1px solid var(--ecx-border-soft) !important;
}
body[data-background-color="dark"] .modal-footer .btn-secondary {
    background-color: var(--ecx-border-medium) !important;
    color: #fff !important;
    border: 1px solid var(--ecx-border-soft) !important;
}

/* Ajuste específico para los inputs dentro del modal */
body[data-background-color="dark"] .modal-content .form-control {
    background-color: var(--ecx-bg-surface-deep) !important;
    color: var(--ecx-text-white) !important;
    border-color: var(--ecx-border-medium) !important;
}

body[data-background-color="dark"] .modal-content .form-control:focus {
    border-color: var(--ecx-primary) !important;
    background-color: var(--ecx-bg-surface-alt) !important;
}

/* El botón cerrar (X) si lo hubiera */
body[data-background-color="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}


/* =====================================================
   Tables & DataTables Dark Mode
===================================================== */

/* Contenedor principal (neutraliza bg-white de tu div) */
body[data-background-color="dark"] .table-responsive.bg-white {
    background-color: var(--ecx-bg-surface) !important;
    border: 1px solid var(--ecx-border-soft) !important;
    color: var(--ecx-text-secondary) !important;
}

/* Tabla base */
body[data-background-color="dark"] .table {
    color: var(--ecx-text-secondary) !important;
    background-color: transparent !important;
}

/* Encabezado (neutraliza table-light) */
body[data-background-color="dark"] .table thead.table-light th {
    background-color: var(--ecx-bg-surface-deep) !important;
    color: var(--ecx-text-primary) !important;
    border-bottom: 2px solid var(--ecx-border-medium) !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
}

/* Celdas y filas */
body[data-background-color="dark"] .table td {
    border-color: var(--ecx-border-soft) !important;
    background-color: transparent;
}

/* Efecto Hover en filas */
body[data-background-color="dark"] .table-hover tbody tr:hover {
    background-color: var(--ecx-bg-hover) !important;
    color: var(--ecx-text-white) !important;
}

/* Ajuste para celdas con texto en negrita */
body[data-background-color="dark"] .table td.fw-semibold {
    color: var(--ecx-text-primary) !important;
}

/* =====================================================
   Badges (Estados de Verificación)
===================================================== */
/* Mantener el color de éxito pero ajustar brillo */
body[data-background-color="dark"] .badge.bg-success {
    background-color: #1a7e4d !important; 
    color: #e6ffed !important;
}

body[data-background-color="dark"] .badge.bg-info {
    background-color: #0d6efd !important;
    color: #f0f7ff !important;
}

body[data-background-color="dark"] .badge.bg-secondary {
    background-color: var(--ecx-border-medium) !important;
    color: var(--ecx-text-muted) !important;
}

/* =====================================================
   Pagination (Laravel Links)
===================================================== */
body[data-background-color="dark"] .pagination .page-link {
    background-color: var(--ecx-bg-surface-alt) !important;
    border-color: var(--ecx-border-medium) !important;
    color: var(--ecx-text-sidebar) !important;
}

body[data-background-color="dark"] .pagination .page-item.active .page-link {
    background-color: var(--ecx-primary) !important;
    border-color: var(--ecx-primary) !important;
    color: var(--ecx-bg-main) !important;
}

body[data-background-color="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--ecx-bg-main) !important;
    border-color: var(--ecx-border-soft) !important;
    color: var(--ecx-text-muted) !important;
}
body[data-background-color="dark"] .bg-light, body[data-background-color="dark"] .alert-info {
    background-color: var(--ecx-bg-surface-alt) !important;
    color: var(--ecx-text-primary) !important;
}
body[data-background-color="dark"] .btn-outline-primary {
    color: #a0aaac !important;
}
body[data-background-color="dark"] .ts-control,
body[data-background-color="dark"] #tomselect-1-ts-control {
    color: #fff !important;
}

body[data-background-color="dark"] .ts-dropdown-content, body[data-background-color="dark"] .ts-dropdown {
    background-color: var(--ecx-bg-main) !important;
    color: var(--ecx-text-secondary) !important;
    border: none !important;
    box-shadow: none !important;
}
body[data-background-color="dark"] .ts-dropdown-content .active {
    background-color: rgba(1, 200, 239, 0.15) !important;
    color: var(--ecx-text-secondary) !important;
}
body[data-background-color="dark"] .btn-secondary {
    background-color: var(--ecx-border-medium) !important;
    color: #fff !important;
}
body[data-background-color="dark"] .btn-outline-secondary {
    color: var(--ecx-text-secondary) !important;
}
body[data-background-color="dark"] .card {
    border: 1px solid !important;
}
body[data-background-color="dark"] .alert {
    background-color: var(--ecx-bg-main) !important;
}
body[data-background-color="dark"] .alert span[data-notify="title"] {
    color: var(--ecx-secondary) !important;
}
body[data-background-color="dark"] .dropdown-user {
    background-color: var(--ecx-bg-main) !important;
}
body[data-background-color="dark"] .dropdown-user li a {
    color: var(--color-muted) !important;
}
body[data-background-color="dark"] .dropdown-user li a:hover {
    background-color: var(--ecx-secondary) !important;
    color: var(--color-muted) !important;
}
body[data-background-color="dark"] .user-box h4{
    color: var(--ecx-secondary) !important;
}
body[data-background-color="dark"] .notification-dropdown {
    background-color: #121727 !important;
}