/**
 * Form Input Components
 * Types: text, email, password, number, textarea, select, checkbox, radio
 * Sizes: sm, md, lg
 * States: default, focus, error, success, disabled
 *
 * @author Amit Haridas, ConcreteInfo
 */

/* ============================================
   FORM GROUP
   ============================================ */
.form-group {
  margin-bottom: var(--spacing-5);
}

.form-row {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
}

.form-row > * {
  flex: 1;
}

/* ============================================
   LABELS
   ============================================ */
.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

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

.form-hint {
  margin-top: var(--spacing-1-5);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.form-error {
  margin-top: var(--spacing-1-5);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.form-error::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: var(--color-danger);
  border-radius: var(--radius-full);
}

/* ============================================
   INPUT BASE
   ============================================ */
.input,
.form-control,
.form-input,
.form-text {
  width: 100%;
  box-sizing: border-box;
  height: 2.25rem; /* Fixed height for consistency - 36px */
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.input::placeholder,
.form-control::placeholder,
.form-input::placeholder,
.form-text::placeholder {
  color: var(--text-tertiary);
}

.input:hover,
.form-control:hover,
.form-input:hover,
.form-text:hover {
  border-color: var(--border-strong);
}

.input:focus,
.form-control:focus,
.form-input:focus,
.form-text:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-brand-100);
}


/* ============================================
   INPUT STATES
   ============================================ */
.input--error,
.form-control--error,
.input.is-invalid,
.form-control.is-invalid {
  border-color: var(--color-danger);
  background-color: var(--color-danger-light);
}

.input--error:focus,
.form-control--error:focus,
.input.is-invalid:focus,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px hsl(0, 84%, 95%);
}

.input--success,
.form-control--success,
.input.is-valid,
.form-control.is-valid {
  border-color: var(--color-success);
  background-color: var(--color-success-light);
}

.input--success:focus,
.form-control--success:focus,
.input.is-valid:focus,
.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px hsl(142, 76%, 95%);
}

.input:disabled,
.form-control:disabled,
.input--disabled,
.form-control--disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ============================================
   INPUT SIZES
   ============================================ */
.input--sm,
.input-sm {
  height: 1.875rem; /* 30px */
  padding: var(--spacing-1-5) var(--spacing-2-5);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.input--lg,
.input-lg {
  height: 2.625rem; /* 42px */
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-lg);
}

/* ============================================
   SELECT
   Full base styles included so .select is self-contained
   (no need to also apply .input on <select> elements)
   ============================================ */
.select,
.form-select {
  /* Base input styles */
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* Fixed height matching inputs */
  height: 2.25rem; /* 36px */
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
  /* Dropdown arrow */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237a7878' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2-5) center;
  background-size: 0.875rem 0.875rem;
  padding-right: var(--spacing-8);
  cursor: pointer;
  vertical-align: middle;
}

.select:hover,
.form-select:hover {
  border-color: var(--border-strong);
}

.select:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-brand-100);
}

.select:disabled,
.form-select:disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── Select readability baseline — theme-aware, both modes ───────────
   Guarantees the selected value AND the native <option> popup are
   always legible. Plain <select> elements otherwise inherit a light
   text colour in dark mode (Tailwind's `color: inherit`) over a
   default light UA background → white-on-white. Element-level
   specificity, so .select / .form-select / Tailwind classes still win. */
select {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}
select option,
select optgroup {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}
/* Keep the native dropdown popup in the correct colour scheme per mode */
:root { color-scheme: light; }


/* Size variants */
.select--sm,
.select-sm {
  height: 1.875rem; /* 30px */
  padding: var(--spacing-1-5) var(--spacing-2-5);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  padding-right: var(--spacing-7);
  background-size: 0.75rem 0.75rem;
}

.select--lg,
.select-lg {
  height: 2.625rem; /* 42px */
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-lg);
  padding-right: var(--spacing-10);
}

/* Error state */
.select--error,
.select.is-invalid {
  border-color: var(--color-danger);
  background-color: var(--color-danger-light);
}

/* Success state */
.select--success,
.select.is-valid {
  border-color: var(--color-success);
  background-color: var(--color-success-light);
}

/* ============================================
   TEXTAREA
   ============================================ */
.textarea,
textarea.input {
  resize: vertical;
  min-height: 100px;
}

/* ============================================
   CHECKBOX & RADIO
   ============================================ */
.checkbox,
.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.checkbox__input,
.radio__input,
.form-check-input {
  appearance: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--border-default);
  background-color: var(--bg-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 0.125rem;
}

.checkbox__input,
.form-check-input[type="checkbox"] {
  border-radius: var(--radius-sm);
}

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

.checkbox__input:hover,
.radio__input:hover,
.form-check-input:hover {
  border-color: var(--color-primary);
}

.checkbox__input:checked,
.radio__input:checked,
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox__input:checked {
  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='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.radio__input:checked::after,
.form-check-input[type="radio"]:checked::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: white;
  border-radius: var(--radius-full);
  margin: 0.25rem;
}

.checkbox__input:focus,
.radio__input:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--color-brand-100);
  outline: none;
}

/* ============================================
   INPUT GROUP
   ============================================ */
.input-group {
  display: flex;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-brand-100);
}

.input-group .input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.input-group .input:focus {
  box-shadow: none;
}

.input-group__prepend,
.input-group__append {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--spacing-4);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.input-group__prepend {
  border-right: 1px solid var(--border-subtle);
}

.input-group__append {
  border-left: 1px solid var(--border-subtle);
}

/* ============================================ */
/*   FORM SWITCH (toggle)                       */
/* ============================================ */
.form-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.form-switch input[type="checkbox"] {
  appearance: none;
  width: 2.25rem;
  height: 1.25rem;
  background-color: var(--color-gray-300);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.form-switch input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background-color: white;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast);
}

.form-switch input[type="checkbox"]:checked {
  background-color: var(--color-primary);
}

.form-switch input[type="checkbox"]:checked::after {
  transform: translateX(1rem);
}

.form-switch input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-100);
}

/* ============================================
   FORM SECTION
   ============================================ */
.form-section {
  padding: var(--spacing-6);
  background-color: var(--bg-elevated);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--spacing-6);
}

.form-section__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--border-subtle);
}

.form-section__description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-4);
}