/* Custom dropdown (paired with ui/app/components/select.js).
   The native <select> stays in the DOM as the value/form store but is visually
   hidden (.nd-select-native); .nd-select-trigger is the styled control and
   .nd-select-list is the fully-styled option popup — the part a native <select>
   won't let CSS reach. Everything is on --bfc-* tokens + --font-sans so the
   options match the rest of the app. */

.nd-select { position: relative; display: inline-flex; vertical-align: middle; max-width: 100%; }

/* Keep the native select for value/form/AT-fallback, but out of sight. */
.nd-select-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  opacity: 0; pointer-events: none;
}

/* Trigger — visually identical to the styled text inputs / native select. */
.nd-select-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-width: 0; text-align: left;
  font: inherit; font-size: 14px; color: var(--bfc-ink);
  background: var(--bfc-surface);
  border: 1px solid var(--bfc-line-strong);
  border-radius: 10px;
  padding: 10px 12px 10px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nd-select-trigger:focus-visible,
.nd-select.is-open .nd-select-trigger {
  outline: none; border-color: var(--bfc-teal); box-shadow: 0 0 0 3px rgba(35, 177, 165, 0.18);
}
.nd-select.is-disabled { opacity: 0.55; }
.nd-select.is-disabled .nd-select-trigger { cursor: default; }
.nd-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-select-chev {
  flex: 0 0 auto; width: 12px; height: 8px;
  background: no-repeat center / 12px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235d6c7b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 0.15s ease;
}
.nd-select.is-open .nd-select-chev { transform: rotate(180deg); }

/* Popup listbox — fully styled, on-palette. */
.nd-select-list {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 100%; width: max-content; max-width: min(340px, 92vw);
  max-height: 264px; overflow-y: auto;
  background: var(--bfc-surface);
  border: 1px solid var(--bfc-line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-elev);
  padding: 6px;
  display: none;
}
.nd-select.nd-drop-up .nd-select-list { top: auto; bottom: calc(100% + 6px); }
.nd-select.is-open .nd-select-list { display: block; }

.nd-select-option {
  font-family: var(--font-sans); font-size: 14px; color: var(--bfc-ink);
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nd-select-option.is-active { background: var(--bfc-soft-2); }
.nd-select-option[aria-selected="true"] { font-weight: 700; color: var(--bfc-navy); }
.nd-select-option[aria-selected="true"]::after {
  content: "\2713"; float: right; margin-left: 12px; color: var(--bfc-teal); font-weight: 800;
}
.nd-select-option.is-disabled { opacity: 0.5; cursor: default; }

/* Layout parity: the wrapper takes the slot the native select had in the
   contexts the app uses (mirrors .admin-grid select / .search-row select). */
.admin-grid .nd-select, .gw-form .nd-select { width: 100%; }
.search-row .nd-select { min-width: 150px; }

@media (prefers-reduced-motion: reduce) {
  .nd-select-chev, .nd-select-trigger { transition: none; }
}