/**
 * Modern Form Controls - Desktop Only
 * 
 * CRITICAL: All styles in this file are wrapped in @media (min-width: 1024px)
 * to ensure mobile and tablet layouts remain completely unchanged.
 * 
 * This file provides modern styling for:
 * - Text inputs
 * - Select dropdowns
 * - Checkboxes
 * - Radio buttons
 * - Textareas
 * - Focus states
 * - Transitions
 * 
 * Requirements: 13.1, 13.2, 13.3, 13.4, 13.5
 */

/* ============================================
   DESKTOP ONLY - Modern Form Controls
   ============================================ */

@media (min-width: 1024px) {
  
  /* ============================================
     Text Inputs & Textareas
     ============================================ */
  
  .form-control {
    border-radius: var(--radius-lg, 0.75rem);
    border: 1px solid var(--color-neutral-300, #D1D5DB);
    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-normal, 1.5);
    color: var(--color-neutral-900, #111827);
    background-color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all var(--transition-fast, 150ms cubic-bezier(0.4, 0, 0.2, 1));
  }
  
  .form-control:hover {
    border-color: var(--color-neutral-400, #9CA3AF);
  }
  
  .form-control:focus {
    outline: none;
    border-color: var(--color-primary-500, #0071E3);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1),
                0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: white;
  }
  
  .form-control::placeholder {
    color: var(--color-neutral-400, #9CA3AF);
  }
  
  .form-control:disabled {
    background-color: var(--color-neutral-100, #F3F4F6);
    color: var(--color-neutral-500, #6B7280);
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  /* Textarea specific styling */
  textarea.form-control {
    resize: vertical;
    min-height: 80px;
  }
  
  /* Input groups */
  .input-group .form-control {
    border-radius: 0;
  }
  
  .input-group .form-control:first-child {
    border-top-left-radius: var(--radius-lg, 0.75rem);
    border-bottom-left-radius: var(--radius-lg, 0.75rem);
  }
  
  .input-group .form-control:last-child {
    border-top-right-radius: var(--radius-lg, 0.75rem);
    border-bottom-right-radius: var(--radius-lg, 0.75rem);
  }
  
  /* ============================================
     Select Dropdowns
     ============================================ */
  
  .form-select {
    border-radius: var(--radius-lg, 0.75rem);
    border: 1px solid var(--color-neutral-300, #D1D5DB);
    padding: var(--spacing-3, 0.75rem) var(--spacing-10, 2.5rem) var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-normal, 1.5);
    color: var(--color-neutral-900, #111827);
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236B7280' d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-4, 1rem) center;
    background-size: 16px 16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms cubic-bezier(0.4, 0, 0.2, 1));
  }
  
  .form-select:hover {
    border-color: var(--color-neutral-400, #9CA3AF);
  }
  
  .form-select:focus {
    outline: none;
    border-color: var(--color-primary-500, #0071E3);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1),
                0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: white;
  }
  
  .form-select:disabled {
    background-color: var(--color-neutral-100, #F3F4F6);
    color: var(--color-neutral-500, #6B7280);
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  /* Multiple select */
  .form-select[multiple] {
    padding-right: var(--spacing-4, 1rem);
    background-image: none;
  }
  
  /* ============================================
     Checkboxes
     ============================================ */
  
  .form-check-input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--color-neutral-300, #D1D5DB);
    border-radius: var(--radius-sm, 0.375rem);
    background-color: white;
    background-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms cubic-bezier(0.4, 0, 0.2, 1));
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    flex-shrink: 0;
  }
  
  .form-check-input[type="checkbox"]:hover {
    border-color: var(--color-primary-400, #8098F9);
  }
  
  .form-check-input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--color-primary-500, #0071E3);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }
  
  .form-check-input[type="checkbox"]:checked {
    background-color: var(--color-primary-600, #5568D3);
    border-color: var(--color-primary-600, #5568D3);
    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 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
  }
  
  .form-check-input[type="checkbox"]:checked:hover {
    background-color: var(--color-primary-700, #4453B8);
    border-color: var(--color-primary-700, #4453B8);
  }
  
  .form-check-input[type="checkbox"]:disabled {
    background-color: var(--color-neutral-100, #F3F4F6);
    border-color: var(--color-neutral-300, #D1D5DB);
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--color-primary-600, #5568D3);
    border-color: var(--color-primary-600, #5568D3);
    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='M4 8a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7A.5.5 0 014 8z'/%3E%3C/svg%3E");
  }
  
  /* ============================================
     Radio Buttons
     ============================================ */
  
  .form-check-input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--color-neutral-300, #D1D5DB);
    border-radius: var(--radius-full, 9999px);
    background-color: white;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms cubic-bezier(0.4, 0, 0.2, 1));
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    flex-shrink: 0;
  }
  
  .form-check-input[type="radio"]:hover {
    border-color: var(--color-primary-400, #8098F9);
  }
  
  .form-check-input[type="radio"]:focus {
    outline: none;
    border-color: var(--color-primary-500, #0071E3);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }
  
  .form-check-input[type="radio"]:checked {
    background-color: white;
    border-color: var(--color-primary-600, #5568D3);
    border-width: 5px;
  }
  
  .form-check-input[type="radio"]:checked:hover {
    border-color: var(--color-primary-700, #4453B8);
  }
  
  .form-check-input[type="radio"]:disabled {
    background-color: var(--color-neutral-100, #F3F4F6);
    border-color: var(--color-neutral-300, #D1D5DB);
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  /* ============================================
     Form Check Labels
     ============================================ */
  
  .form-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    padding-left: 0;
  }
  
  .form-check-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-neutral-700, #374151);
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast, 150ms cubic-bezier(0.4, 0, 0.2, 1));
  }
  
  .form-check-input:disabled ~ .form-check-label {
    color: var(--color-neutral-500, #6B7280);
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  /* ============================================
     Switch (Toggle)
     ============================================ */
  
  .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--color-neutral-300, #D1D5DB);
    border: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='white'/%3E%3C/svg%3E");
    background-position: left 0.125rem center;
    background-size: 1rem;
    transition: all var(--transition-base, 250ms cubic-bezier(0.4, 0, 0.2, 1));
  }
  
  .form-switch .form-check-input:hover {
    background-color: var(--color-neutral-400, #9CA3AF);
  }
  
  .form-switch .form-check-input:focus {
    background-color: var(--color-neutral-300, #D1D5DB);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }
  
  .form-switch .form-check-input:checked {
    background-color: var(--color-primary-600, #5568D3);
    background-position: right 0.125rem center;
    border: none;
  }
  
  .form-switch .form-check-input:checked:hover {
    background-color: var(--color-primary-700, #4453B8);
  }
  
  .form-switch .form-check-input:disabled {
    background-color: var(--color-neutral-200, #E5E7EB);
    opacity: 0.5;
  }
  
  /* ============================================
     Form Labels
     ============================================ */
  
  .form-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-neutral-700, #374151);
    margin-bottom: var(--spacing-2, 0.5rem);
    display: inline-block;
  }
  
  /* Required indicator */
  .form-label .text-danger,
  .form-label .required {
    color: var(--color-error, #EF4444);
    margin-left: 0.125rem;
  }
  
  /* ============================================
     Form Validation States
     ============================================ */
  
  .form-control.is-valid,
  .form-select.is-valid {
    border-color: var(--color-success, #10B981);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2310B981'%3E%3Cpath d='M12.736 3.97a.733.733 0 011.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 01-1.065.02L3.217 8.384a.757.757 0 010-1.06.733.733 0 011.047 0l3.052 3.093 5.4-6.425a.247.247 0 01.02-.022z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  }
  
  .form-control.is-valid:focus,
  .form-select.is-valid:focus {
    border-color: var(--color-success, #10B981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  }
  
  .form-control.is-invalid,
  .form-select.is-invalid {
    border-color: var(--color-error, #EF4444);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EF4444'%3E%3Cpath d='M8 15A7 7 0 118 1a7 7 0 010 14zm0-1A6 6 0 108 2a6 6 0 000 12zm0-9a1 1 0 011 1v3a1 1 0 01-2 0V6a1 1 0 011-1zm0 7a1 1 0 110-2 1 1 0 010 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  }
  
  .form-control.is-invalid:focus,
  .form-select.is-invalid:focus {
    border-color: var(--color-error, #EF4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  }
  
  .valid-feedback {
    display: none;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-success, #10B981);
    margin-top: var(--spacing-1, 0.25rem);
  }
  
  .invalid-feedback {
    display: none;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-error, #EF4444);
    margin-top: var(--spacing-1, 0.25rem);
  }
  
  .is-valid ~ .valid-feedback {
    display: block;
  }
  
  .is-invalid ~ .invalid-feedback {
    display: block;
  }
  
  /* ============================================
     Form Groups & Spacing
     ============================================ */
  
  .form-group,
  .mb-3 {
    margin-bottom: var(--spacing-4, 1rem);
  }
  
  /* ============================================
     Input Sizing
     ============================================ */
  
  .form-control-sm,
  .form-select-sm {
    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
    font-size: var(--font-size-xs, 0.75rem);
    border-radius: var(--radius-md, 0.5rem);
  }
  
  .form-control-lg,
  .form-select-lg {
    padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
    font-size: var(--font-size-base, 1rem);
    border-radius: var(--radius-xl, 1rem);
  }
  
  /* ============================================
     Dark Mode Support
     ============================================ */
  
  [data-theme="dark"] .form-control,
  [data-theme="dark"] .form-select {
    background-color: var(--color-neutral-800, #1F2937);
    border-color: var(--color-neutral-700, #374151);
    color: var(--color-neutral-100, #F3F4F6);
  }
  
  [data-theme="dark"] .form-control:hover,
  [data-theme="dark"] .form-select:hover {
    border-color: var(--color-neutral-600, #4B5563);
  }
  
  [data-theme="dark"] .form-control:focus,
  [data-theme="dark"] .form-select:focus {
    background-color: var(--color-neutral-800, #1F2937);
    border-color: var(--color-primary-500, #0071E3);
  }
  
  [data-theme="dark"] .form-control::placeholder {
    color: var(--color-neutral-500, #6B7280);
  }
  
  [data-theme="dark"] .form-check-input[type="checkbox"],
  [data-theme="dark"] .form-check-input[type="radio"] {
    background-color: var(--color-neutral-800, #1F2937);
    border-color: var(--color-neutral-600, #4B5563);
  }
  
  [data-theme="dark"] .form-check-label,
  [data-theme="dark"] .form-label {
    color: var(--color-neutral-200, #E5E7EB);
  }
  
  /* ============================================
     Accessibility - Reduced Motion
     ============================================ */
  
  @media (prefers-reduced-motion: reduce) {
    .form-control,
    .form-select,
    .form-check-input,
    .form-switch .form-check-input {
      transition-duration: 0.01ms !important;
    }
  }
  
  /* ============================================
     Focus Visible (Keyboard Navigation)
     ============================================ */
  
  .form-control:focus-visible,
  .form-select:focus-visible,
  .form-check-input:focus-visible {
    outline: 2px solid var(--color-primary-500, #0071E3);
    outline-offset: 2px;
  }
  
} /* End of @media (min-width: 1024px) */