Fix Autocomplete Component styling with UI Colors for dark mode (#12443)

* Fix Reports/Block inventory autocomplete select fields dark mode contrast colors
Followed color variables of default UI controls as possible.

* Style input text inside autocomplete select component for dark mode to an accesibility-friendly contrast.

* Remove input element outline

network-api/networkapi/wagtailcustomization/static/css/admin.css

@@ -58,3 +58,48 @@ fieldset ul li div label {
 .required .field > label::after {
   display: inline-block !important;
 }
+
+/* Fix select2 dropdown autocomplete input field low contrast color scheme on dark mode */
+@media (prefers-color-scheme: dark) {
+  #wagtail .select2 .select2-selection {
+    color: var(--w-color-text-context);
+    background-color: var(--w-color-surface-field);
+    border-color: var(--w-color-border-field-default);
+    border-radius: 0.3125rem;
+  }
+  #wagtail .select2-container .select2-results .select2-results__options {
+    background-color: var(--w-color-surface-field);
+  }
+  /* Hover/Focus; Important for accesibility */
+  #wagtail .select2 .select2-selection:hover,
+  #wagtail .select2 .select2-selection:focus {
+    border-color: var(--w-color-border-field-hover);
+  }
+  /* Options */
+  #wagtail .select2-container .select2-results .select2-results__option {
+    color: var(--w-color-text-context);
+    background-color: var(--w-color-surface-field);
+  }
+  /* Selected/hover option */
+  #wagtail
+    .select2-container
+    .select2-results
+    .select2-results__option--highlighted {
+    color: var(--w-color-text-label-menus-active);
+    background-color: var(--w-color-surface-button-default);
+  }
+  /* Input element */
+  #wagtail
+    .select2-container--default
+    .select2-search--inline
+    .select2-search__field {
+    color: var(--w-color-text-context);
+  }
+  /* Focus input outline */
+  #wagtail
+    .select2-container--default
+    .select2-search--inline
+    .select2-search__field:focus-visible {
+    outline: none !important;
+  }
+}