/* Project-specific Bootstrap overrides go here. */
:root[data-bs-theme="dark"] {
  /* Backgrounds */
  --bs-body-bg: #020617;
  --bs-body-color: #e7e9ee;

  --bs-secondary-bg: #161A2ABF;
  --bs-tertiary-bg: #161A2ABF;

  --bs-cognitive-teams-card-bg: #40445c5d;

  /* Borders */
  --bs-border-color: rgba(255, 255, 255, 0.12);

  /* Links / brand */
  --bs-link-color: #8ab4ff;
  --bs-link-hover-color: #a7c4ff;

  /* Cards / surfaces */
  --bs-card-bg: var(--bs-tertiary-bg);
  --bs-card-color: #e7e9ee;

  /* Optional: navbar */
  --bs-navbar-color: rgba(231, 233, 238, 0.85);
  --bs-navbar-hover-color: #e7e9ee;

  /* filters */
  --bs-filter-bg: rgba(255, 255, 255, 0.03);
  --bs-filter-border: rgba(255, 255, 255, 0.10);
  --bs-filter-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-filter-color: rgba(255, 255, 255, 0.78);
  --bs-filter-hover-color: rgba(255, 255, 255, 0.92);
}

:root[data-bs-theme="dark"] .filter-shell{
  background: linear-gradient(180deg, rgba(16,23,39,.95), rgba(8,12,22,.95));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

:root[data-bs-theme="dark"] .filter-pill{
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-filter-border);
  border-radius: 999px; /* match your pills */
  height: 40px;
  padding: 0 12px;
}

:root[data-bs-theme="dark"] .seg-btn{
  background-color: var(--bs-body-bg);
}
:root[data-bs-theme="dark"] .seg-btn:hover{
  color: rgba(255,255,255,.92);
}

:root[data-bs-theme="dark"] .search-input{
  background-color: var(--bs-body-bg);
  color: rgba(255,255,255);
}

:root[data-bs-theme="dark"] .filters-popover select.form-select{
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.10) !important;

  color-scheme: dark;  /* <- key */
}

:root[data-bs-theme="dark"] .filters-popover{
  color-scheme: dark;
}

/* make the select blend into the pill */
:root[data-bs-theme="dark"] .filter-pill select.form-select{
  border: none !important;
  color: var(--bs-filter-color);
  color-scheme: dark; /* key: asks browser for dark dropdown UI */
}

:root[data-bs-theme="dark"] .card, .bg-nav {
  background-color: var(--bs-secondary-bg);
}

:root[data-bs-theme="dark"] .form-check-input[type="checkbox"] {
  --bs-form-check-bg: #9ca3af67;
  --bs-form-check-border-color: #6b7280;
}

:root[data-bs-theme="dark"] .form-check-input[type="checkbox"]:checked {
  --bs-form-check-bg: #6b7280;
  --bs-form-check-border-color: #6b7280;
}

:root[data-bs-theme="dark"] .cognitive-secondary-bg {
  --bs-table-bg: var(--bs-secondary-bg);
  --bs-table-color: var(--bs-body-color);

  /* optional, but makes striped/hover look good */
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);

  background-color: var(--bs-secondary-bg); /* ensures wrapper is also the surface */
}

:root[data-bs-theme="dark"] .cognitive-teams-card-bg {
  background-color: var(--bs-cognitive-teams-card-bg); /* ensures wrapper is also the surface */
}