/* ==========================================================================
   Select2 Multi-Select Overrides (Light Mode: Black | Dark Mode: White)
   ========================================================================== */

/* 1. Light Mode Variables (Default: Black Text & Details) */
:root {
  --s2-bg: #ffffff;
  --s2-border: #cccccc;
  --s2-text: #444;              /* Pure Black text */
  --s2-placeholder: #555555;
  --s2-focus-ring: rgba(0, 0, 0, 0.15);
  --s2-focus-border: #444;

  /* Tags/Pills */
  --s2-tag-bg: #f0f0f0;
  --s2-tag-border: #444;       /* Black outline for tags */
  --s2-tag-text: #444;         /* Black text inside tags */
  --s2-tag-remove-hover: #ef4444;

  /* Dropdown Options */
  --s2-dropdown-bg: #ffffff;
  --s2-option-hover-bg: #444;  /* Inverted black background on hover */
  --s2-option-hover-text: #ffffff;/* White text on hover */
  --s2-option-selected-bg: #e5e5e5;
  --s2-option-selected-text: #444;
}

/* 2. Dark Mode Variables (Inverted: White Text & Details) */
body.dark-mode, 
@media (prefers-color-scheme: dark) {
  :root {
    --s2-bg: #444;
    --s2-border: #444;
    --s2-text: #ffffff;            /* Pure White text */
    --s2-placeholder: #aaa0a0;
    --s2-focus-ring: rgba(255, 255, 255, 0.2);
    --s2-focus-border: #ffffff;

    /* Tags/Pills Dark Mode */
    --s2-tag-bg: #2a2a2a;
    --s2-tag-border: #ffffff;     /* White outline for tags */
    --s2-tag-text: #ffffff;       /* White text inside tags */
    --s2-tag-remove-hover: #f87171;

    /* Dropdown Options Dark Mode */
    --s2-dropdown-bg: #1e1e1e;
    --s2-option-hover-bg: #ffffff;/* Inverted white background on hover */
    --s2-option-hover-text: #444;/* Black text on hover */
    --s2-option-selected-bg: #333333;
    --s2-option-selected-text: #ffffff;
  }
}

/* ==========================================================================
   Select2 Stylesheet Overrides
   ========================================================================== */

/* Main Input Box */
.select2-container--default .select2-selection--multiple {
  background-color: var(--s2-bg) !important;
  border: 1px solid var(--s2-border) !important;
  min-height: 42px !important;
  padding: 2px 6px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focused & Open States */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--s2-focus-border) !important;
  box-shadow: 0 0 0 3px var(--s2-focus-ring) !important;
  outline: none;
}

/* Search Input inside Box */
.select2-container--default .select2-search--inline .select2-search__field {
  color: var(--s2-text) !important;
  font-weight: 500 !important;
}

.select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: var(--s2-placeholder) !important;
}

/* Selected Item Tags / Pills */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--s2-tag-bg) !important;
  border: 1px solid var(--s2-tag-border) !important;
  color: var(--s2-tag-text) !important;
  border-radius: 4px !important;
  padding: 3px 8px 3px 22px !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  margin-top: 5px !important;
  margin-right: 5px !important;
  position: relative !important;
}

/* Tag Close ("x") Button */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--s2-tag-text) !important;
  border-right: none !important;
  background: transparent !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--s2-tag-remove-hover) !important;
  background-color: transparent !important;
}

/* Dropdown Wrapper */
.select2-container--default .select2-dropdown {
  background-color: var(--s2-dropdown-bg) !important;
  border: 1px solid var(--s2-border) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}

/* Dropdown Menu Options */
.select2-container--default .select2-results__option {
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--s2-text) !important;
}

/* Hover & Active Selected Option State */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--s2-option-hover-bg) !important;
  color: var(--s2-option-hover-text) !important;
}

/* Selected Items in Dropdown */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--s2-option-selected-bg) !important;
  color: var(--s2-option-selected-text) !important;
  font-weight: 300 !important;
}

/* Search Field Inside Dropdown (if enabled) */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--s2-bg) !important;
  color: var(--s2-text) !important;
  border: 1px solid var(--s2-border) !important;
}