/* === GENERAL BUTTON STYLES === */
.btn {
  border: 2px solid #6e8cfa;
  background-color: white;
  color: #6e8cfa;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}

/* Raincoat button */
.raincoat {
  border-color: #6e8cfa;
  color: #6e8cfa;
}

.raincoat:hover {
  background-color: #6e8cfa;
  color: white;
}

/* === CARD STYLES === */
.card-header-color {
  background-color: #6e8cfa;
  color: white;
}

.card-border-color {
  border: 2px solid #6e8cfa;
}

/* === DARK MODE OVERRIDES === */
[data-bs-theme='dark'] body {
  background-color: #121212;
  color: white;
}

/* Cards */
[data-bs-theme='dark'] .card {
  background-color: #1e1e1e;
  color: white;
  border-color: #6e8cfa;
}

[data-bs-theme='dark'] .card-header-color {
  background-color: #6e8cfa;
  color: white;
}

[data-bs-theme='dark'] .card-border-color {
  border-color: #6e8cfa;
}

/* Buttons */
[data-bs-theme='dark'] .btn {
  background-color: transparent;
  color: #6e8cfa;
  border-color: #6e8cfa;
}

[data-bs-theme='dark'] .btn:hover {
  background-color: #6e8cfa;
  color: white;
}

[data-bs-theme='dark'] .raincoat {
  background-color: transparent;
  color: #6e8cfa;
  border-color: #6e8cfa;
}

[data-bs-theme='dark'] .raincoat:hover {
  background-color: #6e8cfa;
  color: white;
}

/* === Dash DataTable in Dark Mode === */
[data-bs-theme='dark'] .dash-table-container .dash-spreadsheet-container {
  background-color: #1e1e1e;
  color: white;
  border-color: #444;
}

[data-bs-theme='dark'] .dash-table-container .dash-header {
  background-color: #2a2a2a;
  color: white;
  border-color: #444;
}

[data-bs-theme='dark'] .dash-table-container .dash-cell {
  background-color: #1e1e1e;
  color: white;
  border-color: #444;
}

/* === Dash Dropdowns in Dark Mode === */
[data-bs-theme='dark'] .Select-control,
[data-bs-theme='dark'] .Select-menu,
[data-bs-theme='dark'] .Select-menu-outer {
  background-color: #1e1e1e;
  color: white;
  border-color: #444;
}

[data-bs-theme='dark'] .Select--single > .Select-control .Select-value,
[data-bs-theme='dark'] .Select-value-label {
  background-color: #1e1e1e;
  color: white !important;
}

[data-bs-theme='dark'] .Select-option {
  background-color: #1e1e1e;
  color: white;
}

[data-bs-theme='dark'] .Select-option:hover {
  background-color: #1e1e1e;
  color: white;
}

[data-bs-theme='dark'] .Select-option.is-selected {
  background-color: #6e8cfa;
  color: white;
}

[data-bs-theme='dark'] .is-focused:not(.is-open) > .Select-control {
  border-color: #6e8cfa;
  background-color: #1e1e1e;
  box-shadow: none;
}

[data-bs-theme='dark'] .Select-placeholder {
  color:#1e1e1e;
}