/* b_ui/static/b_ui/css/modal_style.css
   Dark modal controls + readable dropdowns (white text on dark bg)
   with a clear border to show where the menu ends. */

:root {
  --gl-modal-bg: #2b3035;      /* bootstrap-ish dark */
  --gl-modal-bg-2: #1f2327;    /* slightly darker for menus/options */
  --gl-modal-text: #f8f9fa;    /* near-white */
  --gl-modal-border: #495057;  /* subtle gray */
  --gl-modal-shadow: 0 .5rem 1rem rgba(0,0,0,.35);
}

/* Inputs & selects inside any Bootstrap modal */
.modal .form-select,
.modal select,
.modal .form-control,
.modal textarea,
.modal input[type="text"],
.modal input[type="search"],
.modal input[type="url"],
.modal input[type="email"],
.modal input[type="number"] {
  background-color: var(--gl-modal-bg) !important;
  color: var(--gl-modal-text) !important;
  border-color: var(--gl-modal-border) !important;
}

/* Focus ring stays visible on dark bg */
.modal .form-select:focus,
.modal .form-control:focus,
.modal textarea:focus,
.modal input:focus {
  border-color: #0d6efd !important; /* primary */
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25) !important;
}

/* Autocomplete/Select dropdown menu — add a visible border + radius */
.modal .dropdown-menu,
.modal [data-card-autocomplete] + .dropdown-menu {
  background-color: var(--gl-modal-bg-2);
  color: var(--gl-modal-text);
  border: 1px solid var(--gl-modal-border) !important;
  border-radius: .5rem !important;
  box-shadow: var(--gl-modal-shadow);
  overflow: hidden;           /* keep rounded corners on the list */
  margin-top: .25rem;         /* small gap below input */
  padding: .25rem 0;          /* compact vertical rhythm */
  z-index: 1080;              /* above modal content if needed */
}

.modal .dropdown-item { color: var(--gl-modal-text); }
.modal .dropdown-item:hover,
.modal .dropdown-item:focus {
  background-color: #0d6efd;
  color: #fff;
}

/* Try to style the native <select> option list (Chrome/Edge honor this) */
.modal select option,
.modal select optgroup {
  background-color: var(--gl-modal-bg-2);
  color: var(--gl-modal-text);
}

/* Ensure the modal content itself prefers dark UI colors */
.modal .modal-content {
  color-scheme: dark;
}