/* Tom Select */

select[multiple][data-controller="select"] {
  visibility: hidden;
}

.dropdown-input {
  border-color: #d4d4d8 !important;
  background-color: #ffffff !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  font-size: 1rem;
  line-height: 1.25rem;
}

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

.dark .dropdown-input {
  border-color: #525252 !important;
  background-color: #404040 !important;
}

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

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  border: none !important;
}

.ts-dropdown-content {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  max-height: 240px;
}

.ts-dropdown-content {
  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: 48px;
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  cursor: default;
  border-radius: 0.75rem;
  border-width: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #171717;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  box-shadow: inset 0 0 0 1px #d4d4d8;
  outline: 1px solid transparent;
  outline-offset: 2px;
}

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

.ts-control:focus {
  box-shadow: inset 0 0 0 2px #525252;
}

.dark .ts-control {
  background-color: #404040;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #525252;
}

.dark .ts-control::placeholder {
  color: #d4d4d4;
}

.dark .ts-control:focus {
  box-shadow: inset 0 0 0 2px #737373;
}

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

.dark .ts-control[disabled] {
  background-color: #525252;
}

.ts-control.error {
  border-color: #f87171;
  outline-color: #fca5a5;
}

.ts-control.error:focus {
  outline-color: #ef4444;
}

.dark .ts-control.error {
  border-color: #dc2626;
  outline-color: #ef4444;
}

.plugin-dropdown_input .dropdown-input {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Ensure items-placeholder is visible when no items are selected */
.plugin-dropdown_input .items-placeholder {
  display: block !important;
}

/* Only hide items-placeholder when items are actually selected */
.plugin-dropdown_input.has-items .items-placeholder {
  display: none !important;
}

/* Override the dropdown-active rule to keep placeholder visible when no items selected */
.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
  display: block !important;
}

.ts-dropdown .active.create {
  cursor: pointer;
  background-color: #f5f5f5;
  color: #171717;
}

.dark .ts-dropdown .active.create {
  background-color: #525252;
  color: #ffffff;
}

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

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

@media (min-width: 640px) {
  .ts-control {
    font-size: 1rem; /* text-sm equivalent (14px) for larger screens */
  }
}

.dark .full .ts-control {
  background-color: #404040;
}

.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);
}

.dark .ts-dropdown [data-selectable] .highlight {
  background-color: rgba(234, 179, 8, 0.2);
}

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

.dark .ts-control,
.dark .ts-wrapper.single.input-active .ts-control {
  background-color: #404040;
}

.input-active {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  border-radius: 0.75rem;
  box-shadow: inset 0 0 0 2px hsl(186, 91%, 29%);
}

.dark .input-active {
  box-shadow: inset 0 0 0 2px #737373;
}

.ts-wrapper {
  background-color: #ffffff;
  border-radius: 0.75rem;
}

.dark .ts-wrapper {
  background-color: #404040;
}

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

.ts-control input {
  margin: 0 !important;
  background-color: #ffffff;
  font-size: 1rem;
  line-height: 1.5rem;
}

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

.ts-control input[readonly] {
  cursor: pointer !important;
}

.dark .ts-control input {
  background-color: #262626;
  color: #ffffff;
}

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

@media (min-width: 640px) {
  .ts-control input {
    font-size: 1rem; /* text-sm equivalent (14px) for larger screens */
  }
}

.ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single .ts-control {
  padding-right: 2rem !important;
}

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

.ts-wrapper.plugin-remove_button .item .remove {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border: none;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1;
}

.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;
}

/* Red remove button for flagged items */
.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before {
  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='%23991B1B'%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");
}

.dark .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before {
  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='%23FCA5A5'%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");
}

/* Add separate dark mode version */
.dark {
  .ts-wrapper.plugin-remove_button .item .remove::before {
    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='%23A1A1A1'%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");
  }
}

.ts-wrapper.plugin-remove_button .item .remove {
  font-size: 0 !important;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  margin-right: 0.25rem;
  margin-left: 0.125rem !important;
  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: #737373;
}

.dark .ts-wrapper.plugin-remove_button .item .remove {
  color: #a3a3a3;
}

.dark .ts-wrapper.plugin-remove_button .item .remove:hover {
  background-color: #404040;
}

/* Red remove button styling for flagged items inside input */
.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove {
  color: #b91c1c;
}

.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove:hover {
  background-color: #fecaca;
  color: #7f1d1d;
}

.dark .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove {
  color: #fca5a5;
}

.dark .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove:hover {
  background-color: rgba(254, 226, 226, 0.1);
  color: #fecaca;
}

/* Flag toggle button styling */
.ts-wrapper.plugin-remove_button .item .flag-toggle {
  color: #a3a3a3;
}

.ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle {
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  color: #991b1b;
}

.ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle:hover {
  background-color: #fecaca;
}

.dark .ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle {
  color: #fca5a5;
}

.dark .ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle:hover {
  background-color: rgba(254, 226, 226, 0.1);
}

.ts-dropdown {
  z-index: 40;
  margin: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  border-top-width: 1px;
  border-style: solid;
  border-color: #d4d4d8;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.dark .ts-dropdown {
  border-color: #525252;
  background-color: #262626;
  color: #ffffff;
}

.ts-dropdown .create {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
  cursor: default;
  border-radius: 0.375rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.25rem;
}

.dark .ts-dropdown .create {
  color: #a3a3a3;
}

.ts-dropdown [data-selectable].option,
.ts-dropdown .no-results {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
  cursor: default;
  border-radius: 0.375rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.25rem;
}

.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
  cursor: not-allowed;
  border-radius: 0.375rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.25rem;
}

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

.ts-dropdown .active {
  background-color: #f5f5f5;
  color: #171717;
}

.dark .ts-dropdown .active {
  background-color: #525252;
  color: #ffffff;
}

.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;
}

/* Dark mode arrow for single select */
.dark {
  .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='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }
}

/* Add dropdown arrow to multiselect elements */
.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;
}

/* Dark mode arrow for multiselect */
.dark {
  .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='%23A1A1AA' 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 {
  margin-right: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background-color: #f5f5f5;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1;
  font-weight: 500;
  color: #171717;
}

.dark .ts-wrapper.multi .ts-control > div {
  background-color: #171717;
  color: #f5f5f5;
}

/* Ensure items don't overlap with the dropdown arrow */
.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: grab;
}

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

.ts-wrapper.plugin-remove_button .item .remove {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  margin-right: 0.25rem;
  margin-left: 0.125rem !important;
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1;
  color: rgba(23, 23, 23, 0.6);
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  color: #171717;
}

.dark .ts-wrapper.plugin-remove_button .item .remove {
  color: rgba(245, 245, 245, 0.6);
}

.dark .ts-wrapper.plugin-remove_button .item .remove:hover {
  background-color: #404040;
  color: #f5f5f5;
}

.ts-dropdown .optgroup-header {
  border-top-width: 1px;
  border-color: #d4d4d8;
  background-color: #ffffff;
  font-weight: 600;
  color: #171717;
}

.dark .ts-dropdown .optgroup-header {
  border-color: #525252;
  background-color: #262626;
  color: #f5f5f5;
}

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

.optgroup {
  margin-top: 0.375rem;
}

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

.dark .ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #525252;
}

.ts-wrapper.multi.has-items .ts-control > input {
  margin-bottom: 3px !important;
}

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

.input-hidden.focus {
  border-radius: 0.75rem !important;
  border-width: 1px;
  border-color: #d4d4d8;
}

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

/* Replace the previous attempt with this updated selector */
select[data-select-disable-typing-value="true"] + .ts-wrapper .ts-control,
select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control,
select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control input,
select[data-select-disable-typing-value="true"] + .ts-wrapper.single.input-active .ts-control {
  cursor: default;
}

.ts-dropdown-content.is-loading-more .option {
  pointer-events: none !important;
}

/* Count display for multi-select */
.ts-count-display {
  margin-right: auto;
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 1rem !important;
  line-height: 1.25rem !important;
  font-weight: 400 !important;
  pointer-events: none;
  display: none;
}

/* Hide count display when not active (explicit rule) */
.ts-control:not(.count-active) .ts-count-display {
  display: none !important;
}

/* Hide items and input when count is active */
.ts-control.count-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 spacing when count is displayed */
.ts-wrapper.multi.has-items .ts-control:has(.ts-count-display) {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* External tags styles - hide tags inside control */
.ts-control.external-tags-active .item {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset padding when external tags are active */
.ts-wrapper.multi.has-items .ts-control.external-tags-active {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !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;
}