/* ============================================================
   Elite — Combobox (autocomplete select)
   ------------------------------------------------------------
   Standalone component, shared by two contexts that do NOT share
   a token set:
     · the dashboard / design system  → --eds-* tokens
     · the public auth pages          → --violet / --encre / ...
   So every colour resolves through a fallback chain:
     --eds-*  →  public token  →  hard-coded hex.

   The visible text input inherits its class list from the <select>
   it enhances (.eds-field or .field), so this file only styles the
   wrapper, the dropdown and the chevron.

   All box offsets use logical properties (inset-inline-*) so the
   component mirrors itself in Arabic without extra RTL rules.
   ============================================================ */

.eds-combobox { position: relative; }

/* The original <select> stays in the DOM as the value holder. It is hidden
   visually but must remain focusable — `display:none` would make Chrome
   refuse to show a native validation bubble ("not focusable" console error). */
.eds-combobox__native {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Scoped to the wrapper (0,2,0) on purpose: the host pages define .field /
   .eds-field with a flat `padding` shorthand at equal specificity (0,1,0) and
   later in source order, so an unscoped rule here loses and the text runs
   under the chevron. */
.eds-combobox .eds-combobox__input { padding-inline-end: 38px; }
.eds-combobox .eds-combobox__input::-ms-clear { display: none; }

.eds-combobox__chev {
  position: absolute;
  inset-inline-end: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: #9D9AB2;
  pointer-events: none;
  transition: transform .2s ease;
}
.eds-combobox.is-open .eds-combobox__chev { transform: translateY(-50%) rotate(180deg); }

.eds-combobox__list {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  /* keeps the rows clear of the scrollbar, on whichever side it lands */
  padding-inline-end: 10px;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1.5px solid var(--eds-border, rgba(23, 21, 46, .14));
  border-radius: 12px;
  box-shadow: 0 22px 48px -24px rgba(23, 21, 46, .45);
  scrollbar-width: thin;
  scrollbar-color: var(--eds-violet, var(--violet, #514B9E)) var(--eds-lavande, var(--lavande, #EFEEF9));
}
.eds-combobox__list[hidden] { display: none; }

.eds-combobox__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font: 600 14px/1.3 var(--eds-font-body, var(--body, Manrope, system-ui, sans-serif));
  color: var(--eds-encre, var(--encre, #17152E));
}
.eds-combobox__opt:hover,
.eds-combobox__opt.is-active {
  background: var(--eds-lavande, var(--lavande, #EFEEF9));
}
.eds-combobox__opt[aria-selected="true"] {
  color: var(--eds-violet, var(--violet, #514B9E));
}
/* the matched substring, highlighted as the user types */
.eds-combobox__opt mark {
  background: transparent;
  color: var(--eds-violet, var(--violet, #514B9E));
  font-weight: 800;
}

.eds-combobox__empty {
  padding: 14px 12px;
  font: 500 13.5px/1.5 var(--eds-font-body, var(--body, Manrope, system-ui, sans-serif));
  color: var(--eds-text-subtle, var(--gris, #5A5670));
}

@media (prefers-reduced-motion: reduce) {
  .eds-combobox__chev { transition: none; }
}