/* Tom Select — alignment with Tabler form controls */

/* Match Tabler's default form-control height & padding */
.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-control .ts-control {
  min-height: calc(1.4285714286em + 0.875rem + 2px);
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4285714286;
  border-radius: 4px;
  background-color: #fff;
}

/* Small variant — when source select uses .form-select-sm / .form-control-sm */
.ts-wrapper.form-select-sm .ts-control,
.ts-wrapper.form-control-sm .ts-control {
  min-height: calc(1.4285714286em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* ── Dropdown panel ─────────────────────────────────────────────────────── */
/* Lock down the panel so global page styles (font-size, transparency,
   icon-width rules) cannot leak in.                                         */
.ts-dropdown {
  z-index: 1080;
  background-color: #fff !important;
  color: #1e293b !important;
  font-size: 0.875rem !important;
  line-height: 1.4285714286 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 0;
  margin-top: 2px;
}

/* In-place dropdowns are positioned by Tom Select relative to the wrapper.
   Make sure the wrapper is the positioning context.                         */
.ts-wrapper {
  position: relative;
}
.ts-wrapper .ts-dropdown {
  left: 0;
  right: auto;
  width: 100%;
  min-width: 100%;
}

.ts-dropdown,
.ts-dropdown * {
  box-sizing: border-box;
}

/* Search input inside the dropdown */
.ts-dropdown .dropdown-input-wrap {
  background-color: #fff;
  padding: 0.5rem;
  border-bottom: 1px solid #e9ecef;
}
.ts-dropdown .dropdown-input {
  font-size: 0.875rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  width: 100%;
  box-shadow: none;
}

/* Option rows */
.ts-dropdown .ts-dropdown-content {
  background-color: #fff;
  max-height: 280px;
  overflow-y: auto;
  padding: 0;
}
.ts-dropdown .option,
.ts-dropdown [data-selectable] {
  background-color: #fff;
  color: #1e293b;
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  white-space: normal;
}
.ts-dropdown .option.active,
.ts-dropdown [data-selectable].active {
  background-color: #e7f1ff;
  color: #1e293b;
}
.ts-dropdown .option:hover,
.ts-dropdown [data-selectable]:hover {
  background-color: #f1f3f5;
}
.ts-dropdown .option.selected,
.ts-dropdown [data-selectable].selected {
  background-color: #e9ecef;
}

/* No-results / loading messages */
.ts-dropdown .no-results,
.ts-dropdown .optgroup-header {
  background-color: #fff;
  color: #6b7280;
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

/* Defuse global icon-font rules: page-wide CSS forces .ti, [class*="ti-"]
   to width:1em, which can collide with class names that happen to start
   with "ti" inside the dropdown. Anchor here just in case.                  */
.ts-dropdown :not(.ti):not([class*="ti-"]) {
  font-family: inherit;
}

/* ── Inside Bootstrap modals ───────────────────────────────────────────── */
/* Bootstrap modal is z-index 1055; we already raised the dropdown to 1080.
   When dropdownParent='body', this still works since z-index applies in the
   global stacking context.                                                  */

/* Input-group rounding */
.input-group > .ts-wrapper {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .ts-wrapper:not(:first-child) .ts-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .ts-wrapper:not(:last-child) .ts-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Validation states */
.ts-wrapper.is-invalid .ts-control {
  border-color: var(--tblr-danger, #d63939);
}
.ts-wrapper.is-valid .ts-control {
  border-color: var(--tblr-success, #2fb344);
}

/* Disabled */
.ts-wrapper.disabled .ts-control,
.ts-wrapper.form-control.disabled .ts-control {
  background-color: #f1f3f5;
  opacity: 1;
}