.dark-mode {
  background-color: #1e1e2d;
  color: #f8f9fa;
}
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: #f8f9fa;
}
.dark-mode .navbar {
  background-color: #111827 !important;
  border-bottom: 1px solid #2d2d3b;
}
.dark-mode .navbar .nav-link,
.dark-mode .navbar .navbar-brand {
  color: #f8f9fa !important;
}
.dark-mode .sidebar {
  background-color: #111827 !important;
}
.dark-mode .sidebar .nav-link {
  color: #d1d5db;
}
.dark-mode .sidebar .nav-link.active {
  background-color: #2563eb;
  color: #fff !important;
}
.dark-mode .card {
  background-color: #2c2c3b;
  border-color: #444;
  color: #f8f9fa;
}
.dark-mode .card-header,
.dark-mode .card-footer {
  border-color: #444;
}
.dark-mode table {
  color: #f8f9fa;
  border-color: #1e1e2d;
}
.dark-mode table thead {
  background-color: #2c2c3b; 
}
.dark-mode table thead th {
    border-color: #2c2c3b !important;
}
.dark-mode table tbody tr {
  background-color: #1e1e2d;
}
.dark-mode table tbody tr:nth-child(even) {
  background-color: #252535;
}
.dark-mode table tbody tr:hover {
  background-color: #33334a;
  color: inherit
}
.dark-mode .btn {
  border: none;
}
.dark-mode .btn-primary {
  background-color: #4f46e5;
  color: #fff;
}
.dark-mode .btn-secondary {
  background-color: #6b7280;
  color: #fff;
}
.dark-mode .btn-outline-primary {
  border: 1px solid #4f46e5;
  color: #4f46e5;
}
.dark-mode .btn-outline-primary:hover {
  background-color: #4f46e5;
  color: #fff;
}
.dark-mode .form-control,
.dark-mode .form-select {
  background-color: #1e1e2d;
  border-color: #999;
  color: #f8f9fa;
}
.dark-mode .form-control::placeholder {
  color: #9ca3af;
}
.dark-mode a {
  color: #60a5fa;
}
.dark-mode a:hover {
  color: #93c5fd;
}
.dark-mode .modal-content {
  background-color: #2c2c3b;
  color: #f8f9fa;
  border: 1px solid #444;
}
.dark-mode .modal-header,
.dark-mode .modal-footer {
  border-color: #444;
}
.dark-mode .modal-title {
  color: #f8f9fa;
}
.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.dark-mode .dropdown-menu {
  background-color: #2c2c3b;
  border-color: #444;
  color: #f8f9fa;
}
.dark-mode .dropdown-item {
  color: #f8f9fa;
}
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
  background-color: #374151;
  color: #fff;
}
.dark-mode .alert {
  background-color: #6b7280;
  border-color: #444;
  color: #f8f9fa;
}
.dark-mode .alert-primary {
  background-color: #3730a3;
  border-color: #4f46e5;
  color: #fff;
}
.dark-mode .alert-success {
  background-color: #14532d;
  border-color: #22c55e;
  color: #d1fae5;
}
.dark-mode .alert-danger {
  background-color: #7f1d1d;
  border-color: #ef4444;
  color: #fee2e2;
}
.dark-mode .alert-warning {
  background-color: #78350f;
  border-color: #f59e0b;
  color: #fef3c7;
}
.dark-mode .alert-info {
  background-color: #0c4a6e;
  border-color: #3b82f6;
  color: #dbeafe;
}
.dark-mode .badge {
  color: #111;
}
.dark-mode .badge.bg-primary { background-color: #4f46e5 !important; }
.dark-mode .badge.bg-success { background-color: #22c55e !important; }
.dark-mode .badge.bg-danger  { background-color: #ef4444 !important; }
.dark-mode .badge.bg-warning { background-color: #f59e0b !important; color: #111; }
.dark-mode .badge.bg-info    { background-color: #3b82f6 !important; }
.dark-mode .tooltip-inner {
  background-color: #2c2c3b;
  color: #f8f9fa;
  border: 1px solid #444;
}
.dark-mode .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.dark-mode .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #2c2c3b;
}
.dark-mode .tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.dark-mode .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #2c2c3b;
}
.dark-mode .progress {
  background-color: #2c2c3b;
}
.dark-mode .progress-bar {
  background-color: #4f46e5;
  color: #fff;
}
.dark-mode .chart-container {
  background-color: #1e1e2d;
}
.dark-mode canvas {
  background-color: transparent !important;
}
.dark-mode .list-group-item {
    background-color: transparent;
}
.dark-mode .reportGraph {
    background-color: #111827 ;
}
.dark-mode .form-check-input {
    background-color: #2c2c3b;  
}
.dark-mode .form-check-input:checked {
    background-color: #4f46e5;   
}
.dark-mode .input-group-text {
  background-color: transparent;
}
.dark-mode .rs__control {
  background: #1e1e2d;
  color: #fff;
  border-color: #999;
  cursor: pointer;
}
.dark-mode .rs__menu {
  background: #1e1e2d;
}
.dark-mode .rs__option {
  background: #1e1e2d;
  color: #fff;
  cursor: pointer;
}
.dark-mode .rs__option--is-focused {
  background: #333;
  color: #fff;
}
.dark-mode .rs__single-value {
  background: #1e1e2d;
  color: #fff;
}
.dark-mode .rs__input,
.dark-mode .rs__value-container
.dark-mode .rs__input-container {
  color: #fff!important;
}
.dark-mode .rs--is-disabled,
.dark-mode .form-control:disabled, 
.dark-mode .form-control[readonly] {
  opacity: 0.6;
  background-color: #2c2c3b;
}
.dark-mode .nav-tabs .nav-link {
  color: #fff;
  border-color: #fff;
  background-color: #1e1e2d;
}
.dark-mode .nav-tabs .nav-link.active {
  color: #fff;
  border-color: #fff;
  background-color: #4f46e5;
}
.dark-mode .datepicker-picker,
.dark-mode .datepicker-controls .button {
  background: #1e1e2d;
  color: #fff;
}
.dark-mode .datepicker-header .datepicker-controls .button:hover {
  background-color:#4f46e5;
}
.dark-mode .datepicker-cell:not(.disabled):hover {
  color: #4f46e5;
}
.dark-mode .bg-secondary {
  background-color: #2c2c3b !important;
}
.dark-mode .page-link {
  border-color: #555;
  background-color: #2c2c3b; 
}
.dark-mode .page-item.active .page-link {
  background-color: #1e1e2d;
  border-color: #555
}
.dark-mode .ct-series-a .ct-point, 
.dark-mode .ct-series-a .ct-line, 
.dark-mode .ct-series-a .ct-bar, 
.dark-mode .ct-series-a .ct-slice-donut {
  stroke: #4f46e5;
}
.dark-mode .ct-series-a .ct-slice-pie, 
.dark-mode .ct-series-a .ct-slice-donut-solid, 
.dark-mode .ct-series-a .ct-area {
  fill: #000;
}
.dark-mode .ct-grid {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1px;
  stroke-dasharray: 2px;
}
.dark-mode .form-select {
  color: #98a1b5;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.dark-mode .form-select:hover {
  background-color: #111827;
}
.dark-mode .was-validated .form-select:valid, 
.dark-mode .form-select.is-valid,
.dark-mode .was-validated .form-select:invalid, 
.dark-mode .form-select.is-invalid,
.dark-mode .dataTable-selector {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.dark-mode .spanChatRow,
.dark-mode .spanChatRow ol li,
.dark-mode .spanChatRow ul li,
.dark-mode .spanChatRow h1,
.dark-mode .spanChatRow h2,
.dark-mode .spanChatRow h3,
.dark-mode .divDefaultMessage {
  color: #4f46e5;
}
.dark-mode textarea.form-control:hover {
  background-color: #4f46e5;
  transition: background-color 0.2s ease-in-out, background-position 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.dark-mode textarea.form-control:hover::placeholder {
  color:#fff
}

.dark-mode .text-user {
  color: #fff;
}

.dark-mode .text-ai {
  color: #4f46e5;
}