/* Combobox Molecule - SPACING CONTRACT: No external margins */

.combobox {
  position: relative;
  margin: 0;
}

.combobox-trigger {
  position: relative;
  display: flex;
  align-items: stretch;
}

.combobox-input {
  flex: 1 1 auto;
  width: 100%;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--bg-surface);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--border-radius-md);
  transition: border-color var(--duration-150) var(--easing-out),
              box-shadow var(--duration-150) var(--easing-out);
}

.combobox-input::placeholder {
  color: var(--color-text-muted);
}

.combobox-input:hover {
  border-color: var(--border-strong);
}

.combobox-input:focus,
.combobox-input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.combobox-input[disabled],
.combobox-disabled .combobox-input {
  background: var(--bg-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.combobox-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  border-top-right-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
}

.combobox-toggle:hover {
  color: var(--color-text-primary);
}

.combobox-toggle[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Dropdown list - uses fixed positioning at runtime (see Combobox._open) so it
 * escapes Modal scroll containers. Static fallback below kept for non-init use. */
.combobox-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: var(--space-1) 0 0 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--bg-surface);
  border: var(--border-width-1) solid var(--border-subtle);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  max-height: 260px;
  overflow-y: auto;
}

.combobox-option {
  padding: var(--space-1_5) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--duration-150) var(--easing-out);
}

.combobox-option:hover,
.combobox-option.highlighted {
  background-color: var(--bg-surface-hover);
}

.combobox-option[aria-selected="true"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.combobox-option[aria-selected="true"].highlighted {
  background-color: var(--color-primary-light);
}

.combobox-empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  cursor: default;
}