/* Shared form controls: field primitives + custom element styles. */

@import "../components/popover.css";
@import "../components/niien-listbox/niien-listbox.css";
@import "../components/niien-datetime-input/niien-datetime-input.css";
@import "../components/niien-file-input/niien-file-input.css";
@import "../components/niien-account-picker/niien-account-picker.css";

.field-input,
.field-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary, var(--surface-page));
  color: var(--text-primary);
  font: inherit;
}

.field-textarea {
  min-height: 5rem;
  resize: vertical;
}

.field-input:focus-visible,
.field-textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.field-input:read-only {
  color: var(--text-muted);
}

.control-checkbox,
.control-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.control-checkbox input[type="checkbox"],
.control-radio input[type="radio"] {
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  margin: 0;
  cursor: pointer;
}

.control-checkbox:focus-within,
.control-radio:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: var(--radius-sm);
}