/* ===========================================
   Forms
   ===========================================
   BEM: .form, .form__group, .form__label, etc.
   =========================================== */

@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-medium);
    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);
    color: var(--color-error);
    margin: 0;
  }

  .form__input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    &::placeholder {
      color: var(--color-text-light);
    }

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

    &:focus {
      outline: 1px solid var(--color-focus);
      outline-offset: 0;
      border-color: var(--color-focus);
    }
    &[aria-invalid="true"] {
      outline: 1px solid var(--color-error);
      outline-offset: 0;
      border-color: var(--color-error);
      &:focus {
        box-shadow: 0 0 0 3px hsl(0 84% 60% / 0.15);
      }
    }
    &:disabled {
      background-color: var(--color-gray-100);
      cursor: not-allowed;
    }

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

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

    /* Input states */
    &.has-error {
      border-color: var(--color-error);
      &:focus {
        box-shadow: 0 0 0 3px hsl(0 84% 60% / 0.15);
      }
    }
  }

  .input-with-prefix {
    display: flex;
    align-items: center;
    .form__prefix {
      padding: var(--space-2) var(--space-3);
      background-color: var(--color-gray-100);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md) 0 0 var(--radius-md);
      border-right-color: transparent;
    }
    .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='%23737373' 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: var(--space-2) var(--space-10) var(--space-2) var(--space-3);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  /* ===========================================
     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;
    border: 1px solid var(--color-border);
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary-600);
  }

  .form__checkbox-input:focus-visible,
  .form__radio-input:focus-visible {
    outline: 2px 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;
    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-primary-600);
    }
  }

  .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 {
      color: var(--color-text);
      background-color: var(--color-surface);
    }
    .input-with-prefix {
      .form__prefix {
        background-color: var(--color-surface);
      }
      .form__input {
        flex: 1;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
      }
      .field_with_errors {
        width: 100%;
      }
    }
    .form__select {
      background-color: var(--color-surface);
    }
    .post-form__status--saving {
      background-color: var(--color-gray-800);
    }
    .post-form__status--saved {
      background-color: hsl(142 40% 20%);
    }
    .post-form__status--error {
      background-color: hsl(0 60% 20%);
    }
    .post-form__unpublished-indicator {
      background-color: hsl(45 60% 20%);
    }
  }
}