/* Project-specific Bootstrap overrides go here. */

.vessel-arrow-icon {
  background: none;
  border: none;
}

/*
 * Bootstrap's .table-danger is a fixed light-pink/black combo (#f8d7da bg, #000 text) that never adapts
 * for dark mode - there's no [data-bs-theme=dark] override for table variant colors upstream. But
 * .text-muted forces its color with !important to var(--bs-secondary-color), which in dark mode resolves
 * to a near-white gray - unreadable once it lands on that still-light-pink row. Pin muted text inside a
 * danger row to a dark, low-opacity black instead, matching the row's own theme-invariant text color.
 */
.table-danger .text-muted {
  color: rgba(0, 0, 0, 0.65) !important;
}
: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 */
}

/*
 * Swatch showing a vessel's map color on its card (next to the name), so the color is visible even when
 * the card shows a photo instead of the color block. Sized in em so it scales with the surrounding text;
 * the grey ring keeps very light or very dark colors visible against either theme's card background.
 */
.vessel-color-dot {
  display: inline-block;
  width: .85em;
  height: .85em;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, .6);
}

/* Lets a flex child shrink below its content width, so a long name inside it truncates instead of overflowing (Bootstrap 5.3 has no min-width utility). */
.min-w-0 {
  min-width: 0;
}