/* ===========================================
   Forms
   ===========================================
   BEM: .form, .form__group, .form__label, etc.
   Field borders use gray-500 so input boundaries
   meet the 3:1 non-text contrast minimum.
   =========================================== */

@layer components {
  .form, .devise__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .form__group,
  .form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .form__errors, #form_error_explanation {
    padding: var(--space-4);
    background-color: var(--color-error-light);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    color: var(--color-error);
    h2 {
      margin: 0 0 var(--space-2);
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
    }

    ul {
      margin: 0;
      padding-left: var(--space-5);
    }

    li {
      font-size: var(--text-sm);
      &:not(:last-child) {
        margin-bottom: var(--space-2);
      }
    }
  }

  .form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text);
  }

  .form__label--required::after {
    content: " *";
    color: var(--color-error);
  }

  .form__inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .form__hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
  }

  .form__error {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-error);
    margin: 0;
  }

  .form__input,
  .form__select {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background);
    border: 1px solid var(--color-gray-500);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);

    &:hover {
      border-color: var(--color-gray-600);
    }

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

    &[aria-invalid="true"],
    &.has-error {
      border-color: var(--color-error);

      &:focus {
        outline-color: var(--color-error);
      }
    }

    &:disabled {
      color: var(--color-text-muted);
      background-color: var(--color-gray-100);
      cursor: not-allowed;
    }
  }

  .form__input {
    &::placeholder {
      color: var(--color-text-light);
    }

    /* Input sizes */
    &.form__input--sm {
      min-height: 2.25rem;
      padding: var(--space-1) var(--space-2);
      font-size: var(--text-sm);
    }

    &.form__input--lg {
      min-height: 3rem;
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-lg);
    }
  }

  .input-with-prefix {
    display: flex;
    align-items: stretch;
    .form__prefix {
      display: flex;
      align-items: center;
      padding: 0 var(--space-3);
      color: var(--color-text-muted);
      background-color: var(--color-gray-100);
      border: 1px solid var(--color-gray-500);
      border-right: 0;
      border-radius: var(--radius-md) 0 0 var(--radius-md);
    }
    .form__input {
      flex: 1;
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }
    .field_with_errors {
      width: 100%;
    }
  }

  /* ===========================================
     Textarea
     =========================================== */

  .form__textarea {
    min-height: 8rem;
    resize: vertical;
  }

  /* ===========================================
     Select
     =========================================== */

  .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='%235A6472' 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-3) center;
    padding-right: var(--space-10);
    cursor: pointer;
  }

  /* ===========================================
     Checkbox & Radio
     =========================================== */

  .form__checkbox,
  .form__radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
  }

  .form__checkbox-input,
  .form__radio-input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary-900);
  }

  .form__checkbox-input:focus-visible,
  .form__radio-input:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

  .form__checkbox-label,
  .form__radio-label {
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
  }

  /* ===========================================
     Form Actions
     =========================================== */

  .form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-4);
  }

  .form__actions--right {
    justify-content: flex-end;
  }

  /* ===========================================
     Fieldset & Legend
     =========================================== */

  .form__fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: 0;
  }

  .form__legend {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    padding: 0 var(--space-2);
  }

  /* ===========================================
     Input Group (Field with Icon)
     =========================================== */

  .form__input-group {
    position: relative;
  }

  .form__input-group-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .form__input-group .form__input {
    padding-left: var(--space-10);
  }

  /* ===========================================
     Post Form (autosave)
     =========================================== */

  .post-form {
    position: relative;
  }

  .post-form__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 2.5rem;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .post-form__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    &:hover {
      color: var(--color-text);
      text-decoration: underline;
    }
  }

  .post-form__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .post-form__status {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }

  .post-form__status--saving {
    color: var(--color-text-muted);
    background-color: var(--color-gray-100);
  }

  .post-form__status--saved {
    color: var(--color-success);
    background-color: var(--color-success-light);
  }

  .post-form__status--error {
    color: var(--color-error);
    background-color: var(--color-error-light);
  }

  .post-form__unpublished-indicator {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-warning);
    background-color: var(--color-warning-light);
  }

  [data-theme="dark"] {
    .form__input,
    .form__select {
      background-color: var(--color-surface);
    }
    .input-with-prefix .form__prefix {
      background-color: var(--color-surface);
    }
    .post-form__status--saving {
      /* the dark theme flips the gray scale, so gray-800 is light there; use the dark surface */
      background-color: var(--color-surface);
    }
  }
}

@layer components {
  /* Settings forms stay at a readable width instead of stretching across the app */
  .form--narrow {
    max-width: 35rem;
  }

  /* Label with a related link on the same line, e.g. "Password" and "Forgot password?" */
  .form__label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);

    a {
      font-size: var(--text-sm);
      color: var(--color-text);
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
}