/* Global live-search dropdown styling for Tom Select */
.ts-wrapper {
    width: 100%;
}

.ts-wrapper.form-control,
.ts-wrapper.form-select {
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ts-wrapper.form-select {
    background-image: none;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    align-items: center;
    min-height: calc(1.5em + 16px + calc(var(--bs-border-width) * 2));
    padding: 8px 38px 8px 16px;
    border: var(--bs-border-width) solid #dfe5ef;
    border-radius: 7px;
    background-color: #fff;
    color: #2a3547;
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: none;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.ts-wrapper.multi .ts-control {
    padding-right: 16px;
}

.ts-wrapper.form-control-sm.single .ts-control,
.ts-wrapper.form-control-sm.multi .ts-control,
.ts-wrapper.form-select-sm.single .ts-control,
.ts-wrapper.form-select-sm.multi .ts-control {
    height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
    min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.765625rem;
}

.ts-wrapper.form-control-sm.multi .ts-control,
.ts-wrapper.form-select-sm.multi .ts-control {
    padding-right: 0.5rem;
}

.ts-wrapper.form-control-sm .ts-control > input,
.ts-wrapper.form-select-sm .ts-control > input {
    font-size: 0.765625rem;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: #5d87ff;
    box-shadow: 0 0 0 0.2rem rgba(93, 135, 255, 0.14);
}

.ts-wrapper.disabled .ts-control,
.ts-wrapper.readonly .ts-control {
    background-color: #f6f9fc;
    opacity: 1;
}

.ts-wrapper .ts-control > input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2a3547;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ts-wrapper .ts-control > input::placeholder {
    color: #7c8fac;
    opacity: 1;
}

.ts-wrapper.single .ts-control .item {
    overflow: hidden;
    color: #2a3547;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-wrapper.multi .ts-control .item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 2px 4px 2px 0;
    padding: 0.2rem 0.5rem;
    border: 1px solid #d9e2ef;
    border-radius: 6px;
    background-color: #f6f9fc;
    color: #2a3547;
    font-size: 0.8125rem;
}

.ts-wrapper.plugin-remove_button .item .remove {
    border-left-color: #d9e2ef;
    color: #5a6a85;
}

.ts-wrapper.single .ts-control::after {
    right: 0.95rem;
    border-color: #2a3547 transparent transparent transparent;
    border-width: 5px 5px 0 5px;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent #2a3547 transparent;
    border-width: 0 5px 5px 5px;
}

.ts-dropdown {
    z-index: 9999 !important;
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid #d9e2ef;
    border-radius: 7px;
    background-color: #fff;
    box-shadow: 0 12px 30px rgba(42, 53, 71, 0.16);
    color: #2a3547;
    font-size: 0.875rem;
}

.ts-dropdown .ts-dropdown-content {
    max-height: 260px;
    padding: 6px;
}

.ts-dropdown .option,
.ts-dropdown .create,
.ts-dropdown .no-results,
.ts-dropdown .active.create {
    border-radius: 6px;
    padding: 0.55rem 0.65rem;
    color: #2a3547;
    line-height: 1.35;
}

.ts-dropdown .option small,
.ts-dropdown .option .text-muted {
    color: #7c8fac !important;
}

.ts-dropdown .active,
.ts-dropdown .option:hover {
    background-color: #ecf2ff;
    color: #2a3547;
}

.ts-dropdown .selected {
    background-color: #5d87ff;
    color: #fff;
}

.ts-dropdown .selected small,
.ts-dropdown .selected .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

.ts-wrapper.is-invalid .ts-control,
.is-invalid + .ts-wrapper .ts-control {
    border-color: #fa896b;
}

.ts-wrapper.is-invalid.focus .ts-control,
.ts-wrapper.is-invalid.dropdown-active .ts-control,
.is-invalid + .ts-wrapper.focus .ts-control,
.is-invalid + .ts-wrapper.dropdown-active .ts-control {
    border-color: #fa896b;
    box-shadow: 0 0 0 0.2rem rgba(250, 137, 107, 0.18);
}

@media (max-width: 768px) {
    .ts-dropdown .ts-dropdown-content {
        max-height: 220px;
    }
}