/* InterActiveMultiSelect - Dropdown Plugin Styles
   Themeable, Bootstrap compatible, framework agnostic
   
   ========== CSS CUSTOM PROPERTIES (VARIABLES) ==========
   Override these in your CSS to customize the plugin
*/

:root {
  /* Button */
  --ias-btn-bg: #fff;
  --ias-btn-border: #ced4da;
  --ias-btn-color: #212529;
  --ias-btn-radius: 0.375rem;
  --ias-btn-min-height: 38px;
  
  /* Focus/Open Glow Effect */
  --ias-focus-border: #0d6efd;
  --ias-focus-glow: rgba(13, 110, 253, 0.35);
  --ias-focus-glow-size: 0 0 0 0.25rem;
  
  /* Tags */
  --ias-tag-bg: #0d6efd;
  --ias-tag-color: #fff;
  --ias-tag-radius: 0.25rem;
  
  /* Dropdown */
  --ias-dropdown-bg: #fff;
  --ias-dropdown-border: #ced4da;
  --ias-dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --ias-dropdown-radius: 0.375rem;
  
  /* Controls */
  --ias-controls-bg: #f8f9fa;
  --ias-controls-border: #e9ecef;
  --ias-select-all-color: #198754;
  --ias-clear-color: #dc3545;
  
  /* Search */
  --ias-search-bg: #fff;
  --ias-search-border: #ced4da;
  --ias-search-focus-border: #0d6efd;
  --ias-search-focus-glow: rgba(13, 110, 253, 0.15);
  
  /* List Items */
  --ias-item-color: #212529;
  --ias-item-hover-bg: #f8f9fa;
  --ias-item-selected-bg: #cfe2ff;
  --ias-item-selected-color: #084298;
  
  /* Checkbox/Radio */
  --ias-checkbox-color: #0d6efd;
  --ias-checkbox-size: 1rem;
  
  /* Placeholder */
  --ias-placeholder-color: #6c757d;
  
  /* Arrow */
  --ias-arrow-color: #6c757d;
  --ias-arrow-size: 0.75rem;
}

/* Wrapper */
.ias-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Button */
.ias-btn {
  width: 100%;
  min-height: var(--ias-btn-min-height);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--ias-btn-bg);
  border: 1px solid var(--ias-btn-border);
  border-radius: var(--ias-btn-radius);
  color: var(--ias-btn-color);
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus/Open Glow Effect */
.ias-wrapper.open .ias-btn,
.ias-btn:focus {
  border-color: var(--ias-focus-border);
  outline: 0;
  box-shadow: var(--ias-focus-glow-size) var(--ias-focus-glow);
}

/* Tags container */
.ias-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* When tags are empty, don't take space */
.ias-tags:empty {
  display: none;
}

/* Individual tag */
.ias-tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--ias-tag-bg);
  color: var(--ias-tag-color);
  padding: 0.15rem 0.4rem;
  border-radius: var(--ias-tag-radius);
  font-size: 0.875rem;
  line-height: 1.2;
  max-width: 150px;
}

.ias-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ias-tag-remove {
  margin-left: 0.35rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  opacity: 0.8;
}

/* Placeholder */
.ias-placeholder {
  color: var(--ias-placeholder-color);
  flex: 1;
  text-align: left;
}

/* Arrow */
.ias-arrow {
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: var(--ias-arrow-size);
  color: var(--ias-arrow-color);
  transition: transform 0.2s ease;
  line-height: 1;
}

.ias-wrapper.open .ias-arrow {
  transform: rotate(180deg);
}

/* Dropdown */
.ias-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1055;
  display: none;
  margin-top: 2px;
  background-color: var(--ias-dropdown-bg);
  border: 1px solid var(--ias-dropdown-border);
  border-radius: var(--ias-dropdown-radius);
  box-shadow: var(--ias-dropdown-shadow);
}

.ias-wrapper.open .ias-dropdown {
  display: block;
}

/* Controls */
.ias-controls {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--ias-controls-border);
  background-color: var(--ias-controls-bg);
  border-radius: var(--ias-dropdown-radius) var(--ias-dropdown-radius) 0 0;
}

.ias-controls a {
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
}

.ias-select-all {
  color: var(--ias-select-all-color);
}

.ias-clear {
  color: var(--ias-clear-color);
}

/* Search */
.ias-search {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--ias-controls-border);
}

.ias-search-input {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ias-btn-color);
  background-color: var(--ias-search-bg);
  border: 1px solid var(--ias-search-border);
  border-radius: 0.25rem;
  outline: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ias-search-input:focus {
  border-color: var(--ias-search-focus-border);
  box-shadow: 0 0 0 0.2rem var(--ias-search-focus-glow);
}

.ias-search-input::placeholder {
  color: var(--ias-placeholder-color);
}

/* No Results Message */
.ias-no-results {
  padding: 1rem 0.75rem;
  text-align: center;
  color: var(--ias-placeholder-color);
  font-style: italic;
  font-size: 0.875rem;
}

/* List */
.ias-list {
  max-height: 250px;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Group Header (optgroup) */
.ias-group-header {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ias-placeholder-color);
  background-color: var(--ias-dropdown-bg);
  border-bottom: 1px solid var(--ias-controls-border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ias-group-header + .ias-item {
  padding-left: 1.25rem; /* indent items under group */
}

.ias-group-header ~ .ias-item:not(.ias-group-header ~ .ias-group-header ~ .ias-item) {
  padding-left: 1.25rem;
}

/* Item */
.ias-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--ias-item-color);
  transition: background-color 0.15s ease;
}

/* Hover effect */
.ias-item:hover:not(.disabled) {
  background-color: var(--ias-item-hover-bg, #f8f9fa);
}

/* Keyboard focus indicator */
.ias-item:focus {
  outline: 2px solid var(--ias-focus-border);
  outline-offset: -2px;
}

/* Selected row highlighting */
.ias-item.selected {
  background-color: var(--ias-item-selected-bg);
  color: var(--ias-item-selected-color);
}

/* Checkbox/Radio */
.ias-item input[type="checkbox"],
.ias-item input[type="radio"] {
  width: var(--ias-checkbox-size);
  height: var(--ias-checkbox-size);
  margin: 0;
  margin-right: 0.5rem;
  cursor: pointer;
  accent-color: var(--ias-checkbox-color);
}

.ias-item label {
  flex: 1;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

/* Disabled items */
.ias-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ias-item.disabled input,
.ias-item.disabled label {
  cursor: not-allowed;
}

/* ========== Bootstrap Modal Compatibility ========== */
.modal .ias-wrapper .ias-dropdown {
  z-index: 1056;
}

/* Allow dropdown to overflow modal */
.modal .modal-dialog,
.modal .modal-content,
.modal .modal-body,
.modal [class*="modal-"] {
  overflow: visible !important;
}

/* ========== Scrollbar Styling ========== */
.ias-list::-webkit-scrollbar {
  width: 6px;
}

.ias-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.ias-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

/* ========== Responsive ========== */
@media (max-width: 576px) {
  .ias-dropdown {
    min-width: 100%;
  }
}

/* ==========================================================
   EXAMPLE: Custom Theme Usage
   Add this to YOUR CSS file to customize:
   
   :root {
     --ias-focus-border: #28a745;
     --ias-focus-glow: rgba(40, 167, 69, 0.35);
     --ias-tag-bg: #28a745;
     --ias-checkbox-color: #28a745;
     --ias-item-selected-bg: #d4edda;
     --ias-item-selected-color: #155724;
   }
   
   Or scope to specific element:
   
   #mySelect + .ias-wrapper {
     --ias-tag-bg: #dc3545;
     --ias-checkbox-color: #dc3545;
   }
========================================================== */