/* Form Component
   ========================================================================== */

/* Form Actions Bar */
.form-actions {
  display: flex;
  justify-content: flex-end !important;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 1rem;

  /* Container query for responsive actions */
  container-type: inline-size;
  container-name: form-actions;
}

/* Stack form actions on small containers */
@container form-actions (max-width: 400px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions > * {
    inline-size: 100%;
  }
}

/* Main Form Container */
.form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  container-type: inline-size;
  container-name: form;
}

/* Form Group */
.form__group {
  flex: 1;
  min-inline-size: 0; /* Prevent flex children from overflowing */
}

/* Form Input Field */
.form__input {
  display: block !important;
  inline-size: 100%;
  max-inline-size: 100%;
  padding: var(--space-xxs) var(--space-xs);
  border: var(--border);
  border-radius: var(--border-radius);
  outline: none;
  transition:
    box-shadow 250ms,
    border-color 250ms;
}

/* Allow flex layout for inline editing */
.form__input.flex {
  display: flex !important;
}

/* Textarea auto-grow with pure CSS */
textarea.form__input {
  resize: none;
  field-sizing: content;
  max-block-size: 20lh;
  min-block-size: 3lh;
}

/* Modern focus styles with :focus-visible */
.form__input:focus-visible {
  box-shadow: 0 0 0 2px var(--color-blue-bright);
  border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);
}

/* Invalid state */
.form__input--invalid {
  border-color: var(--color-red);
  /* Shake animation on invalid */
  animation: shake 0.3s ease-in-out;
}

/* Disabled state */
.form__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: color-mix(
    in oklch,
    var(--color-bg-secondary),
    gray 5%
  );
}

/* Placeholder styling */
.form__input::placeholder {
  color: color-mix(in oklch, currentColor, transparent 60%);
}

/* Auto-fill background fix */
.form__input:-webkit-autofill {
  box-shadow:
    0 0 0 100px var(--color-bg-secondary) inset,
    0 0 0 2px var(--color-blue-bright);
}

/* Shake animation for invalid inputs */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

/* Form Label */
.form-label {
  margin-inline-end: 0.5rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  font-size: var(--font-size-s);

  /* Required field indicator */
  &:has(+ [required])::after,
  &[data-required]::after {
    content: " *";
    color: var(--color-red);
  }
}

/* Field validation states using :has() */
.field {
  container-type: inline-size;
}

/* Remove default fieldset styling for checkbox/radio wrappers */
fieldset.field,
fieldset.form-group {
  border: none;
  padding: 0;
  margin: 0;
  min-inline-size: 0; /* Reset fieldset min-width */
}

/* Field with error */
.field:has(.form__input--invalid) .form-label {
  color: var(--color-red);
}

/* Responsive form layout using container queries */
@container form (max-width: 600px) {
  .form {
    flex-direction: column;

    &__group {
      flex: none;
      inline-size: 100%;
    }
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .form__input {
    border-width: 2px;

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
      box-shadow: none;
    }
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .form__input {
    transition: none;

    &--invalid {
      animation: none;
    }
  }
}

/* Modern form field with floating label (enhancement) */
.form-field-modern {
  position: relative;
  margin-block: 1rem;

  & input,
  & textarea {
    inline-size: 100%;
    padding: 1rem 0.75rem 0.5rem;
    border: var(--border);
    border-radius: var(--border-radius);
    outline: none;
    transition: border-color 0.2s ease;

    &:focus-visible {
      border-color: var(--color-blue-bright);
    }
  }

  & label {
    position: absolute;
    inset-inline-start: 0.75rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    pointer-events: none;
    color: color-mix(in oklch, currentColor, transparent 40%);
  }

  /* Float label when input has value or focus */
  &:has(input:focus, input:not(:placeholder-shown)),
  &:has(textarea:focus, textarea:not(:placeholder-shown)) {
    & label {
      inset-block-start: 0.25rem;
      font-size: 0.75rem;
      transform: translateY(0);
      color: var(--color-blue-bright);
    }
  }
}

/* Select elements styling */
.form__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
  padding-inline-end: 2.5rem;
  cursor: pointer;
}

/* File input styling */
.form__input--file {
  padding: 0.5rem;
  cursor: pointer;

  &::file-selector-button {
    padding: 0.375rem 0.75rem;
    margin-inline-end: 0.5rem;
    background: var(--color-blue-bright);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: opacity 0.2s ease;

    &:hover {
      opacity: 0.9;
    }
  }
}

/* Range input styling */
.form__input--range {
  padding: 0;
  background: transparent;
  cursor: pointer;

  &::-webkit-slider-track {
    block-size: 4px;
    background: color-mix(in oklch, var(--color-blue-bright), transparent 80%);
    border-radius: 2px;
  }

  &::-webkit-slider-thumb {
    appearance: none;
    inline-size: 16px;
    block-size: 16px;
    background: var(--color-blue-bright);
    border-radius: 50%;
    margin-block-start: -6px;
    cursor: pointer;
  }

  &::-moz-range-track {
    block-size: 4px;
    background: color-mix(in oklch, var(--color-blue-bright), transparent 80%);
    border-radius: 2px;
  }

  &::-moz-range-thumb {
    border: none;
    inline-size: 16px;
    block-size: 16px;
    background: var(--color-blue-bright);
    border-radius: 50%;
    cursor: pointer;
  }
}

/* Checkbox and radio button styling */
.form-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 1.5rem;
}

.form-check-input {
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  vertical-align: middle;
  appearance: none;
  background-color: var(--color-bg-secondary);
  border: 1px solid color-mix(in oklch, currentColor, transparent 70%);
  transition: all 0.2s ease;
  cursor: pointer;

  /* Checkbox specific */
  &[type="checkbox"] {
    border-radius: 0.25rem;

    &:checked {
      background-color: var(--color-blue-bright);
      border-color: var(--color-blue-bright);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 1rem;
    }
  }

  /* Radio button specific */
  &[type="radio"] {
    border-radius: 50%;

    &:checked {
      background-color: var(--color-blue-bright);
      border-color: var(--color-blue-bright);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Ccircle cx='10' cy='10' r='4'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 1rem;
    }
  }

  &:focus-visible {
    outline: 2px solid var(--color-blue-bright);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.form-check-label {
  cursor: pointer;
  user-select: none;
}

/* Switch/toggle styling */
.form-switch {
  padding-inline-start: 2.5rem;
}

.form-switch-input {
  inline-size: 2rem;
  block-size: 1.25rem;
  background-color: color-mix(in oklch, currentColor, transparent 70%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='white'/%3E%3C/svg%3E");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 2rem;
  transition:
    background-position 0.2s ease,
    background-color 0.2s ease;
  appearance: none;
  cursor: pointer;

  &:checked {
    background-color: var(--color-blue-bright);
    background-position: right center;
  }

  &:focus-visible {
    outline: 2px solid var(--color-blue-bright);
    outline-offset: 2px;
  }
}

/* Error notification */
.form-error-notification {
  padding: 1rem;
  margin-block-end: 1rem;
  background-color: color-mix(
    in oklch,
    var(--color-red),
    transparent 90%
  );
  border: 1px solid var(--color-red);
  border-radius: var(--border-radius);
  color: var(--color-red);
}

/* Form error text */
.form-error {
  display: block;
  margin-block-start: 0.25rem;
}

/* Form hint text */
.form-hint {
  display: block;
  margin-block-start: 0.25rem;
}

/* Input group with append/prepend */
.input-group {
  display: flex;
  align-items: stretch;
  border: var(--border);
  border-radius: var(--border-radius);
  transition:
    box-shadow 250ms,
    border-color 250ms;
}

.input-group:focus-within {
  box-shadow: 0 0 0 2px var(--color-blue-bright);
  border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);
}

.input-group .form__input {
  flex: 1;
  border: 0;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.input-group input[type="number"] {
  text-align: right;
}

.input-group input[type="number"]::-webkit-inner-spin-button {
  margin-left: var(--space-s);
}

.input-group .form__input:focus-visible {
  box-shadow: none;
}

.input-group__append {
  display: flex;
  align-items: center;
  padding-inline: var(--space-s);
  background: var(--color-gray-light);
  border-left: var(--border);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  color: var(--color-ink-muted);
  font-weight: 500;
}

/* Compact variant for inline usage (e.g., weighting inputs in lists) */
.input-group--compact {
  display: inline-flex;
}

.form__input--compact {
  width: 4rem;
  padding: var(--space-xxs) var(--space-xs);
  text-align: center;
  font-size: var(--font-size-s);
}

.input-group__append--compact {
  padding-inline: var(--space-xs);
  font-size: var(--font-size-s);
}

/* Reset input/textarea to be invisible inside a container */
.input-inline {
  border: 0;
  background: transparent;
  outline: none;
  field-sizing: content;
  min-width: 2ch;
  resize: none;
}

.form__input:has(.input-inline):focus-within {
  box-shadow: 0 0 0 2px var(--color-blue-bright);
  border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);
}

/* Horizontal form specific */
.form__group--horizontal {
  display: flex;
  align-items: flex-start;
  gap: 1rem;

  & .form-label--horizontal {
    flex: 0 0 25%;
    padding-block-start: 0.5rem;
    text-align: end;
  }

  @container form (max-width: 600px) {
    flex-direction: column;

    & .form-label--horizontal {
      flex: none;
      text-align: start;
    }
  }
}

/* Dark mode: select dropdown arrow visibility */
html[data-theme="dark"] .form__input--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cccccc' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .form__input--select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cccccc' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  }
}