/* ============================================================
 * Neurotype Brand System
 * File: css/forms.css
 * Form Inputs
 *
 * Variants: text, textarea, select, checkbox, radio, segmented
 * Classes:  .form-group, .form-label, .form-input, .form-textarea, .form-select, .form-hint, .form-error,
 *           .form-fieldset, .form-legend,
 *           .form-checkbox-group, .form-checkbox,
 *           .form-radio-group, .form-radio,
 *           .form-segmented, .form-segmented-option
 * ========================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-primary);
}

.form-label-optional {
  font-weight: 400;
  color: var(--text-muted);
  margin-left: var(--space-1);
}

.form-input,
.form-textarea,
.form-select {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  transition:
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default);
  width: 100%;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-placeholder);
}

.form-input:hover:not(:disabled),
.form-textarea:hover:not(:disabled),
.form-select:hover:not(:disabled) {
  border-color: var(--neurotype-accent-primary);
}

.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  outline: none;
  border-color: var(--neurotype-accent-primary);
  box-shadow: 0 0 0 2px var(--neurotype-accent-subtle);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background-color: var(--bg-secondary);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Textarea specific */
.form-textarea {
  min-height: var(--space-10);
  resize: vertical;
}

/* Select specific */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23596B62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-7);
}

/* Hints & Errors */
.form-hint {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.form-error {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-error);
  font-weight: 500;
}

/* Validation States */
.form-input--error,
.form-textarea--error,
.form-select--error {
  border-color: var(--color-error);
}

.form-input--error:focus-visible,
.form-textarea--error:focus-visible,
.form-select--error:focus-visible {
  box-shadow: 0 0 0 2px var(--color-error-subtle);
}

/* Success state: inline check icon on the right edge.
 * Uses the brand-system tick (showcase/16-icons.html): polyline 20 6 9 17 4 12,
 * 1.5px stroke, round caps/joins. Stroke colour is var(--color-success) #528061. */
.form-input--success,
.form-textarea--success,
.form-select--success {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23528061' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  padding-right: var(--space-7);
}

.form-input--success {
  background-position: right var(--space-3) center;
}

.form-textarea--success {
  background-position: right var(--space-3) top var(--space-3);
}

.form-select--success {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23528061' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23596B62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right var(--space-7) center, right var(--space-4) center;
  padding-right: calc(var(--space-7) + var(--space-5));
}

/* Form Loading Overlay
 * Translucent overlay for form groups during submission.
 * Apply to .form-group to disable interaction and show
 * a loading state while waiting for a response.
 * ---------------------------------------------------------- */
.form-loading-overlay {
  position: relative;
  pointer-events: none;
}

.form-loading-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-loading-overlay);
  border-radius: var(--radius-sm);
  z-index: 1;
}

/* ---- Fieldset & Legend ----------------------------------------- */
/* Strip the browser's default fieldset chrome and use a body-styled
 * legend that matches .form-label visually. */

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.form-fieldset > .form-label {
  margin-bottom: var(--space-3);
}

.form-legend {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

/* ---- Checkbox -------------------------------------------------- */
/* Vertical group of checkboxes. Each option is a label wrapping a
 * native <input type="checkbox"> + content, allowing click-anywhere
 * activation while preserving native semantics and keyboard support. */

.form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-body);
  color: var(--text-primary);
}

.form-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  cursor: pointer;
  margin-top: 2px;
  position: relative;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.form-checkbox input[type="checkbox"]:hover {
  border-color: var(--neurotype-accent-primary);
}

.form-checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--neurotype-accent-primary);
  box-shadow: 0 0 0 2px var(--neurotype-accent-subtle);
}

.form-checkbox input[type="checkbox"]:checked {
  background: var(--neurotype-accent-primary);
  border-color: var(--neurotype-accent-primary);
}

.form-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--text-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Error state: tint every checkbox border in the group */
.form-checkbox-group--error .form-checkbox input[type="checkbox"] {
  border-color: var(--color-error);
}

/* ---- Radio ----------------------------------------------------- */
/* Horizontal radio group (wraps to multiple lines). For dense or
 * mutually-exclusive multi-option choices (3-5 options) prefer
 * .form-segmented below. */

.form-radio-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-body);
  color: var(--text-primary);
}

.form-radio input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elevated);
  cursor: pointer;
  position: relative;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.form-radio input[type="radio"]:hover {
  border-color: var(--neurotype-accent-primary);
}

.form-radio input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--neurotype-accent-primary);
  box-shadow: 0 0 0 2px var(--neurotype-accent-subtle);
}

.form-radio input[type="radio"]:checked {
  border-color: var(--neurotype-accent-primary);
}

.form-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neurotype-accent-primary);
  transform: translate(-50%, -50%);
}

/* ---- Segmented control ----------------------------------------- */
/* Inline pill group for 3-5 mutually-exclusive options where the
 * choices are tightly related (e.g. On time / Early / Delayed).
 * Wraps native radios so the value submits with the form. The native
 * input is visually hidden but remains keyboard accessible. */

.form-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.form-segmented-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

.form-segmented-option input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.form-segmented-option:hover {
  color: var(--text-primary);
}

.form-segmented-option:has(input[type="radio"]:checked) {
  color: var(--neurotype-accent-secondary);
  background: var(--bg-elevated);
}

.form-segmented-option:has(input[type="radio"]:focus-visible) {
  box-shadow: 0 0 0 2px var(--neurotype-accent-subtle);
}