// ==========================================================================
// Form Components
// Professional Resume Builder - Form Styles
// ==========================================================================

// Base form enhancements
.form-control, .form-select {
  border: 2px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
  background-color: var(--color-white);
  
  &:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.1);
    background-color: var(--color-white);
  }
  
  &:disabled {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-100);
    opacity: 0.6;
  }
  
  &.is-valid {
    border-color: var(--brand-success);
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.1);
  }
  
  &.is-invalid {
    border-color: var(--brand-danger);
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.1);
  }
}

// Form labels
.form-label {
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  
  &.required {
    &::after {
      content: " *";
      color: var(--brand-danger);
      font-weight: 600;
    }
  }
}

// Floating labels
.form-floating {
  position: relative;
  
  .form-control, .form-select {
    height: 3.5rem;
    padding: 1rem 0.75rem;
    
    &:focus, &:not(:placeholder-shown) {
      padding-top: 1.625rem;
      padding-bottom: 0.625rem;
    }
  }
  
  label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 0.75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 2px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    font-weight: 400;
    color: var(--color-gray-500);
  }
  
  .form-control:focus ~ label,
  .form-control:not(:placeholder-shown) ~ label,
  .form-select ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color: var(--brand-primary);
  }
  
  .form-control.is-invalid:focus ~ label,
  .form-control.is-invalid:not(:placeholder-shown) ~ label {
    color: var(--brand-danger);
  }
  
  .form-control.is-valid:focus ~ label,
  .form-control.is-valid:not(:placeholder-shown) ~ label {
    color: var(--brand-success);
  }
}

// Input groups
.input-group {
  .form-control {
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    
    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    
    &:focus {
      z-index: 3;
    }
  }
  
  .input-group-text {
    background-color: var(--color-gray-50);
    border: 2px solid var(--color-gray-200);
    color: var(--color-gray-600);
    font-weight: 500;
    padding: 0.75rem 1rem;
    
    i {
      color: var(--color-gray-400);
    }
  }
}

// Form check (checkboxes and radios)
.form-check {
  margin-bottom: 0.5rem;
  
  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    
    &:checked {
      background-color: var(--brand-primary);
      border-color: var(--brand-primary);
    }
    
    &:focus {
      box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.1);
      border-color: var(--brand-primary);
    }
    
    &[type="radio"] {
      border-radius: 50%;
    }
  }
  
  .form-check-label {
    font-weight: 400;
    color: var(--color-gray-700);
    margin-left: 0.5rem;
    cursor: pointer;
  }
  
  &.form-switch {
    .form-check-input {
      width: 2.5rem;
      height: 1.25rem;
      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='rgba%280,0,0,.25%29'/%3e%3c/svg%3e");
      background-position: left center;
      border-radius: var(--border-radius-full);
      transition: all 0.2s ease;
      
      &:checked {
        background-position: right center;
        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='rgba%28255,255,255,1.0%29'/%3e%3c/svg%3e");
      }
    }
  }
}

// Range inputs
.form-range {
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  appearance: none;
  
  &::-webkit-slider-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background: var(--color-gray-200);
    border-radius: var(--border-radius-full);
  }
  
  &::-webkit-slider-thumb {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--brand-primary);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    
    &:hover {
      transform: scale(1.1);
    }
  }
  
  &::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background: var(--color-gray-200);
    border-radius: var(--border-radius-full);
    border: none;
  }
  
  &::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--brand-primary);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
}

// File inputs
.form-control[type="file"] {
  padding: 0.375rem 0.75rem;
  
  &::file-selector-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem -0.75rem -0.375rem 0;
    margin-inline-end: 0.75rem;
    color: var(--color-gray-600);
    background-color: var(--color-gray-100);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: 2px;
    border-radius: 0;
    transition: all 0.2s ease;
  }
  
  &:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--color-gray-200);
  }
}

// Form validation
.was-validated .form-control:valid,
.form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2322c55e' d='m2.3 6.73.8.8 4.1-4.1-.8-.8L3.1 5.9l-1.6-1.6-.8.8z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 2.4 2.4M8.2 4.6l-2.4 2.4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

// Feedback messages
.valid-feedback {
  color: var(--brand-success);
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.invalid-feedback {
  color: var(--brand-danger);
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

// Custom form controls
.custom-file-upload {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  background: var(--brand-gradient);
  color: var(--color-white);
  border-radius: var(--border-radius-md);
  font-weight: 500;
  transition: all 0.2s ease;
  text-align: center;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }
  
  input[type="file"] {
    display: none;
  }
  
  i {
    margin-right: 0.5rem;
  }
}

// Multi-step form
.multi-step-form {
  .step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    padding: 0;
    list-style: none;
    
    .step {
      flex: 1;
      text-align: center;
      position: relative;
      
      &:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 1.5rem;
        right: -50%;
        width: 100%;
        height: 2px;
        background: var(--color-gray-200);
        z-index: -1;
      }
      
      &.active {
        &:not(:last-child)::after {
          background: var(--brand-primary);
        }
        
        .step-number {
          background: var(--brand-primary);
          color: var(--color-white);
        }
        
        .step-title {
          color: var(--brand-primary);
          font-weight: 600;
        }
      }
      
      &.completed {
        .step-number {
          background: var(--brand-success);
          color: var(--color-white);
          
          &::before {
            content: "✓";
            font-weight: bold;
          }
        }
        
        .step-title {
          color: var(--brand-success);
        }
      }
    }
    
    .step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: var(--color-gray-200);
      color: var(--color-gray-600);
      font-weight: 600;
      margin-bottom: 0.5rem;
      transition: all 0.2s ease;
    }
    
    .step-title {
      font-size: 0.875rem;
      color: var(--color-gray-600);
      margin: 0;
      transition: all 0.2s ease;
    }
  }
  
  .step-content {
    display: none;
    
    &.active {
      display: block;
      animation: fadeIn 0.3s ease-in-out;
    }
  }
  
  .step-actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-100);
    
    .btn {
      min-width: 120px;
    }
  }
}

// Form sections
.form-section {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  
  .section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-gray-100);
    
    i {
      color: var(--brand-primary);
      margin-right: 0.5rem;
    }
  }
  
  .section-description {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-lg);
    font-size: 0.9rem;
  }
}

// Responsive form adjustments
@include media-breakpoint-down(md) {
  .form-floating {
    .form-control, .form-select {
      height: 3.25rem;
      padding: 0.875rem 0.75rem;
    }
  }
  
  .multi-step-form {
    .step-indicator {
      .step-number {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
      }
      
      .step-title {
        font-size: 0.75rem;
      }
    }
    
    .step-actions {
      flex-direction: column;
      gap: 0.75rem;
      
      .btn {
        width: 100%;
        order: 2;
        
        &.btn-outline-secondary {
          order: 1;
        }
      }
    }
  }
  
  .form-section {
    padding: var(--spacing-lg);
    
    .section-title {
      font-size: 1.125rem;
    }
  }
}

// Form animations
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.form-control.is-invalid,
.form-select.is-invalid {
  animation: shake 0.5s ease-in-out;
}

// Loading states
.form-loading {
  position: relative;
  pointer-events: none;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
    z-index: 10;
  }
}

// Form success state
.form-success {
  text-align: center;
  padding: var(--spacing-4xl) var(--spacing-lg);
  
  .success-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--brand-gradient-success);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
    font-size: 2rem;
    animation: successPulse 2s infinite;
  }
  
  h3 {
    color: var(--color-dark);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
  }
  
  p {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-xl);
  }
}

@keyframes successPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}