/* Form Components */

/* Form Groups */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Labels */
.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.form-label-required::after {
  content: ' *';
  color: var(--color-danger);
}

/* Input Base */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-card);
  border: 2px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--color-border-dashed);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-brand-orange);
  background-color: var(--color-bg-hover);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* Input Sizes */
.form-input-sm,
.form-select-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.form-input-lg,
.form-select-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
}

/* Textarea */
.form-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Select */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--spacing-sm) center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: var(--spacing-xl);
}

/* Checkbox and Radio */
.form-check {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  margin-right: var(--spacing-sm);
  background-color: var(--color-bg-card);
  border: 2px solid var(--color-border-primary);
  border-radius: var(--radius-sm);
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.form-check-input[type="radio"] {
  border-radius: var(--radius-full);
}

.form-check-input:checked {
  background-color: var(--color-brand-orange);
  border-color: var(--color-brand-orange);
}

.form-check-input[type="checkbox"]:checked::after {
  content: '✓';
  display: block;
  text-align: center;
  color: var(--color-text-inverse);
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
}

.form-check-input[type="radio"]:checked::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  margin: 4px;
  background-color: var(--color-text-inverse);
  border-radius: var(--radius-full);
}

.form-check-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* Switch Toggle */
.form-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.form-switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.form-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-hover);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.form-switch-slider::before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.form-switch-input:checked + .form-switch-slider {
  background-color: var(--color-brand-orange);
}

.form-switch-input:checked + .form-switch-slider::before {
  transform: translateX(24px);
}

/* Input Group */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-input {
  border-radius: 0;
  flex: 1;
}

.input-group .form-input:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .form-input:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group-prepend,
.input-group-append {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-md);
  background-color: var(--color-bg-hover);
  border: 2px solid var(--color-border-primary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.input-group-prepend {
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group-append {
  border-left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Form Help Text */
.form-help {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Form Validation States */
.form-input-error,
.form-textarea-error,
.form-select-error {
  border-color: var(--color-danger);
}

.form-input-error:focus,
.form-textarea-error:focus,
.form-select-error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

.form-input-success,
.form-textarea-success,
.form-select-success {
  border-color: var(--color-success);
}

.form-input-success:focus,
.form-textarea-success:focus,
.form-select-success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Fieldset */
.form-fieldset {
  border: 2px dashed var(--color-border-dashed);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.form-fieldset-legend {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  padding: 0 var(--spacing-sm);
  margin-left: calc(-1 * var(--spacing-sm));
}

/* File Input */
.form-file {
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
}

.form-file-input {
  position: absolute;
  left: -9999px;
}

.form-file-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-bg-card);
  border: 2px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.form-file:hover .form-file-label {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border-dashed);
  color: var(--color-text-primary);
}