/* Tom Select */

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

.dropdown-input {
  border-color: color-mix(in oklab, var(--color-app-text) 20%, transparent) !important;
  background-color: var(--color-app-background) !important;
  padding-left: 0.75rem !important; /* px-3 */
  padding-right: 0.75rem !important; 
  padding-top: 0.625rem !important;  /* py-2.5 */
  padding-bottom: 0.625rem !important;
  font-size: 0.875rem !important;    /* text-sm */
  color: var(--color-app-text) !important;
}
.dropdown-input::placeholder {
  color: color-mix(in oklab, var(--color-app-text) 55%, transparent) !important;
}

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

.ts-dropdown-content {
  padding-top: 0.375rem;  /* py-1.5 (6px) */
  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: 38px;
  line-height: 22px;
  width: 100%;
  padding-left: 0.75rem !important; /* px-3 */
  padding-right: 0.75rem !important; 
  padding-top: 0.625rem !important;  /* py-2.5 */
  padding-bottom: 0.625rem !important;
  cursor: default;
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-style: var(--tw-border-style);
  border-color: color-mix(in oklab,var(--color-app-text)20%,transparent);
  font-size: 1rem;            /* text-base */
  color: var(--color-app-text);
  box-shadow: none;
  outline: none;
  position: relative;
  background-color: var(--color-app-background);
}
.ts-control::placeholder {
  color: color-mix(in oklab, var(--color-app-text) 55%, transparent);
}
.ts-control:focus {
  box-shadow: 0 0 0 2px var(--color-app-primary) inset;
}
.ts-control[disabled] {
  cursor: not-allowed;
  background-color: color-mix(in oklab, var(--color-app-background) 85%, var(--color-app-text) 15%);
}
.ts-control.error {
  border-color: #f87171;      /* border-red-400 */
  outline-color: #fca5a5;     /* outline-red-300 */
}
.ts-control.error:focus {
  outline-color: #ef4444;     /* focus:outline-red-500 */
}
@media (prefers-color-scheme: dark) {
  .ts-control.error {
    border-color: #dc2626; /* dark:border-red-600 */
    outline-color: #ef4444; /* dark:outline-red-500 */
  }
}
.ts-control div + input[readonly] {
  display: none !important;
}

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

/* 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;          /* bg-neutral-100 */
  color: #171717;                     /* text-neutral-900 */
}
@media (prefers-color-scheme: dark) {
  .ts-dropdown .active.create {
    background-color: #52525b;        /* dark:bg-neutral-600 */
    color: #fff;                      /* dark:text-white */
  }
}

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

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

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

.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); /* bg-orange-500/20 */
}
@media (prefers-color-scheme: dark) {
  .ts-dropdown [data-selectable] .highlight {
    background-color: rgba(253,224,71, 0.2); /* dark:bg-yellow-500/20 */
  }
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background-color: var(--color-app-background);
}

.input-active {
  box-shadow: 0 0 0 2px var(--color-app-primary) inset;
  border-radius: 0.5rem;
}

.ts-wrapper {
  background-color: transparent;
  border-radius: 0.5rem;
}
/* @media (prefers-color-scheme: dark) {
  .ts-wrapper {
    background-color: #404040;
  }
} */

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background-color: transparent !important;
}
@media (prefers-color-scheme: dark) {
  .ts-control,
  .ts-wrapper.single.input-active .ts-control {
    background-color: transparent !important;
  }
}

.ts-control input {
  margin: 0 !important;
  background-color: var(--color-app-background);
  font-size: 1rem;
  color: var(--color-app-text);
  line-height: 1.5rem;
}
.ts-control input::placeholder {
  color: color-mix(in oklab, var(--color-app-text) 55%, transparent);
}
.ts-control input[readonly] {
  cursor: pointer !important;
}

@media (min-width: 640px) {
  .ts-control input {
    font-size: 0.875rem; /* 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; /* equivalent to !pr-8 */
}

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

.ts-wrapper.plugin-remove_button .item .remove {
  border-top-right-radius: 0.5rem; /* rounded-r-lg */
  border: none;
  padding-top: 0.25rem;            /* py-1 = 4px */
  padding-bottom: 0.25rem;
  font-size: 1.125rem;             /* text-lg = 18px */
  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;                  /* size-4 = 16px */
  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 */
@media (prefers-color-scheme: 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;      /* my-0.5 */
  margin-bottom: 0.125rem;
  margin-right: 0.25rem;     /* mr-1 */
  margin-left: 0.125rem !important; /* !ml-0.5 */
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 0 !important;
  padding: 0.25rem !important;  /* !p-1 */
  line-height: 1 !important;    /* !leading-none */
  color: #737373;               /* text-neutral-500 */
}
@media (prefers-color-scheme: dark) {
  .ts-wrapper.plugin-remove_button .item .remove {
    color: #a3a3a3;                            /* dark:text-neutral-400 */
  }
  .ts-wrapper.plugin-remove_button .item .remove:hover {
    background-color: #404040;                 /* dark:hover:bg-neutral-700 */
  }
}

/* Red remove button styling for flagged items inside input */
.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove {
  color: #991b1b;                                 /* text-red-700 */
}
.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove:hover {
  background-color: #fecaca;                      /* hover:bg-red-200 */
  color: #7f1d1d;                                 /* hover:text-red-900 */
}
@media (prefers-color-scheme: dark) {
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove {
    color: #FCA5A5;                               /* dark:text-[#FCA5A5] */
  }
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove:hover {
    background-color: rgba(252,165,165,.1);       /* dark:hover:bg-red-100/10 */
    color: #fecaca;                               /* dark:hover:text-red-200 */
  }
}

/* Flag toggle button styling */
.ts-wrapper.plugin-remove_button .item .flag-toggle {
  color: #a3a3a3;
}
@media (prefers-color-scheme: dark) {
  .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.375rem;
  color: #991b1b;                             /* text-red-800 */
}
.ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle:hover {
  background-color: #fecaca;                  /* hover:bg-red-200 */
}
@media (prefers-color-scheme: dark) {
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle {
    background-color: transparent;
    color: #FCA5A5;
  }
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle:hover {
    background-color: rgba(252,165,165,.1);   /* dark:hover:bg-red-100/10 */
  }
}

.ts-dropdown {
  z-index: 40;
  margin: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--color-app-text) 20%, transparent);
  border-top-width: 1px;
  border-style: solid;
  box-shadow: none;
  background-color: var(--color-app-background);
  color: var(--color-app-text);
}
@media (prefers-color-scheme: dark) {
  .ts-dropdown {
    border-color: color-mix(in oklab, var(--color-app-text) 20%, transparent);
    background-color: var(--color-app-background);
    color: var(--color-app-text);
  }
}

.ts-dropdown .create {
  margin-left: 0.375rem;  /* mx-1.5 = 6px */
  margin-right: 0.375rem;
  cursor: default;
  border-radius: 0.375rem;        /* rounded-md */
  padding-left: 0.625rem;         /* px-2.5 = 10px */
  padding-right: 0.625rem;
  padding-top: 0.5rem;            /* py-2 = 8px */
  padding-bottom: 0.5rem;
  font-size: 0.875rem;            /* text-sm */
  color: #6b7280;                 /* dark:text-neutral-400, fallback on non-dark */
}
@media (prefers-color-scheme: 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.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
}

.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.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
}

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

.ts-dropdown .active {
  background-color: color-mix(in oklab, var(--color-app-text) 10%, transparent);    /* bg-neutral-100 */
  color: var(--color-app-text);               /* text-neutral-900 */
}

.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 24 24'%3E%3Cpath fill='%23737373' d='M12.00015 15.1c-0.1 0 -0.19165 -0.01665 -0.275 -0.05 -0.0833 -0.03335 -0.16665 -0.09165 -0.25 -0.175l-4.95 -4.95c-0.15 -0.15 -0.2208 -0.32915 -0.2125 -0.5375 0.00835 -0.20835 0.0875 -0.3875 0.2375 -0.5375 0.15 -0.15 0.3292 -0.225 0.5375 -0.225 0.20835 0 0.3875 0.075 0.5375 0.225l4.375 4.4 4.4 -4.4c0.15 -0.15 0.325 -0.22085 0.525 -0.2125 0.2 0.00835 0.375 0.0875 0.525 0.2375 0.15 0.15 0.225 0.32915 0.225 0.5375 0 0.20835 -0.075 0.3875 -0.225 0.5375l-4.925 4.925c-0.0833 0.08335 -0.16665 0.14165 -0.25 0.175 -0.0833 0.03335 -0.175 0.05 -0.275 0.05Z'/%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 */
@media (prefers-color-scheme: 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 24 24'%3E%3Cpath fill='%23A1A1AA' d='M12.00015 15.1c-0.1 0 -0.19165 -0.01665 -0.275 -0.05 -0.0833 -0.03335 -0.16665 -0.09165 -0.25 -0.175l-4.95 -4.95c-0.15 -0.15 -0.2208 -0.32915 -0.2125 -0.5375 0.00835 -0.20835 0.0875 -0.3875 0.2375 -0.5375 0.15 -0.15 0.3292 -0.225 0.5375 -0.225 0.20835 0 0.3875 0.075 0.5375 0.225l4.375 4.4 4.4 -4.4c0.15 -0.15 0.325 -0.22085 0.525 -0.2125 0.2 0.00835 0.375 0.0875 0.525 0.2375 0.15 0.15 0.225 0.32915 0.225 0.5375 0 0.20835 -0.075 0.3875 -0.225 0.5375l-4.925 4.925c-0.0833 0.08335 -0.16665 0.14165 -0.25 0.175 -0.0833 0.03335 -0.175 0.05 -0.275 0.05Z'/%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 */
@media (prefers-color-scheme: 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: #f3f4f6;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 500;
  color: #171717;
}
@media (prefers-color-scheme: dark) {
  .ts-wrapper.multi .ts-control > div {
    background-color: #171717;
    color: #f3f4f6;
  }
}

/* Ensure items don't overlap with the dropdown arrow */
.ts-wrapper.multi.has-items .ts-control {
  padding-top: 7px !important;   /* !pt-[7px] */
  padding-right: 2rem !important;/* !pr-8 */
  padding-bottom: 4px !important;/* !pb-[4px] */
}

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

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  margin-left: -0.125rem !important;/* !-ml-0.5 */
  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.375rem;
  border: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: rgba(23, 23, 23, .6);
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  color: #171717;
}
@media (prefers-color-scheme: dark) {
  .ts-wrapper.plugin-remove_button .item .remove {
    color: rgba(243, 244, 246, .6);
  }
  .ts-wrapper.plugin-remove_button .item .remove:hover {
    background-color: #404040;
    color: #f3f4f6;
  }
}

.ts-dropdown .optgroup-header {
  border-top: 1px solid #d1d5db;
  background-color: #fff;
  font-weight: 600;
  color: #171717;
}
@media (prefers-color-scheme: dark) {
  .ts-dropdown .optgroup-header {
    border-top: 1px solid #52525b;
    background-color: #262626;
    color: #f3f4f6;
  }
}

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

@media (prefers-color-scheme: dark) {
  .dark .ts-dropdown.plugin-optgroup_columns .optgroup {
    border-right: 1px solid #525252;
  }
}

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

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

.input-hidden.focus {
  border-radius: 0.5rem !important;
  border-width: 1px;
  border-color: #d1d5db;
}
@media (prefers-color-scheme: dark) {
  .input-hidden.focus {
    border-color: #52525b;
  }
}

/* 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: 0.875rem !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.5rem !important;
  padding-bottom: 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;
}

/* Hide the TomSelect wrapper when a custom trigger controls the dropdown */
.ts-control.custom-trigger-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single .ts-control.plain-select,
.ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).multi .ts-control.plain-select {
  background: none !important;
  padding: 0 !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}

.ts-wrapper:has(.plain-select) {
  background-color: transparent !important;
  box-shadow: none !important;
}