/* Form Inputs
 * Dark surface backgrounds with accent focus rings.
 * Uses native CSS features — no JavaScript for validation styling.
 */

@layer components {
  label {
    display: block;
    margin-block-end: 0.25rem;
  }

  input:where([type="text"], [type="email"], [type="password"], [type="url"],
    [type="tel"], [type="number"], [type="search"], [type="date"],
    [type="datetime-local"], [type="time"]),
  select,
  textarea {
    display: block;
    width: 100%;
    min-height: var(--touch-min);
    padding: 0.625em 1em;
    font: inherit;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 100ms ease, box-shadow 100ms ease;

    &:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent);
    }

    &::placeholder {
      color: var(--color-ink-muted);
    }

    &:disabled {
      opacity: 0.4;
      background: var(--color-canvas);
      cursor: not-allowed;
    }
  }

  textarea {
    min-height: 6rem;
    resize: vertical;
  }

  select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 2.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: 0.875em;
  }

  /* Dark mode calendar picker icon */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
  }

  html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
  html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
  }

  @media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) input[type="date"]::-webkit-calendar-picker-indicator,
    html:not([data-theme="dark"]) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    html:not([data-theme="dark"]) input[type="time"]::-webkit-calendar-picker-indicator {
      filter: none;
    }
  }

  /* Search clear button */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    background: 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='%238a8a8a' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
  }

  /* Field group — label + input + optional hint/error */
  .field {
    margin-block-end: var(--block-space);

    & .field__hint {
      font-size: 0.875rem;
      color: var(--color-ink-muted);
      margin-block-start: 0.25rem;
    }

    & .field__error {
      font-size: 0.875rem;
      color: var(--color-negative);
      margin-block-start: 0.25rem;
    }
  }

  /* Inline checkbox/radio */
  .field--inline {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);

    & label {
      margin-block-end: 0;
      font-weight: normal;
    }

    & input {
      width: auto;
    }
  }

  /* Rails-generated error field wrapping */
  .field_with_errors {
    & input, & textarea, & select {
      border-color: var(--color-negative);
    }
  }
}