/* Tom Select Custom Styles */
/* Base tom-select.css is self-hosted in vendor/assets/stylesheets/ */
/* and loaded before this file via stylesheet_link_tag in the layout. */
/* !important is only used where the base CSS itself uses !important. */

/* Hide both multi and single selects before TomSelect initializes */
select[data-controller="select"] {
  visibility: hidden;
}

.dropdown-input {
  border-color: #d1d5db !important;
  background-color: white !important;
  font-size: 1rem;
  padding: 0.625rem 0.75rem !important;
}

.dropdown-input::placeholder {
  color: #6b7280 !important;
}

@media (min-width: 640px) {
  .plugin-dropdown_input .dropdown-input {
    font-size: 0.875rem;
  }
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  border: none;
  box-shadow: inset 0 0 0 1px #9ca3af;
}

.ts-dropdown-content {
  padding: 0.375rem 0;
  max-height: 240px;
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: #a2a2a270 #7878780b;
}

.ts-dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.ts-dropdown-content::-webkit-scrollbar-track {
  background: #78787879;
}

.ts-dropdown-content::-webkit-scrollbar-thumb {
  background-color: #a2a2a270;
  border-radius: 3px;
}

.ts-control {
  display: flex;
  min-height: 2.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  cursor: default;
  border-radius: 0.5rem;
  border: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #111827;
  outline: none;
  --tw-ring-inset: inset;
  --tw-ring-color: #d1d5db;
  box-shadow: inset 0 0 0 1px var(--tw-ring-color);
  background-color: white;
}

.ts-control[disabled] {
  cursor: not-allowed;
  background-color: #f3f4f6;
}

.plugin-dropdown_input .dropdown-input {
  outline: none !important;
}

.plugin-dropdown_input .items-placeholder {
  display: block !important;
}

.plugin-dropdown_input.has-items .items-placeholder {
  display: none !important;
}

.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
  display: block !important;
}

.ts-dropdown .active.create {
  cursor: pointer;
  background-color: #f3f4f6;
  color: #111827;
}

.loading-more-results {
  cursor: default !important;
}

.disabled .ts-control {
  cursor: not-allowed !important;
}

@media (min-width: 640px) {
  .ts-control {
    font-size: 0.875rem;
  }
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input,
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  cursor: text;
}

.ts-dropdown [data-selectable] .highlight {
  background-color: rgba(249, 115, 22, 0.2);
}

.input-active {
  border-radius: 0.5rem;
}

/* Consistent border for active/focused state - matches search input */
.ts-wrapper.input-active .ts-control,
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
  --tw-ring-color: #9ca3af;
}

.ts-wrapper {
  background-color: white;
  border-radius: 0.5rem;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background-color: transparent;
}

/* !important needed: base has background: none !important on .ts-control > input */
.ts-control input {
  margin: 0 !important;
  background-color: white !important;
  font-size: 1rem;
}

.ts-control input::placeholder {
  color: #6b7280;
}

@media (min-width: 640px) {
  .ts-control input {
    font-size: 0.875rem;
  }
}

/* !important needed: base has padding-right: max(...) !important on .ts-control:not(.rtl) */
.ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single .ts-control {
  padding-right: 2rem !important;
}

/* Collapse input in single selects to prevent extra line/space */
/* !important needed: base has display/padding/margin !important on .ts-control > input */
.ts-wrapper.single .ts-control > input {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Single select text color - match placeholder styling for consistency */
.ts-wrapper.single .ts-control .item {
  color: #6b7280;
}

.ts-wrapper.plugin-remove_button .item {
  border-radius: 0.375rem;
}

.ts-wrapper.plugin-remove_button .item .remove::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23737373'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  display: block;
  width: 1rem;
  height: 1rem;
  background-position: center;
  background-repeat: no-repeat;
}

.ts-wrapper.plugin-remove_button .item .remove {
  font-size: 0 !important;
  margin: 0.125rem 0.25rem 0.125rem 0.125rem;
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border: 0 !important;
  padding: 0.25rem !important;
  line-height: 1 !important;
  color: #6b7280;
  margin-left: 0.125rem !important;
}

.ts-dropdown {
  z-index: 40;
  margin: 0 !important;
  margin-top: 2px !important;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  background-color: white;
}

.ts-dropdown .create {
  margin: 0 0.375rem;
  cursor: default;
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
}

.ts-dropdown [data-selectable].option,
.ts-dropdown .no-results {
  margin: 0 0.375rem;
  cursor: default;
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
}

.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
  margin: 0 0.375rem;
  cursor: not-allowed;
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
}

.ts-dropdown [data-selectable].option,
.ts-dropdown .ts-dropdown .create {
  cursor: pointer;
}

.ts-dropdown .active {
  background-color: #f3f4f6;
  color: #111827;
}

.ts-dropdown .spinner {
  height: auto;
  width: auto;
}

.ts-dropdown .spinner:after {
  margin-top: 0.25rem;
  margin-bottom: 0;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-width: 2px;
  padding: 0;
}

.ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  print-color-adjust: exact;
}

/* Add dropdown arrow to multiselect elements */
/* !important needed: base has padding-right: max(...) !important */
.ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.6rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  print-color-adjust: exact;
  padding-right: 2rem !important;
}

.ts-wrapper.multi .ts-control > div {
  margin-right: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background-color: #f3f4f6;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 500;
  color: #111827;
}

/* Ensure items don't overlap with the dropdown arrow */
/* !important needed: base has padding-right: max(...) !important */
.ts-wrapper.multi.has-items .ts-control {
  padding-top: 7px !important;
  padding-right: 2rem !important;
  padding-bottom: 4px !important;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  cursor: default;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  margin-left: -0.125rem !important;
  cursor: pointer;
  border: none;
}

.ts-dropdown .optgroup-header {
  border-top: 1px solid #d1d5db;
  background-color: white;
  font-weight: 600;
  color: #111827;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
  height: fit-content;
  margin-top: 0 !important;
}

.optgroup {
  margin-top: 0.375rem;
}

.optgroup:first-child {
  margin-top: 0;
}

/* !important needed: base has margin: 0 4px !important on .has-items .ts-control > input */
.ts-wrapper.multi.has-items .ts-control > input {
  margin-bottom: 3px !important;
}

.tomselect-checkbox {
  margin-right: 0 !important;
}

.input-hidden.focus {
  border-radius: 0.5rem !important;
  border: 1px solid #d1d5db;
}

/* Count display for multi-select */
.ts-count-display {
  margin-right: auto;
  background-color: transparent !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  font-weight: normal !important;
  pointer-events: none;
  display: none;
  color: #111827;
  line-height: 1.5;
}

/* Show count display when active - use flex for vertical centering */
.ts-control.count-active .ts-count-display {
  display: flex !important;
  align-items: center;
}

/* Hide items when count or external tags is active */
.ts-control.count-active .item,
.ts-control.external-tags-active .item {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep input technically visible for keyboard navigation but make it invisible */
.ts-control.count-active input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure proper vertical centering when count is displayed */
.ts-wrapper.multi.has-items .ts-control:has(.ts-count-display) {
  display: flex !important;
  align-items: center !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Reset padding when external tags are active */
.ts-wrapper.multi.has-items .ts-control.external-tags-active {
  padding: 0.5rem !important;
}

/* Keep placeholder visible when external tags are active */
.plugin-dropdown_input.has-items .ts-control.external-tags-active .items-placeholder {
  display: block !important;
}

/* Reset input margins when external tags are active */
.ts-wrapper.multi.has-items .ts-control.external-tags-active > input {
  margin: 0 !important;
}

/* ==================== */
/* Dark Mode Styles     */
/* ==================== */
@media (prefers-color-scheme: dark) {
  .dropdown-input {
    border-color: #404040 !important;
    background-color: #262626 !important;
    color: white !important;
  }

  .dropdown-input::placeholder {
    color: #737373 !important;
  }

  .plugin-dropdown_input.focus.dropdown-active .ts-control {
    box-shadow: inset 0 0 0 1px #525252;
  }

  .ts-control,
  .full .ts-control {
    color: white;
    --tw-ring-color: #404040;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--tw-ring-color);
    background-color: transparent;
  }

  .ts-control[disabled] {
    background-color: #1a1a1a;
  }

  .ts-dropdown .active.create {
    background-color: #404040;
    color: white;
  }

  .ts-wrapper.input-active .ts-control,
  .ts-wrapper.focus .ts-control,
  .ts-wrapper.dropdown-active .ts-control {
    --tw-ring-color: #525252;
  }

  .ts-wrapper {
    background-color: #262626;
  }

  /* !important needed: base has background: none !important on .ts-control > input */
  .ts-control input {
    background-color: #262626 !important;
    color: white;
  }

  .ts-wrapper.single .ts-control .item {
    color: #a3a3a3;
  }

  .ts-control input::placeholder {
    color: #737373;
  }

  .ts-dropdown {
    border-color: #404040;
    background-color: #262626;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  }

  .ts-dropdown .active {
    background-color: #404040;
    color: white;
  }

  .ts-dropdown .option {
    color: #e5e5e5;
  }

  .ts-dropdown .no-results {
    color: #e5e5e5;
  }

  .ts-dropdown .create {
    color: #e5e5e5;
  }

  .ts-dropdown-content {
    background-color: #262626;
  }

  .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a3a3a3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

  .ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a3a3a3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e");
  }

  .ts-wrapper.multi .ts-control > div {
    background-color: #404040;
    color: white;
  }

  .ts-dropdown .optgroup-header {
    border-top-color: #404040;
    background-color: #262626;
    color: white;
  }

  .input-hidden.focus {
    border-color: #404040;
  }

  .ts-count-display {
    color: white;
  }
}