/**
 * Third-Party Library Overrides
 * Custom styling for Select2, Choices.js, and other external libraries
 * 
 * Note: Using !important here is acceptable as we're intentionally overriding
 * third-party library styles that also use !important or have high specificity.
 */
 /* ============================================
    OTHER OVERRIDES
    ============================================ */
  .progress {
    background-color: var(--bg-tertiary);
  }
  .progress-bar {
    transition: width 0.6s ease;
  }
  .fa-circle {
    font-size: 0.5rem;
    vertical-align: middle;
  }
/* ============================================
   SELECT2 OVERRIDES
   ============================================ */
   .select2-container--default .select2-selection--multiple,
   .select2-container--default .select2-selection--single {
     background-color: var(--bg-tertiary);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     min-height: 38px;
     color: var(--text-primary);
   }
   .select2-container--default .select2-selection--multiple .select2-selection__choice,
   .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
     background-color: var(--bg-tertiary);
     color: var(--text-primary);
     border: 1px solid var(--border-color);
   }
   .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
     color: var(--text-muted);
     margin-right: 5px;
   }
   .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
     color: var(--text-primary);
   }
   .select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: var(--accent-primary);
     color: white;
   }
   .select2-container--default .select2-search--dropdown .select2-search__field {
     background-color: var(--bg-tertiary);
     color: var(--text-primary);
     border: 1px solid var(--border-color);
   }
   .select2-dropdown {
     background: var(--bg-tertiary);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-lg);
     margin-top: 0.5rem;
   }
   .select2-container--default .select2-results__option[aria-selected=true] {
     background-color: var(--bg-tertiary);
   }
   .select2-container--default .select2-selection--single .select2-selection__rendered {
     color: var(--text-primary);
     line-height: 36px;
   }
   .select2-container--default .select2-selection--single .select2-selection__arrow b {
     border-color: var(--text-muted) transparent transparent transparent;
   }
   .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
     border-color: transparent transparent var(--accent-primary) transparent;
   }
   /* ============================================
      CHOICES.JS OVERRIDES
      ============================================ */
   /**
    * Choices.js has deeply nested styles and uses !important extensively.
    * We need to be specific and use !important to override their defaults.
    * 
    * Key issue: Choices.js stylesheet loads after our CSS, so we need high specificity.
    */
   /* Base container */
   .choices {
     background: var(--bg-tertiary);
     border: 1px solid var(--border-color);
     color: var(--text-primary);
     border-radius: var(--border-radius);
   }
   /* Inner container (visible closed select box) */
   .choices__inner {
     background: var(--bg-tertiary);
     border: 1px solid var(--border-color);
     color: var(--text-primary);
     border-radius: var(--border-radius);
     min-height: 38px;
     padding: 0.5rem;
   }
   /* Input field inside choices */
   .choices__input {
     background: var(--bg-tertiary);
     border: none;
     color: var(--text-primary);
     border-radius: var(--border-radius);
   }
   .choices__input:focus {
     outline: none;
     box-shadow: none;
   }
   /* Single select specific styles */
   .choices[data-type*="select-one"] .choices__inner {
     background: var(--bg-tertiary);
     border: 1px solid var(--border-color);
     color: var(--text-primary);
     padding: 0.5rem 1rem;
   }
   .choices[data-type*="select-one"] .choices__placeholder {
     color: var(--text-primary);
     opacity: 1;
   }
   /* Dropdown list - FIX: Border color */
   .choices__list--dropdown {
     background: var(--bg-tertiary) !important;
     border: 1px solid var(--border-color) !important;
     color: var(--text-primary) !important;
     border-radius: var(--border-radius) !important;
     margin-top: 0.25rem !important;
     box-shadow: var(--shadow-lg) !important;
     z-index: 1050 !important;
     text-align: left !important;
     padding: 0.5rem !important;
   }
   
   /* FIX: Hide the multi-select items container when empty (3D-layered menu) */
   .choices__list--multiple {
     display: none !important;
   }
   
   /* FIX: Only show when items are selected */
   .choices__list--multiple:not(:empty) {
     display: flex !important;
     flex-wrap: wrap !important;
     gap: 0.25rem !important;
     padding: 0.25rem !important;
   }

   /* FIX: Dropdown hover state */
   .choices__list--dropdown .choices__item:hover,
   .choices__list--dropdown .choices__item--selectable.is-highlighted {
     background: var(--bg-hover) !important;
     color: var(--text-primary) !important;
   }
   
   /* FIX: Ensure dropdown items have proper cursor */
   .choices__list--dropdown .choices__item--selectable {
     cursor: pointer !important;
   }
   /* Selected items in multi-select - FIX: Removed hardcoded light blue */
   .choices__list--multiple .choices__item {
     background: var(--bg-secondary) !important;
     color: var(--text-primary) !important;
     border: 1px solid var(--border-color) !important;
     border-radius: 4px !important;
     padding: 0.375rem 0.75rem !important;
     margin: 0 !important;
     display: inline-flex !important;
     align-items: center !important;
     gap: 0.5rem !important;
     white-space: nowrap !important;
   }
   
   /* FIX: Dropdown items text should span full width */
   .choices__list--dropdown .choices__item {
     background: var(--bg-tertiary) !important;
     border: none !important;
     color: var(--text-primary) !important;
     border-radius: 0 !important;
     padding: 0.75rem 1rem !important;
     margin: 0 !important;
     width: 100% !important;
     display: block !important;
     text-align: left !important;
   }
   
   /* FIX: Remove button - ensure it only appears once */
   .choices__button {
     background: transparent !important;
     border: none !important;
     color: var(--text-muted) !important;
     opacity: 0.7 !important;
     padding: 0 !important;
     margin: 0 !important;
     cursor: pointer !important;
     display: inline-block !important;
     width: 16px !important;
     height: 16px !important;
     line-height: 1 !important;
     font-size: 1.2rem !important;
     flex-shrink: 0 !important;
   }
   
   .choices__button:hover {
     color: var(--text-primary) !important;
     opacity: 1 !important;
   }
   
   /* FIX: Ensure button doesn't duplicate */
   .choices__list--multiple .choices__item .choices__button {
     position: relative !important;
   }
   
   /* FIX: Hide any duplicate button content */
   .choices__button::before,
   .choices__button::after {
     display: none !important;
   }
  /* Hide the "Press to select" text hint */
   .choices__item--choice::after {
     display: none !important;
     content: none !important;
   }
   
   /* Selected item (highlighted in dropdown) */
   .choices__item--selectable.is-selected {
     background: var(--accent-primary) !important;
     color: white !important;
   }
   
   .choices__item--selectable.is-highlighted {
     background: var(--bg-hover) !important;
     color: var(--text-primary) !important;
   }
   
   /* FIX: Selected and highlighted */
   .choices__list--dropdown .choices__item--selectable.is-selected.is-highlighted {
     background: var(--accent-primary) !important;
     color: white !important;
   }
   /* Disabled state */
   .choices.is-disabled .choices__inner,
   .choices__input[disabled] {
     background: var(--bg-secondary);
     opacity: 0.6;
     cursor: not-allowed;
   }
   /* Focus state for the entire component */
   .choices:focus,
   .choices.is-focused .choices__inner {
     border-color: var(--accent-primary);
     box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
   }
   /* Search input placeholder */
   .choices__input::placeholder {
     color: var(--text-muted);
     opacity: 1;
   }
   /* Dropdown open state */
   .choices.is-open .choices__inner {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border-color: var(--accent-primary);
   }
   /* No results message */
   .choices__item--choice.has-no-results {
     background: var(--bg-tertiary);
     color: var(--text-muted);
   }
   /**
    * Fix for deeply nested components that Choices.js creates dynamically
    * These selectors are very specific to override Choices.js's inline styles
    */
   .choices[data-type*="select"] .choices__inner,
   .choices[data-type*="text"] .choices__inner {
     background-color: var(--bg-tertiary);
     border-color: var(--border-color);
   }
   /* Ensure dropdown always appears correctly */
   .choices__list[aria-expanded="true"] {
     visibility: visible;
     opacity: 1;
   }