/*
 * Real CSS for the shared form fields. Mantine v7's `styles` prop only accepts
 * flat properties — pseudo-classes and `&[data-...]` attribute selectors there
 * are ignored (and `&[data-...]` logs an "Unsupported style property" warning).
 * Those interactive states live here and are wired via `classNames` (see
 * `fieldClassNames` in `shared.tsx`).
 */

.edrFieldInput:hover {
  border-color: #cbd8e4;
}

.edrFieldInput:focus,
.edrFieldInput:focus-within {
  border-color: #0ea371;
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(14, 163, 113, 0.13),
    0 1px 2px rgba(16, 24, 40, 0.05);
}

.edrFieldOption[data-combobox-selected] {
  background: linear-gradient(
    135deg,
    rgba(14, 163, 113, 0.1),
    rgba(14, 163, 113, 0.05)
  );
  color: #0a6f4d;
  font-weight: 600;
}

.edrFieldOption[data-combobox-active] {
  background: #f1f6fa;
}
