/* Shared palette for native selects and Bootstrap dropdowns. */
body {
  --dropdown-bg: #16213e;
  --dropdown-text: #f8f9fa;
  --dropdown-muted: #aab4ca;
  --dropdown-border: rgba(204,163,0,.4);
  --dropdown-hover: rgba(204,163,0,.16);
  --dropdown-selected-bg: #cca300;
  --dropdown-selected-text: #1a1a2e;
}
body.light-theme, body.light-mode {
  --dropdown-bg: #fff;
  --dropdown-text: #424a59;
  --dropdown-muted: #737d8e;
  --dropdown-border: #d8dde6;
  --dropdown-hover: #f1f3f6;
  --dropdown-selected-bg: #1a1a2e;
  --dropdown-selected-text: #fff;
}
body select {
  color-scheme: dark;
  background: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
  border: 1px solid var(--dropdown-border) !important;
  border-radius: 10px;
}
body.light-theme select, body.light-mode select { color-scheme: light; }
body select option, body select optgroup {
  background: var(--dropdown-bg); color: var(--dropdown-text);
}
body select option:checked {
  background: var(--dropdown-selected-bg); color: var(--dropdown-selected-text);
}
/* Render the picker in the page theme instead of the OS blue highlight. */
@supports (appearance: base-select) {
  body select:not([multiple]):not([size]),
  body select:not([multiple])[size="1"] { appearance: base-select; }
  body select:not([multiple]):not([size])::picker(select),
  body select:not([multiple])[size="1"]::picker(select) {
    appearance: base-select;
    background: var(--dropdown-bg); color: var(--dropdown-text);
    border: 1px solid var(--dropdown-border); border-radius: 10px;
    padding: 6px; margin-block: 6px; max-height: min(320px,50vh);
    overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.22);
    font-family: inherit;
  }
  body select option { padding: 10px 14px; border-radius: 6px; }
  body select option:is(:hover,:focus) {
    background: var(--dropdown-hover); color: var(--dropdown-text); outline: none;
  }
  body select option:checked,
  body select option:checked:is(:hover,:focus) {
    background: var(--dropdown-selected-bg); color: var(--dropdown-selected-text);
  }
  body select option:disabled { color: var(--dropdown-muted); opacity: .6; }
  body select::picker-icon { color: var(--accent-color,#cca300); }
  body select option::checkmark { color: inherit; }
}
body .dropdown-menu {
  background: var(--dropdown-bg) !important; color: var(--dropdown-text);
  border: 1px solid var(--dropdown-border) !important; border-radius: 10px;
}
body .dropdown-menu .dropdown-item { color: var(--dropdown-text); }
body .dropdown-menu .dropdown-item:is(:hover,:focus) {
  background: var(--dropdown-hover); color: var(--dropdown-text);
}
body .dropdown-menu .dropdown-item:is(.active,:active,[aria-selected="true"]) {
  background: var(--dropdown-selected-bg); color: var(--dropdown-selected-text);
}