/* Shared components — autocomplete, field validation, pagination affordances. */

/* ---------- Autocomplete ---------- */
.ac-wrap {
  position: relative;
}

.ac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-input);
  margin-top: 4px;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  list-style: none;
}

.ac-dropdown.hidden {
  display: none;
}

.ac-item {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-item:hover,
.ac-item.ac-active {
  background: var(--bg-2);
}

.ac-item.ac-empty {
  color: var(--text-2);
  cursor: default;
  font-style: italic;
}

.ac-item.ac-empty:hover {
  background: transparent;
}

/* ---------- Field validation ---------- */
.field-error input,
.field-error select,
.field-error textarea,
input.field-error,
select.field-error,
textarea.field-error {
  border: 1px solid var(--danger) !important;
}

.field-error-msg {
  color: var(--danger);
  font-size: 12px;
  margin-top: 4px;
}