/**
 * Form Switch Toggle Position Fix
 * 
 * This CSS file fixes the toggle positioning issue for all form-switch elements
 * across the entire application. It ensures the toggle circle moves correctly:
 * - OFF state: circle on the LEFT
 * - ON state: circle on the RIGHT
 * 
 * This fix is theme-agnostic and only handles positioning.
 * Colors and other styling are inherited from the active theme.
 * 
 * Author: Kazitour Development Team
 * Date: October 9, 2025
 */

/* ============================================
   FORM SWITCH POSITIONING FIX
   ============================================ */

/* 
 * Override default form-switch positioning
 * Using high specificity to ensure these rules apply after theme styles
 */
.form-check.form-switch .form-check-input,
.form-switch .form-check-input {
  width: 2.5em !important;
  height: 1.25em !important;
  margin-left: -2.5em !important;
  /* Force initial position to LEFT */
  background-position: left center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  border-radius: 2em !important;
  /* Smooth animation for position change */
  transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
  cursor: pointer !important;
}

/* 
 * Checked state: Move toggle to RIGHT
 * Colors/images are inherited from theme CSS
 */
.form-check.form-switch .form-check-input:checked,
.form-switch .form-check-input:checked {
  background-position: right center !important;
}

/* 
 * Disabled state
 */
.form-check.form-switch .form-check-input:disabled,
.form-switch .form-check-input:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ============================================
   DARK MODE COMPATIBILITY
   ============================================ */

/* Ensure dark mode toggles also work correctly */
.dark-mode .form-check.form-switch .form-check-input,
.dark-mode .form-switch .form-check-input {
  background-position: left center !important;
}

.dark-mode .form-check.form-switch .form-check-input:checked,
.dark-mode .form-switch .form-check-input:checked {
  background-position: right center !important;
}