/* Hammer dropdowns: approved white text, dark surfaces, blue selection.
   Presentation only. Selection, search, values and events remain library-owned. */
@media screen {
  html:root :is(body, #app)[data-hammer-web-ui] {
    --hdd-ink: #f5f6f8;
    --hdd-muted: #aeb8c6;
    --hdd-blue: #429bff;
    --hdd-selection: rgba(48, 125, 224, .28);
    --hdd-selection-edge: rgba(66, 155, 255, .92);
  }

  /* Match the theme's scope and specificity, including body-mounted Select2 menus. */
  html:root :is(body, #app)[data-hammer-web-ui] :is(
    .vs__dropdown-option, .vs__no-options,
    .select2-results__option, .select2-results__group, .select2-results__message,
    .navbar-dropdown .navbar-item, .dropdown-content .dropdown-item,
    .dropdown-menu > li > a, .dropdown-menu > .dropdown-item,
    .select2-selection__rendered, .select2-selection__choice,
    .vs__selected, .vs__search, .select2-search__field, select, option, optgroup
  ) {
    color: var(--hdd-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
  }

  /* Product/member templates and digital-number spans must inherit the option colour. */
  html:root :is(body, #app)[data-hammer-web-ui] :is(
    .vs__dropdown-option, .select2-results__option,
    .navbar-dropdown .navbar-item, .dropdown-content .dropdown-item,
    .dropdown-menu > li > a, .dropdown-menu > .dropdown-item,
    .vs__selected, .select2-selection__rendered, .select2-selection__choice
  ) :where(*) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
  }

  html:root :is(body, #app)[data-hammer-web-ui] :is(
    .vs__dropdown-option,
    .select2-results__option[aria-selected], .select2-results__option--selectable,
    .navbar-dropdown .navbar-item, .dropdown-content .dropdown-item,
    .dropdown-menu > li > a, .dropdown-menu > .dropdown-item
  ) {
    position: relative;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 38px 10px 14px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    border-radius: 9px;
    transition: background-color 140ms ease, box-shadow 140ms ease;
  }

  /* Preserve each menu's existing background, border, blur and placement. */
  html:root :is(body, #app)[data-hammer-web-ui] :is(
    .vs__dropdown-option--highlight, .vs__dropdown-option--selected,
    .select2-results__option--highlighted, .select2-results__option[aria-selected="true"],
    .select2-results__option--selected,
    .navbar-dropdown .navbar-item:is(:hover, :focus-visible, .is-active, [aria-current="page"]),
    .dropdown-content .dropdown-item:is(:hover, :focus-visible, .is-active, [aria-current="page"]),
    .dropdown-menu > li > a:is(:hover, :focus-visible, .active, [aria-current="page"]),
    .dropdown-menu > .dropdown-item:is(:hover, :focus-visible, .active, [aria-current="page"])
  ):not([aria-disabled="true"]):not(.vs__dropdown-option--disabled):not(.is-disabled):not(.disabled) {
    background: var(--hdd-selection) !important;
    color: var(--hdd-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: inset 0 0 0 1px var(--hdd-selection-edge), 0 0 9px rgba(66, 155, 255, .10) !important;
  }

  /* A check denotes an actual selection, never a merely hovered Vue option.
     Vue Select's aria-selected follows its keyboard pointer; use its selected class. */
  html:root :is(body, #app)[data-hammer-web-ui] :is(
    .vs__dropdown-option--selected,
    .select2-results__option[aria-selected="true"], .select2-results__option--selected,
    .navbar-dropdown .navbar-item:is(.is-active, [aria-current="page"]),
    .dropdown-content .dropdown-item:is(.is-active, [aria-current="page"]),
    .dropdown-menu > li > a:is(.active, [aria-current="page"]),
    .dropdown-menu > .dropdown-item:is(.active, [aria-current="page"])
  ):not([aria-disabled="true"]):not(.vs__dropdown-option--disabled)::after {
    content: "";
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    width: 7px;
    height: 12px;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
  }

  html:root :is(body, #app)[data-hammer-web-ui] :is(
    .vs__dropdown-option--disabled, .select2-results__option[aria-disabled="true"],
    .navbar-dropdown .navbar-item:is(.is-disabled, [aria-disabled="true"]),
    .dropdown-content .dropdown-item:is(.is-disabled, [aria-disabled="true"]),
    .dropdown-menu .dropdown-item:is(.disabled, [aria-disabled="true"]), option:disabled
  ) {
    color: var(--hdd-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: not-allowed;
  }

  html:root :is(body, #app)[data-hammer-web-ui] :is(.vs__search, .select2-search__field)::placeholder {
    color: var(--hdd-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1;
  }

  /* Keep the current value readable while open; Vue hides it when search begins. */
  html:root :is(body, #app)[data-hammer-web-ui] .vs--single.vs--open:not(.vs--searching) .vs__selected {
    opacity: 1;
  }

  /* Multi-selects also need dark fields; the vendor default is white with grey chips. */
  html:root :is(body, #app)[data-hammer-web-ui] .select2-selection--multiple {
    min-height: 44px;
    background: var(--hw-field, #19212c) !important;
    border: 1px solid var(--hw-edge, #78818e) !important;
    border-radius: 13px;
    color: var(--hdd-ink) !important;
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.select2-selection__choice, .vs--multiple .vs__selected) {
    background: var(--hdd-selection) !important;
    border: 1px solid var(--hdd-selection-edge) !important;
  }

  /* Native pickers retain OS keyboard/touch behaviour and selected-state indicators. */
  html:root :is(body, #app)[data-hammer-web-ui] select {
    color-scheme: dark;
    accent-color: var(--hdd-blue);
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(option, optgroup) {
    background-color: var(--hw-content, #252c37) !important;
  }
  html:root :is(body, #app)[data-hammer-web-ui] option:checked:not(:disabled) {
    background-color: #294f7c !important;
    color: var(--hdd-ink) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root :is(body, #app)[data-hammer-web-ui] :is(
    .vs__dropdown-option, .select2-results__option,
    .navbar-dropdown .navbar-item, .dropdown-content .dropdown-item,
    .dropdown-menu > li > a, .dropdown-menu > .dropdown-item
  ) { transition: none !important; }
}

@media (forced-colors: active) {
  html:root :is(body, #app)[data-hammer-web-ui] {
    --hdd-ink: CanvasText;
    --hdd-muted: GrayText;
    --hdd-selection: Highlight;
    --hdd-selection-edge: Highlight;
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(
    .vs__dropdown-option--selected, .vs__dropdown-option--highlight,
    .select2-results__option[aria-selected="true"], .select2-results__option--highlighted
  ) { color: HighlightText !important; outline: 1px solid Highlight !important; }
}