/* Input, input group, select, label and checkbox. Lifted from DESIGN/components/forms. */

[data-slot="input"] {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: var(--space-1) var(--space-2-5);
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  font: var(--type-body);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}

/* Used where the form is the whole page and 32px reads cramped. */
[data-slot="input"][data-size="lg"] {
  height: var(--control-h-lg);
  padding: var(--space-2) var(--space-3);
}

[data-slot="input"]::placeholder {
  color: var(--muted-foreground);
}

[data-slot="input"]:focus-visible {
  border-color: var(--ring);
  box-shadow: var(--focus-ring);
}

[data-slot="input"]:disabled {
  pointer-events: none;
  opacity: 0.5;
  background: color-mix(in oklch, var(--input) 50%, transparent);
}

[data-slot="input"][aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: var(--focus-ring-destructive);
}

/* The same field as an input, sized by its rows and resizable down the page only. */
textarea[data-slot="input"] {
  display: block;
  height: auto;
  padding: var(--space-2) var(--space-2-5);
  line-height: var(--leading-sm);
  resize: vertical;
}

/* The group draws the field edge, so the input inside it drops its own. */
[data-slot="input-group"] {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  align-items: center;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  transition: border-color 150ms, box-shadow 150ms;
}

[data-slot="input-group"]:has(:focus-visible) {
  border-color: var(--ring);
  box-shadow: var(--focus-ring);
}

[data-slot="input-group"] > [data-slot="input"] {
  flex: 1;
  height: 100%;
  padding-left: var(--space-1-5);
  border: 0;
  box-shadow: none;
  appearance: none;
}

[data-slot="input-group"]:not(:has([data-slot="input-group-addon"])) > [data-slot="input"] {
  padding-left: var(--space-2-5);
}

/* A trailing action inside a field, such as the switch that reveals a password. */
[data-slot="input-group-action"] {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  align-items: center;
  justify-content: center;
  margin-right: var(--space-1);
  border: 0;
  border-radius: min(var(--radius-md), 12px);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

[data-slot="input-group-action"]:hover {
  background: var(--muted);
  color: var(--foreground);
}

/* The browser draws its own clear button in search fields, which does not match anything else here. */
[data-slot="input"]::-webkit-search-cancel-button {
  appearance: none;
}

[data-slot="input-group-addon"] {
  display: flex;
  align-items: center;
  padding-left: var(--space-2-5);
  color: var(--muted-foreground);
}

[data-slot="select"] {
  display: inline-flex;
}

[data-slot="select-trigger"] {
  display: flex;
  width: 100%;
  height: var(--control-h);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1-5);
  padding: 0 var(--space-2) 0 var(--space-2-5);
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  font: 400 var(--text-sm) / 1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}

[data-slot="select-trigger"] > svg {
  color: var(--muted-foreground);
}

/* Matches small buttons when a select sits beside them in a page header. */
[data-slot="select-trigger"][data-size="sm"] {
  height: var(--control-h-sm);
}

[data-slot="select-trigger"]:focus-visible {
  border-color: var(--ring);
  box-shadow: var(--focus-ring);
}

/* The menu lives in the top layer outside the card, so scripts/select.js places it under its trigger. */
[data-slot="select-content"] {
  inset: auto;
  min-width: 144px;
  max-height: 320px;
  margin: 0;
  overflow: hidden auto;
}

[data-slot="select-item"] {
  position: relative;
  display: flex;
  width: 100%;
  min-height: var(--control-h-sm);
  align-items: center;
  padding: var(--space-1) var(--space-8) var(--space-1) var(--space-1-5);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: var(--type-body);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}

[data-slot="select-item"]:hover,
[data-slot="select-item"]:focus {
  background: var(--accent);
  color: var(--accent-foreground);
}

[data-slot="select-item"] svg {
  position: absolute;
  right: var(--space-2);
}

[data-slot="select-item"][aria-selected="false"] svg {
  display: none;
}

[data-slot="label"] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--foreground);
  font: var(--type-label);
  user-select: none;
}

[data-slot="checkbox"] {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--input);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--primary-foreground);
  cursor: pointer;
  outline: none;
  transition: background-color 150ms, border-color 150ms;
}

[data-slot="checkbox"][aria-checked="true"],
[data-slot="label"]:has(input:checked) > [data-slot="checkbox"] {
  border-color: var(--primary);
  background: var(--primary);
}

[data-slot="label"]:has(input:focus-visible) > [data-slot="checkbox"] {
  border-color: var(--ring);
  box-shadow: var(--focus-ring);
}

[data-slot="checkbox"] svg {
  display: none;
  width: 14px;
  height: 14px;
}

[data-slot="checkbox"][aria-checked="true"] svg,
[data-slot="label"]:has(input:checked) > [data-slot="checkbox"] svg {
  display: block;
}

[data-slot="checkbox"]:focus-visible {
  border-color: var(--ring);
  box-shadow: var(--focus-ring);
}

/* A stack of labelled fields, the same in any form. */
.form-fields {
  display: grid;
  gap: var(--space-4);
}

.form-field {
  display: grid;
  gap: var(--space-2);
}

/* A line under a field, for the one thing about it the label cannot say. */
[data-slot="field-note"] {
  margin: 0;
  color: var(--muted-foreground);
  font: var(--type-caption);
}