/* Scope Tom Select to the SyncBroker wrapper and align it with sb- form fields.
   Tom Select's important-free defaults sit under the plugin's .syncbroker
   important layer, so these overrides are namespaced to win predictably. */
.syncbroker .ts-control {
    border-radius: 0.375rem;
    border-color: #d1d5db;
    font-family: var(--sb-secondary-font-family, inherit);
    min-height: 38px;
}
.syncbroker .ts-control,
.syncbroker .ts-dropdown {
    font-size: 0.875rem;
}
.syncbroker .ts-control .item {
    background: var(--sb-primary-color, #2563eb);
    color: #fff;
    border-radius: 0.25rem;
}
.syncbroker .ts-dropdown .active {
    background: var(--sb-primary-color, #2563eb);
    color: #fff;
}

/* Tom Select copies the select's classes onto its wrapper, so .sb-form-control drew a
 * second frame around the real control (.ts-control). */
.syncbroker .ts-wrapper.sb-form-control,
.syncbroker .ts-wrapper.sb-form-select {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
/* Tom Select's own .ts-control input (0,1,1) shrank the typed text to 13px. */
.syncbroker .ts-control input {
    font-size: inherit;
}