/* ============================================
   Form Input Components
   Unified styles for all form elements
   Uses design system variables from variables.css
   ============================================ */

/* ============================================
   Form-specific CSS Variables
   Extends the design system with form-specific values
   ============================================ */

/* Global autofill color scheme override */
@supports (-webkit-appearance: none) {
  input:-webkit-autofill {
    color-scheme: dark;
  }
}


:root {
  /* Form Input Dimensions */
  --input-height: 48px;
  --input-height-sm: 36px;
  --input-height-lg: 56px;
  --input-padding-x: 1rem;
  --input-padding-y: 0.75rem;
  --input-font-size: 1rem;  /* 16px - direct value to avoid variable chaining */
  --input-line-height: 1.5;
  --input-border-radius: 0.375rem;

  /* Form Input Colors - Match pricing card glass morphism */
  --input-bg: rgba(40, 40, 40, 0.6);
  --input-bg-hover: rgba(45, 45, 45, 0.8);
  --input-bg-focus: rgba(35, 35, 35, 0.9);
  --input-bg-disabled: rgba(40, 40, 40, 0.3);

  /* Form Input Borders - Match card styling */
  --input-border-width: 1px;
  --input-border-color: rgba(255, 255, 255, 0.08);
  --input-border-hover: rgba(255, 255, 255, 0.12);
  --input-border-focus: rgba(var(--brand-primary-rgb), 0.4);
  --input-border-error: rgba(249, 44, 92, 0.4);
  --input-border-success: rgba(34, 197, 94, 0.4);

  /* Form Input Text */
  --input-text-color: rgba(255, 255, 255, 0.95);
  --input-text-muted: rgba(255, 255, 255, 0.7);
  --input-placeholder-color: rgba(255, 255, 255, 0.5);

  /* Form Input Shadows - Match card shadows */
  --input-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  --input-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --input-focus-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
  --input-error-shadow: 0 0 0 2px rgba(249, 44, 92, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
  --input-success-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);

  /* Toggle Switch Variables */
  --toggle-width: 48px;
  --toggle-height: 24px;
  --toggle-thumb-size: 18px;
  --toggle-thumb-offset: 3px;
  --toggle-bg-off: rgba(113, 44, 249, 0.2);
  --toggle-bg-on: var(--brand-primary);
  --toggle-border-off: rgba(113, 44, 249, 0.3);
  --toggle-border-on: var(--brand-primary);
  --toggle-thumb-color: var(--text-primary);
  --toggle-transition: var(--transition-base);

  /* Color Picker Variables */
  --color-picker-swatch-size: 48px;
  --color-picker-border: 2px solid rgba(113, 44, 249, 0.3);
  --color-picker-border-hover: 2px solid rgba(113, 44, 249, 0.5);
  --color-picker-text-width: 120px;
}

/* ============================================
   Base Form Field Container
   ============================================ */

.form-field {
  margin-bottom: var(--space-5);
}

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

/* ============================================
   Form Labels
   ============================================ */

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.form-label .required {
  color: var(--color-danger);
  margin-left: var(--space-1);
}

/* ============================================
   Text Input Styles
   ============================================ */

.form-input {
  width: 100%;
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: var(--font-family-base);
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  color: var(--input-text-color);
  background: var(--input-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-shadow);
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


.form-input::placeholder {
  color: var(--input-placeholder-color);
  opacity: 1;
}

.form-input:hover:not(:focus):not(:disabled) {
  background: var(--input-bg-hover);
  border-color: var(--input-border-hover);
  box-shadow: var(--input-hover-shadow);
  transform: translateY(-2px);
}

.form-input:focus {
  outline: none;
  background: var(--input-bg-focus);
  border-color: var(--input-border-focus);
  box-shadow: var(--input-focus-shadow);
  transform: translateY(-2px);
}

.form-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--input-bg-disabled);
}

/* Autofill styles - maintain dark theme */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--input-text-color);
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 0 1000px var(--input-bg), var(--input-shadow);
}

.form-input:-webkit-autofill:hover {
  box-shadow: inset 0 0 0 1000px var(--input-bg-hover), var(--input-hover-shadow);
}

.form-input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--input-bg-focus), var(--input-focus-shadow);
}

/* Firefox autofill */
.form-input:autofill {
  background: var(--input-bg);
  color: var(--input-text-color);
}

/* Input Size Variants */
.form-input-sm {
  height: var(--input-height-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.form-input-lg {
  height: var(--input-height-lg);
  font-size: 1.125rem;
  padding: 0.75rem 1.25rem;
}

/* Input State Variants */
.form-input-error {
  border-color: var(--input-border-error);
}

.form-input-error:focus {
  border-color: var(--input-border-error);
  box-shadow: var(--input-error-shadow);
}

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

.form-input-success:focus {
  border-color: var(--input-border-success);
  box-shadow: var(--input-success-shadow);
}

/* ============================================
   Select/Dropdown Styles
   ============================================ */

.form-select {
  width: 100%;
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  padding-right: calc(var(--input-padding-x) * 2.5);
  font-size: var(--input-font-size);
  font-family: var(--font-family-base);
  line-height: var(--input-line-height);
  color: var(--input-text-color);
  background: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 5L8 11L14 5' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--input-padding-x) center;
  background-size: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-shadow);
  transition: all 0.3s ease;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-select:hover:not(:focus):not(:disabled) {
  background-color: var(--input-bg-hover);
  border-color: var(--input-border-hover);
  box-shadow: var(--input-hover-shadow);
  transform: translateY(-2px);
}

.form-select:focus {
  outline: none;
  background-color: var(--input-bg-focus);
  border-color: var(--input-border-focus);
  box-shadow: var(--input-focus-shadow);
  transform: translateY(-2px);
}

.form-select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--input-bg-disabled);
}

/* Select autofill styles */
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus {
  font-family: var(--font-family-base) !important;
  font-size: var(--input-font-size) !important;
  line-height: var(--input-line-height) !important;
  -webkit-text-fill-color: var(--input-text-color);
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 0 1000px var(--input-bg), var(--input-shadow);
}

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

.form-textarea {
  width: 100%;
  min-height: calc(var(--input-height) * 2);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  font-family: var(--font-family-base);
  line-height: var(--input-line-height);
  color: var(--input-text-color);
  background: var(--input-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-shadow);
  resize: vertical;
  transition: all 0.3s ease;
}

.form-textarea::placeholder {
  color: var(--input-placeholder-color);
  opacity: 1;
}

.form-textarea:hover:not(:focus):not(:disabled) {
  background: var(--input-bg-hover);
  border-color: var(--input-border-hover);
  box-shadow: var(--input-hover-shadow);
  transform: translateY(-2px);
}

.form-textarea:focus {
  outline: none;
  background: var(--input-bg-focus);
  border-color: var(--input-border-focus);
  box-shadow: var(--input-focus-shadow);
  transform: translateY(-2px);
}

/* Textarea autofill styles */
.form-textarea:-webkit-autofill,
.form-textarea:-webkit-autofill:hover,
.form-textarea:-webkit-autofill:focus {
  font-family: var(--font-family-base) !important;
  font-size: var(--input-font-size) !important;
  line-height: var(--input-line-height) !important;
  -webkit-text-fill-color: var(--input-text-color);
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 0 1000px var(--input-bg), var(--input-shadow);
}

/* ============================================
   Toggle Switch (Checkbox replacement)
   ============================================ */

.form-field-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: var(--toggle-width);
  height: var(--toggle-height);
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--toggle-bg-off);
  border: var(--input-border-width) solid var(--toggle-border-off);
  transition: var(--toggle-transition);
  border-radius: var(--toggle-height);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: var(--toggle-thumb-size);
  width: var(--toggle-thumb-size);
  left: var(--toggle-thumb-offset);
  bottom: calc((var(--toggle-height) - var(--toggle-thumb-size)) / 2 - var(--input-border-width));
  background: var(--toggle-thumb-color);
  transition: var(--toggle-transition);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--toggle-bg-on);
  border-color: var(--toggle-border-on);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb-size) - var(--toggle-thumb-offset) * 2));
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: var(--input-focus-shadow);
}

.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-label {
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

/* ============================================
   Color Picker Styles
   ============================================ */

.color-picker-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.color-picker-swatch {
  width: var(--color-picker-swatch-size);
  height: var(--color-picker-swatch-size);
  border: var(--color-picker-border);
  border-radius: var(--input-border-radius);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: var(--transition-all-base);
  flex-shrink: 0;
}

.color-picker-swatch:hover {
  border: var(--color-picker-border-hover);
  transform: scale(1.05);
}

.color-picker-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  padding: 0;
}

.color-picker-text {
  flex: 0 0 var(--color-picker-text-width);
  max-width: var(--color-picker-text-width);
}

/* ============================================
   Form Error & Help Text
   ============================================ */

.form-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-danger);
  line-height: var(--leading-tight);
}

.form-help {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-tight);
}

/* ============================================
   Form Group for Inline Elements
   ============================================ */

.form-group {
  margin-bottom: var(--space-4);
}

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

/* ============================================
   Form Actions (Button groups)
   ============================================ */

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.form-actions-centered {
  justify-content: center;
}

.form-actions-end {
  justify-content: flex-end;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Ensure autofill maintains 16px on mobile */
  .form-input:-webkit-autofill,
  .form-select:-webkit-autofill,
  .form-textarea:-webkit-autofill {
    font-size: 16px;
  }

  .form-actions {
    flex-direction: column;
    width: 100%;
  }

  .form-actions .button {
    width: 100%;
  }
}