// Classy Form Components
// Modern form styling with consistent rounded corners

// ============================================
// Input Groups
// ============================================
.input-group {
  > .form-control,
  > .form-control.is-invalid {
    border-radius: $classy-radius-lg;

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  // Buttons in input groups
  > .btn {
    border-radius: $classy-radius-lg;

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    // Last button in group
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    // First button in group
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  // Input group text
  > .input-group-text {
    border-radius: $classy-radius-lg;

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  // When FormManager appends a sibling `.invalid-feedback` inside the
  // input-group, the trailing button/input-group-text is no longer
  // `:last-child` and the rules above strip its right border-radius.
  // Bootstrap signals this layout with `.has-validation` on the input-group;
  // restore the rounded right corners for the visually-last interactive
  // element (the `:nth-last-child(2)` — i.e. the element before the feedback).
  &.has-validation {
    > .btn:nth-last-child(2),
    > .input-group-text:nth-last-child(2),
    > .form-control:nth-last-child(2) {
      border-top-right-radius: $classy-radius-lg;
      border-bottom-right-radius: $classy-radius-lg;
    }
  }
}

// ============================================
// Form Controls
// ============================================
.form-control,
.form-select {
  border-radius: $classy-radius-lg;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  transition: all 0.2s ease;

  &:focus {
    border-color: $primary;
    box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
    background-color: var(--bs-body-bg);
  }

  // Keep danger styling visible when an invalid field is focused. Without this
  // override the classy `:focus` rule above wins on specificity and the user
  // sees the brand-blue ring instead of the red one Bootstrap normally applies.
  &.is-invalid:focus {
    border-color: $danger;
    box-shadow: 0 0 0 0.25rem rgba($danger, 0.25);
  }

  // // Override Chrome/Safari autofill background color with subtle indicator
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset !important;
    -webkit-text-fill-color: var(--bs-body-color) !important;
    caret-color: var(--bs-body-color);
    border-color: $primary !important;
    box-shadow: 0 0 0 1000px var(--bs-body-bg) inset, 0 0 0 2px rgba($primary, 0.15) !important;
  }
}

// ============================================
// Form Labels & Text
// ============================================
.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

// Form text
.form-text {
  font-size: 0.875rem;
  color: $classy-gray;
}

// ============================================
// Custom Checkboxes & Radios
// ============================================
.form-check-input {
  border-radius: $classy-radius-sm;

  &[type="radio"] {
    border-radius: 50%;
  }

  &:checked {
    background-color: $primary;
    border-color: $primary;
  }

  &:focus {
    border-color: $primary;
    box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
  }
}

// ============================================
// File Drop Zones
// ============================================
[data-file-drop] {
  cursor: pointer;
  border: 2px dashed var(--bs-border-color) !important;
  border-radius: $classy-radius-lg;
  transition: border-color 0.15s ease, background-color 0.15s ease;

  &.file-drop-active {
    border-color: $primary !important;
    background-color: rgba($primary, 0.05);
  }

  &.file-drop-has-file {
    border-color: $success !important;
    border-style: solid !important;
  }

  &.file-drop-error {
    border-color: $danger !important;
  }
}