/* ── Custom <select> (v0.12.0) ────────────────────────────────────
 * AssaySelect.enhance() hides the native select and renders a
 * styled trigger + popup menu on top. The native element stays as
 * the source of truth for value + change events.
 */
.assay-select {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  /* Default: size to content. Use the .assay-select-sidebar variant
   * (or a parent rule) to opt into width: 100% when you want the
   * dropdown to fill its container. */
  width: auto;
  min-width: 0;
}

.assay-select-sidebar {
  /* Sidebar namespace selector: fill the available column width. */
  display: flex;
  width: 100%;
}

.assay-select-native {
  /* Hide visually but keep in the accessibility tree — screen
   * readers still see the native select. */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.assay-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.assay-select-trigger:hover {
  border-color: var(--text-muted);
  background: var(--surface-hover);
}
.assay-select-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.assay-select.open .assay-select-trigger {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.assay-select-value {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.assay-select-caret {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform 120ms ease;
}
.assay-select.open .assay-select-caret {
  transform: rotate(180deg);
  color: var(--accent);
}

.assay-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
}
.assay-select.open .assay-select-menu { display: flex; }

.assay-select-option {
  text-align: left;
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.assay-select-option:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.assay-select-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 600;
}

/* Status-bar variant: no border, tight padding, inline with the
 * surrounding text. */
.assay-select-statusbar .assay-select-trigger {
  border: none;
  background: none;
  padding: 2px 4px;
  color: var(--text);
  font-weight: 600;
}
.assay-select-statusbar .assay-select-trigger:hover {
  background: var(--surface-hover);
}
.assay-select-statusbar .assay-select-menu {
  /* Status bar sits at the bottom of the viewport — opening the menu
   * downward would push it offscreen. Anchor it ABOVE the trigger
   * instead, and align to the left so the option list doesn't shift
   * the surrounding text. */
  top: auto;
  bottom: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 140px;
  /* Status bar lives inside <footer class="status-bar"> which has its
   * own stacking context. Bump z-index above any sibling status
   * pieces so the menu floats over them cleanly. */
  z-index: 100;
}

/* The status-bar variant is inline with text — let the wrapper
 * size to its content rather than stretching to fill the parent. */
.assay-select-statusbar { width: auto; display: inline-flex; }

/* Mirror-treat the old `.namespace-select` + `.status-namespace-select`
 * rules away — we now hide the native select and style the wrapper
 * instead. These classes are harmless no-ops post-enhancement, but
 * zero their residual padding so unenhanced fallback (JS disabled)
 * still renders something sensible.
 */

