/*!
 * Selectize.js Grayshift Theme v1.0.2
 * Custom template for Selectize.js based on Grayshift.css
 * Fully compatible with Grayshift v1.0.2
 */

/* Import Grayshift variables for consistency */
.selectize-control {
  --selectize-blue: var(--blue);
  --selectize-indigo: var(--indigo);
  --selectize-purple: var(--purple);
  --selectize-pink: var(--pink);
  --selectize-red: var(--red);
  --selectize-orange: var(--orange);
  --selectize-yellow: var(--yellow);
  --selectize-green: var(--green);
  --selectize-teal: var(--teal);
  --selectize-cyan: var(--cyan);
  --selectize-white: var(--white);
  --selectize-gray: var(--gray);
  --selectize-black: var(--black);
  --selectize-light-100: var(--light-100);
  --selectize-light-200: var(--light-200);
  --selectize-light-300: var(--light-300);
  --selectize-light-400: var(--light-400);
  --selectize-light-500: var(--light-500);
  --selectize-light-600: var(--light-600);
  --selectize-light-700: var(--light-700);
  --selectize-light-800: var(--light-800);
  --selectize-light-900: var(--light-900);
  --selectize-dark-100: var(--dark-100);
  --selectize-dark-200: var(--dark-200);
  --selectize-dark-300: var(--dark-300);
  --selectize-dark-400: var(--dark-400);
  --selectize-dark-500: var(--dark-500);
  --selectize-dark-600: var(--dark-600);
  --selectize-dark-700: var(--dark-700);
  --selectize-dark-800: var(--dark-800);
  --selectize-dark-900: var(--dark-900);
  --selectize-primary: var(--primary);
  --selectize-secondary: var(--secondary);
  --selectize-success: var(--success);
  --selectize-info: var(--info);
  --selectize-warning: var(--warning);
  --selectize-danger: var(--danger);
  --selectize-light: var(--light);
  --selectize-dark: var(--dark);
  --selectize-auto: var(--auto);
  --selectize-auto-hover: var(--auto-hover);
  --selectize-auto-active: var(--auto-active);
  --selectize-body-color: var(--body-color);
  --selectize-headings-color: var(--headings-color);
  --selectize-link-color: var(--link-color);
  --selectize-link-hover-color: var(--link-hover-color);
  --selectize-fill-hover-color: var(--fill-hover-color);
  --selectize-body-bg: var(--body-bg);
  --selectize-card-bg: var(--card-bg);
  --selectize-fill-bg: var(--fill-bg);
  --selectize-fill-hover-bg: var(--fill-hover-bg);
  --selectize-form-check-input-bg: var(--form-check-input-bg);
  --selectize-box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 1rem;
}

/* Reset Selectize default styles to match Grayshift */
.selectize-control * {
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
}

/* Single select input - exact match to .form-control */
.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  color: var(--selectize-body-color);
  background-color: var(--selectize-fill-bg);
  background-clip: padding-box;
  border: 0;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .selectize-control.single .selectize-input,
  .selectize-control.multi .selectize-input {
    transition-duration: 1ms;
  }
}

/* Hover state - matches Grayshift hover colors */
.selectize-control.single .selectize-input:hover,
.selectize-control.multi .selectize-input:hover {
  background-color: var(--selectize-fill-hover-bg);
}

/* Dropdown arrow - matches form controls */
.selectize-control.single .selectize-input:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0;
  height: 0;
  margin-top: -2px;
  border: 4px solid transparent;
  border-top-color: var(--selectize-body-color);
  border-bottom: 0;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.selectize-control.single .selectize-input.dropdown-active:after {
  transform: translateY(-50%) rotate(180deg);
  margin-top: 2px;
}

/* Focus state - exact match to :focus in Grayshift */
.selectize-input.focus,
.selectize-input:focus {
  outline: 0;
}

/* Placeholder text */
.selectize-input input::-webkit-input-placeholder {
  color: var(--selectize-body-color);
  opacity: 1;
}

.selectize-input input::-moz-placeholder {
  color: var(--selectize-body-color);
  opacity: 1;
}

.selectize-input input:-ms-input-placeholder {
  color: var(--selectize-body-color);
  opacity: 1;
}

.selectize-input input::-ms-input-placeholder {
  color: var(--selectize-body-color);
  opacity: 1;
}

.selectize-input input::placeholder {
  color: var(--selectize-body-color);
  opacity: 1;
}

/* Multi-select specific styles */
.selectize-control.multi .selectize-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.7rem;
  padding: 0.375rem 1rem;
}

.selectize-control.multi .selectize-input.has-items {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Selected items in multi-select - matches .btn-primary */
.selectize-control.multi .selectize-input > div {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--selectize-white);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: var(--selectize-primary);
  border: 0;
  border-radius: 0.25rem;
  transition: color 0.3s ease, background-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .selectize-control.multi .selectize-input > div {
    transition-duration: 1ms;
  }
}

.selectize-control.multi .selectize-input > div:hover {
  color: var(--selectize-white);
  background-color: #0b5ed7;
}

.selectize-control.multi .selectize-input > div.active {
  color: var(--selectize-white);
  background-color: #0a58ca;
}

/* Remove button in selected items */
.selectize-control.multi .selectize-input > div .remove {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 0.5rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--selectize-white);
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.selectize-control.multi .selectize-input > div .remove:hover {
  opacity: 1;
}

/* Input field inside selectize */
.selectize-input > input {
  flex: 1 0 auto;
  min-width: 3rem;
  max-width: 100%;
  padding: 0;
  margin: 0.125rem 0;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  color: var(--selectize-body-color);
  line-height: inherit;
}

/* Dropdown menu - exact match to .dropdown-menu */
.selectize-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 12rem;
  padding: 0.75rem;
  margin-top: 0.25rem;
  background-color: var(--selectize-fill-bg);
  background-clip: padding-box;
  border-radius: 0.5rem;
  box-shadow: var(--selectize-box-shadow);
  max-height: 200px;
  overflow-y: auto;
}

.selectize-dropdown.active {
  display: block;
}

.selectize-dropdown [data-selectable] {
  cursor: pointer;
}

/* Dropdown content */
.selectize-dropdown .dropdown-header,
.selectize-dropdown .optgroup-header {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--selectize-headings-color);
  white-space: nowrap;
}

.selectize-dropdown .optgroup {
  padding-top: 0.5rem;
}

.selectize-dropdown .optgroup:first-child {
  padding-top: 0;
}

/* Dropdown items - exact match to .dropdown-item */
.selectize-dropdown .option,
.selectize-dropdown .no-results,
.selectize-dropdown .create {
  display: block;
  width: 100%;
  padding: 0.75rem;
  clear: both;
  font-weight: 500;
  color: var(--selectize-body-color);
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: 0.5rem;
  transition: color 0.3s ease, background-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .selectize-dropdown .option,
  .selectize-dropdown .no-results,
  .selectize-dropdown .create {
    transition-duration: 1ms;
  }
}

.selectize-dropdown .option:hover,
.selectize-dropdown .option.selected,
.selectize-dropdown .option.active,
.selectize-dropdown .create:hover {
  color: var(--selectize-fill-hover-color);
  background-color: var(--selectize-fill-hover-bg);
  outline: 0;
}

/* Selected option in dropdown */
.selectize-dropdown .option.selected {
  color: var(--selectize-white);
  background-color: var(--selectize-primary);
}

.selectize-dropdown .option.selected:hover {
  background-color: #0b5ed7;
}

/* Disabled option */
.selectize-dropdown .option.disabled,
.selectize-dropdown .option[disabled] {
  pointer-events: none;
  opacity: 0.5;
}

/* Loading state */
.selectize-control.loading .selectize-input:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid transparent;
  border-top-color: var(--selectize-body-color);
  border-right-color: var(--selectize-body-color);
  border-radius: 50%;
  animation: selectize-loading 0.6s linear infinite;
}

@keyframes selectize-loading {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Disabled state - matches :disabled in Grayshift */
.selectize-control.disabled .selectize-input,
.selectize-input.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Sizes - match .form-control-sm and .form-control-lg */
.selectize-control.sm .selectize-input {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.selectize-control.lg .selectize-input {
  padding: 1rem;
  font-size: 1.125rem;
}

.selectize-control.sm .selectize-input:after {
  right: 0.75rem;
}

.selectize-control.lg .selectize-input:after {
  right: 1.25rem;
}

/* Theme variants - match .btn-* classes */
.selectize-control.primary .selectize-input > div {
  background-color: var(--selectize-primary);
}

.selectize-control.primary .selectize-input > div:hover {
  background-color: #0b5ed7;
}

.selectize-control.primary .selectize-input > div.active {
  background-color: #0a58ca;
}

.selectize-control.secondary .selectize-input > div {
  background-color: var(--selectize-secondary);
}

.selectize-control.secondary .selectize-input > div:hover {
  background-color: #5c636a;
}

.selectize-control.secondary .selectize-input > div.active {
  background-color: #565e64;
}

.selectize-control.success .selectize-input > div {
  background-color: var(--selectize-success);
}

.selectize-control.success .selectize-input > div:hover {
  background-color: #157347;
}

.selectize-control.success .selectize-input > div.active {
  background-color: #146c43;
}

.selectize-control.info .selectize-input > div {
  color: var(--selectize-black);
  background-color: var(--selectize-info);
}

.selectize-control.info .selectize-input > div:hover {
  background-color: #31d2f2;
}

.selectize-control.info .selectize-input > div.active {
  background-color: #3dd5f3;
}

.selectize-control.warning .selectize-input > div {
  color: var(--selectize-black);
  background-color: var(--selectize-warning);
}

.selectize-control.warning .selectize-input > div:hover {
  background-color: #ffca2c;
}

.selectize-control.warning .selectize-input > div.active {
  background-color: #ffcd39;
}

.selectize-control.danger .selectize-input > div {
  background-color: var(--selectize-danger);
}

.selectize-control.danger .selectize-input > div:hover {
  background-color: #bb2d3b;
}

.selectize-control.danger .selectize-input > div.active {
  background-color: #b02a37;
}

.selectize-control.light .selectize-input > div {
  color: var(--selectize-body-color);
  background-color: var(--selectize-light);
}

.selectize-control.light .selectize-input > div:hover {
  background-color: #e8e8e8;
}

.selectize-control.light .selectize-input > div.active {
  background-color: var(--selectize-light-500);
}

.selectize-control.dark .selectize-input > div {
  background-color: var(--selectize-dark);
}

.selectize-control.dark .selectize-input > div:hover {
  background-color: #444450;
}

.selectize-control.dark .selectize-input > div.active {
  background-color: var(--selectize-dark-300);
}

.selectize-control.auto .selectize-input > div {
  color: var(--selectize-body-color);
  background-color: var(--selectize-auto);
}

.selectize-control.auto .selectize-input > div:hover {
  background-color: var(--selectize-auto-hover);
}

.selectize-control.auto .selectize-input > div.active {
  background-color: var(--selectize-auto-active);
}

/* Dark mode - exact match to Grayshift dark mode */
@media (prefers-color-scheme: dark) {
  .selectize-control {
    --selectize-auto: var(--dark);
    --selectize-auto-hover: #444450;
    --selectize-auto-active: var(--dark-300);
    --selectize-headings-color: var(--white);
    --selectize-link-color: var(--white);
    --selectize-link-hover-color: #e0e0e0;
    --selectize-fill-hover-color: var(--white);
    --selectize-body-bg: var(--dark-700);
    --selectize-card-bg: var(--dark-500);
    --selectize-fill-bg: var(--dark-200);
    --selectize-fill-hover-bg: #545463;
    --selectize-form-check-input-bg: #595969;
    --selectize-box-shadow: none;
  }

  .selectize-control.single .selectize-input:after {
    border-top-color: var(--selectize-body-color);
  }

  .selectize-dropdown {
    background-color: var(--selectize-fill-bg);
  }

  .selectize-dropdown .option:hover,
  .selectize-dropdown .option.active,
  .selectize-dropdown .create:hover {
    color: var(--selectize-fill-hover-color);
    background-color: var(--selectize-fill-hover-bg);
  }

  .selectize-control.loading .selectize-input:after {
    border-top-color: var(--selectize-body-color);
    border-right-color: var(--selectize-body-color);
  }
}

/* Responsive adjustments */
@media (min-width: 576px) {
  .selectize-control.sm\:w-auto {
    width: auto !important;
  }
  
  .selectize-dropdown {
    max-width: 100%;
  }
}

/* RTL support */
.selectize-control.rtl .selectize-input {
  text-align: right;
  padding-right: 1rem;
  padding-left: 2.5rem;
}

.selectize-control.rtl.single .selectize-input:after {
  right: auto;
  left: 1rem;
}

.selectize-control.rtl.multi .selectize-input {
  padding-left: 1rem;
  padding-right: 2.5rem;
}

.selectize-control.rtl.multi .selectize-input > div {
  margin-right: 0;
  margin-left: 0.375rem;
}

.selectize-control.rtl.multi .selectize-input > div .remove {
  margin-left: 0;
  margin-right: 0.5rem;
}

/* Clear button */
.selectize-control .selectize-input .clear {
  position: absolute;
  top: 50%;
  right: 2.5rem;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--selectize-body-color);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.selectize-control .selectize-input .clear:hover {
  opacity: 1;
}

.selectize-control.rtl .selectize-input .clear {
  right: auto;
  left: 2.5rem;
}

/* Remove dropdown header bottom margin for last item */
.selectize-dropdown .dropdown-header:last-child,
.selectize-dropdown .optgroup-header:last-child {
  margin-bottom: 0;
}

/* Fix for input inside multi-select to match Grayshift line-height */
.selectize-input > input {
  line-height: 1.5;
  height: 1.5rem;
}

/* Active state for dropdown items (keyboard navigation) */
.selectize-dropdown .active:not(.selected) {
  color: var(--selectize-fill-hover-color);
  background-color: var(--selectize-fill-hover-bg);
}

/* Create option styling */
.selectize-dropdown .create {
  border-top: 2px solid var(--selectize-fill-bg);
  margin-top: 0.5rem;
  padding-top: 0.875rem;
}

/* Message when no options available */
.selectize-dropdown .no-results {
  color: var(--selectize-body-color);
  opacity: 0.7;
  font-style: italic;
}

/* Ensure dropdown z-index is above modal backdrop */
.selectize-dropdown {
  z-index: 1060;
}