/**
 * ============================================================================
 * 📝 K2 Form Utilities
 * ----------------------------------------------------------------------------
 * Unified utility classes for styling form elements consistently across the
 * platform. Includes inputs, textareas, selects, checkboxes, radios, labels,
 * helper text, and validation messages.
 *
 * BEM Naming Convention:
 *   .k2-block           → Block base class (input, label, etc.)
 *   .k2-block--modifier → Size, state, or variant
 *
 * Blocks:
 *   .k2-input           → Text input, number, password, email, search, etc.
 *   .k2-textarea        → Multi-line text input
 *   .k2-select          → Select dropdown
 *   .k2-checkbox        → Checkbox
 *   .k2-radio           → Radio button
 *   .k2-label           → Form field label
 *   .k2-helper-text     → Field hints / descriptions
 *   .k2-error-text      → Validation error message
 *   .k2-success-text    → Validation success message
 *
 * Modifiers:
 *   --sm / --md / --lg → Size variants
 *   --disabled         → Disabled state
 *   --error            → Error state
 *   --success          → Success state
 *
 * Usage Examples:
 * ----------------------------------------------------------------------------
 * Text Input:
 *   <label class="k2-label k2-label--md" for="username">Username</label>
 *   <input type="text" class="k2-input k2-input--md" id="username">
 *   <div class="k2-helper-text k2-helper-text--sm">Enter your username</div>
 *
 * Input with validation:
 *   <input type="text" class="k2-input k2-input--md k2-input--error">
 *   <div class="k2-error-text k2-error-text--sm">Required field</div>
 *
 * Select Input:
 *   <label class="k2-label k2-label--md" for="country">Country</label>
 *   <select class="k2-select k2-input--md" id="country">
 *     <option>India</option>
 *     <option>USA</option>
 *   </select>
 *
 * Checkbox / Radio:
 *   <input type="checkbox" class="k2-checkbox" id="agree">
 *   <label class="k2-label k2-label--sm" for="agree">Agree to terms</label>
 *
 * Textarea:
 *   <textarea class="k2-textarea k2-input--md" rows="4"></textarea>
 * ============================================================================
 */

/* ------------------------------
   Base Inputs / Textarea / Select
------------------------------ */
.k2-input,
.k2-textarea,
.k2-select {
  display: block;
  width: 100%;
  padding: var(--k2-space-2) var(--k2-space-3);
  font-size: var(--k2-font-md);
  font-family: inherit;
  border: 1px solid var(--k2-color-muted);
  border-radius: var(--k2-radius-md);
  background-color: var(--k2-bg-light);
  color: var(--k2-color-dark);
  transition: border-color var(--k2-transition-default), box-shadow var(--k2-transition-default);
}

.k2-input:focus,
.k2-textarea:focus,
.k2-select:focus {
  border-color: var(--k2-color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--k2-color-accent-rgb), 0.2);
}

.k2-input--disabled,
.k2-textarea--disabled,
.k2-select--disabled {
  background-color: var(--k2-bg-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ------------------------------
   Input Sizes
------------------------------ */
.k2-input--sm,
.k2-textarea--sm,
.k2-select--sm { font-size: var(--k2-font-sm); padding: var(--k2-space-1) var(--k2-space-2); border-radius: var(--k2-radius-sm); }
.k2-input--md,
.k2-textarea--md,
.k2-select--md { font-size: var(--k2-font-md); padding: var(--k2-space-2) var(--k2-space-3); border-radius: var(--k2-radius-md); }
.k2-input--lg,
.k2-textarea--lg,
.k2-select--lg { font-size: var(--k2-font-lg); padding: var(--k2-space-3) var(--k2-space-4); border-radius: var(--k2-radius-lg); }

/* ------------------------------
   Input States
------------------------------ */
.k2-input--error,
.k2-textarea--error,
.k2-select--error { border-color: var(--k2-color-danger); }
.k2-input--success,
.k2-textarea--success,
.k2-select--success { border-color: var(--k2-color-success); }

/* ------------------------------
   Checkbox / Radio
------------------------------ */
.k2-checkbox,
.k2-radio {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--k2-color-accent); /* modern browser support */
}

/* Disabled state */
.k2-checkbox:disabled,
.k2-radio:disabled { cursor: not-allowed; opacity: 0.7; }

/* ------------------------------
   Labels
------------------------------ */
.k2-label {
  display: block;
  font-weight: 500;
  color: var(--k2-color-dark);
  margin-bottom: var(--k2-space-1);
}
.k2-label--sm { font-size: var(--k2-font-sm); }
.k2-label--md { font-size: var(--k2-font-md); }
.k2-label--lg { font-size: var(--k2-font-lg); }

/* ------------------------------
   Helper / Validation Text
------------------------------ */
.k2-helper-text {
  display: block;
  font-size: var(--k2-font-sm);
  color: var(--k2-color-muted);
  margin-top: var(--k2-space-1);
}
.k2-helper-text--sm { font-size: var(--k2-font-xs); }
.k2-helper-text--md { font-size: var(--k2-font-sm); }
.k2-helper-text--lg { font-size: var(--k2-font-md); }

.k2-error-text {
  display: block;
  font-size: var(--k2-font-sm);
  color: var(--k2-color-danger);
  margin-top: var(--k2-space-1);
}
.k2-success-text {
  display: block;
  font-size: var(--k2-font-sm);
  color: var(--k2-color-success);
  margin-top: var(--k2-space-1);
}
.k2-error-text--sm, .k2-success-text--sm { font-size: var(--k2-font-xs); }
.k2-error-text--md, .k2-success-text--md { font-size: var(--k2-font-sm); }
.k2-error-text--lg, .k2-success-text--lg { font-size: var(--k2-font-md); }