/*
 * Form Input Component Styles
 *
 * A consistent form input system with text inputs, textareas, selects, and checkboxes.
 * Uses the design system tokens for consistent styling.
 *
 * Input Types:
 *   - .form-input       : Text inputs (text, email, password, number, etc.)
 *   - .form-textarea    : Multi-line text input
 *   - .form-select      : Dropdown select menus
 *   - .form-checkbox    : Checkbox inputs with labels
 *   - .form-radio       : Radio button inputs with labels
 *
 * Sizes:
 *   - .form-input-sm    : Small (compact UI)
 *   - (default)         : Medium (standard use)
 *   - .form-input-lg    : Large (prominent forms)
 *
 * States:
 *   - :hover            : Mouse hover
 *   - :focus            : Input focused
 *   - :disabled         : Disabled state
 *   - .has-error        : Error state with validation message
 *   - .has-success      : Success state (valid input)
 *
 * Layout:
 *   - .form-field       : Container for label + input + hint/error
 *   - .form-label       : Label styling
 *   - .form-hint        : Helper text below input
 *   - .form-error       : Error message styling
 *
 * Usage examples:
 *   <div class="form-field">
 *     <label class="form-label" for="email">Email</label>
 *     <input type="email" id="email" class="form-input" placeholder="you@example.com">
 *     <span class="form-hint">We'll never share your email.</span>
 *   </div>
 *
 *   <div class="form-field has-error">
 *     <label class="form-label" for="password">Password</label>
 *     <input type="password" id="password" class="form-input">
 *     <span class="form-error">Password must be at least 8 characters.</span>
 *   </div>
 */

/* ============================================
 * FORM FIELD CONTAINER
 * Wrapper for label, input, and messages
 * ============================================ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-form-label-gap);
  margin-bottom: var(--space-form-gap);
}

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

/* ============================================
 * FORM LABEL
 * ============================================ */
.form-label {
  display: block;
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-neutral-700);
  line-height: 1.4;
}

/* Required field indicator */
.form-label-required::after {
  content: " *";
  color: var(--color-error-500);
}

/* Optional field indicator */
.form-label-optional::after {
  content: " (optional)";
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-neutral-500);
}

/* ============================================
 * BASE INPUT STYLES
 * Common styles for text inputs, textareas, and selects
 * ============================================ */
.form-input,
.form-textarea,
.form-select {
  /* Layout */
  display: block;
  width: 100%;

  /* Sizing */
  padding: var(--space-form-input-padding) var(--space-3);
  min-height: 42px;

  /* Typography */
  font-family: var(--font-family-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-neutral-900);

  /* Appearance */
  background-color: var(--color-neutral-white);
  border: 1px solid var(--color-neutral-300);
  border-radius: 6px;

  /* Transitions */
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

/* Placeholder text */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-neutral-400);
  opacity: 1;
}

/* Hover state */
.form-input:hover:not(:disabled):not(:focus),
.form-textarea:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: var(--color-neutral-400);
}

/* Focus state */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Disabled state */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-200);
  color: var(--color-neutral-500);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Read-only state */
.form-input:read-only,
.form-textarea:read-only {
  background-color: var(--color-neutral-50);
  border-color: var(--color-neutral-200);
  cursor: default;
}

.form-input:read-only:focus,
.form-textarea:read-only:focus {
  border-color: var(--color-neutral-300);
  box-shadow: none;
}

/* ============================================
 * ERROR STATE
 * Applied to .form-field or directly to input
 * ============================================ */
.form-field.has-error .form-input,
.form-field.has-error .form-textarea,
.form-field.has-error .form-select,
.form-input.has-error,
.form-textarea.has-error,
.form-select.has-error {
  border-color: var(--color-error-500);
  background-color: var(--color-error-50);
}

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

.form-field.has-error .form-label {
  color: var(--color-error-700);
}

/* ============================================
 * SUCCESS STATE
 * For validated inputs
 * ============================================ */
.form-field.has-success .form-input,
.form-field.has-success .form-textarea,
.form-field.has-success .form-select,
.form-input.has-success,
.form-textarea.has-success,
.form-select.has-success {
  border-color: var(--color-success-500);
  background-color: var(--color-success-50);
}

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

/* ============================================
 * TEXTAREA SPECIFIC
 * ============================================ */
.form-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

.form-textarea-sm {
  min-height: 60px;
}

.form-textarea-lg {
  min-height: 160px;
}

/* Non-resizable textarea */
.form-textarea-fixed {
  resize: none;
}

/* ============================================
 * SELECT SPECIFIC
 * ============================================ */
.form-select {
  /* Custom arrow */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.22 4.22a.75.75 0 0 1 1.06 0L6 6.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.28a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.form-select:disabled {
  cursor: not-allowed;
}

/* Multiple select */
.form-select[multiple] {
  background-image: none;
  padding-right: var(--space-3);
  min-height: 100px;
}

/* ============================================
 * INPUT SIZES
 * ============================================ */

/* Small inputs */
.form-input-sm,
.form-textarea-sm,
.form-select-sm {
  padding: var(--space-1-5) var(--space-2-5);
  min-height: 34px;
  font-size: 0.875rem;
  border-radius: 4px;
}

.form-select-sm {
  background-position: right var(--space-2) center;
  padding-right: var(--space-8);
}

/* Large inputs */
.form-input-lg,
.form-textarea-lg,
.form-select-lg {
  padding: var(--space-3) var(--space-4);
  min-height: 50px;
  font-size: 1.125rem;
  border-radius: 8px;
}

.form-select-lg {
  background-position: right var(--space-4) center;
  padding-right: var(--space-12);
}

/* ============================================
 * HINT & ERROR MESSAGES
 * ============================================ */
.form-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--color-neutral-500);
  margin-top: var(--space-1);
  line-height: 1.4;
}

.form-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  color: var(--color-error-600);
  margin-top: var(--space-1);
  line-height: 1.4;
}

/* Error icon (optional) */
.form-error::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc2626'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
}

.form-success {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  color: var(--color-success-600);
  margin-top: var(--space-1);
  line-height: 1.4;
}

/* Success icon */
.form-success::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
}

/* ============================================
 * CHECKBOX & RADIO BASE STYLES
 * ============================================ */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  cursor: pointer;
}

.form-check-inline {
  display: inline-flex;
  margin-right: var(--space-4);
}

/* Checkbox input */
.form-checkbox,
.form-radio {
  /* Reset */
  appearance: none;
  -webkit-appearance: none;

  /* Size */
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;

  /* Appearance */
  background-color: var(--color-neutral-white);
  border: 1.5px solid var(--color-neutral-300);
  cursor: pointer;

  /* Transitions */
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.form-checkbox {
  border-radius: 4px;
}

.form-radio {
  border-radius: 50%;
}

/* Hover state */
.form-checkbox:hover:not(:disabled):not(:checked),
.form-radio:hover:not(:disabled):not(:checked) {
  border-color: var(--color-primary-400);
}

/* Focus state */
.form-checkbox:focus,
.form-radio:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Checked state - Checkbox */
.form-checkbox:checked {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Checked state - Radio */
.form-radio:checked {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='white'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Indeterminate state - Checkbox only */
.form-checkbox:indeterminate {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Crect x='3' y='7' width='10' height='2' rx='1'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Disabled state */
.form-checkbox:disabled,
.form-radio:disabled {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-200);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-checkbox:disabled:checked,
.form-radio:disabled:checked {
  background-color: var(--color-neutral-300);
  border-color: var(--color-neutral-300);
}

/* Error state for checkbox/radio */
.form-field.has-error .form-checkbox,
.form-field.has-error .form-radio,
.form-checkbox.has-error,
.form-radio.has-error {
  border-color: var(--color-error-500);
}

.form-field.has-error .form-checkbox:focus,
.form-field.has-error .form-radio:focus,
.form-checkbox.has-error:focus,
.form-radio.has-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ============================================
 * CHECKBOX & RADIO LABEL
 * ============================================ */
.form-check-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  cursor: pointer;
  user-select: none;
}

.form-check-label:has(+ .form-checkbox:disabled),
.form-check-label:has(+ .form-radio:disabled),
.form-checkbox:disabled + .form-check-label,
.form-radio:disabled + .form-check-label {
  cursor: not-allowed;
  opacity: 0.6;
}

.form-check-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-neutral-800);
  line-height: 1.4;
}

.form-check-description {
  font-size: 0.75rem;
  color: var(--color-neutral-500);
  line-height: 1.4;
}

/* ============================================
 * CHECKBOX & RADIO SIZES
 * ============================================ */

/* Small */
.form-checkbox-sm,
.form-radio-sm {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 3px;
}

.form-checkbox-sm:checked {
  background-size: 10px;
}

/* Large */
.form-checkbox-lg,
.form-radio-lg {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-top: 0;
}

.form-checkbox-lg:checked {
  background-size: 14px;
}

.form-radio-lg:checked {
  background-size: 22px;
}

/* ============================================
 * CHECKBOX & RADIO GROUP
 * ============================================ */
.form-check-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-check-group-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ============================================
 * TOGGLE SWITCH
 * An alternative to checkbox for on/off states
 * ============================================ */
.form-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  cursor: pointer;
}

.form-switch-input {
  /* Hidden but accessible */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--color-neutral-300);
  border-radius: 12px;
  transition: background-color 0.2s ease;
}

.form-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--color-neutral-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

/* Hover */
.form-switch:hover .form-switch-track {
  background-color: var(--color-neutral-400);
}

/* Focus */
.form-switch-input:focus + .form-switch-track {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Checked */
.form-switch-input:checked + .form-switch-track {
  background-color: var(--color-primary-500);
}

.form-switch-input:checked + .form-switch-track .form-switch-thumb {
  transform: translateX(20px);
}

.form-switch:hover .form-switch-input:checked + .form-switch-track {
  background-color: var(--color-primary-600);
}

/* Disabled */
.form-switch-input:disabled + .form-switch-track {
  background-color: var(--color-neutral-200);
  cursor: not-allowed;
}

.form-switch-input:disabled + .form-switch-track .form-switch-thumb {
  background-color: var(--color-neutral-100);
  box-shadow: none;
}

.form-switch:has(.form-switch-input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ============================================
 * INPUT WITH ICON/ADDON
 * ============================================ */
.form-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Icon inside input */
.form-input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-neutral-400);
  pointer-events: none;
}

.form-input-icon-left {
  left: var(--space-3);
}

.form-input-icon-right {
  right: var(--space-3);
}

.form-input-group.has-icon-left .form-input {
  padding-left: var(--space-10);
}

.form-input-group.has-icon-right .form-input {
  padding-right: var(--space-10);
}

/* Text addon */
.form-input-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background-color: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  font-size: 0.875rem;
  color: var(--color-neutral-600);
  white-space: nowrap;
}

.form-input-addon-left {
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

.form-input-addon-right {
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.form-input-group .form-input:first-child:not(:last-child) {
  border-radius: 6px 0 0 6px;
}

.form-input-group .form-input:last-child:not(:first-child) {
  border-radius: 0 6px 6px 0;
}

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

/* ============================================
 * FORM LAYOUT HELPERS
 * ============================================ */

/* Horizontal form (labels on left) */
.form-horizontal .form-field {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}

.form-horizontal .form-label {
  flex: 0 0 160px;
  padding-top: var(--space-2-5);
  text-align: right;
}

.form-horizontal .form-field-content {
  flex: 1;
}

@media (max-width: 640px) {
  .form-horizontal .form-field {
    flex-direction: column;
    gap: var(--space-form-label-gap);
  }

  .form-horizontal .form-label {
    flex: none;
    padding-top: 0;
    text-align: left;
  }
}

/* Inline form */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.form-inline .form-field {
  margin-bottom: 0;
}

/* Form row (multiple fields in a row) */
.form-row {
  display: grid;
  gap: var(--space-4);
}

.form-row-2 {
  grid-template-columns: repeat(2, 1fr);
}

.form-row-3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-row-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 640px) {
  .form-row-2,
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }
}

/* Form section */
.form-section {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-neutral-200);
}

.form-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.form-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-neutral-800);
  margin-bottom: var(--space-2);
}

.form-section-description {
  font-size: 0.875rem;
  color: var(--color-neutral-500);
  margin-bottom: var(--space-4);
}

/* Form actions (submit buttons) */
.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-neutral-200);
}

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

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

.form-actions-between {
  justify-content: space-between;
}