Replace native select dropdowns with custom styled dropdowns featuring improved visual consistency, dark mode support, and enhanced accessibility with ARIA attributes

frontend/style.css

@@ -288,7 +288,7 @@ a:hover {
   padding: 4px 22px 4px 0;
   border: none;
   border-radius: 0;
-  background: transparent;
+  background: inherit;
   color: var(--text-primary);
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.78rem;
@@ -296,6 +296,22 @@ a:hover {
   outline: none;
   cursor: pointer;
   transition: color 160ms ease;
+  color-scheme: dark;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.menu-select option {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .menu-select,
+[data-theme="dark"] .menu-select option {
+  background-color: #1e1e1e;
+  color: #e0e0e0;
 }
 .menu-select:hover, .menu-select:focus {
   color: var(--accent);
@@ -305,7 +321,126 @@ a:hover {
   margin-top: 1px;
 }
 
-/* --- Main body --- */
+/* Force dark mode on all select elements */
+select {
+  color-scheme: dark;
+}
+
+[data-theme="dark"] select,
+[data-theme="dark"] select option {
+  background-color: #161b22 !important;
+  color: #e6edf3 !important;
+}
+
+[data-theme="light"] select,
+[data-theme="light"] select option {
+  background-color: #f6f8fa !important;
+  color: #1f2328 !important;
+}
+
+/* Custom Dropdown Styles */
+.custom-dropdown {
+  position: relative;
+  width: 100%;
+}
+
+.custom-dropdown-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: border-color 200ms ease, background 200ms ease;
+}
+
+.custom-dropdown-trigger:hover {
+  border-color: var(--accent);
+  background: var(--bg-hover);
+}
+
+.custom-dropdown-trigger[aria-expanded="true"] {
+  border-color: var(--accent);
+}
+
+.custom-dropdown-selected {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.custom-dropdown-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 1000;
+  list-style: none;
+  padding: 4px;
+  margin: 0;
+}
+
+.custom-dropdown.open .custom-dropdown-menu {
+  display: block;
+}
+
+.custom-dropdown-option {
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8rem;
+  color: var(--text-primary);
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.custom-dropdown-option:hover,
+.custom-dropdown-option:focus {
+  background: var(--bg-hover);
+  color: var(--accent);
+}
+
+.custom-dropdown-option.selected {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--accent);
+}
+
+/* Sidebar dropdown specific */
+.sidebar-dropdown {
+  padding: 0 16px 12px;
+}
+
+.sidebar-dropdown .custom-dropdown-trigger {
+  background: var(--bg-sidebar);
+}
+
+/* Menu list dropdown specific */
+.menu-list-select-row .custom-dropdown {
+  margin-top: 4px;
+}
+
+.menu-list-select-row .custom-dropdown-trigger {
+  padding: 6px 10px;
+  font-size: 0.78rem;
+  background: var(--bg-primary);
+}
+
 .main-body {
   display: flex;
   flex: 1;
@@ -1566,7 +1701,18 @@ body.resizing-v {
   }
 
    .sidebar-quick-select {
-     padding: 0 12px 12px;
+     padding: 0 16px 12px;
+   }
+
+   .sidebar-quick-select select {
+     color-scheme: dark;
+     background-color: var(--bg-secondary);
+     color: var(--text-primary);
+   }
+
+   [data-theme="dark"] .sidebar-quick-select select {
+     background-color: #1e1e1e;
+     color: #e0e0e0;
    }
 
    .sidebar-panel-toggle {