:root {
  /* Shared tokens (fallbacks) */
  /* Force dropdowns to be solid dark (theme tokens can be translucent "glass") */
  --nt-dropdown-bg: #0b0f14;
  --nt-dropdown-border: var(--nt-border, rgba(255, 255, 255, 0.12));
  --nt-dropdown-text: var(--nt-text-primary, #ffffff);
  --nt-dropdown-text-muted: var(--nt-text-secondary, rgba(255, 255, 255, 0.8));

  /* Hint the browser to render native form controls in dark mode where supported */
  color-scheme: dark;
}

/* Bootstrap dropdown menus */
.dropdown-menu {
  background-color: var(--nt-dropdown-bg) !important;
  color: var(--nt-dropdown-text) !important;
  border: 1px solid var(--nt-dropdown-border) !important;
}

.dropdown-item {
  color: var(--nt-dropdown-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--nt-glass-bg-hover, rgba(255, 255, 255, 0.06)) !important;
  color: var(--nt-dropdown-text) !important;
}

.dropdown-divider {
  border-top-color: var(--nt-dropdown-border) !important;
}

/* Native <select> dropdowns (best-effort; browser support varies) */
select.form-select,
select.form-control,
select {
  background-color: var(--nt-bg-card, rgba(0, 0, 0, 1));
  color: var(--nt-dropdown-text);
}

/* Focus states (Bootstrap sets a light background by default) */
.form-control:focus,
.form-select:focus,
select:focus {
  /* Override theme focus background (app.min.css sets a light rgba background on focus). */
  background: var(--nt-glass-bg, rgba(0, 0, 0, 1)) !important;
  background-color: transparent !important;
  color: var(--nt-dropdown-text) !important;
  border-color: var(--nt-border-light, rgba(255, 255, 255, 0.12)) !important;
}

select option,
select optgroup {
  background-color: var(--nt-dropdown-bg);
  color: var(--nt-dropdown-text);
}

/* Selectize (used heavily in this repo) */
.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input {
  background: var(--nt-bg-card, rgba(255, 255, 255, 0.03)) !important;
  color: var(--nt-dropdown-text) !important;
  border-color: var(--nt-dropdown-border) !important;
}

/* Selectize + Bootstrap form styles: avoid the "double border" by making the wrapper carry the border,
   and making the inner .selectize-input borderless. This matches the "right" screenshot. */
.selectize-control.form-select,
.selectize-control.form-control {
  width: 100%;
  background: var(--nt-bg-card, rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid var(--nt-dropdown-border) !important;
  border-radius: 0.75rem !important;
  padding: 0 !important;
}

.selectize-control.form-select .selectize-input,
.selectize-control.form-control .selectize-input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0.55rem 0.9rem !important;
  border-radius: 0.75rem !important;
}

.selectize-control.form-select:focus-within,
.selectize-control.form-control:focus-within {
  border-color: var(--nt-cyan, #00f0c0) !important;
  box-shadow: 0 0 0 3px rgba(0, 240, 192, 0.12) !important;
}

/* Fix stacking-context issues: app.min.css sets `.selectize-input { z-index: 1; }`,
   which can cause dropdowns to render *behind* fields below inside modals. */
.selectize-control,
.selectize-input {
  z-index: auto !important;
}

.selectize-input.focus {
  /* Keep focus styling consistent with our theme (and avoid the heavy inset shadows from selectize.css). */
  box-shadow: none !important;
}

.selectize-dropdown,
.selectize-dropdown.form-control {
  background: var(--nt-dropdown-bg) !important;
  border-color: var(--nt-dropdown-border) !important;
  color: var(--nt-dropdown-text) !important;
  /* Ensure Selectize dropdown overlays modal fields (prevents click-through selecting the row below) */
  z-index: 20000 !important;
  /* Avoid "zoom from the bottom" – keep dropdown open animation short and simple */
  transform: none !important;
  animation: dropdownFadeIn 0.08s ease-out !important;
}

.selectize-dropdown .option,
.selectize-dropdown [data-selectable] {
  color: var(--nt-dropdown-text) !important;
  background: transparent !important;
}

.selectize-dropdown .active,
.selectize-dropdown [data-selectable].active {
  background: var(--nt-glass-bg-hover, rgba(255, 255, 255, 0.06)) !important;
  color: var(--nt-dropdown-text) !important;
}

.selectize-dropdown .optgroup-header {
  background: transparent !important;
  color: var(--nt-dropdown-text-muted) !important;
}

/* Toasts should always sit above the top bar */
.toast-container,
.toast,
#toaster {
  z-index: 30000 !important;
}

/* Remove the subtle "lift on hover" for glass cards – keep the highlight without moving layout */
.card:hover {
  transform: none !important;
}