/*
 * Picker — the owned dropdown behind every account / VAT-code / contact field
 * (fix B + the JE migration). Anchored below its field, capped at ~7 rows then a
 * vertical scroll. Rows read name first (left), number last (right-aligned,
 * tabular); section headings are quiet grey caps and never selectable.
 */

.picker {
  position: relative;
  display: block;
}

.picker__list {
  /* Fixed, placed at its field by the controller (picker#show — below it, or above when
     that's where the room is): an absolutely positioned list is clipped by any scrolling
     ancestor — the journal editor's horizontal `table-scroll` cut the dropdowns off (CEO,
     slice 87). Fixed escapes the clip; the controller closes the list on any scroll so it
     never drifts from its field. */
  position: fixed;
  z-index: 30;
  overscroll-behavior: contain; /* a wheel past the list's end must not chain to the page (which would fold it) */
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-md);
  min-width: 18rem; /* narrow editor cells still get readable rows */
  max-height: 16.5rem; /* ~7 rows before the scroll takes over */
  overflow-y: auto;
}

.picker__option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: 0.375rem;
  font-size: var(--text-xs);
  cursor: pointer;
}

.picker__option:hover,
.picker__option--active {
  background: var(--color-indigo-50);
}

.picker__text {
  color: var(--color-text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker__meta {
  color: var(--color-text-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
}

.picker__heading {
  padding: var(--space-2) var(--space-2-5) var(--space-1);
  font-size: var(--text-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-body);
  cursor: default;
}
