:root { --control-icon-inset: 11px; }
.modal-header > :first-child { min-width: 0; }
.modal-header h2 { overflow-wrap: anywhere; }
.modal-close {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  line-height: 1;
}
.modal-close:hover { background: var(--accent); }
.modal-close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.modal-close img { display: block; width: 20px; height: 20px; filter: var(--icon-filter); }
.ts-wrapper { width: 100%; min-width: 0; margin: 0; font: inherit; }
.ts-wrapper .ts-control {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--input);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  box-shadow: none;
}
/* Match TomSelect's focused-single specificity without overriding focus/validation borders. */
.ts-wrapper.single.input-active .ts-control { background: var(--background); }
.ts-wrapper.single .ts-control { flex-wrap: nowrap; align-items: center; }
select:not([multiple]):where(:not([size]), [size="0"], [size="1"]) {
  -webkit-appearance: none;
  appearance: none;
}
/* One theme-aware chevron and inset for native and searchable dropdowns. */
select:not([multiple]):where(:not([size]), [size="0"], [size="1"]),
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
  padding-right: calc(var(--control-icon-inset) + 21px);
  background-image:
    linear-gradient(45deg, transparent calc(50% - .75px), var(--muted-foreground) calc(50% - .75px), var(--muted-foreground) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(135deg, transparent calc(50% - .75px), var(--muted-foreground) calc(50% - .75px), var(--muted-foreground) calc(50% + .75px), transparent calc(50% + .75px));
  background-position: right calc(var(--control-icon-inset) + 5px) center, right var(--control-icon-inset) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
/* Native action buttons keep their behavior, without browser-specific end spacing. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"], [type="search"], [type="number"]) {
  padding-right: var(--control-icon-inset);
}
input::-webkit-calendar-picker-indicator {
  margin-right: 0;
  padding: 0;
}
input[type="search"]::-webkit-search-cancel-button {
  margin-right: 0;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button {
  margin-right: 0;
  padding: 0;
}
.ts-wrapper.single .ts-control > .item {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0;
}
.ts-wrapper .ts-control input { width: auto; color: var(--foreground); font: inherit; }
.ts-wrapper .ts-control input::placeholder { color: var(--muted-foreground); opacity: 1; }
.ts-wrapper.focus .ts-control { border-color: var(--ring); box-shadow: 0 0 0 3px var(--focus-shadow); }
.ts-wrapper.validation-error.invalid .ts-control { border-color: var(--destructive); }
.ts-wrapper.multi .ts-control > .item {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 3px 6px; border-radius: 4px; overflow-wrap: anywhere;
  background: var(--secondary); color: var(--foreground);
}
.ts-wrapper.multi .ts-control > .item.active { background: var(--border); color: var(--foreground); }
.ts-wrapper.multi.disabled .ts-control > .item,
.ts-wrapper.multi.disabled .ts-control > .item.active { background: var(--secondary); color: var(--foreground); }
.ts-wrapper.plugin-remove_button .item .remove { padding: 0 5px; font-size: 18px; }
.ts-wrapper.multi.plugin-remove_button .ts-control > .item .remove { border-color: var(--border); }
.ts-wrapper.plugin-remove_button:not(.disabled) .item .remove:hover { background: var(--accent); }
.ts-dropdown {
  z-index: 1100; margin: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--popover); color: var(--popover-foreground);
  font: inherit; box-shadow: 0 6px 20px var(--shadow-popup);
}
.ts-dropdown .option, .ts-dropdown .no-results { padding: 9px 10px; overflow-wrap: anywhere; }
.ts-dropdown .optgroup-header { background: var(--popover); color: var(--muted-foreground); }
.ts-dropdown .active { background: var(--accent); color: var(--foreground); }
.ts-dropdown .selected { background: var(--secondary); }
.ts-dropdown .highlight,
.ts-dropdown [data-selectable] .highlight { background: var(--search-highlight); border-radius: 2px; }
.ts-dropdown [data-disabled] { opacity: .5; cursor: not-allowed; }
.ts-dropdown-content { overscroll-behavior: contain; }