/* Dark Mode overall */
.dark-mode {
  background-color: #2c2c2c;  /* overall page background */
  color: #f8f9fa;             /* light text */
}

/* If you use a navbar, override background in dark mode */
.dark-mode .navbar {
  background-color: #333 !important;
  color: #f8f9fa;
}

/* Table backgrounds or container backgrounds */
.dark-mode .table, 
.dark-mode .table-bordered, 
.dark-mode .table-sm, 
.dark-mode .card, 
.dark-mode .list-group-item {
  background-color: #444 !important;
  color: #f8f9fa;
  border-color: #555 !important;
}

/* If you have read-only fields or form controls */
.dark-mode .form-control {
  background-color: #555;
  color: #f8f9fa;
  border: 1px solid #666;
}

/* Temp highlight in dark mode => a slightly lighter gray */
.dark-mode .temp-highlight {
  background-color: #555 !important;  /* or #4a4a4a */
  color: #fff !important;
}

/* TRN highlight in dark mode => an orange-brown shade */
.dark-mode .trn-highlight {
  background-color: #6f4f1f !important; /* or any darker orange */
  color: #fff !important;
}

/* If you have a login modal => make it dark */
.dark-mode .modal-content {
  background-color: #3a3a3a;
  color: #f8f9fa;
  border: 1px solid #555;
}
.dark-mode .modal-header,
.dark-mode .modal-footer {
  border-color: #555;
}
.dark-mode .modal-title {
  color: #fff;
}
.dark-mode .close {
  color: #fff;
}

/* Buttons if needed in dark mode */
.dark-mode .btn {
  color: #fff;
  background-color: #444;
  border-color: #666;
}
.dark-mode .btn:hover {
  background-color: #555;
}